.webform-workflow-value > .webform-workflow-state-label {
  margin-bottom: 0.3em;
}

.webform-workflow-state-label.with-color {
  display: inline-block;
  padding: 0.3em 0.5em;
  border-radius: 0.3em;
  font-weight: bold;
}

/* Dealing with Mermaid styling */

.mermaid .nodes .node {
  font-weight: normal;
}

.webform-workflow-state-label.with-color.node rect {
  fill: unset !important;
  stroke: unset !important;
}

/* Filters */

.webform_workflows_element_filter_states .chosen-choices li.search-choice {
  background-image: none !important;
}

select.webform_workflows_element_filter_states > option.clear-webform-color {
  background-color: #fff !important;
}

/* DEFAULT COLORS BELOW */
/* If providing custom color classes, always provide:
    background-color, fill, color, and stroke,
  to work across normal display and diagrams. */
.webform-workflow-color-blue {
  color: #2b4d7a !important;
  background-color: #cde3fa !important;
  fill: #cde3fa;
  stroke: #2b4d7a;
}

.webform-workflow-color-blue-dark {
  color: #fff !important;
  background-color: #2b4d7a !important;
  fill: #2b4d7a;
  stroke: #fff;
}

.webform-workflow-color-yellow {
  color: #6c530f !important;
  background-color: #fff68a !important;
  fill: #fff68a;
  stroke: #6c530f;
}

.webform-workflow-color-yellow-dark {
  color: #fff !important;
  background-color: #6e6420 !important;
  fill: #6e6420;
  stroke: #fff;
}

.webform-workflow-color-orange {
  color: #6a2900 !important;
  background-color: #ffbe7e !important;
  fill: #ffbe7e;
  stroke: #6a2900;
}

.webform-workflow-color-orange-dark {
  color: #fff !important;
  background-color: #b85c00 !important;
  fill: #b85c00;
  stroke: #fff;
}

.webform-workflow-color-red {
  color: #5e2128 !important;
  background-color: #f4b8bf !important;
  fill: #f4b8bf;
  stroke: #5e2128;
}

.webform-workflow-color-red-dark {
  color: #fff !important;
  background-color: #ad1a2b !important;
  fill: #ad1a2b;
  stroke: #fff;
}

.webform-workflow-color-green {
  color: #324e2b !important;
  background-color: #c2f7bc !important;
  fill: #c2f7bc;
  stroke: #324e2b;
}

.webform-workflow-color-green-dark {
  color: #c2f7bc !important;
  background-color: #324e2b !important;
  fill: #324e2b;
  stroke: #c2f7bc;
}

.webform-workflow-color-purple {
  color: #573d7d !important;
  background-color: #e9dff2 !important;
  fill: #e9dff2;
  stroke: #573d7d;
}

.webform-workflow-color-purple-dark {
  color: #e7cffc !important;
  background-color: #573d7d !important;
  fill: #573d7d;
  stroke: #e7cffc;
}

.webform-workflow-color-aqua {
  color: #000 !important;
  background-color: #00e5ff !important;
  fill: #00e5ff;
  stroke: #000;
}

.webform-workflow-color-aqua-dark {
  color: #fff !important;
  background-color: #00606b !important;
  fill: #00606b;
  stroke: #fff;
}

.webform-workflow-color-gray {
  color: #1e2027 !important;
  background-color: #d7d8da !important;
  fill: #d7d8da;
  stroke: #1e2027;
}

.webform-workflow-color-gray-dark {
  color: #fff !important;
  background-color: #71737a !important;
  fill: #71737a;
  stroke: #fff;
}

.webform-workflow-color-black {
  color: #fff !important;
  background-color: #000 !important;
  fill: #000;
  stroke: #fff;
}

.webform-workflow-color-white {
  color: #000 !important;
  background-color: #fff !important;
  fill: #fff;
  stroke: #000;
}