@syncfusion/ej2-angular-diagrams/styles/bootstrap5.css

Feature-rich diagram control to create diagrams like flow charts, organizational charts, mind maps, and BPMN diagrams. Its rich feature set includes built-in shapes, editing, serializing, exporting, printing, overview, data binding, and automatic layouts.

.e-icons {
  font-family: "e-icons";
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
}

.e-diagram-menu .e-bringforward::before {
  content: "\e574";
}
.e-diagram-menu .e-bringfront::before {
  content: "\e575";
}
.e-diagram-menu .e-sendback::before {
  content: "\e576";
}
.e-diagram-menu .e-sendbackward::before {
  content: "\e577";
}
.e-diagram-menu .e-delete::before {
  content: "\e578";
}
.e-diagram-menu .e-ungroup::before {
  content: "\e579";
}
.e-diagram-menu .e-group::before {
  content: "\e57a";
}
.e-diagram-menu .e-undo::before {
  content: "\e57c";
}
.e-diagram-menu .e-cut::before {
  content: "\e57d";
}
.e-diagram-menu .e-save::before {
  content: "\e57e";
}
.e-diagram-menu .e-paste::before {
  content: "\e57f";
}
.e-diagram-menu .e-copy::before {
  content: "\e580";
}
.e-diagram-menu .e-redo::before {
  content: "\e581";
}
.e-diagram-menu .e-zoomin::before {
  content: "\e582";
}
.e-diagram-menu .e-italic::before {
  content: "\e583";
}
.e-diagram-menu .e-close::before {
  content: "\e584";
}
.e-diagram-menu .e-pan::before {
  content: "\e585";
}
.e-diagram-menu .e-bold::before {
  content: "\e586";
}
.e-diagram-menu .e-underline::before {
  content: "\e587";
}
.e-diagram-menu .e-zoomout::before {
  content: "\e588";
}
.e-diagram-menu .e-export::before {
  content: "\e589";
}
.e-diagram-menu .e-print::before {
  content: "\e58a";
}
.e-diagram-menu .e-order::before {
  content: "\e58b";
}

.e-symbolpalette .e-clear-searchtext::before {
  content: "\e58c";
}

/* stylelint-disable-line length-zero-no-unit */
.e-icons {
  font-family: "e-icons";
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
}

.e-diagram-menu .e-bringforward::before {
  content: "\e72f";
}
.e-diagram-menu .e-bringfront::before {
  content: "\e840";
}
.e-diagram-menu .e-sendback::before {
  content: "\e78a";
}
.e-diagram-menu .e-sendbackward::before {
  content: "\e7ed";
}
.e-diagram-menu .e-delete::before {
  content: "\e94a";
}
.e-diagram-menu .e-ungroup::before {
  content: "\e749";
}
.e-diagram-menu .e-group::before {
  content: "\e7f4";
}
.e-diagram-menu .e-undo::before {
  content: "\e713";
}
.e-diagram-menu .e-redo::before {
  content: "\e755";
}
.e-diagram-menu .e-copy::before {
  content: "\e77c";
}
.e-diagram-menu .e-cut::before {
  content: "\e7fb";
}
.e-diagram-menu .e-save::before {
  content: "\e7c8";
}
.e-diagram-menu .e-paste::before {
  content: "\e70b";
}
.e-diagram-menu .e-zoomin::before {
  content: "\e795";
}
.e-diagram-menu .e-italic::before {
  content: "\e75a";
}
.e-diagram-menu .e-close::before {
  content: "\e7e7";
}
.e-diagram-menu .e-pan::before {
  content: "\e7b1";
}
.e-diagram-menu .e-bold::before {
  content: "\e737";
}
.e-diagram-menu .e-underline::before {
  content: "\e82f";
}
.e-diagram-menu .e-zoomout::before {
  content: "\e825";
}
.e-diagram-menu .e-export::before {
  content: "\e72e";
}
.e-diagram-menu .e-print::before {
  content: "\e75d";
}
.e-diagram-menu .e-order::before {
  content: "\e809";
}

.e-symbolpalette .e-clear-searchtext::before {
  content: "\e754";
}

.e-diagram {
  background-color: #fff;
  display: block;
}

.e-symbolpalette {
  display: block;
}

.e-overview {
  display: block;
}

.e-content-placeholder.e-diagram.e-placeholder-diagram {
  background-size: 100% 100%;
  max-height: 500px;
  max-width: 500px;
}

.e-content-placeholder.e-symbolpalette.e-placeholder-symbolpalette {
  background-size: 100% 100%;
  max-height: 200px;
  max-width: 200px;
}

.e-diagram-endpoint-handle {
  fill: #fff;
  stroke: #0d6efd;
}

.e-diagram-endpoint-handle.e-connected {
  fill: #0d6efd;
  stroke: #fff;
}

.e-diagram-endpoint-handle.e-disabled {
  fill: #adb5bd;
  opacity: 1;
  stroke: #fff;
}

.e-diagram-bezier-control-handle.e-disabled {
  fill: #adb5bd;
  opacity: 1;
  stroke: #fff;
}

/* stylelint-disable */
.e-diagram-bezier-handle.e-source.e-disabled {
  opacity: 1 !important;
}

.e-diagram-bezier-handle.e-target.e-disabled {
  opacity: 1 !important;
}

.e-diagram-bezier-control-handle {
  fill: #fff;
  stroke: #0d6efd;
}

.e-diagram-bezier-segment-handle {
  fill: #fff;
  stroke: #0d6efd;
}

.e-symbolpalette .e-acrdn-content {
  background-color: #fff !important;
}

/* stylelint-enable */
.e-diagram-bezier-control-line {
  stroke: #0d6efd;
}

.e-diagram-resize-handle {
  fill: #0d6efd;
  stroke: #fff;
  stroke: #fff;
}

.e-diagram-helper {
  stroke: #0d6efd;
}

.e-diagram-resize-handle.e-disabled {
  fill: #adb5bd;
  opacity: 1;
  stroke: #fff;
}

.e-diagram-rotate-handle {
  fill: #0d6efd;
  stroke: #0d6efd;
}

.e-diagram-selector {
  stroke: #0d6efd;
}

.e-diagram-selector.e-disabled {
  opacity: 1;
  stroke: #adb5bd;
}

.e-diagram-selector.e-thick-border {
  stroke: #0d6efd;
  stroke-width: 2;
}

.e-diagram-selector.e-thick-border.e-diagram-lane {
  stroke: #0d6efd;
  stroke-width: 2;
}

.e-diagram-highlighter {
  stroke: #0d6efd;
  stroke-width: 2;
}

.e-diagram-selected-region {
  stroke: #0d6efd;
}

.e-diagram-pivot-line {
  stroke: #0d6efd;
}

.e-symbolpalette .e-symbol-hover:hover {
  background: #e9ecef;
  border-radius: 0px;
}

.e-symbolpalette .e-symbol-selected {
  background: #e9ecef;
  border-radius: 0px;
}

.e-diagram-tooltip {
  pointer-events: none;
}

.e-diagram .e-ruler {
  background-color: #f8f9fa;
  color: #495057;
  font-size: 10px;
}

.e-diagram .e-ruler-overlap {
  background-color: #f8f9fa;
}

.e-diagram .e-d-ruler-marker {
  stroke: #0d6efd;
}

.e-diagram .e-diagram-text-edit {
  background: #fff;
  border-color: #0d6efd;
  border-style: dashed;
  border-width: 1px;
  box-sizing: content-box;
  color: #000;
  min-width: 50px;
}

.e-diagram-text-edit::selection {
  background: #0d6efd;
  color: #fff;
}

.e-ruler-tick-label {
  fill: #495057;
}

.e-ruler-tick {
  stroke: #ced4da;
}

.e-menu-item e-blankicon {
  padding-left: 28px;
}

.e-diagram-selection-indicator {
  stroke: #0d6efd;
}

.e-diagram-selection-line {
  stroke: #0d6efd;
}

/* stylelint-disable */
.e-diagram-rotate {
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsSAAALEgHS3X78AAAA60lEQVQ4jZ1SwQ2DMBAzlfLJI2KEjJAVukG7ARsxQkfoKHQDugHdgOoqh14oCaGWIpSTudzZRg2MdYOxrq0il2Csm411o7Eu5GinTN0D6AGMAGZVux9p1LGBrHIF0LD+4l3ql70thDABSFZYaeTJ6UqNWhL3ELhyyhUR98TcwI06Lk1aNonO1NocqGWy/6zOcGCq6OjiSCw22/wUfEzL8ND2P9duFXBmHMDvWVN7CliFkkGe69VM5RmVLDqG7ZMPOroWP5BTle5WjR6dkQayutyLqU6gsiU/ypHMiI41yf+CE01qov+R0egXAN5x6jng51I3yAAAAABJRU5ErkJggg==), auto !important;
}

.e-symbolpalette-hidden {
  display: none !important;
}

.e-symbolpalette-search-hidden {
  display: none !important;
}

.e-diagramTooltip-content {
  width: auto !important;
  height: auto !important;
}

/* stylelint-enable */