:root {
    --font-PP: "Inter", helvetica, arial, sans-serif;
    --font-size-PP-base: 0.79em;
    --pp-default-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);

    --white: #ffffff;
    --black: #000000;

    --grey-50: #fafafa;
    --grey-100: #f5f5f5;
    --grey-200: #efefef;
    --grey-250: rgb(233, 233, 233); /* Tree default bg color */
    --grey-260: rgb(227, 227, 227); /* Tree default bg color on hover */
    --grey-300: #dbdbdb;
    --grey-400: #bebebe;
    --grey-410: #b8b8b8;
    --grey-420: #b3b3b3;
    --grey-500: #999;
    --grey-600: #767676;
    --grey-700: #626262;
    --grey-800: #434343;
    --grey-900: #222;

    --blue-20: #f5fcfe;
    --blue-30: #edfaff;
    --blue-50: #e0f4fd;
    --blue-70: #cdecfa;
    --blue-100: #afe2f9; /* DISABLE */
    --blue-200: #7acff5;
    --blue-300: #42bcf0; /* HOVER */
    --blue-400: #00adee; /* MAIN */
    --blue-500: #00a1eb;
    --blue-600: #0093dc;
    --blue-700: #0080c9;
    --blue-800: #0070b5;
    --blue-900: #005093;
    /*#a3d181*/
    --green-50: #f6fcf3;
    --green-60: #eff7eb;
    --green-100: #daf1ca;
    --green-150: #cdedb9;
    --green-200: #c1e8a8;
    --green-300: #a8de84;
    --green-400: #93d668;
    --green-500: #80cf4c; /* HOVER */
    --green-600: #70BE44; /* MAIN */
    --green-700: #5ca93a;
    --green-800: #489530;
    --green-900: #20731e;

    --lavender-50:#e7e7f0;
    --lavender-100:#c3c3db;
    --lavender-110: #bcbcd6;
    --lavender-150:#a8a9cf;
    --lavender-200:#9c9dc2;
    --lavender-300:#77a; /* Skos Tree 2nd level */
    --lavender-310: #6d6d9c; /* Skos Tree 2nd level hover */
    --lavender-400:#5d5a99;
    --lavender-500: #443f8d;
    --lavender-600:#3e3783;
    --lavender-700:#362e78;
    --lavender-800:#2e256c;
    --lavender-900:#211359;
    /*#f0a8a8*/
    --red-50: #ffeaec;
    --red-70: #ffe0e3;
    --red-100: #fcc;
    --red-200: #f39791;
    --red-300: #ea6e66;
    --red-400: #f34c3f;
    --red-500: #f63a1d;
    --red-600: #e82e1f; /* Red pure */
    --red-700: #d00; /* MAIN */
    --red-800: #c91911;
    --red-900: #bb0000;

    --turquoise-50: #e5f1f0;
    --turquoise-100: #bddcda;
    --turquoise-110: #b6d6d4;
    --turquoise-200: #97c7c3;
    --turquoise-210: #91c2be;
    --turquoise-300: #7cc0b9; /* Skos Tree 2nd level  */
    --turquoise-310: #76b5af; /* Skos Tree 2nd level Hover */
    --turquoise-400: #659f99;
    --turquoise-500: #558f88; /* Skos Tree 3rd level */
    --turquoise-510: #4e857e; /* Skos Tree 3rd level hover */
    --turquoise-600: #4f827c;
    --turquoise-700: #48736c;
    --turquoise-800: #41635d;
    --turquoise-900: #334743;

    --orange-50: hsl(37, 100%, 94%);
    --orange-70: hsl(40, 100%, 91%);
    --orange-80: hsl(36, 100%, 89%);
    --orange-100: hsl(35, 100%, 83%);
    --orange-120: hsl(35, 100%, 80%);
    --orange-200: hsl(36, 100%, 76%);
    --orange-300: #ffb84d;
    --orange-400: #ffa826;
    --orange-500: #ff9900; /* MAIN */
    --orange-600: #fb8d00;
    --orange-700: #f57d00;
    --orange-800: #ef6d00;
    --orange-900: #e65200;

    --gold: #e5a400;


    /* PP BASIC STYLE VARIABLES */
    --pp-base-border-radius: 6px;
    --pp-default-border: 1px solid var(--grey-200);

    /* TABS NAVBAR */
    --tabs-navbar-bg: hsl(0, 0%, 50%);
    --tab-hover-bg: hsl(0, 0%, 58%);
    --tab-active-bg: var(--white);
    --tab-icon-color: var(--white);
    --tab-icon-hover-color: var(--white);
    --tab-icon-active-color: hsl(0, 0%, 50%);


    /* TREE STYLES */
    --tree-bg: var(--grey-100);
    --tree-node-radius: 4px;
    --tree-node-padding: 2px 6px;
    --tree-node-border: none;
    /*--tree-node-bg-default-hover-inner-shadow: inset 0 0 10px 8px rgb(12 12 12 / 13%);*/

    /* Tree default colors */
    --tree-node-bg-default: var(--grey-250);
    --tree-node-text-default: var(--grey-700);
    --tree-node-bg-default-hover: var(--grey-260);
    --tree-node-loading-border-default: var(--grey-400);
    --tree-node-active-bg: var(--orange-200);
    --tree-node-active-checkbox-bg: var(--orange-300);
    --tree-node-active-border: var(--orange-500);
    --tree-node-active-text: var(--grey-700);
    --tree-node-multiselected-bg: var(--orange-100);
    --tree-node-multiselected-bg-hover: var(--orange-120);

    --tree-node-default-border-color: var(--grey-400);
    --tree-node-bg-default-droppable: var(--grey-260);
    --tree-node-text-default-droppable: var(--tree-node-text-default);
    --tree-node-bg-default-draggingOver: var(--grey-300);
    --tree-node-text-default-draggingOver: var(--tree-node-text-default);

    /* Grey tree */
    --tree-node-grey-dark: var(--grey-410);
    --tree-node-grey-dark-hover: var(--grey-420);
    --tree-node-grey-dark-loading-border: var(--grey-500);

    /* Colored Tree */
    --tree-node-level-0: transparent;
    --tree-node-level-1: var(--lavender-300);
    --tree-node-level-1-hover: var(--lavender-310);
    --tree-node-level-1-loading-border: var(--lavender-500);
    --tree-node-level-1-droppable: var(--lavender-100);
    --tree-node-level-1-draggingOver: var(--lavender-110);
    --tree-node-level-2: var(--turquoise-500);
    --tree-node-level-2-hover: var(--turquoise-510);
    --tree-node-level-2-loading-border: var(--turquoise-700);
    --tree-node-level-2-droppable: var(--turquoise-200);
    --tree-node-level-2-draggingOver: var(--turquoise-210);
    --tree-node-level-3: var(--turquoise-300);
    --tree-node-level-3-hover: var(--turquoise-310);
    --tree-node-level-3-loading-border: var(--turquoise-500);
    --tree-node-level-3-droppable: var(--turquoise-100);
    --tree-node-level-3-draggingOver: var(--turquoise-110);

    /* Classification tree */
    --classifier-tree-node-level-0-bg: transparent;
    --classifier-tree-node-level-0-text: var(--grey-700);
    --classifier-tree-node-level-1-bg: var(--tree-node-bg-default);
    --classifier-tree-node-level-1-text: var(--grey-700);
    --classifier-tree-node-level-2-bg: var(--tree-node-bg-default);
    --classifier-tree-node-level-2-text: var(--grey-700);

    /* Notifications tree */
    --notifications-tree-node-level-0-bg: transparent;
    --notifications-tree-node-level-0-text: var(--grey-700);
    --notifications-tree-node-level-1-bg: transparent;
    --notifications-tree-node-level-1-text: var(--grey-700);
    --notifications-tree-node-level-2-bg: var(--tree-node-bg-default);
    --notifications-tree-node-level-2-text: var(--grey-700);

    /* User management tree */
    --user-management-tree-node-radius: var(--tree-node-radius);
    --user-management-tree-node-level-0-bg: transparent;
    --user-management-tree-node-level-0-text: var(--grey-700);
    --user-management-tree-node-level-1-bg: transparent;
    --user-management-tree-node-level-1-text: var(--grey-700);
    --user-management-tree-node-level-2-bg: var(--tree-node-bg-default);
    --user-management-tree-node-level-2-text: var(--grey-700);

    /* Ontologies Tree */
    --ontologies-tree-node-radius: var(--tree-node-radius);
    --ontologies-tree-node-level-0-bg: transparent;
    --ontologies-tree-node-level-0-textColor: var(--grey-700);
    --ontologies-tree-node-level-1-bg: var(--lavender-300);
    --ontologies-tree-node-level-1-textColor: var(--white);
    --ontologies-tree-node-level-2-bg: var(--turquoise-500);
    --ontologies-tree-node-level-2-textColor: var(--white);
    --ontologies-tree-node-level-3-bg: var(--turquoise-300);
    --ontologies-tree-node-level-3-textColor: var(--white);
    --ontologies-tree-node-level-3-isSync-bg: var(--red-300);
    --ontologies-tree-node-level-3-isSync-textColor: var(--white);

    /* SMC Tree */
    --smc-tree-node-radius: var(--tree-node-radius);
    --smc-tree-node-level-0-bg: transparent;
    --smc-tree-node-level-0-textColor: var(--grey-700);
    --smc-tree-node-level-1-bg: transparent;
    --smc-tree-node-level-1-textColor: var(--grey-700);
    --smc-tree-node-level-2-bg: var(--tree-node-bg-default);
    --smc-tree-node-level-2-textColor: var(--grey-700);
    --smc-tree-node-level-3-bg: var(--tree-node-bg-default);
    --smc-tree-node-level-3-textColor: var(--grey-700);



    /* TABS */
    --tabs-bg-color: var(--grey-50);
    --tabs-container-border: var(--pp-default-border);
    --tabs-container-bg: var(--grey-50);
    --tabs-container-border-radius: var(--pp-base-border-radius);
    --tabs-content-container-padding: 6px;
    --tabs-content-container-bg: var(--white);


    /* MAIN CONTENT */
    --default-container-bg: var(--grey-100);
    --default-content-bg: var(--grey-50);

    --content-shadow: var(--grey-300) 1px 1px 2px 1px;
    --content-radius: var(--pp-base-border-radius);
    --content-table-box-padding: 10px;

    --left-content-bg: var(--blue-20);
    --left-content-header-bg: var(--blue-50);
    --content-table-box-blue-droppable-bg: var(--blue-70);
    --content-table-box-blue-droppable-link-color: var(--blue-600);
    --content-table-box-blue-droppable-border: 2px dashed var(--blue-400);
    --content-table-box-blue-draggingOver-bg: var(--blue-100);
    --content-table-box-blue-draggingOver-border: 3px dashed var(--blue-400);

    --right-content-bg: var(--green-50);
    --right-content-header-bg: var(--green-100);
    --content-table-box-green-droppable-bg: var(--green-150);
    --content-table-box-green-droppable-border: 2px dashed var(--green-500);
    --content-table-box-green-draggingOver-border: 3px dashed var(--green-500);
    --content-table-box-green-draggingOver-bg: var(--green-200);

    --content-table-box-droppable-border-offset: -2px;
    --content-table-box-draggingOver-border-offset: -3px;
}