@import url('https://fonts.googleapis.com/css2?family=Fanwood+Text&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: 'Fanwood Text', serif;
  --font-family-display: var(--font-family);
  --lightest: #fff;
  --light: #F3F3F3;
  --light-inverse: var(--primary);
  --white-inverse: var(--darkest);
  --medium: #C4C4C4;
  --dark: #333;
  --darkest: #000;
  --body-background: var(--lightest);
  --body-color: var(--light);
  --body-font-weight: 400;
  --headings-font-weight: 400;

  --primary: #1d4161;
  --primary-hover: #3479b4;
  --primary-contrast: #132f47;
  --primary-inverse: var(--lightest);

  --secondary: #b00c0c;
  --secondary-hover: #db1313;
  --secondary-contrast: #910303;
  --secondary-inverse: var(--lightest);

  --info: #000;
  --info-hover: rgb(36, 36, 36);
  --info-contrast: rgb(51, 51, 51);
  --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;
  font-weight: var(--body-font-weight) !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;
}

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

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

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

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

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

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


.navbar-dark .navbar-text a {
  color: var(--darkest) !important;
}

app-site-header.bg-primary {
  background-color: var(--lightest) !important;
  color: var(--darkest) !important;
}

app-home app-flight-search .btn-secondary {
  color: var(--primary-inverse) !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

app-home app-flight-search .btn-secondary:hover {
  color: var(--primary-inverse) !important;
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}


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

app-site-header .text-white,
app-site-header li::after {
  color: var(--primary) !important;
}

app-site-header.bg-primary,
app-agent-login .agent-login-header {
  background-color: var(--lightest) !important;
  color: var(--primary) !important;
}


/* Payment Icon */
.payment--method.AX {
  background: url(./assets/images/amex.svg) center no-repeat !important;
  background-size: contain !important;
  width: calc(48px + 0.9vw) !important;
  height: calc(32px + 0.9vw) !important;
  text-indent: -9999em !important;
}