html {
   background-color: #f5f5f5;
 }


.username{
  color: white;
  position: relative;
  top: 15px;
  right: 20px;
}

@media only screen and (max-width: 1200px) {
  #hide-label{
    display: none;
  }
}



.avatar-Box{
  height: 40px;
  width: 40px;
  color: red;
  border: 2px solid black;
  background-color: white;
  position: relative;
  top: 3px;
}
.avatar-Box2{
  height: 50px;
  width: 50px;
  border: 2px solid black;
  background-color: white;

}

 .travel-panel {
   background-color: black;
   color: white;
   display: grid;
   line-height: 1.5;
   /* grid-template-columns: 1fr 1fr 1fr 1fr; */
   /* grid-template-rows: 1fr 1fr 1fr; */
   max-width: 500px;
   justify-content: center;
   gap: 10px;
   border-radius: 20px;
   margin: auto;
   padding: 20px;
   opacity: 0.8;
 }

 .search-form-control {
   display: inline;
   width: 50%;
   padding: 0.375rem 0.75rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: var(--bs-body-color);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-color: var(--bs-body-bg);
   background-clip: padding-box;
   border: var(--bs-border-width) solid var(--bs-border-color);
   border-radius: var(--bs-border-radius);
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }

 /* .backgroundImage {
   background-image: url("../images/Tropical_Beach_Background.jpg");
   background-size: 100% 120%;
   background-repeat: no-repeat;
   background-position: center;
 } */

/* Desktop / Default */
.backgroundImage {
  background-image: url("../images/Tropical_Beach_Background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  min-height: 600px; /* ensures the background box is tall enough */
  padding: 40px 0;   /* spacing for your form */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Mobile */
@media (max-width: 768px) {
  .backgroundImage {
    background-size: cover;       /* keep full image visible */
    background-position: top;     /* show the best part of the image */
    min-height: 100vh;            /* fill entire phone screen */
    padding: 20px 0;              /* reduce spacing for small screens */
  }
}


 * {
   box-sizing: border-box;
 }

 body {
   font: 16px Arial;
 }

 .origin-autocomplete {
   /*the container must be positioned relative:*/
   position: relative;
   display: inline-block;
 }

 .originInput {
   border: 1px solid transparent;
   background-color: #f1f1f1;
   padding: 10px;
   font-size: 16px;
 }

 .originInput[type=text] {
   background-color: #f1f1f1;
   width: 100%;
 }

 .origin-autocomplete-items {
   position: absolute;
   border: 1px solid #d4d4d4;
   border-bottom: none;
   border-top: none;
   z-index: 99;
   height: 150px;
   overflow-y: auto;
   /*position the autocomplete items to be the same width as the container:*/
   top: 100%;
   left: 0;
   right: 0;
 }

 .origin-autocomplete-items div {
   padding: 10px;
   cursor: pointer;
   background-color: black;
   border-bottom: 1px solid #d4d4d4;
 }

 .origin-autocomplete-items div:hover {
   /*when hovering an item:*/
   background-color: black;
 }

 .origin-autocomplete-active {
   /*when navigating through the items using the arrow keys:*/
   background-color: DodgerBlue !important;
   color: #ffffff;
 }



 .destination-autocomplete {
   /*the container must be positioned relative:*/
   position: relative;
   display: inline-block;
   z-index: 2;
 }

 .destinationInput {
   border: 1px solid transparent;
   background-color: #f1f1f1;
   padding: 10px;
   font-size: 16px;
 }

 .destinationInput[type=text] {
   background-color: #f1f1f1;
   width: 100%;
 }

 .destination-autocomplete-items {
   position: absolute;
   border: 1px solid #d4d4d4;
   border-bottom: none;
   border-top: none;
   z-index: 99;
   height: 150px;
   overflow-y: auto;
   /*position the autocomplete items to be the same width as the container:*/
   top: 100%;
   left: 0;
   right: 0;
 }

 .destination-autocomplete-items div {
   padding: 10px;
   cursor: pointer;
   background-color: black;
   border-bottom: 1px solid #d4d4d4;
 }

 .destination-autocomplete-items div:hover {
   /*when hovering an item:*/
   background-color: black;
 }

 .destination-autocomplete-active {
   /*when navigating through the items using the arrow keys:*/
   background-color: DodgerBlue !important;
   color: #ffffff;
 }

 #dropdown1 {
   position: relative;
   width: 300px;
 }

 #searchInput1 {
   width: 100%;
   padding: 8px;
   box-sizing: border-box;

 }

 #dropdownList1 {
   position: absolute;
   width: 100%;
   max-height: 150px;
   overflow-y: auto;
   border: 1px solid #ccc;
   background-color: black;
   z-index: 1000;
   display: none;
 }

 .dropdown-item1 {
   padding: 8px;
   cursor: pointer;
   position: relative;
   z-index: 9999;
 }

 .dropdown-item1:hover {
   background-color: rgb(243, 160, 6);
 }

 #dropdown2 {
   position: relative;
   width: 300px;
 }

 #searchInput2 {
   width: 100%;
   padding: 8px;
   box-sizing: border-box;

 }

 #dropdownList2 {
   position: absolute;
   width: 100%;
   max-height: 150px;
   overflow-y: auto;
   border: 1px solid #ccc;
   background-color: black;
   z-index: 1000;
   display: none;
 }

 .dropdown-item2 {
   padding: 8px;
   cursor: pointer;
   position: relative;
   z-index: 9999;
 }

 .dropdown-item2:hover {
   background-color: rgb(243, 160, 6);
 }

.modal.show .modal-dialog {
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0;
  z-index: 1055;
  width: auto;
  max-width: 90vw;
}

/* Hide username + avatar when hamburger menu is open */
.navbar-collapse.show ~ .user-info {
    display: none !important;
}