#years {
  padding: 20px;
  height: 400px;
  overflow-y: auto;
  /* Enable vertical scrolling when needed */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

#years::-webkit-scrollbar {
  display: none;
  /* Hide the scrollbar visual for WebKit browsers */
}

#years ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.slide_navigation,
.slide_navigation:before {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

ul.slide_navigation li:before {
  content: "";
  display: block;
  background: transparent;
  border: 1px transparent solid;
  border-radius: 1px;
  position: absolute;
}

.slide_navigation_item {
  /* margin-bottom: 10px; */
  list-style-type: none;
}

.slide_navigation_item a {
  text-decoration: none;
  transition: background-color 0.3s ease;
  border-bottom: 2px #006C73 dotted;
}

.slide_navigation_item a.active,
.slide_navigation_item a:hover {
  font-size: 24px;
  border: none;
}

#events-wrapper {
  position: relative;
  height: 400px;
  display: flex;
  flex-direction: column;
}

#events::-webkit-scrollbar {
  display: none;
  /* Hide the scrollbar visual for WebKit browsers */
}

#events {
  height: 100vh;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overflow-y: auto;
  /* Enable vertical scrolling when needed */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

#events::-webkit-scrollbar {
  display: none;
  /* Hide the scrollbar visual for WebKit browsers */
}

.slide {
  height: 400px;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  padding: 20px;
}

.slide img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* .nav-arrow {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  padding: 10px;
}

.nav-arrow:disabled {
  color: #ccc;
  cursor: default;
} */

#navTop,
#navBottom {
  text-align: center;
}

.eventContent {
  text-align: left;
}

@media (max-width: 768px) {
  #years {
    display: none;
  }
  
  .slide img {
    max-width: 100%;
    max-height: 200px;
    height: auto;
    border-radius: 6px;
  }
}

#prevBtn {
  width: 38px;
  height: 22px;
  background-image: url('/images/prev_v.png');
  background-size: 38px 66px;
  background-repeat: no-repeat;
  background-position: 0 -44px;
  /* Bottom = normal */
  border: none;
  padding: 0;
  background-color: transparent;
  cursor: pointer;
  display: inline-block;
}

#prevBtn:hover:not(:disabled) {
  background-position: 0 -22px;
  /* Middle = hover */
}

#prevBtn:disabled {
  background-position: 0 0;
  /* Top = disabled */
  cursor: default;
}

#nextBtn {
  width: 38px;
  height: 22px;
  background-image: url('/images/next_v.png');
  background-size: 38px 66px;
  background-repeat: no-repeat;
  background-position: 0 -44px;
  /* Bottom = normal */
  border: none;
  padding: 0;
  background-color: transparent;
  cursor: pointer;
  display: inline-block;
}

#nextBtn:hover:not(:disabled) {
  background-position: 0 -22px;
  /* Middle = hover */
}

#nextBtn:disabled {
  background-position: 0 0;
  /* Top = disabled */
  cursor: default;
}