:root {
  /* Shell size */
  --header-height: 80px;
  --menu-expanded-width: 260px;
  --menu-collapsed-width: 70px;
  --menu-border-width: 1px;
  --sub-header-height: 120px;
  --outlet-container-padding-top-height: 10px;
  --outlet-container-padding-bottom-height: 20px;
  --outlet-container-padding-width: 30px;

  /* Main color */
  --primary-color: #404040;
  --secondary-color: #535353;
  --third-color: #e7e7e7;
  --fourth-color: #cdcdcd;
  --accent-color: #0362bf;
  --gradient: linear-gradient(
    to right,
    #0e8280,
    #00828c,
    #008297,
    #0081a1,
    #007fa9,
    #007aaa,
    #0075ab,
    #0070ab,
    #0068a5,
    #00609f,
    #005899,
    #005092
  );

  /* Fonts */
  --font-pack-primary: 'Noto Sans', 'Segoe UI', 'Open Sans';

  /* Ignore dynamic font sizes for now as our scope is currently not in supporting mobile devices. */
  --font-size-tiny: 0.8rem; /* clamp(0.9rem, 1.12rem + -0.1778vw, 1rem);*/
  --font-size-small: 0.9rem; /* clamp(1rem, 2.1rem + -0.8889vw, 1.5rem);*/
  --font-size-medium: 1rem; /* clamp(1.3rem, 2.4rem + -0.8889vw, 1.8rem);*/
  --font-size-large: 1.2rem; /* clamp(2.35rem, 3.45rem + -0.8889vw, 2.85rem);*/
  --font-size-extra-large: 2.3rem; /* clamp(2.35rem, 3.45rem + -0.8889vw, 2.85rem);*/

  /* URLs / Links */
  --link-color: #0362bf;

  /* Icons */
  --icon-size-tiny: var(--font-size-small);
  --icon-size-small: 1.2rem;
  --icon-size-medium: 1.6rem;
  --icon-size-large: 2.9rem;
  --icon-size-extra-large: 4.35rem;
  /*

  --icon-size-small: clamp(1.2rem, 1.86rem + -0.5333vw, 1.5rem);
  --icon-size-medium: clamp(1.6rem, 2.26rem + -0.5333vw, 1.9rem);
  --icon-size-large: clamp(2.9rem, 3.78rem + -0.7111vw, 3.3rem);
  --icon-size-extra-large: clamp(4.35rem, 3.45rem + -0.8889vw, 6.85rem);
   */

  /* Sidebar colors */
  --primary-sidebar-font-color: #ffffff;
  --sidebar-background-color: linear-gradient(
    to right bottom,
    #203142,
    #1d2d3c,
    #1a2836,
    #182431,
    #15202b
  );
  --sidebar-category-text-color: var(--third-color);
  --sidebar-header-text-color: var(--primary-sidebar-font-color);
  --sidebar-header-text-color-on-hover: var(--primary-sidebar-font-color);
  --sidebar-header-background-color-on-hover: var(--secondary-color);
  --sidebar-text-color: var(--primary-sidebar-font-color);
  --sidebar-text-color-on-hover: var(--primary-sidebar-font-color);
  --sidebar-collapse-icon-color: var(--third-color);
  --sidebar-collapse-icon-color-on-hover: var(--primary-sidebar-font-color);
  --sidebar-background-color-on-active: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  --sidebar-background-color-on-hover: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  --sub-menu-color-on-active: linear-gradient(to left, #0291c9, #3c658d);
  /* Tabs */
  --tab-text-color: #808080;
  --tab-selected-text-color: #404040;
  --tab-text-color-on-hover: #4b4b4b;
  --tab-selected-border-bottom-color: var(--accent-color);

  /* Gemeral */
  --main-title-text-color: #404040;
}