/* Font Family
-------------------------------------------- */
:root {
    --font-family--icon:    salesforce-icons;

    --font-family:              -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --font-family-heading:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --font-family-monospace:    Consolas, Menlo, Monaco, Courier, monospace;

    --form-label-font-size:     12px;
    --input-static-font-size:   14px;

    --card-font-weight:                 700;
    --font-weight-bold:                 700;
    --font-weight-regular:              400;
    --input-static-font-weight:         400;
    --page-header-title-font-weight:    700;
    --tabs-font-weight:                 700;

    --font-size-1:  10px;
    --font-size-2:  12px;
    --font-size-3:  13px;
    --font-size-4:  14px;
    --font-size-5:  16px;
    --font-size-6:  18px;
    --font-size-7:  20px;
    --font-size-8:  24px;
    --font-size-9:  28px;
    --font-size-10: 32px;
    --font-size-11: 42px;

    --line-height-heading:  1.25;
    --line-height-reset:    1;
    --line-height-text:     1.5;

}



/* Font & Text Styling
-------------------------------------------- */
:root {
    --base-font-family:             var(--font-family);
    --base-font-size:               var(--font-size-3);
    --base-font-weight:             var(--font-weight-regular);
    --base-font-style:              initial;
    --base-font-stretch:            initial;
    --base-text-align:              start;
    --base-text-transform:          none;
    --base-line-height:             var(--line-height-text);
    --base-letter-spacing:          initial;
    --base-word-spacing:            initial;

    --heading-01-font-family:       var(--font-family-heading);
    --heading-01-font-size:         var(--font-weight-regular);
    --heading-01-font-weight:       var(--page-header-title-font-weight);
    --heading-01-font-style:        initial;
    --heading-01-font-stretch:      initial;
    --heading-01-text-align:        start;
    --heading-01-text-transform:    none;
    --heading-01-line-height:       var(--line-height-heading);
    --heading-01-letter-spacing:    initial;
    --heading-01-word-spacing:      initial;

    --heading-02-font-family:       var(--font-family);
    --heading-02-font-size:         var(--font-weight-regular);
    --heading-02-font-weight:       var(--font-weight-bold);
    --heading-02-font-style:        initial;
    --heading-02-font-stretch:      initial;
    --heading-02-text-align:        start;
    --heading-02-text-transform:    none;
    --heading-02-line-height:       var(--line-height-heading);
    --heading-02-letter-spacing:    initial;
    --heading-02-word-spacing:      initial;

    --meta-font-family:             var(--font-family);
    --meta-font-size:               var(--form-label-font-size);
    --meta-font-weight:             var(--font-weight-regular);
    --meta-font-style:              initial;
    --meta-line-height:             var(--line-height-reset);
    --meta-letter-spacing:          0.02rem;

    --input-font-family:            var(--font-family);
    --input-font-size:              var(--font-size-3);
    --input-font-weight:            var(--input-static-font-weight);
    --input-font-style:             inherit;
    --input-line-height:            var(--line-height-text);
    --input-letter-spacing:         inherit;
}

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


/* COMPONENTS
-------------------------------------------- */

/* Action Panel */
.action-panels {
    --actionpanel-titlebar-font-family:         var(--heading-01-font-family);
    --actionpanel-titlebar-font-size:           var(--heading-01-font-size);
    --actionpanel-titlebar-font-weight:         var(--heading-01-font-weight);
    --actionpanel-titlebar-font-style:          var(--heading-01-font-style);
    --actionpanel-titlebar-font-stretch:        var(--heading-01-font-stretch);
    --actionpanel-titlebar-text-align:          var(--heading-01-text-align);
    --actionpanel-titlebar-text-transform:      var(--heading-01-text-transform);
    --actionpanel-titlebar-line-height:         var(--heading-01-line-height);
    --actionpanel-titlebar-letter-spacing:      var(--heading-01-letter-spacing);
    --actionpanel-titlebar-word-spacing:        var(--heading-01-word-spacing);
    --actionpanel-message-count-font-family:    var(--font-family--number);
    --actionpanel-message-count-font-size:      10px;
    --actionpanel-message-count-font-weight:    600;
}


/* Body */
body {
    --body-font-family:     var(--base-font-family);
    --body-font-size:       var(--base-font-size);
    --body-font-weight:     var(--base-font-weight);
    --body-font-style:      var(--base-font-style);
    --body-font-stretch:    var(--base-font-stretch);
    --body-text-align:      var(--base-text-align);
    --body-text-transform:  var(--base-text-transform);
    --body-line-height:     var(--base-line-height);
    --body-letter-spacing:  var(--base-letter-spacing);
    --body-word-spacing:    var(--base-word-spacing);
}


/* Button */
:is(.btn, .flat-button, .xIBLink, .xDialogButton) {
    --button-font-family:               var(--base-font-family);
    --button-font-size:                 var(--font-size-2);
    --button-font-weight:               var(--base-font-weight);
    --button-font-style:                var(--base-font-style);
    --button-font-stretch:              var(--base-font-stretch);
    --button-text-align:                center;
    --button-text-transform:            var(--base-text-transform);
    --button-line-height:               30px;
    --button-letter-spacing:            var(--base-letter-spacing);
    --button-word-spacing:              var(--base-word-spacing);

    --button-primary-font-family:       var(--base-font-family);
    --button-primary-font-size:         var(--font-size-2);
    --button-primary-font-weight:       var(--base-font-weight);
    --button-primary-font-style:        var(--base-font-style);
    --button-primary-font-stretch:      var(--base-font-stretch);
    --button-primary-text-align:        center;
    --button-primary-text-transform:    var(--base-text-transform);
    --button-primary-line-height:       30px;
    --button-primary-letter-spacing:    var(--base-letter-spacing);
    --button-primary-word-spacing:      var(--base-word-spacing);

    --button-secondary-font-family:     var(--base-font-family);
    --button-secondary-font-size:       var(--font-size-2);
    --button-secondary-font-weight:     var(--base-font-weight);
    --button-secondary-font-style:      var(--base-font-style);
    --button-secondary-font-stretch:    var(--base-font-stretch);
    --button-secondary-text-align:      center;
    --button-secondary-text-transform:  var(--base-text-transform);
    --button-secondary-line-height:     30px;
    --button-secondary-letter-spacing:  var(--base-letter-spacing);
    --button-secondary-word-spacing:    var(--base-word-spacing);

    --button-close-font-family:         var(--font-family--icon);
    --button-close-font-size:           var(--icon-font-size);
}


/* Category Bar */
.xCbGrpHdr {
	--categorybar-groupheader-font-family:      var(--font-family);
	--categorybar-groupheader-font-size:        var(--font-size-2);
	--categorybar-groupheader-font-weight:      var(--font-weight-regular);
	--categorybar-groupheader-font-style:       var(--heading-02-font-style);
    --categorybar-groupheader-font-stretch:     var(--heading-02-font-stretch);
    --categorybar-groupheader-text-align:       var(--heading-02-text-align);
    --categorybar-groupheader-text-transform:   uppercase;
	--categorybar-groupheader-line-height:      var(--line-height-heading);
	--categorybar-groupheader-letter-spacing:   1px;
    --categorybar-groupheader-word-spacing:     var(--heading-02-word-spacing);
}

.xCbBtns {
	--categorybar-button-font-family:           var(--base-font-family);
	--categorybar-button-font-size:             var(--font-size-3);
	--categorybar-button-font-weight:           var(--base-font-weight);
	--categorybar-button-font-weight--emphasis: bold;
	--categorybar-button-font-style:            var(--base-font-style);
    --categorybar-button-font-stretch:          var(--base-font-stretch);
    --categorybar-button-text-align:            var(--base-text-align);
    --categorybar-button-text-transform:        var(--base-text-transform);
    --categorybar-button-line-height:           var(--base-line-height);
	--categorybar-button-letter-spacing:        var(--base-letter-spacing);
    --categorybar-button-word-spacing:          var(--base-word-spacing);
}

.xCbFilter {
    --categorybar-filter-input-font-family:     var(--font-family);
    --categorybar-filter-input-font-size:       var(--font-size-3);
    --categorybar-filter-input-font-weight:     var(--input-font-weight);
    --categorybar-filter-input-line-height:     var(--input-line-height);
    --categorybar-filter-input-letter-spacing:  var(--input-letter-spacing);
    --categorybar-filter-input-text-align:      var(--input-text-text-align);
}


.xCbFilterResults {
	--categorybar-filter-results-font-family:   var(--font-family--text);
	--categorybar-filter-results-font-size:     var(--font-size-3);
	--categorybar-filter-results-font-weight:   normal;
}


/* Combobox */
.xComboBox {
    --combobox-font-family:                 var(--input-font-family);
    --combobox-font-size:                   var(--input-font-size);
    --combobox-font-weight:                 var(--input-font-weight);
    --combobox-line-height:                 var(--input-line-height);
    --combobox-letter-spacing:              var(--input-letter-spacing);
}

.xCombo {
    --combobox-dropdown-item-font-family:   var(--input-font-family);
    --combobox-dropdown-item-font-size:     var(--input-font-size);
    --combobox-dropdown-item-font-style:    var(--input-font-style);
    --combobox-dropdown-item-font-weight:   var(--input-font-weight);
    --combobox-dropdown-item-line-height:   var(--input-line-height);
    --combobox-dropdown-item-letter-spacing: var(--input-letter-spacing);
}


/* Dialog */
.xDialogPopup .xMsgContainer {
    --dialog-popup-message-font-family:     var(--font-family);
    --dialog-popup-message-font-size:       var(--font-size-3);
    --dialog-popup-message-font-weight:     var(--base-font-weight);
    --dialog-popup-message-font-style:      var(--base-font-style);
    --dialog-popup-message-line-height:     var(--line-height-text);
    --dialog-popup-message-letter-spacing:  var(--base-letter-spacing);
}

.xDialogTitlebar {
    --dialog-titlebar-font-family:      var(--font-family-heading);
    --dialog-titlebar-font-size:        var(--font-size-6);
    --dialog-titlebar-font-weight:      var(--font-weight-regular);
    --dialog-titlebar-font-style:       var(--heading-01-font-style);
    --dialog-titlebar-line-height:      25px;
    --dialog-titlebar-letter-spacing:   var(--heading-01-letter-spacing);
}

.xTransition {
    --dialog-transition-title-font-family:      var(--heading-02-font-family);
    --dialog-transition-title-font-size:        var(--heading-02-font-size);
    --dialog-transition-title-font-weight:      var(--heading-02-font-weight);
    --dialog-transition-title-font-style:       var(--heading-02-font-style);
    --dialog-transition-title-text-transform:   normal;
}


/* Label */
.xL {
    --label-font-weight--emphasis: 600;
}


/* Look Up */
.xLookupBody {
    --lookup-table-header-font-family:          var(--heading-02-font-family);
    --lookup-table-header-font-size:            var(--heading-02-font-size);
    --lookup-table-header-font-weight:          var(--heading-02-font-weight);
    --lookup-table-header-font-style:           var(--heading-02-font-style);
    --lookup-table-header-line-height:          var(--heading-02-line-height);
    --lookup-table-header-letter-spacing:       var(--heading-02-letter-spacing);
    --lookup-table-font-family:                 var(--base-font-family);
    --lookup-table-font-size:                   var(--base-font-size);
    --lookup-table-font-weight:                 var(--base-font-weight);
    --lookup-table-font-style:                  var(--base-font-style);
    --lookup-table-line-height:                 var(--base-line-height);
    --lookup-table-letter-spacing:              var(--base-letter-spacing);
    --lookup-table-row-required-font-weight:    bold;
    --lookup-table-row-nodata-font-style:       italic;
}

.xLookupPreview {
    --lookup-preview-header-font-family:    var(--heading-02-font-family);
    --lookup-preview-header-font-size:      var(--heading-02-font-size);
    --lookup-preview-header-font-weight:    var(--heading-02-font-weight);
    --lookup-preview-header-font-style:     var(--heading-02-font-style);
    --lookup-preview-header-line-height:    var(--heading-02-line-height);
    --lookup-preview-header-letter-spacing: var(--heading-02-letter-spacing);
    --lookup-preview-item-font-family:      var(--base-font-family);
    --lookup-preview-item-font-size:        var(--base-font-size);
    --lookup-preview-item-font-weight:      var(--base-font-weight);
    --lookup-preview-item-font-style:       var(--base-font-style);
    --lookup-preview-item-line-height:      var(--base-line-height);
    --lookup-preview-item-letter-spacing:   var(--base-letter-spacing);
}

.xLookupTb {
    --lookup-toolbar-font-family:           var(--base-font-family);
    --lookup-toolbar-font-size:             var(--base-font-size);
    --lookup-toolbar-font-weight:           var(--base-font-weight);
    --lookup-toolbar-font-style:            var(--base-font-style);
    --lookup-toolbar-subtext-font-style:    italic;
    --lookup-toolbar-line-height:           var(--base-line-height);
    --lookup-toolbar-letter-spacing:        var(--base-letter-spacing);
}


/* Notice */
.xPageNotice {
    --notice-title-font-size:       var(--heading-01-font-size);
    --notice-title-font-weight:     var(--heading-01-font-weight);
    --notice-title-line-height:     var(--heading-01-line-height);
    --notice-title-letter-spacing:  var(--heading-01-letter-spacing);

    --notice-body-font-size:        var(--meta-font-size);
    --notice-body-font-weight:      var(--meta-font-weight);
    --notice-body-line-height:      var(--meta-line-height);
    --notice-body-letter-spacing:   var(--meta-letter-spacing);
}


/* Property */
.xP td[ct="c"] {
    --property-label-font-family:       var(--base-font-family);
    --property-label-font-size:         var(--font-size-3);
    --property-label-font-weight:       var(--base-font-weight);
    --property-label-font-style:        var(--base-font-style);
    --property-label-line-height:       var(--line-height-text);
    --property-label-letter-spacing:    var(--base-letter-spacing);
}


/* Quickview */
.xQV .modelHeader {
    --quickview-header-font-family:         var(--heading-01-font-family);
    --quickview-header-font-size-decreaser: 0.1875rem;
    --quickview-header-font-size-l1:        var(--font-size-5);
    --quickview-header-font-size-l2:        var(--font-size-4);
    --quickview-header-font-size-l3:        var(--font-size-3);
    --quickview-header-font-size-l4:        var(--font-size-2);
    --quickview-header-font-size-l5:        var(--font-size-1);
    --quickview-header-font-weight:         var(--heading-01-font-weight);
    --quickview-header-font-style:          var(--heading-01-font-style);
    --quickview-header-line-height:         var(--heading-01-line-height);
    --quickview-header-letter-spacing:      var(--heading-01-letter-spacing);
}

.xQV .cat {
    --quickview-category-font-family:       var(--heading-02-font-family);
    --quickview-category-font-size:         var(--base-font-size);
    --quickview-category-font-weight:       var(--font-weight-regular);
    --quickview-category-font-style:        var(--heading-02-font-style);
    --quickview-category-line-height:       var(--heading-02-line-height);
    --quickview-category-letter-spacing:    var(--heading-02-letter-spacing);
}

.xQV .opt {
    --quickview-option-font-family:         var(--base-font-family);
    --quickview-option-font-size:           var(--font-size-3);
    --quickview-option-font-weight:         var(--font-weight-bold);
    --quickview-option-font-style:          var(--base-font-style);
    --quickview-option-line-height:         var(--base-line-height);
    --quickview-option-letter-spacing:      var(--base-letter-spacing);
    --quickview-option-value-text-align:    right;
}

.xQV .props-section {
    --quickview-properties-font-family:     var(--base-font-family);
    --quickview-properties-font-size:       var(--font-size-2);
    --quickview-properties-font-weight:     var(--base-font-weight);
    --quickview-properties-font-style:      var(--base-font-style);
    --quickview-properties-line-height:     var(--line-height-text);
    --quickview-properties-letter-spacing:  var(--base-letter-spacing);
}

.xQV .total {
    --quickview-properties-total-font-family:       var(--base-font-family);
    --quickview-properties-total-font-size:         var(--font-size-5);
    --quickview-properties-total-font-weight:       var(--font-weight-bold);
    --quickview-properties-total-font-style:        var(--base-font-style);
    --quickview-properties-total-line-height:       var(--base-line-height);
    --quickview-properties-total-letter-spacing:    var(--base-letter-spacing);
}


/* Region */
.xRgnHdr,
.xSubHdr {
    --region-header-font-family:    var(--font-family);
    --region-header-font-size:      var(--font-size-6);
    --region-header-font-weight:    var(--font-weight-bold);
    --region-header-line-height:    var(--line-height-heading);
    --region-header-letter-spacing: var(--heading-01-letter-spacing);
    --region-header-font-style:     normal;
    --region-header-text-transform: normal;
}


/* Search Box */
.search-box,
.xSearchBox,
.xSearchBoxDropDown {
    --searchbox-item-font-weight--emphasis: 600;
    --searchbox-input-font-family:          inherit;
    --searchbox-input-font-size:            inherit;
    --searchbox-input-font-style:           inherit;
    --searchbox-input-font-weight:          inherit;
    --searchbox-input-letter-spacing:       inherit;
    --searchbox-input-line-height:          inherit;
    --searchbox-searching-font-family:      var(--heading-02-font-family);
    --searchbox-searching-font-size:        var(--heading-02-font-size);
    --searchbox-searching-font-style:       var(--heading-02-font-style);
    --searchbox-searching-font-weight:      var(--heading-02-font-weight);
    --searchbox-searching-letter-spacing:   var(--heading-02-letter-spacing);
    --searchbox-searching-line-height:      var(--heading-02-line-height);
}


/* Setting */
.xStg {
    --setting-controls-detail-font-family:      var(--meta-font-family);
    --setting-controls-detail-font-style:       var(--meta-font-style);
    --setting-controls-detail-font-size:        var(--meta-font-size);
    --setting-controls-detail-font-weight:      var(--meta-font-weight);
    --setting-controls-detail-letter-spacing:   var(--meta-letter-spacing);
    --setting-controls-detail-line-height:      var(--meta-line-height);
    --setting-controls-detail-text-transform:   normal;
}


/* Status Bar */
.xSbText {
    --statusbar-text-font-family:       var(--base-font-family);
    --statusbar-text-font-size:         var(--base-font-size);
    --statusbar-text-font-style:        var(--base-font-style);
    --statusbar-text-font-weight:       var(--base-font-weight);
    --statusbar-text-letter-spacing:    var(--base-letter-spacing);
    --statusbar-text-line-height:       var(--base-line-height);
}

.xSbVer {
    --statusbar-version-font-family:    var(--meta-font-family);
    --statusbar-version-font-size:      var(--meta-font-size);
    --statusbar-version-font-style:     var(--meta-font-style);
    --statusbar-version-font-weight:    var(--meta-font-weight);
    --statusbar-version-letter-spacing: var(--meta-letter-spacing);
    --statusbar-version-line-height:    var(--meta-line-height);
}


/* Text */
input[type="text"] {
    --input-text-font-family:               var(--input-font-family);
    --input-text-font-size:                 var(--input-font-size);
    --input-text-font-weight:               var(--input-font-weight);
    --input-text-line-height:               var(--input-line-height);
    --input-text-letter-spacing:            var(--input-letter-spacing);
    --input-text-text-align:                right;
}

.xTitle,
.xPopOutLargeText {
    --title-font-size:          24px;
    --popout-title-font-size:   32px;
    --popout-title-font-weight: 300;
}


/* Textarea */
textarea {
    --textarea-font-family:                 var(--input-font-family);
    --textarea-font-size:                   var(--input-font-size);
    --textarea-font-weight:                 var(--input-font-weight);
    --textarea-line-height:                 var(--input-line-height);
    --textarea-letter-spacing:              var(--input-letter-spacing);
    --textarea-text-align:                  left;
}


/* Tool Bar */
.xTb,
.xTbMask {
    --toolbar-text-font-family:             var(--meta-font-family);
    --toolbar-text-font-style:              var(--meta-font-style);
    --toolbar-text-font-size:               var(--font-size-1);
    --toolbar-text-font-weight:             var(--meta-font-weight);
    --toolbar-text-letter-spacing:          var(--meta-letter-spacing);
    --toolbar-text-line-height:             var(--meta-line-height);
    --toolbar-text-text-transform:          normal;

    --toolbar-text-label-font-family:       var(--meta-font-family);
    --toolbar-text-label-font-style:        var(--meta-font-style);
    --toolbar-text-label-font-size:         var(--font-size-1);
    --toolbar-text-label-font-weight:       var(--meta-font-weight);
    --toolbar-text-label-letter-spacing:    var(--meta-letter-spacing);
    --toolbar-text-label-line-height:       var(--meta-line-height);
    --toolbar-text-label-text-transform:    normal;
}

.xTbBtns {
    --toolbar-button-font-family:       var(--base-font-family);
    --toolbar-button-font-size:         var(--base-font-size);
    --toolbar-button-font-style:        var(--base-font-style);
    --toolbar-button-font-weight:       var(--base-font-weight);
    --toolbar-button-letter-spacing:    var(--base-letter-spacing);
    --toolbar-button-line-height:       var(--base-line-height);
    --toolbar-button-text-transform:    normal;
}