/* Bootstrap 4 Configuration (must appear before all bootstrap-related styles) */
/* Common Configuration */
/* Dark-Theme Configuration */
/* Element status colors */
/* Notifications */
#sidebar {
  background-color: #f5f5f5;
}
#sidebar #impacted_elements .pages {
  z-index: 10;
}
#sidebar #impacted_diagrams .diagram-representation.conflicted {
  color: #e8554d;
}
#sidebar #impacted_elements .parent-element .panel-body,
#sidebar #impacted_diagrams .parent-diagram .panel-body {
  border: 1px solid #ccc;
  border-radius: 4px;
}
#sidebar .conflicts .conflicts-text {
  cursor: pointer;
}
#sidebar .conflicts .conflicts-text.disabled {
  cursor: not-allowed;
  text-decoration: none;
}
#sidebar #element-list,
#sidebar #diagram-list {
  position: absolute;
  top: 66px;
  right: 0;
  bottom: 32px;
  left: 0;
  transition: all 0.25s;
  overflow: auto;
  border-top: 1px solid #ddd;
}
#sidebar #element-list.initial-filter-in-session,
#sidebar #diagram-list.initial-filter-in-session {
  top: 94px;
}
#sidebar #element-list table,
#sidebar #diagram-list table {
  margin-bottom: 0;
  border-right: 1px solid #ddd;
}
#sidebar #element-list table.table-no-header,
#sidebar #diagram-list table.table-no-header {
  table-layout: fixed;
}
#sidebar #element-list table .conflicts-icon,
#sidebar #diagram-list table .conflicts-icon {
  margin-top: -13px;
  margin-left: -7px;
}
#sidebar #element-list table tr.elements-item,
#sidebar #diagram-list table tr.elements-item {
  border-left: 5px solid #cccccc;
  cursor: default;
}
#sidebar #element-list table tr.elements-item.propopen,
#sidebar #diagram-list table tr.elements-item.propopen {
  background-color: #f1f1f1;
}
#sidebar #element-list table tr.elements-item:not(:first-child),
#sidebar #diagram-list table tr.elements-item:not(:first-child) {
  border-top: 1px solid #ddd;
}
#sidebar #element-list table tr.elements-item:last-child,
#sidebar #diagram-list table tr.elements-item:last-child {
  border-bottom: 1px solid #ddd;
}
#sidebar #element-list table tr.elements-item.active,
#sidebar #diagram-list table tr.elements-item.active {
  background-color: #e5f3fb !important;
  border-top: 1px solid #70c0e7;
  border-bottom: 1px solid #70c0e7;
  border-right: 1px solid #70c0e7;
}
#sidebar #element-list table tr.elements-item td,
#sidebar #diagram-list table tr.elements-item td {
  width: 100%;
  vertical-align: top;
  border: none;
}
#sidebar #element-list table tr.elements-item td .elements-item-header,
#sidebar #diagram-list table tr.elements-item td .elements-item-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.7rem 0.5rem;
}
#sidebar #element-list table tr.elements-item td > div,
#sidebar #diagram-list table tr.elements-item td > div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 15px !important;
}
#sidebar #element-list table tr.elements-item td > div .sub-elements .diagram-representation .panel-heading.row,
#sidebar #diagram-list table tr.elements-item td > div .sub-elements .diagram-representation .panel-heading.row {
  background-color: #f0f0f0;
  padding-bottom: 8px;
  border-top: none !important;
  border-radius: 0 !important;
}
#sidebar #element-list table tr.elements-item td > div .sub-elements.active .diagram-representation .panel-body.row,
#sidebar #diagram-list table tr.elements-item td > div .sub-elements.active .diagram-representation .panel-body.row {
  border-bottom: 1px solid #70c0e7;
}
#sidebar #element-list table tr.elements-item td > div .sub-elements .panel-heading.row,
#sidebar #diagram-list table tr.elements-item td > div .sub-elements .panel-heading.row {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-bottom: none;
  border-left: 5px solid #ddd;
}
#sidebar #element-list table tr.elements-item td > div .sub-elements .panel-heading.row.conflicted,
#sidebar #diagram-list table tr.elements-item td > div .sub-elements .panel-heading.row.conflicted {
  background: linear-gradient(90deg, #e8554d -500%, #f1f1f1 110%);
  border-color: #e8554d;
}
#sidebar #element-list table tr.elements-item td > div .sub-elements .panel-body.row,
#sidebar #diagram-list table tr.elements-item td > div .sub-elements .panel-body.row {
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-left: 5px solid #ddd;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
#sidebar #element-list table tr.elements-item td > div .sub-elements .panel-body.row.conflicted,
#sidebar #diagram-list table tr.elements-item td > div .sub-elements .panel-body.row.conflicted {
  border-color: #e8554d;
}
#sidebar #element-list table tr.elements-item td > div .element-name,
#sidebar #diagram-list table tr.elements-item td > div .element-name {
  word-wrap: break-word;
  font-size: 13px;
  color: inherit;
  margin-left: 4px;
  max-width: calc(100% - 128px);
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  vertical-align: middle;
}
#sidebar #element-list table tr.elements-item td > div .element-name.element-name-move-left,
#sidebar #diagram-list table tr.elements-item td > div .element-name.element-name-move-left {
  margin-left: -1px;
}
#sidebar #element-list table tr.elements-item td > div .element-name.conflict,
#sidebar #diagram-list table tr.elements-item td > div .element-name.conflict {
  color: #e8554d;
}
#sidebar #element-list table tr.elements-item td > div .element-name > div,
#sidebar #diagram-list table tr.elements-item td > div .element-name > div {
  display: inline;
}
#sidebar #element-list table tr.elements-item td > div .panel-group .panel,
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel {
  width: 100% !important;
  border: none;
}
#sidebar #element-list table tr.elements-item td > div .panel-group .panel.container.sub-elements,
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel.container.sub-elements {
  background: transparent;
  margin-bottom: 8px;
  border-radius: 4px !important;
}
#sidebar #element-list table tr.elements-item td > div .panel-group .panel.container.sub-elements.active,
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel.container.sub-elements.active {
  box-shadow: 0px 0px 4px 1px #70c0e7 !important;
}
#sidebar #element-list table tr.elements-item td > div .panel-group .panel.container.sub-elements.active .panel-heading.row,
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel.container.sub-elements.active .panel-heading.row {
  background-color: #e5f3fb;
  border: 1px solid #70c0e7;
  border-left: 5px solid #ddd;
  border-bottom: none;
}
#sidebar #element-list table tr.elements-item td > div .panel-group .panel.container.sub-elements.active .panel-body.row,
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel.container.sub-elements.active .panel-body.row {
  border: 1px solid #70c0e7;
  border-left: 5px solid #ddd;
  border-top: none;
}
#sidebar #element-list table tr.elements-item td > div .panel-group .panel.container.parent-element, #sidebar #element-list table tr.elements-item td > div .panel-group .panel.container.parent-diagram,
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel.container.parent-element,
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel.container.parent-diagram {
  margin-bottom: 15px;
  background: white;
  border-radius: 4px !important;
}
#sidebar #element-list table tr.elements-item td > div .panel-group .panel.container.parent-element.conflicted .change-field:not(.diagram-field), #sidebar #element-list table tr.elements-item td > div .panel-group .panel.container.parent-diagram.conflicted .change-field:not(.diagram-field),
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel.container.parent-element.conflicted .change-field:not(.diagram-field),
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel.container.parent-diagram.conflicted .change-field:not(.diagram-field) {
  color: #e8554d;
}
#sidebar #element-list table tr.elements-item td > div .panel-group .panel .panel-heading > span,
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel .panel-heading > span {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-overflow: ellipsis;
}
#sidebar #element-list table tr.elements-item td > div .panel-group .panel .panel-heading a,
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel .panel-heading a {
  cursor: pointer;
}
#sidebar #element-list table tr.elements-item td > div .panel-group .panel .panel-heading .sub-element,
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel .panel-heading .sub-element {
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#sidebar #element-list table tr.elements-item td > div .panel-group .panel .panel-heading .sub-element.sub-element-move-left,
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel .panel-heading .sub-element.sub-element-move-left {
  margin-left: -5px;
}
#sidebar #element-list table tr.elements-item td > div .panel-group .panel .panel-body,
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel .panel-body {
  padding: 2px !important;
}
#sidebar #element-list table tr.elements-item td > div .panel-group .panel .panel-body .change-field,
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel .panel-body .change-field {
  padding: 2px;
}
#sidebar #element-list table tr.elements-item td > div .panel-group .panel .panel-body .change-field.conflict:not(.diagram-field), #sidebar #element-list table tr.elements-item td > div .panel-group .panel .panel-body .change-field.conflicted:not(.diagram-field),
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel .panel-body .change-field.conflict:not(.diagram-field),
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel .panel-body .change-field.conflicted:not(.diagram-field) {
  color: #e8554d;
}
#sidebar #element-list table tr.elements-item td > div .panel-group .panel .panel-body .change-field.diagram-field .on-diagrams,
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel .panel-body .change-field.diagram-field .on-diagrams {
  margin-right: 2px;
}
#sidebar #element-list table tr.elements-item td > div .panel-group .panel .panel-body .change-field.diagram-field .on-diagrams:hover,
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel .panel-body .change-field.diagram-field .on-diagrams:hover {
  cursor: pointer;
  text-decoration: underline;
}
#sidebar #element-list table tr.elements-item td > div .panel-group .panel .panel-body .diagram-col,
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel .panel-body .diagram-col {
  display: flex;
  align-items: center;
  min-width: 105px !important;
}
#sidebar #element-list table tr.elements-item td > div .panel-group .panel .panel-body .content,
#sidebar #diagram-list table tr.elements-item td > div .panel-group .panel .panel-body .content {
  font-size: 11px;
  padding-left: 5px;
  padding-right: 5px;
  min-width: 85px;
  width: auto;
  white-space: nowrap;
}
#sidebar #element-list table tr.elements-item td > div .panel-group.sub-elements,
#sidebar #diagram-list table tr.elements-item td > div .panel-group.sub-elements {
  padding-left: 15px;
}
#sidebar #element-list table tr.elements-item td > div .badge.diff-state,
#sidebar #diagram-list table tr.elements-item td > div .badge.diff-state {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 13px !important;
}
#sidebar #element-list table tr.elements-item td > div .badge.diff-state > span,
#sidebar #diagram-list table tr.elements-item td > div .badge.diff-state > span {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#sidebar #element-list .emptyable-message-impacted,
#sidebar #diagram-list .emptyable-message-impacted {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}
#sidebar .impacted-header {
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}
#sidebar .impacted-header a.conflicts-text:hover {
  text-decoration: underline !important;
}
#sidebar #diagram-list .panel.container.sub-elements.active .panel-body.row {
  border-bottom: 1px solid #ccc !important;
}
#sidebar #diagram-list .panel.container.sub-elements.active .diagram-representation .panel-body.row {
  border-bottom: 1px solid #70c0e7 !important;
}
#sidebar #diagram-list table tr.elements-item td > div .sub-elements .container > .panel-body.row {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#sidebar .pages {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
#sidebar .pages .k-pager-info {
  display: none;
}
#sidebar .loader {
  position: absolute;
  left: 50%;
  top: 50%;
}

.dark-theme #sidebar {
  background-color: #323536;
}
.dark-theme #sidebar #impacted_elements .parent-element .panel-body,
.dark-theme #sidebar #impacted_diagrams .parent-diagram .panel-body {
  border: 1px solid #616669;
}
.dark-theme #sidebar #element-list,
.dark-theme #sidebar #diagram-list {
  border-top: 1px solid #616669;
}
.dark-theme #sidebar #element-list table,
.dark-theme #sidebar #diagram-list table {
  border-right: 1px solid #616669;
}
.dark-theme #sidebar #element-list table tr.elements-item,
.dark-theme #sidebar #diagram-list table tr.elements-item {
  border-left: 5px solid #73797d;
}
.dark-theme #sidebar #element-list table tr.elements-item.propopen,
.dark-theme #sidebar #diagram-list table tr.elements-item.propopen {
  background-color: #4e5255;
}
.dark-theme #sidebar #element-list table tr.elements-item:not(:first-child),
.dark-theme #sidebar #diagram-list table tr.elements-item:not(:first-child) {
  border-top: 1px solid #616669;
}
.dark-theme #sidebar #element-list table tr.elements-item:last-child,
.dark-theme #sidebar #diagram-list table tr.elements-item:last-child {
  border-bottom: 1px solid #616669;
}
.dark-theme #sidebar #element-list table tr.elements-item.active,
.dark-theme #sidebar #diagram-list table tr.elements-item.active {
  background-color: rgba(118, 171, 217, 0.3) !important;
  border-top-color: #70c0e7;
}
.dark-theme #sidebar #element-list table tr.elements-item td > div .sub-elements .diagram-representation .panel-heading.row,
.dark-theme #sidebar #diagram-list table tr.elements-item td > div .sub-elements .diagram-representation .panel-heading.row {
  background-color: #3c3f41;
}
.dark-theme #sidebar #element-list table tr.elements-item td > div .sub-elements.active .diagram-representation .panel-body.row,
.dark-theme #sidebar #diagram-list table tr.elements-item td > div .sub-elements.active .diagram-representation .panel-body.row {
  border-bottom: 1px solid #70c0e7;
}
.dark-theme #sidebar #element-list table tr.elements-item td > div .sub-elements .panel-heading.row,
.dark-theme #sidebar #diagram-list table tr.elements-item td > div .sub-elements .panel-heading.row {
  background-color: #494d4f;
  border: 1px solid #616669;
  border-bottom: none;
  border-left: 5px solid #73797d;
}
.dark-theme #sidebar #element-list table tr.elements-item td > div .sub-elements .panel-heading.row.conflicted,
.dark-theme #sidebar #diagram-list table tr.elements-item td > div .sub-elements .panel-heading.row.conflicted {
  background: linear-gradient(90deg, #e8554d -500%, #494d4f 110%);
  border-color: #e8554d;
}
.dark-theme #sidebar #element-list table tr.elements-item td > div .sub-elements .panel-body.row,
.dark-theme #sidebar #diagram-list table tr.elements-item td > div .sub-elements .panel-body.row {
  background: #323536;
  border: 1px solid #616669;
  border-top: none;
  border-left: 5px solid #73797d;
}
.dark-theme #sidebar #element-list table tr.elements-item td > div .sub-elements .panel-body.row.conflicted,
.dark-theme #sidebar #diagram-list table tr.elements-item td > div .sub-elements .panel-body.row.conflicted {
  border-color: #e8554d;
}
.dark-theme #sidebar #element-list table tr.elements-item td > div .element-name,
.dark-theme #sidebar #diagram-list table tr.elements-item td > div .element-name {
  color: #bbb;
}
.dark-theme #sidebar #element-list table tr.elements-item td > div .panel-group .panel,
.dark-theme #sidebar #diagram-list table tr.elements-item td > div .panel-group .panel {
  border: none;
  color: #bbb;
}
.dark-theme #sidebar #element-list table tr.elements-item td > div .panel-group .panel.container.sub-elements,
.dark-theme #sidebar #diagram-list table tr.elements-item td > div .panel-group .panel.container.sub-elements {
  background: transparent;
}
.dark-theme #sidebar #element-list table tr.elements-item td > div .panel-group .panel.container.sub-elements.active,
.dark-theme #sidebar #diagram-list table tr.elements-item td > div .panel-group .panel.container.sub-elements.active {
  box-shadow: 0px 0px 4px 1px #70c0e7 !important;
}
.dark-theme #sidebar #element-list table tr.elements-item td > div .panel-group .panel.container.sub-elements.active .panel-heading.row,
.dark-theme #sidebar #diagram-list table tr.elements-item td > div .panel-group .panel.container.sub-elements.active .panel-heading.row {
  background-color: rgba(118, 171, 217, 0.3);
  border: 1px solid #70c0e7;
  border-left: 5px solid #73797d;
  border-bottom: none;
}
.dark-theme #sidebar #element-list table tr.elements-item td > div .panel-group .panel.container.sub-elements.active .panel-body.row,
.dark-theme #sidebar #diagram-list table tr.elements-item td > div .panel-group .panel.container.sub-elements.active .panel-body.row {
  border: 1px solid #70c0e7;
  border-left: 5px solid #73797d;
  border-top: none;
}
.dark-theme #sidebar #element-list table tr.elements-item td > div .panel-group .panel.container.parent-element, .dark-theme #sidebar #element-list table tr.elements-item td > div .panel-group .panel.container.parent-diagram,
.dark-theme #sidebar #diagram-list table tr.elements-item td > div .panel-group .panel.container.parent-element,
.dark-theme #sidebar #diagram-list table tr.elements-item td > div .panel-group .panel.container.parent-diagram {
  background: #3c3f41;
}
.dark-theme #sidebar #element-list table tr.elements-item td > div .panel-group .panel .panel-heading .sub-element,
.dark-theme #sidebar #diagram-list table tr.elements-item td > div .panel-group .panel .panel-heading .sub-element {
  color: inherit;
  padding-left: 4px;
}
.dark-theme #sidebar #element-list .diagramsProElementContainer ul a,
.dark-theme #sidebar #diagram-list .diagramsProElementContainer ul a {
  color: #bbb;
}
.dark-theme #sidebar #element-list .diagramsProElementContainer ul li:hover i::before,
.dark-theme #sidebar #diagram-list .diagramsProElementContainer ul li:hover i::before {
  color: white;
}
.dark-theme #sidebar #element-list .diagramsProElementContainer ul ul,
.dark-theme #sidebar #diagram-list .diagramsProElementContainer ul ul {
  background-color: #3c3f41;
  border: 1px solid #616669;
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.4470588235);
}
.dark-theme #sidebar #element-list .diagramsProElementContainer ul ul li:hover,
.dark-theme #sidebar #diagram-list .diagramsProElementContainer ul ul li:hover {
  background: #484c4e;
}
.dark-theme #sidebar .impacted-header {
  background-color: #484c4e;
  border-bottom: 1px solid #616669;
  color: #bbb;
}
.dark-theme #sidebar #diagram-list .panel.container.sub-elements.active .panel-body.row {
  border-bottom: 1px solid #616669 !important;
}
.dark-theme #sidebar #diagram-list .panel.container.sub-elements.active .diagram-representation .panel-body.row {
  border-bottom: 1px solid #70c0e7 !important;
}
