/* From 
https://code-boxx.com/simple-pure-css-timeline/#sec-vertical
*/
/* (A) TIMELINE CONTAINER */
.vtl {
/* (A1) RELATIVE POSITION REQUIRED TO PROPERLY POSITION THE TIMELINE */
    position: relative;
/* (A2) RESERVE MORE SPACE TO THE LEFT FOR THE TIMELINE */
    padding: 10px 10px 10px 50px;
/* (A3) OPTIONAL WIDTH RESTRICTION */
    max-width: 400px;
}

.vtl, .vtl * { box-sizing: border-box; }
/* (B) DRAW VERTICAL LINE USING ::BEFORE */
.vtl::before {
/* (B1) VERTICAL LINE */
    content: "";
    width: 3px;
    background-color: var(--color-primary);
    /* (B2) POSITION TO THE LEFT */
    position: absolute;
    top: 0; bottom: 0; left: 15px;
}

/* (C) COSMETICS FOR EVENTS */
div.event {
    padding: 5px 5px;
    /*background-color: var(--bg-secondary-color);*/
    background-color: #A8A8A8;
    position: relative;
    border-radius: 6px;
    margin-bottom: 5px;
}

/* (D) COSMETICS FOR EVENT DATE & TEXT */
p.date {
    /*font-size: 1.1em;*/
    font-weight: 700;
    /*color: #ff5400;*/
    color: var(--color-primary);
}

/* controls label body text formatting */
p.txt {
    margin: -20px 0 0 0;
    color: var(--font-color);
    /*background-color: var(--bg-secondary-color);*/
    background-color: #A8A8A8
}

p.red{
    margin: -20px 0 0 0;
    color: var(--font-color);
    background-color: var(--text-primary);
}

/* (E) EVENT "SPEECH BUBBLE CALLOUT" */
div.event::before {
/* (E1) "MAGIC TRIANGLE" */
    content: "";
    border: 10px solid transparent;
    /*border-right-color: var(--bg-secondary-color);*/
    border-right-color: #A8A8A8;
    border-left: 0;
    /* (E2) POSITION TO THE LEFT */
    position: absolute;
    top: 10%; left: -9px;
}

/* (F) CIRCLE ON TIMELINE */
div.event::after {
/* (F1) "MAGIC CIRCLE" */
    content: "";
    /*background: #ff4500;*/
    background: var(--color-primary);
    /*border: 4px solid #DE421A;*/
    border: 4px solid var(--color-primary);
    width: 5px; height: 5px;
    border-radius: 50%;
    /* (F2) POSITION TO THE LEFT */
    position: absolute;
    top: 20%; left: -37px;
}

/* (X) DOES NOT MATTER */
* { font-family: arial, sans-serif; }