/* Bootstrap 4 Configuration (must appear before all bootstrap-related styles) */
/* Common Configuration */
/* Dark-Theme Configuration */
/* Element status colors */
/* Notifications */
#diagrams .disclaimer .btn-close {
  right: 5px;
}
#diagrams #diagrams-title-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#diagrams #diagrams-title-bar .conflicts-icon {
  margin-top: -13px;
  margin-left: -7px;
}
#diagrams #svg-viewer-component-group {
  display: flex;
  flex-flow: row nowrap;
}
#diagrams .svg-viewer-component {
  border-right: 1px solid #ddd !important;
}
#diagrams .svg-viewer-component .svg-diagram-container {
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
}
#diagrams .svg-viewer-component .svg-diagram-container .mainSvgContainer {
  height: 100%;
  width: 100%;
  color: #424242;
  opacity: 1;
}
#diagrams .svg-viewer-component .svg-diagram-container .svg-buttons {
  margin: 5px 0 0 5px;
  position: absolute;
  opacity: 0.9;
  z-index: 2;
}
#diagrams .svg-viewer-component .svg-diagram-container .svg-buttons a.btn {
  background-color: white;
  border-color: #d1d1d1;
}
#diagrams .svg-viewer-component .svg-diagram-container .svg-buttons a.btn:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
#diagrams .svg-viewer-component .svg-diagram-container .use-buttons {
  z-index: 1;
  position: absolute;
  transform: translateX(-50%) translateY(-100%);
}
#diagrams .svg-viewer-component .svg-diagram-container .use-buttons .dropdown-menu {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0 0 -18px 23px;
}
#diagrams .svg-viewer-component .svg-diagram-container .use-buttons .dropdown-menu button {
  display: block;
  margin: -1px 0;
  opacity: 1 !important;
}
#diagrams .svg-viewer-component .svg-diagram-container .useButton {
  opacity: 0.9;
}
#diagrams .svg-viewer-component .svg-diagram-container .take-over-buttons-overlay {
  position: absolute;
  right: 6px;
  bottom: 4px;
}
#diagrams .svg-viewer-component .svg-diagram-container.locked::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: not-allowed;
}
#diagrams .svg-viewer-component .svg-diagram-container .number-of-changes-label {
  position: absolute;
  top: 5px;
  right: 5px;
}
#diagrams .svg-viewer-component .svg-diagram-container svg {
  cursor: default;
  height: 100%;
  width: 100%;
}
#diagrams .svg-viewer-component .svg-diagram-container svg pre {
  padding: inherit !important;
  font-size: inherit !important;
  border: none !important;
  background: none !important;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-unmodified span {
  color: darkgray !important;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-nonexistence {
  stroke: darkgray;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-nonexistence *:not(text):not(tspan) {
  stroke: darkgray !important;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-nonexistence span {
  color: darkgray !important;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-subelementmodified {
  stroke: darkorange;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-subelementmodified *:not(text):not(tspan) {
  stroke: darkorange !important;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-subelementmodified span {
  color: darkorange;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-moved {
  stroke: darkorange;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-moved *:not(text):not(tspan) {
  stroke: darkorange !important;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-moved span {
  color: darkorange !important;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-new {
  stroke: mediumseagreen;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-new *:not(text):not(tspan) {
  stroke: mediumseagreen !important;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-new span {
  color: mediumseagreen !important;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-modified {
  stroke: darkorange;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-modified *:not(text):not(tspan) {
  stroke: darkorange !important;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-modified span {
  color: darkorange !important;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-removed {
  stroke: #ff9090;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-removed *:not(text):not(tspan) {
  stroke: #ff9090 !important;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-removed span {
  color: #ff9090 !important;
}
#diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-unknown, #diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-unmodified, #diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-nonexistence, #diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-subelementmodified, #diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-moved, #diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-new, #diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-modified, #diagrams .svg-viewer-component .svg-diagram-container svg .diag-highlight.ds-removed {
  stroke-width: 2 !important;
}
#diagrams .svg-viewer-component .svg-diagram-container svg {
  /*  Never change this rule without changing the js code which searches for
  		this rule as well. Unfortunately rules have no name, so the selector is
  		their id, and we override the outline-width and outline-offset during
  		runtime for this (and only this) rule.

  		The values provided here  for outline-style and outline-width have no
  		effect, but they're left in place as a fail-safe.

  		You also probably shouldn't add another rule with the same selector.
  	*/
}
#diagrams .svg-viewer-component .svg-diagram-container svg .highlighted {
  filter: none !important;
  outline-color: rgba(255, 0, 0, 0.8);
  outline-style: solid;
  outline-width: 3px;
  outline-offset: 3px;
}
#diagrams .svg-viewer-component .svg-diagram-container svg {
  /* part of an ant-animation for connectors and outlines of rectangles */
}
@keyframes antwalk {
  to {
    stroke-dashoffset: 0;
  }
}
#diagrams .svg-viewer-component .svg-diagram-container svg {
  /* animate connectors and rectangle outlines to make them easier to see */
}
#diagrams .svg-viewer-component .svg-diagram-container svg .highlighted.main-shape,
#diagrams .svg-viewer-component .svg-diagram-container svg .highlighted .main-shape {
  animation-name: antwalk;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  stroke-dasharray: 5;
  stroke-dashoffset: 10;
  stroke-width: 2;
}
#diagrams .svg-viewer-component .svg-diagram-container svg g.element {
  line-height: normal;
}
#diagrams.one-column .svg-viewer-component {
  width: 100%;
}
#diagrams.two-columns .svg-viewer-component {
  width: calc(50% - 8px);
}
#diagrams.two-columns .svg-viewer-component .useButton,
#diagrams.two-columns .svg-viewer-component .use-buttons {
  display: none;
}
#diagrams.three-columns .svg-viewer-component.branch-a {
  width: calc(33.33% - 5px);
}
#diagrams.three-columns .svg-viewer-component.branch-b {
  width: calc(33.33% - 5px);
}
#diagrams.three-columns .svg-viewer-component.branch-merged {
  width: calc(33.33% + 10px);
}
#diagrams #sync_mode {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 11px;
}
#diagrams #sync_mode button {
  font-size: 11px;
}
#diagrams #sync_mode .k-button-group {
  height: 21px;
}

.dark-theme #diagrams .svg-viewer-component {
  border-right: 1px solid #ddd !important;
}
.dark-theme #diagrams .svg-viewer-component .svg-buttons a.btn {
  color: #333;
}
.dark-theme #diagrams .svg-viewer-component:not(.has-diagram) {
  border-right: 1px solid #616669 !important;
}
.dark-theme #diagrams .svg-viewer-component:not(.has-diagram) .svg-buttons a.btn {
  background: #575c5e;
  border: 1px solid #868c90;
  color: #bbb;
}
.dark-theme #diagrams .svg-viewer-component:not(.has-diagram) .svg-buttons a.btn:not(.disabled):hover {
  background-color: #424647;
}
.dark-theme #diagrams .svg-viewer-component .svg-diagram-container {
  background-color: #323536;
}