// Global Variables
// -------------------------------------
@themeProfile:                 "default";
@themePalette:                 "iceblue";
// Typography
// -------------------------------------
@baseFontSize:                 var(--zk-base-font-size);
@baseTitleFontFamily:          var(--zk-base-title-font-family);
@baseContentFontFamily:        var(--zk-base-content-font-family);
@baseLineHeight:               var(--zk-base-line-height);

// Component height
@baseHeight:                   var(--zk-base-height);
@baseIconHeight:               var(--zk-base-icon-height);
@baseButtonHeight:             var(--zk-base-button-height);
@baseBarHeight:                var(--zk-base-bar-height);
@baseTitleHeight:              var(--zk-base-title-height);

// Component width
@baseWidth:                    var(--zk-base-width);
@baseIconWidth:                var(--zk-base-icon-width);
@baseButtonWidth:              var(--zk-base-button-width);
@baseBarWidth:                 var(--zk-base-bar-width);

// -------------------------------------
// Component sizing
// -------------------------------------
@fontSizeXLarge:               var(--zk-font-size-x-large);
@fontSizeLarge:                var(--zk-font-size-large);
@fontSizeMedium:               var(--zk-font-size-medium);
@fontSizeSmall:                var(--zk-font-size-small);
@fontSizeXSmall:               var(--zk-font-size-x-small);

@baseBorderRadius:             var(--zk-base-border-radius);
@borderRadiusLarge:            var(--zk-border-radius-large);
@borderRadiusSmall:            var(--zk-border-radius-small);

// -------------------------------------
// Component Basic Coloring
// -------------------------------------
// Font color
@textColorDefault:             var(--zk-text-color-default);
@textColorLight:               var(--zk-text-color-light);
@textColorLighter:             var(--zk-text-color-lighter);
@textColorDefault3:            var(--zk-text-color-default3);
@textColorActive:              var(--zk-text-color-active);

@colorPrimary:                 var(--zk-color-primary);
@colorPrimaryDark:             var(--zk-color-primary-dark);
@colorPrimaryLight:            var(--zk-color-primary-light);
@colorPrimaryLighter:          var(--zk-color-primary-lighter);
@colorAccent:                  var(--zk-color-accent);
@colorAccent2:                 var(--zk-color-accent2);
@colorAccent3:                 var(--zk-color-accent3);
@colorBackground1:             var(--zk-color-background1);
@colorBackground3:             var(--zk-color-background3);
@colorGreyDark:                var(--zk-color-grey-dark);
@colorGreyLight:               var(--zk-color-grey-light);
@colorGreyLighter:             var(--zk-color-grey-lighter);

@baseTextColor:                var(--zk-base-text-color);

// Border color
@baseBorderColor:              var(--zk-base-border-color);

// Background color
@baseBackgroundColor:          var(--zk-base-background-color);

// -------------------------------------
// Icon font color (used for font-awesome)
// -------------------------------------
@iconColor:                    var(--zk-icon-color);
@iconHoverColor:               var(--zk-icon-hover-color);
@iconDisabledColor:            var(--zk-icon-disabled-color);

// -------------------------------------
// Mesh Table (used for grid, listbox, tree, biglistbox)
// -------------------------------------
@meshAutoPagingRowHeight:      var(--zk-mesh-auto-paging-row-height);
@meshAutoPagingRowPadding:     var(--zk-mesh-auto-paging-row-padding);
@meshAutoPagingRowLineHeight:  var(--zk-mesh-auto-paging-row-line-height);
@meshBackgroundColor:          var(--zk-mesh-background-color);
@meshStripeBackgroundColor:    var(--zk-mesh-stripe-background-color);
@meshTitleColor:               var(--zk-mesh-title-color);
@meshTitleBackgroundColor:     var(--zk-mesh-title-background-color);
@meshTitleHoverColor:          var(--zk-mesh-title-hover-color);
@meshTitleHoverBackgroundColor:var(--zk-mesh-title-hover-background-color);
@meshTitleActiveColor:         var(--zk-mesh-title-active-color);
@meshTitleActiveBackgroundColor: var(--zk-mesh-title-active-background-color);
@meshTitleBorderColor:         var(--zk-mesh-title-border-color);
@meshContentBorderColor:       var(--zk-mesh-content-border-color);
@meshContentFocusBackgroundColor: var(--zk-mesh-content-focus-background-color);
@meshFootBackgroundColor:      var(--zk-mesh-foot-background-color);
@meshGroupColor:               var(--zk-mesh-group-color);
@meshGroupBorderColor:         var(--zk-mesh-group-border-color);
@meshGroupBackgroundColor:     var(--zk-mesh-group-background-color);
@meshGroupFooterColor:         var(--zk-mesh-group-footer-color);
@meshGroupFooterBackgroundColor: var(--zk-mesh-group-footer-background-color);
@meshGroupOpenColor:           var(--zk-mesh-group-open-color);
@meshGroupOpenBackgroundColor: var(--zk-mesh-group-open-background-color);
@meshGroupOpenBorder:          var(--zk-mesh-group-open-border);
@meshGroupFooterOpenColor:     var(--zk-mesh-group-footer-open-color);
@gridDetailContentPadding:     var(--zk-grid-detail-content-padding);
@gridDetailContentBeforeMargin: var(--zk-grid-detail-content-before-margin);
@auxheadContentPadding:        var(--zk-auxhead-content-padding);
@meshBodyPadding:              var(--zk-mesh-body-padding);
@meshEmptyBodyPadding:         var(--zk-mesh-empty-body-padding);
@meshContentLineHeight:        var(--zk-mesh-content-line-height);
@meshColumnSortIconTop:        var(--zk-mesh-column-sort-icon-top);
@meshColumnSortButtonWidth:    var(--zk-mesh-column-sort-button-width);
@meshColumnSortButtonHeight:   var(--zk-mesh-column-sort-button-height);
@meshRowDetailOuterPadding:    var(--zk-mesh-row-detail-outer-padding);
@treecellContentLineHeight:    var(--zk-treecell-content-line-height);
@listheaderCheckedPositionLeft: var(--zk-listheader-checked-position-left);
@listboxRadioIconSize:         var(--zk-listbox-radio-icon-size);
@meshFocusBoxShadowColor:      var(--zk-mesh-focus-box-shadow-color);
@meshTitleFocusBoxShadowColor: var(--zk-mesh-title-focus-box-shadow-color);
@meshCellFocusBoxShadowColor:  var(--zk-mesh-cell-focus-box-shadow-color);
@meshFocusBoxShadow:           var(--zk-mesh-focus-box-shadow);
@meshTitleFocusBoxShadow:      var(--zk-mesh-title-focus-box-shadow);
@meshCellFocusBoxShadow:       var(--zk-mesh-cell-focus-box-shadow);

// -------------------------------------
// Component State
// -------------------------------------
// Active
@activeColor:                  var(--zk-active-color);
@activeBorderColor:            var(--zk-active-border-color);
@activeBackgroundColor:        var(--zk-active-background-color);
@activeGradientStart:          var(--zk-active-gradient-start);
@activeGradientEnd:            var(--zk-active-gradient-end);

// Focus
@focusColor:                   var(--zk-focus-color);
@focusBorderColor:             var(--zk-focus-border-color);
@focusBackgroundColor:         var(--zk-focus-background-color);
@focusGradientStart:           var(--zk-focus-gradient-start);
@focusGradientEnd:             var(--zk-focus-gradient-end);

// Hover
@hoverColor:                   var(--zk-hover-color);
@hoverBorderColor:             var(--zk-hover-border-color);
@hoverBackgroundColor:         var(--zk-hover-background-color);
@hoverGradientStart:           var(--zk-hover-gradient-start);
@hoverGradientEnd:             var(--zk-hover-gradient-end);

// Disabled
@disabledColor:                var(--zk-disabled-color);
@disabledBackgroundColor:      var(--zk-disabled-background-color);
@disabledOpacity:              var(--zk-disabled-opacity);

// Invalid
@invalidBorderColor:           var(--zk-invalid-border-color);

// Read-only
@readonlyBorderColor:          var(--zk-readonly-border-color);
@readonlyBackgroundColor:      var(--zk-readonly-background-color);

// Selected (used on listbox, tree, comboitem)
@selectedColor:                var(--zk-selected-color);
@selectedBorderColor:          var(--zk-selected-border-color);
@selectedBackgroundColor:      var(--zk-selected-background-color);

// Selected Hover (used on listbox, tree, comboitem)
@selectedHoverColor:           var(--zk-selected-hover-color);
@selectedHoverBorderColor:     var(--zk-selected-hover-border-color);
@selectedHoverBackgroundColor: var(--zk-selected-hover-background-color);

// Selected Focus (used on listbox, tree, comboitem)
@selectedFocusColor:           var(--zk-selected-focus-color);
@selectedFocusBorderColor:     var(--zk-selected-focus-border-color);
@selectedFocusBackgroundColor: var(--zk-selected-focus-background-color);

// Checked (used on menuitem, listbox, tree, toolbarbutton)
@checkedIconSize:              var(--zk-checked-icon-size);
@checkedColor:                 var(--zk-checked-color);
@checkedBorderColor:           var(--zk-checked-border-color);
@checkedBackgroundColor:       var(--zk-checked-background-color);

// -------------------------------------
// Component independent variables
// -------------------------------------
// Container (Window, Panel)
@containerBackground:          var(--zk-container-background);
@containerPadding:             var(--zk-container-padding);
@containerBorderColor:         var(--zk-container-border-color);
@containerBorderRadius:        var(--zk-container-border-radius);
@containerHeaderTextSize:      var(--zk-container-header-text-size);
@containerHeaderColor:         var(--zk-container-header-color);
@containerBodyTextSize:        var(--zk-container-body-text-size);
@containerBodyColor:           var(--zk-container-body-color);
@containerButtonSize:          var(--zk-container-button-size);
@containerButtonColors:        var(--zk-container-button-color), var(--zk-container-button-hover-color);
@containerButtonPadding:       var(--zk-container-button-padding);
// Panel
@panelHeaderPadding:           var(--zk-panel-header-padding);
// Window
@windowHeaderPadding:          var(--zk-window-header-padding);
@windowGhostHeaderPadding:     var(--zk-window-ghost-header-padding);
// Messagebox
@messageboxPaddingHorizontal:  var(--zk-messagebox-padding-horizontal);
@messageboxPadding:            var(--zk-messagebox-padding);
@messageboxWindowPadding:      var(--zk-messagebox-window-padding);
@messageboxWindowWidth:        var(--zk-messagebox-window-width);
@messageboxWindowContentPadding: var(--zk-messagebox-window-content-padding);
@messageboxHeaderPadding:      var(--zk-messagebox-header-padding);
@messageboxViewportMarginBottom: var(--zk-messagebox-viewport-margin-bottom);
@messageboxButtonsMarginLeft:  var(--zk-messagebox-buttons-margin-left);
@messageboxIconMarginLeft:     var(--zk-messagebox-icon-margin-left);
@messageboxIconSize:           var(--zk-messagebox-icon-size);

// Borderlayout
@borderlayoutHeaderFontSize:   var(--zk-borderlayout-header-font-size);
@borderlayoutHeaderHeight:     var(--zk-borderlayout-header-height);
@borderlayoutHeaderPadding:    var(--zk-borderlayout-header-padding);
@borderlayoutHeaderColor:      var(--zk-borderlayout-header-color);
@borderlayoutHeaderBackgroundColor: var(--zk-borderlayout-header-background-color);
@borderlayoutBodyLineHeight:   var(--zk-borderlayout-body-line-height);
@borderlayoutBodyPadding:      var(--zk-borderlayout-body-padding);
@borderlayoutCollapsedSize:    var(--zk-borderlayout-collapsed-size);
@borderlayoutCollapsedPadding: var(--zk-borderlayout-collapsed-padding);
@borderlayoutCollapsedIconColors: var(--zk-borderlayout-collapsed-icon-color), var(--zk-borderlayout-collapsed-icon-hover-color);
@borderlayoutIconFontSize:     var(--zk-borderlayout-icon-font-size);
@borderlayoutIconSize:         var(--zk-borderlayout-icon-size);
@borderlayoutIconPositionTop:  var(--zk-borderlayout-icon-position-top);
@borderlayoutIconPositionRight: var(--zk-borderlayout-icon-position-right);


// Caption
@captionFontSize:              var(--zk-caption-font-size);
@captionElementsMargin:        var(--zk-caption-elements-margin);
@captionButtonPadding:         var(--zk-caption-button-padding);
@captionImageMaxSize:          var(--zk-caption-image-max-size);
@captionButtonFontSize:        var(--zk-caption-button-font-size);

// Groupbox
@groupboxHeaderFontSize:       var(--zk-groupbox-header-font-size);
@groupboxHeaderColor:          var(--zk-groupbox-header-color);
@groupboxContentPadding:       var(--zk-groupbox-content-padding);
@groupboxNotitleContentPadding:var(--zk-groupbox-notitle-content-padding);
@groupbox3DHeaderPadding:      var(--zk-groupbox-3d-header-padding);
@groupbox3DContentPadding:     var(--zk-groupbox-3d-content-padding);
@groupboxFocusBoxShadowColor:  var(--zk-groupbox-focus-box-shadow-color);
@groupboxFocusBoxShadow:       var(--zk-groupbox-focus-box-shadow);
@groupboxFocusBorderRadius:    var(--zk-groupbox-focus-border-radius);

// Toolbar
@toolbarHorizontalPadding:     var(--zk-toolbar-horizontal-padding);
@toolbarPadding:               var(--zk-toolbar-padding);
@toolbarButtonsSpacing:        var(--zk-toolbar-buttons-spacing);
@toolbarInTabboxMinHeight:     var(--zk-toolbar-in-tabbox-min-height);
@toolbarOverflowpopupButtonSize: var(--zk-toolbar-overflowpopup-button-size);

// Input (used for textbox, intbox, spinner, ...)
@inputTextSize:                var(--zk-input-text-size);
@inputBorderColor:             var(--zk-input-border-color);
@inputBorderRadius:            var(--zk-input-border-radius);
@inputBackgroundColor:         var(--zk-input-background-color);
@inputHeight:                  var(--zk-input-height);
@inputPadding:                 var(--zk-input-padding);
@inputPaddingRight:            var(--zk-input-padding-right);
@inputColor:                   var(--zk-input-color);
@inputPlaceholderColor:        var(--zk-input-placeholder-color);
@inputHoverBorderColor:        var(--zk-input-hover-border-color);
@inputFocusBorderColor:        var(--zk-input-focus-border-color);
@inputDisableColor:            var(--zk-input-disable-color);
@inputDisableBackgroundColor:  var(--zk-input-disable-background-color);
@inputReadonlyColor:           var(--zk-input-readonly-color);
@inputReadonlyBackgroundColor: var(--zk-input-readonly-background-color);
@inputLineHeight:              var(--zk-input-line-height);

// Checkbox/Radio
@checkboxSize:                 var(--zk-checkbox-size);
@checkboxMargin:               var(--zk-checkbox-margin);
@checkboxHoverBorderColor:     var(--zk-checkbox-hover-border-color);
@checkboxSwitchMargin:         var(--zk-checkbox-switch-margin);
@checkboxSwitchWidth:          var(--zk-checkbox-switch-width);
@checkboxSwitchHeight:         var(--zk-checkbox-switch-height);
@checkboxSwitchSize:           var(--zk-checkbox-switch-size);
@checkboxSwitchStep:           var(--zk-checkbox-switch-step);
@checkboxSwitchOffsetLeft:     var(--zk-checkbox-switch-offset-left);
@checkboxSwitchOffsetBottom:   var(--zk-checkbox-switch-offset-bottom);
@checkboxToggleSize:           var(--zk-checkbox-toggle-size);

// Button (used for button, combobutton)
@buttonPadding:                var(--zk-button-padding);
@buttonColor:                  var(--zk-button-color);
@buttonBackgroundColor:        var(--zk-button-background-color);
@buttonBorderWidth:            var(--zk-button-border-width);
@buttonBorderColor:            var(--zk-button-border-color);
@buttonHoverColor:             var(--zk-button-hover-color);
@buttonHoverBackgroundColor:   var(--zk-button-hover-background-color);
@buttonHoverBorderColor:       var(--zk-button-hover-border-color);
@buttonFocusColor:             var(--zk-button-focus-color);
@buttonFocusBackgroundColor:   var(--zk-button-focus-background-color);
@buttonFocusBorderColor:       var(--zk-button-focus-border-color);
@buttonActiveColor:            var(--zk-button-active-color);
@buttonActiveBackgroundColor:  var(--zk-button-active-background-color);
@buttonActiveBorderColor:      var(--zk-button-active-border-color);
@buttonDisableColor:           var(--zk-button-disable-color);
@buttonDisableBackgroundColor: var(--zk-button-disable-background-color);
@buttonDisableBorderColor:     var(--zk-button-disable-border-color);
@buttonSeparatorBorderColor:   var(--zk-button-separator-border-color);
@buttonDisableSeparatorBorderColor: var(--zk-button-disable-separator-border-color);
// Toolbar button
@toolbarButtonFontSize:        var(--zk-toolbar-button-font-size);
@toolbarButtonPadding:         var(--zk-toolbar-button-padding);
@toolbarButtonColor:           var(--zk-toolbar-button-color);
@toolbarButtonBackgroundColor: var(--zk-toolbar-button-background-color);
@toolbarButtonCheckedColor:           var(--zk-toolbar-button-checked-color);
@toolbarButtonCheckedBackgroundColor: var(--zk-toolbar-button-checked-background-color);
// Combobutton
@combobuttonPadding:           var(--zk-combobutton-padding);
@combobuttonButtonWidth:       var(--zk-combobutton-button-width);
@combobuttonButtonIconLeft:    var(--zk-combobutton-button-icon-left);
@combobuttonToolbarFontSize:   var(--zk-combobutton-toolbar-font-size);
@combobuttonToolbarPadding:    var(--zk-combobutton-toolbar-padding);

// ComboInput (combobox, datebox, bandbox, timebox, spinner...)
@comboButtonIconSize:          var(--zk-combo-button-icon-size);
@comboButtonIconSizeLarge:     var(--zk-combo-button-icon-size-large);
@comboButtonPadding:           var(--zk-combo-button-padding);
@comboButtonMinWidth:          var(--zk-combo-button-min-width);
@comboButtonIconColor:         var(--zk-combo-button-icon-color);
@comboButtonHoverBorderColor:  var(--zk-combo-button-hover-border-color);
@comboButtonHoverBackgroundColor: var(--zk-combo-button-hover-background-color);
@comboButtonActiveIconColor:   var(--zk-combo-button-active-icon-color);
@comboButtonActiveBorderColor: var(--zk-combo-button-active-border-color);
@comboButtonActiveBackgroundColor: var(--zk-combo-button-active-background-color);
@comboPopupBorderColor:        var(--zk-combo-popup-border-color);
@comboPopupItemSize:           var(--zk-combo-popup-item-size);
@comboPopupItemColor:          var(--zk-combo-popup-item-color);
@comboPopupIconSize:           var(--zk-combo-popup-icon-size);
@comboPopupIconColor:          var(--zk-combo-popup-icon-color);
@comboPopupDescSize:           var(--zk-combo-popup-desc-size);
@comboPopupDescColor:          var(--zk-combo-popup-desc-color);
@comboPopupItemHoverBackgroundColor: var(--zk-combo-popup-item-hover-background-color);
@comboPopupItemSelectedColor:  var(--zk-combo-popup-item-selected-color);
@comboInputHeight:             var(--zk-combo-input-height);
@comboInputPaddingRight:       var(--zk-combo-input-padding-right);
@spinnerButtonWidth:           var(--zk-spinner-button-width);
@spinnerButtonIconHeight:      var(--zk-spinner-button-icon-height);
@spinnerButtonIconTransform:   var(--zk-spinner-button-icon-transform);
@spinnerButtonIconPositionTop: var(--zk-spinner-button-icon-position-top);
@spinnerButtonPadding:         var(--zk-spinner-button-padding);
@comboitemPadding:             var(--zk-comboitem-padding);
@comboitemEmptyHeight:         var(--zk-comboitem-empty-height);
@comboitemInnerFontSize:       var(--zk-comboitem-inner-font-size);

// Timepicker
@timepickerButtonWidth:        var(--zk-timepicker-button-width);
@timepickerHeight:             var(--zk-timepicker-height);
@timepickerLineHeight:         var(--zk-timepicker-line-height);
@timepickerPaddingRight:       var(--zk-timepicker-padding-right);
@timepickerButtonPadding:      var(--zk-timepicker-button-padding);
@timepickerPopupPadding:       var(--zk-timepicker-popup-padding);

// colorbox
@colorboxButtonFontSize:       var(--zk-colorbox-button-font-size);
@colorboxWidth:                var(--zk-colorbox-width);
@colorboxHeight:               var(--zk-colorbox-height);
@colorboxMenuImageSize:        var(--zk-colorbox-menu-image-size);
@colorboxMenuImageMarginRight: var(--zk-colorbox-menu-image-margin-right);
@colorboxPadding:              var(--zk-colorbox-padding);
@colorboxPopupPadding:         var(--zk-colorbox-popup-padding);
@colorpickerWidth:             var(--zk-colorpicker-width);
@colorpickerHeight:            var(--zk-colorpicker-height);
@colorpickerPadding:           var(--zk-colorpicker-padding);
@colorpickerMainPositionTop:   var(--zk-colorpicker-main-position-top);
@colorpickerInfoHeight:        var(--zk-colorpicker-info-height);
@colorpickerInfoMarginTop:     var(--zk-colorpicker-info-margin-top);
@colorpickerColorWidth:        var(--zk-colorpicker-color-width);
@colorpickerColorHeight:       var(--zk-colorpicker-color-height);
@colorpickerColorPositionRight: var(--zk-colorpicker-color-position-right);
@colorpickerColorItemWidth:    var(--zk-colorpicker-color-item-width);
@colorpickerColorItemHeight:   var(--zk-colorpicker-color-item-height);
@colorpickerInputWidth:        var(--zk-colorpicker-input-width);
@colorpickerInputHeight:       var(--zk-colorpicker-input-height);
@colorpickerRGBPositionTop:    var(--zk-colorpicker-rgb-position-top);
@colorpickerHSVPositionTop:    var(--zk-colorpicker-hsv-position-top);
@colorpickerHEXPositionTop:    var(--zk-colorpicker-hex-position-top);
@colorpickerHEXInputWidth:     var(--zk-colorpicker-hex-input-width);
@colorpickerHEXInputHeight:    var(--zk-colorpicker-hex-input-height);
@colorpickerButtonWidth:       var(--zk-colorpicker-button-width);
@colorpickerButtonPositionTop: var(--zk-colorpicker-button-position-top);
@colorpickerButtonPositionRight: var(--zk-colorpicker-button-position-right);
@colorpaletteWidth:            var(--zk-colorpalette-width);
@colorpaletteHeight:           var(--zk-colorpalette-height);
@colorpaletteHeadHeight:       var(--zk-colorpalette-head-height);
@colorpaletteNewColorWidth:    var(--zk-colorpalette-new-color-width);
@colorpaletteNewColorHeight:   var(--zk-colorpalette-new-color-height);
@colorpaletteNewColorPositionRight: var(--zk-colorpalette-new-color-position-right);
@colorpaletteInputWidth:       var(--zk-colorpalette-input-width);
@colorpaletteInputHeight:      var(--zk-colorpalette-input-height);
@colorpaletteColorSize:        var(--zk-colorpalette-color-size);
@colorboxIconFontSize:         var(--zk-colorbox-icon-font-size);
@colorboxIconPadding:          var(--zk-colorbox-icon-padding);
@colorboxIconButtonWidth:      var(--zk-colorbox-icon-button-width);
@colorboxIconButtonHeight:     var(--zk-colorbox-icon-button-height);
@colorboxIconButtonPositionTop: var(--zk-colorbox-icon-button-position-top);
@paletteiconPositionLeft:      var(--zk-paletteicon-position-left);
@pickericonPositionTopLeft:    var(--zk-pickericon-position-top-left);


// mask and loading
@maskBackgroundColor:          var(--zk-mask-background-color);
@loadingBackgroundColor:       var(--zk-loading-background-color);
@loadingTextColor:             var(--zk-loading-text-color);
@loadingAnimationDefer:        '~./zul/img/misc/progress-32.gif';
@loadingAnimationLoad:         '~./zul/img/misc/progress-72.gif';
@loadingIndicatorPadding:      var(--zk-loading-indicator-padding);
@applyLoadingIndicatorPadding: var(--zk-apply-loading-indicator-padding);
@applyLoadingIconSize:         var(--zk-apply-loading-icon-size);
@applyLoadingIconPositionLeft: var(--zk-apply-loading-icon-position-left);
@loadingIconSize:              var(--zk-loading-icon-size);
@loadingIconMarginBottom:      var(--zk-loading-icon-margin-bottom);

// scrollbar
@scrollbarSize:                var(--zk-scrollbar-size);
@scrollbarEmbeddedSize:        var(--zk-scrollbar-embedded-size);
@scrollbarBarSize:             var(--zk-scrollbar-bar-size);
@scrollbarRailSize:            var(--zk-scrollbar-rail-size);
@scrollbarEmbeddedColor:       var(--zk-scrollbar-embedded-color);
@scrollbarBorderColor:         var(--zk-scrollbar-border-color);
@scrollbarBackgroundColor:     var(--zk-scrollbar-background-color);
@scrollbarBarBackgroundColor:  var(--zk-scrollbar-bar-background-color);
@scrollbarBarHoverBackground:  var(--zk-scrollbar-bar-hover-background);
@scrollbarIconDisplay:         var(--zk-scrollbar-icon-display);
@scrollbarButtonBackground:    var(--zk-scrollbar-button-background);
@scrollbarButtonHoverBackground: var(--zk-scrollbar-button-hover-background);
@scrollbarButtonColor:         var(--zk-scrollbar-button-color);
@scrollbarButtonHoverColor:    var(--zk-scrollbar-button-hover-color);

// drag and drop
@dragColor:                    var(--zk-drag-color);
@dragBackgroundColor:          var(--zk-drag-background-color);
@dragHoverBackgroundColor:     var(--zk-drag-hover-background-color);
@dragAllowIconColor:           var(--zk-drag-allow-icon-color);
@dragAllowBorderColor:         var(--zk-drag-allow-border-color);
@dragAllowBackgroundColor:     var(--zk-drag-allow-background-color);
@dragDisAllowIconColor:        var(--zk-drag-disallow-icon-color);
@dragDisAllowBorderColor:      var(--zk-drag-disallow-border-color);
@dragDisAllowBackgroundColor:  var(--zk-drag-disallow-background-color);
@dropContentPadding:           var(--zk-drop-content-padding);
@dropContentLineHeight:        var(--zk-drop-content-line-height);
@dropIconSize:                 var(--zk-drop-icon-size);
@dropIconVerticalAlign:        var(--zk-drop-icon-vertical-align);

// splitter (hbox, vbox, borderlayout)
@splitterSize:                 var(--zk-splitter-size);
@splitterBorderColor:          var(--zk-splitter-border-color);
@splitterBackgroundColor:      var(--zk-splitter-background-color);
@splitterHoverBackgroundColor: var(--zk-splitter-hover-background-color);
@splitterButtonTextSize:       var(--zk-splitter-button-text-size);
@splitterButtonTextColors:     var(--zk-splitter-button-text-color), var(--zk-splitter-button-text-hover-color);
@splitterDragBackgroundColor:  var(--zk-splitter-drag-background-color);

// calendar
@calendarBackgroundColor:      var(--zk-calendar-background-color);
@calendarTodayColor:           var(--zk-calendar-today-color);
@calendarTitleColor:           var(--zk-calendar-title-color);
@calendarTitleHoverColor:      var(--zk-calendar-title-hover-color);
@calendarCellColor:            var(--zk-calendar-cell-color);
@calendarCellHoverBackgroundColor: var(--zk-calendar-cell-hover-background-color);
@calendarSelectedColor:        var(--zk-calendar-selected-color);
@calendarSelectedHoverColor:   var(--zk-calendar-selected-hover-color);
@calendarSelectedBackgroundColor: var(--zk-calendar-selected-background-color);
@calendarSelectedHoverBackgroundColor: var(--zk-calendar-selected-hover-background-color);
@calendarWeekTitleColor:       var(--zk-calendar-week-title-color);
@weekendColor:                 var(--zk-weekend-color);
@weekendBackgroundColor:       var(--zk-weekend-background-color);
@weekdayColor:                 var(--zk-weekday-color);
@weekdayBackgroundColor:       var(--zk-weekday-background-color);
@weekofyearColor:              var(--zk-weekofyear-color);
@weekofyearBackgroundColor:    var(--zk-weekofyear-background-color);
@calendarFontSize:             var(--zk-calendar-font-size);
@calendarIconFontSize:         var(--zk-calendar-icon-font-size);
@calendarTitleFontSize:        var(--zk-calendar-title-font-size);
@calendarFontSizeSmall:        var(--zk-calendar-font-size-small);
@calendarPadding:              var(--zk-calendar-padding);
@calendarTitleLineHeight:      var(--zk-calendar-title-line-height);
@calendarTodayTitlePadding:    var(--zk-calendar-today-title-padding);
@calendarCellWidth:            var(--zk-calendar-cell-width);
@calendarCellHeight:           var(--zk-calendar-cell-height);
@calendarLeftRightPosition:    var(--zk-calendar-left-right-position);
@calendarTodayMarginTop:       var(--zk-calendar-today-margin-top);

// popup
@basePopupZIndex:              var(--zk-base-popup-z-index);
@popupPadding:                 var(--zk-popup-padding);
@popupBorderColor:             var(--zk-popup-border-color);
@popupBackgroundColor:         var(--zk-popup-background-color);

// paging
@pagingColor:                  var(--zk-paging-color);
@pagingHeight:                 var(--zk-paging-height);
@pagingBorderColor:            var(--zk-paging-border-color);
@pagingBackgroundColor:        var(--zk-paging-background-color);
@pagingItemHoverBackgroundColor:   var(--zk-paging-item-hover-background-color);
@pagingItemActiveColor:            var(--zk-paging-item-active-color);
@pagingItemActiveBackgroundColor:  var(--zk-paging-item-active-background-color);
@pagingItemSelectedColor:          var(--zk-paging-item-selected-color);
@pagingItemSelectedBackgroundColor: var(--zk-paging-item-selected-background-color);
@pagingButtonMinWidth:         var(--zk-paging-button-min-width);
@pagingButtonHeight:           var(--zk-paging-button-height);
@pagingButtonFontSize:         var(--zk-paging-button-font-size);
@pagingButtonPadding:          var(--zk-paging-button-padding);
@pagingButtonMargin:           var(--zk-paging-button-margin);
@pagingButtonFocusBoxShadowColor:    var(--zk-paging-button-focus-box-shadow-color);
@pagingButtonFocusBoxShadow:         var(--zk-paging-button-focus-box-shadow);
@pagingButtonFocusBorderRadius:      var(--zk-paging-button-focus-border-radius);
@pagingIconSize:               var(--zk-paging-icon-size);
@pagingIconLineHeight:         var(--zk-paging-icon-line-height);
@pagingInputHeight:            var(--zk-paging-input-height);
@pagingInputPadding:           var(--zk-paging-input-padding);
@pagingOsButtonPadding:        var(--zk-paging-os-button-padding);

// slider
@sliderAreaSize:               var(--zk-slider-area-size);
@sliderBackgroundColor:        var(--zk-slider-background-color);
@sliderAreaBackgroundColor:    var(--zk-slider-area-background-color);
@sliderInputColor:             var(--zk-slider-input-color);
@sliderTicks:                  '~./zul/img/slider/scale-ticks.png';
@sliderPopupFontSize:          var(--zk-slider-popup-font-size);

// tooltip (used in slider, fisheyebar)
@tooltipColor:                 var(--zk-tooltip-color);
@tooltipBackgroundColor:       var(--zk-tooltip-background-color);

// errorbox (input constraint)
@errorboxColor:                var(--zk-errorbox-color);
@errorboxBorderColor:          var(--zk-errorbox-border-color);
@errorboxBackgroundColor:      var(--zk-errorbox-background-color);
@errorboxInsideIconPositionTop: var(--zk-errorbox-inside-icon-position-top);
@errorboxIconPositionTop:      var(--zk-errorbox-icon-position-top);
@errorboxUpIconPositionTop:    var(--zk-errorbox-up-icon-position-top);
@errorboxContentPadding:       var(--zk-errorbox-content-padding);

// error (ZK JavaScript debug box)
@errorPadding:                 var(--zk-error-padding);
@errorMessageContentPadding:   var(--zk-error-message-content-padding);
@errorButtonFontSize:          var(--zk-error-button-font-size);
@errorCloseButtonFontSize:     var(--zk-error-close-button-font-size);
@errorNumberFontSize:          var(--zk-error-number-font-size);
@errorButtonSize:              var(--zk-error-button-size);
@errorButtonMarginLeft:        var(--zk-error-button-margin-left);

// notification
@notificationInfoColor:        var(--zk-notification-info-color);
@notificationWarningColor:     var(--zk-notification-warning-color);
@notificationErrorColor:       var(--zk-notification-error-color);
@notificationInfoTextColor:        var(--zk-notification-info-text-color);
@notificationWarningTextColor:     var(--zk-notification-warning-text-color);
@notificationErrorTextColor:       var(--zk-notification-error-text-color);
@notificationInfoBackgroundColor:        var(--zk-notification-info-background-color);
@notificationWarningBackgroundColor:     var(--zk-notification-warning-background-color);
@notificationErrorBackgroundColor:       var(--zk-notification-error-background-color);
@notificationContentPadding:   var(--zk-notification-content-padding);
@notificationPointerContentHeight:       var(--zk-notification-pointer-content-height);
@notificationPointerContentPadding:      var(--zk-notification-pointer-content-padding);
@notificationCloseFontSize:    var(--zk-notification-close-font-size);
@notificationCloseIconSize:    var(--zk-notification-close-icon-size);

// progressmeter
@progressmeterBorderColor:     var(--zk-progressmeter-border-color);
@progressmeterBackgroundColor: var(--zk-progressmeter-background-color);
@progressmeterBackgroundImage: '~./zul/img/misc/prgmeter-anim.gif';

// loadingbar
@loadingbarColor:              var(--zk-loadingbar-color);
@loadingbarSecondaryColor:     var(--zk-loadingbar-secondary-color);
@loadingbarHeight:             var(--zk-loadingbar-height);

// tabbox
@tabboxBackgroundColor:        var(--zk-tabbox-background-color);
@tabboxIconPadding:            var(--zk-tabbox-icon-padding);
@tabboxIconVerticalPadding:    var(--zk-tabbox-icon-vertical-padding);
@tabboxIconSize:               var(--zk-tabbox-icon-size);
@tabboxTabsBackgroundColor:    var(--zk-tabbox-tabs-background-color);
@tabboxToolbarBackgroundColor: var(--zk-tabbox-toolbar-background-color);
@tabboxTabColor:               var(--zk-tabbox-tab-color);
@tabboxTabBackgroundColor:     var(--zk-tabbox-tab-background-color);
@tabboxTabHoverColor:          var(--zk-tabbox-tab-hover-color);
@tabboxTabHoverBackgroundColor:var(--zk-tabbox-tab-hover-background-color);
@tabboxTabButtonFontSize:      var(--zk-tabbox-tab-button-font-size);
@tabboxTabButtonColor:         var(--zk-tabbox-tab-button-color);
@tabboxTabButtonHoverColor:    var(--zk-tabbox-tab-button-hover-color);
@tabboxTabButtonTextSpacing:   var(--zk-tabbox-tab-button-text-spacing);
@tabboxTabSeparatorColor:      var(--zk-tabbox-tab-separator-color);
@tabboxTabMinHeight:           var(--zk-tabbox-tab-min-height);
@tabboxTabPadding:             var(--zk-tabbox-tab-padding);
@tabboxTabVerticalPadding:     var(--zk-tabbox-tab-vertical-padding);
@tabboxTabFontSize:            var(--zk-tabbox-tab-font-size);
@tabboxTabAccordionButtonRight:var(--zk-tabbox-tab-accordion-button-right);
@tabboxSelectedRadius:         var(--zk-tabbox-selected-radius);
@tabboxSelectedColor:          var(--zk-tabbox-selected-color);
@tabboxSelectedBorderColor:    var(--zk-tabbox-selected-border-color);
@tabboxSelectedHoverColor:     var(--zk-tabbox-selected-hover-color);
@tabboxSelectedBackgroundColor:var(--zk-tabbox-selected-background-color);
@tabboxSelectedHoverBackgroundColor: var(--zk-tabbox-selected-hover-background-color);
@tabboxScrollIconColor:        var(--zk-tabbox-scroll-icon-color);
@tabboxScrollIconHoverColor:   var(--zk-tabbox-scroll-icon-hover-color);

// menu
@menuBackground:               var(--zk-menu-background);
@menuItemColor:                var(--zk-menu-item-color);
@menuItemBackground:           var(--zk-menu-item-background);
@menuItemHoverColor:           var(--zk-menu-item-hover-color);
@menuItemHoverBackground:      var(--zk-menu-item-hover-background);
@menuItemActiveColor:          var(--zk-menu-item-active-color);
@menuItemActiveBackground:     var(--zk-menu-item-active-background);
@menuSeparatorBorderColor:     var(--zk-menu-separator-border-color);
@menuSeparatorBackgroundColor: var(--zk-menu-separator-background-color);
@menuPopupBackground:          var(--zk-menu-popup-background);
@menuPopupItemColor:           var(--zk-menu-popup-item-color);
@menuPopupItemBackground:      var(--zk-menu-popup-item-background);
@menuPopupItemHoverColor:      var(--zk-menu-popup-item-hover-color);
@menuPopupItemHoverBackground: var(--zk-menu-popup-item-hover-background);
@menuPopupItemActiveColor:     var(--zk-menu-popup-item-active-color);
@menuPopupItemActiveBackground: var(--zk-menu-popup-item-active-background);
@menuPopupSeparatorBorder:     var(--zk-menu-popup-separator-border);
@menuImageSize:                var(--zk-menu-image-size);
@menuCheckedColor:             var(--zk-menu-checked-color);
@menuCheckedBackgroundColor:   var(--zk-menu-checked-background-color);
@menuScrollableIconColors:     var(--zk-menu-scrollable-icon-color), var(--zk-menu-scrollable-icon-hover-color);
@menubarPadding:               var(--zk-menubar-padding);
@menubarHorizontalMargin:      var(--zk-menubar-horizontal-margin);
@menubarHorizontalSeparatorLineHeight: var(--zk-menubar-horizontal-separator-line-height);
@menubarHorizontalSeparatorMargin: var(--zk-menubar-horizontal-separator-margin);
@menuTextFontSize:             var(--zk-menu-text-font-size);
@menuIconSize:                 var(--zk-menu-icon-size);
@menuContentPadding:           var(--zk-menu-content-padding);
@menuContentLineHeight:        var(--zk-menu-content-line-height);
@menuContentMinHeight:         var(--zk-menu-content-min-height);
@menuIconPositionTop:          var(--zk-menu-icon-position-top);
@menuIconMarginRight:          var(--zk-menu-icon-margin-right);
@menuContentPaddingRight:      var(--zk-menu-content-padding-right);
@menuPopupItemIconSize:        var(--zk-menu-popup-item-icon-size);
@menuPopupItemIconPositionTop: var(--zk-menu-popup-item-icon-position-top);
@menuPopupItemIconPositionLeft: var(--zk-menu-popup-item-icon-position-left);

// navbar
@navImageSize:                 var(--zk-nav-image-size);
@navColor:                     var(--zk-nav-color);
@navHoverColor:                var(--zk-nav-hover-color);
@navBorderColor:               var(--zk-nav-border-color);
@navBackgroundColor:           var(--zk-nav-background-color);
@navHoverBackgroundColor:      var(--zk-nav-hover-background-color);
@navSelectedColor:             var(--zk-nav-selected-color);
@navSelectedBackgroundColor:   var(--zk-nav-selected-background-color);
@navPopupColor:                var(--zk-nav-popup-color);
@navPopupHoverColor:           var(--zk-nav-popup-hover-color);
@navPopupBackgroundColor:      var(--zk-nav-popup-background-color);
@navPopupHoverBackgroundColor: var(--zk-nav-popup-hover-background-color);
@navPopupSelectedColor:        var(--zk-nav-popup-selected-color);
@navPopupSelectedBackgroundColor: var(--zk-nav-popup-selected-background-color);
@navPopupPadding:              var(--zk-nav-popup-padding);
@navSeparatorColor:            var(--zk-nav-separator-color);
@navCollapsedWidth:            var(--zk-nav-collapsed-width);
@navBadgeTextColor:            var(--zk-nav-badge-text-color);
@navBadgeBackgroundColor:      var(--zk-nav-badge-background-color);
@navbarPadding:                var(--zk-navbar-padding);
@navbarHorizontalPadding:      var(--zk-navbar-horizontal-padding);
@navbarHorizontalLineHeight:   var(--zk-navbar-horizontal-line-height);
@navContentPadding:            var(--zk-nav-content-padding);
@navIconMarginRight:           var(--zk-nav-icon-margin-right);
@navTextFontSize:              var(--zk-nav-text-font-size);
@navInfoPositionTop:           var(--zk-nav-info-position-top);
@navInfoPositionRight:         var(--zk-nav-info-position-right);
@navTextPopupHeight:           var(--zk-nav-text-popup-height);
@navTextPopupPadding:          var(--zk-nav-text-popup-padding);
@navTextPopupLineHeight:       var(--zk-nav-text-popup-line-height);
@navbarCollapsedInfoPositionTop: var(--zk-navbar-collapsed-info-position-top);
@navitemFocusBoxShadowColor:     var(--zk-navitem-focus-box-shadow-color);
@navitemFocusBoxShadow:          var(--zk-navitem-focus-box-shadow);

// chosenbox
@chosenboxIconSize:            var(--zk-chosenbox-icon-size);
@chosenboxItemSize:            var(--zk-chosenbox-item-size);
@chosenboxItemColor:           var(--zk-chosenbox-item-color);
@chosenboxItemBorderColor:     var(--zk-chosenbox-item-border-color);
@chosenboxItemBackgroundColor: var(--zk-chosenbox-item-background-color);
@chosenboxItemFocusBackgroundColor: var(--zk-chosenbox-item-focus-background-color);
@chosenboxItemDisabledColor:   var(--zk-chosenbox-item-disabled-color);
@chosenboxItemDisabledBorderColor: var(--zk-chosenbox-item-disabled-border-color);
@chosenboxItemDisabledBackgroundColor: var(--zk-chosenbox-item-disabled-background-color);
@chosenboxPopupHoverBackgroundColor: var(--zk-chosenbox-popup-hover-background-color);
@chosenboxCreateIconSize:      var(--zk-chosenbox-create-icon-size);
@chosenboxCreateIconColor:     var(--zk-chosenbox-create-icon-color);
@chosenboxPadding:             var(--zk-chosenbox-padding);
@chosenboxMinHeight:           var(--zk-chosenbox-min-height);
@chosenboxItemMargin:          var(--zk-chosenbox-item-margin);
@chosenboxItemPadding:         var(--zk-chosenbox-item-padding);
@chosenboxItemContentPadding:  var(--zk-chosenbox-item-content-padding);
@chosenboxItemContentMarginRight: var(--zk-chosenbox-item-content-margin-right);
@chosenboxButtonPositionTop:   var(--zk-chosenbox-button-position-top);
@chosenboxButtonPositionRight: var(--zk-chosenbox-button-position-right);
@chosenboxInputWidth:          var(--zk-chosenbox-input-width);
@chosenboxInputHeight:         var(--zk-chosenbox-input-height);
@chosenboxInputPadding:        var(--zk-chosenbox-input-padding);
@chosenboxPopupPadding:        var(--zk-chosenbox-popup-padding);
@chosenboxOptionPadding:       var(--zk-chosenbox-option-padding);
@chosenboxOptionMinHeight:     var(--zk-chosenbox-option-min-height);

// biglistbox
@biglistboxFrozenBackgroundColor:   var(--zk-biglistbox-frozen-background-color);
@biglistboxFrozenGhostBackgroundColor: var(--zk-biglistbox-frozen-ghost-background-color);
@biglistboxScrollBarBorderColor: var(--zk-biglistbox-scrollbar-border-color);
@biglistboxScrollBarTextColor: var(--zk-biglistbox-scrollbar-text-color);
@biglistboxScrollBarEndBarBackgroundColor: var(--zk-biglistbox-scrollbar-end-bar-background-color);
@biglistboxScrollBarHoverBackgroundColor: var(--zk-biglistbox-scrollbar-hover-background-color);
@biglistboxScrollBarActiveBackgroundColor: var(--zk-biglistbox-scrollbar-active-background-color);
@biglistboxScrollBarActiveBorderColor: var(--zk-biglistbox-scrollbar-active-border-color);
@biglistboxScrollBarHoverBorderColor: var(--zk-biglistbox-scrollbar-hover-border-color);
@biglistboxOuterPadding:       var(--zk-biglistbox-outer-padding);
@biglistboxLineHeight:         var(--zk-biglistbox-line-height);
@biglistboxSize:               var(--zk-biglistbox-size);
@biglistboxVerticalTickWidth:  var(--zk-biglistbox-vertical-tick-width);
@biglistboxVerticalTickHeight: var(--zk-biglistbox-vertical-tick-height);
@biglistboxVerticalTickPositionBottom: var(--zk-biglistbox-vertical-tick-position-bottom);
@biglistboxVerticalTickBeforePositionLeft: var(--zk-biglistbox-vertical-tick-before-position-left);
@biglistboxWscrollVerticalPositionRight: var(--zk-biglistbox-wscroll-vertical-position-right);
@biglistboxWscrollDragSize:    var(--zk-biglistbox-wscroll-drag-size);
@biglistboxWscrollButtonSize:  var(--zk-biglistbox-wscroll-button-size);
@biglistboxWscrollButtonBeforePositionRight: var(--zk-biglistbox-wscroll-button-before-position-right);
@biglistboxWscrollButtonBodySize: var(--zk-biglistbox-wscroll-button-body-size);
@biglistboxWscrollButtonBodyPositionTop: var(--zk-biglistbox-wscroll-button-body-position-top);
@biglistboxWscrollButtonBodyBeforePositionTop: var(--zk-biglistbox-wscroll-button-body-before-position-top);
@biglistboxWscrollButtonBodyHoverPositionTop: var(--zk-biglistbox-wscroll-button-body-hover-position-top);
@biglistboxWscrollButtonBodyBeforePositionRight: var(--zk-biglistbox-wscroll-button-body-before-position-right);
@biglistboxWscrollButtonUpHoverPositionTop: var(--zk-biglistbox-wscroll-button-up-hover-position-top);
@biglistboxWscrollHorizontalPosWidth: var(--zk-biglistbox-wscroll-horizontal-pos-width);

// rating
@ratingIcon:                   var(--zk-rating-icon);
@ratingIconSize:               var(--zk-rating-icon-size);
@ratingIconFontSize:           var(--zk-rating-icon-font-size);
@ratingIconPadding:            var(--zk-rating-icon-padding);
@ratingIconHover:              var(--zk-rating-icon-hover);
@ratingIconHoverTextShadow:    var(--zk-rating-icon-hover-text-shadow);
@ratingIconSelected:           var(--zk-rating-icon-selected);
@ratingDisabled:               var(--zk-rating-disabled);
@ratingDisabledSelected:       var(--zk-rating-disabled-selected);

// goldenlayout
@goldenLayoutBackgroundColor:  var(--zk-golden-layout-background-color);
@goldenLayoutBorderColor:      var(--zk-golden-layout-border-color);
@goldenLayoutHeaderColor:      var(--zk-golden-layout-header-color);
@goldenLayoutHeaderHoverColor: var(--zk-golden-layout-header-hover-color);
@goldenLayoutHeaderActiveHoverColor: var(--zk-golden-layout-header-active-hover-color);
@goldenLayoutHeaderBackgroundColor: var(--zk-golden-layout-header-background-color);
@goldenLayoutSelectedBorderColor: var(--zk-golden-layout-selected-border-color);
@goldenLayoutSelectedBackgroundColor: var(--zk-golden-layout-selected-background-color);
@goldenLayoutPanelBackgroundColor: var(--zk-golden-layout-panel-background-color);
@goldenLayoutProxyBoxShadowColor: var(--zk-golden-layout-proxy-box-shadow-color);
@goldenLayoutDroptargetIndicatorBorderColor: var(--zk-golden-layout-droptarget-indicator-border-color);
@goldenLayoutDroptargetIndicatorBackgroundColor: var(--zk-golden-layout-droptarget-indicator-background-color);
@goldenLayoutSplitterDragging: var(--zk-golden-layout-splitter-dragging);
@goldenLayoutLineHeight:       var(--zk-golden-layout-line-height);
@goldenLayoutMinHeight:        var(--zk-golden-layout-min-height);
@goldenLayoutFontSize:         var(--zk-golden-layout-font-size);
@goldenLayoutTabPadding:       var(--zk-golden-layout-tab-padding);
@goldenLayoutCloseTabTop:      var(--zk-golden-layout-close-tab-top);
@goldenLayoutActiveTabMargin:  var(--zk-golden-layout-active-tab-margin);
@goldenLayoutControlPadding:   var(--zk-golden-layout-control-padding);
@goldenLayoutControlLiPadding: var(--zk-golden-layout-control-li-padding);
@goldenLayoutDropTabAfterMargin: var(--zk-golden-layout-drop-tab-after-margin);

// organigram
@organigramLine:               var(--zk-organigram-line);
@orgnodePadding:               var(--zk-orgnode-padding);
@orgnodeColor:                 var(--zk-orgnode-color);
@orgnodeBackgroundColor:       var(--zk-orgnode-background-color);
@orgnodeHoverBackgroundColor:  var(--zk-orgnode-hover-background-color);
@orgnodeSelectedColor:         var(--zk-orgnode-selected-color);
@orgnodeSelectedBackgroundColor: var(--zk-orgnode-selected-background-color);
@orgnodeDisabledColor:         var(--zk-orgnode-disabled-color);
@orgnodeDisabledBackgroundColor: var(--zk-orgnode-disabled-background-color);
@orgnodeBorder:                var(--zk-orgnode-border);
@orgnodeBorderRadius:          var(--zk-orgnode-border-radius);

// signature
@signatureBorderColor:         var(--zk-signature-border-color);
@signatureBorderRadius:        var(--zk-signature-border-radius);
@signatureToolbarRight:        var(--zk-signature-toolbar-right);
@signatureToolbarBottom:       var(--zk-signature-toolbar-bottom);
@signatureToolbarButtonSpacing: var(--zk-signature-toolbar-button-spacing);
@signatureToolbarButtonIconFontSize: var(--zk-signature-toolbar-button-icon-font-size);

// drawer
@drawerMaskBackgroundColor:    var(--zk-drawer-mask-background-color);
@drawerMaskOpacity:            var(--zk-drawer-mask-opacity);
@drawerTitleTextColor:         var(--zk-drawer-title-text-color);
@drawerTitleLineColor:         var(--zk-drawer-title-line-color);
@drawerTitlePadding:           var(--zk-drawer-title-padding);
@drawerTitleFontSize:          var(--zk-drawer-title-font-size);
@drawerCloseButtonSize:        var(--zk-drawer-close-button-size);
@drawerCloseButtonRight:       var(--zk-drawer-close-button-right);
@drawerCloseButtonTop:         var(--zk-drawer-close-button-top);
@drawerBackgroundColor:        var(--zk-drawer-background-color);
@drawerShadowColor:            var(--zk-drawer-shadow-color);
@drawerContainerPadding:       var(--zk-drawer-container-padding);

// rangeslider
@rangesliderTrackColor:        var(--zk-rangeslider-track-color);
@rangesliderEmptyBackgroundColor: var(--zk-rangeslider-empty-background-color);
@rangesliderShadowColor:       var(--zk-rangeslider-shadow-color);
@rangesliderButtonSize:        var(--zk-rangeslider-button-size);
@rangesliderButtonBorderWidth: var(--zk-rangeslider-button-border-width);
@rangesliderButtonColor:       var(--zk-rangeslider-button-color);
@rangesliderButtonHoverColor:  var(--zk-rangeslider-button-hover-color);
@rangesliderButtonActiveColor: var(--zk-rangeslider-button-active-color);
@rangesliderButtonFocusBorderColor: var(--zk-rangeslider-button-focus-border-color);
@rangesliderDisabledTrackColor: var(--zk-rangeslider-disabled-track-color);
@rangesliderDisabledButtonColor: var(--zk-rangeslider-disabled-button-color);
@rangesliderBorderRadius:      var(--zk-rangeslider-border-radius);
@rangesliderTooltipBorderRadius: var(--zk-rangeslider-tooltip-border-radius);
@rangesliderTooltipBackgroundColor: var(--zk-rangeslider-tooltip-background-color);
@rangesliderDisabledTooltipBackgroundColor: var(--zk-rangeslider-disabled-tooltip-background-color);
@rangesliderInnerSize:         var(--zk-rangeslider-inner-size);
@rangesliderDotSize:           var(--zk-rangeslider-dot-size);
@rangesliderDotBorderWidth:    var(--zk-rangeslider-dot-border-width);
@rangesliderLabelFontSize:     var(--zk-rangeslider-label-font-size);
@rangesliderHorizontalButtonMarginTop: var(--zk-rangeslider-horizontal-button-margin-top);
@rangesliderHorizontalButtonMarginLeft: var(--zk-rangeslider-horizontal-button-margin-left);
@rangesliderHorizontalTooltipPositionTop: var(--zk-rangeslider-horizontal-tooltip-position-top);
@rangesliderHorizontalTooltipPadding: var(--zk-rangeslider-horizontal-tooltip-padding);
@rangesliderHorizontalMarkDotPositionTop: var(--zk-rangeslider-horizontal-mark-dot-position-top);
@rangesliderHorizontalMarkLabelPositionTop: var(--zk-rangeslider-horizontal-mark-label-position-top);
@rangesliderVerticalTooltipPositionLeft: var(--zk-rangeslider-vertical-tooltip-position-left);
@rangesliderVerticalTooltipPadding: var(--zk-rangeslider-vertical-tooltip-padding);

// multislider
@multisliderTrackColor:        var(--zk-multislider-track-color);
@multisliderShadowColor:       var(--zk-multislider-shadow-color);
@multisliderButtonSize:        var(--zk-multislider-button-size);
@multisliderButtonBorderWidth: var(--zk-multislider-button-border-width);
@multisliderButtonColor:       var(--zk-multislider-button-color);
@multisliderButtonHoverColor:  var(--zk-multislider-button-hover-color);
@multisliderButtonActiveColor: var(--zk-multislider-button-active-color);
@multisliderButtonFocusBorderColor: var(--zk-multislider-button-focus-border-color);
@multisliderButtonColor2:      var(--zk-multislider-button-color2);
@multisliderButtonHoverColor2: var(--zk-multislider-button-hover-color2);
@multisliderButtonActiveColor2: var(--zk-multislider-button-active-color2);
@multisliderBorderRadius:      var(--zk-multislider-border-radius);
@multisliderTooltipBackgroundColor: var(--zk-multislider-tooltip-background-color);
@multisliderDisabledTooltipBackgroundColor: var(--zk-multislider-disabled-tooltip-background-color);
@multisliderInnerSize:         var(--zk-multislider-inner-size);
@multisliderDisabledTrackColor: var(--zk-multislider-disabled-track-color);
@multisliderDisabledButtonColor: var(--zk-multislider-disabled-button-color);
@multisliderDisabledButtonColor2: var(--zk-multislider-disabled-button-color2);

// inputgroup
@inputgroupTextBackgroundColor: var(--zk-inputgroup-text-background-color);

// pdfviewer
@pdfviewerContainerBackgroundColor: var(--zk-pdfviewer-container-background-color);
@pdfviewerSelectionBackgroundColor: var(--zk-pdfviewer-selection-background-color);
@pdfviewerToolbarBackgroundColor: var(--zk-pdfviewer-toolbar-background-color);
@pdfviewerToolbarBorderColor:  var(--zk-pdfviewer-toolbar-border-color);
@pdfviewerToolbarBorderRadius: var(--zk-pdfviewer-toolbar-border-radius);
@pdfviewerToolbarPadding:      var(--zk-pdfviewer-toolbar-padding);
@pdfviewerToolbarButtonSize:   var(--zk-pdfviewer-toolbar-button-size);
@pdfviewerToolbarMargins:      var(--zk-pdfviewer-toolbar-margins);
@pdfviewerToolbarButtonColor:  var(--zk-pdfviewer-toolbar-button-color);
@pdfviewerToolbarButtonBackgroundColor: var(--zk-pdfviewer-toolbar-button-background-color);
@pdfviewerToolbarButtonHoverColor: var(--zk-pdfviewer-toolbar-button-hover-color);
@pdfviewerToolbarButtonHoverBackgroundColor: var(--zk-pdfviewer-toolbar-button-hover-background-color);
@pdfviewerToolbarButtonActiveColor: var(--zk-pdfviewer-toolbar-button-active-color);
@pdfviewerToolbarButtonActiveBackgroundColor: var(--zk-pdfviewer-toolbar-button-active-background-color);
@pdfviewerToolbarSeparatorColor: var(--zk-pdfviewer-toolbar-separator-color);
@pdfviewerToolbarSeparatorHeight: var(--zk-pdfviewer-toolbar-separator-height);
@pdfviewerToolbarPageActiveWidth: var(--zk-pdfviewer-toolbar-page-active-width);

// searchbox
@searchboxHeight:              var(--zk-searchbox-height);
@searchboxFontSize:            var(--zk-searchbox-font-size);
@searchboxPadding:             var(--zk-searchbox-padding);
@searchboxBorderColor:         var(--zk-searchbox-border-color);
@searchboxColor:               var(--zk-searchbox-color);
@searchboxPlaceholderColor:    var(--zk-searchbox-placeholder-color);
@searchboxIconColor:           var(--zk-searchbox-icon-color);
@searchboxIconRight:           var(--zk-searchbox-icon-right);
@searchboxIconSize:            var(--zk-searchbox-icon-size);
@searchboxBackgroundColor:     var(--zk-searchbox-background-color);
@searchboxBorderRadius:        var(--zk-searchbox-border-radius);
@searchboxHoverBorderColor:    var(--zk-searchbox-hover-border-color);
@searchboxFocusBorderColor:    var(--zk-searchbox-focus-border-color);
@searchboxActiveBorderColor:   var(--zk-searchbox-active-border-color);
@searchboxActiveBackgroundColor: var(--zk-searchbox-active-background-color);
@searchboxActiveColor:         var(--zk-searchbox-active-color);
@searchboxActiveIconColor:     var(--zk-searchbox-active-icon-color);
@searchboxDisableBorderColor:  var(--zk-searchbox-disable-border-color);
@searchboxDisableBackgroundColor: var(--zk-searchbox-disable-background-color);
@searchboxDisableColor:        var(--zk-searchbox-disable-color);
@searchboxDisableIconColor:    var(--zk-searchbox-disable-icon-color);
@searchboxPopupBackgroundColor: var(--zk-searchbox-popup-background-color);
@searchboxPopupBorderColor:    var(--zk-searchbox-popup-border-color);
@searchboxPopupBorderRadius:   var(--zk-searchbox-popup-border-radius);
@searchboxPopupShadow:         var(--zk-searchbox-popup-shadow);
@searchboxPopupItemBorderRadius: var(--zk-searchbox-popup-item-border-radius);
@searchboxPopupItemHoverBackgroundColor: var(--zk-searchbox-popup-item-hover-background-color);
@searchboxPopupItemHoverColor: var(--zk-searchbox-popup-item-hover-color);
@searchboxPopupItemActiveBackgroundColor: var(--zk-searchbox-popup-item-active-background-color);
@searchboxPopupItemActiveColor: var(--zk-searchbox-popup-item-active-color);
@searchboxPopupItemSelectedColor: var(--zk-searchbox-popup-item-selected-color);
@searchboxPopupItemPadding:    var(--zk-searchbox-popup-item-padding);
@searchboxPopupItemCheckSize:  var(--zk-searchbox-popup-item-check-size);
@searchboxPopupItemCheckMarginRight: var(--zk-searchbox-popup-item-check-margin-right);
@searchboxPopupItemCheckBorderColor: var(--zk-searchbox-popup-item-check-border-color);
@searchboxPopupItemCheckBorderRadius: var(--zk-searchbox-popup-item-check-border-radius);
@searchboxPopupItemCheckBackgroundColor: var(--zk-searchbox-popup-item-check-background-color);
@searchboxPopupItemCheckCheckedColor: var(--zk-searchbox-popup-item-check-checked-color);
@searchboxPopupItemCheckCheckedBackgroundColor: var(--zk-searchbox-popup-item-check-checked-background-color);

// stepbar
@stepbarPadding:               var(--zk-stepbar-padding);
@stepbarSeparatorSize:         var(--zk-stepbar-separator-size);
@stepSize:                     var(--zk-step-size);
@stepFontSize:                 var(--zk-step-font-size);
@stepIconErrorSize:            var(--zk-step-icon-error-size);
@stepIconCompleteSize:         var(--zk-step-icon-complete-size);
@stepIconEmptyBorderWidth:     var(--zk-step-icon-empty-border-width);
@stepInactiveColor:            var(--zk-step-inactive-color);
@stepActiveColor:              var(--zk-step-active-color);
@stepErrorColor:               var(--zk-step-error-color);
@stepCompleteColor:            var(--zk-step-complete-color);
@stepHoverColor:               var(--zk-step-hover-color);
@stepClickColor:               var(--zk-step-click-color);

// portalchildren
@portalchildrenFrameBorderColor: var(--zk-portalchildren-frame-border-color);
@portalchildrenFrameRadius:    var(--zk-portalchildren-frame-radius);
@portalchildrenFrameBackgroundColor: var(--zk-portalchildren-frame-background-color);
@portalchildrenFrameMargin:    var(--zk-portalchildren-frame-margin);
@portalchildrenFramePadding:   var(--zk-portalchildren-frame-padding);
@portalchildrenFrameTitleFontFamily: var(--zk-portalchildren-frame-title-font-family);
@portalchildrenFrameTitleFontSize: var(--zk-portalchildren-frame-title-font-size);
@portalchildrenFrameTitleFontColor: var(--zk-portalchildren-frame-title-font-color);
@portalchildrenCounterRadius:  var(--zk-portalchildren-counter-radius);
@portalchildrenCounterPadding: var(--zk-portalchildren-counter-padding);
@portalchildrenCounterBackground: var(--zk-portalchildren-counter-background);
@portalchildrenFramePanelHeaderTextColor: var(--zk-portalchildren-frame-panel-header-text-color);
@portalchildrenFramePanelHeaderTextSize: var(--zk-portalchildren-frame-panel-header-text-size);
@portalchildrenFramePanelHeaderPadding: var(--zk-portalchildren-frame-panel-header-padding);
@portalchildrenFramePanelChildrenPadding: var(--zk-portalchildren-frame-panel-children-padding);
@portalchildrenFramePanelBackgroundColor: var(--zk-portalchildren-frame-panel-background-color);
@portalchildrenFramePanelPadding: var(--zk-portalchildren-frame-panel-padding);
@portalchildrenFrameDragButtonSize: var(--zk-portalchildren-frame-drag-button-size);
@portalchildrenFrameDragButtonColor: var(--zk-portalchildren-frame-drag-button-color);

// linelayout
@linelayoutLineColor:          var(--zk-linelayout-line-color);
@linelayoutLineWidth:          var(--zk-linelayout-line-width);
@linelayoutCavePadding:        var(--zk-linelayout-cave-padding);
@linelayoutPointBorder:        var(--zk-linelayout-point-border);
@linelayoutPointRadius:        var(--zk-linelayout-point-radius);
@linelayoutPointSize:          var(--zk-linelayout-point-size);
@linelayoutPointIconSize:      var(--zk-linelayout-point-icon-size);
@linelayoutPointIconColor:      var(--zk-linelayout-point-icon-color);
@linelayoutPointIconFixTop:     var(--zk-linelayout-point-icon-fix-top);
@linelayoutPointIconFixLeft:    var(--zk-linelayout-point-icon-fix-left);
@linelayoutPointBackgroundColor: var(--zk-linelayout-point-background-color);
@linelayoutPointShadow:        var(--zk-linelayout-point-shadow);

// coachmark
@coachmarkPadding:             var(--zk-coachmark-padding);
@coachmarkPaddingLeft:         var(--zk-coachmark-padding-left);
@coachmarkPaddingRight:        var(--zk-coachmark-padding-right);
@coachmarkIconSize:            var(--zk-coachmark-icon-size);
@coachmarkMaskBackground:      var(--zk-coachmark-mask-background);
@coachmarkBackgroundColor:     var(--zk-coachmark-background-color);

//cascader
@cascaderHeight:               var(--zk-cascader-height);
@cascaderLineHeight:           var(--zk-cascader-line-height);
@cascaderColor:                var(--zk-cascader-color);
@cascaderFontSize:             var(--zk-cascader-font-size);
@cascaderPadding:              var(--zk-cascader-padding);
@cascaderSeparatorColor:       var(--zk-cascader-separator-color);
@cascaderBorderColor:          var(--zk-cascader-border-color);
@cascaderBorderRadius:         var(--zk-cascader-border-radius);
@cascaderBackgroundColor:      var(--zk-cascader-background-color);
@cascaderIconColor:            var(--zk-cascader-icon-color);
@cascaderPlaceholderColor:     var(--zk-cascader-placeholder-color);
@cascaderActiveBorderColor:    var(--zk-cascader-active-border-color);
@cascaderActiveBackgroundColor: var(--zk-cascader-active-background-color);
@cascaderHoverBorderColor:     var(--zk-cascader-hover-border-color);
@cascaderFocusBorderColor:     var(--zk-cascader-focus-border-color);
@cascaderDisableColor:         var(--zk-cascader-disable-color);
@cascaderDisableBackgroundColor: var(--zk-cascader-disable-background-color);
@cascaderPopupBorderColor:     var(--zk-cascader-popup-border-color);
@cascaderPopupCavePadding:     var(--zk-cascader-popup-cave-padding);
@cascaderPopupItemPadding:     var(--zk-cascader-popup-item-padding);
@cascaderPopupItemHeight:      var(--zk-cascader-popup-item-height);
@cascaderPopupItemHoverBackgroundColor: var(--zk-cascader-popup-item-hover-background-color);
@cascaderPopupItemSelectedColor: var(--zk-cascader-popup-item-selected-color);

// cropper
@cropperToolbarButtonFontSize: var(--zk-cropper-toolbar-button-font-size);
@cropperToolbarButtonPadding:  var(--zk-cropper-toolbar-button-padding);