<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">* {
  box-sizing: border-box;
}
/* .sip {
	border: 2px solid green;
	font-family: Helvetica, sans-serif;
} */


/* The actual timeline (the vertical ruler) */
.sip .timeline {
  display: flex;
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.sip .timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -150px;
}

.sip .timeline.t-pre::after {
	background: linear-gradient(#727880, #49699f, #395faa) 
}

.sip .timeline.t-so::after {
	background: linear-gradient(#395faa, #9a7372, #c87f4c) 
}

.sip .timeline.t-od::after {
	background: linear-gradient(#c87f4c, #fa8c13, #fbac00) 
}

.sip .timeline.t-dj::after {
	background: linear-gradient(#fbb200, #fbb388, #fbb1e4) 
}

.sip .timeline.t-fa::after {
	background: linear-gradient(#f0b1f6, #d7b7e9, #b3b9bf) 
}
.sip .timeline.t-mj::after {
	background: linear-gradient(#9cba9e, #8cbb87, #77bd6a) 
}

/* Container around content */
.sip .container {
  display: flex;
  width: 100%;
  padding: 10px 0;
  position: relative;
}

.sip .container-left {
  padding-right: 10px;
  width: 35%;
}

.sip .container-right {
  padding-left:25px;
  padding-top: 20px;
  width: 65%;
}

.sip h3 {
margin: 0px;
}

.sip .content-left {
  padding-top: 10px;
  width: 70%;
  text-align: right;
}

.sip .content-right {
  padding: 20px 10px;
  width: 100%;
}

/* Add arrows to the left container (pointing right) */
.sip .container-left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 50px;
  display: block;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #727880; /* Arrow Colour */
}

.sip .container-left.t-so-arrow::before {
  border-left: 10px solid #395faa;
}

.sip .container-left.t-od-arrow::before {
  border-left: 10px solid #c87f4c;
}

.sip .container-left.t-dj-arrow::before {
  border-left: 10px solid #fbb200;
}

.sip .container-left.t-fa-arrow::before {
  border-left: 10px solid #f0b1f6;
}

.sip .container-left.t-mj-arrow::before {
  border-left: 10px solid #9cba9e;
}




</pre></body></html>