:root {
    --dhx-gantt-base-colors-icons: #66666600;
    --gantt-arrow-color: #66666600;
    --gantt-arrow-hover-color: #bb492f;
    --gantt-arrow-selected-color: #ff4444;
}

/* Gantt */
        .gantt-container {
            margin: 20px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            height: 600px;
        }
        .task-form {
            margin: 20px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }
        .table td {
            padding: 4px !important;
            vertical-align: middle;
        }
        .form-control {
            padding: 2px 6px;
            height: 30px;
        }
        .critical-task {
            background-color: #ff4444 !important;
            color: white !important;
        }
        .non-critical-task {
            background-color: #4CAF50 !important;
            color: white !important;
        }
        #gantt_here {
            height: 100%;
            width: 100%;
        }
        .weekend {
            background-color: #f4f7f4 !important;
        }
        .gantt_task_cell.weekend {
            background-color: #f4f7f4 !important;
        }
        .table-secondary {
            background-color: #e9ecef !important;
        }
        .text-end {
            text-align: right !important;
        }
        .text-center {
            text-align: center !important;
        }
        .gantt_grid_scale .gantt_grid_head_cell,
        .gantt_task .gantt_task_scale .gantt_scale_cell {
            font-weight: bold;
            font-size: 12px;
            color: #333;
        }
        .gantt_task_line {
            border-radius: 3px;
            background-color: #4CAF50;
        }
        .gantt_task_link.start_to_start .gantt_line_wrapper div {
            background-color: #666666;
        }
        .gantt_task_link.finish_to_start .gantt_line_wrapper div {
            background-color: #666666;
        }
        .gantt_task_link.finish_to_finish .gantt_line_wrapper div {
            background-color: #666666;
        }
        .task-name {
            font-weight: 500;
            color: #333;
            background-color: transparent;
            border: 1px solid #ddd;
        }
        .task-name:focus {
            background-color: #fff;
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        }
        .task-name:hover:not(:focus) {
            background-color: #f8f9fa;
        }
        .task-link {
            stroke: #666666;
        }
        .gantt_tooltip {
            font-size: 12px;
            line-height: 1.4;
            padding: 10px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        /* Style pour les lignes alternées */
        .gantt_row_odd {
            background-color: #f8f9fa !important;
        }
        /* Appliquer le style alterné aussi à la timeline */
        .gantt_task_row.gantt_row_odd {
            background-color: #f8f9fa !important;
        }
        /* Style pour la sélection */
        .gantt_row_odd.gantt_selected,
        .gantt_row.gantt_selected,
        .gantt_task_row.gantt_selected {
            background-color: #e9ecef !important;
        }
        /* Style pour le survol */
        .gantt_row:hover,
        .gantt_task_row:hover {
            background-color: #e9ecef !important;
        }
        /* Style pour la grille */
        .gantt_grid {
            border-right: 1px solid #ddd;
        }
        .gantt_grid_scale {
            background-color: #f8f9fa;
            border-bottom: 1px solid #ddd;
        }
        .gantt_grid_head_cell {
            font-weight: bold;
            color: #333;
        }
        .gantt_grid_data {
            background-color: #fff;
        }
        .gantt_task_content {
            color: #fff;
        }
        .gantt_side_content {
            color: #333;
            font-size: 12px;
            margin-left: 15px;
        }
        /* Style pour les lignes alternées du tableau */
        .table tbody tr:nth-child(odd) {
            background-color: #f8f9fa;
        }
        .table tbody tr:hover {
            background-color: #e9ecef;
        }