/* This is the CSS used in the demo */
smart-gantt-chart {
    border-radius: 8px;
}


/* smart-gantt-chart .task .smart-timeline-task-fill {
    border-radius: 4px;
  } */

.smart-gantt-chart .smart-task-connection {
    border-color: transparent;
    stroke: var(--smart-gantt-chart-timeline-task-connection-color);
    fill: transparent;
    color: transparent;
}

.smart-gantt-chart .smart-task-connection[hover] {
    border-color: var(--smart-gantt-chart-timeline-task-connection-color-hover);
    background-color: var(--smart-surface);
    border-radius: 50%;
    stroke: var(--smart-gantt-chart-timeline-task-connection-color-hover);
    color: var(--smart-surface-color);
    z-index: 1;
}

.smart-gantt-chart .smart-task-connection-svg {
    stroke: inherit;
    fill: inherit;
    stroke-width: var(--smart-gantt-chart-timeline-task-connection-width);
    pointer-events: all;
}

/* .smart-gantt-chart .smart-task-connection-svg:hover{
    stroke: red;
  } */

.smart-gantt-chart .smart-task-connection-svg-arrow {
    stroke: var(--smart-gantt-chart-timeline-task-connection-color);
    fill: var(--smart-gantt-chart-timeline-task-connection-color);
    stroke-width: var(--smart-gantt-chart-timeline-task-connection-width);
}

.smart-gantt-chart .smart-task-connection-hover>span {
    /* display: none; */
    /* color:  var(--smart-gantt-chart-timeline-task-connection-color); */
    /* color: transparent; */
}

.smart-gantt-chart .smart-task-connection-hover:hover>span {
    /* display: block;
    color: inherit; */
}

.smart-gantt-chart .smart-timeline-task.milestone .smart-timeline-task-label {
    color: var(--smart-gantt-chart-project-label-color);
}