:root {    
    --universal-white: rgb(255, 255, 255);
    --universal-blue: rgb(0, 102, 255);
    --universal-blue: #3b82f6;
    --universal-blue: rgb(223, 27, 18);
    --universal-blue-50-opacity: rgba(223, 28, 18, 0.316);
    --universal-blue-hover: rgb(0, 90, 226);
    --universal-blue-hover: rgb(64,20,15);
    --universal-blue-op-20: rgba(0, 102, 255, 0.2);
    --universal-blue-op-20: rgba(64,20,15, 0.1);
    --universal-black: rgb(0, 0, 0);
    --universal-gray-241: rgb(241, 241, 241);
    --universal-gray-225: rgb(225, 225, 225);
    --universal-gray-210: rgb(210, 210, 210);
    --universal-gray-120: rgb(120, 120, 120);
    --universal-gray-100: rgb(100, 100, 100);
    --universal-gray-74: rgb(74, 74, 74);
    --universal-gray-50: rgb(50, 50, 50);
    --universal-gray-30: rgb(30, 30, 30);

    --universal-orange: rgb(240,100,30);
    --universal-dark-red: rgb(125,21,56);

    /* --universalTextBlack: var(--universal-black); */

    --background-white: var(--universal-white);
    --background-gray: var(--universal-gray-241);
    --background-black: var(--universal-black);
    --background-blue: var(--universal-blue);
    --background-blue-hover: var(--universal-blue-hover);
    --background-gray-hover: var(--universal-gray-241);

    --text-white: var(--universal-white);
    --text-black: var(--universal-black);
    --text-gray-120:  var(--universal-gray-120);
    --text-gray-100:  var(--universal-gray-100);
    --text-gray-74:  var(--universal-gray-74);
    --text-gray-50:  var(--universal-gray-50);
    --text-gray-30: var(--universal-gray-30);
    --text-font-weight-800: 800;
    --text-font-weight-700: 700;
    --text-font-weight-600: 600;
    --text-font-weight-400: 400;
    --text-font-size-14: 14px;
    --text-font-size-12: 12px;

    --border-black: var(--universal-black);
    --border-gray: var(--universal-gray-210);
    --border-1: 1px solid var(--border-gray);
    --border-2: 2px solid var(--border-gray);

    --button-text-weight: var(--text-font-weight-700);
    --button-background: var(--universal-gray-241);
    --button-background-hover: var(--universal-gray-210);
    --button-border: 1px solid var(--text-gray-120);
    --button-border-radius: 5px;
    --button-padding: 8px 18px;
    --button-margin: 8px 3px;
    --button-font-size: 12px;
    --button-color: var(--text-gray-120);
    --button-color-hover: var(--universal-white);

    --button-save-background: var(--universal-blue);
    --button-save-background-hover: var(--universal-blue-hover);
    --button-save-border: 1px solid var(--universal-blue);
    --button-save-border-hover: 1px solid var(--universal-blue-hover);
    --button-save-color: var(--universal-white);

    --hero-body-margin: 0;
    --hero-body-padding: 80px 16.66%;
    --hero-body-gradient-padding: 40px 8.33%;
    --hero-body-gradient2-padding: 80px 8.33%;
    --hero-body-padding-profile: 20px 16.66%;
    --hero-body-padding-project: 0;
    --hero-body-background: var(--universal-gray-241);

    --vertical-line-height: 40px;

    --menubar-item-width-short: 60px;
    --menubar-item-width-medium: 60px;
    --menubar-item-width-long: 67px;
    --menubar-item-margin: 3px;
    --menubar-item-padding-short: 3px 10px 0px 10px;
    --menubar-item-padding-medium: 3px 5px 0px 5px;
    --menubar-item-padding-long: 3px 1px 0px 1px;
    --menubar-image-size: 30px;
    --menubar-item-hover: var(--universal-blue-op-20);

    --menubar-text-font-size: 0.80rem;
    --menubar-text-font-weight: 600px;
    --menubar-text-margin: -5px 0 3px 0;
    --menubar-title-margin: 0px 10px 0px 10px;
    --menubar-text-padding: 0;

    --menubar-description-margin:0px 5px 0px 0px;
    --menubar-description-padding:2px 6px;
    --menubar-description-text-weight: var(--text-font-weight-600);
    --menubar-description-font-size: 0.9375rem;

    --project-text-color: var(--text-gray-50);
    --project-container-padding: 20px 5px 5px 20px;
    --project-container-height: calc(100% - 80px);
    --project-container-maxHeight: calc(100% - 80px);
    --project-container-flex: 0 0 350px;
    --project-container-flex-canvas: 1 1 auto;

    --mainbox-font-size: 0.9375rem;
    --mainbox-line-height: 1.4rem;
    --mainbox-font-weight: var(--text-font-weight-400);
    --mainbox-margin: 0 0 5px 0;
    --mainbox-title-font-weight: var(--text-font-weight-800);
    --mainbox-title-font-weight: bold;
    --mainbox-title-text-color: var(--text-black);
    --mainbox-icon-margin: 0 5px;
    --mainbox-image-margin: 0 5px 0 0;
    --mainbox-padding: 8px 4px;

    --project-icon-size-medium: 18px;
    --project-icon-size-small: 14px;
    --project-content-padding: 4px;
    --project-content-highlight-margin: 0 0 0 20px;
    --project-content-highlight-font-weight: var(--text-font-weight-600);

    --editbox-width: 325px;
    --editbox-padding: 5px;
    --editbox-margin: 0px;


    --treeview-background-hover: var(--background-gray-hover);
    --treeitem-indentation-1: 38px;
    --treeitem-indentation-2: 24px;
    --treeitem-padding: 2px 0 2px 4px;
    --treeitem-icon-padding: 2px 0;
    --treeitem-icon-margin: 0 5px 0 0;

    --input-padding: 0px 0 0px 5px;
    --input-margin: 0;
    /* --input-margin: 1px 1px 0px 0px; */
    --input-font-size: 0.85rem;
    --input-width: 50%;
    --input-width-color: 50%;
    --input-width-alternative: 10%;


    --border-radius: 5px;
    --border-radius-input: 3px;

    --profile-border: 1px solid var(--border-gray);
    --profile-project-background: var(--background-white);
    --profile-project-background-hover: var(--background-blue);
    --profile-text-color: var(--text-gray-74);

    --container-width: 350px;
  }