.timeline-wraper {
    display: flex;
    height: 162px;
    margin: 50px 12px 0px 24px;
}

.timeline-wraper .timeline {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 76px;
}

.milestone {
    transition-timing-function: var(--standard-transition);
    transition: width 0.2s, box-shadow 0.2s, transform 0.2s;
    position: relative;
    height: 76px;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    background-color: var(--primary);
    /*border: 2px solid var(--on-primary-container);*/
    color: var(--on-primary);
    box-shadow: var(--elevation-1);
}

.milestone-title {
    display: inline-block;
    height: 56px;
    margin: 8px 8px 8px 8px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.milestone-title .title {
    display: none;
}

.sub-milestone-wraper {
    height: 58px;
    margin-top: 68px;
    position: absolute;
    display: flex;
    flex-direction: row;
}

.sub-milestone-wraper .milestone {
    transition: 0.2s;
    transition-timing-function: var(--standard-transition);
    position: relative;
    height: 54px;
    min-height: 46px;
    box-shadow: var(--elevation-2);
    background-color: var(--tertiary);
}

.milestone-connector {
    position: relative;
    top: -50%;
    height: 76px;
    width: 16px;
}

.first-milestone-connector {
    position: relative;
    top: -50%;
    height: 76px;
    width: 16px;
}

.sub-milestone-connector {
    position: relative;
    margin-top: 28px;
    height: 48px;
    width: 16px;
}

.timeline-wraper .marker {
    transition-timing-function: var(--standard-transition);
    transition: 0.2s;
    padding: 4px 8px 4px 8px;
    border-radius: 8px;
    position: absolute;
    font-weight: 500;
    top: -48px;
    transform: translateX(-70%);
    background-color: var(--secondary-container);
    color: var(--on-secondary-container);
    box-shadow: var(--elevation-1)
}

.marker-child {
    transition-timing-function: var(--standard-transition);
    transition: 0.2s;
    padding: 4px 8px 4px 8px;
    border-radius: 8px;
    position: absolute;
    font-weight: 500;
    bottom: -40px;
    transform: translateX(-68%);
    background-color: var(--secondary-container);
    color: var(--on-secondary-container);
    box-shadow: var(--elevation-1);
}


/* Vertical Timeline */

.vertical-timeline-wraper .timeline {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vertical-timeline-wraper {
    display: flex;
    justify-content: center;
    margin-bottom: 128px;
}

.vertical-timeline-wraper .connection-wraper {
    position: relative;
    align-self: flex-start;
    margin-left: 32px;
    height: 44px;
}

.vertical-timeline-wraper .sub-milestone-wraper {
    align-self: flex-end;
    margin-top: 60px;
}

.vertical-timeline-wraper .marker {
    position: absolute;
    transition-timing-function: var(--standard-transition);
    transition: 0.2s;
    padding: 4px 8px 4px 8px;
    border-radius: 8px;
    font-weight: 500;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--secondary-container);
    color: var(--on-secondary-container);
    box-shadow: var(--elevation-1)
}

.vertical-milestone-connector {
    height: 100%;
    width: 16px;
}