@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: Arial, Helvetica, sans-serif;
  --font-family-display: 'PFDinTextCondPro', Arial, Helvetica, sans-serif;
  --lightest: #fff;
  --light: #f3f3f3;
  --light-inverse: #0f6a87;
  --white-inverse: #0f6a87;
  --medium: #c4c4c4;
  --dark: #333;
  --darkest: #000;
  --body-background: var(--lightest);
  --body-color: var(--light);
  --headings-font-weight: 700;

  --primary: #0f6a87;
  --primary-hover: #1581a5;
  --primary-contrast: #0c566e;
  --primary-inverse: var(--lightest);

  --secondary: #62d0df;
  --secondary-hover: #40b4c4;
  --secondary-contrast: #4bc4d4;
  --secondary-inverse: var(--lightest);

  --info: #0f6a87;
  --info-hover: #1581a5;
  --info-contrast: #0c566e;
  --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: #5cc073;
  --danger: #f76666;
  --warning: #ffc107;
  --dark: #343a40;
  --white: #fff;
}

/* ------- 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;
  font-family: var(--font-family-display) !important;
  text-transform: uppercase;
}

h2,
.h2 {
  font-weight: var(--headings-font-weight) !important;
  font-family: var(--font-family-display) !important;
  text-transform: uppercase;
}

h3,
.h3 {
  font-weight: var(--headings-font-weight) !important;
  font-family: var(--font-family-display) !important;
  text-transform: uppercase;
}

h4,
.h4 {
  font-weight: var(--headings-font-weight) !important;
  font-family: var(--font-family-display) !important;
  text-transform: uppercase;
}

h5,
.h5 {
  font-weight: var(--headings-font-weight) !important;
  font-family: var(--font-family-display) !important;
  text-transform: uppercase;
}

h6,
.h6 {
  font-weight: var(--headings-font-weight) !important;
  font-family: var(--font-family-display) !important;
  text-transform: uppercase;
}

/* Logo sizing specific to brand */
a.navbar-brand img {
  width: 8rem;
}

@media (min-width: 768px) {
  app-review-and-confirm .page-body [class*='mt-auto h-100']:first-child {
    border-right: 1px solid var(--secondary);
  }
}

/* If user has a wide logo, they may want to has a compact version for small screens - please take a look on Advanced Air for more information */
/* a.navbar-brand img.logo--image {
  display: none;
}

@media (min-width: 1280px) {
  a.navbar-brand img.logo--image {
    display: inline;
  }

  a.navbar-brand img.compact-logo--image {
    display: none;
  }
} */

/* 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;
}

/* 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,
.btn-group .btn:first-child:last-child {
  border-radius: 0.25rem !important;
}
.btn-group .btn,
.input-group input {
  border-radius: 0 !important;
}
.btn-group .btn:first-child,
.input-group input:first-child,
.input-group button:first-child {
  border-radius: 0.25rem 0 0 0.25rem !important;
}
.btn-group .btn:last-child,
.input-group input:last-child {
  border-radius: 0 0.25rem 0.25rem 0 !important;
}
.seat-container .seat-design.emergency-exit-seat {
  stroke: var(--warning) !important;
}
.agent-login-header.bg-primary,
app-site-header.bg-primary,
app-site-header .text-white,
app-site-header a,
app-agency app-site-header.bg-primary,
app-agency app-site-header .text-white,
app-agency app-site-header a,
app-agency app-site-header ::after,
app-site-header-compact.bg-primary,
app-site-header-compact .text-white,
app-site-header-compact a,
app-agency app-site-header-compact.bg-primary,
app-agency app-site-header-compact .text-white,
app-agency app-site-header-compact a,
app-agency app-site-header-compact ::after {
  background-color: var(--lightest) !important;
  color: var(--primary) !important;
}

app-reservations-search-criteria form .row,
app-reservations-search-criteria .form-row {
  align-items: baseline;
}
app-reservations-search-criteria .row .col-12:nth-child(2) .row:nth-child(1) label {
  white-space: normal !important;
}

app-ancillary-category .w-100 {
  width: 100% !important;
  height: 98%;
}

svg[seat-map-name='SF3_SF3 New'] g[data-seat-position^='2'] .seat-design,
.no-window-legend {
  stroke: var(--primary) !important;
}

svg[seat-map-name='SF3_SF3 New'] g[data-seat-position^='2'] .seat-design.selected-seat:not(.bottom-design) {
  fill: var(--secondary) !important;
}

svg[seat-map-name='SF3_SF3 New'] g[data-seat-position^='2'] .seat-design.unavailable-seat {
  fill: var(--lightest) !important;
  stroke: var(--medium) !important;
}
svg[seat-map-name='SF3_SF3 New'] g[data-seat-position^='2'] .seat-design.occupied-seat:not(.bottom-design) {
  fill: var(--primary) !important;
}

.emergency-seat-legend {
  stroke: var(--warning) !important;
}

.standard-seat-legend {
  stroke: var(--secondary) !important;
}

.seat-map-legend-item + div {
  display: none;
}

.SF3_SF3.seat-map-legend-item + div {
  display: block !important;
  font-size: 0.875rem !important;
  padding-top: 2rem;
}

app-seat-map-legends .col-6.mt-2 {
  width: 100%;
}

.SF3_SF3.seat-map-legend-item + div::before {
  content: 'Important: ';
  font-weight: bold;
}

svg.SF3_SF3 {
  display: none;
}

app-seat-map-legends button {
  display: none !important;
}

.fare-options-container .fare-option-col {
  flex-basis: 16.875rem !important;
}

.fare-options-container .fare-option-col.fs-14 {
  font-size: 13px !important;
}

.fare-type-sell-messages .mb-3 {
  margin-bottom: 0.5rem !important;
}

.fare-type-sell-messages .fare-messaging--icon {
  height: 20px;
}

app-agent-company-selection .modal-footer .btn {
  padding: 12px 24px;
}

app-passenger-information-input .passenger__phone-number,
app-passenger-information-input .passenger__notification-preferences,
app-passenger-information-input .service-request-label,
app-passenger-information-input .passenger__service-requests {
  order: 1;
}