/* background color incl automatic font color */
.list-reset, .list *, .list--roman *, .list--date *, .list--timeline * {
  list-style-type: none; }

.list-item, .list li:before, .list--roman li:before, .list--date li:before, .list--timeline li:before {
  position: absolute;
  left: 0;
  vertical-align: middle;
  text-align: center; }

.list-divider, .list--roman * {
  border-bottom: 1px solid; }
  .list-divider:last-child, .list--roman :last-child {
    border: none; }

body {
  font-family: sans-serif;
  /* include transparency - example: 0.5 */
  background: #22272f;
  color: #7c8aa1; }

a {
  color: inherit; }

.list {
  margin: 60px auto;
  width: 400px; }

.list {
  counter-reset: item; }
  .list li {
    padding: 4.66667px;
    font-size: 14px;
    line-height: 28px;
    cursor: pointer; }
  .list ol, .list ul {
    padding-left: 25px; }
  .list li {
    position: relative;
    padding-left: 30px; }
    .list li:before {
      width: 20px; }
  .list li:before {
    content: counter(item,decimal-leading-zero);
    counter-increment: item; }
  .list--roman {
    counter-reset: item; }
    .list--roman ol, .list--roman ul {
      padding-left: 37.5px; }
    .list--roman li {
      position: relative;
      padding-left: 40px; }
      .list--roman li:before {
        width: 30px; }
    .list--roman li:before {
      content: counter(item,upper-roman);
      counter-increment: item; }
    .list--roman li:before {
      border-left: 2.8px solid #00b9c4;
      color: #dedfe0; }
    .list--roman * {
      border-color: #3b4149; }
    .list--roman li {
      -webkit-transition: all 0.3s linear;
              transition: all 0.3s linear; }
      .list--roman li:hover {
        /* include transparency - example: 0.5 */
        background: #13161a;
        color: #697a90; }
  .list--date {
    counter-reset: item; }
    .list--date ol, .list--date ul {
      padding-left: 0; }
    .list--date li {
      position: relative;
      padding-left: 70px; }
      .list--date li:before {
        width: 60px; }
    .list--date li:before {
      content: attr(title); }
    .list--date li:before {
      content: counter(item,title);
      counter-increment: item; }
    .list--date li {
      padding-left: 81px; }
      .list--date li:before {
        /* include transparency - example: 0.5 */
        background: #008189;
        color: #56f5ff;
        margin-top: 4.66667px;
        margin-left: 4.66667px;
        content: '---';
        font-weight: 700;
        font-size: 11.66667px;
        line-height: 21px;
        width: 60px; }
      .list--date li[title]:before {
        /* include transparency - example: 0.5 */
        background: #00b9c4;
        color: #91f9ff;
        content: attr(title); }
      .list--date li:after {
        content: '';
        display: block;
        position: absolute;
        width: 0;
        top: 15.75px;
        left: 64.66667px;
        border-style: solid;
        border-width: 4.66667px 0 4.66667px 4.66667px;
        border-color: transparent transparent transparent #008189;
        z-index: 2; }
      .list--date li[title]:after {
        border-color: transparent transparent transparent #00b9c4; }
    .list--date li {
      -webkit-transition: all 0.3s linear;
              transition: all 0.3s linear; }
      .list--date li:hover {
        /* include transparency - example: 0.5 */
        background: #008189;
        color: #56f5ff; }
  .list--timeline {
    color: #92959a;
    counter-reset: item; }
    .list--timeline ol, .list--timeline ul {
      padding-left: 0; }
    .list--timeline li {
      position: relative;
      padding-left: 40px; }
      .list--timeline li:before {
        width: 30px; }
    .list--timeline li:before {
      content: counter(item,decimal-leading-zero);
      counter-increment: item; }
    .list--timeline li {
      line-height: 30px; }
      .list--timeline li:before {
        position: absolute;
        left: 0;
        vertical-align: middle;
        text-align: center;
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 11.66667px;
        border: 1px solid #92959a;
        border-radius: 50%;
        /* include transparency - example: 0.5 */
        background: #22272f;
        color: #7c8aa1;
        z-index: 2; }
      .list--timeline li:after {
        position: absolute;
        content: '';
        top: 0;
        left: 16px;
        width: 1px;
        height: 100%;
        background: #92959a; }