body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    .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 {
            position: absolute;
            
            bottom: 20px;
            right: 10px;
            
            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;
        }

        .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: 140px;
      right: 10px;
      background-color:  #f0f0f0;
      color: black;
      border: none;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      width: 30px;
      height: 30px;
      
      text-align: center;
      line-height: 30px;
      cursor: pointer;
      z-index: 1000;
    }

    .god-icon {
      background:  #f0f0f0;
      border-radius: 5px;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
      
      color: black;
      border: 1px solid #ccc;
      position: absolute;
      top: 80px;
      right: 10px;
      z-index: 1000;
    }


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

.control-button {
  width: 20px; /* Set the desired width */
  height: 20px; /* Set the desired height */
  padding: 2px; /* Adjust padding as needed */
  font-size: 16px; /* Adjust icon size */
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color:  #f0f0f0;
  color: black;
}

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


    .tool-bar {
      position: absolute;
      top: 80px;
      right: 50px;
      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: 190px;
  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: 30px; 
  height: 30px; 
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  text-align: center;
  line-height: 10px;
  cursor: pointer;
  z-index: 1000;
  right:10px;

}


#legendDiv {
 width: 200px; 
 height: 200px; 
  display: none; /* Hidden by default */
  position: absolute; /* Positioned near the button */
  top: 150px; /* Adjust this value for vertical positioning */
  right: 50px; /* Adjust this value for horizontal positioning */
  background-color:  #f0f0f0;
  border: 1px solid #ccc;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  padding: 10px;
  z-index: 1000;
  overflow: auto;
}


#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 */
#printButtonContainer {
  position: absolute;
  top: 250px;
  right: 10px;
  z-index: 1000;
}

/* Button styles */
.print-map-btn {
  width: 30px;
  height: 30px;
  line-height: 30px;
  background-color:  #f0f0f0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.print-map-btn:hover {
  background-color: #f3e5f5;
}


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