x4js 2.0.11 → 2.0.12

package/lib/src/core/core_svg.ts

@@ -14,10 +14,10 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentProps } from '@core/component';
-import { isUnitLess } from "@core/core_styles";
-import { DOMEventHandler, GlobalDOMEvents, addEvent } from '@core/core_dom';
-import { isNumber, isString } from '@core/core_tools.js';
+import { Component, ComponentProps } from './component';
+import { isUnitLess } from "./core_styles";
+import { DOMEventHandler, GlobalDOMEvents, addEvent } from './core_dom';
+import { isNumber, isString } from './core_tools';
 
 const SVG_NS = "http://www.w3.org/2000/svg"; 
 

package/lib/src/x4.ts

@@ -57,4 +57,6 @@ export * from "./components/textarea/textarea"
 export * from "./components/textedit/textedit"
 export * from "./components/tooltips/tooltips"
 export * from "./components/treeview/treeview"
-export * from "./components/viewport/viewport"
+export * from "./components/viewport/viewport"
+
+import "./x4.scss"

package/lib/styles/x4.css

@@ -1 +1 @@
-.box,.vbox,.x4vbox,.hbox,.x4hbox{position:relative}.hbox,.x4hbox{display:flex;flex-direction:row;align-items:center}.vbox,.x4vbox{display:flex;flex-direction:column}.fit,.x4stackbox>*{position:absolute;inset:0}.x4stackbox>*{position:relative!important}.x4stackbox>*:not(.selected){display:none}.box,.vbox,.hbox,.x4icon{position:relative}.hbox,.x4icon{display:flex;flex-direction:row;align-items:center}.x4icon{min-width:10px;height:10px;overflow:hidden}.x4icon svg{width:100%;height:100%}.box,.vbox,.hbox,.x4button{position:relative}.hbox,.x4button{display:flex;flex-direction:row;align-items:center}.flex,.x4button>#label{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--button-background: var( --accent-background );--button-color: var( --accent-color );--button-background-hover: var( --accent-background-hover );--button-color-hover: var( --accent-color-hover );--button-background-active: var( --accent-background-active );--button-color-active: var( --accent-color-active );--button-background-focus: var( --accent-background-focus );--button-color-focus: var( --accent-color-focus );--button-background-disabled: var( --disabled-background );--button-color-disabled: var( --disabled-color );--button-icon-color: rgb(255 255 255 / 64%);--ol-button-background: var( --background-primary );--ol-button-background-active: #eee;--ol-button-color: var( --text-primary );--ol-button-border: var( --border );--ol-button-icon-color: var( --text-primary );--ol-button-border-focus: var( --accent-background-focus );--ol-button-color-focus: var( --accent-background )}.x4button{gap:4px;font-size:inherit;font-family:inherit;padding:8px;margin:2px;transition:background-color .3s,color .3s;border:none;outline:none;cursor:pointer;background-color:var(--button-background);color:var(--button-color);gap:.4em}.x4button>#icon{transition:color .3s;width:1em;height:1em}.x4button>#icon.empty{display:none}.x4button>#label{padding:0;color:inherit}.x4button>#label:empty{display:none}.x4button:focus{background-color:var(--button-background-focus);color:var(--button-color-focus)}.x4button:focus #icon{color:var(--button-color-focus)}.x4button:focus #label{text-decoration:underline}.x4button:hover{background-color:var(--button-background-hover);color:var(--button-color-hover)}.x4button:active{background-color:var(--button-background-active);color:var(--button-color-active)}.x4button[disabled]{cursor:not-allowed;background-color:var(--button-background-disabled);color:var(--button-color-disabled)}.x4button.outline{background-color:var(--ol-button-background);border:1px solid var(--ol-button-border);color:var(--ol-button-color)}.x4button.outline #icon{color:var(--ol-button-icon-color)}.x4button.outline:focus{border-color:var(--ol-button-border-focus);color:var(--ol-button-color-focus)}.x4button.outline:focus #icon{color:var(--ol-button-color-focus)}.x4button.outline:active{background-color:var(--ol-button-background-active);color:var(--button-color-active)}.x4button.outline:active #icon{color:var(--button-icon-color)}.x4button.danger{background-color:var(--alert-background);color:var(--alert-color)}.x4button.danger:active{background-color:var(--alert-background-active)}.x4btngroup{align-content:start;margin:5px;gap:4px}.x4btngroup.align-right{justify-content:end}.x4btngroup.align-center{justify-content:center}.box,.vbox,.hbox,.x4label{position:relative}.hbox,.x4label{display:flex;flex-direction:row;align-items:center}:root{--label-background: transparent;--label-color: var( --text-ternary );--label-icon-color: rgb(0 0 0 / 44%)}.x4label{color:var(--label-color);background-color:var(--label-background);text-align:left;gap:.2em}.x4label.right{text-align:right}.x4label.center{text-align:center}.x4label #icon{width:1em;margin:0 .1em;color:var(--label-icon-color)}.x4label #icon.empty{display:none}.x4csizer{position:absolute}.x4csizer.top{left:0;right:0;height:8px;z-index:10;cursor:ns-resize;top:0}.x4csizer.bottom{left:0;right:0;height:8px;z-index:10;cursor:ns-resize;bottom:0}.x4csizer.left{top:0;bottom:0;width:8px;z-index:10;cursor:ew-resize;left:0}.x4csizer.right{top:0;bottom:0;width:8px;z-index:10;cursor:ew-resize;right:0}.x4csizer.top-left{width:8px;height:8px;z-index:11;left:0;top:0;cursor:nw-resize}.x4csizer.top-right{width:8px;height:8px;z-index:11;right:0;top:0;cursor:ne-resize}.x4csizer.bottom-left{width:8px;height:8px;z-index:11;left:0;bottom:0;cursor:ne-resize}.x4csizer.bottom-right{width:8px;height:8px;z-index:11;right:0;bottom:0;cursor:nw-resize}:root{--modal-mask-background: rgba(0,0,0,.5)}.x4popup{background-color:var(--fill-color);position:absolute;border:1px solid var(--border-color);overflow:hidden;z-index:1000;border-radius:var(--bradius)}.x4popup.popup-caption,.x4popup .popup-caption{cursor:move}.x4modal-mask{background-color:var(--modal-mask-background);position:absolute;inset:0;z-index:1000}.box,.vbox,.hbox,.x4menu .x4cmenuitem{position:relative}.hbox,.x4menu .x4cmenuitem{display:flex;flex-direction:row;align-items:center}.flex,.x4menu .x4cmenuitem #text{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.shadow-lg,.x4menu{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}:root{--menu-background: var( --background-primary );--menu-border: var( --border-hover );--menuitem-color: var( --text-ternary );--menuitem-background-active: var( --accent-background-active );--menuitem-color-active: var( --accent-color-active );--menuitem-background-hover: var( --accent-background-hover );--menuitem-color-hover: var( --accent-color-hover )}.x4menu{position:absolute;overflow-y:scroll;border-radius:var(--bradius);padding:8px 0;min-width:150px;background-color:var(--menu-background);border:1px solid var(--menu-border);max-height:calc(100vh - 32px)}.x4menu .x4cmenuitem{transition:background-color .3s,color .3s;align-items:center;color:var(--menuitem-color);padding:6px;gap:10px;cursor:pointer;transition:background-color .1s}.x4menu .x4cmenuitem #icon{width:16px;height:16px}.x4menu .x4cmenuitem.title{color:var(--text-primary);cursor:auto;margin-left:-16px;margin-top:-6px;font-weight:600}.x4menu .x4cmenuitem.popup:after{content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" fill="var(--color-gray-8)"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');width:6px}.x4menu .x4cmenuitem:hover:not(.title),.x4menu .x4cmenuitem.opened{background-color:var(--menuitem-background-hover);color:var(--menuitem-color-hover)}.x4menu .x4cmenuitem:active:not(.title){background-color:var(--menuitem-background-active);color:var(--menuitem-color-active)}.x4menu .x4cmenuitem[disabled]{color:var(--disabled-color-dark)!important}.x4menu .x4cmenuitem[disabled]:hover{background-color:var(--disabled-background)!important}.x4menu .x4cmenusep{padding-top:4px;border-bottom:1px solid var(--border);margin-bottom:4px}.box,.vbox,.hbox,.x4calendar .week .cell .text{position:relative}.hbox,.x4calendar .week .cell .text{display:flex;flex-direction:row;align-items:center}.flex,.x4calendar .week,.x4calendar .week .cell{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--calendar-btn-background: inherit;--calendar-btn-color: var( --text-secondary );--calendar-btn-color-hover: var( --text-primary );--calendar-week-color: var( --accent-background );--calendar-week-color-hover: var( --accent-background-hover );--calendard-day-background-hover: var( --accent-background-hover );--calendard-day-color-hover: var( --accent-color-hover );--calendar-sel-background: var( --accent-background );--calendar-sel-color: var( --accent-color );--calendar-today-background: var( --alert-background );--calendar-today-color: var( --alert-color );--calendar-today-border: var( --accent-background );--calendar-header-color: var( --text-primary );--calendar-out-color: var( --disabled-color-dark )}.x4calendar{border:1px solid var(--border);padding:4px}.x4calendar .month-sel{height:2em;align-items:center;padding-left:2em;margin-bottom:8px}.x4calendar .month-sel .month{padding-right:4px}.x4calendar .month-sel .year,.x4calendar .month-sel .month{cursor:pointer}.x4calendar .month-sel .month:hover,.x4calendar .month-sel .year:hover{text-decoration:underline}.x4calendar .month-sel .x4label{font-weight:700}.x4calendar .month-sel .x4button{height:auto;background-color:var(--calendar-btn-background);color:var(--calendar-btn-color)}.x4calendar .month-sel .x4button:hover{color:var(--calendar-btn-color-hover)}.x4calendar .week{align-items:center;padding:2px}.x4calendar .week .cell{min-width:28px;min-height:28px;color:var(--gray-900);text-align:center}.x4calendar .week .cell .text{transition:background-color .3s,color .3s;justify-content:center;border:1px solid transparent;margin:auto;border-radius:14px;width:28px;height:28px}.x4calendar .week .today .text{font-weight:700;background-color:var(--calendar-today-background);color:var(--calendar-today-color)}.x4calendar .week .selection .text{background-color:var(--calendar-sel-background);color:var(--calendar-sel-color)}.x4calendar .week .weeknum{width:2em;color:var(--calendar-week-color);font-size:70%}.x4calendar .week:hover .weeknum{font-weight:700}.x4calendar .week .day{cursor:pointer}.x4calendar .week .out{color:var(--calendar-out-color);font-size:80%}.x4calendar .week .day:hover .text{background-color:var(--calendard-day-background-hover);color:var(--calendard-day-color-hover)}.x4calendar .header .cell{color:var(--calendar-header-color);height:1.5em;justify-content:center}.x4calendar .header:hover{background-color:inherit}:root{--input-sel-background: var( --accent-background );--input-sel-color: var( --accent-color );--input-placeholder: var( --disabled-background );--input-error: var( --alert-background )}input.x4input{font:inherit;outline:none;border:none}input.x4input::selection{background-color:var(--input-sel-background);color:var(--input-sel-color)}input.x4input[type=text],input.x4input[type=password],input.x4input[type=email]{padding:8px 4px}input.x4input[type=checkbox]:checked,input.x4input[type=radio]:checked{accent-color:var(--color-80)}input.x4input[type=range]{accent-color:var(--color-60)}input.x4input::placeholder{color:var(--input-placeholder);font-style:italic;font-weight:90%}input.x4input[type=password]{font-weight:700}input.x4input:disabled{background-color:transparent}input.x4input:invalid{color:var(--input-error)}.box,.vbox,.hbox,.x4checkbox{position:relative}.hbox,.x4checkbox{display:flex;flex-direction:row;align-items:center}:root{--checkbox-background-check: var( --accent-background );--checkbox-background-check-hover: var( --accent-background-hover );--checkbox-background-disabled: var( --disabled-color );--checkbox-background-disabled-check: var( --disabled-background );--checkbox-color-disabled: var( --disabled-background );--checkbox-check-border: var( --border );--checkbox-check-border-hover: var( --border-hover )}.x4checkbox{display:flex;flex-direction:row;align-items:center;margin:5px;padding:4px;gap:4px;cursor:pointer}.x4checkbox .inner{height:1rem;width:1rem;color:#fff;position:relative;order:1}.x4checkbox .inner input{appearance:none;outline:none;cursor:pointer;display:block;margin:0;padding:0;left:0;top:0;width:100%;height:100%;transition:opacity .1s ease}.x4checkbox .inner input:checked{background-color:var(--checkbox-background-check)}.x4checkbox .inner input:checked:hover{background-color:var(--checkbox-background-check-hover)}.x4checkbox .inner input:not(:checked){border:1px solid var(--checkbox-check-border)}.x4checkbox .inner input:not(:checked):hover{border:1px solid var(--checkbox-check-border-hover)}.x4checkbox .inner svg{margin:auto;pointer-events:none;position:absolute;opacity:0;inset:0;width:100%;height:50%}.x4checkbox .inner:has(input:checked) input{opacity:1}.x4checkbox .inner:has(input:checked) svg{opacity:1}.x4checkbox:focus-within label #text{text-decoration:underline}.x4checkbox[disabled],.x4checkbox[disabled] *{cursor:not-allowed}.x4checkbox[disabled] label{pointer-events:none;color:var(--checkbox-color-disabled)}.x4checkbox[disabled] .inner{pointer-events:none}.x4checkbox[disabled] .inner input{background-color:var(--checkbox-background-disabled)}.x4checkbox[disabled] .inner input:checked{background-color:var(--checkbox-background-disabled-check)}.x4checkbox label{text-align:right;cursor:inherit;order:2}.x4checkbox.left #label{order:0;text-align:left}:root{--colorinput-btn-background: inherit;--colorinput-btn-color: var( --text-secondary );--colorinput-btn-color-hover: var( --text-primary )}.x4colorinput{margin:5px;border-bottom:1px solid var(--border);outline:none}.x4colorinput:focus-within{border-bottom-color:var(--border-focus)}.x4colorinput .swatch{margin:4px;width:1rem;height:1rem}.x4colorinput input{outline:none;margin:0;height:100%;flex-grow:1}.x4colorinput .x4button{margin:0;padding:0;outline:none;background-color:var(--combobox-btn-background);color:var(--colorinput-btn-color)}.x4colorinput .x4button #icon{color:var(--colorinput-btn-color)}.x4colorinput .x4button:hover,.x4colorinput .x4button:hover #icon{color:var(--colorinput-btn-color-hover)}.x4colorpicker{width:240px;gap:4px;touch-action:none;outline:none;margin:8px}.x4colorpicker .overlay{position:absolute;inset:0}.x4colorpicker .x4saturation{width:100%;height:140px;position:relative}.x4colorpicker .x4saturation .thumb{width:12px;height:12px;border:2px solid white;border-radius:8px;box-shadow:0 0 5px #00000080;position:absolute;transform:translate(-50%,50%)}.x4colorpicker .body{gap:4px}.x4colorpicker .body>.x4vbox{gap:4px}.x4colorpicker .body .x4hueslider{position:relative;height:16px;overflow:hidden;background-image:linear-gradient(to right,red,#ff0,#0f0,#00ffd4,#00f,#f0f,red);border:1px solid var(--color-gray-3)}.x4colorpicker .body .x4hueslider .thumb{width:12px;height:12px;border:2px solid white;border-radius:8px;box-shadow:0 0 5px #00000080;position:absolute;transform:translate(-50%,-50%);top:50%}.x4colorpicker .body .x4alphaslider{position:relative;height:16px;overflow:hidden}.x4colorpicker .body .x4alphaslider .checkers{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 20px,20px -20px,-20px 0}.x4colorpicker .body .x4alphaslider .color{background-image:linear-gradient(90deg,transparent,rgb(0,178,255))}.x4colorpicker .body .x4alphaslider .thumb{width:12px;height:12px;border:2px solid white;border-radius:8px;box-shadow:0 0 5px #00000080;position:absolute;transform:translate(-50%,-50%);top:50%}.x4colorpicker .body .swatch{width:36px;height:36px}.x4colorpicker .body .swatch .checkers{border-radius:8px;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 20px,20px -20px,-20px 0}.x4colorpicker .body .swatch .color{border-radius:8px;background-image:linear-gradient(90deg,transparent,rgb(0,178,255))}.flex,.x4scrollview{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.x4viewport{width:100%}.box,.vbox,.x4listbox,.hbox{position:relative}.vbox,.x4listbox{display:flex;flex-direction:column}.flex,.x4listbox>.body .x4viewport .x4item{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--listbox-item-background-sel: var( --accent-background );--listbox-item-color-sel: var( --accent-color );--listbox-item-color-sel-disabled: var( --disabled-background );--listbox-item-color: var( --text-primary );--listbox-item-color-disabled: var( --disabled-color-dark );--listbox-item-background-hover: var( --background-secondary );--listbox-border: var( --border );--listbox-border-focus: var( --accent-background-focus )}.x4listbox{margin:5px;border:1px solid var(--listbox-border);outline:none}.x4listbox:focus-within{border-color:var(--listbox-border-focus)}.x4listbox>.x4header{border-bottom:1px solid var(--color-gray-3)}.x4listbox>.body{width:100%;flex-basis:0;overflow-y:auto;overflow-x:auto;outline:none}.x4listbox>.body .x4viewport{display:table}.x4listbox>.body .x4viewport .x4item{padding:4px;background-color:transparent;color:var(--color-gray-9)}.x4listbox>.body .x4viewport .x4item>.x4label{color:inherit;padding:2px 6px}.x4listbox>.body .x4viewport .x4item:hover{background-color:var(--listbox-item-background-hover)}.x4listbox>.body .x4viewport .x4item.selected{background-color:var(--listbox-item-background-sel);color:var(--listbox-item-color-sel)}.x4listbox[disabled]{cursor:not-allowed;border-color:var(--border);color:var(--listbox-item-color-disabled)}.x4listbox[disabled]>.body .x4viewport{pointer-events:none}.x4listbox[disabled]>.body .x4viewport .x4item.selected{background-color:var(--listbox-item-color-sel-disabled)}.box,.vbox,.hbox,.x4dropdown,.x4combobox{position:relative}.hbox,.x4dropdown,.x4combobox{display:flex;flex-direction:row;align-items:center}.flex,.x4dropdown .x4listbox,.x4combobox>#edit,.x4combobox>#edit .x4input{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.shadow-xl,.x4dropdown{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}:root{--dropdown-border: var( --border-hover );--dropdown-background: var( --background-primary );--combobox-border: var( --border );--combobox-border-focus: var( --border-focus );--combobox-btn-background: inherit;--combobox-btn-color: var( --text-secondary );--combobox-btn-color-hover: var( --text-primary )}.x4dropdown{max-height:250px;position:absolute;background-color:var(--dropdown-background);border:1px solid var(--dropdown-border)}.x4dropdown .x4listbox{border:none;margin:0;width:100%;height:200px}.x4combobox{margin:5px}.x4combobox>#label{padding:0 6px;border-bottom:1px solid transparent}.x4combobox>#label>.x4label{height:100%;padding:0;font-weight:500;gap:0}.x4combobox>#label:after{content:":"}.x4combobox>#edit{border-bottom:1px solid var(--combobox-border)}.x4combobox>#edit .x4input[readonly]{cursor:pointer}.x4combobox>#edit .x4button{margin:0;padding:0;outline:none;background-color:var(--combobox-btn-background);color:var(--combobox-btn-color)}.x4combobox>#edit .x4button #icon{color:var(--combobox-btn-color)}.x4combobox>#edit .x4button:hover,.x4combobox>#edit .x4button:hover #icon{color:var(--combobox-btn-color-hover)}.x4combobox[disabled],.x4combobox[disabled] *{cursor:not-allowed}.x4combobox[disabled] #label .x4label{color:var(--disabled-color-dark);pointer-events:none}.x4combobox[required] .x4label:before{content:"*";color:var(--color-90)}.box,.vbox,.x4dialog,.hbox{position:relative}.vbox,.x4dialog{display:flex;flex-direction:column}.flex,.x4dialog>.caption>#title{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.shadow-xl,.x4dialog{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}:root{--color-dialog-caption: var( --color-primary-a80 );--color-dialog-caption-text: var( --color-primary-a0 )}.x4dialog{position:absolute;background-color:#fff;border:1px solid var(--border-dark);min-width:min-content;min-height:min-content}.x4dialog>.caption{padding:8px;background-color:var(--color-dialog-caption)}.x4dialog>.caption>#title{color:var(--color-dialog-caption-text);font-weight:700}.x4dialog>.caption>#closebox{margin:0;padding:4px}.x4dialog>.form{min-height:128px;min-width:450px}.x4dialog>#btnbar{border-top:1px solid var(--color-separation);padding:6px 16px;justify-content:end;gap:8px}.x4dialog>#btnbar>.x4button{min-width:80px}.x4dialog>#btnbar>.x4button .x-simple-label{text-align:center}.box,.vbox,.x4form,.hbox{position:relative}.vbox,.x4form{display:flex;flex-direction:column}.flex,.x4form{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--form--background: var( --background-primary )}.x4form{padding:16px;background-color:var(--color-form)}.flex,.x4header{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--header-background-hover: rgba(100,100,100,.1);--header-sizer-hover: var( --border-hover )}.x4header{width:100%;overflow:hidden;min-height:2em;border-bottom:1px solid var(--border)}.x4header .cell{border-bottom:1px solid transparent;overflow:hidden;min-width:3rem;transition:border-color .5s ease;padding:4px}.x4header .cell span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x4header .cell:hover{background-color:var(--header-background-hover)}.x4header .cell .x4csizer:hover{border-right:1px solid var(--header-sizer-hover)}.x-image{position:relative;background:none}:root{--msgbox-caption-background: var( --alert-background );--msgbox-caption-color: var( --alert-color );--msgbox-icon-color: var( --alert-background )}.x4messagebox>.caption{background-color:var(--msgbox-caption-background)}.x4messagebox>.caption>#title{color:var(--msgbox-caption-color)}.x4messagebox .x4form .x4icon{color:var(--msgbox-icon-color);height:96px}.x4messagebox .x4form .x4label{padding:16px}.shadow-xl,.x4notification{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}:root{--notification-border: var( --border );--notification-icon-default: var( --accent-background );--notification-icon-success: var( --success-background );--notification-icon-danger: var( --alert-background )}.x4notification{padding:8px;border:1px solid var(--notification-border);border-left:3px solid var(--accent-background)}.x4notification>.x4hbox{gap:8px}.x4notification .x4icon{width:24px;color:var(--notification-icon-default)}.x4notification .body .title{font-weight:700;padding:6px 6px 3px}.x4notification .body .text{padding:3px 6px 6px;color:var(--color-gray-7)}.x4notification.success{border-left-color:var(--notification-icon-success)}.x4notification.success .x4icon{color:var(--notification-icon-success)}.x4notification.danger{border-left-color:var(--notification-icon-danger)}.x4notification.danger .x4icon{color:var(--notification-icon-danger)}.x4notification .x4button{height:24px;color:var(--color-gray-7);border:none}.rel-fit,.x4panel>.body{position:relative;inset:0}:root{--panel-border: var( --border );--panel-title-color: var( --border )}.x4panel{border:1px solid var(--panel-border);border-radius:4px;margin:5px;padding:8px;position:relative}.x4panel>legend{padding:0 5px;position:absolute;left:4px;top:-.7em;background-color:#fff;font-weight:700;color:var(--color-gray-9)}.x4panel>.body{overflow:hidden;justify-content:start;padding:8px}:root{--progress-background: var( --border );--progress-color: var( --accent-background )}.x4progress{background-color:var(--progress-background);position:relative;height:6px;margin:0 5px;border-radius:3px}.x4progress .bar{position:absolute;left:0;top:0;bottom:0;width:0;background-color:var(--progress-color);border-radius:3px;transition:width ease .2s}.x4progress.indeterm .bar{background-image:linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);background-size:20px 20px;animation:slide 1s linear infinite}@keyframes slide{0%{background-position:0 0}to{background-position:2.5rem 0}}:root{--rating: var( --border );--rating-hover: var( --border-hover );--rating-checked: var( --accent-background )}.x4rating{gap:2px}.x4rating .item{width:16px;height:16px;color:var(--rating)}.x4rating .item:hover{color:var(--rating-hover)}.x4rating .item.checked{color:var(--rating-checked)}:root{--slider-track: var( --border );--slider-thumb-background: var( --accent-background );--slider-thumb-border: var( --accent-background );--slider-thumb-border-focus: var( --border-focus )}.x4slider{height:28px;outline:none;padding:10px 12px;touch-action:none;margin:5px 0}.x4slider .track{background-color:var(--slider-track);width:100%;position:relative;top:50%;height:3px}.x4slider .bar{position:absolute;width:61%;height:3px;background-color:var(--color-60)}.x4slider .thumb{position:absolute;left:61%;outline:none;background-color:var(--slider-thumb-background);border:3px solid var(--slider-thumb-border);border-radius:8px;top:50%;width:16px;height:16px;transform:translate(-50%,-50%);cursor:pointer}.x4slider:focus .thumb{outline-offset:3px;outline-color:var(--slider-thumb-border-focus);outline-style:solid;outline-width:1px}:root{--switch-border: var( --border );--switch-background: #eee;--switch-background-disabled: var( --disabled-background );--switch-checked: var( --accent-background )}.x4switch{display:flex;flex-direction:row;align-items:center;position:relative;gap:4px;margin-left:5px;padding:4px;cursor:pointer}.x4switch label{cursor:pointer}.x4switch:focus-within .x4label span{text-decoration:underline}.x4switch .switch{width:2.2rem;height:18px;position:relative}.x4switch .switch input{position:absolute;width:100%;height:100%;appearance:none;padding:0;margin:0;left:0;top:0;cursor:pointer}.x4switch .switch .track{position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;border:1px solid var(--switch-border);background-color:var(--switch-background);border-radius:9px;transition:background-color ease .2s}.x4switch .switch .thumb{position:absolute;pointer-events:none;left:.05rem;top:1px;width:1rem;height:1rem;border-radius:8px;background-color:#fff;box-shadow:0 0 2px #00000080;transition:left ease .2s}.x4switch:has(input:checked) .switch .thumb{left:1.15rem}.x4switch:has(input:checked) .switch .track{background-color:var(--switch-checked)}.x4switch[disabled],.x4switch[disabled] *{cursor:not-allowed}.x4switch[disabled] input{pointer-events:none}.x4switch[disabled] label{pointer-events:none;color:var(--checkbox-color-disabled)}.x4switch[disabled] .switch .track,.x4switch[disabled].x4switch:has(input:checked) .switch .track{background-color:var(--switch-background-disabled)}:root{--tab-border-selected: var( --accent-background );--tab-border-hover: var( --accent-background-hover )}.x4tabs .x4ctablist{gap:4px;padding:5px 5px 0}.x4tabs .x4ctablist .x4button{border:none;border-bottom:2px solid transparent;color:var(--color-gray-7);margin:0;outline:none;transition:border-color .2s ease}.x4tabs .x4ctablist .x4button.selected{border-bottom-color:var(--tab-border-selected);font-weight:700;color:var(--color-gray-9)}.x4tabs .x4ctablist .x4button:hover{background-color:unset;color:#000;border-bottom-color:var(--tab-border-hover)}.x4tabs .x4ctablist .x4button:focus{color:var(--color-60)}.x4tabs>.body{padding:8px;border:1px solid var(--border)}.flex,.x4textarea textarea{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--textarea-border: var( --border );--textarea-border-focus: var( --border-focus )}.x4textarea{margin:5px}.x4textarea .x4label{gap:0;padding:4px 0}.x4textarea .x4label:after{content:":"}.x4textarea textarea{border:1px solid var(--color-gray-3);padding:4px;outline:none;font:inherit;border:1px solid var(--textarea-border)}.x4textarea textarea:focus{border:1px solid var(--textarea-border-focus)}.x4textarea textarea::selection{background-color:var(--color-90);color:#fff}.x4textarea textarea[resize=false]{resize:none}.box,.vbox,.hbox,.x4textedit,.x4textedit>#label>.x4label,.x4textedit>#edit{position:relative}.hbox,.x4textedit,.x4textedit>#label>.x4label,.x4textedit>#edit{display:flex;flex-direction:row;align-items:center}.flex,.x4textedit>#edit,.x4textedit>#edit .x4input{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}:root{--textedit-border: var( --border );--textedit-border-focus: var( --border-focus );--textedit-required: var( --alert-background );--textedit-btn-background: inherit;--textedit-btn-color: var( --text-secondary );--textedit-btn-color-hover: var( --text-primary );--textedit-color-disabled: var( --disabled-background )}.x4textedit{margin:5px;gap:6px}.x4textedit>#label{border-bottom:1px solid transparent}.x4textedit>#label>.x4label{height:100%;padding:0;font-weight:500;gap:0}.x4textedit>#label:after{content:":"}.x4textedit>#edit{border-bottom:1px solid var(--textedit-border)}.x4textedit>#edit .x4input{outline:none;margin:0}.x4textedit>#edit .x4button{margin:0;padding:0;background-color:var(--textedit-btn-background);color:var(--textedit-btn-color)}.x4textedit>#edit .x4button #icon{color:var(--textedit-btn-color)}.x4textedit>#edit .x4button:hover,.x4textedit>#edit .x4button:hover #icon{color:var(--textedit-btn-color-hover)}.x4textedit>#edit .x4button:focus{border-bottom-color:var(--textedit-border-focus)}.x4textedit:focus-within #edit{border-bottom-color:var(--textedit-border-focus)}.x4textedit[required]>#label>.x4label:before{content:"*";font-weight:700;color:var(--textedit-required)}.x4textedit[disabled],.x4textedit[disabled] *{cursor:not-allowed}.x4textedit[disabled] #label>.x4label #text,.x4textedit[disabled] #label>.x4label:before,.x4textedit[disabled] #label:after{color:var(--textedit-color-disabled)}.x4textedit[disabled] #edit input{color:var(--textedit-color-disabled);background-color:unset}.box,.vbox,.hbox{position:relative}.hbox{display:flex;flex-direction:row;align-items:center}.vbox{display:flex;flex-direction:column}.fit{position:absolute;inset:0}.rel-fit{position:relative;inset:0}.flex{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.shadow-lg,.x4tooltip{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.shadow-xl{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}:root{--tooltip-background: var( --color-primary-a70 );--tooltip-color: var( --color-primary-a0 );--tooltip-border: var( --border-dark )}.x4tooltip{display:flex;flex-direction:row;border:none;font-size:90%;position:absolute}.x4tooltip .x4icon{width:1.6em;height:100%;padding:2px 4px;background-color:var(--tooltip-background);color:var(--tooltip-color);border:1px solid var(--tooltip-border)}.x4tooltip .x4icon svg{max-height:100%}.x4tooltip #text{background-color:var(--tooltip-background);color:var(--tooltip-color);padding:4px}:root{--treeitem-backgound: var( );--treeitem-color: var( );--treeitem-backgound-hover: var( --background-secondary );--treeitem-color-hover: var( );--treeitem-background-sel: var( --accent-background );--treeitem-color-sel: var( --accent-color );--treeitem-backgound-active: var( --accent-background-active);--treeitem-color-active: var( --accent-color-active )}.x4treeview{overflow-y:auto;height:100%;margin:5px;outline:none;border:1px solid var(--border)}.x4treeview:focus{border:1px solid var(--border-focus)}.x4treeview .x4ctreeviewitem>.label{gap:4px;padding:4px}.x4treeview .x4ctreeviewitem>.label .x4label,.x4treeview .x4ctreeviewitem>.label .x4icon{color:inherit}.x4treeview .x4ctreeviewitem>.label .x4icon{width:16px}.x4treeview .x4ctreeviewitem>.label:hover{background-color:var(--treeitem-backgound-hover)}.x4treeview .x4ctreeviewitem>.label.selected{background-color:var(--treeitem-background-sel);color:var(--treeitem-color-sel)}.x4treeview .x4ctreeviewitem>.label:active{background-color:var(--accent-background-active);color:var(--accent-color-active)}.x4treeview .x4ctreeviewitem>.body:not(:first-child){padding-left:24px}.x4treeview .x4ctreeviewitem>.body{transition:opacity .5s ease}.x4treeview .x4ctreeviewitem.folder>.label{display:flex;flex-direction:row;align-items:center}.x4treeview .x4ctreeviewitem.folder>.label>.x-icon{transform:rotate(0);transition:transform .2s ease;width:16px;height:16px;cursor:pointer}.x4treeview .x4ctreeviewitem.folder>.body{overflow:hidden}.x4treeview .x4ctreeviewitem.folder:not(.open)>.body{height:0;opacity:0}.x4treeview .x4ctreeviewitem.folder:not(.open)>.label>.x4icon{transform:rotate(-90deg)}
+.box,.vbox,.x4vbox,.hbox,.x4hbox{position:relative}.hbox,.x4hbox{display:flex;flex-direction:row;align-items:center}.vbox,.x4vbox{display:flex;flex-direction:column}.fit,.x4stackbox>*{position:absolute;inset:0}.x4stackbox>*{position:relative!important}.x4stackbox>*:not(.selected){display:none}.box,.vbox,.hbox,.x4icon{position:relative}.hbox,.x4icon{display:flex;flex-direction:row;align-items:center}.x4icon{min-width:10px;height:10px;overflow:hidden}.x4icon svg{width:100%;height:100%}.box,.vbox,.hbox,.x4button{position:relative}.hbox,.x4button{display:flex;flex-direction:row;align-items:center}.flex,.x4button>#label{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--button-background: var( --accent-background );--button-color: var( --accent-color );--button-background-hover: var( --accent-background-hover );--button-color-hover: var( --accent-color-hover );--button-background-active: var( --accent-background-active );--button-color-active: var( --accent-color-active );--button-background-focus: var( --accent-background-focus );--button-color-focus: var( --accent-color-focus );--button-background-disabled: var( --disabled-background );--button-color-disabled: var( --disabled-color );--button-icon-color: rgb(255 255 255 / 64%);--ol-button-background: var( --background-primary );--ol-button-background-active: #eee;--ol-button-color: var( --text-primary );--ol-button-border: var( --border );--ol-button-icon-color: var( --text-primary );--ol-button-border-focus: var( --accent-background-focus );--ol-button-color-focus: var( --accent-background )}.x4button{gap:4px;font-size:inherit;font-family:inherit;padding:8px;margin:2px;transition:background-color .3s,color .3s;border:none;outline:none;cursor:pointer;background-color:var(--button-background);color:var(--button-color);gap:.4em}.x4button>#icon{transition:color .3s;width:1em;height:1em}.x4button>#icon.empty{display:none}.x4button>#label{padding:0;color:inherit}.x4button>#label:empty{display:none}.x4button:focus{background-color:var(--button-background-focus);color:var(--button-color-focus)}.x4button:focus #icon{color:var(--button-color-focus)}.x4button:focus #label{text-decoration:underline}.x4button:hover{background-color:var(--button-background-hover);color:var(--button-color-hover)}.x4button:active{background-color:var(--button-background-active);color:var(--button-color-active)}.x4button[disabled]{cursor:not-allowed;background-color:var(--button-background-disabled);color:var(--button-color-disabled)}.x4button.outline{background-color:var(--ol-button-background);border:1px solid var(--ol-button-border);color:var(--ol-button-color)}.x4button.outline #icon{color:var(--ol-button-icon-color)}.x4button.outline:focus{border-color:var(--ol-button-border-focus);color:var(--ol-button-color-focus)}.x4button.outline:focus #icon{color:var(--ol-button-color-focus)}.x4button.outline:active{background-color:var(--ol-button-background-active);color:var(--button-color-active)}.x4button.outline:active #icon{color:var(--button-icon-color)}.x4button.danger{background-color:var(--alert-background);color:var(--alert-color)}.x4button.danger:active{background-color:var(--alert-background-active)}.x4btngroup{align-content:start;margin:5px;gap:4px}.x4btngroup.align-right{justify-content:end}.x4btngroup.align-center{justify-content:center}.box,.vbox,.hbox,.x4label{position:relative}.hbox,.x4label{display:flex;flex-direction:row;align-items:center}:root{--label-background: transparent;--label-color: var( --text-ternary );--label-icon-color: rgb(0 0 0 / 44%)}.x4label{color:var(--label-color);background-color:var(--label-background);text-align:left;gap:.2em}.x4label.right{text-align:right}.x4label.center{text-align:center}.x4label #icon{width:1em;margin:0 .1em;color:var(--label-icon-color)}.x4label #icon.empty{display:none}.x4csizer{position:absolute}.x4csizer.top{left:0;right:0;height:8px;z-index:10;cursor:ns-resize;top:0}.x4csizer.bottom{left:0;right:0;height:8px;z-index:10;cursor:ns-resize;bottom:0}.x4csizer.left{top:0;bottom:0;width:8px;z-index:10;cursor:ew-resize;left:0}.x4csizer.right{top:0;bottom:0;width:8px;z-index:10;cursor:ew-resize;right:0}.x4csizer.top-left{width:8px;height:8px;z-index:11;left:0;top:0;cursor:nw-resize}.x4csizer.top-right{width:8px;height:8px;z-index:11;right:0;top:0;cursor:ne-resize}.x4csizer.bottom-left{width:8px;height:8px;z-index:11;left:0;bottom:0;cursor:ne-resize}.x4csizer.bottom-right{width:8px;height:8px;z-index:11;right:0;bottom:0;cursor:nw-resize}:root{--modal-mask-background: rgba(0,0,0,.5)}.x4popup{background-color:var(--fill-color);position:absolute;border:1px solid var(--border-color);overflow:hidden;z-index:1000;border-radius:var(--bradius)}.x4popup.popup-caption,.x4popup .popup-caption{cursor:move}.x4modal-mask{background-color:var(--modal-mask-background);position:absolute;inset:0;z-index:1000}.box,.vbox,.hbox,.x4menu .x4cmenuitem{position:relative}.hbox,.x4menu .x4cmenuitem{display:flex;flex-direction:row;align-items:center}.flex,.x4menu .x4cmenuitem #text{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.shadow-lg,.x4menu{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}:root{--menu-background: var( --background-primary );--menu-border: var( --border-hover );--menuitem-color: var( --text-ternary );--menuitem-background-active: var( --accent-background-active );--menuitem-color-active: var( --accent-color-active );--menuitem-background-hover: var( --accent-background-hover );--menuitem-color-hover: var( --accent-color-hover )}.x4menu{position:absolute;overflow-y:scroll;border-radius:var(--bradius);padding:8px 0;min-width:150px;background-color:var(--menu-background);border:1px solid var(--menu-border);max-height:calc(100vh - 32px)}.x4menu .x4cmenuitem{transition:background-color .3s,color .3s;align-items:center;color:var(--menuitem-color);padding:6px;gap:10px;cursor:pointer;transition:background-color .1s}.x4menu .x4cmenuitem #icon{width:16px;height:16px}.x4menu .x4cmenuitem.title{color:var(--text-primary);cursor:auto;margin-left:-16px;margin-top:-6px;font-weight:600}.x4menu .x4cmenuitem.popup:after{content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" fill="var(--color-gray-8)"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');width:6px}.x4menu .x4cmenuitem:hover:not(.title),.x4menu .x4cmenuitem.opened{background-color:var(--menuitem-background-hover);color:var(--menuitem-color-hover)}.x4menu .x4cmenuitem:active:not(.title){background-color:var(--menuitem-background-active);color:var(--menuitem-color-active)}.x4menu .x4cmenuitem[disabled]{color:var(--disabled-color-dark)!important}.x4menu .x4cmenuitem[disabled]:hover{background-color:var(--disabled-background)!important}.x4menu .x4cmenusep{padding-top:4px;border-bottom:1px solid var(--border);margin-bottom:4px}.box,.vbox,.hbox,.x4calendar .week .cell .text{position:relative}.hbox,.x4calendar .week .cell .text{display:flex;flex-direction:row;align-items:center}.flex,.x4calendar .week,.x4calendar .week .cell{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--calendar-btn-background: inherit;--calendar-btn-color: var( --text-secondary );--calendar-btn-color-hover: var( --text-primary );--calendar-week-color: var( --accent-background );--calendar-week-color-hover: var( --accent-background-hover );--calendard-day-background-hover: var( --accent-background-hover );--calendard-day-color-hover: var( --accent-color-hover );--calendar-sel-background: var( --accent-background );--calendar-sel-color: var( --accent-color );--calendar-today-background: var( --alert-background );--calendar-today-color: var( --alert-color );--calendar-today-border: var( --accent-background );--calendar-header-color: var( --text-primary );--calendar-out-color: var( --disabled-color-dark )}.x4calendar{border:1px solid var(--border);padding:4px}.x4calendar .month-sel{height:2em;align-items:center;padding-left:2em;margin-bottom:8px}.x4calendar .month-sel .month{padding-right:4px}.x4calendar .month-sel .year,.x4calendar .month-sel .month{cursor:pointer}.x4calendar .month-sel .month:hover,.x4calendar .month-sel .year:hover{text-decoration:underline}.x4calendar .month-sel .x4label{font-weight:700}.x4calendar .month-sel .x4button{height:auto;background-color:var(--calendar-btn-background);color:var(--calendar-btn-color)}.x4calendar .month-sel .x4button:hover{color:var(--calendar-btn-color-hover)}.x4calendar .week{align-items:center;padding:2px}.x4calendar .week .cell{min-width:28px;min-height:28px;color:var(--gray-900);text-align:center}.x4calendar .week .cell .text{transition:background-color .3s,color .3s;justify-content:center;border:1px solid transparent;margin:auto;border-radius:14px;width:28px;height:28px}.x4calendar .week .today .text{font-weight:700;background-color:var(--calendar-today-background);color:var(--calendar-today-color)}.x4calendar .week .selection .text{background-color:var(--calendar-sel-background);color:var(--calendar-sel-color)}.x4calendar .week .weeknum{width:2em;color:var(--calendar-week-color);font-size:70%}.x4calendar .week:hover .weeknum{font-weight:700}.x4calendar .week .day{cursor:pointer}.x4calendar .week .out{color:var(--calendar-out-color);font-size:80%}.x4calendar .week .day:hover .text{background-color:var(--calendard-day-background-hover);color:var(--calendard-day-color-hover)}.x4calendar .header .cell{color:var(--calendar-header-color);height:1.5em;justify-content:center}.x4calendar .header:hover{background-color:inherit}:root{--input-sel-background: var( --accent-background );--input-sel-color: var( --accent-color );--input-placeholder: var( --disabled-background );--input-error: var( --alert-background )}input.x4input{font:inherit;outline:none;border:none}input.x4input::selection{background-color:var(--input-sel-background);color:var(--input-sel-color)}input.x4input[type=text],input.x4input[type=password],input.x4input[type=email]{padding:8px 4px}input.x4input[type=checkbox]:checked,input.x4input[type=radio]:checked{accent-color:var(--color-80)}input.x4input[type=range]{accent-color:var(--color-60)}input.x4input::placeholder{color:var(--input-placeholder);font-style:italic;font-weight:90%}input.x4input[type=password]{font-weight:700}input.x4input:disabled{background-color:transparent}input.x4input:invalid{color:var(--input-error)}.box,.vbox,.hbox,.x4checkbox{position:relative}.hbox,.x4checkbox{display:flex;flex-direction:row;align-items:center}:root{--checkbox-background-check: var( --accent-background );--checkbox-background-check-hover: var( --accent-background-hover );--checkbox-background-disabled: var( --disabled-color );--checkbox-background-disabled-check: var( --disabled-background );--checkbox-color-disabled: var( --disabled-background );--checkbox-check-border: var( --border );--checkbox-check-border-hover: var( --border-hover )}.x4checkbox{display:flex;flex-direction:row;align-items:center;margin:5px;padding:4px;gap:4px;cursor:pointer}.x4checkbox .inner{height:1rem;width:1rem;color:#fff;position:relative;order:1}.x4checkbox .inner input{appearance:none;outline:none;cursor:pointer;display:block;margin:0;padding:0;left:0;top:0;width:100%;height:100%;transition:opacity .1s ease}.x4checkbox .inner input:checked{background-color:var(--checkbox-background-check)}.x4checkbox .inner input:checked:hover{background-color:var(--checkbox-background-check-hover)}.x4checkbox .inner input:not(:checked){border:1px solid var(--checkbox-check-border)}.x4checkbox .inner input:not(:checked):hover{border:1px solid var(--checkbox-check-border-hover)}.x4checkbox .inner svg{margin:auto;pointer-events:none;position:absolute;opacity:0;inset:0;width:100%;height:50%}.x4checkbox .inner:has(input:checked) input{opacity:1}.x4checkbox .inner:has(input:checked) svg{opacity:1}.x4checkbox:focus-within label #text{text-decoration:underline}.x4checkbox[disabled],.x4checkbox[disabled] *{cursor:not-allowed}.x4checkbox[disabled] label{pointer-events:none;color:var(--checkbox-color-disabled)}.x4checkbox[disabled] .inner{pointer-events:none}.x4checkbox[disabled] .inner input{background-color:var(--checkbox-background-disabled)}.x4checkbox[disabled] .inner input:checked{background-color:var(--checkbox-background-disabled-check)}.x4checkbox label{text-align:right;cursor:inherit;order:2}.x4checkbox.left #label{order:0;text-align:left}:root{--colorinput-btn-background: inherit;--colorinput-btn-color: var( --text-secondary );--colorinput-btn-color-hover: var( --text-primary )}.x4colorinput{margin:5px;border-bottom:1px solid var(--border);outline:none}.x4colorinput:focus-within{border-bottom-color:var(--border-focus)}.x4colorinput .swatch{margin:4px;width:1rem;height:1rem}.x4colorinput input{outline:none;margin:0;height:100%;flex-grow:1}.x4colorinput .x4button{margin:0;padding:0;outline:none;background-color:var(--combobox-btn-background);color:var(--colorinput-btn-color)}.x4colorinput .x4button #icon{color:var(--colorinput-btn-color)}.x4colorinput .x4button:hover,.x4colorinput .x4button:hover #icon{color:var(--colorinput-btn-color-hover)}.x4colorpicker{width:240px;gap:4px;touch-action:none;outline:none;margin:8px}.x4colorpicker .overlay{position:absolute;inset:0}.x4colorpicker .x4saturation{width:100%;height:140px;position:relative}.x4colorpicker .x4saturation .thumb{width:12px;height:12px;border:2px solid white;border-radius:8px;box-shadow:0 0 5px #00000080;position:absolute;transform:translate(-50%,50%)}.x4colorpicker .body{gap:4px}.x4colorpicker .body>.x4vbox{gap:4px}.x4colorpicker .body .x4hueslider{position:relative;height:16px;overflow:hidden;background-image:linear-gradient(to right,red,#ff0,#0f0,#00ffd4,#00f,#f0f,red);border:1px solid var(--color-gray-3)}.x4colorpicker .body .x4hueslider .thumb{width:12px;height:12px;border:2px solid white;border-radius:8px;box-shadow:0 0 5px #00000080;position:absolute;transform:translate(-50%,-50%);top:50%}.x4colorpicker .body .x4alphaslider{position:relative;height:16px;overflow:hidden}.x4colorpicker .body .x4alphaslider .checkers{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 20px,20px -20px,-20px 0}.x4colorpicker .body .x4alphaslider .color{background-image:linear-gradient(90deg,transparent,rgb(0,178,255))}.x4colorpicker .body .x4alphaslider .thumb{width:12px;height:12px;border:2px solid white;border-radius:8px;box-shadow:0 0 5px #00000080;position:absolute;transform:translate(-50%,-50%);top:50%}.x4colorpicker .body .swatch{width:36px;height:36px}.x4colorpicker .body .swatch .checkers{border-radius:8px;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 20px,20px -20px,-20px 0}.x4colorpicker .body .swatch .color{border-radius:8px;background-image:linear-gradient(90deg,transparent,rgb(0,178,255))}.flex,.x4scrollview{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.x4viewport{width:100%}.box,.vbox,.x4listbox,.hbox{position:relative}.vbox,.x4listbox{display:flex;flex-direction:column}.flex,.x4listbox>.body .x4viewport .x4item{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--listbox-item-background-sel: var( --accent-background );--listbox-item-color-sel: var( --accent-color );--listbox-item-color-sel-disabled: var( --disabled-background );--listbox-item-color: var( --text-primary );--listbox-item-color-disabled: var( --disabled-color-dark );--listbox-item-background-hover: var( --background-secondary );--listbox-border: var( --border );--listbox-border-focus: var( --accent-background-focus )}.x4listbox{margin:5px;border:1px solid var(--listbox-border);outline:none}.x4listbox:focus-within{border-color:var(--listbox-border-focus)}.x4listbox>.x4header{border-bottom:1px solid var(--color-gray-3)}.x4listbox>.body{width:100%;flex-basis:0;overflow-y:auto;overflow-x:auto;outline:none}.x4listbox>.body .x4viewport{display:table}.x4listbox>.body .x4viewport .x4item{padding:4px;background-color:transparent;color:var(--color-gray-9)}.x4listbox>.body .x4viewport .x4item>.x4label{color:inherit;padding:2px 6px}.x4listbox>.body .x4viewport .x4item:hover{background-color:var(--listbox-item-background-hover)}.x4listbox>.body .x4viewport .x4item.selected{background-color:var(--listbox-item-background-sel);color:var(--listbox-item-color-sel)}.x4listbox[disabled]{cursor:not-allowed;border-color:var(--border);color:var(--listbox-item-color-disabled)}.x4listbox[disabled]>.body .x4viewport{pointer-events:none}.x4listbox[disabled]>.body .x4viewport .x4item.selected{background-color:var(--listbox-item-color-sel-disabled)}.box,.vbox,.hbox,.x4dropdown,.x4combobox{position:relative}.hbox,.x4dropdown,.x4combobox{display:flex;flex-direction:row;align-items:center}.flex,.x4dropdown .x4listbox,.x4combobox>#edit,.x4combobox>#edit .x4input{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.shadow-xl,.x4dropdown{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}:root{--dropdown-border: var( --border-hover );--dropdown-background: var( --background-primary );--combobox-border: var( --border );--combobox-border-focus: var( --border-focus );--combobox-btn-background: inherit;--combobox-btn-color: var( --text-secondary );--combobox-btn-color-hover: var( --text-primary )}.x4dropdown{max-height:250px;position:absolute;background-color:var(--dropdown-background);border:1px solid var(--dropdown-border)}.x4dropdown .x4listbox{border:none;margin:0;width:100%;height:200px}.x4combobox{margin:5px}.x4combobox>#label{padding:0 6px;border-bottom:1px solid transparent}.x4combobox>#label>.x4label{height:100%;padding:0;font-weight:500;gap:0}.x4combobox>#label:after{content:":"}.x4combobox>#edit{border-bottom:1px solid var(--combobox-border)}.x4combobox>#edit .x4input[readonly]{cursor:pointer}.x4combobox>#edit .x4button{margin:0;padding:0;outline:none;background-color:var(--combobox-btn-background);color:var(--combobox-btn-color)}.x4combobox>#edit .x4button #icon{color:var(--combobox-btn-color)}.x4combobox>#edit .x4button:hover,.x4combobox>#edit .x4button:hover #icon{color:var(--combobox-btn-color-hover)}.x4combobox[disabled],.x4combobox[disabled] *{cursor:not-allowed}.x4combobox[disabled] #label .x4label{color:var(--disabled-color-dark);pointer-events:none}.x4combobox[required] .x4label:before{content:"*";color:var(--color-90)}.box,.vbox,.x4dialog,.hbox{position:relative}.vbox,.x4dialog{display:flex;flex-direction:column}.flex,.x4dialog>.caption>#title{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.shadow-xl,.x4dialog{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}:root{--color-dialog-caption: var( --color-primary-a80 );--color-dialog-caption-text: var( --color-primary-a0 )}.x4dialog{position:absolute;background-color:#fff;border:1px solid var(--border-dark);min-width:min-content;min-height:min-content}.x4dialog>.caption{padding:8px;background-color:var(--color-dialog-caption)}.x4dialog>.caption>#title{color:var(--color-dialog-caption-text);font-weight:700}.x4dialog>.caption>#closebox{margin:0;padding:4px}.x4dialog>.form{min-height:128px;min-width:450px}.x4dialog>#btnbar{border-top:1px solid var(--color-separation);padding:6px 16px;justify-content:end;gap:8px}.x4dialog>#btnbar>.x4button{min-width:80px}.x4dialog>#btnbar>.x4button .x-simple-label{text-align:center}.box,.vbox,.x4form,.hbox{position:relative}.vbox,.x4form{display:flex;flex-direction:column}.flex,.x4form{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--form--background: var( --background-primary )}.x4form{padding:16px;background-color:var(--color-form)}.flex,.x4header{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--header-background-hover: rgba(100,100,100,.1);--header-sizer-hover: var( --border-hover )}.x4header{width:100%;overflow:hidden;min-height:2em;border-bottom:1px solid var(--border)}.x4header .cell{border-bottom:1px solid transparent;overflow:hidden;min-width:3rem;transition:border-color .5s ease;padding:4px}.x4header .cell span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x4header .cell:hover{background-color:var(--header-background-hover)}.x4header .cell .x4csizer:hover{border-right:1px solid var(--header-sizer-hover)}.x-image{position:relative;background:none}:root{--msgbox-caption-background: var( --alert-background );--msgbox-caption-color: var( --alert-color );--msgbox-icon-color: var( --alert-background )}.x4messagebox>.caption{background-color:var(--msgbox-caption-background)}.x4messagebox>.caption>#title{color:var(--msgbox-caption-color)}.x4messagebox .x4form .x4icon{color:var(--msgbox-icon-color);height:96px}.x4messagebox .x4form .x4label{padding:16px}.shadow-xl,.x4notification{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}:root{--notification-border: var( --border );--notification-icon-default: var( --accent-background );--notification-icon-success: var( --success-background );--notification-icon-danger: var( --alert-background )}.x4notification{padding:8px;border:1px solid var(--notification-border);border-left:3px solid var(--accent-background)}.x4notification>.x4hbox{gap:8px}.x4notification .x4icon{width:24px;color:var(--notification-icon-default)}.x4notification .body .title{font-weight:700;padding:6px 6px 3px}.x4notification .body .text{padding:3px 6px 6px;color:var(--color-gray-7)}.x4notification.success{border-left-color:var(--notification-icon-success)}.x4notification.success .x4icon{color:var(--notification-icon-success)}.x4notification.danger{border-left-color:var(--notification-icon-danger)}.x4notification.danger .x4icon{color:var(--notification-icon-danger)}.x4notification .x4button{height:24px;color:var(--color-gray-7);border:none}.rel-fit,.x4panel>.body{position:relative;inset:0}:root{--panel-border: var( --border );--panel-title-color: var( --border )}.x4panel{border:1px solid var(--panel-border);border-radius:4px;margin:5px;padding:8px;position:relative}.x4panel>legend{padding:0 5px;position:absolute;left:4px;top:-.7em;background-color:#fff;font-weight:700;color:var(--color-gray-9)}.x4panel>.body{overflow:hidden;justify-content:start;padding:8px}:root{--progress-background: var( --border );--progress-color: var( --accent-background )}.x4progress{background-color:var(--progress-background);position:relative;height:6px;margin:0 5px;border-radius:3px}.x4progress .bar{position:absolute;left:0;top:0;bottom:0;width:0;background-color:var(--progress-color);border-radius:3px;transition:width ease .2s}.x4progress.indeterm .bar{background-image:linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);background-size:20px 20px;animation:slide 1s linear infinite}@keyframes slide{0%{background-position:0 0}to{background-position:2.5rem 0}}:root{--rating: var( --border );--rating-hover: var( --border-hover );--rating-checked: var( --accent-background )}.x4rating{gap:2px}.x4rating .item{width:16px;height:16px;color:var(--rating)}.x4rating .item:hover{color:var(--rating-hover)}.x4rating .item.checked{color:var(--rating-checked)}:root{--slider-track: var( --border );--slider-thumb-background: var( --accent-background );--slider-thumb-border: var( --accent-background );--slider-thumb-border-focus: var( --border-focus )}.x4slider{height:28px;outline:none;padding:10px 12px;touch-action:none;margin:5px 0}.x4slider .track{background-color:var(--slider-track);width:100%;position:relative;top:50%;height:3px}.x4slider .bar{position:absolute;width:61%;height:3px;background-color:var(--color-60)}.x4slider .thumb{position:absolute;left:61%;outline:none;background-color:var(--slider-thumb-background);border:3px solid var(--slider-thumb-border);border-radius:8px;top:50%;width:16px;height:16px;transform:translate(-50%,-50%);cursor:pointer}.x4slider:focus .thumb{outline-offset:3px;outline-color:var(--slider-thumb-border-focus);outline-style:solid;outline-width:1px}:root{--switch-border: var( --border );--switch-background: #eee;--switch-background-disabled: var( --disabled-background );--switch-checked: var( --accent-background )}.x4switch{display:flex;flex-direction:row;align-items:center;position:relative;gap:4px;margin-left:5px;padding:4px;cursor:pointer}.x4switch label{cursor:pointer}.x4switch:focus-within .x4label span{text-decoration:underline}.x4switch .switch{width:2.2rem;height:18px;position:relative}.x4switch .switch input{position:absolute;width:100%;height:100%;appearance:none;padding:0;margin:0;left:0;top:0;cursor:pointer}.x4switch .switch .track{position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;border:1px solid var(--switch-border);background-color:var(--switch-background);border-radius:9px;transition:background-color ease .2s}.x4switch .switch .thumb{position:absolute;pointer-events:none;left:.05rem;top:1px;width:1rem;height:1rem;border-radius:8px;background-color:#fff;box-shadow:0 0 2px #00000080;transition:left ease .2s}.x4switch:has(input:checked) .switch .thumb{left:1.15rem}.x4switch:has(input:checked) .switch .track{background-color:var(--switch-checked)}.x4switch[disabled],.x4switch[disabled] *{cursor:not-allowed}.x4switch[disabled] input{pointer-events:none}.x4switch[disabled] label{pointer-events:none;color:var(--checkbox-color-disabled)}.x4switch[disabled] .switch .track,.x4switch[disabled].x4switch:has(input:checked) .switch .track{background-color:var(--switch-background-disabled)}:root{--tab-border-selected: var( --accent-background );--tab-border-hover: var( --accent-background-hover )}.x4tabs .x4ctablist{gap:4px;padding:5px 5px 0}.x4tabs .x4ctablist .x4button{border:none;border-bottom:2px solid transparent;color:var(--color-gray-7);margin:0;outline:none;transition:border-color .2s ease}.x4tabs .x4ctablist .x4button.selected{border-bottom-color:var(--tab-border-selected);font-weight:700;color:var(--color-gray-9)}.x4tabs .x4ctablist .x4button:hover{background-color:unset;color:#000;border-bottom-color:var(--tab-border-hover)}.x4tabs .x4ctablist .x4button:focus{color:var(--color-60)}.x4tabs>.body{padding:8px;border:1px solid var(--border)}.flex,.x4textarea textarea{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--textarea-border: var( --border );--textarea-border-focus: var( --border-focus )}.x4textarea{margin:5px}.x4textarea .x4label{gap:0;padding:4px 0}.x4textarea .x4label:after{content:":"}.x4textarea textarea{border:1px solid var(--color-gray-3);padding:4px;outline:none;font:inherit;border:1px solid var(--textarea-border)}.x4textarea textarea:focus{border:1px solid var(--textarea-border-focus)}.x4textarea textarea::selection{background-color:var(--color-90);color:#fff}.x4textarea textarea[resize=false]{resize:none}.box,.vbox,.hbox,.x4textedit,.x4textedit>#label>.x4label,.x4textedit>#edit{position:relative}.hbox,.x4textedit,.x4textedit>#label>.x4label,.x4textedit>#edit{display:flex;flex-direction:row;align-items:center}.flex,.x4textedit>#edit,.x4textedit>#edit .x4input{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--textedit-border: var( --border );--textedit-border-focus: var( --border-focus );--textedit-required: var( --alert-background );--textedit-btn-background: inherit;--textedit-btn-color: var( --text-secondary );--textedit-btn-color-hover: var( --text-primary );--textedit-color-disabled: var( --disabled-background )}.x4textedit{margin:5px;gap:6px}.x4textedit>#label{border-bottom:1px solid transparent}.x4textedit>#label>.x4label{height:100%;padding:0;font-weight:500;gap:0}.x4textedit>#label:after{content:":"}.x4textedit>#edit{border-bottom:1px solid var(--textedit-border)}.x4textedit>#edit .x4input{outline:none;margin:0}.x4textedit>#edit .x4button{margin:0;padding:0;background-color:var(--textedit-btn-background);color:var(--textedit-btn-color)}.x4textedit>#edit .x4button #icon{color:var(--textedit-btn-color)}.x4textedit>#edit .x4button:hover,.x4textedit>#edit .x4button:hover #icon{color:var(--textedit-btn-color-hover)}.x4textedit>#edit .x4button:focus{border-bottom-color:var(--textedit-border-focus)}.x4textedit:focus-within #edit{border-bottom-color:var(--textedit-border-focus)}.x4textedit[required]>#label>.x4label:before{content:"*";font-weight:700;color:var(--textedit-required)}.x4textedit[disabled],.x4textedit[disabled] *{cursor:not-allowed}.x4textedit[disabled] #label>.x4label #text,.x4textedit[disabled] #label>.x4label:before,.x4textedit[disabled] #label:after{color:var(--textedit-color-disabled)}.x4textedit[disabled] #edit input{color:var(--textedit-color-disabled);background-color:unset}.box,.vbox,.hbox{position:relative}.flex{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.shadow-lg,.x4tooltip{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}:root{--tooltip-background: var( --color-primary-a70 );--tooltip-color: var( --color-primary-a0 );--tooltip-border: var( --border-dark )}.x4tooltip{display:flex;flex-direction:row;border:none;font-size:90%;position:absolute}.x4tooltip .x4icon{width:1.6em;height:100%;padding:2px 4px;background-color:var(--tooltip-background);color:var(--tooltip-color);border:1px solid var(--tooltip-border)}.x4tooltip .x4icon svg{max-height:100%}.x4tooltip #text{background-color:var(--tooltip-background);color:var(--tooltip-color);padding:4px}:root{--treeitem-backgound: var( );--treeitem-color: var( );--treeitem-backgound-hover: var( --background-secondary );--treeitem-color-hover: var( );--treeitem-background-sel: var( --accent-background );--treeitem-color-sel: var( --accent-color );--treeitem-backgound-active: var( --accent-background-active);--treeitem-color-active: var( --accent-color-active )}.x4treeview{overflow-y:auto;height:100%;margin:5px;outline:none;border:1px solid var(--border)}.x4treeview:focus{border:1px solid var(--border-focus)}.x4treeview .x4ctreeviewitem>.label{gap:4px;padding:4px}.x4treeview .x4ctreeviewitem>.label .x4label,.x4treeview .x4ctreeviewitem>.label .x4icon{color:inherit}.x4treeview .x4ctreeviewitem>.label .x4icon{width:16px}.x4treeview .x4ctreeviewitem>.label:hover{background-color:var(--treeitem-backgound-hover)}.x4treeview .x4ctreeviewitem>.label.selected{background-color:var(--treeitem-background-sel);color:var(--treeitem-color-sel)}.x4treeview .x4ctreeviewitem>.label:active{background-color:var(--accent-background-active);color:var(--accent-color-active)}.x4treeview .x4ctreeviewitem>.body:not(:first-child){padding-left:24px}.x4treeview .x4ctreeviewitem>.body{transition:opacity .5s ease}.x4treeview .x4ctreeviewitem.folder>.label{display:flex;flex-direction:row;align-items:center}.x4treeview .x4ctreeviewitem.folder>.label>.x-icon{transform:rotate(0);transition:transform .2s ease;width:16px;height:16px;cursor:pointer}.x4treeview .x4ctreeviewitem.folder>.body{overflow:hidden}.x4treeview .x4ctreeviewitem.folder:not(.open)>.body{height:0;opacity:0}.x4treeview .x4ctreeviewitem.folder:not(.open)>.label>.x4icon{transform:rotate(-90deg)}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--font-name: "montserrat";--font-size: 14px}*{user-select:none;box-sizing:border-box}body{font-family:var(--font-name);font-size:var(--font-size)}.x4hidden{display:none!important}:root{--color-primary-a0: #ffffff;--color-primary-a10: #e0eaf7;--color-primary-a20: #c0d6ef;--color-primary-a30: #a0c2e7;--color-primary-a40: #7dafde;--color-primary-a50: #569cd6;--color-primary-a55: rgb(82.0357142857, 135.8928571429, 181.4642857143);--color-primary-a60: #477ba7;--color-primary-a70: #375b7a;--color-primary-a80: #283d51;--color-primary-a90: #18212a;--color-primary-a100: #000000;--color-danger-a50: #c01010;--color-danger-a60: rgb(144.9230769231, 12.0769230769, 12.0769230769);--color-success-a50: #10c01f;--color-success-a60: rgb(12.0769230769, 144.9230769231, 23.3990384615)}:root{--background-primary: var(--color-primary-a0);--background-secondary: var(--color-primary-a10);--text-primary: var(--color-primary-a100);--text-secondary: #999;--text-ternary: #666;--disabled-background: #ccc;--disabled-color: white;--disabled-color-dark: #aaa;--accent-background: var(--color-primary-a60);--accent-background-hover: var(--color-primary-a55);--accent-background-focus: var(--color-primary-a70);--accent-background-active: var(--color-primary-a80);--accent-color: var(--color-primary-a0);--accent-color-hover: var(--color-primary-a0);--accent-color-focus: var(--color-primary-a0);--accent-color-active: var(--color-primary-a0);--border: #e1e1e1;--border-hover: #c2c2c2;--border-focus: var( --accent-background );--alert-background: var( --color-danger-a50 );--alert-background-active: var( --color-danger-a60 );--alert-color: var( --color-primary-a0 );--success-background: var( --color-success-a50 );--success-background-active: var( --color-success-a60 );--success-color: var( --color-success-a0 )}.box,.x4box,.vbox,.hbox{position:relative}.hbox{display:flex;flex-direction:row;align-items:center}.vbox{display:flex;flex-direction:column}.fit{position:absolute;inset:0}.rel-fit{position:relative;inset:0}.flex,.x4flex{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.shadow-xl{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x4js",
-	"version": "2.0.11",
+	"version": "2.0.12",
 	"description": "X4 framework",
 	"author": "etienne cochard",
 	"main": "src/x4.ts",

package/src/x4.ts

@@ -57,4 +57,6 @@ export * from "./components/textarea/textarea"
 export * from "./components/textedit/textedit"
 export * from "./components/tooltips/tooltips"
 export * from "./components/treeview/treeview"
-export * from "./components/viewport/viewport"
+export * from "./components/viewport/viewport"
+
+import "./x4.scss"