body {
  padding: 0;
  margin: 0;
}

@font-face {
  font-family: "Ringbearer";
  src: url("https://raw.githubusercontent.com/jimrudolph726/middle-earth-map/main/assets/ringbearer.TTF") format("truetype");
}

html, body, #map {
  height: 100%;
  font: 10pt "Ringbearer", Arial, Helvetica, sans-serif; 
}

.lorem {
  font-style: italic;
  color: #AAA;
}

#settlementsSection, #pathsSection, #geographySection, #battlesSection, #itemsSection, #campsSection, #regionsSection {
  display: flex;
  flex-direction: column; /* Stack the labels vertically */
  gap: 8px; /* Optional: Add spacing between items */
  padding-top: 16px; /* Optional: Add padding for indentation */
}

#regionsSection h1,
#campsSection h1,
#itemsSection h1, 
#settlementsSection h1, 
#pathsSection h1, 
#geographySection h1,
#battlesSection h1 {
  font-size: 18px; /* Adjust the size as needed */
  font-weight: bold; /* Bold text */
  margin: 2px 0; /* Adjust top and bottom spacing */
  padding-top: 2px; /* Optional: Add spacing above the header */
  color: #444; /* Set a consistent text color */
  text-align: left; /* Align text to the left */
}

#settlementsSection label, #pathsSection label, #geographySection label, #battlesSection label, #itemsSection label #pathsSection label, #itemsSection label, #campsSection label, #regionsSection label {
  display: flex;
  align-items: center; /* Align the checkbox and label text */
  cursor: pointer; /* Change the cursor to indicate clickability */
  font-size: 16px;
}

#regionsSection input[type="checkbox"],
/* #campsSection input[type="checkbox"], */
#itemsSection input[type="checkbox"],
/* #pathsSection input[type="checkbox"], */
#itemsSection input[type="checkbox"],
#battlesSection input[type="checkbox"],
#settlementsSection input[type="checkbox"],
#geographySection input[type="checkbox"] {
  margin-right: 8px; /* Add spacing between the checkbox and label text */
}

#mapSection button {
  display: block;
  width: 50%; /* Optional: Makes buttons stretch to full width */
  margin-bottom: 10px; /* Adds spacing between buttons */
}

.sidebar-tabs .material-icons {
  position: relative;
  top: 10px; /* Shifts the icons down */
}
.sidebar-tabs .material-symbols-outlined {
  position: relative;
  top: 10px; /* Shifts the icons down */
}

.polygon-label {
  /*background-color: rgba(255, 255, 255, 1); /* Fully opaque for visibility */
  border: 2px solid black;
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 16px;
  color: black;
  font-weight: bold;
  text-align: center;
  pointer-events: none; /* Prevent the label from being interactive */
}

#campsSection, #pathsSection {
  padding-top: 0; /* Remove extra padding from the top */
}

#campsSection h3,
#pathsSection h3 {
  margin-top: 0; /* Remove any extra margin on the h3 headers */
}

#campsSection label, #pathsSection label {
  margin-top: 0; /* Remove top margin from the labels */
}