:root {
	--black-8: 234, 234, 234;
	--black-20: 200, 200, 200;
	--black-100: 0, 0, 0;
	--black-alpha-6: rgba(var(--black-100), .06);
	--black-alpha-10: rgba(var(--black-100), .1);
	--black-alpha-20: rgba(var(--black-100), .2);
	--palette-primary: 0, 120, 212;

	--header-height: 49px;

	--text-primary-color: rgba(0, 0, 0, .9);
	--text-secondary-color: rgba(0, 0, 0, .55);
	--text-disabled-color: rgba(var(--black-100), .38);

	--nav-active-group-background: rgba(var(--black-100), 0.06);
	--nav-background-color: rgba(var(--black-8), 1);

	--minified-sidebar-width: 50px;
	--sidebar-width: 245px;

	--callout-background-color: rgba(255, 255, 255, 1);
	--callout-shadow-color: rgba(0, 0, 0, .132);
	--callout-shadow-secondary-color: rgba(0, 0, 0, .108);

	--active-background: rgba(0, 120, 212, 1);
	--active-foreground: rgba(0, 90, 158, 1);

	/* To customize and automate generation*/
	--primary-shade-30: 0, 69, 120;

	--tenant-bg-sidemenu: 255, 255, 255;
	--tenant-border-sidemenu: 1px solid var(--black-alpha-10, rgba(0, 0, 0, .1));
}