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

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

  --main-colour: #c0321c;
  --main-highlight-colour: #d94530;
  --leader-colour: #7a1120;
  --leader-highlight-colour: #a32840;
  --standby-colour: #00a85e;
  --standby-highlight-colour: #12be6e;
  --secondary-colour: #d8d8d8;
  --secondary-highlight-colour: #f0f0f0;

  --body-bg: #e6e6e6;
  --main-bg: #fafafa;
  --header-bg: #fafafa;
  --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: 5px;
  --list-border: #222;

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

.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);
}