.safari_timeLine1, .safari_timeLine2{
        /*margin-right: 350px;*/
        margin: 0 auto; 
        padding: 0 15px; 
    }
    .color-line-event, .color-line-event-month{
        background-color: #f2f2f2; 
    }
    .event-name div {
        position: absolute;
        overflow: visible;
        white-space: nowrap; 
        margin-top: -15px;
        text-align: center;
        width: 100%;
        height: 100%;
        z-index: 10; 
        transform: translateY(-50%);
    }
    .container_timeline {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow-x: auto;
    }
    table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 10px;
        min-width: 1200px;
        margin-left: 5em;
        margin-top: 5em !important;
        margin: 0 auto;
        position: relative;
    }
    @media screen and (max-width: 1230px) {
        table {
            margin-left: 25em;
        }
    }
    @media screen and (max-width: 950px) {
        table {
            margin-left: 30em;
        }
    }
    @media screen and (max-width: 850px) {
        table {
            margin-left: 35em;
        }
    }
    @media screen and (max-width: 768px) {
        table {
            margin-left: 38em;
        }
    }
    @media screen and (max-width: 700px) {
        table {
            margin-left: 42em;
        }
    }
    @media screen and (max-width: 660px) {
        table {
            margin-left: 45em;
        }
    }
    @media screen and (max-width: 640px) {
        table {
            margin-left: 48em;
        }
    }
    @media screen and (max-width: 550px) {
        table {
            margin-left: 50em;
        }
    }
    @media screen and (max-width: 470px) {
        table {
            margin-left: 52em;
        }
    }
    @media screen and (max-width: 440px) {
        table {
            margin-left: 55em;
        }
    }
    @media screen and (max-width: 425px) {  
        table {
            margin-left: 60em;
        }
    }
    @media screen and (max-width: 400px) {
        table {
            margin-left: 60em;
        }
    }
    @media screen and (max-width: 390px) {
        table {
            margin-left: 60em;
        }
    }
    @media screen and (max-width: 370px) {
        table {
            margin-left: 60em;
        }
    }
    th, td {
        padding: 10px;
        text-align: center;
        position: relative;
    }
    .month {
        color: #005770;
        font-size: 20px;
        font-weight: bold;
    
    }
    .month-separator{
        text-align: center;

    }
    .month-separator-div1{
        background-color: #f2f2f2; 
        text-align: center;
        color: #f2f2f2; 
        width:4px;
        height:40px;
        margin:auto;
        margin-bottom: -30px;
        border-top-left-radius: 2px; 
        border-top-right-radius: 2px; 
    }
    .month-separator-div2{
        background-color: #f2f2f2; 
        text-align: center;
        color: #f2f2f2; 
        width:4px;
        height:40px;
        margin:auto;
        margin-top: -30px;
        border-bottom-left-radius: 2px; 
        border-bottom-right-radius: 2px; 
    }
    .blue-cell {
        background-color: #07a8e1; 
        color: white; 
        position: relative;
    }  
    .green-cell {
        background-color: #00a9b9;
        color: white; 
        position: relative;
    } 
    .tr-line {
        padding-top: 7px; 
        padding-bottom: 7px; 
        text-align: center;
    }
    .event-name {
        text-align: center;
        position: relative;

    }  
    .r-rounded-border {
        border-top-right-radius: 10px; 
        border-bottom-right-radius: 10px;
    }
    .l-rounded-border {
        border-top-left-radius: 10px; 
        border-bottom-left-radius: 10px; 
    }
    tr.tr-line td {
        padding-top: 10px; 
        padding-bottom: 5px; 
        text-align: center;
    }
    .text_tr {
        padding-top: 40px; 
        padding-bottom: 5px; 
    }
    .event_text {
        padding-top: 10px; 
        padding-bottom: 10px; 
    }


    tr.tr-line-blue td {
        border-top-left-radius: 5px; 
        border-bottom-left-radius: 5px; 
    }


    tr.tr-line-green td {
        border-top-right-radius: 5px; 
        border-bottom-right-radius: 5px; 
    }
    .animated-row {
        opacity: 0;
        transform: translateX(100%); 
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .event-first-month{
        border-top-left-radius: 20px; 
        border-bottom-left-radius: 20px; 
    }
    .event-last-month{
        border-top-right-radius: 20px; 
        border-bottom-right-radius: 20px; 
    }
    .eye-green{
        background-color: #00a9b9; /* Cambia este color al color "ojo" deseado */
        height: 95%; /* Altura mínima (ajusta según tus necesidades) */
        width: 30%; /* Ancho mínimo (ajusta según tus necesidades) */
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute; /* Posición absoluta */
        top: 50%; /* Centra verticalmente */
        left: 50%; /* Centra horizontalmente */     
        transform: translate(-50%, -50%);/* Centra perfectamente en la celda */
        border-radius: 20px; 
        z-index: 5;
    }
    .eye-blue{
        background-color: #07a8e1; /* Cambia este color al color "ojo" deseado */
        height: 95%; /* Altura mínima (ajusta según tus necesidades) */
        width: 30%; /* Ancho mínimo (ajusta según tus necesidades) */
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute; /* Posición absoluta */
        top: 50%; /* Centra verticalmente */
        left: 50%; /* Centra horizontalmente */
        transform: translate(-50%, -50%); /* Centra perfectamente en la celda */   
        border-radius: 20px; 
        z-index: 5;
    }
    td {
        position: relative; /* Asegura que la celda sea un punto de referencia para los elementos hijos absolutos */
    }