:root {
    --color-default-fill: white;
    --color-already-executed: #aea3a3;
    --color-predicted-late: orange;
    --color-predicted-on-time: #67d567;
    --color-running: #9c9cef;
    --stroke-predicted: 0.18rem;
}

/* ================================================================================================================== */
/* ALREADY EXECUTED */
/* ================================================================================================================== */

    /* parallel gateway icon */
.bpmn-parallel-gateway.state-already-executed > path:nth-child(2),
    /* message flow arrow */
.bpmn-message-flow.state-already-executed > path:nth-child(4),
    /* sequence flow arrow */
.bpmn-sequence-flow.state-already-executed > path:nth-child(3) {
    fill: var(--color-already-executed);
}

    /* message flow start marker */
.bpmn-message-flow.state-already-executed > ellipse,
    /* message flow icon */
.bpmn-message-flow-icon.state-already-executed > *,
    /* sequence/message flow line and arrow (end marker) */
.bpmn-type-flow.state-already-executed > path,
    /* task */
.bpmn-type-task.state-already-executed > rect,
    /* parallel gateway stroke and icon */
.bpmn-parallel-gateway.state-already-executed > path,
    /* message event icon */
.bpmn-event-def-message.state-already-executed > rect,
.bpmn-event-def-message.state-already-executed > path,
    /* event */
.bpmn-type-event.state-already-executed > * {
    filter: blur(0.125rem);
    stroke: var(--color-already-executed);
}

    /* end event center circle */
.bpmn-type-event.state-already-executed > ellipse:nth-child(2) {
    fill: var(--color-already-executed);
}

    /* labels (the selector applies to all div, not the only one that contains text, but this is ok.
     Use important to override the color set inline in the style attribute of the label div */
.bpmn-label.state-already-executed > g div {
    color: var(--color-already-executed) !important;
    /*or use opacity if we want to be able to read labels*/
    filter: blur(0.0625rem);
}


/* ================================================================================================================== */
/* INFO */
/* ================================================================================================================== */

/* only the surrounding path of gateway, otherwise the diamond is darker (double fill) */
.bpmn-type-gateway.state-running > path:nth-child(1),
.bpmn-type-event.state-running > ellipse,
/* envelope of the message event */
.bpmn-event-def-message.state-running > rect {
    fill: var(--color-running);
}

/*apply shadow on hover*/
.bpmn-type-event.state-running:hover,
.bpmn-type-gateway.state-running:hover {
    filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0));
}


/* ================================================================================================================== */
/* PREDICTED LATE */
/* ================================================================================================================== */

/*for filter drop-shadow: https://css-tricks.com/adding-shadows-to-svg-icons-with-css-and-svg-filters/*/
/*for pulse animation: https://reactgo.com/css-pulse-animation/*/

/* task */
.bpmn-task.state-predicted-late > rect {
    fill: var(--color-predicted-late);
    animation: pulse-animation 0.8s infinite alternate;
}

@keyframes pulse-animation {
    0% {
        fill-opacity: 100%;
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.8));
    }
    100% {
        fill-opacity: 90%;
        filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0));
    }
}

    /* message flow start marker */
.bpmn-message-flow.path-predicted-late > ellipse,
    /* sequence flow arrow */
.bpmn-sequence-flow.path-predicted-late > path:nth-child(3) {
    fill: var(--color-predicted-late);
}

    /* sequence/message flow line and arrow (end marker) */
.bpmn-type-flow.path-predicted-late > path,
    /* message flow start marker */
.bpmn-message-flow.path-predicted-late > ellipse,
.bpmn-type-gateway.path-predicted-late > path:nth-child(1),
.bpmn-type-task.path-predicted-late > rect,
.bpmn-type-event.path-predicted-late > ellipse {
    stroke: var(--color-predicted-late);
    stroke-width: var(--stroke-predicted);
}

.bpmn-type-gateway.path-predicted-late > path:nth-child(1),
.bpmn-event-based-gateway.path-predicted-late > ellipse,
.bpmn-event-based-gateway.path-predicted-late > path:nth-child(7),
.bpmn-event-def-message.path-predicted-late > rect,
.bpmn-event-def-message.path-predicted-late > path,
.bpmn-event-def-timer.path-predicted-late > path,
.bpmn-type-event.path-predicted-late > ellipse {
    stroke: var(--color-predicted-late);
    fill: var(--color-default-fill);
}

/* labels (the selector applies to all div, not the only one that contains text, but this is ok.
 Use important to override the color set inline in the style attribute of the label div */
.bpmn-label.path-predicted-late > g div {
    color: var(--color-predicted-late) !important;
    font-weight: bold;
}

/* ================================================================================================================== */
/* PREDICTED ON TIME */
/* ================================================================================================================== */

.bpmn-type-task.state-predicted-on-time > rect {
    fill: var(--color-predicted-on-time);
}

/*apply shadow on hover*/
.bpmn-type-task.state-predicted-on-time:hover {
    filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0));
}

/* message flow start marker */
.bpmn-message-flow.path-predicted-on-time > ellipse,
    /* sequence flow arrow */
.bpmn-sequence-flow.path-predicted-on-time > path:nth-child(3) {
    fill: var(--color-predicted-on-time);
}

/* message flow icon */
.bpmn-message-flow-icon.path-predicted-on-time > * {
    stroke: var(--color-predicted-on-time);
}

.bpmn-type-gateway.path-predicted-on-time > path:nth-child(1),
/* sequence/message flow line and arrow (end marker) */
.bpmn-type-flow.path-predicted-on-time > path,
    /* message flow start marker */
.bpmn-message-flow.path-predicted-on-time > ellipse,
.bpmn-type-task.path-predicted-on-time > rect,
.bpmn-type-event.path-predicted-on-time > ellipse {
    stroke: var(--color-predicted-on-time);
    stroke-width: var(--stroke-predicted);
}

.bpmn-type-gateway.path-predicted-on-time > path:nth-child(1),
.bpmn-event-based-gateway.path-predicted-on-time > ellipse,
.bpmn-event-based-gateway.path-predicted-on-time > path:nth-child(7),
.bpmn-event-def-message.path-predicted-on-time > rect,
.bpmn-event-def-message.path-predicted-on-time > path,
.bpmn-event-def-timer.path-predicted-on-time > path,
.bpmn-type-event.path-predicted-on-time > ellipse {
    stroke: var(--color-predicted-on-time);
    fill: var(--color-default-fill);
}

/* labels (the selector applies to all div, not the only one that contains text, but this is ok.
 Use important to override the color set inline in the style attribute of the label div */
.bpmn-label.path-predicted-on-time > g div {
    color: var(--color-predicted-on-time) !important;
    font-weight: bold;
}