:root {
  --color-white: #ffffff;
  --color-gray-light: #f3f6fa;
  --color-gray-light-2: #dfe8f3;
  --color-gray-light-3: #c8d4e3;
  --color-gray-light-4: #ebf0f8;
  --color-gray-light-5: #f8f8f9;
  --color-gray-medium: #a2b1c6;
  --color-gray-dark: #506784;
  --color-blue-medium: #119dff;
  --color-blue-dark: #0d76bf;
  --color-blue-dark-2: #2a3f5f;
  --color-red: #ef553b;
  --color-red-2: #de350b;
  --color-red-light: #ffbdad;
  --color-yellow: #fbefcb;

  --color-bg-light: var(--color-gray-light);
  --color-bg-light-2: var(--color-gray-light-2);
  --color-bg-light-3: var(--color-gray-light-5);
  --color-bg-light-4: var(--color-gray-light-4);
  --color-bg-dark: var(--color-gray-dark);
  --color-bg-warning: var(--color-yellow);
  --color-bg-danger: var(--color-red-light);
  --color-danger: var(--color-red-2);
  --color-accent: var(--color-blue-medium);
  --color-accent-shade: var(--color-blue-dark);
  --color-border-light: var(--color-gray-light-2);
  --color-border: var(--color-gray-light-3);
  --color-border-dark: var(--color-gray-medium);
  --color-text-light: var(--color-white);
  --color-text-light-2: var(--color-gray-medium);
  --color-text-base: var(--color-gray-dark);
  --color-text-active: var(--color-blue-dark-2);
  --color-text-error: var(--color-red);

  --shadow: 0 1px 2px rgba(42, 63, 95, 0.7);
  --shadow-1: 0 2px 9px rgba(80, 103, 132, 0.2);

  --border-radius-big: 5px;
  --border-radius-medium: 3px;
  --border-radius-medium-2: 4px;
  --border-radius-small: 2px;
}

.plotly-editor--theme-provider {
  --sidebar-width: 112px;
}
