.xCompareBody .title {
    --compare-title-padding: 0.25rem;
    --compare-title-font-family: var(--heading-01-font-family);
    --compare-title-font-size: var(--heading-01-font-size);
    --compare-title-font-weight: var(--heading-01-font-weight);
    --compare-title-font-style: var(--heading-01-font-style);
    --compare-title-line-height: var(--heading-01-line-height);
    --compare-title-letter-spacing: var(--heading-01-letter-spacing);
    --compare-title-text-color: var(--text-primary);
    --compare-title-border-width: 0 0 var(--border-width) 0;
    --compare-title-border-style: var(--border-style);
    --compare-title-border-color: var(--border-color);
}

.xCompareBody .cat {
    --compare-category-padding: 1rem 0.25rem 0.25rem 0.5rem;
    --compare-category-font-family: var(--base-font-family);
    --compare-category-font-size: var(--base-font-size);
    --compare-category-font-weight: 600;
    --compare-category-font-style: var(--base-font-style);
    --compare-category-line-height: var(--base-line-height);
    --compare-category-letter-spacing: var(--base-letter-spacing);
    --compare-category-text-color: var(--text-primary);
    --compare-category-border-width: 0 0 var(--border-width) 0;
    --compare-category-border-style: var(--border-style);
    --compare-category-border-color: var(--border-color);
}

.xCompare .opt {
    --compare-option-padding: 0.5rem 0.25rem 0.5rem 0;
    --compare-option-font-family: var(--base-font-family);
    --compare-option-font-size: var(--base-font-size);
    --compare-option-font-weight: var(--base-font-weight);
    --compare-option-font-style: var(--base-font-style);
    --compare-option-line-height: var(--base-line-height);
    --compare-option-letter-spacing: var(--base-letter-spacing);
    --compare-option-text-color: var(--text-primary);
    --compare-option-border-width: 0;
    --compare-option-border-style: var(--border-style);
    --compare-option-border-color: var(--border-color);
    --compare-option-background-color--hover: var(--layer);
    --compare-option-background-color--selected: var(--layer--selected);
    --compare-option-background-color--hover--selected: var(--layer--hover--selected);
}

.xCompare :is(.optProp, .optPropAlt) {
    --compare-option-property-padding: 0.125rem;
    --compare-option-property-indent: 2rem;
    --compare-option-property-font-family: var(--base-font-family);
    --compare-option-property-font-size: var(--base-font-size);
    --compare-option-property-font-weight: var(--base-font-weight);
    --compare-option-property-font-style: var(--base-font-style);
    --compare-option-property-line-height: var(--base-line-height);
    --compare-option-property-letter-spacing: var(--base-letter-spacing);
    --compare-option-property-text-color: var(--text-primary);
    --compare-option-property-border-width: 0;
    --compare-option-property-border-style: var(--border-style);
    --compare-option-property-border-color: var(--border-color);
    --compare-option-property-background-color: var(--layer);
    --compare-option-property-background-color--hover: var(--layer--hover);
}

/* Main
-------------------------------------------- */
/* Core start */
form[action*="Compare.aspx"] .xCfg:not(.xQVDialog) { display: flex; flex-direction: column; }
form[action*="Compare.aspx"] .xCfg:not(.xQVDialog) .xTb { position: sticky; top: 0; z-index: 1; }
/* Core end */

.xCompareBody {
    flex: 1;
}


/* Title
-------------------------------------------- */
.xCompare .title td {
    padding: var(--compare-title-padding);
    font-family: var(--compare-title-font-family);
    font-size: var(--compare-title-font-size);
    font-weight: var(--compare-title-font-weight);
    font-style: var(--compare-title-font-style);
    line-height: var(--compare-title-line-height);
    letter-spacing: var(--compare-title-letter-spacing);
    color: var(--compare-title-text-color);
    border-width: var(--compare-title-border-width);
    border-style: var(--compare-title-border-style);
    border-color: var(--compare-title-border-color);
}


/* Category
-------------------------------------------- */
.xCompare .cat td {
    padding: var(--compare-category-padding);
    font-family: var(--compare-category-font-family);
    font-size: var(--compare-category-font-size);
    font-weight: var(--compare-category-font-weight);
    font-style: var(--compare-category-font-style);
    line-height: var(--compare-category-line-height);
    letter-spacing: var(--compare-category-letter-spacing);
    color: var(--compare-category-text-color);
    border-width: var(--compare-category-border-width);
    border-style: var(--compare-category-border-style);
    border-color: var(--compare-category-border-color);
}


/* Option
-------------------------------------------- */
.xCompare .opt td {
    padding: var(--compare-option-padding);
    font-family: var(--compare-option-font-family);
    font-size: var(--compare-option-font-size);
    font-weight: var(--compare-option-font-weight);
    font-style: var(--compare-option-font-style);
    line-height: var(--compare-option-line-height);
    letter-spacing: var(--compare-option-letter-spacing);
    color: var(--compare-option-text-color);
    border-width: var(--compare-option-border-width);
    border-style: var(--compare-option-border-style);
    border-color: var(--compare-option-border-color);
}

.xCompare tr.opt:hover td {
    background-color: var(--compare-option-background-color--hover);
}

.xCompare .opt[visprops="true"] td {
    background-color: var(--compare-option-background-color--selected);
}

.xCompare .opt[visprops="true"]:hover td {
    background-color: var(--compare-option-background-color--hover--selected);
}


/* Option Property
-------------------------------------------- */
.xCompare :is(.optProp, .optPropAlt) td {
    padding: var(--compare-option-property-padding);
    font-family: var(--compare-option-property-font-family);
    font-size: var(--compare-option-property-font-size);
    font-weight: var(--compare-option-property-font-weight);
    font-style: var(--compare-option-property-font-style);
    line-height: var(--compare-option-property-line-height);
    letter-spacing: var(--compare-option-property-letter-spacing);
    color: var(--compare-option-property-text-color);
    border-width: var(--compare-option-property-border-width);
    border-style: var(--compare-option-property-border-style);
    border-color: var(--compare-option-property-border-color);
    background-color: var(--compare-option-property-background-color);
}

.xCompare :is(.optProp, .optPropAlt):hover td {
    background-color: var(--compare-option-property-background-color--hover);
}

.xCompare td:is(.optPropHdr, .optPropAltHdr) {
    padding-left: var(--compare-option-property-indent);
}

/* ---
-------------------------------------------- */

/* ---
-------------------------------------------- */


/* Needs to be organized
--------------------------------------------
--------------------------------------------
--------------------------------------------
-------------------------------------------- */
table.xCompare tr.lastsummary > td { border-bottom: solid 1px #a2a2a2; }
table.xCompare tr > td.label { text-align: right; font-weight: bold; }
table.xCompare tr > td.item { text-align: center; }
table.xCompare tr>td.itemNa { background-image: url(iconDash.png); background-repeat: no-repeat; background-position: center; }
/* table.xCompare tr.cat>td { border-top: solid 1px; border-bottom: solid 1px; background-color: lightgrey; } */

table.xCompare tr.optProp { display: none; }
table.xCompare tr.optPropAlt { display: none; }
table.xCompare tr.optPropMismatch { display: none; }
table.xCompare tr.optPropAltMismatch { display: none; }

table.xCompare tr.optProp>td { }
/* table.xCompare tr.optPropAlt>td { border-right: solid 1px; border-color: #DDDDDD; background: #DFDFDF; } */
table.xCompare tr.optPropMismatch>td { border-right: solid 1px; border-color: #DDDDDD; color: darkred; }
table.xCompare tr.optPropAltMismatch>td { border-right: solid 1px; border-color: #DDDDDD; background: #DFDFDF; color: darkred; }
/* table.xCompare tr.opt>td.rowHdr[expandButton] { cursor: pointer; color: Blue; font-weight: bold; } */
/* table.xCompare tr.opt>td.empty { background-position: center center; background-repeat: no-repeat; } */
table.xCompare tr.opt>td.na { text-align: center; }

td.rowHdr[expandButton] { cursor: pointer; }
td.rowHdr[expandButton]::before { font-family: var(--font-family--icon); content: var(--icon-chevron--down); font-size: 0.75rem; }
tr[visprops="false"].opt>td.rowHdr[expandButton]::before { font-family: var(--font-family--icon); content: var(--icon-chevron--right); }

tr:is(.optProp, .optPropAlt):hover > td { background-color: var(--layer); }
td.empty img, td.sel img { display: none; }
td::before { font-family: var(--font-family--icon); }
td.empty::before {
    content: var(--icon-dot-mark);
}
td.sel::before {
    content: var(--icon-checkmark--filled);
    color: var(--support-success);
}