:root {

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

}


/*  ITEM DETAILS DISPLAY */
/* ----------------------------------------------------------------------------- */
#bookmark.active { 
    background : var(--color-status-yellow); 
    color : white;
}
.section {
    background : var(--color-gray-100);
    cursor : pointer;
    margin : 4px 0px;
    padding : 6px 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}
.section:hover { background: rgba(128, 128, 128, 0.25); }
.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 {
    padding : 10px 20px;
    transition: all 3s ease;
}
.section-fields .field {
    border-bottom : 1px solid var(--color-gray-100);
    display : flex;
    padding : 6px 0px;
}
.section-fields .field:last-child { border-bottom : none; }
.section-fields > .field.required > .field-label { color : var(--color-status-red); }


.field-label {
    padding: 4px var(--padding-field-label) 0px 0px;
    width: var(--width-field-label);
    text-align: right;
    font-weight : bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-value {
    /* background: white; */
    border: none;
    flex-grow : 1;
    /* font-size: 12px; */
    padding: 0px;
    width: calc(100% - var(--padding-field-label) - var(--width-field-label));
}
/* .field-value > date,
.field-value > input,
.field-value > select,
.field-value > textarea {
    font-size : 12px;
} */
.field-value > input {
    background : white;
    padding-top : 6px;
    padding-bottom : 6px;
    width : calc(100% - 16px);
}
.field-value > select {
    border : none;
    border-bottom : 1px solid var(--color-gray-100);
}
.field-value > textarea {
    height : 55px;
    padding : 6px 8px;
    resize : vertical;
    width : calc(100% - 16px);
}
.field-value > select { width : 100%; }

.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; }
.field-value.multi-picklist { padding-top : 5px; }
.field-value.radio { padding : 5px 0px 0px; }
.radio-label {
    position : relative;
    top : -4px;
}


.field-value > textarea:disabled,
.field-value > input:disabled {
    background : transparent !important;
    border-color : transparent !important;
    resize : none;
    text-overflow : ellipsis;
}

#details-sections.view-only .field-label {
    color : unset;
    font-size : 12px;
    font-weight : bold;
    padding : 0px 10px;
    text-align : right;
    width : 160px;
}
#details-sections.view-only .field-value {
    background: none;
    border: none;
    font-family: 'ArtifaktElement';
    font-size: 12px;
    resize: none;
    width: calc(100% - 180px);
}
#details-sections.view-only .field-value > img {
    max-width : 100%;
}
#details-sections.view-only .field-value > input {
    font-size : 12px;
}

#details-sections.view-only input.field-value {
    background : none;
    border : none;
    padding : 0px;
}


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


/* FIELD UNITS DISPLAY */
.field-unit { padding : 4px 0px 0px 10px; }
.field-value.with-unit { display : flex; }


/* PANEL SURFACE LEVEL 2 ADJUSTMENTS */
.surface-level-2 > .section { background : var(--color-gray-200); }
.surface-level-2 > .section:hover { background : var(--color-gray-400); }
.surface-level-2 > .section-fields .field { border-bottom : none; }
.panel-content.surface-level-2 .section ,
.field-value.surface-level-2 .section { background: var(--color-gray-300); }
/* .panel-content.surface-level-2 .field-value > * { background : #f5f5f5; } */
.panel-content.surface-level-2 .field.editable > .field-value > date,
.panel-content.surface-level-2 .field.editable > .field-value > input,
.panel-content.surface-level-2 .field.editable > .field-value > select,
.panel-content.surface-level-2 .field.editable > .field-value > textarea,
.form.surface-level-2 .field.editable > .field-value > date,
.form.surface-level-2 .field.editable > .field-value > input,
.form.surface-level-2 .field.editable > .field-value > select,
.form.surface-level-2 .field.editable > .field-value > textarea,
.surface-level-2 > .section-fields > .field.editable > .field-value > date,
.surface-level-2 > .section-fields > .field.editable > .field-value > input,
.surface-level-2 > .section-fields > .field.editable > .field-value > select,
.surface-level-2 > .section-fields > .field.editable > .field-value > textarea,
.surface-level-2 > .field.editable > .field-value > date,
.surface-level-2 > .field.editable > .field-value > input,
.surface-level-2 > .field.editable > .field-value > select,
.surface-level-2 > .field.editable > .field-value > textarea {  
    background : white; 
    border-bottom : 1px solid var(--color-gray-300);
}
.panel-content.surface-level-2 .field.editable input[type='radio'],
.form.surface-level-2 .field.editable input[type='radio'] { border-color : var(--color-gray-300); }
.panel-content.surface-level-2 .section-fields .field:last-of-type,
.form.surface-level-2 .section-fields .field:last-of-type { border-bottom : none; }


/* ENABLE COMPACT DISPLAY */
.compact .section-fields { padding : 10px 0px; }
.compact .section-fields .field { padding : 2px 4px; }
.compact .section-fields .field-label { padding-top : 0px; padding-right : 10px; }
.compact .section-fields .field-value.readonly input { padding : 0px 0px; }
.compact .section-fields .field-value.computed { padding-top : 0px; }
.compact .section-fields .field-value.checkbox > input { margin : 3px 0px 0px 0px; }
.compact p { margin : 0px;  padding : 0px; }