/* FORM SECTIONS */
/* ----------------------------------------------------------------------------- */
.surface-level-1 .classification-data,
.classification-content > .section-fields,
.classification-content .field.content-item,
.classification-content .field-label {
    background : var(--color-surface-level-2);
}


/* CURRENT CLASS */
/* ----------------------------------------------------------------------------- */
.classification-header.classification-data {
    display  : grid;
    padding  : 12px 18px;
    grid-gap : 2px;
    grid-template-columns: 134px 1fr;
    margin   : 10px;
    width    : calc(100% - 56px);
}
.classification-header .classification-label {
    font-weight   : bold;
    padding-right : 14px;
    text-align    : right;
}
.classification-header .button.classification-change {
    display : inline-block;
    margin  : 6px 0px 2px;
}


/* CLASS TREE */
/* ----------------------------------------------------------------------------- */
.classification-header.classification-tree {
    position : absolute;
    top      : 0px;
    right    : 0px;
    bottom   : 0px;
    left     : 0px;
}
.classification-header.classification-tree .panel-header {
    border : none;
}
.classification-header.classification-tree .panel-title-main {
    font-size : 12px;
}
.classification-header.classification-tree .panel-actions {
    justify-content : right;
    top : 34px;
}


/* FORM FIELDS */
/* ----------------------------------------------------------------------------- */
.classification-content > .section-fields {
    margin  : 0px 10px;
    padding : 12px 18px;
    width   : calc(100% - 56px);
}
.classification-content .field-label {
    padding-left : 0px !important;
    max-width    : 120px;
    min-width    : 120px;
    width        : 120px;
}
.classification-content .field-editable input {
    background :  var(--color-surface-level-1) !important;
}



/* SIMILAR ITEMS */
/* ----------------------------------------------------------------------------- */
:root {
    --height-similar-filters : 300px;
}
.similar-contents {
    bottom : calc(var(--height-similar-filters) + 24px);
    transition : left ease 0.2s, top ease 0.2s, right ease 0.2s, bottom ease 0.2s;
}
.similar-filters {
    bottom     : 0px;
    height     : var(--height-similar-filters);
    transition : left ease 0.2s, top ease 0.2s, right ease 0.2s, bottom ease 0.2s;
}
.similar-filters-toggle {
    cursor      : pointer;
    display     : flex;
    height      : 40px;
    line-height : 40px;
    padding     : 0px 20px;
    width       : 80px;
    position    : relative;
    top         : -24px;
    left        : 42px;
    text-align  : center;
    justify-content : space-between;
}
.similar-filters-toggle::after { 
    content : '\e313';
    font-family: 'Material Symbols Sharp';
    font-weight: normal;
    font-style: normal;
    font-size: 16px;
    line-height: 40px;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased; 
}

.no-filters-panel .similar-contents { bottom : 30px; }
.no-filters-panel .similar-filters  { bottom : calc(10px - var(--height-similar-filters)); }
.no-filters-panel .similar-filters-toggle::after { content : '\e316'; }
.no-filters-panel .similar-filters-list-actions { display : none; }

.similar-contents .panel-actions {
    justify-content : right;
}
.similar-contents .tiles.list.l > .tile {
    gap        : 4px;
    height     : unset;
    min-height : 134px;
}
.similar-contents .tiles.list.l .tile-details {
    margin : 8px 8px 8px 0px;
}
.similar-contents .tiles.list.l .tile-image {
    margin : 12px;
}
.similar-contents .tiles.list.l .tile-actions {
    flex-direction  : column;
    justify-content : start;
    padding         : 12px;
}

.similar-filters-list-actions {
    top   : 14px !important;
    right : 14px !important;
    justify-content : right;
} 

#similar-filters-list-content {
    display    : grid;
    gap        : 1px;
    margin     : 6px 0px;
    overflow   : hidden;
    top        : 28px;
    grid-template-columns : 1fr 1fr;
    grid-template-rows    : 244px 100px;
    height   : var(--height-filters);
    position : absolute;
    right    : 0px;
    bottom   : 0px;
    left     : 0px;
}
#similar-filters-list-content > div {
    overflow-y : auto;
    padding    : 12px 18px;
}
#similar-filters-list-content > div::-webkit-scrollbar {
    display : none;
}
#similar-filters .panel-section-title {
    font-weight : bold;
    line-height : 24px;
}

.filter-section-or  .panel-section-title,
.filter-section-or  .panel-section-subtitle,
.filter-section-and .panel-section-title,
.filter-section-and .panel-section-subtitle,
.similar-filters-list .class-filter-property {
    padding-left : 10px;
}

#similar-filters-list-processing { display : none !important;}

.similar-filters-list .panel-section {
    background : var(--color-surface-level-2);
}
.similar-filters-list .class-property-selector {
    margin     : 6px 0px;
    text-align : left;
    width      : 100%;
}
.similar-filters-list .class-filters {
    display : flex;
    gap     : 4px;
    flex-direction : column;
}
.similar-filters-list .class-filter {
    display : flex;
    gap     : 4px;
}
.similar-filters-list .class-filter-property {
    flex-grow     : 1;
    line-height   : 24px;
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
}
.similar-filters-list input.class-filter-input {
    line-height : 24px;
    width       : 60px;
    padding     : 0px 6px;
}
.similar-filters-list .filter-section-advanced {
    display     : grid;
    column-gap  : 16px;
    grid-column : 1 / 3;
    grid-template-columns : 240px 1fr;
}
.similar-filters-list .class-filter-advanced {
    grid-column    : 2;
    grid-row-start : 1;
    grid-row-end   : 3;
}