.timeline-with-icons {
  border-left: 2px solid rgba(255, 167, 38, 1);
  position: relative;
  list-style: none;
}

.timeline-with-icons .timeline-item {
  position: relative;
}

.timeline-with-icons .timeline-item:after {
  position: absolute;
  display: block;
  top: 0;
}

.timeline-with-icons .timeline-icon {
  position: absolute;
  left: -56px;
  background-color: rgba(255, 167, 38, 1);
  color: rgba(255, 255, 255, 1);
  border-radius: 50%;
  height: 46px;
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-without-border {
  border-left: none; /* Убирает border-left */
}

.timeline-without-border .timeline-icon {
  background-color: rgba(255, 167, 38, 1);
  color: rgba(255, 255, 255, 1);
  border-radius: 50%;
  height: 46px;
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.po-icon{
  background-color: rgba(255, 167, 38, 1);
  color: rgba(255, 255, 255, 1);
  border-radius: 50%;
  height: 110px;
  width: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto; /* Центрирует элемент по горизонтали */
}


/* Цвета для прогресса и фона в зависимости от статуса */
.progress-bar-planned {
    background-color: #ffecb3; /* Светло-желтый */
}
.progress-bar-planned-bg {
    background-color: rgba(255, 236, 179, 0.5); /* Полупрозрачный светло-желтый */
}

.progress-bar-in-progress {
    background-color: #ffa726; /* Оранжевый */
}
.progress-bar-in-progress-bg {
    background-color: rgba(255, 167, 38, 0.5); /* Полупрозрачный оранжевый */
}

.progress-bar-paused {
    background-color: #bdbdbd; /* Серый (для паузы) */
}
.progress-bar-paused-bg {
    background-color: rgba(189, 189, 189, 0.5); /* Полупрозрачный серый */
}

.progress-bar-cancelled {
    background-color: #e57373; /* Красный (для отмены) */
}
.progress-bar-cancelled-bg {
    background-color: rgba(229, 115, 115, 0.5); /* Полупрозрачный красный */
}


/* Цвета для родительского прогресса и фона в зависимости от статуса */
.parent-progress-bar-planned {
    background-color: #ffecb3; /* Светло-желтый */
}
.parent-progress-bar-planned-bg {
    background-color: rgba(255, 236, 179, 0.5); /* Полупрозрачный светло-желтый */
}

.parent-progress-bar-in-progress {
    background-color: #ffa726; /* Оранжевый */
}
.parent-progress-bar-in-progress-bg {
    background-color: rgba(255, 167, 38, 0.5); /* Полупрозрачный оранжевый */
}

.parent-progress-bar-paused {
    background-color: #bdbdbd; /* Серый (для паузы) */
}
.parent-progress-bar-paused-bg {
    background-color: rgba(189, 189, 189, 0.5); /* Полупрозрачный серый */
}

.parent-progress-bar-cancelled {
    background-color: #e57373; /* Красный (для отмены) */
}
.parent-progress-bar-cancelled-bg {
    background-color: rgba(229, 115, 115, 0.5); /* Полупрозрачный красный */
}