:root {
  --overall-light: #badeea;
  --overall-dark: #31758b;

  --current-color-light: #badeea;
  --current-color-dark: #31758b;

  --num_of_passengers-light: #f57272;
  --num_of_passengers-dark: #bf5454;
  --num_of_routes-light: #b7b2d8;
  --num_of_routes-dark: #6b5fb8;

  --accomodation_within_5km-light: #c7dd71;
  --accomodation_within_5km-dark: #8bbe3e;

  --airport_amenities-light: #fdcb4c;
  --airport_amenities-dark: #e3a915;
  --parking_cost-light: #f58f56;
  --parking_cost-dark: #de5e16;
  --distance_to_nearest_city-light: #84ceaf;
  --distance_to_nearest_city-dark: #5a9d81;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

@keyframes fadein {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.fadeout {
  animation-name: fadeout;
  animation-duration: 0.3s;
}

.fadein {
  animation-name: fadein;
  animation-duration: 0.3s;
}

.d-none {
  display: none !important;
}

.d-mobile {
  display: block !important;
}

.d-desktop {
  display: none !important;
}

.scrollbar {
  position: relative;
  margin-top: 20px;
  /* margin-bottom: 20px; */
}

.scrollbar-back {
  height: 4px;
  background: #fff;
  border-radius: 4px;
  width: 100%;
}

.scrollbar-thumb {
  background-color: var(--current-color-dark);
  border-radius: 4px;
  height: 4px;
  width: 20px;
  position: absolute;
  top: 0px;
  left: 0px;
}

html,
body {
  font-family: "Open Sans", sans-serif;
  font-style: normal;
  margin: 0;
  padding: 0;
}

.page {
  height: 844px;
}

.main-title {
  font-weight: 300;
  font-size: 33.18px;
  line-height: 45px;
}

.main-container {
  max-width: 790px;
  background-color: #fff;
  padding: 0px;
}

.green-overlay {
  background-color: var(--current-color-light);
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 50%;
  left: 0;
  bottom: 0;
}

.page-1 {
  padding: 20px;
  position: relative;
  z-index: 0;
}

.logo-wrap {
  margin-top: 38px;
}

.dropdown {
  max-width: 100%;
}

.dropdown label {
  display: block;
  font-weight: 300;
  font-size: 16px;
  line-height: 22px;
}

.slider-wrap {
  overflow-x: auto;
  /* scroll-behavior: smooth; */
  /* -webkit-overflow-scrolling: touch; */
  position: relative;
  padding-bottom: 16px;
  padding-top: 26px;
  margin-left: -20px;
  width: calc(100% + 40px);
}

.card-deck {
  flex-wrap: nowrap;
  flex-direction: row;
  margin: 0px;
  min-height: 364px;
  /* padding-left: 20px;
  padding-right: 20px; */
}

.card {
  width: 243px;
  height: 364px;
  position: relative;
  border: none;
  background-color: #fff;
  border-radius: 20px;
  margin: 0 !important;
  cursor: pointer;
}

.card .dark-overlay {
  border-radius: 20px;
}

.card-wrap {
  padding-left: 10px;
  padding-right: 10px;
}

.card-wrap:first-of-type {
  padding-left: 20px;
}

.card-wrap:last-child {
  padding-right: 20px;
}

.card-title {
  font-weight: 600;
  font-size: 33.18px;
  line-height: 45px;
  margin-bottom: 2px;
}

.card-body {
  position: absolute;
  color: #fff;
  z-index: 1;
}

.card-image {
  height: 100%;
  filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.25));
  border-radius: 20px;
}

.airport-name {
  font-weight: 400;
  font-size: 23.04px;
  line-height: 31px;
  margin-bottom: 4px;
}

.text-muted {
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 22px;
  color: #fff !important;
}

.slider-wrap::-webkit-scrollbar {
  display: none !important;
  /* height: 4px !important;
  background: #fff !important;
  border-radius: 4px !important; */
}
/* 
.slider-wrap::-webkit-scrollbar-track {
  background: #fff !important;
  border-radius: 4px !important;
}

.slider-wrap::-webkit-scrollbar-thumb {
  background-color: var(--current-color-dark) !important;
  border-radius: 4px !important;
} */

.open-btn {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 1;
}

.btn-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--current-color-dark);
}

.btn-circle:hover {
  color: var(--current-color-dark);
}

.btn-circle:not(:disabled):not(.disabled):active {
  color: var(--current-color-dark) !important;
}

.btn-white {
  background-color: #fff;
}

/* Choices */

.choices__list--dropdown .choices__item {
  font-size: 19.2px;
  line-height: 26px;
  font-weight: 400;
  padding: 16px 26px;
}

.choices__inner {
  font-weight: 400;
  font-size: 19.2px;
  line-height: 26px;
  background: #ffffff;
  border: 1.5px solid var(--current-color-dark);
  border-radius: 8px;
  padding-left: 22px;
}

.is-open .choices__inner {
  border-radius: 8px 8px 0px 0px !important;
}

.is-focused .choices__inner {
  border: 1.5px solid var(--current-color-dark);
}

.choices__list--dropdown {
  border-color: var(--current-color-dark) !important;
  border-radius: 0px 0px 8px 8px;
  z-index: 10;
}

.choices[data-type*="select-one"]:after {
  border-color: transparent;
  border-width: 0px;
  margin-top: 0px;
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='9' viewBox='0 0 15 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0.75L7.25 7L13.5 0.75' stroke='%2331758B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 18px 9px;
  width: 18px;
  height: 9px;
  transform: translateY(-48%);
  right: 8px;
}

[data-category="num_of_passengers"] .choices[data-type*="select-one"]:after {
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='9' viewBox='0 0 15 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0.75L7.25 7L13.5 0.75' stroke='%23bf5454' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}
[data-category="num_of_routes"] .choices[data-type*="select-one"]:after {
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='9' viewBox='0 0 15 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0.75L7.25 7L13.5 0.75' stroke='%236b5fb8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}
[data-category="accomodation_within_5km"]
  .choices[data-type*="select-one"]:after {
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='9' viewBox='0 0 15 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0.75L7.25 7L13.5 0.75' stroke='%238bbe3e' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}
[data-category="airport_amenities"] .choices[data-type*="select-one"]:after {
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='9' viewBox='0 0 15 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0.75L7.25 7L13.5 0.75' stroke='%23e3a915' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}
[data-category="parking_cost"] .choices[data-type*="select-one"]:after {
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='9' viewBox='0 0 15 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0.75L7.25 7L13.5 0.75' stroke='%23de5e16' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}
[data-category="distance_to_nearest_city"]
  .choices[data-type*="select-one"]:after {
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='9' viewBox='0 0 15 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0.75L7.25 7L13.5 0.75' stroke='%235a9d81' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}

.choices.is-open.is-focused:after {
  border-color: transparent;
  transform: rotate(180deg);
  margin-top: -4px;
}

.choices__list .choices__item--choice[data-value="overall"].is-highlighted {
  background-color: var(--overall-light);
}

.choices__list
  .choices__item--choice[data-value="num_of_passengers"].is-highlighted {
  background-color: var(--num_of_passengers-light);
}

.choices__list
  .choices__item--choice[data-value="num_of_routes"].is-highlighted {
  background-color: var(--num_of_routes-light);
}

.choices__list
  .choices__item--choice[data-value="accomodation_within_5km"].is-highlighted {
  background-color: var(--accomodation_within_5km-light);
}

.choices__list
  .choices__item--choice[data-value="airport_amenities"].is-highlighted {
  background-color: var(--airport_amenities-light);
}

.choices__list
  .choices__item--choice[data-value="parking_cost"].is-highlighted {
  background-color: var(--parking_cost-light);
}

.choices__list
  .choices__item--choice[data-value="distance_to_nearest_city"].is-highlighted {
  background-color: var(--distance_to_nearest_city-light);
}

/* PAGE 2 */

.page-content {
  background-image: url("../images/Large/London.html\ Heathrow\ Airport-790.png");
  background-repeat: no-repeat;
  background-size: 100% 60%;
  background-position: top;
  background-color: #ffffff;
  padding: 30px;
  padding-bottom: 0px;
  min-height: 808px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.dark-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  background: rgba(0, 0, 0, 0.2);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}

.details {
  background: #ffffff;
  border-radius: 40px 40px 0px 0px;
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 60px);
  margin-left: -30px;
  z-index: 1;
}

.detail {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 10px 0px;
}

.icon-box {
  background: #f57171;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-right: 20px;
}

.detail .text {
  font-weight: 300;
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 2px;
}

.detail .value {
  font-weight: 600;
  font-size: 23.04px;
  line-height: 31px;
}

.texts {
  color: #fff;
  z-index: 1;
  /* flex-grow: 1;
  display: flex;
  align-items: center; */
  /* padding-top: 28px; */
  padding-bottom: 30px;
}

.ranking-text {
  margin-bottom: 10px;
}

.ranking-text .rank {
  font-weight: 600;
  font-size: 33.18px;
  line-height: 45px;
}

.ranking-text .category {
  font-weight: 300;
  font-size: 16px;
  line-height: 22px;
}

.airport-name-big {
  font-weight: 400;
  font-size: 28px;
  line-height: 38px;
}

.airport-abbr-country {
  font-weight: 300;
  font-size: 23.04px;
  line-height: 31px;
}

.num_of_passengers .icon-box {
  background-color: var(--num_of_passengers-light);
}

.num_of_routes .icon-box {
  background-color: var(--num_of_routes-light);
}

.accomodation_within_5km .icon-box {
  background-color: var(--accomodation_within_5km-light);
}

.airport_amenities .icon-box {
  background-color: var(--airport_amenities-light);
}

.parking_cost .icon-box {
  background-color: var(--parking_cost-light);
}

.distance_to_nearest_city .icon-box {
  background-color: var(--distance_to_nearest_city-light);
}

.bottom-nav {
  background-color: #3C3C3B;
  padding: 12px 20px;
  width: calc(100% + 60px);
  margin-left: -30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 576px) {
  .d-desktop {
    display: block !important;
  }

  .d-mobile {
    display: none !important;
  }

  .dropdown {
    max-width: 326px;
  }

  [data-lang="fr"] .dropdown {
    max-width: 50%;
  }

  .page {
    height: 744px;
  }

  .page-1 {
    padding: 33px 40px;
  }

  /* .card {
    margin-left: 15px;
    margin-right: 15px;
  } */

  /* .card-deck {
    padding-left: 40px;
    padding-right: 40px;
  } */

  .card-wrap:first-of-type {
    padding-left: 40px;
  }
  
  .card-wrap:last-child {
    padding-right: 40px;
  }

  .slider-wrap {
    padding-bottom: 38px;
    padding-top: 26px;
    margin-left: -40px;
    width: calc(100% + 80px);
  }

  .page-content {
    padding: 40px;
    border-radius: 20px;
    background-size: 100% 100%;
    min-height: 744px;
  }

  .page-content .dark-overlay {
    border-radius: 20px;
  }

  .airport-name-big {
    font-size: 33.18px;
    line-height: 45px;
  }

  .texts {
    padding: 30px 54px;
  }

  .details {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    padding: 37px 40px;
    border-radius: 40px;
  }

  .details.slideup {
    animation: none !important;
  }

  .detail {
    width: 50%;
  }

  .detail:nth-child(even) {
    padding-left: 30px;
  }

  .top-nav {
    padding-bottom: 24px;
    border-bottom: 1.5px solid #ffffff;
  }

  .scrollbar {
    margin-top: 0px;
  }
}