.timeline {
    width: 100%;
    position: relative;
}

.timeline:before {
    content: '';
    position: absolute;
    top: 2%;
    left: calc(3.8%);
    bottom: 0;
    width: 2px;
    background: var(--secondary);
}

.timeline:after {
    content: "";
    display: table;
    clear: both;
}

.entry {
    clear: both;
    position: relative;
}

.entry .title {
    margin-bottom: .5em;
    position: relative;
}

.entry.completed .title:before,
.entry:not(.completed) .title:before {
    content: '';
    position: absolute;
    border-radius: 100%;
    z-index: 99;
}

.entry:not(.completed) .title:before {
    border: 5px solid var(--primary);
    background-color: var(--secondary);
}

.entry.completed .title:before {
    background-image: url('../images/digital/tick.png');
    border: 2px solid var(--secondary);
    background-size: cover;
    background-position: center;
}

.entry .entrybody {
    margin-bottom: 15px;
    float: right;
    width: 90%;
    border-radius: 4px;
    padding: 10px;
}

/* Task Card CSS */
.timeline-name h6 {
    font-weight: var(--fw-lg);
    font-size: 16px;
    color: var(--secondary);
    margin-top: 0px;
    margin-bottom: 20px;
}

.timeline-main h5 {
    font-weight: var(--fw-md);
    font-size: 14px;
    color: var(--secondary);
    margin-bottom: 10px;
}

.timeline-main h5 i {
    font-size: 5px;
}

.timeline-main h6 {
    font-weight: var(--fw-sm);
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 0px;
}

@media screen and (min-width: 1098px) {

    .entry.completed .title:before,
    .entry:not(.completed) .title:before {
        width: 40px;
        height: 40px;
        top: 1%;
        left: 1.3%;
    }
}

@media screen and (min-width: 767px) and (max-width: 1098px) {

    .entry.completed .title:before,
    .entry:not(.completed) .title:before {
        width: 25px;
        height: 25px;
        top: 1%;
        left: 1.3%;
    }
}

@media screen and (max-width: 767px) {

    .entry.completed .title:before,
    .entry:not(.completed) .title:before {
        width: 25px;
        height: 25px;
        top: 1%;
        left: 1%;
    }
}