/* COLORS */
:root {
  /* theme */
  --sage-black: #000000;
  --sage-white: #ffffff;
  --sage-dark: #404040;
  --sage-green: #008A21; /*green*/
  --sage-orange: #F28533; /*orange*/
  --sage-red: #CD384B; /*red*/
  --sage-blue: #3333ff; /*blue*/
  --sage-navy: #004B87; /*navy*/
  --sage-aqua: #177286; /*aqua*/
  --sage-pink: #CD0058; /*pink*/
  --sage-purple: purple;
  --sage-yellow: #fffecb;
  
  --sage-gray: #D9E0E4;
  --sage-gray-light: #F2F5F6;
  --sage-gray-dark: #546c78;

  --sage-primary: #007E45;
  --sage-primary-very-light: #D9ECE7;
  --sage-primary-light:#0ADC0A;
  --sage-primary-dark: #006738ff;
  --sage-secondary: #335B70;
  --sage-focused: #FFB500;
  --sage-focused-light: #ffe199;
  --sage-selected: ##CCD6DB;
  --sage-selected-light: #E6EBED;
  --sage-background: var(--sage-white);
  --sage-shadow: #cbcbc9;
  
  --sage-disabled-color: var(--sage-gray-dark);
  --sage-disabled-background: var(--sage-gray);
  
  
  --sage-border: 1px solid #a8a9a4;
  --sage-border-hover: 1px solid black;
  --sage-border-primary: 1px solid #007e45;
  --sage-border-focused: 2px solid #ffb500;
  
  --sage-mandatory: var(--sage-yellow);
  --sage-important: var(--sage-orange);
  --sage-important-light: var(--sage-yellow);
  --sage-sucess: var(--sage-green);
  --sage-warning: var(--sage-orange);
  --sage-error: var(--sage-red);
  --sage-information: var(--sage-navy);
  
  --sage-font-size-small: 11px;
  --sage-font-size: 14px;
  --sage-font-size-big: 16px;
  --sage-font-size-very-big: 18px;
  --sage-font-size-ultra-big: 24px;
  --sage-font-size-important:var(--sage-font-size-big);
  --sage-font-weight-important: normal;
  
  --sage--border-size: 5px;
  
  --sage-font-family: SageUI, Arial, Helvetica;
  --sage-font-icons: "Sage Armonye Icons";
  
  --sage-logo: url(../img/sage-logo.svg);
  --sage-logo-border-radius: 20px;
  --sage-logo-background: var(--sage-black);
 
  --sage-menu-primary-background: #E6EBED;	
  --sage-menu-secondary-background: #CCD6DB;
  --sage-menu-primary-color: var(--sage-black);
  --sage-menu-secondary-color: var(--sage-black);
  
  --sage-menu-active-background: var(--sage-primary);
  --sage-menu-active-color: var(--sage-white);

  --sage-hover-menu-background: var(--sage-primary);
  --sage-hover-menu-color: var(--sage-white);
  
  --sage-msgLevel1: var(--sage-green);
  --sage-msgLevel2: var(--sage-orange);
  --sage-msgLevel3: var(--sage-red); 
  --sage-msgLevel4: var(--sage-blue);
  --sage-msgLevel5: var(--sage-navy);
  --sage-msgLevel6: var(--sage-aqua);
  --sage-msgLevel7: var(--sage-pink);
  --sage-msgLevel8: var(--sage-gray);
  --sage-msgLevel9: var(--sage-black);
   
  /* site */
  --body-background: var(--sage-background);
  --topbar-background: var(--sage-black);
  
  /* app */
  --app-title-font-size: var(--sage-font-size-ultra-big);
  --app-title-font-weight: bold;
  --app-title-color: var(--sage-primary);
  
  /* forms */
  --form-title-background: var(--sage-black);
  --form-title-color: var(--sage-white);
  --form-title-height: 32px;
  --form-background: var(--sage-white);

  /* forms */
  --dialog-title-background: var(--sage-black);
  --dialog-title-color: var(--sage-white);
  --dialog-title-height: 40px;
  
  --form-overlay-vband: rgba(255,255,255,0.75);
  --form-overlay-background: var(--sage-white);
  
  /* wizard*/
  --wizard-title-background: var(--sage-white);
  --wizard-title-color: var(--sage-primary);
  --wizard-title-font-size: var(--sage-font-size-ultra-big);
  --wizard-title-font-weight: bold;
  --wizard-welcome-title-color: var(--sage-primary);
  
  /* menu */
  --menu-font-size: 14px;
  --menu-background: var(--sage-menu-primary-background);
  --menu-color: var(--sage-menu-primary-color);
  --menu-shadow: var(--sage-shadow);
  
  --menu-main-background: var(--sage-white);
  --menu-main-color: var(--sage-black);
  --menu-hover-main-background: var(--sage-primary);
  --menu-hover-main-color: var(--sage-white);
  --menu-hover-main-border-bottom: var(--sage-border-focused); 

  --menu-hover-background: var(--sage-hover-menu-background);
  --menu-hover-color:var(--sage-hover-menu-color);
  --menu-hover-bottom:solid var(--sage-border-size) var(--sage-primary-dark);
  
  --menu-active-color: var(--sage-primary);
  --menu-active-bottom:solid var(--sage-border-size) var(--sage-focused);
  
  --menu-group-background: var(--sage-primary);
  --menu-group-color: var(--sage-white);

  /* Treebook */
  --treebook-background: var(--sage-white);
  
  /* navTabs*/
  --navtabs-border-bottom: 1px solid var(--sage-black);

  /* Main Tab */
  --tabs-background: var(--sage-white);
  --tabs-height: 48px;
  
  --tab-font-size: var(--sage-font-size-big);

  --tab-active-background: var(--sage-menu-secondary-background);
  --tab-active-color: var(--sage-menu-secondary-color);
  --tab-active-border-top:solid var(--sage-border-size) var(--sage-focused);

  --tab-background: var(--sage-menu-primary-background);
  --tab-color: var(--sage-menu-primary-color);
  --tab-border-top:solid var(--sage-border-size) var(--sage-focused);
  --tab-subtitle-color: var(--sage-primary);

  /* Tab panel*/
  --ptab-color: var(--sage-black);
  --ptab-background: var(--sage-white);
  --ptab-font-weight: normal;
  
  --ptab-active-color: var(--sage-primary);
  --ptab-active-background: var(--sage-white);
  --ptab-active-font-weight: normal;

  --ptab-hover-color: var(--sage-primary);
  --ptab-hover-background: var(--sage-white);
  --ptab-hover-font-weight: medium;
  
  --splitter-background: var(--sage-gray-dark);

  /* components */
  --title-color: var(--sage-primary);
  --title-background: var(--sage-white);
  --title-font-size: var(--sage-font-size-ultra-big);
  --title-font-weight: medium;
  
  --tree-color: var(--sage-black);
  --tree-font-weight: medium;
  --tree-hover-color: var(--sage-black);
  --tree-hover-font-weight: bold;
  
  --panel-background: var(--sage-menu-primary-background);
  --panel-margin-right: 0px;
  --panel-color: var(--sage-menu-primary-color);
  
  --panel-title-height: 32px;
  --panel-title-margin-left: 0px;
  --panel-title-margin-top: 0px;
  --panel-title-color: var(--sage-menu-secondary-color);
  --panel-title-background: var(--sage-menu-secondary-background);
  --panel-title-font-size: var(--sage-font-size-big);
  --panel-title-font-weight: medium;
  
  --panel-hover-title-color: var(--sage-menu-secondary-color);
  --panel-hover-title-background: var(--sage-menu-secondary-background);
  --panel-hover-title-font-size: var(--sage-font-size-big);
  --panel-hover-title-font-weight: medium;
  
  --panel-title-active-color: var(--sage-menu-active-color);
  --panel-title-active-background: var(--sage-menu-active-background);
  --panel-title-active-font-size: var(--sage-font-size-big);
  --panel-title-active-font-weight: normal;
  
  --panel-caption-color: var(--sage-white);
  --panel-caption-background: var(--sage-primary);
  --panel-caption-font-size: var(--sage-font-size-big);
  --panel-caption-font-weight: medium;
  --panel-caption-height: var(--panel-title-height);

  --subtitle-color: var(--sage-primary);
  --subtitle-font-size: var(--sage-font-size-big);
  
  --text-font-size: var(--sage-font-size);
  --text-color: var(--sage-black);
  --text-mandatory-background: var(--sage-mandatory);
  --text-mandatory-color: var(--sage-black);
  --text-private-background: inherited;
  --text-private-color: var(--sage-purple);
  --text-disabled-color: var(--sage-disabled-color);
  --text-warning-color: var(--sage-warning);
  --text-error-color: var(--sage-error);
  --text-important-color: var(--sage-important);
  
  --status-color: var(--sage-primary);
  --status-font-size: var(--sage-font-size);
  --status-font-weight: bold;
 
  --edit-font-size: var(--sage-font-size);
  --edit-background: var(--sage-gray-light);
  --edit-disabled-color: var(--sage-disabled-color);
  --edit-disabled-background: var(--sage-disabled-background);

  --header-color: var(--sage-white);
  --header-font-size: var(--sage-font-size);
  
  --gevel-color: var(--sage-black);
  --gevel-font-size: var(--sage-font-size-big);
  --gevel-font-weight: medium;
  
  --toolbar-button-color: var(--sage-primary);
  --toolbar-button-background: var(--sage-white);
  --toolbar-button-font-size: var(--sage-font-size-big);
  --toolbar-button-font-weight: medium;

  --toolbar-button-disabled-color: var(--sage-disabled-color);
  --toolbar-button-disabled-background: var(--sage-white);
  --toolbar-button-disabled-font-size: var(--sage-font-size-big);
  --toolbar-button-disabled-font-weight: medium;
  
  --link-color: var(--sage-primary);
  --link-font-weight: normal;
  --link-hover-color: var(--sage-primary);
  --link-hover-font-weight: bold;
  --link-disabled-color: var(--sage-disabled-color);
  
  --dropdown-background: var(--menu-background);
  --dropdown-color:var(--menu-color);
  --dropdown-hover-background: var(--menu-hover-background);
  --dropdown-hover-color:var(--menu-hover-color);
  
  --grid-row-height: 24px;
  --grid-cube-row-height: 24px;
  
  --grid-color-1: var(--sage-primary-very-light);
  --grid-color-2: var(--sage-gray-light);
  --grid-color-3: var(--sage-primary-light);
  --grid-color-4: var(--sage-selected-light);
  --grid-color-5: var(--sage-selected);
  --grid-total-background: var(--sage-important-light);
  --grid-total-color: inherited;

  --button-height: 38px;  
  --button-color: var(--sage-primary);
  --button-background: var(--sage-white);
  --button-border: var(--sage-border-primary);
  --button-font-weight: medium;

  --button-hover-color: var(--sage-white);
  --button-hover-background: var(--sage-primary);
  --button-hover-border: var(--sage-border-hover);
  --button-hover-font-weight: normal;

  --button-focused-color: var(--sage-primary);
  --button-focused-background: var(--sage-white);
  --button-focused-border: var(--sage-border-focused);
  --button-focused-font-weight: normal;

  --button-primary-color: var(--sage-white);
  --button-primary-background: var(--sage-primary);
  --button-primary-hover-color: var(--sage-white);
  --button-primary-hover-background: var(--sage-primary-dark);

  --button-secondary-color: var(--sage-primary);
  --button-secondary-background: var(--sage-white);
  --button-secondary-hover-color: var(--sage-white);
  --button-secondary-hover-background: var(--sage-primary);

  --button-disabled-color: var(--sage-disabled-color);
  --button-disabled-background: var(--sage-disabled-background);
  --button-disabled-hover-color: var(--sage-gray-dark);
  --button-disabled-hover-background: var(--sage-gray);
  --button-disabled-hover-border: none;

  --button-cancel-color: var(--sage-primary);
  --button-cancel-background: var(--sage-white);
  --button-cancel-hover-color: var(--sage-primary);
  --button-cancel-hover-background: var(--sage-white);
 
  --zindex-menu: 1000;
  --zindex-modal: 10000;
  --zindex-combo: 10001;
}

/* FONTS */

input, textarea, select { font-family:inherit; }

@font-face {
  font-family: 'SageUI';
  src: url('/fonts/SageUI/Sage_UI-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SageUI';
  src: url('/fonts/SageUI/Sage_UI-Bold.woff') format('woff');
  font-weight: bold;
  font-style: bold;
}