button.citation-marker,
button.note-marker {
  all: revert;
  background-color: transparent;
  border: 0;
  padding-inline: 4px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
}

button.citation-marker:hover,
button.note-marker:hover {
  color: #000;
  transform: translate(0px, -1px);
}

button.citation-marker::before,
button.note-marker::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
}

button.citation-marker::before {
  content: "\f02d";
}

button.note-marker::before {
  content: "\f249";
}

[popover]{
  position-area: bottom;
  margin: initial;
}

span.citation-popup,
span.note-popup {
	max-width: 400px;
  background-color: hsl(0deg 0% 98% / 92%);
  border-width: 0.5px;
  border-radius: 6px;
  border-color: hsl(0 0% 85% / 1);
  box-shadow: #c0c0c0 0px 0px 2px;
  backdrop-filter: blur(1px);
}

span.citation-popup > *,
span.note-popup > * {
  margin-bottom: 0;
  font-size: 0.85rem;
  color: #333;
}

span.citation-item {
  display: block;
}