.ty-timeline {
  box-sizing: border-box;
  color: var(--ty-timeline-color);
  font-size: var(--ty-timeline-font-size);
  line-height: 1.5;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ty-timeline-item {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 var(--ty-timeline-item-padding-bottom);
  font-size: var(--ty-timeline-item-font-size);
  list-style: none;
}
.ty-timeline-item:last-child .ty-timeline-item__head::before {
  display: none;
}
.ty-timeline-item__head {
  width: 16px;
  background-color: transparent;
  position: absolute;
  color: var(--ty-timeline-head-color);
  height: 100%;
}
.ty-timeline-item__head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  border-left: 2px solid var(--ty-timeline-line-color);
}
.ty-timeline-item__dot-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: transparent;
}
.ty-timeline-item__dot {
  display: inline-block;
  width: var(--ty-timeline-dot-size);
  height: var(--ty-timeline-dot-size);
  border: var(--ty-timeline-dot-border-width) solid var(--ty-timeline-dot-border-color);
  border-radius: 100px;
  background-color: var(--ty-color-bg);
}
.ty-timeline-item__content {
  position: relative;
  top: 0;
  padding-left: var(--ty-timeline-content-offset);
}
.ty-timeline-item_left .ty-timeline-item__head, .ty-timeline-item_right .ty-timeline-item__head {
  left: 50%;
}
.ty-timeline-item_left .ty-timeline-item__content {
  left: 50%;
  width: 50%;
}
.ty-timeline-item_right .ty-timeline-item__content {
  width: 50%;
  text-align: right;
  padding-left: 0;
  padding-right: 9px;
}