@media (max-width: 767px) {
  .pfz-mobile {
   
    margin-top: -30px;
  }
}

/* Default: Hidden (for desktops) */
.navbar-toggle {
  display: none;
}

/* Show only on small screens (e.g., mobile) */
@media (max-width: 767px) {
  .navbar-toggle {
    display: block !important;
    background-color: #007bff;   /* Blue background for visibility */
    border: 1px solid #0056b3;
    color: white;
    position: fixed;
    
    right: -10px;
    z-index: 9999;
  }

  .navbar-toggle .icon-bar {
    background-color: white;     /* Makes the bars white */
  }
}

 
 #toolBar {
  display: none; /* Start hidden */
}

#toolBar.visible {
  display: flex; /* Show when toggled */
}

 
 
 #previousExtent, #nextExtent{
left:10px !important;
 }
 #floatingTools {
  position: absolute;
  top: 150px;
  left: -10px;
  /*width: 180px;  You can adjust this 
  background: rgba(255, 255, 255, 0.95);
  /box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);*/
  padding: 10px;
  border-radius: 8px;
  
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 30px;
}



#floatingTools img {
  height: 16px;
  width: 16px;
}

    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
    .leaflet-popup-content,.leaflet-control-layers label,.leaflet-container {
      
      font-size: 13px !important;
      
  }
.visible-xs.text-center {
    margin-top: 0 !important;
  }
  .pfz-tools {
    background: linear-gradient(to right, #0077b6, #00b4d8);/* Darker background */
    color: #fff; /* White text */
    font-size: 16px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}


    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    .row {
      display: flex;
    }

    
    /* Middle Row */
    .middle-row {
      flex: 6.5;
      display: flex;
    }

    
    .column-80 {
      width: 100%;
      background-color: #e0e0e0;
      display: flex;
      position: relative;
    }

    #map {
      flex: 1;
      width: 100%;
    }
    #coordinates {
      width: 200px;
            position: absolute;
            
            bottom: 100px;
            left: 20px;
            
            background: rgba(255, 255, 255, 0.9);
            padding: 5px 10px;
            border: 1px solid #ccc;
            font-family: Arial, sans-serif;
            font-size: 14px;
            z-index: 1000;
            text-align: center;  /* Centers the text horizontally */
  vertical-align: middle;  /* Ensures it is centered vertically */
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Vertically centers the content */
  align-items: center;  /* Horizontally centers the content */
        }

        .checkbox-container {
          position: fixed;
          top: 100px;
          right: 10px;
          background-color: rgba(255, 255, 255, 0.8);
          padding: 10px;
          border-radius: 5px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
          font-size: 14px;
          z-index: 1000;
          display: flex;
          flex-direction: column;
          gap: 5px;
        }
    
        .home-button {
          position: absolute;
          top: 150px;
          left: 20px;
          background-color: #f0f0f0;
          color: black;
          border: none;
          border-radius: 5px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
          /*width: 135px;  Change from fixed 30px to auto */
          height: 30px;
          padding: 0 10px; /* Add padding for better spacing */
          
          /*display: flex;*/
          align-items: center;
          gap: 15px; /* Space between icon and text */
      
          text-align: center;
          line-height: normal;
          cursor: pointer;
          z-index: 1000;
          white-space: nowrap; /* Prevent text from wrapping */
          margin: 0px 10px;
        }
      
        .button-text {
          font-size: 14px;
        }

        .god-icon {
          background: #f0f0f0;
          border-radius: 5px;
          width: 35px; /* Allow dynamic width */
          height: 30px;
          padding: 0 10px; /* Add padding for spacing */
          
          display: flex;
          align-items: center;
          /*gap: 5px;  Space between icon and text */
      
          text-align: center;
          line-height: normal;
          cursor: pointer;
          color: black;
          border: 1px solid #ccc;
          position: absolute;
          top: 200px;
          left: 20px;
          z-index: 1000;
          white-space: nowrap; /* Prevent text wrapping */
          margin: 0px 10px;
      }
      

    .home-button:hover {
      background-color: #f3e5f5;
    }
	
/* Positioning Previous and Next buttons */
.top-controls {
  position: absolute;
  bottom: 40%; /* Adjust to position just above the Full Extent button */
  left: 8%; /* Align with the Full Extent button */
  display: flex;
  flex-direction: column;
  gap: 15px; /* Spacing between buttons */
  z-index: 1000;
}

.control-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 30px;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f0f0f0;
  color: black;
  text-align: center;
  margin: 0px 20px;
  padding: 0;
  gap: 0;
}

.control-button .button-text {
  display: none; /* Hide optional text */
}





    .tool-bar {
      position: absolute;
      top: 180px;
      left: 75px;
      background: #f0f0f0;
      border: 1px solid #ccc;
      border-radius: 5px;
      display: flex;
      gap: 10px;
      padding: 5px;
      z-index: 1000;
      display: none;
    }
    .tool-bar button {
      background: white;
      border: none;
      cursor: pointer;
      font-size: 18px;
      
    }
    .tool-bar button img {
      width: 22px;
      height: 22px;
    }

    div.god-icon:hover {
      background-color: #f3e5f5;
    }
    


.collapsed {
  display: none; /* Hide when collapsed */
}

.accordion-btn {
  position: absolute;
  top: 50%;
  left: 2%;
  transform: translate(-50%, -50%);
  background-color:  #f0f0f0;
  border: 2px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
.accordion-btn:hover {
  background-color: #f3e5f5;
}
.full-extent-btn {
	
  position: absolute;
  top: 22%;
  left: 1%;
  background-color:  #f0f0f0;
  color: black;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.full-extent-btn:hover {
  background-color: #f3e5f5;
}

.full-list-btn {
	
  position: absolute;
  top: 250px;
  right: 1%;
  background-color:  #f0f0f0;
  color: black;
  border: 1px solid #ccc;
  
  font-size: 15px;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.full-list-btn:hover {
  background-color: #f3e5f5;
}

#legendButton {
  width: 35px;  /*Allow button width to expand */
  height: 30px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  text-align: center;
  line-height: normal;
  cursor: pointer;
  z-index: 1000;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 15px; /* Space between icon and text */
  padding: 5px 10px; /* Adjust padding for spacing */
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  margin:0px 10px;
}

#legendButton i {
  font-size: 16px; /* Adjust icon size */
}

.button-text {
  font-size: 14px;
  white-space: nowrap; /* Prevent text wrapping */
}



#legendDiv {
  width: 200px;
  max-height: 30vh; /* Responsive max height: 50% of viewport height */
  display: none;
  position: absolute;
  top: 250px;
  left: 120px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  padding: 10px;
  z-index: 1000;
  overflow-y: auto; /* Ensure scroll for overflow */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  overscroll-behavior: contain; /* Prevent scroll chaining on mobile */
}



#legendDiv button {
  background-color: #FF0000; /* Red color */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 5px 10px;
  margin-top: 10px;
 position: absolute; 
 top: 5px; 
 right: 5px; 
    
}



/* Button container styles */
.print-map-btn {
  position: absolute;
  top: 300px;  /* Adjust based on your layout */
  left: 20px;  /* Adjust based on your layout */
  background-color: #f0f0f0;
  color: black;
  border: none;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /*width: 135px;  Allows button width to expand based on content */
  height: 30px;
  padding: 0 10px; /* Adds spacing inside the button */

  /*display: flex;*/
  align-items: center;
  gap: 20px; /* Space between icon and text */

  text-align: center;
  line-height: normal;
  cursor: pointer;
  z-index: 1000;
  white-space: nowrap; /* Prevents text from wrapping */
  margin: 0px  10px;
}

.print-map-btn i {
  font-size: 16px; /* Adjust icon size */
}

.button-text {
  font-size: 14px;
}



@media print {
  @page {
    size: landscape; /* Set the page orientation to landscape */
  }

  body * {
    visibility: hidden; /* Hide everything */
  }
  .leaflet-touch .leaflet-control-layers-toggle,.leaflet-control-zoom-in,.leaflet-control-zoom-out{
    
    display: none !important; /* Ensure Layer button is hidden */
  }
  #map {
    visibility: visible; /* Show only the map */
    width: 100%; /* Ensure full width */
    height: 100%; /* Utilize the full height of the page */
  }

  #map * {
    visibility: visible; /* Ensure map content is visible */
  }
}


.bi-bold {
  
  font-weight: bold;
  text-shadow: 0px 0px 1px black; /* Adds a bold effect */
}

@media (max-width: 768px) {
  #legendDiv {
    max-height: 50vh; /* More height for mobile to make scroll usable */
   
  }
}



.leaflet-touch .leaflet-control-layers-toggle {
  width: 30px;
  height: 30px;
  line-height: 30px;
}

/* Latest*/

/* Hide controls initially */
.hidden {
  display: none;
}

/* Toggle button styling */
.toggle-controls-btn {
  position: absolute;
  top: 25%;
  left: 10px;
  z-index: 1000;
  background-color: #17a2b8; /*#6699AA;*/
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.toggle-controls-btn:hover {
  background-color: #0056b3;
}

.label-icon div {
  font-size: 12px;
  font-weight: bold;
  color: black;

  padding: 4px 6px; /* Padding around the text */

  border-radius: 4px;
  white-space: nowrap; /* Prevent wrapping the text */
  overflow: hidden; /* Hide overflowed text */
  text-overflow: ellipsis; /* Add ellipsis for long text */

  text-align: center; /* Ensure text is centered */
  position: absolute; /* Positioning relative to map container */
}