/* Base style for all .rdg following two span[title]s */
.inlineSection .activeRdg[title] + .activeRdg[title] + .rdg {
  color: rgba(0, 0, 0, 1);
  background-repeat: no-repeat;
  background-size: 100% 2.3px;
  background-position: 0 100%;
  border-bottom: 0;
  padding-bottom: 2px;
}

/* Only override background-image per combination */
.inlineSection .activeRdg[title='inhoudelijk'] + span[title='leesteken'] + .rdg {
  background-image: linear-gradient(to right, var(--leesteken) 50%, var(--inhoudelijk) 50%);
}
.inlineSection .activeRdg[title='inhoudelijk'] + span[title='spelling'] + .rdg {
  background-image: linear-gradient(to right, var(--spelling) 50%, var(--inhoudelijk) 50%);
}
.inlineSection .activeRdg[title='inhoudelijk'] + span[title='formeel'] + .rdg {
  background-image: linear-gradient(to right, var(--formeel) 50%, var(--inhoudelijk) 50%);
}
.inlineSection .activeRdg[title='inhoudelijk'] + span[title='grammatica'] + .rdg {
  background-image: linear-gradient(to right, var(--grammatica) 50%, var(--inhoudelijk) 50%);
}

.inlineSection .activeRdg[title='leesteken'] + span[title='inhoudelijk'] + .rdg {
  background-image: linear-gradient(to right, var(--inhoudelijk) 50%, var(--leesteken) 50%);
}
.inlineSection .activeRdg[title='leesteken'] + span[title='spelling'] + .rdg {
  background-image: linear-gradient(to right, var(--spelling) 50%, var(--leesteken) 50%);
}
.inlineSection .activeRdg[title='leesteken'] + span[title='formeel'] + .rdg {
  background-image: linear-gradient(to right, var(--formeel) 50%, var(--leesteken) 50%);
}
.inlineSection .activeRdg[title='leesteken'] + span[title='grammatica'] + .rdg {
  background-image: linear-gradient(to right, var(--grammatica) 50%, var(--leesteken) 50%);
}

.inlineSection .activeRdg[title='spelling'] + span[title='inhoudelijk'] + .rdg {
  background-image: linear-gradient(to right, var(--inhoudelijk) 50%, var(--spelling) 50%);
}
.inlineSection .activeRdg[title='spelling'] + span[title='leesteken'] + .rdg {
  background-image: linear-gradient(to right, var(--leesteken) 50%, var(--spelling) 50%);
}
.inlineSection .activeRdg[title='spelling'] + span[title='formeel'] + .rdg {
  background-image: linear-gradient(to right, var(--formeel) 50%, var(--spelling) 50%);
}
.inlineSection .activeRdg[title='spelling'] + span[title='grammatica'] + .rdg {
  background-image: linear-gradient(to right, var(--grammatica) 50%, var(--spelling) 50%);
}

.inlineSection .activeRdg[title='formeel'] + span[title='inhoudelijk'] + .rdg {
  background-image: linear-gradient(to right, var(--inhoudelijk) 50%, var(--formeel) 50%);
}
.inlineSection .activeRdg[title='formeel'] + span[title='leesteken'] + .rdg {
  background-image: linear-gradient(to right, var(--leesteken) 50%, var(--formeel) 50%);
}
.inlineSection .activeRdg[title='formeel'] + span[title='spelling'] + .rdg {
  background-image: linear-gradient(to right, var(--spelling) 50%, var(--formeel) 50%);
}
.inlineSection .activeRdg[title='formeel'] + span[title='grammatica'] + .rdg {
  background-image: linear-gradient(to right, var(--grammatica) 50%, var(--formeel) 50%);
}

.inlineSection .activeRdg[title='grammatica'] + span[title='inhoudelijk'] + .rdg {
  background-image: linear-gradient(to right, var(--inhoudelijk) 50%, var(--grammatica) 50%);
}
.inlineSection .activeRdg[title='grammatica'] + span[title='leesteken'] + .rdg {
  background-image: linear-gradient(to right, var(--leesteken) 50%, var(--grammatica) 50%);
}
.inlineSection .activeRdg[title='grammatica'] + span[title='spelling'] + .rdg {
  background-image: linear-gradient(to right, var(--spelling) 50%, var(--grammatica) 50%);
}
.inlineSection .activeRdg[title='grammatica'] + span[title='formeel'] + .rdg {
  background-image: linear-gradient(to right, var(--formeel) 50%, var(--grammatica) 50%);
}