:root {
    --primary-color: #6c6c6c;
    --background-color: #111;
    --font: sans-serif;
}

* {
    margin: 0;
    padding: 0;
}
/*
        body {
            background: var(--background-color);
            font-family: var(--font);
            display: flex;
            justify-content: center;
        }*/

/* Timeline Container */
.timeline {
    background: var(--primary-color);
    margin: 20px auto;
    padding: 20px;
}

/* Card container */
.timeline-card {
    position: relative;
    max-width: 100%;
}

    /* setting padding based on even or odd */
    .timeline-card:nth-child(odd) {
        padding: 30px 0 30px 30px;
    }

    .timeline-card:nth-child(even) {
        padding: 30px 30px 30px 0;
    }
    /* Global ::before */
    .timeline-card::before {
        content: "";
        position: absolute;
        width: 50%;
        border: solid orangered;
    }

    /* Setting the border of top, bottom, left */
    .timeline-card:nth-child(odd)::before {
        left: 0px;
        top: -4.5px;
        bottom: -4.5px;
        border-width: 5px 0 5px 5px;
        border-radius: 50px 0 0 50px;
    }

    /* Setting the border of top, bottom, right */
    .timeline-card:nth-child(even)::before {
        right: 0;
        top: 0;
        bottom: 0;
        border-width: 5px 5px 5px 0;
        border-radius: 0 50px 50px 0;
    }

    /* Removing the border if it is the first card */
    .timeline-card:first-child::before {
        border-top: 0;
        border-top-left-radius: 0;
    }

    /* Removing the border if it is the last card  and it's odd */
    .timeline-card:last-child:nth-child(odd)::before {
        border-bottom: 0;
        border-bottom-left-radius: 0;
    }

    /* Removing the border if it is the last card  and it's even */
    .timeline-card:last-child:nth-child(even)::before {
        border-bottom: 0;
        border-bottom-right-radius: 0;
    }

/* Information about the timeline */
.info {
    display: flex;
    flex-direction: column;
    background: #ababab;
    color: #111;
    border-radius: 10px;
    padding: 10px;
}

.info-tile {
    display: flex;
    flex-direction: column;
    background: #ababab;
    color: #111;
    border-radius: 10px;
    padding: 10px;
}

.title-tile {
    color: orangered;
    position: relative;
    margin: 0px !important;
}

/* .title-tile::before {
                content: "";
                position: absolute;
                width: 10px;
                height: 10px;
                background: white;
                border-radius: 999px;
                border: 3px solid orangered;
            }*/

/* Title of the card */
.title {
    color: orangered;
    position: relative;
    margin: 0px !important;
}

.timeline-p {
    margin: 0 !important;
}

/* Timeline dot  */
.title::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 999px;
    border: 3px solid orangered;
}

/* text right if the card is even  */
.timeline-card:nth-child(even) > .info > .title {
    text-align: right;
}

/* setting dot to the left if the card is odd */
.timeline-card:nth-child(odd) > .info > .title::before {
    left: -45px;
}

/* setting dot to the right if the card is odd */
.timeline-card:nth-child(even) > .info > .title::before {
    right: -45px;
}


.divInfo {
    position: absolute !important;
}

.TextClass {
    width: 150px;
    position: relative;
    /* transform: rotate(-60deg);*/
    background: #1a4a8c;
    color: #fff;
    padding: 5px;
    font-size: 1.2rem;
}