#sidebar {
      width: 100vw;
      height: 60px;
      
      transition: width 0.3s, height 0.3s;
      box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
      overflow-x: auto;
      
      z-index: 1000;
    white-space: nowrap;
     animation: fadeIn 0.5s ease-out;
    
    }

   

    .leaflet-top.leaflet-left{
    display: none !important;
    }

  
  

  

.nav-link {
    transition: all 0.3s;
}

#toggle-btn {
    width: 100%;
}

.leaflet-control-zoom-in, .leaflet-control-zoom-out {
    color: #0d6efd !important;
}

.rotate-btn {
    transition: transform 0.3s ease;
    /* Smooth transition for transform */


}

.rotate-btn:hover {
    transform: rotate(360deg);
    /* Rotate the button */
}


/* Custom styles for the toggle button */
.leaflet-control-layers-toggle {
    background: none !important;
    /* Remove background image */
    color: orange !important;
    /* Icon color */

    text-align: center !important;

    display: list-item !important;
    font-size: 1.1rem;
    justify-content: center !important;
    align-items: center !important;
    justify-items: center !important;
}

.leaflet-routing-container {
  max-height: 70vh !important; /* Adjust this value as needed */
  max-width: 70vw !important;
 
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid #cccccc;
  border-radius: 4px;
  margin-top: 187px !important;
  scrollbar-width: none;
  
  padding: 10px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  opacity: 90%;
  color: rgb(245, 193, 95);
  transition: transform 0.3s ease;
   display: none !important; 
}

.leaflet-routing-alternatives-container{
    width: 100% !important;
    display: flexbox !important;
}

/* Custom styles for the Leaflet layer control */
.leaflet-control-layers {
    background-color: #fff;
    /* Background color */
    border: 1px solid #ddd;
    /* Border color */
    border-radius: 5px;
    /* Rounded corners */
    padding: 5px;
    top: 90px !important;
    /* Padding around the control */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    /* Box shadow */
}

.leaflet-control-layers .leaflet-control-layers-list {
    font-family: 'Arial', sans-serif !important;
    /* Font style */
    font-size: 14px;
    /* Font size */
    color: #333;
    /* Text color */
}

.leaflet-control-layers input[type="checkbox"] {
    margin: 5px;
    /* Margin around checkboxes */
}



.leaflet-control-layers label {
    display: block;
    /* Make each layer entry a block element */
    cursor: pointer;
    /* Cursor pointer on hover */
}

.leaflet-control-layers-expanded {
    max-height: 150px;
    /* Max height for expanded menu */
    overflow-y: hidden;
    /* Scroll if content exceeds height */
}

/* Custom styles for the toggle button */
.leaflet-control-layers-toggle {
    
    /* Remove background image */
    color: rgba(255, 166, 0, 0.572) !important;
    /* Icon color */
    border: none !important;
    height: 40px;
    line-height: 40px;
    text-align: center !important;

    cursor: pointer;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
}

.leaflet-control-layers-toggle:hover {
    background-color: rgba(255, 165, 0, 0.1);
    /* Light orange background on hover */
}


.leaflet-control-custom {
    background-color: white;
    border: 2px solid #ddd;
    border-radius: 5px;
    padding: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.leaflet-control-custom label {
    display: block;
    margin-bottom: 5px;
    cursor: pointer;
}

.leaflet-control-custom input {
    margin-right: 5px;
}

.search-container {
    display: none;
    /* Initially hidden */
    position: absolute;
   
    bottom: 14px;
    
    margin-left: 20px;
    margin-right: 20px;
    max-height: 250px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    
    z-index: 1050;
    /* Ensure it sits above other content */
    transition: transform 0.5s ease;
    transform: translateX(-50%);
    /* Initially off-screen to the right */
}



#distance-info{
    z-index: 1050;
    top: 200px;
    
}

.building-badge{

    cursor: pointer;
}


.leaflet-control-attribution {
    display: none !important;
}

.leaflet-control-custom {
    max-width: 100px;
    align-items: start;
}

.leaflet-routing-alternatives-container {

    max-width: 180px !important;
   
    max-height: 300px !important;
    overflow-x: hidden ;
    overflow-y: hidden;

    white-space: nowrap;
}

.search-container.active {
    display: block;
    /* Show when active */
    transform: translateX(0);
    /* Move into view */
}

.search-container .close-btn {
    font-size: 1.5rem;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 20px;
}

.search-results {
    max-height: 200px;
    overflow-y: auto;
    position: relative;
    top: 20;
}

.mode-icons{
    cursor: pointer;
}
/* .leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: transparent !important;
    
     box-shadow: none !important;
} */
.leaflet-popup-content-wrapper {
    padding: 1px;
     text-align: left; 
     border-radius: 0px !important;
     background-color: transparent !important;
    border: none !important;
}

.leaflet-popup-content-wrapper {
 background-color: transparent !important;
}

.leaflet-tooltip-top:before {
    bottom: 0;
    margin-bottom: -12px;
    border-top-color: green !important;
}

img.huechange { filter: hue-rotate(120deg); }

.leaflet-popup {
   
     margin-bottom: 0px !important;
}

.search-results li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.search-results li:hover {
    background-color: #f1f1f1;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

.custom-popup {
    animation: fadeIn 0.5s ease-out;
    
}



.arrival-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIx 0.5s ease-in-out;
  }
  
  .arrival-message {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    font-size: 24px;
    font-weight: bold;
    animation: scaleIn 0.5s ease-in-out;
  }
  
  @keyframes fadeIx {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes scaleIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
  }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

 .image-container {
      width: 100%; /* Set the desired width */
      height: 100%; /* Set the desired height */
      overflow: hidden; /* Prevent overflow */
      position: relative; /* For absolute positioning */
    }

 .image-container img {
      max-width: 100%; /* Prevent horizontal overflow */
      max-height: 100%; /* Prevent vertical overflow */
      position: absolute; /* Allow positioning within the container */
      top: 50%; /* Center vertically */
      left: 50%; /* Center horizontally */
      transform: translate(-50%, -50%); /* Adjust for true centering */
    }

.bounce {
    animation: bounce 0.6s ease;
}

.user-marker-icon {
    background-color: #3388ff;
    border: 2px solid #fff;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    box-shadow: 0 0 0 2px #3388ff;
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(51, 136, 255, 0.7);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(51, 136, 255, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(51, 136, 255, 0);
    }
  }


  html, body {
   
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.fa-marker {
    color: rgb(19, 151, 166);
    font-size: 24px;
}

.leaflet-div-icon {
    background: transparent !important;
    border: none !important;
}

.fa-marker:before {
    content: none !important;
}