.splitter {
  background-color: var(--bs-gray-400);
}
.splitter.hor {
  height: 10px;
  cursor: row-resize;
  display: block;
}
.splitter.vert {
  width: 10px;
  cursor: col-resize;
  display: inline-block;
}
.splitter.splitter-active {
  background-color: var(--bs-gray-500);
}

.splitter-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0;
}

.modal-footer .btn {
  min-width: 75px;
}

#divImageModal .card img {
  max-height: 200px;
  width: fit-content;
}

#divToolbar {
  border-bottom: 1px solid var(--bs-gray-500);
  padding: 5px;
  white-space: nowrap;
}
#divToolbar .wrapper {
  display: inline-block;
  margin-right: 5px;
}
#divToolbar .splitter {
  display: inline-block;
  width: 10px;
}
#divToolbar .dropdown .btn:first-child {
  margin-right: 5px;
}

#divMain {
  display: flex;
  flex-direction: row;
}

#divLeftPanel {
  background-color: var(--bs-gray-100);
  min-width: 200px;
  overflow: hidden;
  width: 300px;
}
#divLeftPanel .tab-pane {
  height: 100%;
  overflow: auto;
}

#divComponents {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}
#divComponents .component-group-header {
  background-color: hsla(230, 15%, 30%, 0.2);
  padding: 5px 10px;
}
#divComponents .component-group-header:hover {
  background-color: hsla(230, 15%, 30%, 0.24);
}
#divComponents .component-item {
  cursor: pointer;
  display: flex;
  padding: 5px 10px;
}
#divComponents .component-item:hover {
  background-color: var(--bs-gray-200);
}
#divComponents .component-item:active {
  background-color: var(--bs-blue);
  color: var(--bs-white);
}
#divComponents .component-item .component-icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

#divStructure {
  font-size: 12px;
  font-weight: 500;
  padding: 10px;
}
#divStructure ul {
  list-style-type: none;
  margin: 0 0 0 20px;
  padding: 0;
}
#divStructure ul.list-top {
  margin-left: 0;
}
#divStructure ul li {
  white-space: nowrap;
}
#divStructure ul li .node {
  cursor: default;
  display: inline-block;
  margin-bottom: 1px;
  margin-left: -5px;
  padding: 0px 5px;
}
#divStructure ul li .node:hover {
  background-color: var(--bs-gray-200);
}
#divStructure ul li .node:hover .node-btn {
  color: var(--bs-primary);
}
#divStructure ul li .node .node-text {
  display: inline-block;
}
#divStructure ul li .node .node-btn {
  border-radius: 4px;
  color: var(--bs-gray-300);
  cursor: pointer;
  display: inline-block;
  margin-left: 5px;
  padding: 0px 5px;
}
#divStructure ul li .node .node-btn:last-child {
  margin-right: -5px;
}
#divStructure ul li .node .node-btn:hover {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}
#divStructure ul li.has-error .node-text {
  color: var(--bs-danger);
  text-decoration: line-through;
}
#divStructure ul li.item-mimic .node {
  cursor: pointer;
}
#divStructure ul li.item-mimic .node.selected {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}

#divSplitter {
  border-left: 1px solid var(--bs-gray-500);
  border-right: 1px solid var(--bs-gray-500);
}

#divMimicWrapper {
  background-color: var(--bs-gray-100);
}

#divToastContainer {
  bottom: 0;
  padding: 1rem;
  position: fixed;
  right: 0;
}

/* Tweakpane */
#tweakpane {
  --tp-base-background-color: hsla(230, 5%, 90%, 1.00);
  --tp-base-shadow-color: transparent;
  --tp-button-background-color: hsla(230, 7%, 75%, 1.00);
  --tp-button-background-color-active: hsla(230, 7%, 60%, 1.00);
  --tp-button-background-color-focus: hsla(230, 7%, 65%, 1.00);
  --tp-button-background-color-hover: hsla(230, 7%, 70%, 1.00);
  --tp-button-foreground-color: hsla(230, 10%, 30%, 1.00);
  --tp-container-background-color: hsla(230, 15%, 30%, 0.20);
  --tp-container-background-color-active: hsla(230, 15%, 30%, 0.32);
  --tp-container-background-color-focus: hsla(230, 15%, 30%, 0.28);
  --tp-container-background-color-hover: hsla(230, 15%, 30%, 0.24);
  --tp-container-foreground-color: hsla(230, 10%, 30%, 1.00);
  --tp-groove-foreground-color: hsla(230, 15%, 30%, 0.10);
  --tp-input-background-color: hsla(230, 15%, 30%, 0.10);
  --tp-input-background-color-active: hsla(230, 15%, 30%, 0.22);
  --tp-input-background-color-focus: hsla(230, 15%, 30%, 0.18);
  --tp-input-background-color-hover: hsla(230, 15%, 30%, 0.14);
  --tp-input-foreground-color: hsla(230, 10%, 30%, 1.00);
  --tp-label-foreground-color: hsla(230, 10%, 30%, 0.70);
  --tp-monitor-background-color: hsla(230, 15%, 30%, 0.10);
  --tp-monitor-foreground-color: hsla(230, 10%, 30%, 0.50);
  --tp-base-border-radius: 0;
  --tp-base-font-family: var(--bs-body-font-family);
}
#tweakpane .tp-rotv {
  font-size: 12px;
}
#tweakpane .rs-array-item {
  cursor: pointer;
}
#tweakpane .rs-array-item.rs-selected {
  background-color: var(--bs-primary);
  padding-bottom: 2px;
  padding-top: 2px;
}
#tweakpane .rs-array-item.rs-selected .tp-lblv_l {
  color: var(--bs-white);
}

/* Popovers */
.image-preview {
  max-height: 100px;
  max-width: 100px;
  width: fit-content;
}

/* Modals */
#divTextEditor .editor {
  border: 1px solid var(--bs-border-color);
  height: 300px;
  overflow: auto;
  position: relative;
  resize: vertical;
}
