body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
}

.map {
  /* width: 100%; */
  height: 100%;
  width: 100%;
}


.popup {
  font-size: small;
  position: absolute;
  padding: 10px;
  
  box-shadow: inset 0 -3em 3em rgb(227, 229, 231),
              0 0  0 2px rgb(1, 1, 1),
              0.3em 0.3em 1em rgb(160, 167, 173);
  background-color:  rgb(253, 255, 252);
  display: none;
  max-width: 300px;
  z-index: 1000;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(-100%);
 
  border-radius: 8px;
  transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-family: 'Times New Roman', Times, serif;
}

.popup.show {
  opacity: 1;
  transform: translateY(0);
}

.popup.hide {
  opacity: 0;
  transform: translateY(-10px);
}

/* Info Box Styles */

.info-box {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 15px;
  box-shadow: inset 0 -3em 3em rgb(255, 255, 255),
              0 0  0 2px rgb(1, 1, 1),
              0.3em 0.3em 1em rgb(211, 212, 210);
  display: inline-block;
  max-width: 47%;
  z-index: 1000;
  overflow-y: auto; /*  scrolling in the entire box */
  background: rgb(254, 255, 254);
  border-radius: 10px;
  transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  height: 90%; /* Adjust the info-box height */
  font-family: 'Times New Roman', Times, serif;
}

/* Make the attribute table fill the entire height of the info-box */
#attributeTable {
  
  
  width: 100%;
   height: 100%; /*Make the table fill the available height */
  border-collapse: collapse; /* Ensures borders between cells are handled correctly */
  /* display: block; Allows the table body to scroll */
  table-layout: fixed; 
}

/* Sticky table header that stays visible on scroll */
#attributeTable thead {
  position: sticky; 
  top: 0;
  background: #000000; 
  z-index: 1; 
}

/* Adjust tbody height to fit the info-box and scroll if necessary */
#attributeTable tbody {
  
  /* display: block;  */
  height: calc(100% - 2%); 
  overflow-y:auto; 
  padding-top: 0.5%;
}
#attributeTable th {
  background-color: #f2f2f2;
  position: sticky;
  top: 0; /* Stick the header to the top */
  z-index: 1; /* Make sure it's above the table rows */
}
/* Adjust table cells */
#attributeTable td, #attributeTable th {
  /* width: 150px; Adjust column width as needed */
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #ddd;
  text-align: left;
}


/* Hide the info box with smooth transition */
.info-box.hidden {
  opacity: 0;
  transform: translateY(20px);
}


.info-box table {
  width: 100%;
  border-collapse: collapse;
}

.info-box th, .info-box td {
  border: 1px solid #000000;
  padding: 8px;
  text-align: left;
}

.info-box th {
  background-color: #5fa8f5;
  font-weight: bold;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}

.table-row {
  cursor: pointer;
}

.table-row:hover {
  background-color: #f1f1f1;
}

#tehsilInfoBox.collapsed {
  width: 0;
  padding: 0; /* Ensure no padding interferes when width is 0 */
  visibility: hidden; /* Hide content when collapsed */

  transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth collapse */

  
}

#tehsilInfoBox.collapsed + #sliderButton {
  right: 10; /* Adjust position to be fully visible */
}
/* slider button */
#sliderButton {
  position: absolute;
  top: 10px;
  right: 0;
  cursor: pointer;
  padding: 10px;
  background-color: #2f85e0;
  
  color: rgb(0, 0, 0); 
  font-size: 24px;
  z-index: 1001; 
  transition: right 0.3s ease;
}

.highlight {
  background-color: rgb(95, 168, 245); /* Or any other color */
}


/* Details Popup CSS */
.details-popup {
  background-color: rgb(95, 168, 245); 
  /* border: 1px solid #ccc; */
  padding: 1%;
  /* box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); */
  z-index: 1000;
  /* transition: opacity 0.3s ease, transform 0.3s ease; */
  opacity: 0;
  transform: translateY(10px);
  width: calc(100% - 0.5%); /* Ensure the popup box takes up the full width minus padding */
  box-sizing: border-box;
  margin-top: 5px; /* Add some spacing between the button and the popup */
}

.details-popup.show {
  opacity: 1;
  transform: translateY(0);
}

.details-popup.hide {
  opacity: 0;
  transform: translateY(10px);
}

.details-row {
  margin-bottom: 1%;
  display: flex;
  justify-content: space-between;
  /* padding: 4px 0; Adds some space between rows */
  white-space: nowrap; /* Prevents text from wrapping to a new line */
}

.details-row b {
  display: inline-block;
  width: 50%; /* Make labels occupy half the width */
  flex: 1;
  text-align: left; /* Aligns the label text to the left */
  margin-right: 30px; /* Adds space between label and value */
}

.details-row span {
  flex: 1;
  text-align: right; /* Aligns the value text to the right */
}






/* Layer Switcher CSS */
.layer-switcher {
  position: absolute;
  top: 10%;
  left: 10px;
  z-index: 1000;
}
.layer-options {
  position: relative;
  bottom: 30px;
  left: 30px; 
  box-shadow: inset 0 -3em 3em rgb(227, 229, 231),
  0 0  0 2px rgb(1, 1, 1),
  0.3em 0.3em 1em rgb(160, 167, 173);
  background-color:  rgb(253, 255, 252);
 
  padding: 8px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: #333;
  z-index: 1000; 
  border-radius: 10px;
  font-family: 'Times New Roman', Times, serif;
}

/* 3D Tower Loader CSS */
.loader {
  scale: 1.5; /* Reduced scale from 3 to 1.5 */
  height: 30px;
  width: 20px;
  cursor: pointer;
}

.box {
  position: relative;
  opacity: 0;
  left: 5px; /* Adjusted position */
}

.side-left {
  position: absolute;
  background-color: #286cb5;
  width: 10px;
  height: 3px;
  transform: skew(0deg, -25deg);
  top: 8px;
  left: 5px;
}

.side-right {
  position: absolute;
  background-color:  #2f85e0;
  width: 10px;
  height: 3px;
  transform: skew(0deg, 25deg);
  top: 8px;
  left: -5px;
}

.side-top {
  position: absolute;
  background-color: #5fa8f5;
  width: 10px;
  height: 12px;
  rotate: 45deg;
  transform: skew(-20deg, -20deg);
}

.box-1 {
  animation: from-left 4s infinite;
}

.box-2 {
  animation: from-right 4s infinite;
  animation-delay: 1s;
}

.box-3 {
  animation: from-left 4s infinite;
  animation-delay: 2s;
}

.box-4 {
  animation: from-right 4s infinite;
  animation-delay: 3s;
}

@keyframes from-left {
  0% {
    z-index: 20;
    opacity: 0;
    translate: -20px -6px;
  }
  20% {
    z-index: 10;
    opacity: 1;
    translate: 0px 0px;
  }
  40% {
    z-index: 9;
    translate: 0px 4px;
  }
  60% {
    z-index: 8;
    translate: 0px 8px;
  }
  80% {
    z-index: 7;
    opacity: 1;
    translate: 0px 12px;
  }
  100% {
    z-index: 5;
    translate: 0px 30px;
    opacity: 0;
  }
}

@keyframes from-right {
  0% {
    z-index: 20;
    opacity: 0;
    translate: 20px -6px;
  }
  20% {
    z-index: 10;
    opacity: 1;
    translate: 0px 0px;
  }
  40% {
    z-index: 9;
    translate: 0px 4px;
  }
  60% {
    z-index: 8;
    translate: 0px 8px;
  }
  80% {
    z-index: 7;
    opacity: 1;
    translate: 0px 12px;
  }
  100% {
    z-index: 5;
    translate: 0px 30px;
    opacity: 0;
  }
}


.legend {
  position: absolute;
  bottom: 30px;
  left: 30px; /* Changed from right to left for left alignment */
  box-shadow: inset 0 -3em 3em rgb(227, 229, 231),
  0 0  0 2px rgb(1, 1, 1),
  0.3em 0.3em 1em rgb(160, 167, 173);
  background-color:  rgb(253, 255, 252);
  /* border: 2px solid #0f0f0f; */
  padding: 8px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: #333;
  z-index: 1000; /* Ensures it's on top of the map */
  border-radius: 10px;
  font-family: 'Times New Roman', Times, serif;
}

.legend h4 {
  margin: 0 0 10px;
  padding: 0;
  font-size: 14px;
  font-weight: bold;
}

.legend ul {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #000;
}

.legend li {
  display: flex;
  align-items: center;
}

.legend span {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
}






#attributeTable {
  width: 100%; /* Full width */
  table-layout: auto; /* Allows dynamic width adjustment */
}

#attributeTable th, #attributeTable td {
  padding: 8px; /* Add padding for better spacing */
  text-align: left; /* Align text to the left */
}

.details-popup {
  display: none; /* Initially hidden */
}

.details-popup.show {
  display: block; /* Show when class is added */
}