@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,400;1,600&display=swap');

: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: 'Poppins', 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: #003da6;
  --sunlight-blue-2: #0071ce;
  --sunlight-yellow: #fff100;
  --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-summary.fare-type-lite .btn-select,
app-journey-fare-option-summary.fare-type-lite .btn-select:hover {
  background-color: RGBA(0, 61, 166, 0.3) !important;
  color: var(--primary) !important;
}

app-journey-fare-option-header.fare-type-value,
app-journey-fare-option-summary.fare-type-value .btn-select,
app-journey-fare-option-summary.fare-type-value .btn-select:hover {
  background-color: RGBA(0, 61, 166, 0.8) !important;
}

app-journey-fare-option-header.fare-type-plus,
app-journey-fare-option-summary.fare-type-plus .btn-select,
app-journey-fare-option-summary.fare-type-plus .btn-select:hover {
  background-color: var(--primary) !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(--primary) !important;
  border-color: var(--primary-contrast) !important;
}

.btn-primary:not(:disabled):hover,
.btn-secondary:not(:disabled):hover,
.btn-info:not(:disabled):hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !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.gif);
  background-color: rgb(90, 90, 90, 0.4);
  width: 100vw;
  height: 100vh;
  background-size: 35vw !important;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.7;
}

.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,
.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 {
    margin-left: -41%;
  }
}

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

.passenger__notification-preferences {
  display: none;
}