:root {
  --color-white: #FFF;
  --color-off-white: #F3F6F9;

  --color-black: #000000;
  --color-gray: #4E5A66;
  --color-gray-dark: #06172A;
  --color-gray-light: #8B9AA8;
  --color-gray-darkest: #111111;
  --color-gray-lighter: #a7b3bd;
  --color-gray-lightest: #d4d9df;

  --color-blue-light: #54a1f3;
  --color-blue-lighter: #92BCEA;
  --color-blue-lightest: #E4ECF2;

  --color-primary: #0F70D7;
  --color-success: #008081;
  --color-danger: #DF2721;
  --color-warning: purple;
  --color-offline: var(--color-gray-light);

  --color-background: var(--color-gray-dark);

  --color-text: var(--color-gray);
  --color-heading: var(--color-gray-dark);

  --color-link: var(--color-primary);
  --color-link-hover: #2687ef;

  --color-gray-label: var(--color-gray);

  --color-transparent: #ff000000;
  --color-tip-bg: #333333;

  --color-white-with-transparency: #ffffff40;

  --loader-bg: var(--color-gray-dark);
  --loader-bullet: var(--color-white);
  --user-list-bg: var(--color-off-white);

  --unread-messages-bg: var(--color-danger);
  --user-list-text: var(--color-gray);

  --user-thumbnail-border: var(--color-gray-light);
  --user-thumbnail-text: var(--user-thumbnail-border);

  --voice-user-bg: var(--color-success);
  --voice-user-text: var(--color-white);

  --moderator-text: var(--color-white);
  --moderator-bg: var(--color-primary);

  --sub-name-color: var(--color-gray-light);

  --user-icons-color: var(--color-gray-light);
  --user-icons-color-hover: var(--color-gray);

  --list-item-bg-hover: #dce4ed;
  --item-focus-border: var(--color-blue-lighter);
}