:root {
    --logo-url: url('/img/brand/logo.svg');
    --projectal-orange: #F57B20;
    --projectal-orange-light: #ffa94c;
    --projectal-orange-dark: #bc4c00;
    --projectal-blue: #005581;
    --projectal-blue-light: #4781b1;
    --projectal-blue-dark: #002d54;
    --header-bg: var(--white);
    --body: var(--gray-800);
    --body-bg: var(--gray-100);
    --backdrop: var(--gray-300);
    --link-text: var(--projectal-orange);
    --text-light: var(--gray-700);
    --text-medium: var(--gray-800);
    --text-dark: var(--gray-900);
    --text-on-dark: var(--gray-200);
    --text-disabled: var(--gray-400);
    --border-light: var(--gray-200);
    --border-medium: var(--gray-300);
    --border-dark: var(--gray-400);
    --overlay: #77777777;
    /* Copied from firefox, which had really good color choices */
    --scrollbar-thumb: #898c8d;
    --scrollbar-track: #eff0f1;

    /* Unique elements */
    --progress-bar-outline: var(--surface-bg); /* Same as bg to blend in */
    --progress-bar-background: var(--status-none);
    --today: var(--teal-50);
    --autofill-bg: var(--yellow-50);
    --not-employed: var(--yellow-50);
    --badge-close-hover: var(--gray-200);
    --header-row: var(--yellow-50);
    --header-row-text: var(--gray-700);
    --importer-table-border: red;
    --merge-row: orange;

    /* Grid Cell */
    --grid-cell-triangle: var(--gray-400);
    
    /* Bootstrap */
    --bs-border: var(--border-medium);
    --bs-shadow: var(--gray-600);
    --bs-text-muted: var(--gray-700);
    --bs-secondary: var(--white);
    --bs-secondary-bg: var(--gray-500);
    --bs-secondary-border: var(--gray-400);
    --bs-secondary-hover-bg: var(--gray-600);
    --bs-secondary-hover-border: var(--gray-500);
    --bs-secondary-active-bg: var(--gray-700);
    --bs-secondary-active-border: var(--gray-600);
    --bs-bg-light: var(--gray-200);
    --bs-tab-active-bg: var(--surface-bg);

    --management-icon-primary: var(--projectal-blue);
    --managemen-icon-secondary: var(--blue-gray-100);

    --sidebar-bg: var(--blue-gray-800);
    --sidebar: var(--text-on-dark);
    --sidebar-active-bg: var(--blue-gray-700);
    --sidebar-active: var(--text-on-dark);
    --sidebar-active-before: var(--projectal-orange);
    --sidebar-minimizer: var(--blue-gray-900);


    --surface-bg: var(--white);
    --surface-border: var(--border-medium);
    --surface-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);

    --form-control: var(--text-medium);
    --form-control-bg: var(--surface-bg);
    --form-control-addon-bg: var(--gray-100);
    --form-control-border: var(--border-medium);
    --form-control-placeholder: var(--gray-500);
    --form-control-focus-shadow: rgba(244, 123, 32, 0.25); /* Bootstrap-derived color (from primary) */
    --form-control-disabled-bg: var(--gray-300);
    --form-control-disabled: #757575;
    --form-control-select-arrow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='rgb(158,158,158)' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
    /* Buttons inside labels, like (+)*/
    --form-control-label-action: var(--cyan-700);
    --form-control-label-action-hover: var(--cyan-500);
    --form-control-label-action-focus: var(--cyan-100);
    --form-control-label-action-disabled: var(--text-disabled);

    --project-tile-cell: var(--gray-300);
    --project-cost-alert: var(--red-200);
    --project-fav-icon: var(--projectal-blue);
    --project-tile-progress-back: #D5D5D5;

    /* We use popovers as tooltip hints. */
    --popover-body-bg: var(--surface-bg);
    --popover-border: var(--surface-border);
    --popover-arrow: var(--surface-bg);
    --popover: var(--text-medium);

    /* We use dropdowns for inline popup menus (on click or hover). */
    --dropdown-bg: var(--surface-bg);
    --dropdown: var(--text-medium);
    --dropdown-border: var(--surface-border);
    --dropdown-hover-bg: var(--projectal-orange-light);
    --dropdown-link-hover: var(--white);
    --dropdown-link: var(--text-medium);
    --dropdown-link-disabled: var(--gray-500); /* task schedule mode dropdown has these */
    --dropdown-divider: var(--border-light);
    --dropdown-header-text: var(--text-medium);
    
    --avatar-outer: var(--gray-400);
    --avatar-inner: var(--gray-50);
    --banner-avatar-border: var(--gray-400);
    --banner-button: var(--gray-800);
    --banner-button-bg: rgba(255,255,255,0.75);
    --banner-button-active-bg: rgba(255,255,255,0.9);

    /* Status (% progress, on/behind sched, priority, etc)
       Foreground text on these should always be white, in any theme.
    */
    --status-none: var(--gray-300);
    --status-gray: #7f7f7f;
    --status-orange: var(--orange-400);
    --status-red: var(--red-400);
    --status-light-blue: var(--light-blue-500);
    --status-blue: var(--blue-700);
    --status-light-green: var(--light-green-600);
    --status-green: var(--green-700);
    
    
    /* Alternative, brighter version, more suitable for chart bars (staff, gantt) */
    --status-alt-green: var(--green-300);
    --status-alt-red: var(--red-300);

    /* Kanban - Board */
    --kanban-card-bg: var(--surface-bg);
    --kanban-column-even-bg: #00000006;
    --kanban-max-reached: var(--red-200);
    --kanban-card-highlight: var(--today);
    --kanban-column-backlog-title-bg: var(--gray-800);
    --kanban-column-nonstage-bg: var(--gray-200);

    /* Dashboard */
    --widget-frame-title-bg: var(--projectal-blue);
    /* Every widget is 'movable' in the unlocked state */
    --gridstack-movable-1: #ebecedaa;
    --gridstack-movable-2: #fcfdfeaa;
    --gridstack-movable-hover-bg: rgba(0,0,0,.20);
    /* Dotted outline indicating where to drop a moving widget. */
    --gridstack-placeholder-border: var(--projectal-blue-light);

    /* Gantt */
    --gantt-milestone: var(--green-300);
    --gantt-milestone-border: var(--green-700);
    --gantt-milestone-progress: var(--green-500);
    --gantt-milestone-selected-shadow: var(--gantt-milestone-border);
    --gantt-task: var(--cyan-500);
    --gantt-task-border: var(--cyan-800);
    --gantt-task-progress: var(--cyan-700);
    --gantt-task-selected-shadow: rgba(244, 123, 32, 0.50);
    --gantt-manual-task: var(--blue-500);
    --gantt-manual-task-border: var(--blue-800);
    --gantt-manual-task-progress: var(--blue-700);
    --gantt-manual-task-selected-shadow: var(--gantt-manual-task-border);
    --gantt-critical: var(--red-400);
    --gantt-critical-border: var(--red-900);
    --gantt-critical-progress: var(--red-900);
    --gantt-critical-selected-shadow: var(--gantt-critical-border);
    --gantt-milestone-diamond: var(--purple-a400);
    --gantt-milestone-diamond-border: var(--purple-700);
    --gantt-side-text: var(--text-light); /* text next to diamond */
    --gantt-link: var(--projectal-orange-light);
    --gantt-link-hover: var(--gantt-link);
    --gantt-start-end-marker-bg: var(--red-200);
    --gantt-weekend: var(--blue-gray-50);
    --gantt-selected: rgba(0, 145, 234, 0.2);
    --gantt-hover-row: rgba(236, 239, 241, 0.6);
    --gantt-selected-border: var(--ag-border-color);
    /* Table header for day/week/etc, when there's a second row */
    --gantt-scale-line2-cell-bg: var(--ag-header-background-color);


    /* Grid toolbars */
    --grid-toolbar-button: var(--text-medium);
    /* Button state while the dropdown is showing */
    --grid-toolbar-dropdown-bg: var(--projectal-orange-light);
    --grid-toolbar-dropdown: var(--white);
    /* Buttons inside dropdown, like save/delete view */
    --grid-toolbar-dropdown-icon-hover-bg: var(--projectal-orange);

    /* Comments and markdown */
    --comment-bg: var(--surface-bg);
    --comment-readmore-gradient-from: rgba(255,255,255,1); /* These need to have transparency. */
    --comment-readmore-gradient-to: rgba(255,255,255,0);
    --markdown-link: var(--projectal-orange);
    --markdown-blockquote: var(--gray-500);
    --markdown-code: var(--pink-400);
    --markdown-pre-bg: #f6f8fa;

    /* FilterComponent (dataview) */
    --filter-level1: var(--status-light-green);
    --filter-level2: var(--status-light-blue);
    --filter-level3: var(--status-orange);

   /* Import dialog */
   --import-bg-1: #E9BBB5;
   --import-bg-2: #E7CBA9;
   --import-bg-3: #AAD9CD;
   --import-bg-4: #E8D595;
   --import-bg-5: #8DA47E;
   --import-bg-6: #FBECDB;
   --import-bg-7: #F3CBBD;
   --import-bg-8: #90CDC3;
   --import-bg-9: #AF8C72;

   /* Staff */
   --staff-allocation-good: var(--status-alt-green);
   --staff-allocation-bad: var(--red-400);

   /* Progress */
   --progress-0: var(--status-gray);
   --progress-25: var(--status-orange);
   --progress-50: var(--status-light-blue);
   --progress-75: var(--status-blue);
   --progress-99: var(--status-light-green);
   --progress-100: var(--status-green);

   /* Timeline */
   --timeline-0: var(--status-gray);
   --timeline-25: var(--status-orange);
   --timeline-50: var(--status-light-blue);
   --timeline-75: var(--status-blue);
   --timeline-99: var(--status-light-green);
   --timeline-100: var(--status-green);
   --timeline-0-light: var(--gray-100);
   --timeline-25-light: var(--orange-100);
   --timeline-50-light: var(--light-blue-100);
   --timeline-75-light: var(--blue-200);
   --timeline-99-light: var(--light-green-200);
   --timeline-100-light: var(--green-300);
   --timeline-tooltip-bg: var(--surface-bg);
   --timeline-header-border: var(--gray-500);

   /* task-group-header */
   --task-group-header-bg: var(--gray-200);

   /* task-group-modal */
   --task-group-modal-form-field-bg: var(--surface-bg);
   --task-group-modal-form-field-color: var(--text-dark);

   /* modal */
   --modal-close-focus: var(--gray-500);

   /* cell readonly */
   --grid-cell-readonly: rgba(173, 181, 189, 0.1); /* --gray-500 with 0.1 opacity */
}

:root, .ag-theme-balham * {
       /* Ag-grid. List of colors are in:  
       @ag-grid-community/core/dist/styles/_ag-theme-balham-default-params.scss
       Only applying colors to what I think is in use by us. If more is needed,
       grab it out of that file (there's also a dark theme file to use as guide).
    */
    --ag-data-color: var(--text-medium);
    --ag-foreground-color: var(--text-medium);
    --ag-background-color: var(--white);
    --ag-secondary-foreground-color: var(--text-light); /* Sort arrows */
    --ag-icon-font-color: var(--text-light); /* ag-icon: e.g. tree expand collapse icon */
    --ag-header-foreground-color: var(--text-light);
    --ag-header-background-color: var(--gray-100);
    --ag-header-column-separator-color: var(--gray-300);
    --ag-border-color: var(--border-medium);
    --ag-row-border-color: var(--gray-200);
    --ag-row-hover-color: #ECEFF199;
    --ag-odd-row-background-color: var(--gray-50);
    --ag-selected-row-background-color: var(--light-blue-100);
    --ag-template-cell-disabled: var(--gray-300);
    --ag-checkbox-unchecked-color: var(--gray-400);
    --ag-checkbox-checked-color: var(--light-blue-500);
    --ag-checkbox-background-color: var(--gray-100);
    --ag-modal-overlay-background-color: var(--gray-200); /* Loading overlay */
    --ag-input-border-color: var(--form-control-border);
    --ag-control-panel-background-color: var(--form-control-bg); /* Cell style when in editing mode */
    --ag-disabled-foreground-color: var(--gray-400); /* Paging buttons when no pages */
    --grid-overlay-bg: var(--white);
    --grid-overlay-border: var(--gray-300);
    --grid-overlay: var(--text-light);    
    --grid-cell-disabled-1: var(--white);
    --grid-cell-disabled-2: var(--gray-200);
    --grid-cell-disabled-3: var(--gray-500);
    --grid-cell-disabled-image: linear-gradient(45deg, var(--grid-cell-disabled-1) 25%, var(--grid-cell-disabled-2) 25%, var(--grid-cell-disabled-2) 50%, var(--grid-cell-disabled-1) 50%, var(--grid-cell-disabled-1) 75%, var(--grid-cell-disabled-2) 75%, var(--grid-cell-disabled-2) 100%);

    /* bookings and activities */
    --activity: var(--brown-400);
    --activity-progress: var(--brown-500);
    --booking: var(--indigo-400);
    --vacation: var(--blue-gray-400);
    --vacation-readonly: var(--blue-gray-200);
    
    --customer: var(--lime-700);
    --note: var(--light-green-100);
    --rebate: var(--purple-a400);
    --tag: var(--brown-100);

    --selection-border-color: var(--light-blue-a700);
    --selection-background-color: rgba(0, 145, 234, 0.2);
    --selection-border-style: solid;
    --scheduler-focus-shadow: rgba(244, 123, 32, 0.50); 
    --scheduler-background-color-folder: #ebeced;
    --scheduler-cell-disabled: var(--blue-gray-100);

    --taskcompact-select-arrow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='rgb(97, 97, 97)' d='M160 329.4L249.4 240 70.6 240 160 329.4zm22.6 45.3c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8l256 0c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128z'/%3E%3C/svg%3E");
    
    /* time machine */
    --timemachine-disabled-bg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZTBlMGUwJy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nIzAwMDAwMCcgc3Ryb2tlLW9wYWNpdHk9IjAuMDUiIHN0cm9rZS13aWR0aD0nMScvPgo8L3N2Zz4="); background-repeat: repeat;

    /* vue-multiselect */
    --multiselect-bg: var(--surface-bg); /* var(--gray-150); */
    --multiselect-option-selected-color: var(--text-dark);
    --multiselect-option-selected-bg: var(--surface-bg); /* var(--gray-150); */
    --multiselect-option-highlight-color: var(--text-dark);
    --multiselect-option-highlight-bg: var(--gray-300);
    --multiselect-option-selected-highlight-color: var(--text-dark);
    --multiselect-option-selected-highlight-bg: var(--gray-300);
    --multiselect-option-group-header-bg: var(--gray-400);
    --multiselect-option-group-header-color: var(--gray-800);
}