/* styles.css */

    .gantt-container {
        width: 100%;
        height: calc(100% - 15px); /* Set height for vertical scrolling */
        overflow: auto; /* Enable both horizontal and vertical scrolling */
        position: relative;
    }

    /* Gantt Chart Content */
    .gantt-content {
        display: flex;
        width: max-content;
    }

    /* Sticky First Column (Task Names) */
    .gantt-task-names {
        min-width: 120px;
        display: flex;
        flex-direction: column;
        position: sticky;
        left: 0; /* Stick to the left of the container */
        background-color: #fff;
        z-index: 1; /* Keep it below the sticky header */
        border-right: 1px solid white;
    }

    .gantt-task-name {
        background-color: #e0e0e0;
        border-bottom: 1px solid white;
        box-sizing: border-box;
        height: 30px; /* Set the row height */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 8pt;
    }

    /* Sticky Header Row (Dates) */
    .gantt-header {
        display: flex;
        position: sticky;
        top: 0; /* Stick to the top of the container */
        background-color: #f1f1f1;
        z-index: 0; /* Keep it above other content */
        flex-direction: column;
    }

    .gantt-date-unit {
        width: 150px; /* Set width of date columns */
        text-align: center;
        border-right: 1px solid #bbb;
        box-sizing: border-box;
        height: 40px;
    }

    /* Gantt Chart Tasks */
    .gantt-chart {
        display: flex;
        flex-direction: column;
        width: max-content; /* Allow the width to grow based on content */
    }

    /* Rows */
    .gantt-person-row {
        display: flex;
        height: 30px; /* Match task name height */
        border-bottom: 1px solid white;
        background: repeating-linear-gradient(127deg, whitesmoke, whitesmoke 10px, ghostwhite 10px, ghostwhite 20px);
    }

    #route_gantt_event_name {
        background-color: darkcyan;
        font-size: 8pt;
        color: white;
    }

    /* Individual Tasks */
    .gantt-task {
        height: 30px;
        color: white;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 7pt;
        border-right: 1px solid white;
        cursor: pointer;
        border-bottom: 1px solid white;
    }

    .gantt-spacer {
        height: 29px;
        color: white;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 7pt;
        border-right: 1px solid lightgray;
        cursor: pointer;
    }