:root {
    /* =========================================
       1. PRIMITIVES
       Define base color palette for the theme.
       ========================================= */

    /* Oracle Pallete */
    --palette-oracle-red: #C74634;
    --palette-slate-50-1: #C2D4D4;
    --palette-slate-50-2: #A0BBBB;
    --palette-slate-50-3: #85A8A8;
    --palette-slate-50-4: #6A9595;
    --palette-slate-100-1: #697778;
    --palette-slate-100-2: #778788;
    --palette-slate-100-3: #8F9D9E;
    --palette-slate-100-4: #A8B2B3;
    --palette-slate-150-1: #3C4545;
    --palette-slate-150-2: #4C5757;
    --palette-slate-150-3: #617070;
    --palette-slate-150-4: #778888;
    --palette-slate-200-1: #2B3333;
    --palette-slate-200-2: #4C5757;
    --palette-slate-200-3: #617070;
    --palette-slate-200-4: #778888;
    --palette-neutral-30-1: #F1EFED;
    --palette-neutral-30-2: #DED9D4;
    --palette-neutral-30-3: #CAC2BB;
    --palette-neutral-30-4: #B6ACA2;


    /* Base colors */
    --palette-gray-1: #b1b3b2;
    --palette-gray-2: #d9d8d4;
    --palette-red-10: #FAF0F0;
    --palette-red-20: #661414;
    --palette-red-30: #8A2020;
    --palette-red-50: #F55353;
    --palette-red-60: #FA8E8E;

    /*Begin Standard Ignition*/
    --white: #FFFFFF;
    --black: hsl(0, 0%, 0%);

    /* Neutrals */
    --neutral-10: var(--palette-slate-100-1);
    --neutral-20: #778788;
    --neutral-30: #8F9D9E;
    --neutral-40: #A8B2B3;
    --neutral-50: #767676;
    --neutral-60: #A1A1A1;
    --neutral-70: #BDBDBD;
    --neutral-80: #D8D8D8;
    --neutral-90: #F4F4F4;
    --neutral-100: #FAFAFA;

    /* =========================================
       2. FUNCTIONAL
       Define functional color palette for the theme.
       ========================================= */

    /* Alarm colors */
    --alarm-critical: #D32F2F;
    --alarm-high: #F57C00;
    --alarm-medium: #FBC02D;
    --alarm-low: #0288D1;
    --alarm-info: #70539B;

    /*One Line color*/
    --oneline-green: #8fca94;
    --oneline-yellow: #f4b834;
    --oneline-red: #e23030;
    --oneline-gray: #d9d8d4;

    /*High Performance */
    --high-performance-white: #ffffff;
    --high-performance-gray: #9c9c9c;
    --high-performance-red: #e23030;
    --high-performance-blue: #a9d9ff;
    --high-performance-purple: #7266b7;
    --high-performance-green: #8fca94;
    --high-performance-yellow: #f4b834;

    /* Data Viz: Sequential */
    --seq-1: #9656D6;
    --seq-2: #AE74E8;
    --seq-3: #C79BF2;
    --seq-4: #DABCF7;
    --seq-5: #EAD9FA;
    --seq-6: #F5F0FA;

    /* Data Viz: Diverging */
    --div-1: #642B9E;
    --div-2: #7D3CBD;
    --div-3: #9656D6;
    --div-4: #AE74E8;
    --div-5: #C79BF2;
    --div-6: #DABCF7;
    --div-7: #EAD9FA;
    --div-8: #F5F0FA;
    --div-9: #D7FAF8;
    --div-10: #83F2EB;
    --div-11: #43DED3;
    --div-12: #21C2B7;
    --div-13: #0EA197;
    --div-14: #08827A;
    --div-15: #086962;
    --div-16: #09524D;

    /* Data Viz: Qualitative */
    --qual-1: #9656D6;
    --qual-2: #53BAED;
    --qual-3: #08827A;
    --qual-4: #F78BB8;
    --qual-5: var(--red-50);
    --qual-6: var(--red-10);
    --qual-7: #46E385;
    --qual-8: #5691F0;
    --qual-9: #ED5393;
    --qual-10: #E89C3F;

    /* Functional */
    --error: var(--palette-red-50);
    --info: #5691F0;
    --info-secondary: #114599;
    --warning: #CF7911;
    --warning-secondary: #693D07;
    --success: #0AA648;

    /* LED Display */
    --indicator: #1EC963;
    --indicatorOff: #0A2E18;

    /* =========================================
       3. OBJECTS
       Define object color palette for the theme.
       ========================================= */
    /* value styles */
    --tag-value-color: var(--palette-slate-50-1);
    --tag-units-color: var(--palette-slate-50-4);

    /* naviagtion styles */
    --navtree-color: var(--palette-neutral-30-2);
    --navtree-bgcolor: var(--palette-slate-150-1);
    --navtreeitem-hover-color: var(--palette-neutral-30-2);
    --navtreeitem-hover-bgcolor: var(--palette-slate-150-2);
    --navtreeitem-active-color: var(--palette-neutral-30-2);
    --navtreeitem-active-bgcolor: var(--palette-slate-150-2);
    --idk-what: #0d1741;

    /* Containers */
    --container-root: var(--palette-slate-200-1);
    /* the root container, depth 0 */
    --container: var(--palette-slate-150-1);
    /* standard container, depth 1 */
    --container-nested: var(--palette-slate-150-2);
    /* nested container, depth 2 */

    /* Inputs */
    --input: var(--black);
    /* standard input */
    --input-disabled: var(--neutral-40);
    --icon: var(--neutral-70);
    --icon-hover: var(--neutral-60);
    --icon-disabled: var(--neutral-40);
    --icon-selected: var(--neutral-10);
    --label: var(--neutral-90);
    --label-disabled: var(--neutral-60);

    /* Borders */
    --border: var(--neutral-50);
    --border-disabled: var(--neutral-50);
    --container-border: 1px solid rgba(255, 255, 255, 0.1);

    /* Box Shadow */
    --box-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.45);
    --box-shadow-2: 0 10px 20px rgba(0, 0, 0, 0.5), 0 6px 6px rgba(0, 0, 0, 0.3);
    --box-shadow-3: 0 10px 20px rgba(0, 0, 0, 0.55), 0 6px 6px rgba(0, 0, 0, 0.55);
    --box-shadow-4: 0 14px 28px rgba(0, 0, 0, 0.60), 0 10px 10px rgba(0, 0, 0, 0.60);
    --box-shadow-5: 0 19px 38px rgba(0, 0, 0, 0.65), 0 15px 12px rgba(0, 0, 0, 0.65);

    --box-shadow-inset: inset 0 0 4px 2px rgba(34, 34, 34, 0.4);

    /* --- Data Grids / Tables --- */
    --table-header-bg: var(--palette-slate-100-2);
    --table-header-text: var(--white);
    --table-row-bg: var(--palette-slate-150-1);
    --table-row-alt-bg: var(--palette-slate-150-2);
    /* Zebra stripe color */
    --table-row-hover: var(--palette-slate-150-3);
    --table-border: var(--palette-slate-100-1);

    /* --- Typography Scale --- */
    --text-xs: 0.75rem;
    /* 12px - Labels */
    --text-sm: 0.875rem;
    /* 14px - Body text */
    --text-md: 1rem;
    /* 16px - Standard values */
    --text-lg: 1.25rem;
    /* 20px - Sub-headers */
    --text-xl: 1.5rem;
    /* 24px - Headers */
    --text-2xl: 2rem;
    /* 32px - KPI Values */
    --text-color: var(--palette-neutral-30-3);

    /* Font Weights */
    --weight-light: 300;
    --weight-reg: 400;
    --weight-bold: 700;

    /* --- Charts & Trends --- */
    --chart-bg: transparent;
    /* Or var(--palette-slate-150-1) */
    --chart-grid-lines: var(--palette-slate-100-1);
    --chart-axis-text: var(--palette-slate-50-2);
    --chart-crosshair: var(--white);
    --chart-tooltip-bg: var(--palette-slate-150-4);

    /* Call to action. */
    --call-to-action: #229AD6;
    --call-to-action-highlight: #0C2938;
    --call-to-action-hover: #0C7BB3;
    --call-to-action-active: #53BAED;
    --call-to-action-active-alt: #093952;
    --call-to-action-active-alt-invis: #0A6291;
    --call-to-action-disabled: var(--neutral-50);

    /* Border Radius */
    --border-radius: 4px;
    --border-radius-input: 2px;

    /* Opacity */
    --opacity-25: rgba(0, 0, 0, 0.25);
    --opacity-50: rgba(0, 0, 0, 0.50);
    --opacity-85: rgba(0, 0, 0, 0.85);

    /* Typography */
    --font-NotoSans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    /* Checkbox */
    --checkbox--checked: var(--call-to-action);
    --checkbox--unchecked: var(--border);
    --checkbox--indeterminate: var(--call-to-action);
    --checkbox--disabled: var(--input-disabled);

    /* Progress Bar */
    --progressLinearTrack--determinate: var(--neutral-10);
    --progressLinearTrack--indeterminate: var(--neutral-10);
    --progressLinearBar--determinate: var(--info-secondary);
    --progressLinearBar--indeterminate: var(--border);

    /* Toggle Switch */
    --toggleSwitch--selected: var(--call-to-action);
    --toggleSwitch--unselected: var(--neutral-10);

    /* Radio */
    --radio--selected: var(--call-to-action);
    --radio--unselected: var(--border);
    --radio--disabled: var(--input-disabled);

    /* Piping */
    --pipePrimaryFill: var(--neutral-20);
    --pipeSecondaryFill: #5a5a5a;
    --pipeStroke: var(--neutral-70);
    --pipeSelectStroke: var(--call-to-action);

    /* Component Context Menu */
    --contextBackground: var(--black);

    /* Symbols */
    --symbolFill--default: var(--neutral-20);
    --symbolStroke--default: var(--neutral-70);
    --symbolFillAnimation--default: var(--neutral-80);
    --symbolFill--running: var(--neutral-50);
    --symbolFillAnimation--running: var(--neutral-80);
    --symbolStroke--running: var(--neutral-70);
    --symbolFill--stopped: var(--black);
    --symbolStroke--stopped: var(--neutral-70);
    --symbolFill--faulted: #8F0E0E;
    --symbolStroke--faulted: #FA8E8E;

    /* Layers */
    --z-background: -1;
    --z-card: 10;
    --z-header: 100;
    --z-popup: 500;
    --z-alarm-banner: 1000;
    --z-tooltip: 2000;

    /* Spacing Scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* State Backgrounds (with opacity) */
    --bg-error-subtle: rgba(226, 48, 48, 0.1);
    /* 10% Red */
    --bg-success-subtle: rgba(10, 166, 72, 0.1);
    /* 10% Green */
}

.psc-navtree {
    font-family: Nunito Sans;
    font-size: 16;
    font-weight: 100;
    color: var(--navtree-color);
    background-color: var(--navtree-bgcolor);
}

.psc-navtree .ia_treeComponent__node__icon {
    fill: var(--navtree-color);
    width: 30px;
    height: 30px;
}

.psc-navtree .tree-item-label .label-wrapper.label-wrapper-icon {
    flex: 0 0 30px;
}

.psc-navtree .expand-icon,
.psc-navtree .terminal-expand-icon,
.psc-navtree .ia_treeComponent__alignmentGuide {
    display: none;
}

.psc-navtree .terminal-node .label-wrapper-icon {
    visibility: hidden;
}

.psc-navtree .ia_treeComponent__node--selected {
    background-color: var(--navtreeitem-active-bgcolor);
    color: var(--navtreeitem-active-color);
    font-weight: 100;
}

.psc-navtree .node-wrapper {
    min-width: calc(100% - 20px) !important;
}

.psc-navtree .node-selected::after {
    content: '';
    position: absolute;
    top: 0;
    right: -12px;
    /* Adjust this value to control how far the point extends outwards */
    bottom: 0;
    width: 12px;
    /* Adjust width to control the size of the diamond side */
    background-color: var(--navtreeitem-active-bgcolor);
    /* Same as the container's background */
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    /* Points outward to create the diamond shape */
}

.psc-navtree .node-selected .ia_treeComponent__node__icon {
    fill: var(--navtreeitem-active-color);
}

.psc-navtree .ia_treeComponent__node:hover:not(.psc-navtree .ia_treeComponent__node--selected) {
    background-color: var(--navtreeitem-hover-bgcolor);
    color: var(--navtreeitem-hover-color);
    font-weight: 100;
}

.psc-navtree .ia_treeComponent__node:hover:not(.psc-navtree .ia_treeComponent__node--selected) .ia_treeComponent__node__icon {
    fill: var(--navtreeitem-active-color);
}