.inotherwords--toggle {
  display: inline;
}

p.collapse-below ~ label {
  display: inline;
}

.inotherwords--toggle ~ label:hover {
  cursor: pointer;
}

input.inotherwords--toggle {
  display: none;
}
/*
.inotherwords--toggleable.inotherwords--start-hidden {
 */

/* Drupal's Html::getUniqueId() strips out duplicate dashes in IDs.
   Also if anything here breaks, it probably changed the way it worked. */
input[id^="inotherwords-toggle"]:checked ~ .inotherwords--start-hidden {
  display: inline;
}

input[id^="inotherwords-toggle"]:not(:checked) ~ .inotherwords--start-hidden {
  display: none;
}

input[id^="inotherwords-toggle"]:checked ~ .period.inotherwords--start-hidden {
  display: none;
}

input[id^="inotherwords-toggle"]:not(:checked) ~ .period.inotherwords--start-hidden {
  display: inline;
}


input[id^="inotherwords-toggle"]:checked ~ .inotherwords--start-visible {
  display: none;
}

input[id^="inotherwords-toggle"]:not(:checked) ~ .inotherwords--start-visible {
  display: inline;
}

input[id^="inotherwords-toggle"]:checked ~ .period.inotherwords--start-visible {
  display: inline;
}

input[id^="inotherwords-toggle"]:not(:checked) ~ .period.inotherwords--start-visible {
  display: none;
}