body {
  user-select: none;
}

#temari-sections {
  display: grid;
  grid-template-columns: auto 1fr;
}

.section-information {
  margin: 1em;
  padding: 1em;
  font-weight: bold;
}

.section-content {
  display: flex;
  margin: 1em;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1em 1px;
}

.word-pronunciation {
  font-size: 75%;
}

.word-text {
  display: flex;
  align-items: stretch;
}

.word-char {
  display: inline-block;
}

.word-char-separator {
  display: inline-block;
  user-select: none;
}

.word-char-separator:hover {
  color: rgb(255, 0, 0, 50%);
}

.word-char-separator-line {
  margin: 0 0.125em;
  height: 100%;
}

.word-char-separator.drag-hover .word-char-separator-line {
  margin: 0 0.25em;
  border-left: 1px solid rgb(0, 0, 0);
}

.word-char-separator:hover .word-char-separator-line {
  margin: 0 0.25em;
  border-left: 1px solid rgb(0, 0, 0);
}

.word-icon {
  margin-left: 0.25em;
  display: inline-block;
}

.word-lemma {
  font-size: 75%;
}

.word-tag {
  background-color: lightskyblue;
  margin: 0.25em 0 0 0.5em;
  border-radius: 0.5em;
  padding: 0 0.5em;
  font-size: 75%;
}

#temari-sections .word-tag:hover {
  background-color: lightcyan;
}

.word-separator-line {
  margin: 0 1em;
  height: 100%;
  border-left: 1px solid rgb(0, 0, 0);
}

.temari-candidates {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1em 1em;
}

.word {
  padding: 0.5em;
}

.word:hover {
  background-color: aliceblue;
}

.word.temari-selected {
  background-color: lightblue;
}

.word-separator:hover {
  background-color: aliceblue;
}

.word-separator.temari-selected {
  background-color: lightblue;
}

.word.pseudoword {
  color: darkgreen;
  font-weight: bold;
}