/*#sidebar {
  width: 250px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #f4f4f4;
  transition: left 0.3s ease;
  z-index: 1000;
}

#sidebar.hidden {
  left: -250px;
}
*/
 
 #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;
      
  }

  .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: 200px;
            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;
        }
    
       
        .button-text {
          font-size: 14px;
        }

        .god-icon {
          background: #f0f0f0;
          border-radius: 5px;
          width: auto; /* 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;
      }
      

  
/* 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,.home-button,.print-map-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Space between icon and text */
  width: auto; /* Allow dynamic width */
  height: 30px;
  padding: 5px 10px; /* More padding to fit text */
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f0f0f0;
  color: black;
  text-align: center;
  white-space: nowrap; /* Prevents text from wrapping */
  margin: 0px 10px;
}

.control-button:hover {
  background: #f3e5f5;
  color: black;
}

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



    .tool-bar {
      position: absolute;
      top: 140px;
      left: 160px;
      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: 135px; /* 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; 
 height: 200px; 
  position: fixed;
  right: -2px;
  top: 250px;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 1000;
  display: none; /* Initially hidden, but shown on load by JS */
  overflow: auto;
  margin: 15px;
}

#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: 1px; 
 right: 5px; 
    
}

   
  
#legendButtonContainer{
  display: none;
}
   



.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 */
}





.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 */
}