.dm-bulletList,
.dm-bulletList[style="list-style-type:decimal"],
.dm-bulletList[style="list-style-type:lower-latin"],
.dm-bulletList[style="list-style-type:lower-roman"] {
  list-style-type: none !important;
}

.dm-bulletList {
  margin-bottom: var(--articleItemMarginBottom);
  line-height: 1.5;
  list-style: none;
  font-size: var(--articleTextSize);
  counter-reset: listNumber;
}

.dm-bulletList .dm-bulletList__item:before,
.dm-bulletList[style="list-style-type:decimal"] .dm-bulletList__item:before,
.dm-bulletList[style="list-style-type:lower-latin"] .dm-bulletList__item:before,
.dm-bulletList[style="list-style-type:lower-roman"] .dm-bulletList__item:before {
  counter-increment: listNumber;
  color: var(--white);
  font-size: .7rem;
  text-align: center;
  background-color: var(--brandColor);
  width: 1.1rem;
  height: 1.1rem;
  margin-right: .5em;
  display: inline-block;
  vertical-align: text-bottom;
}

.dm-bulletList .dm-bulletList__item:before {
  content: " ";
}

.dm-bulletList[style="list-style-type:decimal"] .dm-bulletList__item:before {
  content: counter(listNumber);
}

.dm-bulletList[style="list-style-type:lower-latin"] .dm-bulletList__item:before {
  content: counter(listNumber, upper-latin);
}

.dm-bulletList[style="list-style-type:lower-roman"] .dm-bulletList__item:before {
  content: counter(listNumber, upper-roman);
}

.dm-bulletList__item {
  margin-bottom: .2em;
}

/* ==========================================================================
    Following are styles for tags that the Li-editor uses for text
    formatting. Therefore we have to style the tags directly instead
    of using classes.
   ========================================================================== */

.dm-bulletList__item strong,
.dm-bulletList__item b {
  font-weight: bold;
}

.dm-bulletList__item em,
.dm-bulletList__item i {
  font-style: italic;
}