:root {

    --width-field-label :  180px;
    --padding-field-label : 16px;

}


/*  ITEM DETAILS DISPLAY */
/* ----------------------------------------------------------------------------- */
#bookmark { 
    line-height : 34px; 
}
#bookmark.active { 
    background : var(--color-status-yellow); color : white; 
}
 .dark-theme #bookmark.active { border-color : var(--color-status-yellow); }
.black-theme #bookmark.active { border-color : var(--color-status-yellow); }
/* Section */
.section {
    background  : var(--color-surface-level-4); 
    cursor      : pointer;
    margin      : 4px 0px;
    padding     : 6px 12px;
    font-size   : 14px;
    font-weight : 700;
    line-height : 20px;
}
.section:hover { 
    background: var(--color-surface-level-5); 
}
.section:first-of-type { 
    margin-top : 0px; 
}
.section::before {
    font            : normal normal normal 14px/1 'Material Symbols Sharp';
    margin-right    : 6px;
    position        : relative;
    top             : 2px;
}
.section.collapsed::before { content : '\e5cc'; }
.section.expanded::before  { content : '\e5cf'; }
/* Section Fields */
.section-fields {
    display         : flex;
    flex-direction  : column;
    gap             : 8px;
    padding         : 8px 0px;
}
.section-fields .field {
    border-bottom   : 1px solid transparent;
    display         : flex;
    /* padding         : 6px 0px; */
}
.section-fields .field:last-child { 
    border-bottom : none; 
}
.section-fields > .field.required > .field-label { 
    color : var(--color-status-red); 
}
/* Section Field Label */
.field-label {
    font-weight     : bold;
    min-width       : var(--width-field-label);
    padding         : 5px var(--padding-field-label) 0px var(--padding-field-label);
    text-align      : right;
    width           : var(--width-field-label);
    overflow        : hidden;
    text-overflow   : ellipsis;
    white-space     : nowrap;
}
/* Section Field Value (Inputs) */
.field-value {
    flex-grow   : 1;
    padding     : 0px;
}

/* Editable Fields Input Controls */
.field.editable > .field-value > input,
.field.editable > .field-value > select,
.field.editable > .field-value > textarea,
.field.editable > .field-value > .radio-option input {
    border-color : var(--color-surface-level-5);
}
.field.editable > .field-value > input:focus,
.field.editable > .field-value > select:focus,
.field.editable > .field-value > textarea:focus {
    border-color : var(--color-hover-border) !important;
    box-shadow   : 0px 3px 0px 0px rgba(6, 150, 215, 0.35);
}
.field-value > input {
    padding-top     : 6px;
    padding-bottom : 6px;
    width           : calc(100% - 16px);
}
.field-value > select {
    width : 100%;
}
.field-value > textarea {
    height  : 55px;
    padding : 6px 8px;
    resize  : vertical;
    width   : calc(100% - 16px);
}
.field-value > table > tbody > tr> td { background : transparent; }
.field-value.checkbox > input { margin : 8px 0px; padding : 0px; width : unset; }
.field-value.link {
    color : var(--color-blue-500);
    cursor : pointer;
}
.field-value.image > img { 
    margin-top  : 4px;
    max-width   : 180px;
    width       : 100% 
}
.field-value.computed,
.field-value.image,
.field-value.radio { background : none; }
.field-value.required-empty { border-color : var(--color-status-red); }
.field-value.required-empty.radio { color : var(--color-status-red); }
.field-value.computed { padding-top : 4px; overflow-x : auto; }
.field-value.multi-picklist { padding-top : 5px; }
.field-value.radio { padding : 5px 0px 0px; }
.radio-label {
    position : relative;
    top      : -3px;
}
.field-value > textarea:disabled,
.field-value > input:disabled {
    background      : transparent !important;
    border-color    : transparent !important;
    resize          : none;
    text-overflow   : ellipsis;
}
.field-value > canvas.viewer-screenshot {
    max-height : 100%;
    max-width  : 100%;
}

/* MULTI-PICKLIST ITEM LINKS DISPLAY */
.field-multi-picklist-item {
    cursor : pointer;
    color : var(--color-blue-500);
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
    width : 100%;
}


/* FILTERED PICKLIST RESET */
.filtered-picklist { display : flex; }
.filtered-picklist .icon { 
    /* border : 1px solid var(--color-gray-300); */
    /* border-radius : 2px; */
    cursor : pointer; 
    line-height : 27px;
    margin-left : 10px; 
    text-align: center;
    width : 30px;
}
.filter-list-refresh {
    background : var(--color-selected) !important;
}
.filtered-picklist-options {
    display: none;
    position : absolute;
    background: black;
    margin-top: 32px;
    color: white;
}
.filtered-picklist-options > div {
    border-bottom : 1px solid var(--color-gray-100);
    cursor : pointer;
    padding : 6px 12px;;
}
.filtered-picklist-options > div:last-of-type {
    border-bottom : none;
}




/* Themes */
.surface-level-1 > div > .section { background : var(--color-surface-level-3); }
.surface-level-2 > div > .section { background : var(--color-surface-level-4); }
.surface-level-3 > div > .section { background : var(--color-surface-level-4); }
.surface-level-4 > div > .section { background : var(--color-surface-level-2); }
.surface-level-5 > div > .section { background : var(--color-surface-level-3); }

.surface-level-1 > div > .section:hover { background : var(--color-surface-level-4); }
.surface-level-2 > div > .section:hover { background : var(--color-surface-level-5); }
.surface-level-3 > div > .section:hover { background : var(--color-surface-level-5); }
.surface-level-4 > div > .section:hover { background : var(--color-surface-level-3); }
.surface-level-5 > div > .section:hover { background : var(--color-surface-level-4); }

.surface-level-1 > .panel-content > .section-fields > .field.editable > .field-value > * { background : var(--color-surface-level-2); }
.surface-level-2 > .panel-content > .section-fields > .field.editable > .field-value > * { background : var(--color-surface-level-1); }
.surface-level-3 > .panel-content > .section-fields > .field.editable > .field-value > * { background : var(--color-surface-level-1); }
.surface-level-3 > .panel-content > .section-fields > .field.editable > .field-value > * { background : var(--color-surface-level-1); }
.surface-level-5 > .panel-content > .section-fields > .field.editable > .field-value > * { background : var(--color-surface-level-1); }

.surface-level-1 > .panel-content > .section-fields > .field.editable > .field-value > .radio-option > input { background : var(--color-surface-level-2); }
.surface-level-2 > .panel-content > .section-fields > .field.editable > .field-value > .radio-option > input { background : var(--color-surface-level-1); }
.surface-level-3 > .panel-content > .section-fields > .field.editable > .field-value > .radio-option > input { background : var(--color-surface-level-1); }
.surface-level-4 > .panel-content > .section-fields > .field.editable > .field-value > .radio-option > input { background : var(--color-surface-level-1); }
.surface-level-5 > .panel-content > .section-fields > .field.editable > .field-value > .radio-option > input { background : var(--color-surface-level-1); }

.radio-option { 
    background : transparent !important; 
    display    : flex;
}
.radio-label {
    max-width       : calc(100% - 34px);
    overflow        : hidden;
    text-overflow   : ellipsis;
    white-space     : nowrap;
}

.section-fields > .field.editable > .field-value.multi-picklist > div { background : none !important; }


/* FIELD UNITS DISPLAY */
.field-unit { 
    background  : none !important;
    padding     : 4px 0px 0px 10px; 
}
.field-value.with-unit { 
    display : flex; 
    gap     : 10px;
}
.field-value.with-unit.readonly > input {
    width : unset;
}

/* READ-ONLY DISPLAY */
.panel-content.readonly > .section-fields {
    gap : 4px;
}
.panel-content.readonly > .section-fields > .field > .field-label {
    padding-top  : 0px;
}

/* ENABLE COMPACT DISPLAY */
.compact .section-fields { padding : 4px 10px; }
.compact .section-fields .field { gap : 10px; padding : 2px 0px; }
.compact .section-fields .field-label { font-size : 12px; padding : 0px; max-width : 30%; min-width : 30%; width : 30%; }
.compact .section-fields .field-value { font-size : 12px; }
.compact .section-fields .field-value.image > img { max-width : 150px; }
.compact .section-fields .field-value.readonly input { font-size : 12px; padding : 0px 0px; }
.compact .section-fields .field-value.readonly div { font-size : 12px; padding : 0px 0px; }
.compact .section-fields .field-value.computed { font-size : 12px; padding-top : 0px; }
.compact .section-fields .field-value.checkbox > input { margin : 3px 0px 0px 0px; }
.compact .section-fields .field .field-unit { font-size : 12px; padding : 0px; }
.compact p { margin : 0px;  padding : 0px; }


/* ENABLE NARROW DISPLAY */
.narrow.panel-content.readonly .section-fields,
.narrow .section-fields { padding : 0px; display : flex; flex-direction : column; gap : 0px; }
.narrow .section-fields .field.readonly,
.narrow .section-fields .field { flex-direction : column; gap : 2px; padding : 8px 12px; }
.narrow .section-fields .field-label { font-weight : bold; padding : 0px; text-align : left; width : 100%; }
.narrow .section-fields .field-value.image > img { max-width : 150px; }
.narrow .section-fields .field-value.readonly input { padding : 0px 6px; }
.narrow .section-fields .field-value.readonly div { padding : 0px 0px; }
.narrow .section-fields .field-value.computed {  padding-top : 0px; }
.narrow .section-fields .field-value.checkbox > input { margin : 3px 0px 0px 0px; }
.narrow .section-fields .field-value.radio { padding-left : 6px; padding-right : 6px; }
.narrow .section-fields .field .field-unit { padding : 0px; }
.narrow p { margin : 0px;  padding : 0px; }
.narrow .field:nth-child(odd)  { background : var(--color-surface-level-1); }
.narrow .field:nth-child(even) { background : var(--color-surface-level-2); }



/*  ATTACHMENTS */
/* ----------------------------------------------------------------------------- */
.no-header > .attachments-content {
    top : 0px;
}
#frame-download {
    display : none;
}

/* ----- Processing ----- */
.attachments > .processing { top : calc(50% + 18px); }
.attachments.no-header > .processing { top : calc(50% - 15px); } 

/* ----- Folder ----- */
.folder {
    background    : var(--color-surface-level-2);
    margin-bottom : 10px;
    padding       : 20px;
}
.folder-header {
    cursor        : pointer;
    display       : flex;
    gap           : 12px;
    margin-bottom : 18px;
}
.folder-header:hover {
    color : var(--color-blue-500);
}
.folder.collapsed .folder-header {
    margin-bottom : 0px;
}
.folder-attachments {
    display         : flex;
    flex-direction  : column;
    gap             : var(--spacer-xxxs);
}
.folder .folder-toggle::before {
    content : '\e5cf';
}
.folder.collapsed .folder-toggle::before {
    content : '\e5cc';
}

/* ----- Attachment ----- */
.attachment-graphic { 
    display         : flex;
    flex-direction  : column;
    justify-content : center;
}
.attachment-graphic > img { 
    margin      : auto;
    object-fit  : contain;
}
.attachment-version, 
.attachment-size, 
.attachment-user,
.attachment-date {
    font-size   : 12px;
    line-height : 16px;
}
.attachment-version {
    background      : var(--color-surface-level-5);
    border-radius   : 3px;
    max-width       : 26px;
    min-width       : 26px;
    padding         : 0px 6px;
    text-align      : center;
}
.attachment-date {
    width : 130px;
}
.attachment-user {
    display : flex;
    gap : 4px;
}
.attachment-user > .icon {
    font-size   : 16px;
    line-height : 14px;
}

/* ----- Theme ----- */
.panel-top.surface-level-5 > .panel-content > .attachment .attachment-version { background : var(--color-surface-level-3); }

/* ----- Attachments Grid ----- */
.tiles.grid.l   .attachment { height :  96px; max-height :  96px; }
.tiles.grid.xl  .attachment { height : 190px; max-height : 190px; }
.tiles.grid.xxl .attachment { height : 280px; max-height : 280px; }

.tiles.grid.xxs .attachment-graphic > img { height :  12px; width :  12px; }
.tiles.grid.xs  .attachment-graphic > img { height :  16px; width :  16px; }
.tiles.grid.s   .attachment-graphic > img { height :  24px; width :  24px; }
.tiles.grid.m   .attachment-graphic > img { height :  36px; width :  36px; }
.tiles.grid.l   .attachment-graphic > img { height :  64px; width :  64px; }
.tiles.grid.xl  .attachment-graphic > img { height :  48px; width :  48px; }
.tiles.grid.xxl .attachment-graphic > img { height : 110px; width : 110px; }

.tiles.grid.l   .attachment-graphic { height :  96px; max-height :  96px; min-height :  96px; }
.tiles.grid.xl  .attachment-graphic { height :  74px; max-height :  74px; min-height :  74px; }
.tiles.grid.xxl .attachment-graphic { height : 150px; max-height : 150px; min-height : 150px; }

.tiles.grid.l   .attachment-name { font-size : 16px; }
.tiles.grid.xl  .attachment-name { width : 100%; }
.tiles.grid.xxl .attachment-name { width : 100%; }

.tiles.grid.xxs .attachment-details { margin-top :  0px; }
.tiles.grid.xs  .attachment-details { margin-top :  0px; }
.tiles.grid.s   .attachment-details { margin-top :  4px; }
.tiles.grid.m   .attachment-details { margin-top : 10px; }

.tiles.grid.s   .attachment-summary { flex-direction : row; gap : 8px; } 
.tiles.grid.m   .attachment-summary { flex-direction : row; gap : 8px; } 
.tiles.grid.l   .attachment-summary { gap: 4px; display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr;}
.tiles.grid.xl  .attachment-summary { width : 100%; }
.tiles.grid.xxl .attachment-summary { width : 100%; }

.tiles.grid.xl  .attachment-summary > div { margin : auto; text-align : center; }
.tiles.grid.xxl .attachment-summary > div { margin : auto; text-align : center; }

.tiles.grid.s  .attachment-name { line-height : 22px; font-size : 12px; font-weight : bold; }
.tiles.grid.s  .attachment-size, 
.tiles.grid.s  .attachment-user { display : none; }
.tiles.grid.m  .attachment-user, .tiles.grid.m .attachment-size { display : none; }
.tiles.grid.l  .attachment-version { order : 1; } .tiles.grid.l  .attachment-date { order : 2; }
.tiles.grid.xl .attachment-user { display : none; }

/* ----- Attachments Row ----- */
.tiles.row.l   .attachment { height : 120px; max-height : 120px; }
.tiles.row.xl  .attachment { height : 190px; max-height : 190px; }
.tiles.row.xxl .attachment { height : 280px; max-height : 280px; }

.tiles.row.xxs .attachment-graphic > img { height :  12px; width :  12px; }
.tiles.row.xs  .attachment-graphic > img { height :  16px; width :  16px; }
.tiles.row.s   .attachment-graphic > img { height :  24px; width :  24px; }
.tiles.row.m   .attachment-graphic > img { height :  36px; width :  36px; }
.tiles.row.l   .attachment-graphic > img { height :  34px; width :  34px; }
.tiles.row.xl  .attachment-graphic > img { height :  48px; width :  48px; }
.tiles.row.xxl .attachment-graphic > img { height : 110px; width : 110px; }

.tiles.row.l   .attachment-graphic { height :  50px; max-height :  50px; min-height :  50px; }
.tiles.row.xl  .attachment-graphic { height :  74px; max-height :  74px; min-height :  74px; }
.tiles.row.xxl .attachment-graphic { height : 150px; max-height : 150px; min-height : 150px; }

.tiles.row.xxs .attachment-details { margin-top :  0px; }
.tiles.row.xs  .attachment-details { margin-top :  0px; }
.tiles.row.s   .attachment-details { margin-top :  4px; }
.tiles.row.m   .attachment-details { margin-top : 10px; }

.tiles.row.s   .attachment-summary { flex-direction : row; gap : 8px; } 
.tiles.row.m   .attachment-summary { flex-direction : row; gap : 8px; } 
.tiles.row.l   .attachment-summary { flex-direction : row; gap : 16px; margin : auto; }
.tiles.row.xl  .attachment-summary { width : 100%; }
.tiles.row.xxl .attachment-summary { width : 100%; }

.tiles.row.l   .attachment-summary > div { margin : auto; text-align : center; }
.tiles.row.xl  .attachment-summary > div { margin : auto; text-align : center; }
.tiles.row.xxl .attachment-summary > div { margin : auto; text-align : center; }

.tiles.row.s  .attachment-name { line-height : 22px; font-size : 12px; font-weight : bold; }
.tiles.row.s  .attachment-size, 
.tiles.row.s  .attachment-user { display : none; }
.tiles.row.m  .attachment-user, .tiles.row.m .attachment-size { display : none; }
.tiles.row.l  .attachment-user, .tiles.row.l .attachment-date { display : none; }
.tiles.row.xl .attachment-user { display : none; }

/* ----- Attachments List ----- */
.tiles.list.xxs .attachment-graphic > img { height : 12px; width :  12px; }
.tiles.list.xs  .attachment-graphic > img { height : 18px; width :  18px; }
.tiles.list.s   .attachment-graphic > img { height : 28px; width :  28px; }
.tiles.list.m   .attachment-graphic > img { height : 42px; width :  42px; }
.tiles.list.l   .attachment-graphic > img { height : 52px; width :  52px; }
.tiles.list.xl  .attachment-graphic > img { height : 68px; width :  68px; }
.tiles.list.xxl .attachment-graphic > img { height : 90px; width :  90px; }

.tiles.list.xxs .attachment-details { flex-direction : row; justify-content: space-between; }
.tiles.list.xs  .attachment-details { flex-direction : row; justify-content: space-between; }
.tiles.list.s   .attachment-details { flex-direction : row; justify-content: space-between; }
.tiles.list.xl  .attachment-details { margin-top : 8px; }
.tiles.list.xxl .attachment-details { margin-top : 8px; }

.tiles.list.xxs .attachment-name { width : calc(100% - 134px); }
.tiles.list.xs  .attachment-name { width : calc(100% - 134px); font-size : 12px; }
.tiles.list.s   .attachment-name { width : calc(100% -  58px); }

.tiles.list.xxs .attachment-summary { width : 120px; min-width : 120px; max-width : 120px; flex-direction : row; justify-content: space-between; }
.tiles.list.xs  .attachment-summary { width : 120px; min-width : 120px; max-width : 120px; flex-direction : row; justify-content: space-between; }
.tiles.list.s   .attachment-summary { width :  38px; min-width :  38px; max-width :  38px; flex-direction : row; justify-content: space-between; }
.tiles.list.m   .attachment-summary { gap : 12px; flex-direction : row; justify-content: space-between; }
.tiles.list.l   .attachment-summary { gap : 16px; flex-direction : row; justify-content: space-between; }
.tiles.list.xl  .attachment-summary { gap : 4px; display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr; }
.tiles.list.xxl .attachment-summary { gap : 2px; }

.tiles.list.xxs .attachment-summary > div { line-height : 18px; margin-top :  4px; }
.tiles.list.xs  .attachment-summary > div { line-height : 18px; margin-top :  8px; }
.tiles.list.s   .attachment-summary > div { line-height : 28px; margin-top : 10px; }

.tiles.list.xxs .attachment-user, .tiles.list.xxs .attachment-date { display : none; }
.tiles.list.xs  .attachment-user, .tiles.list.xs  .attachment-date { display : none; }
.tiles.list.s   .attachment-user, .tiles.list.s   .attachment-date, .tiles.list.s  .attachment-size { display : none; }

.tiles.list.xl  .attachment-version { order : 1; }
.tiles.list.xl  .attachment-size    { order : 3; }
.tiles.list.xl  .attachment-date    { order : 2; }
.tiles.list.xl  .attachment-user    { order : 4; }


.attachments-separator {
    border-bottom   : 1px solid var(--color-surface-level-3);
    margin          : 8px 0px 2px;
    padding         : 4px 0px 4px;
    text-align      : center;
}
.attachment-graphic > .icon {
    font-weight : 200;
    margin      : auto;
}

.attachments-content.table {
    display : block;
}
.attachments-table {
    display : table;
}
.attachments-table > .attachment {
    display : table-row;
    width   : auto;
}
.attachments-table > .attachment > div {
    border-bottom : 2px solid transparent;
    display : table-cell;
}

.attachments-content.table.xxs .attachment-graphic, .attachments-content.table.xxs .attachment-graphic > img { height : 12px; min-width: 12px; width : 12px; }
.attachments-content.table.xs  .attachment-graphic, .attachments-content.table.xs  .attachment-graphic > img { height : 12px; min-width: 12px; width : 12px; }
.attachments-content.table.s   .attachment-graphic, .attachments-content.table.s   .attachment-graphic > img { height : 16px; min-width: 16px; width : 16px; }
.attachments-content.table.m   .attachment-graphic, .attachments-content.table.m   .attachment-graphic > img { height : 16px; min-width: 16px; width : 16px; }
.attachments-content.table.l   .attachment-graphic, .attachments-content.table.l   .attachment-graphic > img { height : 16px; min-width: 16px; width : 16px; }
.attachments-content.table.xl  .attachment-graphic, .attachments-content.table.xl  .attachment-graphic > img { height : 16px; min-width: 16px; width : 16px; }
.attachments-content.table.xxl .attachment-graphic, .attachments-content.table.xxl .attachment-graphic > img { height : 16px; min-width: 16px; width : 16px; }

.attachments-content.table.xxs .attachment > div { font-size : 12px; height : 16px; line-height : 16px; padding : 2px  8px; }
.attachments-content.table.xs  .attachment > div { font-size : 12px; height : 18px; line-height : 18px; padding : 4px  8px; }
.attachments-content.table.s   .attachment > div { font-size : 14px; height : 24px; line-height : 24px; padding : 2px 10px; }
.attachments-content.table.m   .attachment > div { font-size : 14px; height : 32px; line-height : 32px; padding : 2px 10px; }
.attachments-content.table.l   .attachment > div { font-size : 14px; height : 36px; line-height : 36px; padding : 2px 10px; }
.attachments-content.table.xl  .attachment > div { font-size : 14px; height : 42px; line-height : 42px; padding : 2px 10px; }
.attachments-content.table.xxi .attachment > div { font-size : 14px; height : 64px; line-height : 64px; padding : 4px 14px; }

.attachments-table > .attachment > .attachment-version { border-radius : 0px; }
.attachments-table > .attachment > .attachment-size { text-align : right; }


/* .panel-top.surface-level-1 > .panel-content > div > .attachment > div { border-color : var(--color-surface-level-1); }
.panel-top.surface-level-2 > .panel-content > div > .attachment > div { border-color : var(--color-surface-level-2); }
.panel-top.surface-level-3 > .panel-content > div > .attachment > div { border-color : var(--color-surface-level-3); }
.panel-top.surface-level-4 > .panel-content > div > .attachment > div { border-color : var(--color-surface-level-4); }
.panel-top.surface-level-5 > .panel-content > div > .attachment > div { border-color : var(--color-surface-level-5); } */


/*  BOM / TREE DISPLAY */
/* ----------------------------------------------------------------------------- */
.bom-multi-select-action,
.bom-single-select-action {
    display : none;
}
.bom-search-input {
    width : 50px;
}
.bom-table {
    table-layout: fixed;
}
.content-item {
    cursor : pointer;
}
.content-item > td {
    overflow      : hidden;
    padding       : 8px 8px;
    text-overflow : ellipsis;
    white-space   : nowrap;
}
/* .content-item > td:first-child {
    border-left : 1px solid transparent;
} */
/* .content-item > td:last-child {
    border-right : 1px solid transparent;
} */
.content-item.result > td.bom-color { 
    background : var(--color-status-yellow); 
}

.content-item.selected > td {
    background   : var(--color-selected-background);
}
.grid .content-item.selected > td {
    border-color : var(--color-selected-background);
}
.content-item:hover td {
    background-color : var(--color-hover-background) !important;
    border-color     : var(--color-blue-500) !important;
}
.bom-color {
    background  : transparent;
    padding     : 0px !important;
    width       : 6px;
    position    : sticky;
    left        : 0;
    z-index     : 4;
}
.bom-nav {
    cursor          : pointer;
    font-size       : 20px;
    line-height     : 5px;
    padding-right   : 4px;
    width           : 16px;
    position        : relative;
    top             : 5px;
}
.bom-nav:before { 
    content: '\e5cf';
 }
.content-item.collapsed .bom-nav:before { 
    content: '\e5cc'; 
}
.bom-nav:hover { 
    color : var(--color-hover-border); 
}
.bom-first-col {
    white-space     : nowrap;
    overflow        : hidden;
    text-overflow   : ellipsis;
    position        : sticky;
    left            : 1px;
    z-index         : 4;
}
.bom-number {
    min-width   : 28px;
    padding     : 0px 5px;
    font-weight : bold;
    display     : inline-block;
}   
.bom-descriptor {
    padding : 0px 4px;
}
.bom-actions {
    display : flex;
    gap     : 4px;
}
.bom-actions > div {
    display : none;
}
.content-item:hover .bom-actions > div {
    display : block;
}
.bom-column-icon {
    padding     : 2px 0px 0px !important;
    text-align  : center;
    width       : 26px;   
}
.bom-column-icon > span {
    font-size   : 20px;
    font-weight : 300;
}
.bom-restricted {
    color       : var(--color-status-red);
}
.bom-column-quantity {
    font-weight : bold;
    text-align  : right;
    max-width   : 60px;
    width       : 60px;
}
th.bom-column-roll-up {
    overflow      : hidden;
    text-align    : right;
    text-overflow : ellipsis;
    width         : 100px;
}
td.bom-column-roll-up {
    padding     : 0px;
    text-align  : right;
    width       : 100px;
}
.bom-column-roll-up-bar {
    height      : 34px;
    line-height : 34px;
    padding     : 0px 10px;
}
.bom-content {
    bottom : 73px;
}


.bom-path {
    display         : flex;
    font-size       : 12px;
    gap             : 36px;
    overflow-y      : auto;
    padding         : 0px;
    height          : 32px;
    justify-content : flex-start;
    position        : absolute;
    right           : 0px;
    bottom          : 0px;
    left            : 0px;
}
.bom-path > div {
    height      : 32px;
    line-height : 32px;
    padding     : 0px 2px;
    white-space : nowrap;
}
.bom-path-parent {
    background  : var(--color-surface-level-3);
    cursor      : pointer;
    position    : relative;
}
.bom-path-parent:first-of-type {
    padding-left : 16px;
}
.bom-path-parent:first-of-type::before {
    border : none !important;
}
.bom-path-parent:before {
    left                : -32px;
	top                 : 50%;
	border              : solid transparent;
	content             : "";
	height              : 0;
	width               : 0;
	position            : absolute;
	pointer-events      : none;
	border-color        : rgba(136, 183, 213, 0);
	border-right-color  : var(--color-surface-level-3);
	border-bottom-color : var(--color-surface-level-3);
	border-width        : 17px;
	margin-top          : -17px;
}
.bom-path-parent:after {
	left                : 100%;
	top                 : 50%;
	border              : solid transparent;
	content             : "";
	height              : 0;
	width               : 0;
	position            : absolute;
	pointer-events      : none;
	border-color        : rgba(136, 183, 213, 0);
	border-left-color   : var(--color-surface-level-3);
	border-top-color    : var(--color-surface-level-3);
	border-width        : 17px;
	margin-top          : -17px;
}
.bom-path-parent:hover {
    background : var(--color-surface-level-4);
}
.bom-path-parent:hover:before {
    border-right-color  : var(--color-surface-level-4); 
    border-bottom-color : var(--color-surface-level-4); 
}
.bom-path-parent:hover:after {
    border-top-color    : var(--color-surface-level-4); 
    border-left-color   : var(--color-surface-level-4); 
}
.bom-path-selected {
    background  : var(--color-surface-level-5);
    flex-grow   : 1;
    padding     : 6px 2px 6px 2px;
    position    : relative;
}
.bom-path-selected:before {
    left                : -32px;
	top                 : 50%;
	border              : solid transparent;
	content             : "";
	height              : 0;
	width               : 0;
	position            : absolute;
	pointer-events      : none;
	border-color        : rgba(136, 183, 213, 0);
	border-right-color  : var(--color-surface-level-5);
	border-bottom-color : var(--color-surface-level-5);
	border-width        : 17px;
	margin-top          : -17px;
}
.bom-path-selected-single {
    padding-left : 16px !important;
}
.bom-path-selected-single:before {
    border : none !important;
}
.bom-path.bom-path-empty {
    background  : var(--color-surface-level-5);
}
.no-bom-counters .bom-content {
    bottom : 34px;
}
.no-bom-counters .bom-path {
    bottom : 0px;
}
.panel-top.with-bom-path > .panel-content { bottom : 38px; }
.panel-top.with-panel-counters.with-bom-path > .bom-path { bottom : 38px; }
.panel-top.with-panel-counters.with-bom-path > .panel-content { bottom : 76px; }



.bom-counters {
    background      : var(--color-surface-level-5);
    display         : flex;
    font-size       : 12px;
    gap             : var(--spacer-xs);
    padding         : 6px 16px;
    justify-content : space-between;
    position        : absolute;
    right           : 0px;
    bottom          : 0px;
    left            : 0px;
}
.bom-counters > div {
    border-bottom   : 2px solid transparent;
    flex-grow       : 1;
    height          : 18px;
    line-height     : 18px;
    overflow        : hidden;
    padding         : 3px 4px 1px;
    text-align      : center;
    text-overflow   : ellipsis;
    white-space     : nowrap;
    width           : 25%;
}
.no-bom-counters .bom-counters {
    display : none !important;
}
.bom-counter-filtered.not-empty {
    border-color : var(--color-status-yellow) !important;
}
.bom-counter-selected.not-empty {
    border-color : var(--color-hover-border) !important;
}
.bom .panel-counter-changed { display : none; }

/* .bom > .panel-content.xxs th { padding :  2px  2px; font-size : 11px; }
.bom > .panel-content.xs  th { padding :  4px  4px; font-size : 12px; }
.bom > .panel-content.s   th { padding :  6px  4px; }
.bom > .panel-content.m   th { padding :  8px  6px; }
.bom > .panel-content.l   th { padding : 10px  8px; }
.bom > .panel-content.xl  th { padding : 12px 10px; }
.bom > .panel-content.xxl th { padding : 14px 12px; } */

/* .bom > .panel-content.xxs .content-item td { padding :  1px  2px; font-size : 11px; }
.bom > .panel-content.xs  .content-item td { padding :  3px  4px; font-size : 12px; }
.bom > .panel-content.s   .content-item td { padding :  4px  4px; }
.bom > .panel-content.m   .content-item td { padding :  6px  6px; }
.bom > .panel-content.l   .content-item td { padding :  8px  8px; }
.bom > .panel-content.xl  .content-item td { padding : 10px 10px; }
.bom > .panel-content.xxl .content-item td { padding : 12px 12px; } */

.level-1  .bom-first-col { padding-left :  25px!important; }
.level-2  .bom-first-col { padding-left :  46px!important; }
.level-3  .bom-first-col { padding-left :  66px!important; }
.level-4  .bom-first-col { padding-left :  86px!important; }
.level-5  .bom-first-col { padding-left : 106px!important; }
.level-6  .bom-first-col { padding-left : 126px!important; }
.level-7  .bom-first-col { padding-left : 146px!important; }
.level-8  .bom-first-col { padding-left : 166px!important; }
.level-9  .bom-first-col { padding-left : 186px!important; }
.level-10 .bom-first-col { padding-left : 206px!important; }

tr.node.level-1  .bom-first-col  { padding-left :   4px!important; }
tr.node.level-2  .bom-first-col  { padding-left :  26px!important; }
tr.node.level-3  .bom-first-col  { padding-left :  46px!important; }
tr.node.level-4  .bom-first-col  { padding-left :  66px!important; }
tr.node.level-5  .bom-first-col  { padding-left :  86px!important; }
tr.node.level-6  .bom-first-col  { padding-left : 106px!important; }
tr.node.level-7  .bom-first-col  { padding-left : 126px!important; }
tr.node.level-8  .bom-first-col  { padding-left : 146px!important; }
tr.node.level-9  .bom-first-col  { padding-left : 166px!important; }
tr.node.level-10 .bom-first-col  { padding-left : 186px!important; }



/*  WHERE USED PARENTS */
/* ----------------------------------------------------------------------------- */
.parent-bom {
    width : 100%;
}
.parent-bom > div {
    padding  : 10px;
    position : unset;
}
.parent-bom > .processing {
    padding    : 40px;
    text-align : center;
}


/*  WHERE USED ROOT ITEMS */
/* ----------------------------------------------------------------------------- */
.roots-parent {
    line-height : 22px;
}
.parent.top {
    border-top : 1px solid var(--color-surface-level-1);
}
.parent.top:first-of-type {
    border-top : none; 
}
.roots-parent-path {
    cursor : pointer;
    color : var(--color-blue-500);
    display : flex;
    margin-left : 8px;
    padding : 3px 12px;
}
.roots-parent-path .path-icon {
    color        : var(--color-font);
    font-size    : 20px;
    line-height  : 21px;
    margin-right : 8px;
}
.roots-parent-path .path-child {
    flex-grow : 1;
    width : 100%;
}


/*  LIST */
/* ----------------------------------------------------------------------------- */
.with-counters > .panel-list {
    bottom : 40px;
}
/* .list-single-select-action,
.list-multi-select-action {
    display : none;
} */
.list-filter-empty.selected,
.list-filter-selected.selected {
    background   : var(--color-status-yellow) !important;
    border-color : var(--color-status-yellow) !important;
    color        : white;
}
.list-search-input {
    background  : transparent;
    border      : none !important;
    box-shadow  : none !important;
    font-size   : 14px;
    padding     : 4px 10px;
    width       : 50px;
}
.list-totals > th,
.list-ranges > th {
    font-weight     : normal;
    padding-top     : 0px;
    padding-bottom  : 6px;
}
.list-totals > th {
    border-top : 1px solid var(--color-surface-level-1);
}
.list-totals {
    position : sticky;
    top      : 45px;
    z-index  : 1;
}
.list-ranges {
    position : sticky;
    top      : 71px;
    z-index  : 1;
}
tr.list-item {
    border-top      : 1px solid transparent;
    border-bottom   : 1px solid var(--color-gray-100);
    border-left     : 1px solid transparent;
    border-right    : 1px solid transparent;
    cursor          : pointer;
    padding         : 4px 15px;
}
tr.list-item:hover td {
    background-color : var(--color-hover-background) !important;
    border-color     : var(--color-blue-500) !important;
}
tr.list-item.selected > td.item-check .icon-check-box::before { 
    content : '\e834'; 
}
tr.list-item > td.changed > input, 
tr.list-item > td.changed > select {
    background : var(--color-status-red-bright) !important;
}
.list-item-number {
    font-weight     : bold;
    padding-left    : 10px;
    padding-right   : 10px;
    text-align      : right;
}
.list-item-quantity {
    line-height : 26px;
    text-align  : right;
    width       : 50px;
}
.list-counters {
    background      : var(--color-surface-level-5);
    display         : flex;
    font-size       : 12px;
    gap             : var(--spacer-xs);
    padding         : 6px 16px;
    justify-content : space-around;
    position        : absolute;
    right           : 0px;
    bottom          : 0px;
    left            : 0px;
}
.list-counters > div {
    border-bottom   : 2px solid transparent;
    flex-grow       : 1;
    height          : 18px;
    line-height     : 18px;
    max-width       : 160px;
    overflow        : hidden;
    padding         : 3px 4px 1px;
    text-align      : center;
    text-overflow   : ellipsis;
    white-space     : nowrap;
    width           : 25%;
}
.no-counters .list-counters {
    display : none !important;
}
.list-counter-filtered.not-empty {
    border-color : var(--color-status-yellow) !important;
}
.list-counter-selected.not-empty {
    border-color : var(--color-hover-border) !important;
}
.list-counter-changed.not-empty {
    border-color : var(--color-status-red-bright) !important;
}
.list-parent.compact,
.list-parent.compact input,
.list-parent.compact select {
    font-size   : 12px;
    line-height : 12px;
}
.list-parent.compact th { 
    padding     : 8px 4px; 
    white-space : nowrap;
}
.list-parent.compact td { 
    padding     : 2px 4px; 
    white-space : nowrap;
}
.list-parent.compact table .icon-check-box,
.list-parent.compact table .icon-check-box-checked {
    font-size   : 16px;
    position    : relative;
}
.list-parent.compact th .icon-check-box,
.list-parent.compact th .icon-check-box-checked {
    top : 0px;
}
.list-parent.compact td .icon-check-box,
.list-parent.compact td .icon-check-box-checked {
    top : 2px;
}
.list-parent.compact table input {
    min-width : 40px;
    padding   : 4px 6px;
    width     : calc(100% - 12px);
}
.list-parent.compact table select {
    padding : 3px 2px;
    width   : 100%;
}
.list-parent.compact .list-totals {
    top : 34px;
}
.list-parent.compact .list-ranges {
    top : 56px;
}
.list-parent.compact .list-totals th, 
.list-parent.compact .list-ranges th {
    padding-top    : 4px;
    padding-bottom : 6px;
}





/*  FLAT BOM */
/* ----------------------------------------------------------------------------- */
/* .flat-content-item:last-of-type {
    border-bottom : none;
}
.flat-content-item.unread { 
    font-weight : bold; 
}
.flat-bom-title {
    left            : 0;
    line-height     : 26px;
    overflow        : hidden;
    position        : sticky;
    text-overflow   : ellipsis;
    white-space     : nowrap;
}
.flat-bom-actions > span {
    border: 1px solid #808080;
    border-radius : 2px;
    color: #3C3C3C;
    display : none;
    float: right;
    line-height: 24px;
    margin-left: var(--spacer-s);
    text-align: center;
}
.flat-content-item:hover .flat-bom-actions > span {
    display : block;
} */
/* .flat-content-item > td:first-of-type {
    border-left : 1px solid transparent;
} */
/* .flat-content-item > td:last-of-type {
    border-right : 1px solid transparent;
} */
/* .no-actions .flat-bom-title { width : calc(100% - 50px); } */
.flat-bom .panel-counter-unique { display : none; }



/*  CHANGE PROCESSES */
/* ----------------------------------------------------------------------------- */
.processes-action-create {
    display : none;
}


/*  PROJECT-GRID */
/* ----------------------------------------------------------------------------- */
.project-phase-gates {
    display : flex;
    flex-direction: row;
    left : 0px;
    right : 0px;
}
.project-phase-gates > div {
    padding : 4px;
}
.project-grid-head {
    /* background: black !important; */
    /* color: white; */
    font-weight: normal;
    height: 32px !important;
    line-height: 32px;
    padding: 0px 14px;
}
.project-grid-task.task-completed .tile-image {
    background : var(--color-status-green);
    color : var(--color-status-green-brighter);
}
.project-grid-task.task-overdue .tile-image {
    background : var(--color-status-red);
    color : var(--color-status-red-brighter);
}
.project-grid-task .task-progress-bar {
    height : 4px;
    background : black;
    position : absolute;
    bottom : 0px;
    right : 0px;
}


/*  WORKFLOW */
/* ----------------------------------------------------------------------------- */
.workflow-history-content {
    flex-direction : column;
}
.workflow-history-event {
    border-bottom   : none;
    border-left     : 1px solid var(--color-gray-300);
    margin-bottom   : -4px;
    margin-left     : 24px;
    padding-bottom  : 24px;
    padding-left    : 14px;
}
.workflow-history-action {
    color       : var(--color-blue-500);
    display     : flex;
    font-weight : 800;
    gap         : 4px;
    line-height : 24px;
    position    : relative;
    left        : -27px;
}
.workflow-history-action-icon::before {
    background : var(--color-surface-level-1);
}
.workflow-history-comment {
    margin-bottom : 8px;
}
.workflow-history-date::before, 
.workflow-history-user::before {
    font: normal normal normal 14px/1 'Material Symbols Sharp';
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
.workflow-history-date::before {
    content         : '\ebcc';
    font-size       : 14px;
    margin-right    : 8px;
    position        : relative;
    top             : 2px;  
}
.workflow-history-user::before {
    content         : '\e851';
    margin-left     : 0px;
    font-size       : 14px;
    margin-right    : 8px;
    position        : relative;
    top             : 2px;  
}
.workflow-next {
    background      : var(--color-blue-500);
    border          : none;
    color           : white;
    padding         : 14px 20px;
    border-radius   : 4px;
    margin          : 0px 0px 20px 0px;
    width           : calc(100% - 40px);
}
.workflow-next-title {
    font-weight     : bold;
    margin-bottom   : 4px;
}
.panel-top.surface-level-1 > .panel-content > .workflow-history-event .workflow-history-action-icon::before { background : var(--color-surface-level-1); }
.panel-top.surface-level-2 > .panel-content > .workflow-history-event .workflow-history-action-icon::before { background : var(--color-surface-level-2); }
.panel-top.surface-level-3 > .panel-content > .workflow-history-event .workflow-history-action-icon::before { background : var(--color-surface-level-3); }
.panel-top.surface-level-4 > .panel-content > .workflow-history-event .workflow-history-action-icon::before { background : var(--color-surface-level-4); }
.panel-top.surface-level-5 > .panel-content > .workflow-history-event .workflow-history-action-icon::before { background : var(--color-surface-level-5); }



/*  CHANGE LOG */
/* ----------------------------------------------------------------------------- */
.change-log-number {
    max-width   : 34px;
    text-align  : right;
    width       : 34px;
}
.change-log-date {
    max-width   : 70px;
    width       : 70px;
}
.change-log-user {
    max-width   : 160px;
    width       : 160px;
}
.change-log-action {
    max-width   : 160px;
    width       : 160px;
}
.change-log-details {
    display         : flex;
    flex-direction  : column;
    gap             : 6px;
    padding         : 4px;
}
.change-log-details > div {
    display     : flex;
    white-space : nowrap;
}
.change-log-details span { 
    border-radius   : 4px; 
    line-height     : 22px;
    padding         : 0px 10px; 
}
.change-log-details p {
    margin  : 0px;
    padding : 0px;
}
.change-log-detail-field { font-size : 12px; background : var(--color-surface-level-1);  }
.change-log-detail-old   { font-size : 12px; background : var(--color-status-red);      color : white; }
.change-log-detail-new   { font-size : 12px; background : var(--color-status-green);    color : white; }