:root {
  /* Primary */
  --primary-50: #e6f7f7;
  --primary-100: #bdf0f0;
  --primary-200: #8de5e5;
  --primary-300: #5fdada;
  --primary-400: #2bc1c3;
  --primary-500: #02a4a6;
  --primary: #02a4a6;
  --primary-600: #019091;
  --primary-700: #017476;
  --primary-800: #01595a;
  --primary-900: #013f40;
  --primary-950: #002626;

  /* Secondary */
  --secondary-50: #e7f2f3;
  --secondary-100: #c1e0e3;
  --secondary-200: #97ccd0;
  --secondary-300: #6db8bd;
  --secondary-400: #3f9aa1;
  --secondary-500: #13707a;
  --secondary: #13707a;
  --secondary-600: #115f67;
  --secondary-700: #0e4d54;
  --secondary-800: #0b3b40;
  --secondary-900: #082a2d;
  --secondary-950: #04191b;

  --zinc-950: #09090b;
  --zinc-900: #1c1917;
  --zinc-800: #27272a;
  --zinc-700: #3f3f46;
  --zinc-600: #52525b;
  --zinc-500: #71717a;
  --zinc-400: #a1a1aa;
  --zinc-300: #d4d4d8;
  --zinc-200: #e4e4e7;
  --zinc-100: #f4f4f5;
  --zinc-50: #fafafa;
}

#search_box select {
  height: 40px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  appearance: auto !important;
}
#search_box form p {
  display: none !important;
}
.module-icon svg {
  width: 36px !important;
  height: 36px !important;
}
.reservation-item li {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  border-radius: 10px !important;
  border: 1px solid white;
  background-color: transparent !important;
}
.active-module {
  border: 1px solid #02a4a6 !important;
}
.active-module span,
.reservation-item li:hover span {
  color: #02a4a6 !important ;
}
.flighttype-items li * {
  color: black !important;
}
.flighttype-items li input[type="radio"] {
  display: inline-block !important;
  accent-color: #02a4a6 !important;
  appearance: auto !important;
}
.flighttype-items li label {
  display: flex !important;
  align-items: center;
}
.flighttype-items li {
  background-color: #e7eaecc7 !important;
}

.book-border.book-border-zinc-300 {
  border: 1px solid var(--zinc-300) !important;
}
.book-border-b.book-border-zinc-300 {
  border-bottom: 1px solid var(--zinc-300) !important;
}
.book-border-t.book-border-zinc-300 {
  border-top: 1px solid var(--zinc-300) !important;
}

.book-border.book-border-zinc-200 {
  border: 1px solid var(--zinc-200) !important;
}
.book-border-b.book-border-zinc-200 {
  border-bottom: 1px solid var(--zinc-200) !important;
}
.book-border-t.book-border-zinc-200 {
  border-top: 1px solid var(--zinc-200) !important;
}
.book-border-l.book-border-solid.book-border-zinc-200 {
  border-left: 1px solid var(--zinc-200) !important;
}

.book-border.book-border-zinc-500 {
  border: 1px solid var(--zinc-500);
}
.flighttype-items {
  margin-bottom: 12px !important;
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
}
.flighttype-items li {
  margin: 0 !important;
  border-radius: 10px !important;
}
.departure-route,
.destination-route,
.Basis_Date_Box .reserve-field,
.flightclass-field,
.passengers-field {
  background-color: #f1f2f6 !important;
  border-radius: 10px;
  padding: 10px 4px !important;
}
input.text-value {
  padding-top: 14px !important;
}
input.text-value::placeholder {
  color: black !important;
}
.Basis_Date_Box .reserve-field input::placeholder {
  color: black !important;
  opacity: 0 !important;
}
.Basis_Date_Box .reserve-field input {
  padding-top: 40px !important;
}
.Basis_Date_Box .reserve-field input {
  right: 4px !important;
}
.exchangeRoute::after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  background-color: #f1f2f6 !important;
  border-radius: 10px;
  top: 0;
  left: 0;
  border: 1px solid #e2e1e1;
  transform: rotate(45deg);
  z-index: 0;
}
.exchangeRoute:hover::after {
  border: 1px solid #02a4a6 !important;
}
.exchangeRoute {
  width: 35px !important;
  height: 35px !important;
  background-color: transparent !important;
}
.exchangeRoute svg {
  z-index: 10;
  width: 30px !important;
  height: 30px !important;
  position: relative !important;
}
.show-passengers-dropdown span.passenger-counts,
.FlightClass-text {
  padding-top: 11px !important;
  font-size: 14px !important;
}
.departure-route label svg,
.destination-route label svg,
.Basis_Date_Box .reserve-field label svg,
.flightclass-field label svg,
.passengers-field label svg {
  display: none !important;
}
ul.FlightClass li {
  padding: 6px 4px !important;
  border-radius: 10px !important;
}
ul.FlightClass:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  right: 0 !important;
  left: 0 !important;
}
ul.FlightClass li * {
  color: black !important;
}
.searchList svg {
  display: none !important;
}
.active-FlightClass,
ul.FlightClass li:hover {
  background-color: #02a4a6 !important;
}
.FlightClass .clr {
  display: none;
}
ul.FlightClass li.active-FlightClass *,
ul.FlightClass li:hover * {
  color: white !important;
}
.plus-count,
.minus-count {
  background-color: #02a4a6 !important;
  color: white !important;
  border-radius: 8px !important;
}
.confirm-passenger {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 40px !important;
  border-radius: 10px !important;
  background-color: #02a4a6 !important;
  transition: all 0.4s ease-in-out !important;
  color: white !important;
}
.reserve-search button * {
  color: white !important;
}
.reserve-search button {
  border-radius: 10px !important;
  background-color: #02a4a6 !important;
}
#search_box {
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 13px -10px #0c2d33e3;
  border-radius: 1em;
  padding: 1.5em;

  position: relative;
  background-color: white;
}
.bg-primary {
  background-color: var(--primary);
}
.birthdate-dates .bg-bgColor-100 {
  background-color: var(--zinc-200) !important;
}
@media not all and (min-width: 1024px) {
  .searchList ul {
    max-height: unset !important;
  }
  .search-box-banner {
    height: fit-content !important;
    padding: 84px 0 !important;
  }
  .services-container {
    width: 100% !important;
  }
  .searchList,
  .passengerbox,
  .FlightClass {
    border-radius: 0 !important;
    border: none !important;
    z-index: 1000000000 !important;
  }
  .passenger-birthday-dropdown {
    z-index: 10000000000000000 !important;
  }
  /* .reservation-item {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  } */
  .flighttype-items-ul li {
    padding: 4px 2px !important;
  }
  .Add-Remove {
    height: 56px !important;
  }
  .Basis_Date_Box {
    flex-direction: column !important;
    gap: 15px !important;
  }
  .Basis_Date_Box .reserve-field {
    width: 100% !important;
  }
  .reservation-item li {
    gap: 5px !important;
    padding: 23px 1px !important;
  }

  .FlightClass ul {
    margin-top: 40px;
  }
  .FlightClass ul li {
    text-align: center !important;
  }
  .searchList li {
    text-align: center !important;
  }
  .active-FlightClass * {
    color: white !important;
  }
  .active-FlightClass {
    border-radius: 10px !important;
  }
  .reservation-item {
    margin-bottom: 34px !important;
    padding-bottom: 9px !important;
    border-bottom: 1px solid #d6d9e3 !important;
  }
}
@media (min-width: 1024px) {
  #r-flight .Basis_Date_Box,
  #r-flighthotel .Basis_Date_Box {
    width: 32% !important;
  }
  .searchList li.cursor-pointer {
    text-align: center !important;
  }
  #search_box {
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 10px 13px -10px #0c2d33e3 !important;
    border-radius: 1em;
    padding: 1.5em;
    margin-top: -10em;
    z-index: 10;
    position: relative;
    background-color: white;
  }
  #search_box input,
  #search_box input::placeholder {
    font-size: 14px !important;
  }
  .Add-Remove {
    width: 47% !important;
  }
  .route-minus-btn {
    left: 0 !important;
    top: -25px !important;
  }
  .multiroute-fields .Flightclass-Passenger {
    width: 66% !important;
  }
  .route-content-inner .flight-routes {
    width: 75% !important;
  }
  #r-insurance .passengers-field {
    width: 28% !important;
  }
  .exchangeRoute svg {
    transform: rotate(90deg) !important;
  }
  .passengerbox,
  ul.FlightClass {
    top: 100% !important;
    border: 1px solid #b6b6b8 !important;
    border-radius: 10px !important;
  }
  .Add-Remove button:hover,
  .toggle-calendar:hover,
  .plus-count:hover,
  .reserve-search button:hover,
  .confirm-passenger:hover,
  .minus-count:hover {
    background-color: #004c4d !important;
  }
  ul.FlightClass {
    padding: 4px !important;
    border-radius: 10px !important;
  }
  .exchangeRoute {
    left: -22px !important;
  }
  .flighttype-items li {
    margin: 0 !important;
    padding: 4px 10px !important;
  }
  .reservation-item {
    display: flex !important;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px !important;
    padding-bottom: 23px !important;
    border-bottom: 1px solid #d6d9e3 !important;
  }
  .reservation-item li {
    margin: 0 !important;
    padding: 0.5em 1em !important;
    min-width: 140px !important;
    height: 54.1px !important;
  }
}
#picker button {
  cursor: pointer !important;
}
.route-minus-btn {
  width: fit-content !important;
  height: fit-content !important;
  position: absolute !important;
}
.route-minus-btn span {
  display: none !important;
}
.removeroute-icon {
  width: 40px !important;
  height: 33px !important;
}
.Add-Remove div {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
}
.searchHistory-content {
  margin-top: 4em !important;
}
.Add-Remove button *,
.toggle-calendar {
  color: white !important;
  font-size: 14px !important;
}
.Add-Remove button svg {
  display: none !important;
}
.Add-Remove button,
.toggle-calendar {
  border-radius: 10px !important;
  background-color: #02a4a6 !important;
}
.flight-banner-background {
  background-image: url(../images/search-bg-flight.jpg) !important;
}
.hotel-banner-background {
  background-image: url(../images/search-bg-hotel.jpg) !important;
}

.flighthotel-banner-background {
  background-image: url(../images/search-bg-flighthotel.jpg) !important;
}
.insurance-banner-background {
  background-image: url(../images/search-bg-insurance.jpg) !important;
}
.warningColor-100 {
  color: rgb(221, 0, 0) !important;
}

input,
textarea,
select,
button,
a,
[role="button"] {
  -webkit-tap-highlight-color: transparent !important;
}
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  outline: none;
  box-shadow: none;
}
html,
body,
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
input,
textarea,
select {
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  background-clip: padding-box;
}
input:focus,
input:focus-visible,
input:active,
textarea:focus,
textarea:focus-visible,
textarea:active,
select:focus,
select:focus-visible,
select:active {
  outline: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
*:focus-within {
  outline: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}