:root {
   /* Colors */
   --cxPrimary-color: #37474f;
   --cxPrimary-color-light: #62727b;
   --cxBackground-color: #fafafa;
   --cxBackground-color-header: #f5f5f5;
   --cxBackground-color-header-darker: #f0f0f0;
   --cxGrey: #737373;
   --cxRed: #f44336;
   --cxGrey-light: #dddddd;
   --cxIcon-color: #9e9e9e;
   --cxAlert-color: #0094fe;
   --cxDanger-color: #DC3545;

   /* Spacing */
   --spacingCC: 16px;

   /* Font */
   --hintTextFontSize: 11px;
   --defaultFontSize: 14px;
   --warningTextFontSize: 18px;

   /* Dialog */
   --dialogSize: 768px;
   --dialogFooterHeight: 53px;
   --dialogHeaderHeight: 56px;
   --maxDialogContentHeight: calc(var(--dialogSize) - var(--dialogHeaderHeight) - var(--dialogFooterHeight));
   --dialogBorderRadius: 0.375rem;

   /* AppBar */
   --appBarHeight: 64px;

   /* Grid */
   --gridRowHeight: 30px;
   --gridHeaderHeight: 35px;

   /* Favorites */
   --favoritesWidth: 200px;
   --favoritesCmbHeight: 310px; /* One item is about 30px and 10 should be displayed without scrolling */

   /* Mobile */
   --navElementSize: 72px;
   --mobileNavElementOpacity: 0.6;

   /* TreeList */
   --selectedItemColor: rgba(98, 114, 123, 0.2);

   /* Icons */
   --iconSize: 24px;
   --iconMarginSize: 5px;

   /* DxTabs */
   --dxTabHeight: 42px;
   --dxTabHeightWithCaption: 111px;

   /* Controls */
   --controlBorderRadius: 3px;
   --controlHoverBackgroundColor: rgba(0, 0, 0, 0.1);
   --controlBorderColor: rgb(206, 212, 218);
   --controlBorder: 1px solid var(--controlBorderColor);

   /* AppFrame */
   /* The variables are in loaded from _content/Vivendi.Blazor.BaseComponents/css/variables.css therefore the ide is not able to find them */
   --cc-main-menu-height: var(--cx-main-menu-height);
   --cc-sub-menu-height: var(--cx-sub-menu-height);
   --cc-left-bar-width: var(--cx-left-bar-width);
   --cc-filter-menu-width: var(--cx-filter-menu-width);
   --cc-context-flyout-max-height: var(--cx-context-flyout-max-height);
   --sub-menu-hover-bg: #58676f;
   --sticker-background: #232D32;
   --appbar-color: var(--cxPrimary-color);
   --org-theme-secondary-hover: #EAEAEA;
   --menu-item-bg-color: rgba(0, 0, 0, 0.2);
   --primary-color-lighter: var(--cxPrimary-color-light);
   --primary-color-lighter-rgb: rgb(98, 114, 123);

   /* LeftBar */
   --cc-left-bar-border-color: rgba(0,0,0,0.12);
}