:root {
    /* company color pallete */
    --streamnavy: #263367;
    --streamblue: #014ea8;
    --darkbluegray: #191928;
    --darkgray: #53575a;
    --gray: #b1b3b2;
    --lightgray: #d9d8d4;
    --darkred: #9e272b;
    --alarmred: #e22028;
    --sunsetorange: #de7c33;
    --goldenyellow: #f4b834;
    --coolpurple: #7266b7;
    --tagvalue-color: var(--streamblue);
    --units-color: var(--gray);
    /* Alarm status         */
    --alarm-diag: var(--darkgray);
    --alarm-low: var(--coolpurple);
    --alarm-med: var(--goldenyellow);
    --alarm-high: var(--sunsetorange);
    --alarm-crit: var(--alarmred);

    /* Electrical color     */
    --elec-on: #e23030;
    --elec-off: #8fca94;
    --elec-tripped: var(--goldenyellow);
    --elec-maintenance: var(--sunsetorange);
    --elec-disabled: var(--gray);

    /* States Performance */
    --state-running: #ffffff;
    --state-standby: var(--gray);
    --state-faulted: var(--alarmred);
    --state-auto: #013d85;
    --state-manual: var(--coolpurple);
    --state-maintenance:var(--sunsetorange);
    
    /* Acción Principal (Control de Proceso) */
    --action-primary: var(--streamblue);
    --action-primary-hover: #013d85;
    --action-primary-text: #ffffff;

    /* Acción Crítica (Impacto Físico) */
    --action-danger: var(--alarmred);
    --action-danger-hover: var(--darkred);
    --action-danger-text: #ffffff;

    /* Acción Neutra (Navegación / Cancelar) */
    --action-secondary: var(--lightgray);
    --action-secondary-hover: var(--gray);
    --action-secondary-text: var(--darkgray);

    /* Estado Deshabilitado */
    --action-disabled: var(--gray);
    --action-disabled-text: #767676;
    
    /* --- MONITOREO DE DATOS --- */
    --data-normal: #2073d3;
    --data-high: #d32020;
    --data-low: #20d3bb;
    --tagvalue-color: var(--data-normal);
    --units-color: var(--gray);

    /* Texto */
    --text-primary: #161616;
    --text-secondary: #5E5E5E;
    --text-inverse: #ffffff;
    --text-muted: #767676;         /* Unidades y detalles */

    /* nav styles */
    --navtree-bgcolor: #0e1742;
    --navtree-color: var(--lightgray);
    --navtreeitem-hover-color: var(--white);
    --navtreeitem-hover-bgcolor: var(--navtree-bgcolor);
    --navtreeitem-active-color: var(--white);
    --navtreeitem-active-bgcolor: #143663;
    --idk-what: #0d1741;

    /*Begin Standard Ignition*/
    --white: var(--lightgray);
    --black: #000000;
    --red-20: #FAD4D4;
    --red-30: #F99797;
    --red-50: #F55353;
    --red-60: #DE1B1B;
    --red-90: #661414;

    /* Neutrals */
    --neutral-10: var(--lightgray);
    --neutral-20: #F4F4F4;
    --neutral-30: #D8D8D8;
    --neutral-40: #BDBDBD;
    --neutral-50: #A1A1A1;
    --neutral-60: #767676;
    --neutral-70: #5E5E5E;
    --neutral-80: #515151;
    --neutral-90: #323232;
    --neutral-100: #161616;

    /* Sequential */
    --seq-1: #AE74E8; /* purple-50 */
    --seq-2: #9659D6; /* purple-60 */
    --seq-3: #7D3CBD; /* purple-70 */
    --seq-4: #642B9E; /* purple-80 */
    --seq-5: #4B2175; /* purple-90 */
    --seq-6: #371C52; /* purple-100 */

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

    /* Data Viz: Qualitative */
    --qual-1: #7D3CBD; /* purple-70 */
    --qual-2: #229AD6; /* primary-50 */
    --qual-3: #086962; /* teal-70 */
    --qual-4: #B01355; /* magenta-70 */
    --qual-5: var(--red-50); /* red-50 */
    --qual-6: var(--red-90); /* red-90 */
    --qual-7: #038537; /* green-60 */
    --qual-8: #114599; /* blue-80 */
    --qual-9: #ED5393; /* magenta-50 */
    --qual-10: #CF7911; /* bronze-50 */

    --containerRoot: #F2F2F2; /* var(--neutral-10) the root container, depth 0 */
    --container: var(--neutral-20); /* standard container, depth 1 */
    --containerNested: var(--neutral-30); /* nested container, depth 2 */

    --icon: var(--neutral-70);
    --icon--hover: var(--neutral-60);
    --icon--disabled: var(--neutral-40);
    --icon--selected: var(--neutral-10);

    /* Borders */
    --border: var(--neutral-50);
    --border--disabled: var(--neutral-50);
    --containerBorder: 1px solid var(--border);
    /* Box Shadow */
    --boxShadow1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --boxShadow2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    --boxShadow3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    --boxShadow4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    --boxShadow5: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
    --boxShadow--inset: inset 0 0 4px 2px rgba(34, 34, 34, 0.4);

    /* Border Radius */
    --borderRadius: 4px;
    --borderRadiusInput: 2px;
    /* Opacity */
    --opacity-25: rgba(0, 0, 0, 0.25); /* black, 50% opacity */
    --opacity-50: rgba(0, 0, 0, 0.50); /* black, 50% opacity */
    --opacity-85: rgba(0, 0, 0, 0.85); /* black, 85% opacity */
    /* Typography */
    --font-NotoSans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    /* Component Context Menu */
    --contextBackground: var(--white);
}

.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);
}