.action-timeline-table { width: calc(100% - 60px); margin: 0 30px; border-collapse:separate; border-spacing:0px 40px; .action-timeline-thead { th:nth-child(1) { min-width: 200px; } th:nth-child(2) { width: 100% } } .action-timeline-tbody { tr { td { position: relative; > .date { display: flex; width: max-content; padding: 16px; font-size: 16px; border: 2px solid #515a6e; .arrow { margin-left: 10px; } } >.date::before { content: ' '; display: block; position: absolute; right: -20px; top: 30px; height: 2px; width: 20px; background-color: #515a6e; } >.timeline { padding: 16px; border: 2px solid #515a6e; min-height: 68px; margin-left: 18px; .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; top: -6px; >.timeline-time { position: absolute; left: -115px; top: 5px; font-size: 12px; } >.timeline-content { padding: 5px; padding-left: 65px; } } >.action-timeline-item::before { position: absolute; top: 17px; left: 45px; z-index: 3; width: 7px; height: 7px; background-color: var(--view-button-background-color); border: 1px solid #515a6e; content: ' '; border-radius: 50%; } >.action-timeline-item:nth-child(n+2)::after { position: absolute; top: -7px; bottom: 12px; left: 48px; z-index: 1; display: block; content: ' '; border-left: 1px solid #515a6e; } } } } } } }