:root {
  --header-height: 50px;

  --main-content-width-min: 600px;
  --main-content-width-max: 800px;
  --sidebar-width: 300px;

  --main-colour: #f2381e; 
  --main-highlight-colour: #fe583e;
  --leader-colour: #861420;
  --leader-highlight-colour: #bb304a;
  --standby-colour: #00d278; 
  --standby-highlight-colour: #20f298; 
  --secondary-colour: #ddd;
  --secondary-highlight-colour: #f6f6f6;

  --body-bg: #eee;
  --main-bg: #fff;
  --header-bg: #fff; 
  --sidebar-bg: var(--main-colour); 
  --list-bg: #fff;
  --table-bg: #fff;

  --button-bg: var(--main-colour); 
  --button-bg-hover:var(--main-highlight-colour); 
  --secondary-button-bg: var(--secondary-colour);
  --secondary-button-bg-hover: var(--secondary-highlight-colour);
  --sidebar-button-bg: var(--secondary-button-bg);
  --sidebar-button-bg-hover: var(--secondary-button-bg-hover);

  --text: #222;
  --sidebar-text: #fff; 
  --button-text: #fff;
  --secondary-button-text: #444;
  --table-text: var(--text);

  --button-border-radius: 3px;
  --list-border: #222;

  --table-font-size: 12px;
}

.full-width {
  --main-content-width-max: calc(100% - 50px);
}

.standby {
  --sidebar-bg: var(--standby-colour);

  --button-bg: var(--standby-colour); 
  --button-bg-hover:var(--standby-highlight-colour); 
}

.leader {
  --sidebar-bg: var(--leader-colour);

  --button-bg: var(--leader-colour);
  --button-bg-hover:var(--leader-highlight-colour);
}