:root {
  --primary-font-family: "Roboto", sans-serif;
  --primary-color: #222;
  --primary-font-size: 15px;
  --primary-gap: 15px;
  --primary-column-gap: 10px;
  --primary-line-gap: 5px;
  --primary-row-gap: 10px;
  --wnt-droppable-file-target-background: repeating-linear-gradient(45deg, white, white 10px, #ddd 10px, #ddd 20px);
  --wnt-droppable-file-target-border: 1px solid #666;
  --wnt-droppable-file-target-dragover-background: repeating-linear-gradient(45deg, white, white 10px, #fdd 10px, #fdd 20px);
  --wnt-droppable-file-target-dragover-border: 1px solid #666;
  --wnt-base-hover-background-color: #f0f0f0;
  --wnt-base-inactive-text-color: #6f6f6f;
  --wnt-base-box-border-color: #268db577;
  --wnt-base-box-border: 1px solid var(--wnt-base-box-border-color);
  --wnt-base-selected-background-color: #ccd9ff;
  --wnt-base-active-color: #c1488a;
  --wnt-base-active-color-2: #e785bb;
  --wnt-base-em-background-color: #f0f4ff;
  --wnt-mainmenu-hover-background-color: var(--wnt-base-hover-background-color);
  --wnt-mainmenu-drag-border-color: #d0d0d0;
  --wnt-mainmenu-selected-background-color: var(--wnt-base-selected-background-color);
  --wnt-mainmenu-selected-border: var(--wnt-base-box-border);
  --wnt-mainmenu-selected-color: #222;
  --wnt-mainmenu-color: var(--wnt-base-inactive-text-color);
  --wnt-list-hover-color: var(--wnt-base-hover-background-color);
  --wnt-tag-border: 1px solid #ccc;
  --wnt-tag-background-color: #f7f7f7;
  --wnt-button-primary-background: #4169e1;
  --wnt-button-primary-color: white;
  --wnt-button-secondary-background: #d8e2ff;
  --wnt-button-secondary-color: #2f3777;
  --wnt-button-error-color: #310000;
  --wnt-button-delete-background: #ffe9e9;
  --wnt-button-delete-color: red;
  --wnt-dialog-hf-background: #baccff;
  --wnt-dialog-hf-border: 1px solid #4169e1;
  --wnt-dialog-error-hf-background: #ffe9e9;
  --wnt-dialog-error-hf-border: 1px solid red;
  --wnt-dialog-error-button-background: #ffb8b8;
  --wnt-form-lr-background: #baccff;
  --wnt-form-lr-border: 1px solid #4169e1;
  --wnt-error-color: red;
  --wnt-warning-color: #ff8c00;
  --wnt-link-color: #972965;
}

html {
  font-size: var(--primary-font-size);
  color: var(--primary-color);
}

body {
  font-family: var(--primary-font-family);
  visibility: hidden;
  flex-direction: column;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  display: flex;
  position: relative;
}

input, textarea {
  font-family: var(--primary-font-family);
  color: var(--primary-color);
}

html, body {
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

[popover] {
  color: var(--primary-color);
}

dialog[open]::backdrop {
  background-color: #baccff66;
}

#dragDropProvider {
  pointer-events: none;
  border: 1px solid #222;
  border-radius: 3px;
  padding: 10px;

  & .listWithIcons {
    flex-direction: column;
    gap: 5px;
    max-width: 300px;
    display: flex;

    & .listItem {
      align-items: center;
      gap: 5px;
      display: flex;

      & .listItemCaption {
        white-space: pre;
        text-overflow: ellipsis;
        flex: 1;
        overflow: hidden;
      }
    }
  }
}