:root{
  --bg: #fafafa;
  --bg-html: whitesmoke;
  --bg-comp: white;
  --bg-link-hover: #E7EEFE;
  --bg-link-active: #E7EEFE;
  --bg-row-hover: #fafafa;
  --color: #444;
  --link-color: #000fff;

  /*--n1: #3F51B5;*/
  /*--n2: dodgerblue; */
  /*--n3: lightskyblue;*/
  --n1: white;
  --n2: white;
  --n3: white;

  --n1-font: #444;
  --n2-font: #6E9BF9;
  --n3-font: #3F51B5;

  /*--c1: #3F51B5;*/
  /*--c2: dodgerblue; */
  /*--c3: lightskyblue;*/
  --c1: #3e79f7;
  --c2: #6E9BF9;
  --c3: #3F51B5;

  --c1-font: white;
  --c2-font: white;
  --c3-font: white;

  --d1: #fafafa;
  --d2: #e1e1e1;
  --d3: #ddd;
  
  --d1-font: black;
  --d2-font: black;
  --d3-font: black;

  --d1-font-light: #666;
  --d2-font-light: var(--c2);
  --d3-font-light: var(--c2);

  --dt-color: #8A8E99;

  --theme-bg: var(--c1);
  --theme-font: var(--c1-font);

  --tag-bg: #e7eefe;
  --tag-font: #3e79f7;
  --tag-ok-bg: #c0f4e0;
  --tag-ok-font: #008053;
  --tag-ng-bg: #f6d3d6;
  --tag-ng-font: #d9505c;

  --border: 1px solid silver;
  --border-light: 1px solid #ddd;
  --border-dashed: 1px dashed silver;
  --border-dashed-hover:  1px dashed var(--c1);
  --box-shadow: 0 3px 3px 1px lightgrey;
  --left-nav-shadow: 0 0 5px 1px lightgrey;;

  /* primary button */
  --btn-primary-color: var(--c1-font);
  --btn-primary-bg: var(--c1);
  --btn-primary-border: 1px solid var(--c1);

  --btn-primary-hover-color: var(--c2-font);
  --btn-primary-hover-bg: var(--c2);
  --btn-primary-hover-border: 1px solid var(--c2);
  
  --btn-primary-active-color: var(--c3-font);
  --btn-primary-active-bg: var(--c3);
  --btn-primary-active-border: 1px solid var(--c3);

  /* secondary button */
  --btn-secondary-color: var(--d1-font);
  --btn-secondary-bg: var(--d1);
  --btn-secondary-border: var(--border);

  --btn-secondary-hover-color: var(--c2);
  --btn-secondary-hover-bg: transparent;
  --btn-secondary-hover-border:  1px solid var(--c2);
  
  --btn-secondary-active-color: var(--c3);
  --btn-secondary-active-bg: transparent;
  --btn-secondary-active-border: 1px solid var(--c3);

  /* tertiary button */
  --btn-tertiary-color: dimgrey;
  --btn-tertiary-bg: transparent;
  --btn-tertiary-border: 1px solid dimgrey;

  --btn-tertiary-hover-color: dimgrey;
  --btn-tertiary-hover-bg: transparent;
  --btn-tertiary-hover-border: 1px solid dimgrey;

  --btn-tertiary-active-color: dimgrey;
  --btn-tertiary-active-bg: transparent;
  --btn-tertiary-active-border: 1px solid dimgrey;

    /* warning button */
  --btn-warning-color: white;
  --btn-warning-bg: deeppink;
  --btn-warning-border: 1px solid deeppink;

  /* error */
  --err-bg: deeppink;
  --err-color: white;
  --err-border: 1px solid deeppink;
  --err-input-bg: rgba(255, 20, 147, 0.1);
}