/* input(329,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(345,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' */
.lookup-page-container {
    display: flex;
    flex-direction: column;
    gap: var(--ds-size-400);
    padding: var(--ds-size-300);
    color: var(--ds-basic-color-texticon-default);
}

#global-seats-form, #upsell-seats-form {
    display: none;
}

.manage-res-content {
    margin: var(--ds-size-300) 0;
}

.res-lookup-form-wrapper {
    background-color: var(--ds-basic-color-surface-neutral-subtle);
    padding: var(--ds-size-500) var(--ds-size-300);
    margin: calc(-1 * var(--ds-size-300));
}

#res-group-toggle-off::part(contentWrapper),
#res-group-toggle-on::part(contentWrapper) {
    margin-inline: var(--ds-size-150);

}

.res-lookup-text-body {
    margin: 0 0 ;
}

.res-lookup-content {
    margin: var(--ds-size-300) 0;
}

.res-lookup-btn {
    display: block;
    margin: var(--ds-size-300) 0;
}

.hidden {
    display: none;
}

@media screen and (min-width: 1024px) {
    .lookup-page-container {
        flex-direction: row;
        margin: 0 auto var(--ds-size-800);
        max-width: var(--ds-grid-breakpoint-xl);
        padding: var(--ds-size-300);
    }

    .hidden {
        display: none;
    }

    .error-warning-not-shown {
        margin-top: 95px;
    }

    .error-warning-shown {
        margin-top: var(--ds-size-300);
    }

    .manage-res-wrapper {
        max-width: 31rem;
        padding: 0;
    }

    .res-lookup-form-wrapper {
        padding: var(--ds-size-700) 10%;
        max-width: 340px;
        margin: unset;
    }
}

:root {
  --alert-on-light-warning: var(--ds-basic-color-status-error);
}

body,
html {
  height: 100%;
}

body {
  margin: 0;
  box-sizing: border-box;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}

button {
  text-transform: none;
  -webkit-appearance: button;
  cursor: pointer;
  overflow: visible;
}

button,
input {
    color: inherit;
    font: inherit;
    margin: 0;
}

header {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  min-height: 50vh;
}

footer {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

manage-vpnr-hyperlink[type="nav"],
manage-vpnr-hyperlink[onclick] {
  cursor: pointer;
}

.font-color-text-error {
  color: var(--ds-basic-color-status-error);
}

.reservation-details {
  margin: 0 auto;
  max-width: var(--ds-grid-breakpoint-xl);
}

.reservation-details a:focus,
button:focus {
  outline: 1px solid var(--ds-advanced-color-state-focused);
  border-radius: var(--ds-border-radius);
}

.confirmation-code-container {
  display: flex;
  align-items: center;
  margin: var(--ds-size-75) var(--ds-size-200);
  gap: var(--ds-size-200);
}

.confirmation-code-label {
  color: var(--ds-basic-color-texticon-muted);
}

.confirmation-code {
  margin: 0;
  color: var(--ds-basic-color-texticon-default);
}

.confirmation-destination-avatar {
  height: var(--ds-size-400);
  width: var(--ds-size-400);
}

.details .contact-us-banner-container {
  margin-top: 2rem;
}

.hero-container {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero-image {
  height: 12.5rem;
  background-size: cover;
  background-position: center;
}

@media screen and (min-width: 768px) {
.hero-image {
    height: 20rem;
  }
}

.hero-greeting {
  margin: var(--ds-size-200);
  color: var(--ds-basic-color-texticon-default);
  word-break: normal;
  overflow-wrap: anywhere;
}

.same-day-confirmed {
  text-align: center;
  color: var(--ds-basic-color-texticon-muted);
}

.toast-container {
  margin: var(--ds-size-300) var(--ds-size-100) var(--ds-size-150) var(--ds-size-100)
}

.linked-reservations {
  margin: var(--ds-size-200) 0;
  padding: var(--ds-size-200) var(--ds-size-150) var(--ds-size-200) var(--ds-size-200);
  box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1);
}

.linked-reservation-icon {
  --ds-auro-icon-size: 1.25rem;
}

.side-nav-from {
  display: inline-block;
}

.meili-car-rentals {
  margin: var(--ds-size-300) var(--ds-size-100);
}

#upgrade-ineligible-dialog-btn {
  display: none;
}

#vpnr-loading-skeleton {
  height: 100%;
}

.vpnr-app-container {
    margin-top: var(--ds-size-400);
}

@media screen and (min-width: 1024px) {
  .hero-image {
    display: none;
  }

  .hero-greeting {
    margin: 0 var(--ds-size-200);
    margin-bottom: var(--ds-size-100);
  }

  .reservation-details {
    display: flex;
    overflow: auto;
  }

  .reservation-subheader {
    order: 1;
  }

  .confirmation-code-container {
    padding: 0 var(--ds-size-300);
    flex-direction: column;
    border-bottom: unset;
    align-items: stretch;
    gap: var(--ds-size-100);
    margin: 0;
  }

  .confirmation-destination-avatar{
    align-self: center;
    height: 180px;
    width: 180px;
  }

  .details .contact-us-banner-container {
    margin-top: 0;
  }

.meili-car-rentals {
    margin: var(--ds-size-300) var(--ds-size-200);
  }

}

@media screen and (max-width: 1023px){
  .itinerary-actions > *,
  .passenger-actions > * {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
  }

  .itinerary-actions {
    margin: var(--ds-size-150) 0;
  }
}

.join-atmos-rewards {
    margin: var(--ds-size-200) 0;
    padding: 0 var(--ds-size-150) 0 var(--ds-size-200);
}

@media screen and (min-width: 1024px) {
    .join-atmos-rewards {
        margin: var(--ds-size-200) var(--ds-size-200);
        padding: 0;
    }
}

.cancellation-banner-container {
    margin: 0 var(--ds-size-100);
}

@media screen and (min-width: 1024px) {
    .cancellation-banner-container {
        margin: 0;
    }
}

.carbon-offset-container {
  background-color: var(--ds-color-background-lighter);
  border-radius: var(--ds-border-radius);
  margin: 0 var(--ds-size-100);
}

.carbon-offset-background-image {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--ds-size-500) 1.625rem var(--ds-size-400);
  gap: var(--ds-size-300);

  &::before {
    background-image: url("../alaska-air-evergreen-background-image.png?v=dkjgIQfaifjFHeiIKxQmgAI9sdE");
    border-radius: var(--ds-border-radius);
    background-position: left;
    background-size: cover;
    content: "";
    position: absolute;
    width: 100%;
    inset: 0;
    z-index: 0;
    opacity: 0.4;
  }
}

.carbon-offset-icon {
  z-index: 1;
  & > img {
    width: 133px;
    height: 115.25px;
    flex-shrink: 0;
  }
}

.carbon-offset-content {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-150);
  z-index: 1;
}

.carbon-offset-header {
  color: var(--ds-basic-color-texticon-default);
}

.carbon-offset-text {
  width: 80%;
  margin: 0;
}

@media screen and (min-width: 1024px) {
  .carbon-offset-container {
    background-color: unset;
    margin: var(--ds-size-200) var(--ds-size-200) var(--ds-size-100);
    padding: unset;
  }

  .carbon-offset-background-image {
    flex-direction: row;
  }

  .carbon-offset-icon {
    padding-right: var(--ds-size-300);
    flex-shrink: 0;
  }
}

.check-bags-banner-container{
    margin: var(--ds-size-100);
}

@media screen and (min-width: 1024px) {
    .check-bags-banner-container {
        margin: var(--ds-size-200);
    }

}


.checkin-banner-post-content {
    display: flex;
    flex-direction: column;
    gap: var(--ds-size-200);
    margin: var(--ds-size-200) var(--ds-size-100);
}

.checkin-banner-post-content:not(:has(*)) {
    display: none;
}

.cdc-attestation-link::part(link) {
    text-decoration: none;
}

@media screen and (min-width: 1024px) {
    .checkin-banner-post-content {
        margin: var(--ds-size-200);
    }
}

.check-in-actions,
.bags-sdc-section:has(*) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--ds-size-100);
  margin: var(--ds-size-300);
}

.check-in-actions {
  align-items: stretch;
}

.bags-sdc-section {
  flex-direction: row;
}

.add-checked-bags,
.same-day-confirmed {
  white-space: nowrap;
}

.view-boarding-pass.sdr-boarding-pass-by-slice {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-100);
}

.view-boarding-pass.sdr-boarding-pass-by-slice .view-boarding-pass-btn {
  flex: 1 1 0;
  min-width: 0;
}

@media screen and (min-width: 1024px) {
  .check-in-actions {
    justify-content: center;
    flex-direction: row;
    align-items: center;
  }

  .view-boarding-pass.sdr-boarding-pass-by-slice {
    flex-direction: row;
  }
}

/* 2+ SDR boarding-pass buttons always stack under each other, even on desktop */
.view-boarding-pass.sdr-boarding-pass-stacked {
  flex-direction: column;
}

/* Divider between the boarding-pass buttons and the check-in button; horizontal when stacked on mobile */
.sdr-boarding-pass-divider {
  height: 1px;
  margin: 0 var(--ds-size-400);
  background: var(--ds-basic-color-border-divider);
}

/* Bags sit under the boarding-pass buttons in the left column */
.sdr-boarding-pass-column {
  display: contents;
}

.sdr-boarding-pass-column-with-bags {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-200);
}

@media screen and (min-width: 1024px) {
  /* Vertical divider beside the buttons, sized to the buttons only. Absolute so it adds no width,
     which would push the centred bags off-centre */
  .view-boarding-pass.sdr-boarding-pass-by-slice {
    position: relative;
  }

  .sdr-boarding-pass-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 1px;
    height: auto;
    margin: 0 0 0 var(--ds-size-400);
  }

  /* Boarding-pass buttons stay left aligned; the bags row is centered across the column */
  .sdr-boarding-pass-column-with-bags {
    align-items: flex-start;
  }

  /* The whole module, boarding-pass column and check-in button, aligns to the left of the page */
  .check-in-actions:has(.sdr-boarding-pass-column-with-bags) {
    justify-content: flex-start;
  }

  .sdr-boarding-pass-column-with-bags > .bags-sdc-section {
    align-self: center;
    margin: 0;
  }

  /* Reserve room for the divider between the buttons and the check-in button */
  .check-in-actions:has(.sdr-boarding-pass-divider) > .checkin-regular {
    margin-left: calc(2 * var(--ds-size-400) + 1px - var(--ds-size-100));
  }

  /* Check-in button lines up with the top of the boarding-pass column */
  .check-in-actions:has(.sdr-boarding-pass-column-with-bags) > .checkin-regular {
    align-self: flex-start;
  }
}

@media screen and (min-width: 1024px) {
  .view-boarding-pass,
  .checkin-regular {
    min-width: 268px;
  }
}

.contact-tracing-banner-container {
    margin: 0 var(--ds-size-100);
}

@media screen and (min-width: 1024px) {
    .contact-tracing-banner-container  {
        margin: 0;
    }
}

.contact-us-banner-container {
    margin: var(--ds-size-200) var(--ds-size-400) 0;
}

@media screen and (min-width: 1024px) {
    .contact-us-banner-container {
        margin: var(--ds-size-400) auto 0;
        max-width: var(--ds-grid-breakpoint-xl);
    }
}

.disruption-toast-wrapper {
    position:sticky;
    margin: 0 0.5rem 0.5rem;
    bottom: 2rem;
    z-index: 500;
}
  
.disruption-toast {
    background-color: var(--ds-color-alert-bkg-success-default);
}
  
.disruption-toast-context {
    display: flex;
}
  
.disruption-toast-context > p {
    display: inline-block;
    margin: 0px 0 0 0.5rem;
}

.disruption-toast-context button{
    display: inline-block;
    padding: 0;
    border: none;
    background-color: transparent;
    text-decoration: underline;
}

.disruption-toast-context a {
    color: var(--ds-color-text-primary-default);
}

@media screen and (min-width: 1024px) {
    .disruption-toast-wrapper {
        margin-left:2.625rem;
    }
}

.e-seat-toast-wrapper {
    position:sticky;
    margin: 0 0.5rem;
    bottom: 2rem;
    z-index: 500;
}

.e-seat-retry-form {
    display: inline-block;
}

.e-seat-retry-button{
    border: none;
    background: none;
    padding: 0;
    text-decoration: underline;
}

@media screen and (min-width: 1024px) {
    .e-seat-toast-wrapper {
        margin-left: var(--ds-size-400);
        bottom: var(--ds-size-1000); 
    }
}

.expedia-package-alert-container {
    margin: var(--ds-size-100);
}

@media screen and (min-width: 1024px) {
    .expedia-package-alert-container {
        margin: var(--ds-size-200);
    }
}

.flight-pass-alert-container {
    margin: var(--ds-size-100);
}

@media screen and (min-width: 1024px) {
    .flight-pass-alert-container {
        margin: var(--ds-size-200);
    }
}

.upgrade-dialog-content {
    margin-bottom: var(--ds-size-50);
    white-space: normal;
}

.ineligible-reissue-dialog-header {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-size-100);
}

.ineligible-reissue-dialog-button-lg {
    display: none;
}

.ineligible-reissue-dialog-button-sm {
    display: default;
}

.ineligible-reissue-dialog-container {
    align-content: center;
}

@media screen and (min-width: 768px) {
    .ineligible-reissue-dialog-header {
        align-items: center;
    }
}

@media screen and (min-width: 1024px) {
    .ineligible-reissue-dialog-button-lg {
        display: inline-block;
    }

    .ineligible-reissue-dialog-button-sm {
        display: none;
    }

    .ineligible-reissue-dialog-container {
        align-content: baseline;
    }
}

.reservation-itinerary {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-200);
  margin: var(--ds-size-100) 0;
}

.itinerary-slice {
    display: flex;
    flex-direction: row-reverse;
    padding: var(--ds-size-300) var(--ds-size-150) var(--ds-size-200) var(--ds-size-200);

    /* offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1);
}

.itinerary-airports {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.itinerary-header {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.itinerary-header .itinerary-airports {
  flex: 1 1 auto;
}

.itinerary-airports manage-vpnr-icon {
  color: var(--ds-basic-color-texticon-default);
  margin: 0 20px;
}

.itinerary-city {
  color: var(--ds-basic-color-texticon-default);
}

.itinerary-airport {
  color: var(--ds-basic-color-texticon-muted);
}

.itinerary-cancelled {
    float: right;
}

.multiple-segment-itinerary-cancelled {
    float: right;
}

.flight-info {
    float: right;
}


.reservation-itinerary .checkin-banner-post-content {
  margin: 0 var(--ds-size-100);
}

.itinerary-desktop-flight-details {
  width: 190px; 
}

@media screen and (max-width: 1023px) {
  .itinerary-desktop-flight-details {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .reservation-itinerary {
    margin: var(--ds-size-100) var(--ds-size-200);
  }

  .itinerary-slice {
    padding: var(--ds-size-200) var(--ds-size-500);
    border-bottom: 1px solid var(--ds-basic-color-border-divider);
    border-radius: var(--ds-border-radius);
  }
  .itinerary-airports {
    margin-top: 0;
    margin-bottom: 0;
  }

  .reservation-itinerary .checkin-banner-post-content {
    margin: 0;
  }
}

.itinerary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-size-200);
}

.passenger-actions > *,
.itinerary-actions > * {
  min-width: 190px;
}
@media screen and (min-width: 1024px) {
  .itinerary-mobile-actions {
    display: none;
  }
}

@media screen and (min-width: 463px) and (max-width: 1023px) { /* on 2 columns screen size, not to stretch to the full width */
  .passenger-actions > *,
  .itinerary-actions > * {
    max-width: calc(50% - var(--ds-size-100));
  }

  .itinerary-actions{
    flex-wrap: nowrap;
  }

}

.other-airline-link {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
}

.other-airline-link manage-vpnr-icon {
  width: 1rem;
  transform: translateY(0.125rem);
}

.itinerary-details-main {
  margin-right: var(--ds-size-300);
}

.itinerary-details-label {
  color: var(--ds-basic-color-texticon-muted);
  margin-bottom: var(--ds-size-50);
}

.itinerary-divider {
  display: inline-block;
  color: var(--ds-basic-color-texticon-muted);
}

.original-time-text {
  color: var(--ds-basic-color-status-error);
  text-decoration: line-through;
  vertical-align: middle;
}

.delayed-new-time {
  display: block;
}

.delayed-old-time {
  display: block;
  color: var(--ds-basic-color-status-error);
  text-decoration: line-through;
}

.canceled-original-time {
  color: var(--ds-basic-color-status-error);
  text-decoration: line-through;
}

.itinerary-details-departure,
.itinerary-details-arrival {
  margin: var(--ds-size-200) 0;
}

.itinerary-details-tripspan {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  color: var(--ds-basic-color-texticon-muted);
}

.itinerary-details-tripspan>div:not(:last-of-type)::after {
  content: "|";
  display: inline-block;
  padding: 0 var(--ds-size-50);
  color: var(--ds-basic-color-texticon-muted);
}

.itinerary-details-time-display .arrival-days-text {
  display: inline-block;
  color: var(--ds-basic-color-status-error);
}

.itinerary-details-airline {
  color: var(--ds-basic-color-texticon-muted);
  margin: var(--ds-size-200) 0;
  display: flex;
  gap: var(--ds-size-100);
}

.flight-and-status-wrapper {
  color: var(--ds-basic-color-texticon-muted);
}

.flight-code-status-wrapper,
.flight-code-status-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ds-size-150);
}

.itinerary-flight-tail {
  width: 18px;
}

.flight-code-status-text {
  gap: var(--ds-size-300);
}

.itinerary-details-flight-status-badge{
  padding: var(--ds-size-25) var(--ds-size-150);
}

.itinerary-details-flight-status-badge [auro-icon] {
  width: var(--ds-size-200);
  height: var(--ds-size-200);
  --ds-auro-icon-size: var(--ds-size-200);
}

.itinerary-layover-time-display {
  line-height: 150%;
  color: var(--ds-basic-color-texticon-default);
  padding: var(--ds-size-300) 0;
  margin: var(--ds-size-200) 0;
  border-top: 1px solid var(--ds-basic-color-border-divider);
  border-bottom: 1px solid var(--ds-basic-color-border-divider);
  font-feature-settings: 'liga' off;
}

.itinerary-details-time-display {
  display: flex;
  align-items: center;
  color: var(--ds-basic-color-texticon-default);
  white-space: nowrap;
  margin: var(--ds-size-25) 0;
  gap: var(--ds-size-50);
}

.itinerary-details-station-schedule {
  color: var(--ds-basic-color-texticon-muted);
  display: flex;
  flex-direction: column;
}

.itinerary-details-cancelled {
  float: right;
}

.itinerary-details-seating {
  color: var(--ds-basic-color-texticon-muted);
  margin: var(--ds-size-100) 0;
  display: flex;
}

.itinerary-details-seating .seating-cabin {
  display: inline-block;
  color: var(--ds-basic-color-texticon-default);
}

.itinerary-details-seating .seating-cabin #seating-cabin-saver-info-ref {
  cursor: pointer;
}

.itinerary-details-seating .seat-number {
  color: var(--ds-basic-color-texticon-default);
}

.itinerary-details-seating .seat-display-name {
  color: var(--ds-basic-color-texticon-muted);
}

.itinerary-details-seating .itinerary-divider {
  margin: 0 var(--ds-size-100);
}

.itinerary-footer {
  color: var(--ds-basic-color-texticon-muted);
}

.premium-star {
  color: var(--ds-basic-color-brand-primary);
  --ds-auro-icon-size: 1.125rem;
}

.passenger-seating-line{
  display: flex;
  align-items: center;
  gap: var(--ds-size-50);
}

.standby-rec {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--ds-size-200);
}

.standby-rec-text {
  padding: 0.1rem;
  color: var(--ds-basic-color-texticon-muted);
}

.standby-rec-icon[success] {
  --ds-auro-icon-color: var(--ds-basic-color-status-success);
}

.standby-rec-icon[warning] {
  --ds-auro-icon-color: var(--ds-basic-color-status-warning);
}

.standby-rec-icon[error] {
  --ds-auro-icon-color: var(--ds-basic-color-status-error);
}

.upgrade-status-badges manage-vpnr-badge {
  padding: var(--ds-size-25) var(--ds-size-150);
}

.upgrade-status-container {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-50);
}

.upgrade-status-first-class-badge {
  border-color: var(--ds-basic-color-fare-first);
  color: var(--ds-basic-color-fare-first);
  background-color: transparent;
}

.upgrade-status-first-class-icon {
  padding-right: var(--ds-size-25);
  width: var(--ds-size-200);
  height: var(--ds-size-200);
  --ds-auro-icon-size: var(--ds-size-200);
}

.upgrade-status-premium-badge {
  border-color: var(--ds-basic-color-fare-premiumeconomy);
  color: var(--ds-basic-color-fare-premiumeconomy);
  background-color: transparent;
}

.upgrade-status-premium-class-icon {
  padding-right: var(--ds-size-25);
  width: var(--ds-size-200);
  height: var(--ds-size-200);
  --ds-auro-icon-size: var(--ds-size-200);
}

.upsell-seat-container {
  margin-bottom: var(--ds-size-200);
}

@media screen and (min-width: 1024px),
print {
  .seating .seat-display-name {
    display: inline-block;
  }

  .itinerary-details-cancelled {
    display: inline-block;
    float: none;
  }

  .itinerary-details-tripspan {
    padding-bottom: var(--ds-size-200);
    border-bottom: 1px solid var(--ds-basic-color-border-divider);
  }

  .itinerary-details-airline {
    margin: unset;
  }

  .itinerary-details-station-schedule {
    color: var(--ds-basic-color-texticon-muted);
    flex-direction: row;
    gap: var(--ds-grid-gutter-xl);
  }

  .itinerary-details-flex-layout {
    display: flex;
    justify-content: space-between;
    margin-top: var(--ds-size-300);
    margin-bottom: var(--ds-size-200);
  }

  .itinerary-actions {
    flex-direction: column;
  }

  .upgrade-status-container {
    flex-direction: row;
    margin: var(--ds-size-150) 0;
    gap: var(--ds-size-100);
  }

  .upgrade-divider {
    border-top: var(--ds-basic-color-border-divider);
  }
}

/* adding a breakpoint for mini phone screen */
@media screen and (max-width: 402px) {
  .other-airline-action-wrapper {
    flex-direction: column;
  }
}

@media screen and (max-width: 700px) {
  .upgrade-divider {
    display: none;
  }
}

.junior-jetsetter-alert-container {
    display: flex;
    background-color: var(--ds-color-brand-goldcoast-100);
    border-radius: var(--ds-border-radius);
    padding: var(--ds-size-150) var(--ds-size-150) var(--ds-size-100) var(--ds-size-150);
    margin: var(--ds-size-150) var(--ds-size-100) 0;
}

.junior-jetsetter-alert-icon {
    transform: translateY(-2px);
    margin-right: var(--ds-size-100);
}

.junior-jetsetter-alert-content {
    margin-top: 0;
    margin-bottom: 0;
}

.junior-jetsetter-alert-content > p {
    display: inline;
}

.junior-jetsetter-alert-content > form {
    display: inline;
}

.junior-jetsetter-link-btn {
    padding: 0;
    border: none;
    background: none;
    color: var(--ds-color-text-link-default);
    text-decoration: underline;
}

@media screen and (min-width: 1024px) {
    .junior-jetsetter-alert-container {
        margin: 1.25rem var(--ds-size-200) var(--ds-size-200);
        padding-bottom: 0;
    }
}

@media screen and (min-width: 1024px) {
    .junior-jetsetter-alert-container {
        margin-top: 0;
    }
}

.link-reservation-already-linked-toast {
    background-color: var(--auro-color-alert-advisory-on-light);
}

.link-reservation-toast-wrapper {
    position: sticky;
    margin: 0 0.5rem 0.5rem;
    bottom: 2rem;
    z-index: 500;
}

@media screen and (min-width: 1024px) {
    .link-reservation-toast-wrapper {
        margin-left: 2.625rem;
    }
}

.linked-reservation-dialog-header {
    color: var(--auro-color-brand-midnight-400);
    font-size: var(--auro-text-heading-500-px-breakpoint-sm);
}

.linked-reservation-dialog-content > p {
    font-size: var(--auro-text-body-size-default);
    margin: var(--ds-size-50) 0 var(--ds-size-300);
}

.linked-reservation-dialog-content h3 {
    font-size: var(--auro-text-body-size-sm);
    color: var(--auro-color-brand-neutral-500);
}

.linked-reservation-code {
    font-size: var(--auro-text-body-size-lg);
}

.linked-reservation-dialog-icon {
    color: var(--auro-color-brand-midnight-400);
    width: 1.5rem; 
}

@media screen and (min-width: 1024px) {
    .linked-reservation-dialog-header {
        font-size: var(--auro-text-heading-500-px-breakpoint-md);
    }
}

.major-delay-banner-wrapper {
    margin: var(--ds-size-100);
}

@media screen and (min-width: 1024px) {
    .major-delay-banner-wrapper {
        margin: var(--ds-size-200);
    }
}

.emergency-contact-banner-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--ds-size-100);
    margin: var(--ds-size-100);
}

.emergency-contact-banner-wrapper:not(:has(*)) {
    display: none;
}

@media screen and (min-width: 1024px) {
    .emergency-contact-banner-wrapper {
        gap: var(--ds-size-200);
        margin: var(--ds-size-200);
    }}

.pay-ssr-alert-container {
    margin: var(--ds-size-100);
}

@media screen and (min-width: 1024px) {
    .pay-ssr-alert-container {
        margin: var(--ds-size-200);
    }
}

.read-policies-container {
    margin: var(--ds-size-200) var(--ds-size-150) var(--ds-size-50);
}
  
.read-policies-container > p{
    display: inline-block;
    margin: 0;
}
  
.read-policies-form {
    display: inline-block;
}

@media screen and (min-width: 1024px) {
    .read-policies-container {
        margin: var(--ds-size-200) var(--ds-size-100) 0;
    }
    
    .read-policies-container > p{
        display: inline-block;
    }
}

.responsive-cancels-failure-dialog-header {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-size-100);
}

@media screen and (min-width: 768px) {
    .responsive-cancels-failure-dialog-header {
        align-items: center;
    }
}

.rules-restrictions-container {
    margin: var(--ds-size-300) var(--ds-size-100);
    color: var(--ds-basic-color-texticon-default);
}

.rules-restrictions-header {
    margin-bottom: var(--ds-size-100);
}

@media screen and (min-width: 1024px) {
    .rules-restrictions-container {
        margin: var(--ds-size-300) var(--ds-size-200);
    }

    .rules-restrictions-header {
        margin-top: var(--ds-size-400);
    }
}

.rules-restrictions-container ::part(contentWrapper) {
    padding-right: var(--ds-size-50);
    padding-top: var(--ds-size-100);
}

.seating-cabin-saver-info-header {
}

.seating-cabin-saver-info-content {
}

.session-timeout-banner-container {
    margin: var(--ds-size-200) var(--ds-size-400) 0;
}

@media screen and (min-width: 1024px) {
    .session-timeout-banner-container {
        margin: var(--ds-size-400) auto 0;
        max-width: var(--ds-grid-breakpoint-xl);
    }
}

.ssr-paid-banner-container {
    display: flex;
    background-color: var(--ds-basic-color-surface-accent1-muted);
    border-radius: var(--ds-border-radius);
    padding: var(--ds-size-150);
    margin: var(--ds-size-200);
    color: var(--ds-basic-color-texticon-default)
}

.ssr-paid-banner-icon {
    transform: translateY(-2px);
    margin-right: var(--ds-size-100);
    color: var(--ds-basic-color-texticon-accent1);
}

.ssr-paid-banner-content {
    margin-top: 0;
    margin-bottom: 0;
}

.ssr-paid-banner-content > p {
    display: inline;
}

.ssr-paid-banner-content > form {
    display: inline;
}

.success-toast-wrapper {
    position:sticky;
    margin: 0 0.5rem 0.5rem;
    bottom: 2rem;
    z-index: 500;
}

@media screen and (min-width: 1024px) {
    .success-toast-wrapper {
        margin-left:2.625rem;
    }
}

.ticket-only-banner-container {
    display: flex;
    background-color: var(--ds-color-alert-advisory-default);
    border-radius: var(--ds-border-radius);
    margin: var(--ds-size-100) var(--ds-size-200);
    padding: var(--ds-size-100) var(--ds-size-150) var(--ds-size-100) var(--ds-size-200);
}

.ticket-only-banner-content {
    display: flex;
    flex-direction: row;
}

.ticket-only-banner-content manage-vpnr-icon {
    padding: var(--ds-size-100) var(--ds-size-100);
}

.ticket-only-banner-content p {
    margin: 0;
    padding: var(--ds-size-100) var(--ds-size-100) var(--ds-size-100) 0;
}

.ticket-only-banner-content p a {
    color: var(--auro-color-text-primary-on-light);
}

@media screen and (min-width: 1024px) {
    .hero-image {
        display: none;
    }

    .reservation-details {
        display: flex;
    }

    .reservation-subheader {
        order: 1;
    }

    .confirmation-code-container {
        min-width: 235px;
        padding: 0 var(--ds-size-300);
        flex-direction: column;
        border-bottom: unset;
    }

    .confirmation-code-label {
        margin-top: var(--ds-size-200);
    }
}


.trip-insurance-container {
padding: 0 var(--ds-size-100);
}
@media screen and (min-width: 1024px) {
    .trip-insurance-container {
        padding: 0;
    }
}

.unmr-info-banner-container {
    margin: var(--ds-size-100);
}

@media screen and (min-width: 1024px) {
    .unmr-info-banner-container {
        margin: var(--ds-size-200);
    }
}

.upsell-banner {
  display: none;
}

.upsell-banner-mobile {
  margin-top: 2rem;
  margin-bottom: 2rem;
  background-color: var(--ds-basic-color-surface-neutral-subtle);
  padding: var(--ds-size-200);
  border-radius: var(--ds-border-radius);
  display: flex;
  flex-direction: row;
  cursor: pointer;
}

.icon-container-premium,
.icon-container-business,
.icon-container-first {
  padding: var(--ds-size-150) var(--ds-size-100);
  border-radius: var(--ds-size-400);
  align-self: center;
}

.icon-container-premium {
  background-color: var(--ds-basic-color-fare-premiumeconomy);
}

.icon-container-first {
  background-color: var(--ds-basic-color-fare-first);
}

.icon-container-business {
  background-color: var(--ds-basic-color-fare-business);
}

.banner-icon-premium,
.banner-icon-first,
.banner-icon-business {
  --ds-auro-icon-size: var(--ds-size-400);
  color: var(--ds-basic-color-texticon-inverse);
}

.upsell-banner-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ds-size-50);
  margin-left: var(--ds-size-300);
}

.upsell-header-premium {
  color: var(--ds-basic-color-fare-premiumeconomy);
}

.upsell-header-first {
  color: var(--ds-basic-color-fare-first);
}

.upsell-header-business {
  color: var(--ds-basic-color-fare-business);
}

.subheader-price-premium {
  color: var(--ds-basic-color-fare-premiumeconomy);
}

.subheader-price-first {
  color: var(--ds-basic-color-fare-first);
}

.subheader-price-business {
  color: var(--ds-basic-color-fare-business);
}

.upsell-disclaimer {
  color: var(--ds-basic-color-texticon-muted);
}

.upsell-trailing {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.upgrade-button-premium {
  display: none;
}

.upgrade-button-first {
  display: none;
}

.upgrade-button-business {
  display: none;
}


.chevron {
  display: block;
  color: var(--ds-basic-color-texticon-default);
}

.upsell-subheader {
  color: var(--ds-basic-color-texticon-muted);
}

@media screen and (min-width: 1024px) {
  .upsell-banner-mobile {
    display: none;
  }

  .upsell-banner {
    margin-top: 2rem;
    margin-bottom: 2rem;
    background-color: var(--ds-basic-color-surface-neutral-subtle);
    padding: var(--ds-size-200);
    border-radius: var(--ds-border-radius);
    display: flex;
    flex-direction: row;
  }

  .upgrade-button-premium,
  .upgrade-button-business,
  .upgrade-button-first {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: var(--ds-basic-color-fare-premiumeconomy);
    border: var(--ds-basic-color-fare-premiumeconomy);
    border-radius: var(--ds-border-radius, 0.375rem);
    min-height: var(--ds-size-600, 3rem);
    max-height: var(--ds-size-600, 3rem);
    padding: 0 var(--ds-size-300, 1.5rem);
  }

  .upgrade-button-first {
    background-color: var(--ds-basic-color-fare-first);
    border: var(--ds-basic-color-fare-first);
  }

  .upgrade-button-business {
    background-color: var(--ds-basic-color-fare-business);
    border: var(--ds-basic-color-fare-business);
  }

  .button-text-slot {
    color: var(--ds-basic-color-texticon-inverse);
  }

  .chevron {
    display: none;
  }
}

@media screen and (max-width: 576px){
  .upsell-banner-mobile {
    margin-top: 2rem;
    margin-bottom: 2rem;
    background-color: var(--ds-basic-color-surface-neutral-subtle);
    border-radius: var(--ds-border-radius);
    display: flex;
    flex-direction: row;
    cursor: pointer;
  }

  .upsell-banner-content {
    display: flex;
    flex-direction: column;
    margin-left: var(--ds-size-300);
  }

  .upsell-trailing {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.upsell-entry-point {
  display: flex;
  flex-direction: column;
}

.upsell-entry-point-bar {
  height: 6px;
  border-radius: 6px 6px 0 0;
  background: var(--ds-advanced-color-button-primary-background);
}

.upsell-entry-point-shell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--ds-size-200);
  padding: var(--ds-size-200);
  border-radius: 0 0 6px 6px;
  background: var(--ds-basic-color-surface-accent1-muted);
}

.upsell-entry-point-heading,
.upsell-entry-point-price {
  margin: 0;
  text-align: center;
  color: var(--ds-basic-color-texticon-accent1);
  font-feature-settings: 'liga' off;
}

.upsell-entry-point-heading {
  text-box: trim-both cap alphabetic;
}

.upsell-entry-point-price {
  font-weight: 500;
}

.upsell-entry-point-button {
  align-self: stretch;
}

@media screen and (min-width: 1024px) {
  .upsell-entry-point-button-mobile {
    display: none;
  }

  /* Fill the column's existing width instead of widening it (and the seats button) to fit the heading. */
  .itinerary-actions > .upsell-entry-point {
    width: 0;
    min-width: max(100%, 190px);
  }
}

@media screen and (max-width: 1023px) {
  .upsell-entry-point-button-desktop {
    display: none;
  }

  .itinerary-actions:has(> .upsell-entry-point) {
    flex-wrap: wrap;
  }

  .itinerary-actions > .upsell-entry-point {
    flex: 1 1 100%;
    max-width: none;
  }
}

.passenger-list {
  display: flex;
  flex-direction: column;
  margin: var(--ds-size-200) 0;
  padding: var(--ds-size-200) var(--ds-size-150) var(--ds-size-200) var(--ds-size-200);

  /* offset-x | offset-y | blur-radius | spread-radius | color */
  box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1);
  gap: var(--ds-size-200);
}

.passenger-count,
.passenger-food-section-title,
.passengers-color-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: var(--ds-basic-color-texticon-muted);
  gap: var(--ds-size-100);
}

.passenger-count manage-vpnr-icon,
.passenger-food-section-title manage-vpnr-icon {
  --ds-auro-icon-size: var(--ds-size-200);
}

.passenger-details {
  display: flex;
  flex-direction: row-reverse;
  padding: var(--ds-size-200) 0;
  border-bottom: 1px solid var(--ds-basic-color-border-divider);
}

.passenger-details:first-of-type {
  padding-top: unset;
}

.passenger-details:last-of-type {
  padding-bottom: unset;
  border-bottom: none;
}

.passenger-name {
  color: var(--ds-basic-color-texticon-default);
  margin: var(--ds-size-50) 0;
  margin-block: 0;
}

.passenger-lap-infant {
  color: var(--ds-basic-color-texticon-accent1);
  margin: var(--ds-size-50) 0;
}

.passenger-infant-seated {
  color: var(--ds-basic-color-texticon-accent1);
  margin: var(--ds-size-50) 0;
}

.card-summary {
  margin: 0;
}

.passenger-frequent-flyer {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-200);
}

.passenger-frequent-flyer .passenger-frequent-flyer-badges {
  display: flex;
  flex-direction: column;
}

.passenger-frequent-flyer .passenger-frequent-flyer-badges manage-vpnr-badge {
  margin-bottom: var(--ds-size-100);
}

.passenger-identifiers {
  color: var(--ds-basic-color-texticon-muted);
  margin: 0;
  padding: 0;
}

.passenger-identifiers dt,
.passenger-identifiers dd {
  display: inline;
}

.passenger-identifiers dt {
}

.passenger-identifiers dd {
  margin-inline-start: 0;
}

.passenger-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-size-200);
  margin-top: var(--ds-size-300);
}

.passenger-food h3 {
  margin-bottom: var(--ds-size-100);
}

.passenger-food-segments {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-100);
  padding: var(--ds-size-200) var(--ds-size-300);
  background-color: var(--ds-basic-color-surface-accent1-muted);
  border-radius: var(--ds-border-radius);
}

.passenger-food-segment {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.preorder-food-window-open {
  color: var(--ds-basic-color-status-success);
}

.preorder-food-window-closed {
  color: var(--ds-basic-color-texticon-muted);
}

.passenger-food-segments .secondary-preorder-link {
  min-width: 140px;
}

.passenger-food-segments .preorder-food-link {
  min-width: 170px;
}

.passenger-food-segments .passenger-food-airport-list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-100);
}

.passenger-food-segments .passenger-food-airport-list .passenger-food-airports {
  display: flex;
  flex-direction: column;
}

.passenger-food-segments .passenger-food-airport-list .passenger-food-airports h4 {
  white-space: nowrap;
}

.passenger-food-segments .passenger-food-airport-list .passenger-food-airports h4,
.passenger-food-segments .passenger-food-airport-list .passenger-food-airports p {
  margin: 0;
}

.passenger-umnr-notice {
  color: var(--ds-basic-color-texticon-muted);
  margin-top: var(--ds-size-200);
  margin-bottom: var(--ds-size-200);
  display: flex;
  align-items: center;
}

.passenger-umnr-notice p {
  margin: 0;
  line-height: 140%;
  font-feature-settings: "liga" off;
}

.passenger-row {
  display: block;
  padding: 1rem 0;
  gap: 0;
}

.passenger-row-middle {
  margin: var(--ds-size-100) 0;
}

 @media screen and (max-width: 1023px) {
  .passenger-frequent-flyer {
    display: none;
  }
  .passenger-details[expanded] .passenger-frequent-flyer {
    display: flex;
  }
}

@media screen and (min-width: 1024px), print {
  .passenger-list {
    margin: var(--ds-size-100) var(--ds-size-200);
    padding: var(--ds-size-300) var(--ds-size-500);
    border-radius: var(--ds-border-radius);
  }

  .passenger-details-column {
    flex-grow: 1;
  }

  .passenger-details {
    padding-bottom: var(--ds-size-200);
    border-bottom: 1px solid var(--ds-basic-color-border-divider);
  }

  .passenger-frequent-flyer {
    flex-direction: column;
  }

 .passenger-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--ds-size-400);
  }

  .passenger-frequent-flyer .passenger-frequent-flyer-badges {
    flex-direction: row;
    gap: var(--ds-size-100);
  }

  .passenger-identifiers {
    margin: 0;
  }

  .passenger-actions {
    flex-direction: column;
    margin: 0;
  }

  .passenger-food-segments {
    flex-direction: row;
    max-width: 80%;
    gap: var(--ds-size-200);
    align-items: start;
    justify-content: space-between;
  }

  .passenger-food-segment .passenger-food-airports {
    justify-content: start;
  }

  .passenger-food-segment {
    margin-bottom: 0;
  }

  .passenger-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: 1rem 0;
  }

  .passenger-row-left {
    flex: 0.75 1 0;
   
  }
  .passenger-row-middle {
    flex: 2 1 0;
  }

  .passenger-main > .expand {
    display: flex !important;
    gap: 2rem;
    flex: 1 0 0;
  }
}

.reservation-subheader {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 1px solid var(--ds-basic-color-border-divider);
  gap: var(--ds-size-300);
}

.reservation-nav {
  text-align: right;
}

.reservation-nav .nav-toggle {
  margin: var(--ds-size-100);
  padding: 0;
  border: none;
  background: transparent;
}

.reservation-nav .collapsible-nav {
  height: 0;
  position: absolute;
  right: 0;
}

.reservation-nav ul.nav-links {
  list-style-type: none;
  white-space: nowrap;
  text-align: left;
  padding: var(--ds-size-200) var(--ds-size-300) var(--ds-size-100);
  border-radius: var(--ds-border-radius);
  box-shadow: 0 0 6px 1px rgba(0, 0, 0, .1);
  background-color: var(--ds-basic-color-surface-default);
  display: none;
  position: relative;
  z-index: 1;
  margin-block: unset;
}

.reservation-nav[aria-expanded="true"] ul.nav-links {
  display: block;
}

.collapsible-nav li button {
  border: none;
  background: none;
  margin-left: var(--ds-size-200);
  padding: 0
}

.reservation-nav .nav-toggle .close {
  display: none;
}
.reservation-nav .nav-toggle .open {
  display: inline-block;
  height: 2rem;
}

.reservation-nav .nav-toggle[aria-expanded="true"] .close {
  display: inline-block;
}
.reservation-nav .nav-toggle[aria-expanded="true"] .open {
  display: none;
}

.reservation-nav ul.nav-links li {
  padding: var(--ds-size-150) var(--ds-size-50);
}

.oa-confirmation-code-wrapper {
  display: flex;
  flex-direction: row;
  gap: var(--ds-size-150);
  background-color: var(--ds-basic-color-surface-neutral-subtle);
  color: var(--ds-basic-color-texticon-muted);
  padding: var(--ds-size-150) var(--ds-size-200);
  margin-top: calc(-1 * var(--ds-size-300));
}

.oa-confirmation-code-wrapper .icon {
  min-width: 1.375rem;
}

.oa-confirmation-code-wrapper .content {
  display: flex;
  flex-direction: column;
  align-self: center;
}

.oa-confirmation-code-hyperlink {
  display: none;
}

.oa-confirmation-code-wrapper .content .code {
  display: inline-block;
  margin: 0;
  color: var(--ds-basic-color-texticon-muted);
}

.oa-confirmation-code-wrapper .content .ke-placeholder {
  margin: 0;
}

.quick-actions {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  align-items: center;
  justify-content: space-between;
}

.quick-actions.quick-actions-m {
  margin-top: 0;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(0, 0, 0, .03);
}

@media screen and (max-width: 1023px) {
  .quick-actions.quick-actions-dt {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .reservation-subheader {
    flex-direction: column;
    flex-wrap: unset;
    justify-content: unset;
    border-bottom: unset;
  }

  .reservation-nav .nav-toggle {
    display: none;
  }

  .reservation-nav ul.nav-links {
    display: block;
    box-shadow: unset;
    padding: 0 var(--ds-size-300);
  }

    .reservation-nav ul.nav-links li:not(:last-of-type) {
      border-bottom: 1px solid var(--ds-basic-color-border-divider);
    }

  .reservation-nav .collapsible-nav {
    position: static;
    height: auto;
  }

  .confirmation-code-container {
    order: 1;
  }

  .reservation-nav {
    order: 3;
  }

  .seat-upsell-banner {
    padding-left: var(--ds-size-300, 1.5rem);
    padding-top: var(--ds-size-200, 1rem);
    order: 4;
  }

  .oa-confirmation-code-wrapper {
    order: 2;
    margin: 0 var(--ds-size-300);
    max-width: 235px;
  }

  .oa-confirmation-code-wrapper .icon {
    min-width: 1.375rem;
  }

  .oa-confirmation-code-hyperlink {
    display: block;
  }

  .oa-confirmation-code-button {
    display: none;
  }

  .quick-actions.quick-actions-m {
    display: none;
  }
}


.frequent-flyer-badges manage-vpnr-badge {
  height: auto;
  padding: 4px 12px 2px;

  /* DEFAULT COLORS */
  color: var(--ds-basic-color-texticon-default);
  background-color: var(--ds-basic-color-tier-program-loyaltytier-silver);
  border-color: var(--ds-basic-color-tier-program-loyaltytier-silver);
}

manage-vpnr-badge.tier-atmos-silver {
  color: var(--ds-basic-color-texticon-default);
  background-color: var(--ds-basic-color-tier-program-loyaltytier-silver);
  border-color: var(--ds-basic-color-tier-program-loyaltytier-silver);
}

manage-vpnr-badge.tier-atmos-gold {
  color: var(--ds-basic-color-texticon-default);
  background-color: var(--ds-basic-color-tier-program-loyaltytier-gold);
  border-color: var(--ds-basic-color-tier-program-loyaltytier-gold);
}

manage-vpnr-badge.tier-atmos-platinum {
  color: var(--ds-basic-color-texticon-default);
  background-color: var(--ds-basic-color-tier-program-loyaltytier-platinum);
  border-color: var(--ds-basic-color-tier-program-loyaltytier-platinum);
}

manage-vpnr-badge.tier-atmos-titanium {
  color: var(--ds-basic-color-texticon-inverse);
  background-color: var(--ds-basic-color-tier-program-loyaltytier-titanium);
  border-color: var(--ds-basic-color-tier-program-loyaltytier-titanium);
}

manage-vpnr-badge.tier-oneworldruby {
  color: var(--ds-basic-color-texticon-inverse);
  background-color: var(--ds-basic-color-tier-program-oneworld-ruby);
  border-color: var(--ds-basic-color-tier-program-oneworld-ruby);
}

manage-vpnr-badge.tier-oneworldsapphire {
  color: var(--ds-basic-color-texticon-inverse);
  background-color: var(--ds-basic-color-tier-program-oneworld-sapphire);
  border-color: var(--ds-basic-color-tier-program-oneworld-sapphire);
}

manage-vpnr-badge.tier-oneworldemerald {
  color: var(--ds-basic-color-texticon-inverse);
  background-color: var(--ds-basic-color-tier-program-oneworld-emerald);
  border-color: var(--ds-basic-color-tier-program-oneworld-emerald);
}
.upsell-section-card {
  border-radius: var(--ds-border-radius);
}

.contact-details-banner {
    margin: var(--ds-size-200) var(--ds-size-200);
    padding: var(--ds-size-150) var(--ds-size-300);
    color: var(--ds-basic-color-texticon-default);
}

.contact-details-banner .contact-details-banner-button {
    padding: 0 var(--ds-size-50);
    margin: 0 var(--ds-size-50);
    cursor: pointer;
}


.contact-details-dialog::part(dialog-header),
.emergency-contact-details-dialog::part(dialog-header) {
    z-index: 1;
}

.contact-details-dialog::part(dialog-content),
.emergency-contact-details-dialog::part(dialog-content) {
    margin-top: calc(-1 * var(--ds-size-400));
}

.flight-delay-banner-container {
    margin: var(--ds-size-100);
}

@media screen and (min-width: 1024px) {
    .flight-delay-banner-container {
        margin: var(--ds-size-200);
    }
}

.flight-delay-content > p, .flight-delay-content > ul {
    margin: 0;
}

.flight-delay-dialog-header {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-size-100);
}

@media screen and (min-width: 768px) {
    .flight-delay-dialog-header {
        align-items: center;
    }
}


.group-upper-banner-wrapper {
    display: flex;
    margin: var(--ds-size-150) var(--ds-size-100) 0;
}

.group-lower-banner-wrapper {
    border-radius: var(--ds-border-radius);
    margin: var(--ds-size-100) var(--ds-size-100) var(--ds-size-150);
}

@media screen and (min-width: 1024px) {
    .group-banner-wrapper {
        margin: 1.25rem var(--ds-size-200) var(--ds-size-200);
        margin-top: var(--ds-size-200);
    }

    .group-upper-banner-wrapper {
        margin: var(--ds-size-150) var(--ds-size-200) 0;
    }

    .group-lower-banner-wrapper {
        margin: var(--ds-size-100) var(--ds-size-200) var(--ds-size-150);
    }
}

.group-passenger-tracker {
    margin: var(--ds-size-200) 0;
    padding: var(--ds-size-100) var(--ds-size-150) var(--ds-size-100) var(--ds-size-200);
    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1);
}

.group-passenger-count {
    display: flex;
    align-items: center;
    color: var(--ds-basic-color-texticon-muted);
    gap: var(--ds-size-100);
}

.group-passenger-count manage-vpnr-icon {
    --ds-auro-icon-size: var(--ds-size-200);
}

.group-passenger-count-tracker {
    margin: var(--ds-size-300) 0 var(--ds-size-100) 0;
}

.group-passenger-nav-button {
    background: none;
    border: none;
    padding: 0;
    margin: var(--ds-size-100) 0 var(--ds-size-200);
}

.group-passenger-nav-button-icon {
    height: 1.25rem;
    width: 1.25rem;
}

@media screen and (min-width: 1024px), print {
    .group-passenger-tracker {
        display: flex;
        flex-direction: column;
        margin: var(--ds-size-200);
        padding: var(--ds-size-200) var(--ds-size-500);
        border-radius: var(--ds-border-radius);
        gap: var(--ds-size-200);
    }

    .group-passenger-count-tracker {
        margin: 0;
    }

    .group-passenger-nav-button {
        padding: 0 0 var(--ds-size-200) 0;
        margin: 0;
    }
}

.group-passenger-info-details {
    padding: 0 var(--ds-size-300);
    margin-bottom: var(--ds-size-700);
}

.group-passenger-info-entered-accordion manage-vpnr-accordion::part(contentWrapper) {
    padding-top: var(--ds-size-300);
    padding-left: 0;
    padding-right: 0;
}

.group-passenger-info-reservation-crumb {
    color: var(--ds-basic-color-texticon-default);
    cursor: pointer;
}

.group-passenger-info-text {
}

.group-passenger-info-text-body {
    margin-top: -1rem;
    color: var(--ds-basic-color-texticon-muted);
}

.group-passenger-hero {
    margin-left: calc(-1 * var(--ds-size-100));
    margin-top: var(--ds-size-75);
}

.group-passenger-info-nav {
    margin-top: 10rem;
}

.group-passenger-secure-flight {
    display: inline-flex;
    border-radius: var(--ds-border-radius);
    overflow-y: auto;
    height: 100%;
    padding-bottom: 0;
}

@media screen and (min-width: 1024px), print {

    .group-passenger-info-entered-accordion manage-vpnr-accordion::part(contentWrapper) {
        padding-left: var(--ds-size-400, 2rem);
        padding-right: var(--ds-size-200, 1rem);
    }

    .group-passenger-hero {
        margin-top: var(--ds-size-200);
        margin-left: 0;
    }

    .group-passenger-secure-flight {
        padding-bottom: var(--ds-size-700);
    }
}


.link-reservation {
    margin: var(--ds-size-200) 0;
    padding: var(--ds-size-200) var(--ds-size-150) var(--ds-size-200) var(--ds-size-200);
    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1);
}

@media screen and (min-width: 1024px) {
    .link-reservation {
        margin: var(--ds-size-200) var(--ds-size-200);
        border-radius: var(--ds-border-radius);
    }
}


.oa-banner-subheader {
}

.oa-banner-container {
  display: flex;
  flex-direction: row;
  padding: var(--ds-size-300);
  align-items: center;
  background-color: #F7F7F7;
  margin: var(--ds-size-200);
  border-radius: var(--ds-border-radius);
  gap: var(--ds-size-100);
}

.oa-banner-leading {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: var(--ds-size-100);
}

.oa-banner-tail-container manage-vpnr-icon{
  --ds-auro-icon-size: var(--ds-size-1000);
}

.oa-chevron {
  --ds-auro-icon-size: var(--ds-size-300);
}

.oa-banner-trailing {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ds-size-100);
}

.oa-pnr {
  color: var(--text-primary-default, #222222);
}

@media screen and (max-width: 1024px) {
  .oa-banner-container {
    margin: var(--ds-size-200) 0;
  }
  
  .oa-banner-header {
    margin-bottom: 2px;
  }

  .oa-banner-tail-container manage-vpnr-icon {
    --ds-auro-icon-size: var(--ds-size-600);
  }
}

@media screen and (max-width: 576px) {
  .oa-banner-container {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .oa-banner-subheader {
  }

  .oa-chevron {
    --ds-auro-icon-size: var(--ds-size-250);
  }
}

.other-airline-change-seat-dialog {
    display: inline-block;
}

.other-airline-change-seat-dialog::part(dialog-header) {
    padding-top: var(--ds-size-400);
}

.change-seats-dialog-footer {
    text-align: center;
    justify-content: center;
}

.change-seats-dialog-footer manage-vpnr-hyperlink {
    display: inline-block
}

.change-seats-dialog-footer manage-vpnr-hyperlink::part(link) {
    text-decoration: underline;
}

.change-seats-dialog-content section {
    margin: 0 var(--ds-size-25);
}

.ha-external-link {
    width: var(--ds-size-150); 
    height: var(--ds-size-200);
}

/*
* These are the styles from the https://www.alaskaair.com/content/partial/choose-seat-ha stylesheets
*/

:root,
:host {
    --cp-cell-row-gap: var(--ds-size-300);
    --cp-border: solid var(--ds-color-border-tertiary-default) 1px;
    --cp-border-radius: var(--ds-border-radius);
    --cp-border-padding: var(--ds-size-200);
}

cp-grid.grid-banner {
    --cp-grid-column-gap: var(--ds-size-xxl);
    --cp-grid-row-gap: var(--ds-size-xl);
    --cp-cell-margins: auto 0px;
    --cp-banner-columns: 1fr 1fr;
    grid-template-columns: var(--cp-banner-columns);
    text-align: left;
}

cp-grid.grid-row {
    grid-column-gap: var(--ds-size-100);
    --cp-grid-column-gap: var(--ds-size-lg);
    --cp-cell-margins: auto 0px;
    grid-auto-flow: column;
    max-width: max-content;
    margin: 0px;
    text-align: left;
}

@media (max-width: 660px) {
    cp-grid.grid-banner {
        grid-template-columns: 1fr;
    }

        cp-grid.grid-banner.no-break {
            grid-template-columns: var(--cp-banner-columns);
        }

        cp-grid.grid-banner.mobile-flip > :last-child {
            grid-row: 1;
        }
}

cp-grid.grid-border {
    border: var(--cp-border);
    border-radius: var(--cp-border-radius);
    padding: var(--cp-border-padding);
    overflow: hidden;
}

cp-grid {
    display: grid;
    column-gap: var(--cp-grid-column-gap);
    row-gap: var(--cp-grid-row-gap);
    margin: auto;
    max-width: 1200px;
    color: var(--ds-basic-color-texticon-default);
}

    cp-grid cp-grid {
        max-width: 100%;
    }

cp-cell {
    width: -webkit-fill-available;
    width: -moz-available;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--cp-cell-row-gap);
    align-items: center;
}

cp-grid .seat-selector-container {
    padding-bottom: var(--ds-size-25);
}

cp-grid .seat-selector-banner {
    grid-template-columns: 1fr auto;
    grid-column-gap: var(--ds-size-lg);
    border-width: 0px;
    border-radius: var(--ds-border-radius, 6px);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
}

cp-grid .seat-selector-prefix-icon manage-vpnr-icon {
    --ds-auro-icon-size: var(--ds-size-700);
}

cp-grid .seat-selector-confirmation-code {
    overflow-wrap: anywhere;
}

.itinerary-disrupted-banner-container {
    margin: 0 var(--ds-size-100);
}

@media screen and (min-width: 1024px) {
    .itinerary-disrupted-banner-container {
        margin: 0;
    }
}

.itinerary-disrupted-content > p, .itinerary-disrupted-content > ul {
    margin: 0;
}

.itinerary-disrupted-dialog-header {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-size-100);
}

@media screen and (min-width: 768px) {
    .itinerary-disrupted-dialog-header {
        align-items: center;
    }
}


.major-sc-banner-wrapper {
    margin: var(--ds-size-100);
}

.major-sc-banner-buttons {
    margin-top: var(--ds-size-100);
}

@media screen and (min-width: 1024px) {
    .major-sc-banner-wrapper {
        margin: var(--ds-size-200);
    }
}

.major-sc-dialog-content > p, .major-sc-dialog-content > ul {
    margin: 0;
}

.major-sc-dialog-header {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-size-100);
}

@media screen and (min-width: 768px) {
    .major-sc-dialog-header {
        align-items: center;
    }
}

.secure-flight-dialog span[slot="footer"] {
    display: none;
}

.secure-flight-description {
    color: var(--ds-basic-color-texticon-muted);
}

.secure-flight-wrapper {
    display: flex;
    flex-direction: column;
    margin: var(--ds-size-100);
    gap: var(--ds-size-200);
}

.secure-flight-wrapper:not(:has(*)) {
    display: none;
}

@media screen and (min-width: 1024px) {
    .secure-flight-wrapper {
        margin: var(--ds-size-200)
    }
}

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

.expandable-content{
  flex-grow: 1;
}

.expandable-button {
  height: 100%;
  background: none;
  border: none;
  padding: 0;
}

/* Styles related to phase changing */
/* mostly animation */
.expandable .expand {
  display: none;
}

.expandable[expanded] .expand {
  display: unset;
}

.expandable .deflate {
  display: unset;
  overflow: hidden;
}

.expandable[expanded] .deflate {
  display: none;
}

.expandable-button::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' role='img' aria-hidden='true' style='min-width:var(--ds-size-lg);height:var(--ds-size-lg);fill:currentColor' class='ico_squareLarge'%3E%3Ctitle%3EDown indicator%3C/title%3E%3Cdesc%3EDirectional indicator; down%3C/desc%3E%3Cpath d='m6.397 9.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 13.939l4.47-4.47a.75.75 0 0 1 .976-.072l.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 15l-.354.354a1 1 0 0 1-1.414 0L10.939 15l-4.47-4.47a.75.75 0 0 1-.072-.976l.073-.084-.073.084Z'%3E%3C/path%3E%3C/svg%3E");

  width: 24px;
  display: block;
}

.expandable-button[toggled]::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' role='img' aria-hidden='true' style='min-width:var(--ds-size-lg);height:var(--ds-size-lg);fill:currentColor' class='ico_squareLarge'%3E%3Ctitle%3EUp indicator%3C/title%3E%3Cdesc%3EDirectional indicator; up%3C/desc%3E%3Cpath d='m17.603 14.343-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 9.957l-4.47 4.47a.75.75 0 0 1-.976.073l-.084-.073a.75.75 0 0 1-.073-.976l.073-.085 4.823-4.823a1 1 0 0 1 1.414 0l4.823 4.823a.75.75 0 0 1 .073.977Z'%3E%3C/path%3E%3C/svg%3E");
}

/* disable/enable */
@media screen and (min-width: 1024px), print {
  .expandable.disable-700 .expandable-control {
    display: none;
  }

  .expandable.disable-700 .expand {
    display: unset;
  }

  .expandable.disable-700 .deflate {
    display: none;
  }
}

.toast {
  margin: var(--ds-size-200) var(--ds-size-400) 0;
}

.toast-message {
  margin: 0;
}

@media screen and (min-width: 1024px) {
  .toast {
    margin: var(--ds-size-400) auto 0;
    max-width: var(--ds-grid-breakpoint-xl);
    padding: 0 var(--ds-size-300);
  }
}