#map-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

/* MAP LAYOUT */
#map {
  max-width: 100%;
  height: 100vh;
}


.info-container {
  background-color: white;
  z-index: 1000;
    position: absolute;
    min-width: 300px;
    max-width: 100%;
    width: 500px;
    height: 100%;
    top: 0px;
    overflow-y: scroll;
    display: none;
}


#info-close-button {
  background: none;
  border: none;
  cursor: pointer;
  color: black;
  position: absolute;
  top: 0.5em;
  right: 0.5em; /* Adjust this value as needed */
  z-index: 1000000;
}

#sidebar-close-button {
  background: none;
  border: none;
  cursor: pointer;
  color: black;
  position: absolute;
  top: 1.8em;
  right: 0.5em; /* Adjust this value as needed */
  z-index: 1000000;
}

.photo_container {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
  margin-top: 0px;
}

.photo_container img {
  height: auto;
  min-height: 200px;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.info_header {
  padding-left: 10px;
  padding-right: 10px;
  left: 0px;
  right: 0px;
  font-size: 1.075rem;
  font-family: 'Google Sans', Roboto, Arial, sans-serif;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.45rem;
}

.info_properties {
  padding-left: 10px;
  padding-right: 10px;
}

.info_properties table {
  border-collapse: collapse;
}

.info_properties table,
th,
td {
  border: none;
  font-family: Roboto, Arial, sans-serif;
  font-size: 0.975rem;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.25rem;
}

.info_properties td:first-child {
  font-weight: bold;
  width: 100px;
}

/* SEARCH WIDGET */
#search-form {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 10px;
  min-width: 320px;
  max-width: 90%;
  width: 460px;
  height: 3em;
  z-index: 1001;
  position: absolute;
  top: 10px;
  left: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#search-input {
  flex-grow: 1;
  border-radius: 10px;
  border: none;
  padding-left: 0.5em;
}

#search-input:focus {
  outline: none;
}

#search-results {
  position: absolute;
  top: 3.5em;
  left: 0;
  width: 100%;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1002;
  display: none;
}

.search-result-item {
  padding: 0.5em;
  cursor: pointer;
}

.search-result-item:hover {
  background-color: #f1f1f1;
}

.close-results-button {
  display: flex;
  justify-content: flex-end;
  padding: 0.5em;
}

.close-results-button button {
  background: none;
  border: none;
  color: #007bff;
  cursor: pointer;
  font-size: 14px;
}

.custom-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: gray;
  /* padding-right: 0.5em;
  margin-right: 3em; */
}

/* Style for the icon */
.custom-button img {
  transition: transform 0.3s;
}

/* Hover effect */
.custom-button:hover img {
  transform: scale(1.2);
}

#search-button {
  padding-right: 0.5em;
  margin-right: 3em;
}

/* LAYER SELECTOR */
#layer-selector {
  position: absolute;
  z-index: 1000;
  border-radius: 10%;
  border: 1px solid white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.img-container {
  position: relative;
}

#switchImage {
  width: 80px;
  height: 80px;
  cursor: pointer;
  border-radius: 10%;
  border: 1px solid white;
  transition: border-width 0.1s;
}

.img-container:hover #switchImage {
  border-width: 3px;
}

#switchText {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

/* Mobile styles */
@media only screen and (max-width: 767px) {
  .custom-zoom {
    display: none;
  }
}

/* ZOOM CONTROLS */
.custom-zoom {
  position: absolute;
  z-index: 1000;
}

.custom-zoom button {
  width: 30px !important;
  height: 30px !important;
  font-size: 1.5em !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Desktop styles */
@media only screen and (min-width: 768px) {
  .custom-zoom {
    right: 10px;
    bottom: 10px;
  }
}

/* LAYER SELECTION*/

/* Sidebar styles */
.sidebar {
  position: fixed;
  top: 0;
  right: -300px; /* Hidden initially */
  width: 300px;
  height: 100%;
  background-color: #ffffff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  transition: right 0.3s ease;
  z-index: 1000;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Close button (X) */
.sidebar-close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

/* Visible sidebar */
.sidebar.visible {
  right: 0;
}

/* Section styles */
.section {
  display: flex;
  flex-direction: column;
  /* gap: 4px; */
}

/* Styles for the layer controls */
#layer-controls {
  /* position: absolute;
  top: 10px;
  left: 10px;
  background: white; */
  padding: 10px;
  /* border: 1px solid #ccc;
  border-radius: 5px; */
}

#layer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.layer-item {
  display: flex;
  align-items: center; /* Vertically center all items */
  gap: 10px;
  margin-bottom: 5px;
}

/* Icon Styling */
.layer-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Checkbox Styling */
.layer-item input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin: 0; /* Remove default margin */
  vertical-align: middle; /* Align checkbox vertically with other elements */
}

/* Label Styling */
.layer-item label {
  cursor: pointer;
  font-size: 14px;
  line-height: 20px; /* Match line height with icon size */
}

/* New toggle switch styling */
.background-switch {
  position: relative;
  display: inline-block;
  width: 38px; /* Keep the width for the toggle switch */
  height: 20px; /* Keep the height for the toggle switch */
  margin-left: 10px; /* Adjust spacing from label to align with checkboxes */
}

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

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: '';
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* When the checkbox is checked, change the background color */
input:checked + .slider {
  background-color: #2196f3;
}

/* Focus state for the toggle switch */
input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

/* When checked, move the circle to the right */
input:checked + .slider:before {
  transform: translateX(16px);
}

/* Style for the label (text) next to the toggle */
#background-control {
  display: flex;
  gap: 10px; /* Space between toggle and text */
  margin-top: 10px; /* Adjust spacing from other elements */
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toggle-label {
  font-size: 14px; /* Match the font size with the other elements */
  line-height: 20px; /* Align text vertically with the toggle */
}

/* Feedback modal */
/* Modal background */
.feedback-modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000; /* Sits on top of other content */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
}

/* Modal content */
.feedback-modal-content {
  position: relative;
  margin: 15% auto;
  padding: 20px;
  width: 80%;
  max-width: 400px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Close button */
.feedback-close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}

/* Submit button */
.feedback-submit-button {
  margin-top: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}

.feedback-submit-button:hover {
  background-color: #0056b3;
}