/* CSS */
.button-4 {
  appearance: none;
  background-color: #f3f3f3;
  border: 1px solid black;
  border-radius: 6px;
  box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
  box-sizing: border-box;
  color: black;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  list-style: none;
  position: relative;
  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: break-word;
}

.button-4:hover {
  background-color: #D3D3D3;
  text-decoration: none;
  color: #4169E1;
  transition-duration: 0.1s;
}

.dropped {
  background-color: #D3D3D3;
  text-decoration: none;
  color: #4169E1;
  transition-duration: 0.1s;
}

.button-4:before {
  display: none;
}

.button-4:-webkit-details-marker {
  display: none;
}

.dropDownAbstract {
  background-color: #dedede;
  padding: 5px;
  border-radius: 6px;
}


/**
 * Tooltip Styles
 */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
  color: inherit !important;
  border-bottom: 1px dotted;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
  color: inherit !important;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -40px;
  padding: 7px;
  width: max-content;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 80%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
  color: inherit !important;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 80%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
  color: inherit !important;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  color: inherit !important;
  text-decoration: none !important;
}

[data-tooltip]:hover {
  text-decoration: none !important;
}

.year-content {
  display: none; /* Hidden by default */
  margin-left: -20px;
}

.toggle-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
}

.toggle-button span {
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.toggle-button span.up {
  transform: rotate(180deg); /* Rotate the arrow when active */
}

p {
  color: #000;
}

ul {
  color: #000;
}

/* no underline on hover for a id = arrow */
a#arrow:hover {
  text-decoration: none;
}

span b:first-of-type {
  display: block;
  font-size: 16px;
}

span *:not(b:first-of-type) {
  font-size: .9em;
}

span {
  font-size: 1em;
}