:root {
  --diagram-maker-border-shadow-15-perc: rgba(0, 28, 36, 0.15);
  --diagram-maker-border-shadow-30-perc: rgba(0, 28, 36, 0.3);
  --diagram-maker-border-color: #eaeded;
  --diagram-maker-container-background-color: white;
  --diagram-maker-container_disabled-background-color: lightgray;
  --diagram-maker-canvas-background-color: #f2f3f3;
  --diagram-maker-canvas-dots-color: #d5dbdb;
  --diagram-maker-connector-color: #16191f;
  --diagram-maker-input-background-color: inherit;
  --diagram-maker-input-border: 1px solid #767676;
  --diagram-maker-line-color: #879596;
  --diagram-maker-placeholder-text-color: inherit;
  --diagram-maker-text-color: black;
}

:root {
  .dm-dark-theme {
    --diagram-maker-border-shadow-15-perc: rgba(234, 237, 237, 0.15);
    --diagram-maker-border-shadow-30-perc: rgba(234, 237, 237, 0.3);
    --diagram-maker-border-color: #b7baba;
    --diagram-maker-container-background-color: #414750;
    --diagram-maker-container_disabled-background-color: #1a2029;
    --diagram-maker-canvas-background-color: #687078;
    --diagram-maker-canvas-dots-color: #a6a7a7;
    --diagram-maker-connector-color: lightgray;
    --diagram-maker-input-background-color: #1a2029;
    --diagram-maker-input-border: 1px solid #879596;
    --diagram-maker-line-color: #edfbfc;
    --diagram-maker-placeholder-text-color: #687078;
    --diagram-maker-text-color: #d5dbdb;
  }
}
