.rotate > div > div {
      display: flex;
      justify-content: center;
      transform: rotate(270deg);
      transform-origin: center center;
      white-space:nowrap
    }    

    .special {
      height: 20%;
    }
    #detailgrid{
      width: 550px !important;
    }
    #detailgrid .hd1 {
      /* background: #cce6ff !important; */
      background-color: white !important;
      color: white;
      background: linear-gradient(to top right, #fff calc(50% - 0.5px), grey, #fff calc(50% + 0.5px));
    }
    #detailgrid .hd2 {
      background: #005A32 !important;
      color: white;
	}
    #detailgrid .hd3 {
      background: #41AB5D !important;
      color: white;
    }
    #detailgrid .hd4 {
      background: #ADDD8E !important;
      color: white;
    }
    #detailgrid .hd5 {
      background: #FEC44F !important;
      color: white;
    }
    #detailgrid .hd6 {
      background: #EC7014 !important;
      color: white;
    }
    #detailgrid .hd7 {
      background: #B10026 !important;
      color: white;
    }
    #detailgrid .hd8 {
      background: #ffffff !important;
      color: black;
    }
    
.custom-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: none;
  background-color: #fff;
  font-size: 8px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* border-radius: 2px; */
}

.custom-button:hover {
  background-color: #ABB0B8;
}

.button-img {
  width: 40px;
  height: 40px;
  vertical-align: middle;
  margin-right: 10px;
  border-radius: 5px;
}


.logo-img {
      max-width: 100%;
}
    
.header-img {
      max-width: 100%;
      /* width: 100%; */
      height: 100%;
}

.logo-left {
      margin-right: 10px;
      /* Adjust the spacing between the logos */
}

.logo-right {
      margin-left: 10px;
      /* Adjust the spacing between the logos */
}

.search-input {
      flex: 1;
      margin: 0 auto;
      max-width: 400px;
      /* Adjust the max-width as per your requirements */
}

.header-label {
      margin-right: 10px;
      /* Adjust the margin as needed */
      font-weight: bold;
      color: black;
      /* Add more styles as desired */
}

.logout-label {
      margin-left: 10px;
      color: black;
      /* Add more styles as desired */
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background-color: #f8f9fa;
  /* Light gray fill color */
  color: #fff;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9999;
  margin-bottom: 50px; /* Add margin-bottom for spacing */
}


 .sidebar-toggle-icon {
  position: fixed;
  /* top: 100px;  */
  left:0; /* Adjust the left position as needed */
  z-index: 9999;
  color: #000; /* Set the color to black */
  cursor: pointer;
  padding: 1px;
 }

.sidebar {
  background-color: #f8f9fa;
  position: fixed;
  top: 120px;
  left: 0;
  bottom: 0;
  width: 200px;
  overflow-y: auto;
  z-index: 999;
  padding-top: 20px;
  transition: width 0.3s ease; /* Add transition for smooth animation */
}

.sidebar-toggle-icon i {
  font-size: 20px;
}

.collapsed {
  width: 0; /* Set the desired collapsed width */
}

.close-button {
  position: absolute;
  top: 10px; /* Adjust the top value based on your requirements */
  right: 10px; /* Adjust the right value based on your requirements */
  font-size: 20px;
  color: #000;
  background: transparent;
  border: none;
  cursor: pointer;
}


/* .sidebar.collapsed {
   width: 50px;
} */

.content {
      /* margin-left: 200px; */
      width:100%;
}

#map {
      width: 400px;
      height: calc(100vh - 100px);

}
    
#contentmap {
      width: 100%;
      height: 100vh;
      background-image: url('./images/map.png');
      background-size: cover;
      background-position: center;
    }

#loginContainer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login-form {
      border: 1px solid #ddd;
      background-color: #f8f9fa; /* Light gray fill color */
      border-radius: 10px; /* Rounded corners */
      max-width: 500px; /* Adjusted width */
      margin: 0 auto;
      padding: 30px 40px; /* Adjusted padding */
}

.login-form .form-group {
      margin-bottom: 20px;
}

#signInDiv{
  display: flex;
  justify-content: flex-end;
}


.form-hidden {
      display: none;
}
.hidden {
      display: none !important;
}

    
    #zoomInButton {
      position: absolute;
      top: 5px; /* Adjust the top position as needed */
      right: 80px; /* Adjust the right position as needed */
      z-index: 1; /* Set a higher z-index for the zoomInButton */
      border-radius: 20%; /* Add round corners */
      background-color:#fff;
  }
  
  #zoomInButton img {
      width: 20px; /* Adjust the image width as needed */
      height: 20px; /* Adjust the image height as needed */
  }
  
  #zoomInButton:hover {
      background-color: #e2e2e2; /* Change background color on hover */
  }
  
  #zoomOutButton {
      position: absolute;
      top: 5px; /* Adjust the top position as needed */
      right: 120px; /* Adjust the right position as needed */
      z-index: 1; /* Set a higher z-index for the zoomOutButton */
      border-radius: 20%; /* Add round corners */
      background-color:#fff;
  }
  
  #zoomOutButton img {
      width: 20px; /* Adjust the image width as needed */
      height: 20px; /* Adjust the image height as needed */
  }
  
  #zoomOutButton:hover {
      background-color: #e2e2e2; /* Change background color on hover */
  }
  #threeD {
      position: absolute;
      top: 5px; /* Adjust the top position as needed */
      right:160px; /* Adjust the right position as needed */
      z-index: 1; /* Set a higher z-index for the zoomInButton */
      border-radius: 20%; /* Add round corners */
      background-color:#fff;
  }
  #loadingIndicator {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      display: none;
    }

   
    .active {
      background-color: black;
    }
    .navigation-controls {
      top: 145px !important;
      bottom: unset !important;
    }

    .compass {
      top: 50px !important;
      bottom: unset !important;
    }
    .button-container {
      position: absolute;
      top: 50%;
      right: 0px; /* Adjust the right offset as needed */
      transform: translateY(-50%);
      z-index: 1;
      cursor: pointer;
      /* Add any other styles for the button container */
    }

    .button-container button {
      color: #fff;
      border: none;
      background: #007bff;
      font-size: 16px;
      cursor: pointer;
      padding: 5px 10px;
      border-radius: 5px;
  }
  #threejsContainer 
  { width: 100%; height: 300px;}

  .graph-container {
      max-width: 100%;
      height: 300px; 
    }
    #tabsContainer div {
      overflow: hidden;
    }
    #surfacegraph {
      width: 100%;
      height: 100%;
      overflow: hidden;
  }
  
  
  #suggestions-list {
    position: absolute;
    width: 100%;  /* Set the width to match the input field */
    top: 100%;   /* Position it just below the input field */
    background-color: white;  /* Adjust the background color as needed */
    border: 1px solid #ccc;   /* Add a border for styling */
    z-index: 1;  /* Ensure it's above other elements if necessary */
  }

.autocomplete {
/*the container must be positioned relative:*/
position: relative;
display: inline-block;
}
.autocomplete-items {
position: absolute;
border: 1px solid #b9deff;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #b9deff;
border-bottom: 1px solid #b9deff;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {

/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
}


.disabled-button {
  opacity: 0.5; 
  cursor: not-allowed; 
  pointer-events: none; 
  
}


#btndrawpolygon {
  position: absolute;
  top: 5px; /* Adjust the top position as needed */
  right: 200px; /* Adjust the right position as needed */
  z-index: 1; /* Set a higher z-index for the zoomInButton */
  border-radius: 20%; /* Add round corners */
  background-color:#fff;
}
.bottom-center {
  position: absolute ;
  bottom: 0;
  left: 50% ;
  transform: translateX(-50%) ;
  z-index: 1000 ;
 
}
.bottom-center button {
  color: #fff;
  border: none;
  background: #007bff;
  font-size: 16px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 5px;
}
/* #bottomButton img {
  width: 20px; 
  height: 20px; 
}

#detailbutton img {
  width: 20px; 
  height: 20px; 
} */
.cesium-context-menu {
  position: absolute;
  background: white;
  color: #050505;
  list-style-type: none; /* Remove the bullet points from the list items */
  margin: 0;
  padding: 0;
  height: 100px; /* Set the desired height */
  width: 150px; /* Set the desired width */
}

.cesium-context-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.cesium-context-menu li {
  padding: 8px;
  cursor: pointer;
}

.cesium-context-menu li:hover {
  background-color: #e0e0e0;
}

.switch {
  position: absolute;
  /* display: inline-block; */
  right: 200px; /* Adjust the right position as needed */
  top: 5px;
  width: 60px;
  height: 34px;
  z-index: 1;
  padding-top: 10px;
}


.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}


.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}


.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}


input:checked + .slider {
  background-color: #2196F3;
 
}


input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}


input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}


.slider.round:before {
  border-radius: 50%;
}
.toggle-text {
  margin-left: 10px; /* Adjust the spacing between the slider and the text */
  font-family: Arial, sans-serif; /* Example font family */
  font-size: 20px; /* Example font size */
  color: #ffffff; /* Example text color */
  z-index: 1;
  margin-top: 25px;
}