.dwtimeline {
    display: flow-root;
    /* Timeline markers - Circle: max 2 signs, Ellipsis: 3-4 signs
    Custom property's:
    Standard vertical:
    --4sizewidth: 25px;         Circle 25px   Ellipsis 50px
    --4sizeright: -17px;        Circle -17px  Ellipsis -29px
    Small screen vertical:
    --4sizesmallleft40: 40px;   Circle 40px   Ellipsis 60px
    --4sizesmallleft50: 50px;   Circle 50px   Ellipsis 70px
    --4sizesmallleft4: 4px;     Circle 4px    Ellipsis -10px
    Standard horizontal:
    --4sizewidthhorz: 20px;     Circle 20px   Ellipsis 50px
    --4sizerighthorz: -14px;    Circle -14px  Ellipsis -29px
      */
    --4sizewidth: 25px;
    --4sizeright: -17px;
    --4sizesmallleft40: 40px;
    --4sizesmallleft50: 50px;
    --4sizesmallleft4: 4px;
    --4sizewidthhorz: 20px;
    --4sizerighthorz: -14px;
}

/* The actual timeline (the vertical ruler) */
.timeline-vert {
    box-sizing: border-box;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline-vert::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: @ini_text;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}

/* Container around content */
.container-vert {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    box-sizing: border-box;
    margin-left: unset;
    margin-right: unset;
}

/* The circles on the timeline */
.container-vert.tl-left::before, .container-vert.tl-right::before {
    content: attr(data-point);
    display: inline-block;
    position: absolute;
    width: var(--4sizewidth);
    height: 25px;
    right: var(--4sizeright);
    font-size:1.2em;
    font-weight: unset;
    text-align: center;
    line-height: 1.5em;
    background-color: @ini_background;
    border: 4px solid @ini_link;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
    box-sizing: unset;
    color: @ini_link;
}

/* invert color on timeline point on hover */
.container-vert.tl-left:hover::before, .container-vert.tl-right:hover::before {
    background-color: @ini_link;
    color: @ini_background;
}

/* Place the container to the left */
.container-vert.tl-left {
    left: 0;
}

/* Place the container to the right */
.container-vert.tl-right {
    left: 50%;
}

/* Place the container to center */
.container-vert.tl-top, .container-vert.tl-bottom {
    padding: 0;
    width: 30%;
    z-index: 1;
    margin: 10px auto;
    text-align: center;
}

/* Add arrows to the top container (pointing down) */
.container-vert.tl-top::after {
    content: '';
    height: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    margin-left: -10px;
    z-index: 1;
    border: medium solid @ini_background_neu;
    border-width: 10px 10px 0px 10px;
    border-color: @ini_background_neu transparent transparent transparent;
}

/* Add arrows to the bottom container (pointing up) */
.container-vert.tl-bottom::after {
    content: '';
    height: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 0;
    margin-left: -10px;
    z-index: 1;
    border: medium solid @ini_background_neu;
    border-width: 0px 10px 10px 10px;
    border-color: transparent transparent @ini_background_neu transparent;
}


/* Add arrows to the left container (pointing right) */
.container-vert.tl-left::after {
    content: '';
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid @ini_background_neu;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent @ini_background_neu;
}

/* Add arrows to the right container (pointing left) */
.container-vert.tl-right::after {
    content: '';
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent @ini_background_neu transparent transparent;
}

/* Fix the circle for containers on the right side */
.container-vert.tl-right::before {
    left: var(--4sizeright);
}

/* The actual content */
.tlcontent {
    padding: 10px 10px;
    background-color: @ini_background_neu;
    position: relative;
    border-radius: 6px;
    color: @ini_text;
    white-space: normal;
    text-align: unset;
}

/* description of milestone, removed <h3> */
.msdesc {
    font-weight: bold;
    font-size: 1.1em;
    padding: 5px;
    text-align: center;
    color: @ini_text;
}

/* Titles of timeline and milestones, removed <h2> */
.mstitle, .tltitle {
    font-weight: bold;
    font-size: 1.4em;
    padding: 5px;
    color: @ini_text;
}

/* fix for space arround paragraph */
.mstitle>p {
    margin-bottom: 0;
}

/* set the Header to left or */
.container-vert.tl-left .tlcontent .mstitle {
    text-align: right;
}
/* right */
.container-vert.tl-right .tlcontent .mstitle {
    text-align: left;
}

/* Horizontal TimeLine */
.timeline-horz {
    box-sizing: border-box;
    white-space: nowrap;
    overflow-x: scroll;
    padding: 30px 0 10px 0;
    position: relative;
    margin: 0 auto;
}

/* The actual timeline (the horizontal ruler) */
.timeline-horz-line {
    height: 4px;
    background: @ini_background_neu;
    width: 100%;
    position: relative;
    top: 16px;
}

/* a smaller bottom container */
.container-horz {
    display: inline-block;
    vertical-align: top;
    padding: 10px 10px 10px 10px;
    position: relative;
    background-color: inherit;
    width: 33%;
    margin-left: -2px;
    margin-right: -2px;
    text-align: center;
    box-sizing: border-box;
}

/* The circles on the timeline at top of container*/
.container-horz::before {
    content: attr(data-point);
    position: absolute;
    width: var(--4sizewidthhorz);
    height: 20px;
    font-size:1em;
    font-weight: unset;
    text-align: center;
    line-height: 20px;
    background-color: @ini_background;
    border: 3px solid @ini_link;
    color: @ini_link;
    top: -30px;
    left: 50%;
    margin-left: var(--4sizerighthorz);
    border-radius: 50%;
    z-index: 1;
    box-sizing: unset;
}

/* invert color on timeline point on hover */
.container-horz:hover::before {
    background-color: @ini_link;
    color: @ini_background;
}

/* Add arrows to the container (pointing up) */
.container-horz::after {
    content: '';
    height: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 0;
    margin-left: -10px;
    margin-bottom: -10px;
    z-index: 1;
    border: medium solid @ini_background_neu;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent @ini_background_neu transparent;
}

/* Media queries - Responsive timeline on screens less than 600px wide */

@media (max-width: 600px) {
    /* Place the timeline to the left */
    .timeline::after {
        left: 31px;
    }

    .timeline-vert {
        left: 0;
    }

    /* Full-width containers */
    .container-vert {
        width: 100% !important;
        padding-left: var(--4sizesmallleft50) !important;
        padding-right: 10px !important;
    }

    /* Make sure that all arrows are pointing leftwards */
    .container-vert::before {
        left: var(--4sizesmallleft40);
        border: medium solid @ini_background_alt;
        border-width: 10px 10px 10px 0;
        border-color: transparent @ini_background_alt transparent transparent;
    }

    .timeline-vert::after {
        left: 20px;
    }

    /* Make sure all circles are at the same spot */
    .container-vert.tl-left::after, .container-vert.tl-right::after {
        left: 15px;
    }

    /* Make all right containers behave like the left ones */
    .container-vert.tl-right {
        left: 0;
    }

    .container-vert.tl-left::before {
        left: var(--4sizesmallleft4);
    }

    .container-vert.tl-right {
        left: 0;
    }

    .container-vert.tl-right::before {
        left: var(--4sizesmallleft4);
    }

    .container-vert.tl-right::after {
        left: var(--4sizesmallleft40);
    }

    .container-vert.tl-left::after {
        left: var(--4sizesmallleft40);
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent #ddd transparent transparent;
    }

    .container-vert .mstitle {
        text-align: center !important;
    }

    .container-vert.tl-top {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .container-vert.tl-top::after {
        left: 20px;
    }

    .container-vert.tl-top .tlcontent {
        border-radius: 6px 6px 6px 6px;
    }

    .container-vert.tl-bottom {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .tl-bottom .tlcontent {
        border-radius: 6px 6px 6px 6px;
    }

    .container-vert.tl-bottom::after {
        left: 20px;
    }
}