html,
body {
    height: 100%;
    font-family: "Lato", sans-serif;
    -webkit-font-smoothing: antialiased;
    /* color: var(--hs-text, #333); */
    /* font-size: 14px; */
}

.cover {
    height: auto;
    background-image: url(../img/main_image.jpg);
    background-size: cover;
    margin-top: 60px;
    padding: 100px 0;
}

.box {
    width: 100%;
    height: auto;
    font-family: 'Rubik', 'DroidKufiRegular', sans-serif;
    color: var(--hs-text-muted, #5f6773);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.42857143;
}

.main_result {
    padding: 10px 10px 0;
    margin: 0;
    float: left;
    width: 100%;
}

.flight_footer {
    border-top: 1px solid var(--hs-border, #d5d5d5);
    padding: 20px;
    float: left;
    text-transform: uppercase;
    /* margin-top: 10px; */
    /* width: 100%; */
}

.left {
    padding-left: 0;
}

.flight_name {
    float: left;
    width: 20%;
}

.flight_name figure {
    text-align: center;
    margin: 0 auto;
    padding-right: 0;
}

.flight_name figcaption {
    margin-top: 2px;
}

.flight_location {
    float: left;
    width: 62%;
    text-align: center;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.flight_from {
    float: left;
    width: 25%;
    text-align: right;
}

.flight_location h4 {
    font-size: 18px;
    color: var(--hs-brand-ink, #10507e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 3px;
}


.flight_location h3 {
    font-size: 13px;
    color: var(--hs-text-muted, #5f6773);
    font-family: "Rubik";
    font-weight: 400;
    margin: 0;
    letter-spacing: 0;
}

.flight_from span,
.flight_to span {
    color: var(--hs-text, #323f51);
    font-size: 13px;
    line-height: 13px;
}

.flight_location p,
.flight_to p {
    font-size: 13px;
    margin: 0;
    line-height: 13px;
}

.onwardIcon {
    float: left;
    line-height: 25px;
    padding: 10px 17px;
    text-align: center;
    width: 48%;
    display: flex;
    align-items: center;
}

.onwardIcon .border {
    width: 100%;
    position: relative;
    color: var(--hs-text-muted, #5f6773);
    font-size: 13px;
    border: none !important
}

.onwardIcon .border span.connections {
    font-size: 12px;
}

.onwardIcon .border span {
    display: block;
    line-height: 24px;
}

.onwardIcon .border:before {
    border-bottom: 1px dashed var(--hs-border-strong, #c8cacd);
    width: 88%;
    content: "";
    height: 1px;
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
}

.onwardIcon .border:after {
    width: 21px;
    height: 17px;
    content: "";
    display: block;
    position: absolute;
    right: 0;
    background: url(../img/plane-solid.svg) no-repeat;
    top: 50%;
    margin-top: -8.5px;
    /* content: "\f072"; */
    /* font-family: FontAwesome */
}

.flight_to {
    float: left;
    width: 25%;
    text-align: left;
}

.flight_duration {
    /* width: 15%; */
    float: left;
    text-align: left;
    padding: 5px 0;
    display: flex;
    align-items: center;
    padding-top: 25px;
}

.flight_duration p {
    margin-bottom: 1px;
    font-size: 13px;
    color: var(--hs-text, #323f51);
}

.flight_duration p span {
    color: var(--hs-text-subtle, #848992);
    display: block;
}


.flight_footer ul li {
    color: var(--hs-text-muted, #636363);
    display: inline-table;
    font-size: 14px;
    padding: 4px 18px;
}

.flight_footer ul li a {
    color: var(--hs-text-muted, #636363);
    cursor: pointer;
    font-size: 14px;
}

.flight_details_icon {
    width: 20px;
    height: 20px;
    padding-left: 20px;
    display: block;
    float: left;
}

.flight_footer ul li a:hover {
    color: var(--hs-text, #323f51);
    cursor: pointer;
    text-decoration: none;
}

.flight_name figcaption p {
    font-size: 12px;
    text-align: center;
    margin: 0;
}

.ticketPrice {
    padding: 10px;
    margin-top: 0;
    height: 100%;
    float: left;
    width: 100%;
    text-align: center;
    border-left: 1px solid var(--hs-border, #d5d5d5);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flightSelectBtn {
    color: var(--hs-text-inverse, #fff);
    background: var(--hs-brand, #10507e);
    font-size: 16px;
    padding: 10px;
    border: none;
    width: 100%;
    float: left;
    text-align: center;
    text-transform: uppercase;
    margin-top: 4px;
    text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    /* color: var(--hs-text, #111111); */
    font-weight: 400;
    font-family: "Lato", sans-serif;
}

h1 {
    font-size: 70px;
}

h2 {
    /* font-size: 36px; */
}

h3 {
    font-size: 30px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

p {
    font-size: 15px;
    font-family: "Lato", sans-serif;
    /* color: var(--hs-text-muted, #727171); */
    font-weight: 400;
    line-height: 25px;
    margin: 0 0 15px 0;
}



.tabset > input[type="radio"] {
    position: absolute;
    left: -200vw;
}

.tabset .tab-panel {
    display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
    display: block;
}

.tabset > label {
    position: relative;
    display: inline-block;
    padding: 15px 15px 25px;
    border: 1px solid transparent;
    border-bottom: 0;
    cursor: pointer;
    font-weight: 600;
}

.tabset > label::after {
    content: "";
    position: absolute;
    left: 15px;
    bottom: 10px;
    width: 22px;
    height: 4px;
    background: var(--hs-text-muted, #8d8d8d);
}

input:focus-visible + label {
    outline: 2px solid rgba(var(--hs-brand-rgb, 0, 102, 204), 1);
    border-radius: 3px;
}

.tabset > label:hover,
.tabset > input:focus + label,
.tabset > input:checked + label {
    color: var(--hs-brand-ink, #06c);
}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
    background: var(--hs-brand, #06c);
}

.tabset > input:checked + label {
    border-color: var(--hs-border, #ccc);
    border-bottom: 1px solid var(--hs-surface-raised, #fff);
    margin-bottom: -1px;
}

.tab-panel {
    padding: 30px 0;
    border-top: 1px solid var(--hs-border, #ccc);
}
*,
*:before,
*:after {
    box-sizing: border-box;
}
.tabset {
    max-width: 65em;
}

#popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    padding: 20px;
    background-color: var(--hs-surface-raised, white);
    box-shadow: 0px 0px 10px rgba(var(--hs-shadow-rgb, 0, 0, 0), calc(0.1 * var(--hs-shadow-boost, 1)));
    z-index: 1000;
}
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--hs-text-rgb, 0, 0, 0), 0.5);
    z-index: 999;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
   Fare rules: Amadeus layout (tabs + accordions). Travelport reuses the same
   tab/accordion markup via amadeusHtmlFareRulesTabsFromPanels; AerTicket uses
   the same shell classes with provider HTML normalized below.
   ------------------------------------------------------------------------- */
.zf-fare-rules {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--hs-text, #334155);
    max-width: 65em;
    box-sizing: border-box;
}

.zf-fare-rules .tabset {
    max-width: none;
}

.zf-fare-rules .zf-fr-message p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.zf-fr-rule-block {
    margin-bottom: 10px;
    border: 1px solid var(--hs-border-subtle, #e2e8f0);
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--hs-surface-raised, #fff);
}

.zf-fr-rule-block__summary {
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    background-color: var(--hs-surface-alt, #f1f5f9);
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    border-bottom: 1px solid var(--hs-border-subtle, #e2e8f0);
    color: var(--hs-text, #1e293b);
}

.zf-fr-rule-block__summary::-webkit-details-marker {
    display: none;
}

.zf-fr-rule-block__body {
    padding: 12px 16px;
    font-size: 0.9375rem;
    line-height: 1.55;
    background: var(--hs-surface-raised, #fff);
    color: var(--hs-text, #334155);
}

.zf-fare-rules--aerticket table {
    width: 100%;
    border-collapse: collapse;
    font-size: inherit;
}

.zf-fare-rules--aerticket th,
.zf-fare-rules--aerticket td {
    border: 1px solid var(--hs-border-subtle, #e2e8f0);
    padding: 8px 10px;
    vertical-align: top;
}

.zf-fare-rules--aerticket img {
    max-width: 100%;
    height: auto;
}

.zf-fare-rules--aerticket h1,
.zf-fare-rules--aerticket h2,
.zf-fare-rules--aerticket h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hs-text, #1e293b);
    margin: 0 0 0.5rem;
}

.zf-fr-aerticket-provider-html {
    padding-top: 4px;
}

.zf-fare-rules--aerticket.amadeus-fare-rules .zf-fr-aerticket-provider-html p {
    margin: 0 0 0.65rem;
    font-size: inherit;
    line-height: inherit;
}

.zf-fare-rules .zf-fr-api-tabs {
    margin-bottom: 8px;
}

.zf-fare-rules .zf-fr-api-tabs > .zf-fr-api-tabs__radio {
    position: absolute;
    left: -200vw;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.zf-fare-rules .zf-fr-api-tabs__labels {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    border-bottom: 1px solid var(--hs-border, #ccc);
    padding-bottom: 0;
    margin-bottom: 0;
}

.zf-fare-rules .zf-fr-api-tabs__label {
    position: relative;
    cursor: pointer;
    padding: 12px 18px 22px;
    margin-bottom: -1px;
    font-weight: 600;
    font-size: 15px;
    color: var(--hs-text-muted, #64748b);
    border: 1px solid transparent;
    border-bottom: 0;
    display: inline-block;
}

.zf-fare-rules .zf-fr-api-tabs__label::after {
    content: "";
    position: absolute;
    left: 18px;
    bottom: 10px;
    width: 22px;
    height: 4px;
    background: var(--hs-text-muted, #8d8d8d);
    border-radius: 2px;
}

.zf-fare-rules .zf-fr-api-tabs__label:hover {
    color: var(--hs-brand-ink, #06c);
}

.zf-fare-rules .zf-fr-api-tabs__label:hover::after {
    background: var(--hs-brand, #06c);
}

.zf-fare-rules .zf-fr-api-tabs__panel {
    display: none;
    padding: 20px 0 8px;
    border-top: 1px solid var(--hs-border, #ccc);
}
/* ==========================================================================
   Native <select> drop-downs

   The other pickers in these forms are select2, which renders its panel as ordinary
   DOM and therefore picks up the theme like anything else. A plain <select> does not:
   its list is drawn by the browser, and with nothing styling <option> it defaults to
   system white -- which is why the currency field stayed white while nationality and
   residence went beige. 70 native selects across the B2B views had the same problem,
   so this is set once here rather than per form.

   PLATFORM LIMIT: Chrome and Firefox on Windows and Linux honour these; macOS Safari
   and Chrome draw a genuinely native popup that ignores them, and the list stays
   system-coloured there. That is the same wall the <input type="date"> calendar hits --
   the difference is that a <select> is at least reachable on the platforms most of
   these agents use.
   ========================================================================== */
select option,
select optgroup {
    background-color: var(--hs-surface-raised, #fff);
    color: var(--hs-text, #212529);
}