.timeline{

    padding: 1rem 0;

    .timeline-item{
        //border: 1px solid rgb(248, 248, 248);
        margin: 0.5rem 0;
        .timeline-date{
            font-weight: 600;
            text-align: center;
            //background-color: rgb(238, 238, 238);
            //padding: 0.2rem;
            border-radius: 0.1rem;
            .date{
                color: black;
                font-size: 0.8rem;
            }
            .time{
                color: grey;
                font-size: 0.7rem;
            }
        }
        .timeline-icon{
            background-color: $primary-color;
            color: white;
            padding: 0.5rem;
            border-radius: 50%;
            font-size: 1rem;
        }
        .timeline-line{
            border-left: 3px solid rgb(235, 235, 235);
        }
        .timeline-duration {
            text-align: center;
            .days{
                color: rgb(0, 0, 0);
                font-weight: 600;
            }
        }

        .timeline-vine{
            max-width: 2rem;
            text-align: center;
            .dot{
                padding: 0.3rem;
                background-color: rgb(201, 201, 201);
                border-radius: 50%;
                width: 0.3rem;
                height: 0.3rem;
                margin: auto;
                margin-top: 0.2rem;
                border: 2px solid white;
            }
            .line{
                background-color: rgb(226, 225, 225);
                width: 0.1rem;
                margin: auto;
                margin-top: 0;
                height: 100%;
            }
        }

        .timeline-content
        {

            .timeline-content-title{
                font-size: 0.9rem;
            }
            .timeline-note{
                background-color: rgb(255, 249, 230);
                padding: 0.1rem 0.25rem;
                border-radius: 0.2rem;
                font-size: 0.9rem;
            }
        }

        &.timeline-item-event{
            //background-color: rgb(255, 255, 255);
            .timeline-text{
                font-size: 0.8rem;
                font-weight: 400;
            }
            .timeline-wine{
                .dot{
                    background-color: rgb(167, 167, 167);
                }
            }
        }

        &.timeline-item-note{
            border-radius: 0.5rem;
            text-align: justify;
            text-justify: inter-word;
            .timeline-content-text{

                background-color: rgb(255, 249, 230);
                padding: 0.2rem 0.4rem;
                border-radius: 0.2rem;
                font-size: 0.8rem;
            }
            .timeline-vine{
                .dot {
                    background-color: rgb(255, 187, 41);
                }
            }

        }
        &.timeline-item-warning{
            .timeline-date{
                background-color: rgb(255, 99, 125);
                .date{
                    color: white;
                }
            }
            .timeline-content-title{
                color: red;
                font-weight: 600;
                font-size: 0.9rem;
            }
            .dot {
                background-color: rgb(255, 84, 84);
            }
        }

        &:last-of-type{
            .timeline-vine .line{
                display: none;
            }
        }
    }

}
