/*!
 * DevExpress Diagram (dx-diagram.min)
 * Version: 1.0.21
 * Build date: Thu Jun 17 2021
 *
 * Copyright (c) 2012 - 2021 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExpress licensing here: https://www.devexpress.com/Support/EULAs
 */
.dxdi-control {
  overflow: visible;
  box-sizing: border-box;
  position: relative
}

.dxdi-control.dxdi-read-only .dxdi-canvas .shape,
.dxdi-control.dxdi-read-only .dxdi-canvas .shape-expand-btn,
.dxdi-control.dxdi-read-only .dxdi-canvas text {
  cursor: default
}

.dxdi-control .dxdi-canvas {
  display: block;
  background-color: #d9d9d9;
  transform-origin: 0 0;
  overflow: hidden
}

.dxdi-canvas.dxdi-drag-scroll {
  cursor: grab !important
}

.dxdi-canvas * {
  user-select: none
}

.dxdi-canvas text {
  font-family: arial;
  font-size: 10pt
}

.dxdi-canvas .page {
  fill: #fff
}

.dxdi-canvas .pages-grid-line {
  fill: none;
  stroke: rgba(0, 0, 0, .15);
  stroke-dasharray: 8;
  stroke-width: 2
}

.dxdi-canvas .grid-inner-line,
.dxdi-canvas .grid-outer-line {
  fill: none
}

.dxdi-canvas .grid-outer-line {
  stroke: rgba(0, 0, 0, .1)
}

.dxdi-canvas .grid-inner-line {
  stroke: rgba(0, 0, 0, .05)
}

.dxdi-canvas .shape,
.dxdi-canvas .toolbox-item {
  pointer-events: bounding-box
}

.dxdi-canvas .shape ellipse,
.dxdi-canvas .shape line,
.dxdi-canvas .shape path,
.dxdi-canvas .shape rect,
.dxdi-canvas .toolbox-item ellipse,
.dxdi-canvas .toolbox-item line,
.dxdi-canvas .toolbox-item path,
.dxdi-canvas .toolbox-item rect {
  fill: #fff;
  stroke-width: 2;
  stroke: #000
}

.dxdi-canvas .shape text,
.dxdi-canvas .toolbox-item text {
  fill: #cfcfcf;
  text-anchor: middle;
  text-shadow: 1px 1px 1px black;
  font-weight: bold;
}

.dxdi-canvas .shape rect.selector,
.dxdi-canvas .toolbox-item rect.selector {
  stroke-width: 48;
  stroke: transparent;
  fill: transparent;
  pointer-events: auto
}

.dxdi-canvas .shape {
  cursor: move
}

.dxdi-canvas .shape.text-input>text {
  display: none
}

.dxdi-canvas .shape.container>rect:first-child {
  fill: transparent
}

.dxdi-canvas .shape .shape-expand-btn {
  cursor: pointer
}

.dxdi-canvas .shape .shape-expand-btn>path,
.dxdi-canvas .shape .shape-expand-btn>rect {
  stroke-dasharray: initial !important
}

.dxdi-canvas .shape .shape-expand-btn>path {
  stroke-width: 2 !important
}

.dxdi-canvas .shape .dxdi-image .dxdi-spinner {
  animation: loading-spinner 1s linear infinite
}

.dxdi-canvas .shape .dxdi-image .dxdi-spinner ellipse {
  stroke: #000;
  stroke-opacity: .2
}

.dxdi-canvas .shape .dxdi-image .dxdi-spinner path {
  stroke: #fd7010;
  stroke-linecap: round
}

.dxdi-canvas .shape .dxdi-image .dxdi-spinner ellipse,
.dxdi-canvas .shape .dxdi-image .dxdi-spinner path {
  fill: none;
  stroke-width: 5
}

@keyframes loading-spinner {
  0% {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(1turn)
  }
}

.dxdi-canvas .shape .dxdi-image .dxdi-user .dxdi-background {
  fill: #000;
  opacity: .2;
  stroke: none
}

.dxdi-canvas .shape .dxdi-image .dxdi-user ellipse,
.dxdi-canvas .shape .dxdi-image .dxdi-user path {
  fill: #fff;
  stroke: none
}

.dxdi-canvas .shape .dxdi-image .dxdi-warning ellipse {
  stroke: none;
  fill: #ee1616
}

.dxdi-canvas .shape .dxdi-image .dxdi-warning rect {
  stroke: none;
  fill: #fff
}

.dxdi-canvas .shape.locked,
.dxdi-canvas .shape.locked+.container-children .shape,
.dxdi-canvas .shape.locked+.container-children .shape .shape-expand-btn,
.dxdi-canvas .shape.locked .shape-expand-btn {
  cursor: inherit !important
}

.dxdi-canvas .container-children .shape .selector {
  stroke-width: 8
}

.dxdi-canvas .toolbox-item {
  cursor: pointer
}

.dxdi-canvas .toolbox-item .selector {
  stroke-width: 0 !important
}

.dxdi-canvas .connector line,
.dxdi-canvas .connector path {
  stroke-width: 2;
  stroke: #000;
  stroke-linejoin: round;
  pointer-events: stroke
}

.dxdi-canvas .connector path:not(.outlined-line-ending):not(.filled-line-ending) {
  fill: transparent !important
}

.dxdi-canvas .connector path.outlined-line-ending {
  fill: #fff
}

.dxdi-canvas .connector path.filled-line-ending {
  fill: #000
}

.dxdi-canvas .connector line.selector,
.dxdi-canvas .connector path.selector {
  stroke-width: 16;
  stroke: transparent
}

.dxdi-canvas .connector text {
  cursor: move;
  fill: #000;
  text-anchor: middle
}

.dxdi-canvas .connector .text-filter-flood {
  flood-color: #fff
}

.dxdi-canvas .connection-mark,
.dxdi-canvas .connection-point,
.dxdi-canvas .connector-point-mark,
.dxdi-canvas .connector-side-mark,
.dxdi-canvas .geometry-mark,
.dxdi-canvas .selection-mark {
  fill: #fff;
  stroke-width: 2
}

.dxdi-canvas .selection-mark {
  stroke: #1e90ff
}

.dxdi-canvas .selection-mark[data-type="9"][data-value="1"] {
  cursor: nw-resize
}

.dxdi-canvas .selection-mark[data-type="9"][data-value="2"] {
  cursor: ne-resize
}

.dxdi-canvas .selection-mark[data-type="9"][data-value="3"] {
  cursor: se-resize
}

.dxdi-canvas .selection-mark[data-type="9"][data-value="4"] {
  cursor: sw-resize
}

.dxdi-canvas .selection-mark[data-type="9"][data-value="5"] {
  cursor: n-resize
}

.dxdi-canvas .selection-mark[data-type="9"][data-value="6"] {
  cursor: e-resize
}

.dxdi-canvas .selection-mark[data-type="9"][data-value="7"] {
  cursor: s-resize
}

.dxdi-canvas .selection-mark[data-type="9"][data-value="8"] {
  cursor: w-resize
}

.dxdi-canvas .selection-mark[data-type="4"],
.dxdi-canvas .selection-mark[data-type="5"] {
  cursor: move
}

.dxdi-canvas .locked-selection-mark {
  fill: #fff;
  stroke-width: 1;
  stroke: #666
}

.dxdi-canvas .geometry-mark {
  cursor: pointer;
  stroke: #daa520
}

.dxdi-canvas .connection-target,
.dxdi-canvas .container-target {
  fill: transparent;
  stroke: orchid;
  stroke-width: 2;
  pointer-events: none
}

.dxdi-canvas .connection-mark,
.dxdi-canvas .connection-point {
  cursor: crosshair;
  stroke: orchid
}

.dxdi-canvas .connection-mark.selector,
.dxdi-canvas .connection-point.selector {
  stroke-width: 10px;
  stroke: transparent;
  fill: transparent
}

.dxdi-canvas .connection-mark.active,
.dxdi-canvas .connection-point.active {
  fill: orchid
}

.dxdi-canvas .connector-point-mark,
.dxdi-canvas .connector-side-mark {
  cursor: move;
  stroke: #1e90ff
}

.dxdi-canvas .connector-point-mark.disabled {
  cursor: default;
  display: none
}

.dxdi-canvas .connector-side-mark {
  fill: #1e90ff
}

.dxdi-canvas .connector-side-mark.vertical {
  cursor: col-resize
}

.dxdi-canvas .connector-side-mark.horizontal {
  cursor: row-resize
}

.dxdi-canvas .item-selection-rect,
.dxdi-canvas .items-selection-rect {
  fill: transparent;
  stroke-width: 1;
  stroke: #1e90ff;
  stroke-dasharray: 2px;
  pointer-events: none
}

.dxdi-canvas .items-selection-rect {
  fill: rgba(30, 144, 255, .02)
}

.dxdi-canvas .item-multi-selection-rect {
  fill: rgba(30, 144, 255, .02);
  stroke-width: 1;
  stroke: #1e90ff;
  pointer-events: none
}

.dxdi-canvas .selection-rect {
  fill: rgba(30, 144, 255, .2);
  stroke-width: 1;
  stroke: #1e90ff;
  pointer-events: none
}

.dxdi-canvas .connector-multi-selection,
.dxdi-canvas .connector-selection {
  fill: transparent;
  stroke-width: 1;
  stroke: #1e90ff;
  pointer-events: none
}

.dxdi-canvas .connector-multi-selection.text,
.dxdi-canvas .connector-selection.text {
  fill: transparent;
  stroke-width: 1
}

.dxdi-canvas .connector-selection {
  stroke-dasharray: 2px
}

.dxdi-canvas .connector-selection-mask rect {
  fill: #000
}

.dxdi-canvas .connector-selection-mask rect.background {
  fill: #fff
}

.dxdi-canvas .connector-selection-mask line,
.dxdi-canvas .connector-selection-mask path {
  fill: #fff;
  stroke: #000;
  stroke-width: 4
}

.dxdi-canvas .connector-selection-mask text {
  text-anchor: middle
}

.dxdi-canvas .extension-line path {
  stroke: #1e90ff;
  stroke-width: 1
}

.dxdi-canvas .extension-line path.size-line {
  stroke-dasharray: 4px
}

.dxdi-canvas .extension-line text {
  fill: #1e90ff;
  font-size: .8em;
  text-anchor: middle
}

.dxdi-canvas .extension-line.center>path.size-line,
.dxdi-canvas .extension-line.page>path.size-line {
  stroke-dasharray: 0
}

.dxdi-canvas .extension-line:not(.center)>path:not(:first-child) {
  display: none
}

.dxdi-canvas .resize-info text {
  fill: rgba(0, 0, 0, .8);
  font-size: .8em;
  text-anchor: middle
}

.dxdi-canvas .resize-info rect {
  fill: #fff;
  stroke: rgba(0, 0, 0, .3);
  stroke-width: 1
}

.dxdi-control:not(.focused) .dxdi-canvas .geometry-mark,
.dxdi-control:not(.focused) .dxdi-canvas .selection-mark {
  stroke: #666
}

.dxdi-control:not(.focused) .dxdi-canvas .item-selection-rect,
.dxdi-control:not(.focused) .dxdi-canvas .items-selection-rect {
  fill: transparent;
  stroke: #666
}

.dxdi-control:not(.focused) .dxdi-canvas .items-selection-rect {
  fill: hsla(0, 0%, 56.5%, .02)
}

.dxdi-control:not(.focused) .dxdi-canvas .item-multi-selection-rect {
  fill: hsla(0, 0%, 56.5%, .02);
  stroke: #666
}

.dxdi-control:not(.focused) .dxdi-canvas .connection-mark,
.dxdi-control:not(.focused) .dxdi-canvas .connection-mark.selector,
.dxdi-control:not(.focused) .dxdi-canvas .connection-point,
.dxdi-control:not(.focused) .dxdi-canvas .connection-point.selector {
  display: none
}

.dxdi-control:not(.focused) .dxdi-canvas .connector-multi-selection,
.dxdi-control:not(.focused) .dxdi-canvas .connector-point-mark,
.dxdi-control:not(.focused) .dxdi-canvas .connector-selection,
.dxdi-control:not(.focused) .dxdi-canvas .connector-side-mark {
  stroke: #666
}

.dxdi-control:not(.focused) .dxdi-canvas .connector-side-mark {
  fill: #666
}

.dxdi-dragging,
.dxdi-dragging * {
  user-select: none
}

.dxdi-canvas.export * {
  cursor: inherit !important;
  pointer-events: all !important
}

.dxdi-toolbox,
.dxdi-toolbox svg {
  user-select: none;
  outline: none
}

.dxdi-toolbox,
.dxdi-toolbox-drag-item .dxdi-canvas,
.dxdi-toolbox .dxdi-canvas {
  width: 100%;
  height: 100%
}

.dxdi-toolbox .dxdi-canvas .toolbox-item ellipse,
.dxdi-toolbox .dxdi-canvas .toolbox-item line,
.dxdi-toolbox .dxdi-canvas .toolbox-item path,
.dxdi-toolbox .dxdi-canvas .toolbox-item rect {
  fill: transparent;
  stroke: currentColor
}

.dxdi-toolbox .dxdi-canvas .toolbox-item .dxdi-image-placeholder {
  opacity: .75;
  fill: currentColor;
  stroke: none
}

.dxdi-toolbox .dxdi-canvas .toolbox-item .dxdi-shape-text {
  opacity: .25
}

.dxdi-toolbox-drag-item .dxdi-canvas text,
.dxdi-toolbox .dxdi-canvas .toolbox-item text {
  font-weight: 700;
  font-family: Segoe UI, Helvetica Neue, Helvetica, arial, sans-serif;
  fill: currentColor
}

.dxdi-toolbox-drag-item .dxdi-canvas .dxdi-image-placeholder {
  opacity: .75;
  fill: currentColor;
  stroke: none
}

.dxdi-toolbox-drag-item .dxdi-canvas .dxdi-shape-text {
  display: none
}

.dxdi-toolbox .toolbox-text-item {
  cursor: pointer;
  user-select: none;
  margin: 0 0 .6em
}

.dxdi-toolbox-drag-item,
.dxdi-toolbox-drag-text-item {
  font-family: arial;
  font-size: 10pt;
  color: #000;
  position: absolute;
  z-index: 10000;
  pointer-events: none !important
}

.dxdi-toolbox-drag-item *,
.dxdi-toolbox-drag-text-item * {
  pointer-events: none !important
}

.dxdi-toolbox-drag-item text {
  pointer-events: none
}

.dxdi-toolbox-drag-text-item {
  background-color: #fff;
  border: 2px solid #000;
  padding: .5em
}

.dxdi-tb-drag-captured {
  display: none
}

.dxdi-focus-input,
.dxdi-text-input,
.dxdi-text-input-container {
  padding: 0;
  outline: none;
  border: none
}

.dxdi-clipboard-input,
.dxdi-focus-input {
  position: fixed;
  overflow: hidden;
  left: -1000px !important;
  top: -1000px !important
}

.dxdi-text-input-container {
  display: none
}

.dxdi-text-input-container.connector-text,
.dxdi-text-input-container.shape-text {
  display: inherit;
  position: absolute;
  overflow: hidden;
  background-color: transparent;
  transform-origin: 0 0
}

.dxdi-text-input-container.shape-text .dxdi-text-input {
  display: table-cell;
  overflow: hidden;
  padding: 1px 0 0;
  outline: none;
  background-color: transparent;
  font-family: arial;
  font-size: 10pt;
  color: #000;
  line-height: 1.1em;
  text-align: center;
  vertical-align: middle
}

.dxdi-text-input-container.connector-text {
  overflow: visible
}

.dxdi-text-input-container.connector-text .dxdi-text-input {
  padding: 2px;
  outline: none;
  height: calc(1.1em + 6px);
  width: calc(8em + 6px);
  margin-top: calc(-.55em - 3px);
  margin-left: calc(-4em - 3px);
  background-color: #fff;
  border: 1px solid #1e90ff;
  font-family: arial;
  font-size: 10pt;
  color: #000;
  line-height: 1.1em;
  text-align: center;
  vertical-align: middle
}

.dxdi-page-shadow {
  fill: grey
}