: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-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-dark: var(--color-gray-dark);
  --color-bg-warning: var(--color-yellow);
  --color-danger: var(--color-red);
  --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-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;
}