@import url('/assets/fonts/webfonts.css');

:root {
  /* Changes to Major version include renaming or deletion of variables.
   Changes to Minor version include addition of new variables.
   Changes to Revision version include variable value changes. */
  --Version-Number: 2.1;

  /* global styles variables */
  --font-family: 'Bahnschrift', 'Segoe UI', Arial, sans-serif;
  --lightest: #fff;
  --light: #f3f3f3;
  --medium: #c4c4c4;
  --dark: #333;
  --darkest: #333333;
  --body-background: var(--lightest);
  --body-color: var(--light);
  --headings-font-weight: 600;
  --primary: var(--sunlight-blue-1);
  --primary-hover: hsla(217.95, 100%, 32.55%, 0.8);
  --primary-contrast: #3b72d1;
  --primary-inverse: var(--lightest);
  --tertiary: #197fd2;
  --secondary: var(--sunlight-blue-1);
  --secondary-hover: #faf400;
  --secondary-contrast: #faf400;
  --secondary-inverse: var(--lightest);
  --info: var(--sunlight-gray);
  --info-hover: hsla(217.95, 100%, 32.55%, 1);
  --info-contrast: rgb(229, 229, 229);
  --info-inverse: var(--lightest);
  --highlight: hsla(207, 79%, 95%, 1);
  --highlight-hover: hsla(207, 79%, 75%, 1);
  --highlight-contrast: hsla(207, 79%, 25%, 1);
  --highlight-inverse: var(--darkest);
  --success: #28a745;
  --danger: #dc3545;
  --warning: #ffc107;
  --dark: #343a40;
  --white: #fff;

  --sunlight-gray: #999999;
  --sunlight-dark-gray: #333333;
  --sunlight-blue-1: #0047ab;
  --sunlight-blue-2: #6690cc;
  --sunlight-yellow: #ffd700;
  --logo-height: 3.5rem;
  --border-radius: 6.8px;
}

/* ------- PER CLIENT CUSTOMIZATION ------- */

/* Assign Font to document */
html,
body {
  font-family: var(--font-family) !important;
  color: var(--darkest) !important;
}

/* Mapping needed when google font does not correspond */
h1,
.h1 {
  font-weight: var(--headings-font-weight) !important;
  color: var(--primary) !important;
}

h2,
.h2 {
  font-weight: var(--headings-font-weight) !important;
  color: var(--primary) !important;
}

h3,
.h3 {
  font-weight: var(--headings-font-weight) !important;
}

h4,
.h4 {
  font-weight: var(--headings-font-weight) !important;
}

h5,
.h5 {
  font-weight: var(--headings-font-weight) !important;
}

h6,
.h6 {
  font-weight: var(--headings-font-weight) !important;
}

/* Logo sizing specific to brand */
/* a.navbar-brand img {
  height: var(--logo-height);
} */

/* AmeliaRes Logo Style */
.page-footer img.amelia-logo {
  width: 4.75rem;
}

/* SVG Icon Substitution */
.leg--footer .logo {
  background-image: url(./img/airline-icon.svg);
  width: 20px;
  height: 20px;
}

/*--------------------Fare Type Styling----------------- */
/* The fare type identifier is configured in client specific MongoDB Collections.
Fare type CSS class name is constrcuted using the following rules: 1. Prefix 'fare-type-',
2. Replace spaces within fare type identifier by '-'. 3. Transform fare type identifier into lowercase. */
/* Example CSS class for fare type identifier Bronze:*/

app-journey-fare-option-header.fare-type-lite,
app-journey-fare-option-header.fare-type-value,
app-journey-fare-option-header.fare-type-plus {
  background-color: var(--sunlight-blue-2) !important;
}

app-journey-fare-option-header.fare-type-spass {
  background-color: #1f2f5f !important;
}

app-journey-fare-option-header.fare-type-lite.fare-selected,
app-journey-fare-option-header.fare-type-spass.fare-selected,
app-journey-fare-option-header.fare-type-value.fare-selected,
app-journey-fare-option-header.fare-type-plus.fare-selected {
  background-color: var(--sunlight-blue-1) !important;
}

app-journey-fare-option-summary.fare-type-lite .btn-select,
app-journey-fare-option-summary.fare-type-lite .btn-select:hover {
  background-color: var(--sunlight-blue-2) !important;
}

app-journey-fare-option-summary.fare-type-spass .btn-select,
app-journey-fare-option-summary.fare-type-spass .btn-select:hover {
  background-color: #1f2f5f !important;
}

app-journey-fare-option-summary.fare-type-value .btn-select,
app-journey-fare-option-summary.fare-type-value .btn-select:hover {
  background-color: var(--sunlight-blue-2) !important;
}

app-journey-fare-option-summary.fare-type-plus .btn-select,
app-journey-fare-option-summary.fare-type-plus .btn-select:hover {
  background-color: var(--sunlight-blue-2) !important;
}

app-journey-fares-item .fare-select-button {
  background-color: var(--sunlight-blue-2) !important;
  border-color: transparent !important;
}

app-journey-fares-item .fare--selection-column .badge.seat-sale-text {
  background-color: var(--sunlight-yellow) !important;
  border-color: transparent !important;
  color: var(--sunlight-blue-1) !important;
}

app-journey-fares-item .fare--selection-column .badge.promo-flag-text {
  background-color: var(--success) !important;
  border-color: transparent !important;
  color: var(--lightest) !important;
}

app-journey-fare-options app-journey-fare-option-ptc-fare-summary .customized-seat-sale-box {
  background-color: var(--sunlight-yellow) !important;
  border-color: transparent !important;
  color: var(--sunlight-blue-1) !important;
}

app-journey-fare-options app-journey-fare-option-ptc-fare-summary.fare-type-spass .fare-option--sold-out {
  text-indent: -9999em;
  visibility: hidden;
}

app-journey-fare-options app-journey-fare-option-ptc-fare-summary.fare-type-spass .fare-option--sold-out::after {
  text-indent: initial;
  visibility: visible;
  content: "Redeem using code";
  display: block;
  margin-top: -1.75rem;
}

app-journey-fares-item .fare--selection-column .btn.btn-primary {
  background-color: var(--sunlight-blue-2) !important;
  border-color: transparent !important;
}

/* Customer Customization/Overrides */

/* Remove Rounded Cornders */
/* body .card,
body .rounded,
body .rounded-pill,
body .btn,
body .card-header:first-child,
body .nav-pills .nav-link,
body .form-control,
body .stv-radio-buttons-wrapper label:first-of-type,
body .modal-footer,
body .modal-header,
body .dropdown-menu,
body app-passengers-count-picker .navbar-toggler,
body .custom-select {
  border-radius: 0 !important;
} */

.btn,
.btn.rounded-pill {
  font-weight: var(--headings-font-weight) !important;
  border-radius: var(--border-radius) !important;
}

.btn-primary,
.btn-secondary,
.btn-info {
  background-color: var(--sunlight-blue-2) !important;
  border-color: transparent !important;
}

.btn-primary:not(:disabled):hover,
.btn-secondary:not(:disabled):hover,
.btn-info:not(:disabled):hover {
  /*background-color: #e5e5e5 !important;*/
  opacity: 0.7;
  border-color: transparent !important;
  /*color: #b8c7dc !important;*/
}

.btn-group .btn {
  border-radius: 0 !important;
}

.btn-group .btn:first-child,
.page-header--pnr .rounded-pill {
  border-top-left-radius: var(--border-radius) !important;
  border-bottom-left-radius: var(--border-radius) !important;
}

.btn-group .btn:last-child,
.page-header--pnr .dropdown-toggle {
  border-top-right-radius: var(--border-radius) !important;
  border-bottom-right-radius: var(--border-radius) !important;
}

.page-header--pnr .dropdown-toggle {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* CUSTOMIZED SEATS & LEGENDS */
/* php-250 */
.php-250-legend:not(.bottom-design),
.bulkhead-front:not(.bottom-design):not(.occupied-seat):not(.selected-seat),
.bulkhead-back:not(.bottom-design):not(.occupied-seat):not(.selected-seat) {
  fill: var(--sunlight-blue-2) !important;
  stroke: var(--sunlight-blue-2) !important;
}

.php-250-legend,
.bulkhead-front:not(.occupied-seat):not(.selected-seat),
.bulkhead-back:not(.occupied-seat):not(.selected-seat) {
  stroke: var(--sunlight-blue-2) !important;
}

/* php-200 */
.seat-design.seat~text {
  fill: var(--lightest) !important;
}

.seat-design.seat:not(.bulkhead-front):not(.bulkhead-back):not(.occupied-seat):not(.selected-seat):not(.php-250-legend):not(.unavailable-legend):not(.unavailable-seat),
.php-200-legend {
  stroke: var(--primary) !important;
}

.seat-design.seat:not(.bulkhead-front):not(.bulkhead-back):not(.bottom-design):not(.occupied-seat):not(.selected-seat):not(.php-250-legend):not(.unavailable-legend):not(.unavailable-seat),
.php-200-legend:not(.bottom-design) {
  fill: var(--primary) !important;
}

/* other seats */
.seat.unavailable-seat,
.seat.unavailable-seat.disabled-seat,
.seat.occupied-seat:not(.selected-seat),
.unavailable-legend {
  stroke: var(--sunlight-dark-gray) !important;
  cursor: not-allowed;
}

.seat.unavailable-seat:not(.bottom-design),
.seat.unavailable-seat.disabled-seat:not(.bottom-design),
.seat.occupied-seat:not(.bottom-design),
.unavailable-legend:not(.bottom-design) {
  fill: var(--sunlight-dark-gray) !important;
}

.seat.unavailable-seat~text,
.seat.unavailable-seat.disabled-seat~text,
.seat.occupied-seat:not(.selected-seat)~text {
  cursor: not-allowed;
}

.seat.selected-seat {
  stroke: var(--sunlight-gray) !important;
}

.seat.selected-seat:not(.bottom-design) {
  fill: var(--sunlight-gray) !important;
}

.seat.selected-seat~text {
  fill: var(--lightest) !important;
}

app-reservation-charges .charges-total {
  display: none !important;
}

app-reservation-charges .charges.d-flex {
  display: block !important;
}

app-reservation-charges .charges--data.py-4.col-sm.ng-star-inserted {
  border: none !important;
  padding: 0 0 0 0 !important;
}

app-reservation-charges .charges--category.fs-14.fw-bold {
  display: none;
}

app-reservation-charges .charges-journey-total {
  color: #343a40 !important;
}

app-reservation-charges .charge-container {
  border-top: 1px solid;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

app-reservation-charges .charge-container.ngi-scrollbar.ng-star-inserted {
  overflow: visible;
}

app-reservation-charges .d-flex.text-primary.fw-bold.justify-content-between {
  color: #343a40 !important;
}

.passenger--selection .bg-info {
  background-color: var(--sunlight-blue-2) !important;
}

.passenger--selection .bg-secondary {
  background-color: var(--sunlight-gray) !important;
}

.dates-ribbon-item .border-thick.active {
  border-color: var(--primary) !important;
  border-width: 4px !important;
}

.dates-ribbon-item .border-thick {
  border-color: var(--info) !important;
}

a:hover,
a.text-muted {
  color: var(--sunlight-yellow) !important;
}

label.align-middle.m-0.pointer.d-flex.flex-wrap span a {
  text-decoration: underline !important;
}

.paymongo {
  background: url(./assets/images/Paymongo-Options.png) center no-repeat !important;
  background-size: contain !important;
  width: 200px !important;
  height: 25px;
}

.onhold {
  background: url(./assets/images/OnHold-Options.png) center no-repeat !important;
  background-size: contain !important;
  height: 100% !important;
}

.payment-method--name {
  display: none;
}

.payment--method.paymongo {
  display: none;
}

.maya {
  background: url(./assets/images/Maya-Options.png) center no-repeat !important;
  background-size: contain !important;
  width: 150px !important;
}

.twoc2p {
  background: url(./assets/images/2C2P_Options.png) center no-repeat !important;
  background-size: contain !important;
  width: 170px !important;
}

.twoc2pOtc {
  background: url(./assets/images/2C2POTC_Payment.png) center no-repeat !important;
  background-size: contain !important;
  width: 86px !important;
  text-indent: -9999em;
}

app-ias-loading-placeholder svg,
app-loading-spinner div svg {
  display: none !important;
}

/* app-ias-loading-placeholder, */
app-loading-spinner div {
  background-image: url(./assets/images/loading-new.gif);
  width: 100vw;
  height: 100vh;
  background-size: 35vw !important;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.6);
}

.container.mt-5 .row .col {
  display: flex;
  justify-content: center;
}

.hold-will-expire-at-label {
  display: none !important;
}

.card-title label:has(input[id='MAYA'])::before {
  content: '';
  display: block;
  background: url(./assets/images/Maya.png) left no-repeat !important;
  background-size: contain !important;
  width: 200px !important;
  height: 16px;
  margin-left: 44px;
}

.card-title label:has(input[id='PAYMOGO'])::before {
  content: '';
  display: block;
  background: url(./assets/images/PayMongo.png) left no-repeat !important;
  background-size: contain !important;
  width: 200px !important;
  height: 16px;
  margin-left: 44px;
}

.card-title label:has(input[id='2C2P'])::before,
.card-title label:has(input[id='2C2POTC'])::before {
  content: '';
  display: block;
  background: url(./assets/images/2C2P_Logo.png) left no-repeat !important;
  background-size: contain !important;
  width: 200px !important;
  height: 16px;
  margin-left: 44px;
}

.passenger__address,
.passenger__email,
.passenger__phone-number,
.passenger__mobile-number,
.service-request-label,
.passenger__service-requests {
  order: 1;
}

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

app-check-in app-search .check-in-constrain {
  padding-top: 105px !important;
}

app-check-in app-search .check-in-constrain .title {
  font-weight: var(--headings-font-weight) !important;
  color: var(--darkest) !important;
  font-size: 1.025rem !important;
}

app-check-in .check-in-constrain .rules,
app-check-in .check-in-constrain .notes {
  color: var(--darkest) !important;
}

app-check-in app-search .check-in-header-label {
  padding-bottom: 60px !important;
}

app-check-in app-search .page-body {
  padding-top: 2rem !important;
  margin-top: unset !important;
}

app-check-in app-progress-bar .page-steps {
  background-color: var(--light) !important;
}

.alternative-airport-text.border-success.text-success {
  background-color: var(--sunlight-dark-gray);
  border-color: var(--sunlight-dark-gray) !important;
  color: var(--lightest) !important;
}

@media screen and (min-width: 768px) {

  .passenger__phone-number .input-description,
  .passenger__mobile-number .input-description {
    margin-left: -41%;
  }
}

.passenger__phone-number .input-description,
.passenger__mobile-number .input-description {
  margin-top: 2rem !important;
  margin-bottom: 2rem;
}

app-passenger-information-input app-communication-channels-input {
  display: none;
}

app-passenger-information-input .passenger__notification-preferences {
  order: 1;
}

.boarding-pass-pax-name {
  text-transform: uppercase;
}

app-reservation-charges-breakdown .valid-promo-code.border-success {
  border-color: var(--primary) !important;
}

app-reservation-booking-cost-summary .long-desc {
  display: none !important;
}

app-reservation-flight-charges-breakdown .fare-details-dropdown {
  color: #122d60 !important;
  text-decoration: underline;
}

app-quick-actions .site-navigation-text {
  color: var(--sunlight-blue-1) !important;
}

app-quick-actions .site-navigation-text:hover {
  color: var(--darkest) !important;
}

app-trip-type-picker .active {
  background-color: var(--sunlight-blue-2) !important;
}

app-flight-search .btn-secondary {
  background-color: var(--sunlight-blue-2) !important;
}

app-flight-search .btn-secondary:not(:disabled):hover {
  /*background-color: #e5e5e5 !important;*/
  border-color: transparent !important;
  /*color: #b8c7dc !important;*/
}

app-journey-fare-option-ptc-fare-summary .fare--expansion span .text-medium {
  color: var(--sunlight-blue-1) !important;
}

app-passenger-information-input .ngi-login.btn.btn-primary {
  background-color: var(--sunlight-blue-2) !important;
  border-color: transparent !important;
}

app-passenger-information-input .ngi-login.btn.btn-primary:not(:disabled):hover {
  /*background-color: #e5e5e5 !important;*/
  border-color: transparent !important;
  /*color: #b8c7dc !important;*/
}

app-loyalty-login .btn.btn-login,
app-loyalty-registration .continue-button .btn-continue {
  background-color: var(--sunlight-blue-2) !important;
  border-color: transparent !important;
}

app-loyalty-login btn.btn-login:not(:disabled):hover,
app-loyalty-login .continue-button btn-continue:not(:disabled):hover {
  /*background-color: #e5e5e5 !important;*/
  border-color: transparent !important;
  /*color: #b8c7dc !important;*/
}

app-loyalty-login .modal-body .alert.alert-info {
  background-color: var(--sunlight-blue-2) !important;
  color: var(--lightest) !important;
}

app-seats-selection .btn.btn-primary,
app-seats-selection .btn.info {
  background-color: var(--sunlight-blue-2) !important;
  border-color: transparent !important;
}

app-seats-selection .btn.btn-primary:not(:disabled):hover,
app-seats-selection .btn.info:not(:disabled):hover {
  /*background-color: #e5e5e5 !important;*/
  border-color: transparent !important;
  /*color: #b8c7dc !important;*/
}

.app-journey-fare-option-ptc-fare-summary .customized-promo-box .sale-icon {
  display: none !important;
}

app-quick-actions .card .card-body {
  padding: unset !important;
}

app-loyalty-registration .alert.alert-info {
  background-color: var(--sunlight-blue-2) !important;
  color: var(--lightest) !important;
}

app-journey-dates-ribbon .sale-pill-sm.selected-date {
  background-color: var(--sunlight-yellow) !important;
  border-color: transparent !important;
  color: var(--sunlight-blue-1) !important;
}

app-travel-insurance-picker .ctm-radio-button.is-invalid,
.is-invalid.ctm-checkbox {
  border-color: var(--sunlight-blue-1) !important;
}

app-travel-insurance-picker .ctm-radio-button.is-invalid:checked:before {
  color: var(--sunlight-yellow) !important;
}

app-travel-insurance-picker .ctm-radio-button:checked {
  background-color: var(--sunlight-blue-1);
}

.passenger__notification-preferences .form-group>label {
  visibility: hidden;
}

app-compliance-input label {
  align-items: baseline !important;
}