<style type="text/css">
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: #D7B797;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
.timelinecontainer {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50% ;
}
.timelinecontainer::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -12.5px;
background-color: white;
border: 4px solid #D7B797;
top: 15px;
border-radius: 50%;
z-index: 1;
}
.timelinecontainer.checked::after {
content: '🗸';
text-align: center;
background-color: #2b2;
line-height: 1.3em;
color: white;
font-weight: bold;
}
.myleft {
left: 0;
padding: 10px 40px 10px 10px;
}
.myright {
left: 50%;
padding: 10px 10px 10px 40px;
}
.myleft::before,
.myright::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
border: medium solid white;
}
.myleft::before {
right: 30px;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #DEF3FA;
}
.myright::before {
left: 30px;
border-width: 10px 10px 10px 0;
border-color: transparent #DEF3FA transparent transparent;
}
.timelinecontainer.checked.myleft::before {
border-right-color: #eee;
}
.timelinecontainer.checked.myright::before {
border-left-color: #eee;
}
.myright::after {
left: -12.5px;
}
.timelinecontent {
padding: 20px 30px;
background-color: #DEF3FA;
position: relative;
border-radius: 6px;
}
.timelinecontainer.checked .timelinecontent {
background-color: #eee;
color: #888;
}
body:not(.editing) .block#inst58416 {
display: none;
}
</style>
