.flows4apex-viewer {
  --color-flows-button-green: #52B415;

  /* copied from modeler */
  --color-flows-dialog-background: white;
  --color-flows-dialog-button: #f8f8f8;
  --color-flows-dialog-input: hsl(225, 10%, 97%);
}
/**
 * general
 */
.canvas {
  height: 80vh;
  background-color: #f0f0f0;
}
.bjs-container {
  --default-fill-color: white;
  --default-stroke-color: black;
}
/**
 * dark mode
 */
.FLOWS-DARK {
  --color-flows-dark-background: #2b3035;
  --color-flows-lighter-dark-background: #32383d;

  /* copied from modeler */
  --color-flows-dialog-background: var(--color-flows-lighter-dark-background);
  --color-flows-dialog-button: #282c30;
  --color-flows-dialog-input: #282c30;
}
/**
 * custom colors
 */  
.FLOWS-DARK .canvas {
  background-color: var(--color-flows-dark-background);
}
.FLOWS-DARK .bjs-container {
  --default-fill-color: var(--color-flows-dark-background);
  --default-stroke-color: white;
}
.FLOWS-DARK .bjs-breadcrumbs li:last-of-type span {
  color: white;
}
.FLOWS-DARK .bjs-powered-by {
  color: white !important;
}
.FLOWS-DARK .djs-palette {
  --palette-background-color: #2b3035;
  --palette-entry-color: white;
}
/* Overwrite text color when using bpmn extension */
.djs-visual:not(.reset-bpmn-colors) > *:not([style*="stroke: var(--default-stroke-color);"]) + text {
  --default-stroke-color: black;
}
/* Reset BPMN Colors */
.djs-visual.reset-bpmn-colors rect,
.djs-visual.reset-bpmn-colors circle,
.djs-visual.reset-bpmn-colors polygon,
.djs-visual.reset-bpmn-colors path {
  fill: var(--default-fill-color) !important;
  stroke: var(--default-stroke-color) !important;
}
.djs-visual.reset-bpmn-colors text {
  fill: var(--default-stroke-color) !important;
}
/**
 * Highlighting: Completed
 */
.djs-visual.highlight-completed rect,
.djs-visual.highlight-completed circle,
.djs-visual.highlight-completed polygon,
.djs-visual.highlight-completed path {
  fill: var(--highlight-completed-fill) !important;
}
.djs-visual.highlight-completed rect,
.djs-visual.highlight-completed circle,
.djs-visual.highlight-completed polygon {
  stroke: var(--highlight-completed-border) !important;
}
.djs-visual.highlight-completed text {
  fill: var(--highlight-completed-label) !important;
}
.djs-visual.highlight-completed path {
  stroke: var(--highlight-completed-label) !important;
}
/**
 * Highlighting: Current
 */
.djs-visual.highlight-current rect,
.djs-visual.highlight-current circle,
.djs-visual.highlight-current polygon,
.djs-visual.highlight-current path {
  fill: var(--highlight-current-fill) !important;
}
.djs-visual.highlight-current rect,
.djs-visual.highlight-current circle,
.djs-visual.highlight-current polygon {
  stroke: var(--highlight-current-border) !important;
}
.djs-visual.highlight-current text {
  fill: var(--highlight-current-label) !important;
}
.djs-visual.highlight-current path {
  stroke: var(--highlight-current-label) !important;
}
/**
 * Highlighting: Error
 */
.djs-visual.highlight-error rect,
.djs-visual.highlight-error circle,
.djs-visual.highlight-error polygon,
.djs-visual.highlight-error path {
  fill: var(--highlight-error-fill) !important;
}
.djs-visual.highlight-error rect,
.djs-visual.highlight-error circle,
.djs-visual.highlight-error polygon {
  stroke: var(--highlight-error-border) !important;
}
.djs-visual.highlight-error text {
  fill: var(--highlight-error-label) !important;
}
.djs-visual.highlight-error path {
  stroke: var(--highlight-error-label) !important;
}
/* Context menu */
#context-menu {
  position: absolute;
  
  background-color: var(--color-flows-dialog-background);
  color: var(--default-stroke-color);

  border: 1px solid #888;
}

#context-menu .menu-options {
  list-style: none;
  padding-left: 0;
  margin: 10px;

  font-family: sans-serif;
  font-size: 12px;
  font-weight: normal;
}

#context-menu .menu-option {
  cursor: pointer;
}

#context-menu .menu-option a {
  color: inherit;
  text-decoration: none;
}
/* Disable crosshair cursor when hovering over elements */
.djs-hit, .djs-hit-all {
  cursor: default !important;
}
/* Iteration dialog */
#modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);

  font-family: sans-serif;
}
#modal-content {
  width: 750px;
  height: 500px;

  margin: auto;

  background-color: var(--color-flows-dialog-background);
  border: 1px solid #888;
}
#iteration-title {
  display: flex;
  justify-content: space-between;
  
  margin: 10px;
}
#iteration-title span {
  font-size: 24px;
  color: var(--default-stroke-color);
}
#iteration-title button.fa-times {
  height: 30px;
  width: 30px;

  background-color: var(--color-flows-dialog-button);
  color: var(--default-stroke-color);

  border: 1px solid #ccc;
  border-radius: 2px;

  cursor: pointer;
}
#iteration-title button.fa-times:hover {
  color: var(--color-flows-button-green);
}
#iteration-search {
  margin: 10px;
}
#iteration-search input {
  width: -webkit-fill-available;
  min-height: 20px;
  padding: 10px;
  
  background-color: var(--color-flows-dialog-input);
  color: var(--default-stroke-color);

  border: 1px solid #888;
}
#iteration-list {
  height: 400px;
  overflow-y: auto;
}
#iteration-list table {
  width: 100%;
  
  color: var(--default-stroke-color);

  border-spacing: 10px;
}
#iteration-list th {
  text-align: left;
}
#iteration-list tr.clickable {
  cursor: pointer;
}
/* Breadcrumb */
/* Overwrite default setting of line break */
.bjs-breadcrumbs .bjs-crumb {
  max-width: 400px !important;
}
/* White color for icons inside drilldown buttons */
.bjs-drilldown.fa-list, .bjs-drilldown.fa-external-link {
  color: white;
}
/* Left margin for drilldown buttons and iteration description in breadcrumb */
.bjs-crumb + .bjs-drilldown,
.bjs-crumb.iteration-desc,
.bjs-crumb.iteration-button {
  margin-left: 8px;
}
.bjs-breadcrumbs li:not(:last-child) .bjs-crumb.iteration-desc,
.bjs-breadcrumbs li:not(:last-child) .bjs-crumb.iteration-button {
  color: var(--breadcrumbs-item-color);
  cursor: pointer;
}
.bjs-crumb.iteration-button {
  border: 1px solid var(--breadcrumbs-item-color);
  border-radius: 2px;
  padding: 1px;
}