:root {
  --color-0: rgb(224, 231, 238);
  --color-0-dark:       #cad1d3;
  --color-0-darkest: #809ab2;
  --color-0-dark-hover: rgba(101, 153, 217, 0.24);

  --color-1:            #ffffff;

  --color-2: rgb(82, 213, 1);

  --color-3:            rgb(16, 67, 115);
  --color-3-light: rgb(136, 163, 185);
  --color-3-dark: rgb(10, 47, 80);
  --color-3-focus: rgba(55, 135, 245, 0.5);

  --color-4: #ff9100;

  --color-primary:      var(--color-3);
  --color-primary-text: var(--color-1);
  --color-primary-dark: var(--color-3-dark);

  --color-control:      var(--color-0);
  --color-control-dark: var(--color-0-dark);
  --color-control-darkest: var(--color-0-darkest);
  --color-control-hover: var(--color-0-dark-hover);
  --color-control-hover-text: var(--color-0-dark-hover);

  --color-window:       var(--color-1);
  --color-window-border: var(--color-0-dark);
  --color-window-text:  var(--color-3);
  --color-window-text-deemph:  var(--color-3-light);

  --color-accent:       var(--color-2);

  --color-alert:        var(--color-4);
  --color-alert-text:   var(--color-1);

  --color-focus-border:  var(--color-3-focus);
  --color-focus-boxshadow: var(--color-0-dark-hover);

  --color-header:       var(--color-3);
  --color-header-text:  var(--color-1);

  --color-spinner:      var(--color-primary);


  --animate-veryfast: 0.13s;
  --animate-fast: 0.2s;
  --animate-normal: 0.5s;
  --animate-slower: 0.759s;
  --animate-slow: 1s;

  --border-radius:      15px;
  --border-radius-smaller: 7px;
  --border-radius-small: 6px;

  --shadow-popup: 				    5px 5px 16px 3px rgba(0,0,0,0.2);
  --shadow-popup-small: 			2px 2px 16px 0px rgba(0,0,0,0.2);
}