}}
</div>
{{#widget:style|style=.timeline > div {user-select:none;}
.timeline {
width: 380px;
position: fixed;
right: -344px;
display: flex;
flex-direction: row;
transition: all 0.3s ease-in;
z-index:1000;
outline:none;
}
.timeline.active {right:0px}
.timeline > div#show-timeline {
writing-mode: vertical-lr;
padding: 0px 8px;
padding-top: 15px;
width: 20px;
height: fit-content;
background: #f4c430;
color: black;
cursor: pointer;
display: block;
position: absolute;
left:0px;
top:0px;
height:150px;
z-index:1;
}
.timeline > div#show-timeline2 {
writing-mode: vertical-lr;
padding: 0px 8px;
padding-top: 20px;
width: 20px;
height: fit-content;
background: white;
color: black;
cursor: pointer;
display: block;
position: absolute;
left:0px;
top:160px;
height:200px;
z-index:0
}
div#show-timeline::after {
content:"";
width:100%;
height:15px;
position: absolute;
bottom: -5px;
left: 0px;
background:#f4c430;
transform: skewY(15deg);
z-index:1;
}
div#show-timeline2::after {
content:"";
width:100%;
height:15px;
position: absolute;
bottom: -5px;
left: 0px;
background:white;
transform: skewY(15deg);
z-index:1;
}
.timeline > iframe {
position:absolute;
left:36px;
top:0px;
}
.timeline> span {
position: absolute;
top: 390px;
left: 0px;
width: 30px;
height: 28px;
background: #f4c430;
border-radius: 50%;
text-align: center;
padding-top: 4px;
color: black;
padding-left: 2px;
opacity: 0;
transition: all 0.3s ease-in;
}
.timeline.active > span {
opacity:1;
}
}}
