@import url('https://fonts.googleapis.com/css2?family=Muli:wght@400;700&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: 'Muli', sans-serif;
  --lightest: #fff;
  --light: #f3f3f3;
  --medium: #c4c4c4;
  --dark: #333;
  --darkest: #000;
  --body-background: var(--lightest);
  --body-color: var(--light);
  --headings-font-weight: 700;

  --primary: #1b1b1c;
  --primary-hover: #303031;
  --primary-contrast: #303031;
  --primary-inverse: var(--lightest);

  --secondary: #7b0059;
  --secondary-hover: #b10580;
  --secondary-contrast: #b10580;
  --secondary-inverse: var(--lightest);

  --info: #5f727fff;
  --info-hover: #5f727fff;
  --info-contrast: #5f727fff;
  --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;

  --logo-height: 5.75rem;
  --logo-width: 15rem;
  --border-radius: 3px;
  --text-color: #3c3950;
}

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

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

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

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.bg-primary {
  background-color: var(--secondary) !important;
}

app-journey-fare-option-header span {
  font-size: 1rem !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;
} */
/* BUTTON STYLING */
.btn:not(.btn-link),
.btn.rounded-pill,
app-root .btn,
app-root .btn.rounded-pill {
  font-weight: var(--headings-font-weight) !important;
  border-radius: var(--border-radius) !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13px !important;
  border-width: 2px !important;
  height: 100%;
}

@media (max-width: 767px) {

  .btn,
  .btn.rounded-pill,
  app-root .btn,
  app-root .btn.rounded-pill {
    letter-spacing: 0px;
  }
}

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

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

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-primary,
app-root .btn-outline-primary,
app-root .btn-outline-secondary,
app-root .btn-outline-primary {
  border-color: var(--secondary) !important;
  color: var(--secondary) !important;
}

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

.btn-outline-primary.active,
app-root .btn-outline-primary.active {
  background-color: var(--secondary) !important;
  color: var(--lightest) !important;
}

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

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

app-root .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;
}

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

.page-header--pnr .rounded-pill {
  border-color: var(--secondary) !important;
  border-width: 2px !important;
}

.billing-summary-container .btn {
  font-size: 12px !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

app-travel-document-information-input .travel-document-information__document-type .row {
  margin-bottom: 0px;
}

app-view-reservation-itinerary-summary .page-body .my-4 button {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

app-view-reservation-itinerary-summary .page-body .my-4 button:first-child {
  border-right-width: 0px;
}

app-passenger-modification-flow button,
app-deposit-fund button {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

app-agent-dashboard .pointer.text-secondary.col-3 {
  width: 12rem;
}

app-reservations-booking-info-form .row .col-12:nth-child(2) .mt-md-5 {
  margin-top: 1rem !important;
}

app-company-transactions-search-result .col-4 {
  width: 50% !important;
}

app-checkout-success .col-sm-6.d-flex.align-items-start.flex-column {
  width: 70% !important;
}

app-journey-fare-options .fare-type-sell-messages [class*='fare-type-']>div img {
  width: 1.5rem;
}

app-site-header.page-header {
  background-color: white !important;
  color: var(--primary) !important;
}

#language-picker {
  color: var(--primary);
}

app-site-footer.container-fluid.page-footer {
  position: relative !important;
}

app-site-footer.container-fluid.page-footer .col-sm-4.ms-auto .row {
  position: absolute !important;
  bottom: 12px !important;
  right: 50px !important;
}

app-booking-success-summary .confirmation .contact--list,
app-booking-success-summary .confirmation .contact--header {
  display: none;
}

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

app-res app-site-footer .row .col-sm-8 .row>div:last-child {
  display: block;
}

app-res app-site-footer .col-md-4 {
  width: 25%;
}

app-site-footer .col-sm-8 {
  z-index: 1;

  >div {
    flex-wrap: nowrap !important;
  }
}

app-site-footer .col-auto.mb-4 .h6.quick-access-label {
  display: none;
}

app-site-footer .col-md-4.mb-4 .h6 {
  display: none;
}

app-journey-origin-destination-with-details .leg-change {
  display: none;
}

.seat.selected-seat {
  fill: var(--secondary) !important;
}

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

app-seats-selection .bg-info.btn.rounded-pill {
  background-color: var(--secondary) !important;
}

.agent-login-header.bg-primary {
  background-color: white !important;
  color: var(--secondary) !important;
}

li.breadcrumb-item a.text-white {
  color: black !important;
}

li.breadcrumb-item a.text-white:hover {
  color: var(--secondary) !important;
}

/* TRAVEL DOCUMENT */
.travel-document-information__document-type {
  display: none;
}

.passenger__travel-document-information {
  display: flex;
  flex-direction: column;
}

.cancellation-fee {
  display: none;
}

app-agent-login app-loyalty-login .loyalty-login-actions-container {
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
  align-items: center !important;
}

app-agent-login app-loyalty-login .loyalty-login-actions-container .btn-login {
  min-width: 100px !important;
}

app-agent-login app-loyalty-login .loyalty-login-actions-container .btn-login,
app-agent-login app-loyalty-login .loyalty-login-actions-container .loyalty-login-external-link-button-1 {
  padding: 0.75rem 1rem !important;
}

app-agent-login app-loyalty-login .loyalty-login-actions-container .loyalty-login-external-link-button-1 {
  background-color: var(--secondary) !important;
  color: var(--primary-inverse) !important;
}

app-agent-login app-loyalty-login .loyalty-login-actions-container .loyalty-login-external-link-button-1:hover {
  background-color: var(--secondary-hover) !important;
}

app-agent-login app-loyalty-login .btn-login-container,
app-agent-login app-loyalty-login .loyalty-login-external-link-1-container {
  display: flex;
  flex-direction: column;
}

app-agent-login app-loyalty-login .btn-login-container::before,
app-agent-login app-loyalty-login .loyalty-login-external-link-1-container::before {
  font-size: 13px;
}

app-agent-login app-loyalty-login .btn-login-container::before {
  padding-left: 0.75rem;
  content: 'For Registed Agent:';
}

html[lang='it'] app-agent-login app-loyalty-login .btn-login-container::before {
  content: "Per l'agente registrato:";
}

html[lang='de'] app-agent-login app-loyalty-login .btn-login-container::before {
  content: 'Für registrierte Agenten:';
}

app-agent-login app-loyalty-login .loyalty-login-external-link-1-container::before {
  content: 'For New Agent:';
}

html[lang='it'] app-agent-login app-loyalty-login .loyalty-login-external-link-1-container::before {
  content: 'Per il nuovo agente:';
}

html[lang='de'] app-agent-login app-loyalty-login .loyalty-login-external-link-1-container::before {
  content: 'Für einen neuen Agenten:';
}