:root {

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

}


/*  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 {
    padding     : 10px 20px;
    transition  : all 3s ease;
}
.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 {
    padding: 4px var(--padding-field-label) 0px 0px;
    min-width: var(--width-field-label);
    width: var(--width-field-label);
    text-align: right;
    font-weight : bold;
    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 { padding : 0px; }
.field-value.image > img { 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;
}


/* 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 > .section-fields > .field.editable > .field-value > * { background : var(--color-surface-level-2); }
.surface-level-2 > .section-fields > .field.editable > .field-value > * { background : var(--color-surface-level-1); }
.surface-level-3 > .section-fields > .field.editable > .field-value > * { background : var(--color-surface-level-1); }
.surface-level-3 > .section-fields > .field.editable > .field-value > * { background : var(--color-surface-level-1); }
.surface-level-5 > .section-fields > .field.editable > .field-value > * { background : var(--color-surface-level-1); }

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

.radio-option { background : transparent !important; }
.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;
}


/* 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; }



/*  ATTACHMENTS */
/* ----------------------------------------------------------------------------- */
.attachments-list {
    display     : flex;
    gap         : var(--spacer-xs);  
    overflow-y  : auto;
}
.no-header > .attachments-list {
    top : 0px;
}
.attachment {
    cursor  : pointer;
    padding : 8px 20px 8px 10px;
}
.attachment-graphic { 
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    min-width       : 64px;
    width           : 64px;
}
.attachment-graphic > img { 
    height      : 80%;
    object-fit  : contain;
    width       : 80%;
}
.attachment-details {
    overflow    : hidden;
    max-width   : calc(100% - 90px);
}
.attachment-name {
    font-weight : 700;
    line-height : 24px;
}
.attachment-version {
    background      : var(--color-surface-level-5);
    border-radius   : 3px;
    padding         : 0px 6px;
}
.attachment-version, 
.attachment-size, 
.attachment-user,
.attachment-date {
    font-size   : 12px;
    line-height : 16px;
}
#frame-download {
    display : none;
}
.xxxs .attachment {
    padding : 4px 10px;
}
.xxxs .attachment-user,
.xxxs .attachment-date {
    display : none;
}

.no-attachments-header > .attachments {
    top : 0px;
}

.attachments-list.tiles {
    flex-direction  : row;
    flex-wrap       : nowrap;
    gap             : var(--spacer-xxxs);
    overflow-y      : auto;
}
.attachments-list.tiles .attachment {
    height      : unset;
    padding     : 8px 16px 8px 16px;
    text-align  : center;
}
.attachments-list.tiles .attachment-graphic {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    width           : 100% !important;
}
.attachments-list.tiles .attachment-graphic > img {
    width : 100% !important;
}
.attachments-list.tiles.xxs > .attachment { min-width : 120px; width : 120px; }
.attachments-list.tiles.xs  > .attachment { min-width : 120px; width : 120px; }
.attachments-list.tiles.s   > .attachment { min-width : 160px; width : 160px; }
.attachments-list.tiles.m   > .attachment { min-width : 160px; width : 160px; }
.attachments-list.tiles.l   > .attachment { min-width : 180px; width : 180px; }
.attachments-list.tiles.xl  > .attachment { min-width : 200px; width : 200px; }
.attachments-list.tiles.xxl > .attachment { min-width : 220px; width : 220px; }
.attachments-list.tiles.xxs .attachment-graphic, .attachments-list.tiles.xxs .attachment-graphic > img { height :  16px; min-width:  16px; width :  16px; }
.attachments-list.tiles.xs  .attachment-graphic, .attachments-list.tiles.xs  .attachment-graphic > img { height :  24px; min-width:  24px; width :  24px; }
.attachments-list.tiles.s   .attachment-graphic, .attachments-list.tiles.s   .attachment-graphic > img { height :  32px; min-width:  32px; width :  32px; }
.attachments-list.tiles.m   .attachment-graphic, .attachments-list.tiles.m   .attachment-graphic > img { height :  48px; min-width:  48px; width :  48px; }
.attachments-list.tiles.l   .attachment-graphic, .attachments-list.tile0s.l  .attachment-graphic > img { height :  64px; min-width:  64px; width :  64px; }
.attachments-list.tiles.xl  .attachment-graphic, .attachments-list.tiles.xl  .attachment-graphic > img { height :  96px; min-width:  96px; width :  96px; }
.attachments-list.tiles.xxl .attachment-graphic, .attachments-list.tiles.xxl .attachment-graphic > img { height : 128px; min-width: 128px; width : 128px; }
.attachments-list.tiles .attachment-details {
    max-width : 100%;
}
.attachments-list.tiles .attachment-version {
    margin      : auto;
    max-width   : 26px;
}
.attachments-list.tiles.xxs .attachment-user,
.attachments-list.tiles.xs .attachment-user,
.attachments-list.tiles.xxs .attachment-date,
.attachments-list.tiles.xs .attachment-date {
    display : none;
}

.attachments-list.list {
    display         : flex;
    flex-direction  : column;
    gap             : var(--spacer-xxxs);
    overflow-x      : auto;
}
.attachments-list.list .attachment {
    display     : flex;
    gap         : var(--spacer-s);
    padding     : var(--spacer-s);
    width       : unset !important;
}
.attachments-list.list .attachment-details {
    max-width : calc(100% - 52px);
    width     : calc(100% - 52px);
}
.attachments-list.list .attachment-name {
    display     : inline-flex;
    font-weight : bold;
}
.attachments-list.list .attachment-summary {
    display         : flex;
    flex-direction  : row;
    gap             : var(--spacer-m);
}

.attachments-list.list.xxl,
.attachments-list.list.xl {
    gap : var(--spacer-xxs);
}

.attachments-list.list.xxs > .attachment { padding: var(--spacer-xxs); height : 12px ! important; min-height : 12px ! important; }
.attachments-list.list.xs >  .attachment { padding: var(--spacer-xs);  height : 18px ! important; min-height : 18px ! important; }
.attachments-list.list.s >   .attachment { padding: var(--spacer-s);   height : 24px ! important; min-height : 24px ! important; }
.attachments-list.list.m >   .attachment { padding: var(--spacer-s);   height : 32px ! important; min-height : 32px ! important; }
.attachments-list.list.l >   .attachment { padding: var(--spacer-s);   height : 36px ! important; min-height : 36px ! important; }
.attachments-list.list.xl >  .attachment { padding: var(--spacer-m);   height : 42px ! important; min-height : 42px ! important; }
.attachments-list.list.xxl > .attachment { padding: var(--spacer-m);   height : 48px ! important; min-height : 48px ! important; }

.attachments-list.list.xxs .attachment-graphic, .attachments-list.list.xxs .attachment-graphic > img { height : 12px; min-width: 12px; width : 12px; }
.attachments-list.list.xs  .attachment-graphic, .attachments-list.list.xs  .attachment-graphic > img { height : 18px; min-width: 18px; width : 18px; }
.attachments-list.list.s   .attachment-graphic, .attachments-list.list.s   .attachment-graphic > img { height : 24px; min-width: 24px; width : 24px; }
.attachments-list.list.m   .attachment-graphic, .attachments-list.list.m   .attachment-graphic > img { height : 32px; min-width: 32px; width : 32px; }
.attachments-list.list.l   .attachment-graphic, .attachments-list.list.l   .attachment-graphic > img { height : 36px; min-width: 16px; width : 36px; }
.attachments-list.list.xl  .attachment-graphic, .attachments-list.list.xl  .attachment-graphic > img { height : 42px; min-width: 16px; width : 42px; }
.attachments-list.list.xxl .attachment-graphic, .attachments-list.list.xxl .attachment-graphic > img { height : 48px; min-width: 16px; width : 48px; }

.attachments-list.list.xxs div { line-height : 12px; }
.attachments-list.list.xs  div { line-height : 18px; }
.attachments-list.list.s   div { line-height : 24px; }
.attachments-list.list.m   div { line-height : 16px; }
.attachments-list.list.l   div { line-height : 18px; }
.attachments-list.list.xl  div { line-height : 21px; }
.attachments-list.list.xxl div { line-height : 24px; }

.attachments-list.list.xxl  .attachment-name,
.attachments-list.list.xl   .attachment-name,
.attachments-list.list.xxl  .attachment-summary > div,
.attachments-list.list.xl   .attachment-summary > div {
    font-size : 14px;
}  

.attachments-list.list.xxs .attachment-user, .attachments-list.list.xxs .attachment-date,
.attachments-list.list.xs .attachment-user, .attachments-list.list.xs .attachment-date {
    display : none;
}
.attachments-list.list.xxs .attachment-details,
.attachments-list.list.xs .attachment-details,
.attachments-list.list.s .attachment-details {
    display         : flex;
    flex-direction  : row;
    gap             : var(--spacer-xxs);
    justify-content : space-between;
}


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

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

.attachments-list.table.xxs .attachment > div { font-size : 12px; height : 16px; line-height : 16px; padding : 2px  8px; }
.attachments-list.table.xs  .attachment > div { font-size : 12px; height : 18px; line-height : 18px; padding : 4px  8px; }
.attachments-list.table.s   .attachment > div { font-size : 14px; height : 24px; line-height : 24px; padding : 2px 10px; }
.attachments-list.table.m   .attachment > div { font-size : 14px; height : 32px; line-height : 32px; padding : 2px 10px; }
.attachments-list.table.l   .attachment > div { font-size : 14px; height : 36px; line-height : 36px; padding : 2px 10px; }
.attachments-list.table.xl  .attachment > div { font-size : 14px; height : 42px; line-height : 42px; padding : 2px 10px; }
.attachments-list.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; }


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

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



/*  BOM */
/* ----------------------------------------------------------------------------- */
.bom-multi-select-action,
.bom-single-select-action {
    display : none;
}
.bom-search-input {
    width : 50px;
}
.bom-table {
    table-layout: fixed;
}
.bom-item {
    cursor : pointer;
}
.bom-item > td {
    padding : 4px 6px;
}
.bom-item > td:first-child {
    border-left : 1px solid transparent;
}
.bom-item > td:last-child {
    border-right : 1px solid transparent;
}
.bom-item.result > td.bom-color { 
    background : var(--color-status-yellow); 
}

.bom-item.selected > td {
    background : var(--color-selected-background);
}
.bom-item:hover td {
    background-color : var(--color-hover-background) !important;
    border-color     : var(--color-blue-500) !important;
}
.bom-hidden {
    display : none !important;
}
.bom-color {
    background  : transparent;
    padding     : 0px !important;
    width       : 6px;
}
.bom-nav {
    cursor          : pointer;
    font-size       : 20px;
    line-height     : 5px;
    padding-right   : 4px;
    width           : 16px;
    position        : relative;
    top             : 5px;
}
.bom-nav:before { 
    content: '\e5cf';
 }
.bom-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;
}
.bom-number {
    min-width   : 28px;
    padding     : 5px;
    font-weight : bold;
    display     : inline-block;
}   
.bom-descriptor {
    padding : 4px;
}
.bom-actions > div {
    display : none;
}
.bom-item:hover .bom-actions > div {
    display : flex;
}
.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 {
    text-align : right;
}
.bom-quantity {
    font-weight : bold;
    text-align  : right;
    width       : 50px;
}
.bom-content {
    bottom : 42px;
}

.bom-counters {
    background      : var(--color-surface-level-4);
    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-content {
    bottom : 0px;
}
.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-level-1  .bom-first-col { padding-left :  25px; }
.bom-level-2  .bom-first-col { padding-left :  46px; }
.bom-level-3  .bom-first-col { padding-left :  66px; }
.bom-level-4  .bom-first-col { padding-left :  86px; }
.bom-level-5  .bom-first-col { padding-left : 106px; }
.bom-level-6  .bom-first-col { padding-left : 126px; }
.bom-level-7  .bom-first-col { padding-left : 146px; }
.bom-level-8  .bom-first-col { padding-left : 166px; }
.bom-level-9  .bom-first-col { padding-left : 186px; }
.bom-level-10 .bom-first-col { padding-left : 206px; }

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

.bom.compact > .panel-content > .bom-table > .bom-thead > tr > th { font-size : 12px; padding : 6px 8px; }
.bom.compact > .panel-content > .bom-table > .bom-tbody > tr > td { font-size : 12px; }
.bom.compact > .panel-content > .bom-table > .bom-thead > tr > th.bom-color { width : 4px; }
.bom.compact > .panel-content > .bom-table > .bom-tbody > tr > td.bom-color { width : 4px; }
.bom.compact > .panel-content > .bom-table > .bom-tbody > tr > td.bom-first-col > span { font-size : 12px; padding-top : 0px; padding-bottom : 0px; }
.bom.compact > .panel-content > .bom-table > .bom-tbody > tr > td.bom-first-col > span.icon { font-size : 16px; line-height : 8px; }
.bom.compact > .panel-content > .bom-table .bom-nav { top : 4px; }

/*  FLAT BOM */
/* ----------------------------------------------------------------------------- */
.flat-bom-select-all {
    cursor : pointer;
}
.flat-bom-filter-empty.selected,
.flat-bom-counter.selected {
    background   : var(--color-status-yellow) !important;
    border-color : var(--color-status-yellow) !important;
}
.flat-bom-multi-select-action,
.flat-bom-single-select-action {
    display : none;
}
.flat-bom-search-input {
    border      : none !important;
    box-shadow  : none !important;
    font-size   : 14px;
    padding     : 4px 10px;
    width       : 50px;
}
.flat-bom-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;
}
.flat-bom-item:last-of-type {
    border-bottom : none;
}
.flat-bom-item:hover td {
    background-color : var(--color-hover-background) !important;
    border-color     : var(--color-blue-500) !important;
}
.flat-bom-item.selected > td {
    /* .bom-item.selected > td { */
        background : var(--color-selected-background);
        /* border-color : var(--color-selected-border); */
    /* } */
    /* background-color : var(--color-selected); */
    /* border : 1px solid var(--color-selected-border); */
}
.flat-bom-item.unread { 
    font-weight : bold; 
}

.flat-bom-tbody > tr.selected > td.flat-bom-check .icon-check-box::before { 
    content : '\e834'; 
}

.flat-bom-number {
    font-weight     : bold;
    padding-left    : 10px;
    padding-right   : 10px;
    text-align      : right;
}
.flat-bom-title {
    left            : 0;
    line-height     : 26px;
    overflow        : hidden;
    position        : sticky;
    text-overflow   : ellipsis;
    white-space     : nowrap;
}
.flat-bom-qty {
    line-height : 26px;
    text-align  : right;
    width       : 50px;
}

.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-bom-item:hover .flat-bom-actions > span {
    display : block;
}
.flat-bom-item > td:first-of-type {
    border-left : 1px solid transparent;
}
.flat-bom-item > td:last-of-type {
    border-right : 1px solid transparent;
}
.flat-bom-item > td.changed > input, 
.flat-bom-item > td.changed > select {
    background : var(--color-status-red-bright) !important;
}
.no-actions .flat-bom-title { width : calc(100% - 50px); }

.flat-bom.compact,
.flat-bom.compact input,
.flat-bom.compact select {
    font-size   : 12px;
    line-height : 12px;
}
.flat-bom.compact th { 
    padding     : 8px 4px; 
    white-space : nowrap;
}
.flat-bom.compact td { 
    padding     : 2px 4px; 
    white-space : nowrap;
}
.flat-bom.compact .flat-bom-counter {
    font-size   : 12px;
}
.flat-bom.compact .flat-bom-select-all.icon {
    font-size   : 16px;
    position    : relative;
    top         : 1px;
}
.flat-bom.compact .flat-bom-check .icon {
    font-size   : 16px;
    position    : relative;
    top         : 2px;
}
.flat-bom.compact table input {
    padding : 4px 4px;
    width   : calc(100% - 8px);
}
.flat-bom.compact table select {
    padding : 3px 2px;
    width   : 100%;
}


/*  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 */
/* ----------------------------------------------------------------------------- */
.workflowh-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;
    margin      : 3px 0px 1px;
    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;
}
.workflow-next-title {
    font-weight     : bold;
    margin-bottom   : 4px;
}