/* Timeline */

.tss-timeline-owner {
    background: var(--tss-secondary-background-color) linear-gradient(var(--tss-default-background-color), var(--tss-default-background-color)) no-repeat center/4px 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

/* The actual timeline (the vertical ruler) */
.tss-timeline {
    position: relative;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    isolation: isolate;
    overflow: visible;
}

/* Container around content */
.tss-timeline-container {
    padding: 10px 40px;
    min-height:60px;
    position: relative;
    width: 50%;
}

    /* The circles on the timeline */
    .tss-timeline-container::after {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        right: -13px;
        background-color: var(--tss-default-background-color);
        border: 3px solid var(--tss-default-background-color);
        top: 22px;
        border-radius: 50%;
        z-index: 2;
        box-shadow: var(--tss-box-shadow);
    }

    /* Place the container to the left */
    .tss-timeline-container.tss-left {
        left: 0;
    }

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

    /* Add arrows to the left container (pointing right) */
    .tss-timeline-container.tss-left::before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        top: 38px;
        right: 29px;
        box-sizing: border-box;
        z-index: 1;
        border: 6px solid black;
        border-color: transparent transparent var(--tss-default-background-color) var(--tss-default-background-color);
        transform-origin: 0 0;
        transform: rotate(225deg);
        box-shadow: -1px 0.6px 2px 0 var(--tss-shadow-color-to);
    }

    /* Add arrows to the right container (pointing left) */
    .tss-timeline-container.tss-right::before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        top: 21px;
        left: 40px;
        box-sizing: border-box;
        z-index: 1;
        border: 6px solid black;
        border-color: transparent transparent var(--tss-default-background-color) var(--tss-default-background-color);
        transform-origin: 0 0;
        transform: rotate(45deg);
        box-shadow: -1px 0.6px 2px 0 var(--tss-shadow-color-to);
    }

    /* Fix the circle for containers on the right side */
    .tss-timeline-container.tss-right::after {
        left: -3px;
    }

    /* The actual content */
    .tss-timeline-container .tss-timeline-content {
        padding: 20px 30px;
        position: relative;
        background: var(--tss-default-background-color);
        border-radius: 2px;
        background-clip: padding-box;
        -webkit-box-shadow: var(--tss-card-shadow);
        box-shadow: var(--tss-card-shadow);
        isolation: isolate;
    }

/* Place the timelime to the left */
.tss-timeline-owner.tss-left .tss-timeline::after {
    left: 31px;
}

/* Full-width containers */
.tss-timeline-owner.tss-left {
    background: var(--tss-secondary-background-color) linear-gradient(var(--tss-default-background-color), var(--tss-default-background-color)) no-repeat 20px 0px/4px 100%;
}

    .tss-timeline-owner.tss-left .tss-timeline {
        margin: 0 auto 0 0;
    }

    .tss-timeline-owner.tss-left > .tss-timeline > .tss-timeline-container {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    /* Make sure that all arrows are pointing leftwards */
        .tss-timeline-owner.tss-left > .tss-timeline > .tss-timeline-container::before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            top: 21px;
            left: 70px;
            box-sizing: border-box;
            z-index: 1;
            border: 6px solid black;
            border-color: transparent transparent var(--tss-default-background-color) var(--tss-default-background-color);
            transform-origin: 0 0;
            transform: rotate(45deg);
            box-shadow: -1px 0.6px 2px 0 var(--tss-shadow-color-to);
        }

        /* Make sure all circles are at the same spot */
        .tss-timeline-owner.tss-left > .tss-timeline > .tss-timeline-container.tss-left::after {
            left: 15px;
        }
        .tss-timeline-owner.tss-left > .tss-timeline > .tss-timeline-container.tss-right::after {
            left: 15px;
        }

        /* Make all right containers behave like the left ones */
        .tss-timeline-owner.tss-left > .tss-timeline > .tss-timeline-container.tss-right {
            left: 0%;
        }
