:root{--todo-number-diameter: 32px;--todo-margin-with-index: 16px;--todo-line-height: 27px;--todo-icon-height: 24px}@media (width < 767px){:root{--todo-number-diameter: 24px;--todo-margin-with-index: 8px;--todo-line-height: 20px;--todo-icon-height: 16px }}.todo{color:var(--neutral-06);counter-reset:my-list-counter;display:flex;flex-direction:column;width:100%}.todo__listItem{display:flex;margin-bottom:24px;padding:0;position:relative}.todo__listItem:before{border:solid 2px var(--neutral-06);border-radius:50%;content:counter(my-list-counter);display:inline-block;font-size:1.25rem;font-weight:700;height:var(--todo-number-diameter);line-height:var(--todo-line-height);margin-right:var(--todo-margin-with-index);min-width:var(--todo-number-diameter);text-align:center}.todo__listItem--incomplete{counter-increment:my-list-counter}.todo__listItem--complete{order:2}.todo__listItem--complete:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='var(--accent-01)'%3E %3Cpath fill='none' d='M0 0h32v32H0z'/%3E %3Cpath d='M12 26a2 2 0 0 1-1.41-.59l-8-8a2 2 0 0 1 2.82-2.82L12 21.17 26.59 6.59a2 2 0 0 1 2.82 2.82l-16 16A2 2 0 0 1 12 26'/%3E %3C/svg%3E") no-repeat center;background-size:var(--todo-icon-height);border-color:var(--accent-01);content:""}.todoListItem__title{font-size:1rem;margin:0}.todoListItem__subtitle{color:var(--neutral-05);font-size:.8rem;margin-top:4px}.todoListItem__doneText{color:var(--accent-01);font-family:var(--font-sans-serif);margin:0}