/* ms2025b55.test.cosmos.ru-600_timeline-2026-04-08-1.css */

.timeline-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  margin: 1em 0 2em 1em;
  padding: 0;
  box-sizing: border-box;
}

.timeline-container * {
  box-sizing: border-box;
}

.timeline {
  width: 100%;
  max-width: 36em;
  padding: 2em 0 0 1em;
  position: relative;
  box-shadow: 0.5rem 0.5rem 2rem 0 rgba(0, 0, 0, 0.2);
}

.timeline:before {
  content: "";
  position: absolute;
  top: 48px;
  left: calc(40% + 6px);
  bottom: 68px;
  width: 4px;
  background: #ddd;
}

.timeline:after {
  content: "";
  display: table;
  clear: both;
}

.timeline .entry {
  clear: both;
  text-align: left;
  position: relative;
}

.timeline .entry .title {
  margin-bottom: 0.5em;
  float: left;
  width: 40%;
  padding-right: 25px;
  text-align: right;
  position: relative;
}

.timeline .entry .title:before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border: 4px solid salmon;
  background-color: #fff;
  border-radius: 100%;
  top: 0;
  right: -8px;
  z-index: 99;
}

.timeline .entry .title h3 {
  margin: 0;
  font-size: 1.125em;
}
.timeline .entry .title p {
  margin: 0;
  font-size: 100%;
}

.timeline .entry .body {
  margin: 4px 0 2em 0;
  float: right;
  width: 59%;
  padding-left: 12px;
}

.timeline .entry .body p {
  line-height: 1.4em;
}

.timeline .entry .body p:first-child {
  top: -3px;
  position: relative;
  font-weight: 400;
}

.timeline .entry .body ul {
  color: #aaa;
  padding-left: 0;
  list-style-type: none;
}

.timeline .entry .body ul li:before {
  content: "–";
  margin-right: 0.5em;
}

.prev-symp .timeline .entry .body p:first-child {
  font-weight: 450;
  font-variation-settings: "wght" 450;
  font-size: 1.25rem;
}

@media (min-width:576px) {
	.prev-symp .timeline {
	  max-width: 45em;
	}
	.prev-symp .timeline:before {
		top: 48px;
	  bottom: 38px;
	  left: calc(28% + 6px);
	}
	.prev-symp .timeline .entry .title {
	  width: 28%;
	}
	.prev-symp .timeline .entry .body {
	  width: 71%;
	  margin: 0px 0 1em 0;
	  float: right;
	}
	.prev-symp .timeline .entry .body p:first-child {
	  top: -2px;
	}
}

@media (max-width:575px) {
	.timeline-container {
	  margin: 1em 0;
	}
	.timeline {
    padding: 0;
    box-shadow: none;
    background-color: #222;
    padding-top: 1em;
    border-radius: 0 0.5em 0.5em 0;
	}
	.timeline .entry .title {
	  width: 33%;
	  padding-right: 4px;
	  text-align: right;
	}
	.timeline .entry .title h3 {
	  font-size: 1em;
	}
	.timeline:before {
    left: calc(33% + 10px);
    top: 18px;
    bottom: 65px;
	}
	.timeline .entry .title:before {
    right: -24px;
    background-color: #222;
	}
	.timeline .entry .body {
    padding-left: 4px;
	}
	.prev-symp .timeline .entry .body p:first-child {
    top: -6px;
  }
}