#tagging-wrapper {
  background-color: #1e232c;
  height: 30px;
  width: 100%;
  position: relative;
}

#tagging-box-wrapper {
  margin-left: 272px;
  margin-right: 130px;
}

#tagging-box {
  position: relative;
  background-color: #1e232c;
  height: 30px;
  width: 100%;
  cursor: crosshair;
}

#tagging-time-wrapper {
  position: absolute;
  display: block;
  width: fit-content;
  height: 54px;
  border: 1px solid white;
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  top: -54px;
}

#tagging-time {
  display: block;
  color: black;
  background-color: white;
}

#tagging-info {
  display: none;
  position: absolute;
  font-size: 12px;
  width: 125px;
  background: white;
  color: black;
  border: 1px solid black;
  padding: 4px;
  top: 0;
  z-index: 10;
}

.tagging-tag {
  position: absolute;
  width: 16px;
  height: 16px;
}

.tagging-tag-start > svg {
  color: green;
}

.tagging-tag-end > svg {
  color: red;
  transform: rotateY(3.142rad);
}

.tagging-tag-startP {
  color: blue;
}

.tagging-tag-endP > svg {
  color: lightblue;
  transform: rotateY(3.142rad);
}

.tagging-tag-chapter {
  color: lavender;
}

.tagging-tag-comment > svg {
  color: white;
}

.tagging-tag-commentprive > svg {
  color: yellow;
}

.hide-tag {
  display: none;
  border: 1px solid black;
  font-size: 12px;
  width: 125px;
  background-color: white;
  color: black;
  position: absolute;
  top: -20px;
}

.tagging-tag:hover > .hide-tag {
  display: block;
}

.tagging-tag:hover > svg {
  color: yellow;
  scale: 1.25;
}