body {
  font-family: Arial, sans-serif;
  color: #6d6d78;
}
.top-bar-container {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  flex-wrap: wrap;
}
.column {
  flex: 0 0 auto; /* Make the column only as wide as its content */
}
.right-most {
  margin-left: 10px;
}
.toggle-button-container {
  margin-left: auto;
  display: none;
  align-items: center;
}
.toggle-list-btn {
  padding: 6px 14px;
  border: 1px solid #a2ab8c;
  border-radius: 4px;
  background-color: #ffffff;
  color: #4a4a59;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.toggle-list-btn:hover,
.toggle-list-btn:focus {
  background-color: #a2ab8c;
  color: #ffffff;
  outline: none;
}
.top-bar {
  background-color: #a2ab8c;  /* SEKA 海沫绿 */
  color: #c60c30;  /* Deep red color */
  padding: 10px;
  text-align: center;
  border-bottom: 4px solid #fff; /* White border at the bottom */
  font-family: 'Noto Sans', 'Heiti', sans-serif;
  font-size: 24px;
  font-weight: bold;
}
.top-bar a {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: none; /* Optional: to remove underline */
}
.dev-link {
  background-color: hsl(49, 100%, 54%);  /* SEKA 海沫绿 */
  color: hsl(221, 100%, 50%);  /* Deep red color */
  font-size: 15px;
  font-weight: bold;
}
.events-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* Adjust minmax value as needed */
  gap: 10px; /* Space between grid items */
  margin: 0 10px;
}
.event {
  border: 1px solid #ccc;
  padding: 10px;
  position: relative;
  padding-left: 55px;
  box-sizing: border-box;
}
.event.selected-event {
  border: 2px solid #a2ab8c;
}
.event-section {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping of events */
  margin: 0 10px;
}
.event-title {
  font-size: 1.2em;
  font-weight: bold;
}
.event-details {
  display: flex;
  flex-direction: column;
}
.event-description {
  white-space: pre-wrap; /* CSS3 */
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
}
.date-box {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
  min-width: 60px;
  border: 1px solid #dfdfe8;
  display: inline-block;
  text-align: center;
}
.area-calendar-separator {
  width: 100%;
  border-top: 1px solid #dfdfe8;
  margin: 6px 0;
}
.calendar-box {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.calendar-box:focus,
.calendar-box:focus-visible {
  outline: 2px solid #a2ab8c;
  outline-offset: 2px;
}
.material-symbols-outlined.calendar-icon {
  font-size: 36px;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 36;
  color: #0000F5;
}
.calendar-action-button {
  margin-top: 6px;
  padding: 4px 6px;
  width: 100%;
  font-size: 12px;
  border: 1px solid #a2ab8c;
  border-radius: 4px;
  background-color: #ffffff;
  color: #4a4a59;
  cursor: pointer;
}
.calendar-action-button:hover,
.calendar-action-button:focus {
  background-color: #a2ab8c;
  color: #ffffff;
  outline: none;
}
.date-box .date {
  margin-top: 8px;
  color: #fc5200;
  font-size: 24px;
  line-height: 20px;
}
.date-box .date-relative {
  margin-top: 4px;
  color: #fc5200;
  font-size: 18px;
  line-height: 18px;
}
.date-box .day-of-week {
  margin-top: 0px;
  color: #fc5200;
  font-size: 16px;
  line-height: 16px;
}
.event-section:first-child {
  flex: 0 0 300px; /* Fixed width for the first column */
}
.event-section:nth-child(2) {
  flex: 0 0 350px; /* Fixed width for the second column */
  max-width: 350px; /* Restrict maximum width */
}
.event-section:nth-child(3) {
  display: flex;
  gap: 6px;
  clear: both; /* Ensures it does not overlap with floated elements */
}
.event-section:nth-child(3) .event-title {
  flex-basis: 100%;
  width: 100%; /* force descriptions onto next row */
}
.event-section .route-orientation-icon {
  top: 80px;
  left: 8px;
  width: 32px;
  height: 32px;
  pointer-events: none;
  opacity: 0.9;
  z-index: 2;
}
.meet-up {
  color: #6d6d78;
}
.popup {
  display: none;
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -10%);
  width: 90%;
  max-width: 600px;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  padding: 20px 20px 5px 20px;
  z-index: 1000;
  max-height: 99vh; /* Set maximum height to the viewport height */
  overflow-y: auto;
  box-sizing: border-box;
}
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.popup .date-box {
  position: relative;
  padding: 0px;
  margin-left: -20px;
  margin-bottom: 0px;
  min-width: 45px;
  display: inline-block;
  text-align: center;
}
.popup .date-box .date {
  margin-top: 0px;
  color: #fc5200;
  font-size: 20px;
  line-height: 20px;
}
.event-title-row {
  display: flex;
  align-items: center; /* Align items vertically in the center */
}
.area-vertical-separator {
  align-self: stretch;
  border-left: 1px solid #dfdfe8;
  margin: 0 12px;
}
.event-title-row .event-title {
  margin: 0 0 0 0px;
}
.close-btn {
  float: right;
  cursor: pointer;
}
.page-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.page-container.list-hidden .list-container {
  display: none;
}
.page-container.list-hidden .map-container {
  flex: 1 1 auto;
  max-width: 100%;
}
.custom-div-icon .tooltip-content {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 5px;
  border-radius: 5px;
  text-align: center;
  white-space: nowrap;
  font-size: 15px;
  transition: background-color 0.3s ease;
}
.custom-div-icon:hover .tooltip-content {
  background-color: rgba(255, 255, 255, 1);
}
.custom-tooltip {
  font-size: 16px;
}
.slideshow-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: auto;
  overflow: hidden;
}
.slides-wrapper {
  display: flex;
  transition: transform 0.3s ease-in-out;
}
.slide {
  flex: 0 0 100%;
  width: 100%;
}
.slide-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.slide-nav {
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%; /* Ensure the button covers the entire height */
  width: 50px; /* Adjust width as needed */
  color: white;
  font-weight: bold;
  font-size: 18px;
  background-color: rgba(0,0,0,0.3);
  border: none;
  user-select: none;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-nav:hover {
  background-color: rgba(0,0,0,0.8);
}
.prev {
  left: 0;
}
.next {
  right: 0;
}
.slide-dots {
  text-align: center;
  padding: 10px 0;
}
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.dot.active, .dot:hover {
  background-color: #717171;
}
.mySlides {
  display: none;
}
.mySlides.active {
  display: block;
}
@media only screen and (min-width: 1000px) {
  .page-container {
      flex-direction: row; /* Change to row direction for larger screens */
      display: flex;
      flex-grow: 1;
      flex-shrink: 1;
      overflow-y: hidden;/*let list-container scroll*/
      height: calc(100vh - 76px);  /* kill scroll bar on larger screen*/
  }
  .list-container {
      flex: 0 0 50%;
      max-width: 50%;
      overflow-y: auto; /* Allows scrolling if content overflows */
  }
  .map-container {
      flex: 1 1 50%;
      max-width: 50%;
  }
  .page-container.list-hidden .map-container {
      flex: 1 1 100%;
      max-width: 100%;
  }
  .toggle-button-container {
      display: flex;
  }
}
@media only screen and (max-width: 999px) {
  .page-container {
      flex-direction: column;
      box-sizing: border-box;
      height: 100vh;
  }
  .list-container {
      width: 100%;
      order: 2;
      max-height: 100%; /* Prevents the container from exceeding the height of the page-container */
      box-sizing: border-box;
      /* display: block; */
  }
  .map-container {
      flex-grow: 1;
      order: 1;
      margin: 8px 0px;
      min-height: 70vh;
      max-height: 85vh;
      height: 80%;
      /* display: none; */
  }
}