.xQVDialog .xCfg {
    display: flex;
    flex-direction: column;
}

iframe[name="qv"] {
    inset: var(--toolbar-height) 0 !important;
    height: calc(100% - var(--toolbar-height)) !important;
}

/* Quickviewer
-------------------------------------------- */


.xQV {
    padding: var(--quickview-body-padding);
}

.xQV .outer {
    margin-bottom: var(--quickview-margin-bottom);
}


/* Header
-------------------------------------------- */
.xQV .modelHeader {
    padding: var(--quickview-header-padding);
    font-family: var(--quickview-header-font-family);
    font-weight: var(--quickview-header-font-weight);
    font-style: var(--quickview-header-font-style);
    line-height: var(--quickview-header-line-height);
    letter-spacing: var(--quickview-header-letter-spacing);
    color: var(--quickview-header-text-color);
}

.xQV .modelHeader.l1 { font-size: var(--quickview-header-font-size-l1); }
.xQV .modelHeader.l2 { font-size: var(--quickview-header-font-size-l2); }
.xQV .modelHeader.l3 { font-size: var(--quickview-header-font-size-l3); }
.xQV .modelHeader.l4 { font-size: var(--quickview-header-font-size-l4); }
.xQV .modelHeader.l5 { font-size: var(--quickview-header-font-size-l5); }


/* Category
-------------------------------------------- */
.xQV .cat {
    padding: var(--quickview-category-padding);
    font-family: var(--quickview-category-font-family);
    font-size: var(--quickview-category-font-size);
    font-weight: var(--quickview-category-font-weight);
    font-style: var(--quickview-category-font-style);
    line-height: var(--quickview-category-line-height);
    letter-spacing: var(--quickview-category-letter-spacing);
    color: var(--quickview-category-text-color);
}


/* Option
-------------------------------------------- */
.xQV .opt {
    display: flex;
    overflow: hidden;
    align-items: center;
    margin-left: var(--quickview-option-indent);
    padding: var(--quickview-option-padding);
    font-family: var(--quickview-option-font-family);
    font-size: var(--quickview-option-font-size);
    font-weight: var(--quickview-option-font-weight);
    font-style: var(--quickview-option-font-style);
    line-height: var(--quickview-option-line-height);
    letter-spacing: var(--quickview-option-letter-spacing);
    color: var(--quickview-option-text-color);
}

.xQV .opt:hover {
    background-color: var(--quickview-option-background-color--hover);
}

.xQV :is(.optPrc , .optQty) {
    flex: 0 0 var(--quickview-option-value-column-width);
    text-align: var(--quickview-option-value-text-align);
}

.xQV .opt .optDsc {
    flex: 1;
}

.xQV .opt :is(.optDsc.hasProps, .child-config) {
    cursor: pointer;
}

.xQV .opt .optDsc.hasProps::before {
    padding-right: 0.25rem;
    font-family: var(--font-family--icon);
    font-size: var(--icon-font-size--small);
    content: var(--icon-chevron--right);
}

.xQV .opt .optDsc.hasProps.active::before {
    content: var(--icon-chevron--down);
}



/* Properties
-------------------------------------------- */
.xQV .props-section {
    margin-left: var(--quickview-properties-indent);
    margin-bottom: var(--quickview-properties-margin-bottom);
    border-width: var(--quickview-properties-border-width);
    border-style: var(--quickview-properties-border-style);
    border-color: var(--quickview-properties-border-color);
    border-radius: var(--quickview-properties-border-radius);
    background-color: var(--quickview-properties-background-color);
    font-family: var(--quickview-properties-font-family);
    font-size: var(--quickview-properties-font-size);
    font-weight: var(--quickview-properties-font-weight);
    font-style: var(--quickview-properties-font-style);
    line-height: var(--quickview-properties-line-height);
    letter-spacing: var(--quickview-properties-letter-spacing);
    color: var(--quickview-properties-text-color);
}

.xQV .props-section tbody {
    display: block;
}

.xQV .props-section tr:hover {
    background-color: var(--quickview-properties-background-color--hover);
}

.xQV .props-section tr td {
    padding: var(--quickview-properties-padding);
}

.xQV .props-section tr:first-child td {
    padding: 0;
}

.xQV .props-section .label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.xQV .props-section .value {
    flex: 0 0 var(--quickview-properties-value-column-width);
}


.xQV .props-section tr { display: flex; }
.xQV .props-section .label { flex: 1; }
.xQV .total { position: fixed; display: flex; }
/* Total
-------------------------------------------- */
.xQV .total {
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--quickview-properties-total-padding);
    border-width: var(--quickview-properties-total-border-width);
    border-style: var(--quickview-properties-total-border-style);
    border-color: var(--quickview-properties-total-border-color);
    background: var(--quickview-properties-total-background-color);
}

.xQV :is(.totalCap, .totalPrc) {
    font-family: var(--quickview-properties-total-font-family);
    font-size: var(--quickview-properties-total-font-size);
    font-weight: var(--quickview-properties-total-font-weight);
    font-style: var(--quickview-properties-total-font-style);
    line-height: var(--quickview-properties-total-line-height);
    letter-spacing: var(--quickview-properties-total-letter-spacing);
    color: var(--quickview-properties-total-text-color);
}

.xQV .totalCap {
    flex: 1;
}

/* Needs to be organized
--------------------------------------------
--------------------------------------------
--------------------------------------------
-------------------------------------------- */
.xQV .child-section { border: 1px solid #ddd; }

.xQV #expSelOptions { padding: 2px; left: 0; top: 20px; right: 0; bottom: 0; }
.xQV #expSelOptions > div { display: flex; justify-content: space-between; align-items: center; }
.xQV #expSelOptions > div span[title]::before { font-family: var(--font-family--icon); font-size: var(--icon-font-size); content: var(--icon-settings); }
.xQV #expSelOptions > div > img { display: none}
.xQV #expSelOptions > div > div.props { display: flex; align-items: center; }
.xQV #expSelOptions > div > div.props > div input { width: 40px; }
/* property grid label */ .xQV #expSelOptions>div>div.props>div>span { display: inline-block; float: right; }
/* property grid input control */ .xQV #expSelOptions>div>div.props>div>input[type="text"] { width: 50px; }