.lists{
  --listAlignTop:2.5rem;
  padding-left: 5em;list-style: disc; padding-top: 0.5em;}
.lists div.list{text-align: left; display: list-item; padding-top: 1.25rem; padding-bottom: 1.25rem;}
.lists .list>p{margin: 0;}

.lists.shapeChange[data-shape="2"]{list-style: none;padding-left: 7em;}
.lists.shapeChange[data-shape="2"] .list{
  padding-left: 2rem;
  --sizeList: 0.6rem;
  --colorList:currentColor;
   position: relative;}
.lists.shapeChange[data-shape="2"] .list::before {
  content: "";position: absolute;
  top: var(--listAlignTop);transform: translateY(-50%);
  left: calc(-2 * var(--sizeList));
  width: calc(var(--sizeList) + 5px);height: calc(var(--sizeList) + 5px);
  border-radius: 50%;border:1px solid var(--colorList);
}
.lists.shapeChange[data-shape="2"] .list::after {
  content: "";position: absolute;
  top: calc(var(--listAlignTop) + 3px);
  left: calc(-2 * var(--sizeList) + 5px);
  width: calc( 0.7 * var(--sizeList));height: calc( 0.35 * var(--sizeList));
  border:2px solid var(--colorList); border-top:none; border-right: none;
  transform-origin:50% 50%;transform:translateY(-110%) scale(0.8) skew(0deg,-15deg) rotate(-43deg);
}
.editableZone .lists.shapeChange[data-shape="2"] .list:hover::after{transform: none}

.lists.shapeChange[data-shape="1"]{counter-reset: countList; list-style: none;padding-left: 7em;}
.lists.shapeChange[data-shape="1"] .list{
  --sizeList: 0.6rem;
  --colorList:currentColor;
  counter-increment: countList; position: relative;}
.lists.shapeChange[data-shape="1"] .list::before{
  content: counter(countList);position: absolute;
  font-weight: bold;font-size: calc(var(--sizeList) - 2px);color: var(--colorList); text-align: center;
  top: var(--listAlignTop);transform: translateY(-50%);left: calc(-2 * var(--sizeList));
  line-height: calc(var(--sizeList) + 5px);width: calc(var(--sizeList) + 5px);height: calc(var(--sizeList) + 5px);
  border-radius: 50%;border:1px solid var(--colorList);
}