/* css variables */
:root {
   /* ------------------- login page --------------------------------------*/
   --login-bg: #c0c0c0;
   --login-button-color: #fff;
   --login-button-bg: #808080;	
	
   /* ------------------- menu - top row ---------------------------------*/
   --menu-v-padding: 0.8rem;          /* controls menu height in desktop mode */
   --menu-color: rgb(255 255 255/0.65); 
   --menu-bg: #006699;
   
   --menu-color-hover: rgb(255 255 255/0.85);
   --menu-bg-hover: #0077B3;
   
   --menu-active-color: #fff;
   --menu-active-bg: #7BA7E1;
   
    /* ------------------- sub-menu - second row --------------------------*/
    /*
      "submenu" bar (not handled by navbar) uses 6 colors (OLD: 4 colors)
      Note that one color is fixed: color of the submenu items should be the same as active color of top menu,
      in order to visually blend 
        so "--submenu-bg"="menu-active-bg" and effective number of selectable colors is 5 (OLD: 3)     
    */
   --submenu-color: rgb(0 0 0/0.8);
   --submenu-bg: var(--menu-active-bg);
   
   --submenu-color-hover: rgb(0 0 0/0.9);
   --submenu-bg-hover: #8FB4E6;
   
   --submenu-active-color: #000;
   --submenu-active-bg: #B8D0EF;
   
 
   /* -------------------- headings  -------------------------------------*/  
   --heading-color: #000;
   --heading-bg: #ccc;
  
   /* -------------------- buttons  --------------------------------------*/ 
   --button-color: #fff;
   --button-bg: #a0a09f;
   --button-color-hover: #00acec;
   --button-bg-hover: #fff;
}


/* translate variables for navbar.css */
:root {
   --nv-item-color: var(--menu-color);
   --nv-text-color: var(--menu-color);
   --nv-bg: var(--menu-bg);
   
   --nv-item-hover-color: var(--menu-color-hover);
   --nv-item-hover-bg: var(--menu-bg-hover);
   
   --nv-item-active-color: var(--menu-active-color);
   --nv-item-active-bg: var(--menu-active-bg);

  /* 
     navbar deeper menus have own separate colors. 
     (default is light background and dark font - opposite than top level
     currently, for simplicity, we are using the same colors as top level,
     but it is possible to add new css variables to customze deeper menus as well
   */
   --nv-subnav-item-color: var(--menu-color);
   --nv-subnav-item-bg: var(--menu-bg);
   
   --nv-subnav-item-hover-color: var(--menu-color);
   --nv-subnav-item-hover-bg: var(--menu-bg-hover);
   
   --nv-subnav-item-active-color: var(--menu-active-color);
   --nv-subnav-item-active-bg: var(--menu-active-bg);
    
}