/*assumes timeline-content has 2 columns, 1 .timeline and 1 content column thats it*/
/*anchor also needs to be flex or else the anchor node gets misaligned*/
.timeline-content, .timeline-anchor {
display: flex;
}
.timeline {
display: inline-block;
max-width: 1em;
height: auto;
background: rgba(80, 80, 80, 0.5);
margin: 3em;
border-radius: 1em;
/*patch for terminating the timeline at the nodes; assume p-5 divider exists at topmost and bottommost, and 2em of margin on both sides of the last element*/
margin-top: 15em;
margin-bottom: 15em;
}
/*all elements in the non timeline column that specifies it is an anchor*/
.timeline-anchor::before {
/*set up .fa for this pseudo element*/
font-size: 2em;
font-family: var(--fa-style-family-classic);
font-weight: 900;
/*node style on timeline*/
content: "\f192";
color: rgba(200, 200, 200, 0.8);
/*apparently flexbox centers content in pseudo elements*/
display:flex;
flex-direction:row;
align-items: center;
/*move the pseudoelement onto the timeline*/
position: relative;
left: -1.375em; /*.timeline margin (3em) + .col margin on timeline (0.25em) - half of this width (0.5em), scaled by 2em*/
margin-left: -1em; /*remove the size of this element in parent*/
width: 1em;
}
/*special types with ctf-info still in it*/
.timeline-organized::before {
content: "\f005" !important;
left: -1.475em !important; /*seems like certain fonts have a different width than the normal node*/