/* ===== Data Protection Notice: Numbering ===== */
.dpn {
  counter-reset: dpn;
}

/* list utama: 1, 2, 3 ... 30 */
.dpn > ol {
  list-style: none;
  padding-left: 2.5rem;
  margin-bottom: 1rem;
}
.dpn > ol > li {
  display: block;
  position: relative;
  list-style: none;
  counter-increment: dpn;
}
.dpn > ol > li::before {
  content: counter(dpn) ".";
  position: absolute;
  left: -2.5rem;
  width: 2rem;
  text-align: right;
}

/* sub-list (a), (b) ... dan (i), (ii) ... */
.dpn ol ol {
  list-style: none;
  padding-left: 2rem;
  counter-reset: dpn-sub;
}
.dpn ol ol > li {
  display: block;
  position: relative;
  list-style: none;
  counter-increment: dpn-sub;
}
.dpn ol ol > li::before {
  position: absolute;
  left: -2rem;
}
.dpn ol ol[type="a"] > li::before {
  content: "(" counter(dpn-sub, lower-alpha) ")";
}
.dpn ol ol[type="i"] > li::before {
  content: "(" counter(dpn-sub, lower-roman) ")";
}