.action-timeline {
    --spine-w: 2px;
    --start-offset: 20px;
    --step-s: 40px;
    --step-gap: 60px;
    --step-offset: 15px;
    --arrow-s: 15px;
    max-width: 1080px;
    margin: auto;
    position: relative;
}

    .action-timeline .row {
        display: flex;
        position: relative;
    }

        .action-timeline .row:nth-child(odd) {
            justify-content: flex-start;
        }

        .action-timeline .row:nth-child(even) {
            justify-content: flex-end;
        }

        .action-timeline .row::before {
            content: "";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: var(--spine-w);
            background: #307abe;
            top: 0;
            height: 100%;
            z-index: 0;
            top: var(--start-offset);
        }

        .action-timeline .row:first-of-type::before {
            height: 100%;
        }

        .action-timeline .row:last-of-type::before {
            display: none;
        }

        .action-timeline .row section {
            background: #fff;
            border-radius: 5px;
            width: calc(50% - var(--step-s));
            padding: 20px;
            position: relative;
        }

            .action-timeline .row section::before {
                position: absolute;
                content: "";
                height: var(--arrow-s);
                width: var(--arrow-s);
                background: #fff;
                top: 28px;
                z-index: -1;
                transform: rotate(45deg);
                border: 1px solid #dee2e6;
            }

        .action-timeline .row:nth-child(odd) section::before {
            right: -7px;
        }

        .action-timeline .row:nth-child(even) section::before {
            left: -7px;
        }

        .action-timeline .row section .step {
            position: absolute;
            background: #f2f2f2;
            height: var(--step-s);
            width: var(--step-s);
            color: #307abe;
            box-shadow: 0 0 0 4px #fff, inset 0 2px 0 rgba(0,0,0,0.08), 0 3px 0 4px rgba(0,0,0,0.05), 0 1rem 2.25rem rgba(50,50,93,0.03),0 0.3125rem 1rem rgba(0,0,0,0.12);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            top: var(--step-offset);
        }

            .action-timeline .row section .step span {
                text-transform: uppercase;
            }

        .action-timeline .row:nth-child(odd) section .step {
            right: calc(var(--step-gap) * -1);
        }

        .action-timeline .row:nth-child(even) section .step {
            left: calc(var(--step-gap) * -1);
        }

[dir=rtl] .action-timeline .row:nth-child(odd) section::before {
    left: -7px;
    right: auto;
}

[dir=rtl] .action-timeline .row:nth-child(even) section::before {
    right: -7px;
    left: auto;
}

[dir=rtl] .action-timeline .row:nth-child(odd) section .step {
    left: calc(var(--step-gap) * -1);
    right: auto;
}

[dir=rtl] .action-timeline .row:nth-child(even) section .step {
    right: calc(var(--step-gap) * -1);
    left: auto;
}

[dir=rtl] .action-timeline .row section .step span {
    font-size: 11px;
}

@media (max-width: 768px) {
    .action-timeline .row {
        --start-offset: 30px;
        margin: 16px 0 0 60px;
    }

        .action-timeline .row::before {
            left: -40px;
            transform: none;
        }

        .action-timeline .row section {
            width: 100%;
        }

            .action-timeline .row section::before {
                left: -7px;
            }

            .action-timeline .row section .step {
                left: -60px;
            }

    [dir=rtl] .action-timeline .row {
        margin: 16px 60px 0 0;
    }

        [dir=rtl] .action-timeline .row::before {
            right: -40px;
            left: auto;
        }

        [dir=rtl] .action-timeline .row:nth-child(odd) section::before {
            right: -7px;
            left: auto;
        }

        [dir=rtl] .action-timeline .row:nth-child(odd) section .step {
            right: calc(var(--step-gap) * -1);
            left: auto;
        }
}

@media (max-width: 575.98px) {
    .action-timeline .center-line,
    .action-timeline .row section::before,
    .action-timeline .row section .step {
        display: none;
    }

    .action-timeline .row {
        margin: 10px 0;
    }

        .action-timeline .row::before {
            display: none;
        }
}

.job-timeline {
    --jt-line-color: #307abe;
    --jt-spine-w: 2px;
}

    .job-timeline .job-activity {
        display: flex;
    }

        .job-timeline .job-activity .step {
            display: inline-flex;
            align-self: stretch;
            align-items: center;
            justify-content: center;
        }

            .job-timeline .job-activity .step::after {
                content: "";
                position: absolute;
                border-left: var(--jt-spine-w) solid var(--jt-line-color);
                height: 100%;
                left: calc(50% - (var(--jt-spine-w) / 2));
                z-index: 1;
            }

        .job-timeline .job-activity:first-child .step::after {
            height: 50%;
            top: 50%;
        }

        .job-timeline .job-activity:last-child .step::after {
            height: 50%;
            top: 0;
        }

        .job-timeline .job-activity:first-child:last-child .step::after {
            content: none;
        }

        .job-timeline .job-activity .step .seq {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #f2f2f2;
            height: 40px;
            width: 40px;
            color: var(--jt-line-color);
            font-weight: bold;
            z-index: 2;
            box-shadow: 0 0 0 4px #fff, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05), 0 1rem 2.25rem rgba(50, 50, 93, 0.03), 0 0.3125rem 1rem rgba(0, 0, 0, 0.12);
        }

        .job-timeline .job-activity .col-form-label {
            padding: 0;
            margin: 0;
            padding-right: .5rem;
            text-align: right;
        }


    .job-timeline > :nth-child(odd of .job-activity) {
        justify-content: flex-end;
    }

        .job-timeline > :nth-child(odd of .job-activity) .step {
            order: 1;
        }

    .job-timeline .sep > * {
        padding: 0;
        height: calc(2rem + (var(--jt-spine-w) * 2));
    }

    .job-timeline .sep .line hr {
        border-top: var(--jt-spine-w) solid var(--jt-line-color);
    }

    .job-timeline .sep .corner {
        display: flex;
        overflow: hidden;
    }

        .job-timeline .sep .corner div {
            border: var(--jt-spine-w) solid var(--jt-line-color);
            width: 100%;
            position: relative;
            border-radius: 15px;
        }

        .job-timeline .sep .corner:first-child div {
            left: calc(50% - (var(--jt-spine-w) / 2));
            top: -50%;
        }

        .job-timeline .sep .corner:last-child div {
            left: calc(-50% + (var(--jt-spine-w) / 2));
            top: calc(50% - var(--jt-spine-w));
        }

    .job-timeline > :nth-child(odd of .job-activity) + .sep .corner:first-child div {
        top: calc(50% - var(--jt-spine-w));
    }

    .job-timeline > :nth-child(odd of .job-activity) + .sep .corner:last-child div {
        top: -50%;
    }

    .job-timeline .job-activity .act .postaction:before {
        font-family: "Font Awesome 5 Pro";
        content: '\f00c';
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        right: 3px;
        bottom: 3px;
        z-index: 1;
        line-height: 1;
        position: absolute;
        color: white;
        font-size: .5rem;
    }

    .job-timeline .job-activity .act .postaction:after {
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-bottom-right-radius: .25rem;
        border-width: 25px 25px 0 0;
        border-color: transparent #009e74 transparent transparent;
        right: 0;
        bottom: 0;
        line-height: 1;
        position: absolute;
    }

[dir=rtl] .job-timeline .sep .corner:first-child div {
    right: calc(50% - (var(--jt-spine-w) / 2));
    left: auto;
}

[dir=rtl] .job-timeline .sep .corner:last-child div {
    right: calc(-50% + (var(--jt-spine-w) / 2));
    left: auto;
}

[dir=rtl] .job-timeline .job-activity .col-form-label {
    padding: 0;
    padding-left: .5rem;
    text-align: left;
}

[dir=rtl] .job-timeline .job-activity .step .seq {
    font-size: 11px;
}

[dir=rtl] .job-timeline .job-activity .act .postaction:before {
    left: 3px;
    right: auto;
}

[dir=rtl] .job-timeline .job-activity .act .postaction:after {
    border-bottom-left-radius: .25rem;
    border-width: 25px 0 0 25px;
    border-color: transparent transparent transparent #009e74;
    right: auto;
    left: 0;
}