@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700&display=swap');

/* @font-face {
  font-family: "Barlow", sans-serif;
  src: url();
} */
: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: 'Barlow', sans-serif;
  --lightest: #fff;
  --light: #eeeeee;
  --medium: #c4c4c4;
  --dark: #333;
  --darkest: #000;
  --body-background: var(--lightest);
  --body-color: var(--light);
  --headings-font-weight: 600;
  --border-radius: 5rem;
  --logo-height: 3rem;

  --primary: #6596f9;
  --primary-hover: #333;
  --primary-contrast: #2e5a81;
  --primary-inverse: var(--lightest);
  --primary-gradient: #1cc8ee;
  --primary-red: #d32018;

  --secondary: #624af2;
  --secondary-hover: #6610f2;
  --secondary-contrast: #384c75;
  --secondary-inverse: var(--lightest);

  --info: var(--primary);
  --info-hover: var(--primary-hover);
  --info-contrast: var(--primary-contrast);
  --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;
}

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

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

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

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

h3,
.h3 {
  font-weight: var(--headings-font-weight) !important;
  color: var(--secondary) !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 {
  width: 8rem;
}

/* 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:*/

body .rounded-pill,
body .btn,
body .nav-pills .nav-link,
body .form-control,
body .stv-radio-buttons-wrapper label:first-of-type,
body app-passengers-count-picker .navbar-toggler,
body .custom-select>div,
.passenger-detail>div {
  border-radius: var(--border-radius) !important;
}

.dropdown-menu {
  border-radius: 0.5rem !important;
}

input,
.passenger-detail .details-label,
app-airport-picker .dropdown-toggle {
  padding-left: 1rem !important;
}

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

.btn-group .btn:first-child {
  border-top-left-radius: var(--border-radius) !important;
  border-bottom-left-radius: var(--border-radius) !important;
}

.btn-group .btn:last-child {
  border-top-right-radius: var(--border-radius) !important;
  border-bottom-right-radius: var(--border-radius) !important;
}

/* Customer Customization/Overrides */

.page-header {
  background: linear-gradient(90deg, var(--secondary) 0, var(--primary-gradient) 100%) !important;
}

app-site-header-flight-summary .text-muted {
  color: var(--lightest) !important;
}

.btn {
  text-transform: uppercase !important;
  font-size: 14px !important;
}

.btn-primary,
.btn-secondary {
  background-color: var(--primary) !important;
  border-color: var(--primary-contrast) !important;
}

.btn-primary:not(:disabled):hover,
.btn-secondary:not(:disabled):hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

.btn-outline-primary {
  border-color: var(--primary-contrast) !important;
}

.step.active .step--container {
  border-bottom-color: var(--primary-red) !important;
}

app-phone-control .input-group app-typeahead input.form-control {
  border-top-left-radius: var(--border-radius) !important;
  border-bottom-left-radius: var(--border-radius) !important;
}

app-phone-control .input-group app-typeahead input.form-control,
app-date-input .input-group input:first-child,
app-pm-credit-card-input .input-group input:first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0rem !important;
  font-size: 16px !important;
}

app-phone-control .input-group input,
app-date-input .input-group input:last-child,
app-pm-credit-card-input .input-group input:last-child {
  border-top-left-radius: 0rem !important;
  border-bottom-left-radius: 0rem !important;
}

app-date-input .input-group input:nth-child(2) {
  border-radius: 0rem !important;
}

.welcome-container .text-dark {
  color: white !important;
}

.welcome-container {
  background: linear-gradient(90deg, var(--secondary) 0, var(--primary-gradient) 100%) !important;
}

app-agent-login .page-header {
  background: var(--light) !important;
}

.agent-login-header {
  background: linear-gradient(90deg, var(--secondary) 0, var(--primary-gradient) 100%) !important;
}
app-agent-left-sidebar div.col-12.reservation ul>li.nav-item:last-child,
app-agency app-agent-dashboard div.px-3,
app-agent-booking-passengers app-passenger-information-input div.search-existing-passengers,
app-agency-company-item {
  display: none !important;
}

li.dates-ribbon-item span.ribbon-date,
li.dates-ribbon-item span.ribbon-lowest-amount {
  font-size: 1rem !important;
}

.ic-cog-af {
  padding-left:2.5rem;
}
div.return-public {
  display: none !important;
}

ngb-modal-window app-agent-user-registration .alert.alert-info.mb-5 .h5 {
  display: none;
}


ngb-modal-window app-agent-user-registration .agent-type-container{
  display: flex;
  flex-direction: column;
}

ngb-modal-window app-agent-user-registration .agent-type-container div.text-center {
  order: 1;
}

ngb-modal-window app-agent-user-registration .agent-type-container div.fw-bold.text-center {
  order: 0;
}

ngb-modal-window app-agent-user-registration .agent-type-container div:last-child {
  order: 2;
}

ngb-modal-window app-agent-user-registration .edgard-logo-container {
  margin:0;
  margin-bottom:1rem;
}
ngb-modal-window app-agent-user-registration .edgard-logo {
  width:128px;
  height:48px
}

app-agent-user-registration .registration__username,
app-agent-user-registration .registration__password,
app-agent-user-registration .registration__rules-and-conditions {
  order: 1;
}