input[type="checkbox"] {
  display: none;
}
.toggle-icon {
  margin: 0 5px 10px 0;
  cursor: pointer;
  color: #41cd52;
  font-family: "FontAwesome";
  font-size: 18px;
}
.toggle-icon::before {
  color: var(--header-color);
  content: "\f204"
}
input[id="highlight-issues"]:checked + div::before{
  content: "\f205";
}

/*
Disable pop-up on mouse hover for the span entries,
if the highlighting is off.
*/
span[title]:not(.vale-issue) {
  pointer-events: none;
}