:root {
    /* JointJS Palette */
    --jj-color1: #2665ed;
    --jj-color2: #131e29;
    --jj-color3: #dde6ed;
    --jj-color4: #f6f740;
    --jj-color5: #0075f2;
    --jj-color6: #1a2938;
    --jj-color7: #cad8e3;
    --jj-color8: #4fb91a;
    --jj-color9: #bd1b2b;
    /* Dark Theme */
    --step-stroke-color: var(--jj-color1);
    --step-fill-color: var(--jj-color2);
    --step-text-color: var(--jj-color3);
    --decision-stroke-color: var(--jj-color3);
    --decision-fill-color: var(--jj-color2);
    --decision-text-color: var(--jj-color3);
    --start-stroke-color: var(--jj-color8);
    --start-fill-color: var(--jj-color2);
    --start-text-color: var(--jj-color8);
    --exception-stroke-color: var(--jj-color9);
    --exception-fill-color: var(--jj-color2);
    --exception-text-color: var(--jj-color9);
    --flow-stroke-color: var(--jj-color1);
    --flow-stroke-color-exception: var(--jj-color9);
    --flow-stroke-color-default-path: var(--jj-color8);
    --flow-label-stroke-color: var(--jj-color2);
    --flow-label-fill-color: var(--jj-color1);
    --flow-label-text-color: var(--jj-color3);
    --flow-label-stroke-color-default-path: var(--jj-color2);
    --flow-label-fill-color-default-path: var(--jj-color8);
    --flow-label-text-color-default-path: var(--jj-color3);
    --flow-selection-color: var(--jj-color6);
    --frame-color: var(--jj-color4);
    --background-color: var(--jj-color2);
    --switch-color: var(--jj-color3);
    --switch-background-color: var(--jj-color1);
    --logo-color: var(--jj-color3);
}

/* Light Theme */
.light-theme {
    --step-stroke-color: var(--jj-color1);
    --step-fill-color: var(--jj-color3);
    --step-text-color: var(--jj-color2);
    --decision-stroke-color: var(--jj-color2);
    --decision-fill-color: var(--jj-color3);
    --decision-text-color: var(--jj-color2);
    --start-stroke-color: var(--jj-color1);
    --start-fill-color: var(--jj-color3);
    --start-text-color: var(--jj-color1);
    --exception-stroke-color: var(--jj-color9);
    --exception-fill-color: var(--jj-color3);
    --exception-text-color: var(--jj-color9);
    --flow-stroke-color: var(--jj-color1);
    --flow-stroke-color-exception: var(--jj-color9);
    --flow-stroke-color-default-path: var(--jj-color8);
    --flow-label-stroke-color: var(--jj-color3);
    --flow-label-fill-color: var(--jj-color1);
    --flow-label-text-color: var(--jj-color3);
    --flow-label-stroke-color-default-path: var(--jj-color3);
    --flow-label-fill-color-default-path: var(--jj-color8);
    --flow-label-text-color-default-path: var(--jj-color2);
    --flow-selection-color: var(--jj-color7);
    --frame-color: var(--jj-color5);
    --background-color: var(--jj-color3);
    --switch-color: var(--jj-color3);
    --switch-background-color: var(--jj-color2);
    --logo-color: var(--jj-color2);
}

/* Font */
@font-face {
    font-family: "PPFraktionSans";
    font-style: normal;
    font-weight: 300;
    src: url("https://assets.codepen.io/7589991/PPFraktionSans-Regular.woff") format("woff");
}
@font-face {
    font-family: "PPFraktionSans";
    font-style: italic;
    font-weight: 300;
    src: url("https://assets.codepen.io/7589991/PPFraktionSans-RegularItalic.woff") format("woff");
}
@font-face {
    font-family: "PPFraktionSans";
    font-style: normal;
    font-weight: 600;
    src: url("https://assets.codepen.io/7589991/PPFraktionSans-Bold.woff") format("woff");
}
/* Flowchart */
.jj-start-body {
    fill: var(--start-fill-color);
    stroke: var(--start-stroke-color);
}

.jj-start-text {
    fill: var(--start-text-color);
}

.jj-exception-body {
    fill: var(--exception-fill-color);
    stroke: var(--exception-stroke-color);
}

.jj-exception-text {
    fill: var(--exception-text-color);
}

.jj-step-body {
    fill: var(--step-fill-color);
    stroke: var(--step-stroke-color);
}

.jj-step-text {
    fill: var(--step-text-color);
}

.jj-decision-body {
    fill: var(--decision-fill-color);
    stroke: var(--decision-stroke-color);
    stroke-width: 3;
}

.jj-decision-text {
    fill: var(--decision-text-color);
}

.jj-flow-line {
    stroke: var(--flow-stroke-color);
    stroke-width: 1;
}

.jj-flow-line-exception {
    stroke: var(--flow-stroke-color-exception);
    stroke-width: 1;
}

.jj-flow-line-default-condition-path {
    stroke: var(--flow-stroke-color-default-path);
    stroke-width: 1;
}

.jj-flow-outline {
    stroke: var(--background-color);
    stroke-width: calc(calc(var(--flow-spacing) * 2) + 1px);
}

.jj-flow-label-body {
    stroke: var(--flow-label-stroke-color);
    fill: var(--flow-label-fill-color);
    stroke-width: calc(var(--flow-spacing));
}

.jj-flow-label-text {
    fill: var(--flow-label-text-color);
}

.jj-flow-arrowhead {
    stroke: var(--flow-stroke-color);
    fill: var(--flow-stroke-color);
}

.jj-flow-arrowhead-exception {
    stroke: var(--flow-stroke-color-exception);
    fill: var(--flow-stroke-color-exception);
}

.jj-flow-arrowhead-default-condition-path {
    stroke: var(--flow-stroke-color-default-path);
    fill: var(--flow-stroke-color-default-path);
}

.jj-frame {
    fill: var(--frame-color);
}

.jj-flow-tools circle {
    stroke: var(--frame-color);
    fill: var(--background-color);
    stroke-width: 2;
}

.jj-flow-tools rect {
    stroke: var(--frame-color);
}

.jj-flow-selection {
    stroke: var(--flow-selection-color);
    stroke-width: 20px;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: none;
}

.workflow-canvas {
    position: absolute;
    inset: 0 0 0 0;
}

/* Theme toggle */
.theme-switch {
    width: 70px;
    height: 30px;
    background: var(--switch-background-color);
    border-radius: 50px;
    position: absolute;
    display: inline-block;
    right: 16px;
    top: 16px;
}
.theme-switch .switch {
    width: 24px;
    height: 24px;
    background: var(--switch-color);
    border-radius: 100%;
    position: absolute;
    top: 3px;
    left: 4px;
    transition: 0.5s all ease;
}
.theme-switch .light-icon {
    position: absolute;
    top: 5px;
    left: 6px;
}
.theme-switch .dark-icon {
    position: absolute;
    top: 5px;
    right: 6px;
}

.light-theme .theme-switch .switch {
    transform: translateX(37px);
}

.jj-flow-label-body-default-path {
    stroke: var(--flow-label-stroke-color-default-path);
    fill: var(--flow-label-fill-color-default-path);
    stroke-width: calc(var(--flow-spacing));
}