.action-timeline {
    position: relative;
    height: 100%;

    .action-timeline-wrapper {
        padding-left: 115px;
        color: var(--view-font-color-bright);

        >.action-timeline-item {
            position: relative;
            height: 30px;
            display: list-item;
            list-style: none;

            >.timeline-time {
                position: absolute;
                left: -115px;
                top: 6px;
                font-size: 12px;
            }

            >.timeline-content {
                padding: 5px;
            }
        }

        >.action-timeline-item::before {
            position: absolute;
            top: 12px;
            left: -16px;
            z-index: 3;
            width: 7px;
            height: 7px;
            background-color: var(--view-button-background-color);
            border: 1px solid var(--view-button-background-color);
            content: ' ';
            border-radius: 50%;
        }

        >.action-timeline-item:nth-child(n+2)::after {
            position: absolute;
            top: -12px;
            bottom: 20px;
            left: -13px;
            z-index: 1;
            display: block;
            content: ' ';
            border-left: 1px solid var(--view-button-background-color);
        }
    }

    .action-timeline-group-wrapper {
        padding-left: 200px;
        padding-right: 30px;
        color: var(--view-font-color-bright);

        .action-timeline-group {
            position: relative;
            padding-top: 30px;

            >.date {
                position: absolute;
                width: 150px;
                left: -170px;
                border: 2px solid var(--view-button-background-color);
                font-size: 18px;
                padding: 16px;

                >.arrow {
                    position: absolute;
                    top: 16px;
                    right: 16px;
                    cursor: pointer;
                }
            }

            >.date::before {
                content: ' ';
                display: block;
                position: absolute;
                right: -22px;
                top: 26px;
                height: 2px;
                width: 20px;
                background-color: var(--view-button-background-color);
            }

            >.timeline {
                padding: 16px;
                border: 2px solid var(--view-button-background-color);
            }
        }
    }
}