x4js 1.4.9 → 1.4.10

package/x4.css

@@ -1,1572 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|  
-*  /__/ \__\   |_|
-*        
-* @file x4.less
-* @author Etienne Cochard 
-*
-* Copyright (c) 2019-2022 R-libre ingenierie
-*
-* Permission is hereby granted, free of charge, to any person obtaining a copy 
-* of this software and associated documentation files (the "Software"), to deal 
-* in the Software without restriction, including without limitation the rights 
-* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
-* of the Software, and to permit persons to whom the Software is furnished to do so, 
-* subject to the following conditions:
-* The above copyright notice and this permission notice shall be included in all copies
-* or substantial portions of the Software.
-*
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
-* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
-* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
-* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
-* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-**/
-:root {
-  --x4-font: "Inter";
-  --x4-font-size: 13px;
-  --x4-base-color: #266888;
-  --x4-selection-color: #2458B3;
-  --x4-hover-color: rgba(36, 88, 179, 0.9);
-  --x4-mask-color: rgba(36, 88, 179, 0.6);
-  --x4-focus-color: #2458B3;
-  --x4-error-color: #b92a09;
-  --x4-success-color: #0A6640;
-  --x4-form-color: white;
-  --x4-tip-background: rgba(0, 0, 0, 0.5);
-  --x4-button-color: white;
-  --x4-button-text-color: #363636;
-  --x4-scrollbar-width: 6px;
-  --x4-scrollbar-background: white;
-  --x4-scrollbar-thumb: grey;
-  --x4-sizer-size: 4px;
-  --x4-default-border-color: rgba(0, 0, 0, 0.1);
-  --x4-icon-font-family: "fonteawesome";
-  --x4-icon-circle-exclamation: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z"/></svg>';
-  --x4-icon-chevron-right: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"/></svg>';
-  --x4-icon-arrow-down: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><path d="M9.375 329.4c12.51-12.51 32.76-12.49 45.25 0L128 402.8V32c0-17.69 14.31-32 32-32s32 14.31 32 32v370.8l73.38-73.38c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-128 128c-12.5 12.5-32.75 12.5-45.25 0l-128-128C-3.125 362.1-3.125 341.9 9.375 329.4z"/></svg>';
-  --x4-icon-arrow-up: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><path d="M310.6 182.6c-12.51 12.51-32.76 12.49-45.25 0L192 109.3V480c0 17.69-14.31 32-32 32s-32-14.31-32-32V109.3L54.63 182.6c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l128-128c12.5-12.5 32.75-12.5 45.25 0l128 128C323.1 149.9 323.1 170.1 310.6 182.6z"/></svg>';
-  --x4-icon-exclamation: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512" fill="currentColor"><path d="M64 352c17.69 0 32-14.32 32-31.1V64.01c0-17.67-14.31-32.01-32-32.01S32 46.34 32 64.01v255.1C32 337.7 46.31 352 64 352zM64 400c-22.09 0-40 17.91-40 40s17.91 39.1 40 39.1s40-17.9 40-39.1S86.09 400 64 400z"/></svg>';
-  --x4-icon-window-minimize: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M0 448C0 430.3 14.33 416 32 416H480C497.7 416 512 430.3 512 448C512 465.7 497.7 480 480 480H32C14.33 480 0 465.7 0 448z"/></svg>';
-  --x4-icon-window-maximize: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M448 32C483.3 32 512 60.65 512 96V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H448zM96 96C78.33 96 64 110.3 64 128C64 145.7 78.33 160 96 160H416C433.7 160 448 145.7 448 128C448 110.3 433.7 96 416 96H96z"/></svg>';
-  --x4-icon-window-restore: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M432 64H208C199.2 64 192 71.16 192 80V96H128V80C128 35.82 163.8 0 208 0H432C476.2 0 512 35.82 512 80V304C512 348.2 476.2 384 432 384H416V320H432C440.8 320 448 312.8 448 304V80C448 71.16 440.8 64 432 64zM0 192C0 156.7 28.65 128 64 128H320C355.3 128 384 156.7 384 192V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V192zM96 256H288C305.7 256 320 241.7 320 224C320 206.3 305.7 192 288 192H96C78.33 192 64 206.3 64 224C64 241.7 78.33 256 96 256z"/></svg>';
-  --x4-icon-rectangle-times: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M448 32C483.3 32 512 60.65 512 96V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H448zM175 208.1L222.1 255.1L175 303C165.7 312.4 165.7 327.6 175 336.1C184.4 346.3 199.6 346.3 208.1 336.1L255.1 289.9L303 336.1C312.4 346.3 327.6 346.3 336.1 336.1C346.3 327.6 346.3 312.4 336.1 303L289.9 255.1L336.1 208.1C346.3 199.6 346.3 184.4 336.1 175C327.6 165.7 312.4 165.7 303 175L255.1 222.1L208.1 175C199.6 165.7 184.4 165.7 175 175C165.7 184.4 165.7 199.6 175 208.1V208.1z"/></svg>';
-  --x4-icon-xmark: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>';
-  --x4-icon-angle-down: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor"><path d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/></svg>';
-}
-.x4-root-element {
-  padding: 0;
-  margin: 0;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  -webkit-font-smoothing: subpixel-antialiased;
-  text-rendering: geometricprecision;
-  font-family: var(--x4-font);
-  font-size: var(--x4-font-size);
-}
-input,
-textarea {
-  font-family: inherit;
-  font-size: inherit;
-}
-textarea {
-  resize: none;
-  outline: none;
-  border: 1px solid transparent;
-}
-textarea:focus {
-  border: 1px solid var(--x4-selection-color);
-}
-textarea::selection {
-  background-color: var(--x4-selection-color);
-  color: #fff;
-}
-.z-float-4 {
-  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
-}
-.z-float-6 {
-  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.5);
-}
-.z-float-8 {
-  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.6);
-}
-.z-float-15 {
-  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.6);
-}
-.x-comp {
-  user-select: none;
-  box-sizing: border-box;
-  position: relative;
-}
-.x-flex {
-  min-height: 0;
-  min-width: 0;
-  flex: 1;
-  flex-basis: 0;
-}
-.x-fit {
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-}
-.x-hfit {
-  position: relative;
-  left: 0;
-  right: 0;
-}
-.x-vfit {
-  position: relative;
-  top: 0;
-  bottom: 0;
-}
-.x-hlayout {
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-}
-.x-hlayout.center {
-  align-items: center;
-}
-.x-grid-layout {
-  display: grid;
-  justify-content: space-evenly;
-}
-.x-vlayout {
-  display: flex;
-  flex-direction: column;
-}
-.x-label {
-  color: inherit;
-}
-.x-label.right {
-  text-align: right;
-}
-.x-label.center {
-  text-align: center;
-}
-.x-sizer-overlay {
-  position: absolute;
-}
-.x-sizer-overlay.top {
-  width: 100%;
-  height: var(--x4-sizer-size);
-  cursor: n-resize;
-  left: 0;
-  top: 0;
-}
-.x-sizer-overlay.bottom {
-  width: 100%;
-  height: var(--x4-sizer-size);
-  cursor: n-resize;
-  left: 0;
-  bottom: 0;
-}
-.x-sizer-overlay.right {
-  top: 0;
-  right: 0;
-  width: var(--x4-sizer-size);
-  height: 100%;
-  cursor: e-resize;
-}
-.x-sizer-overlay.left {
-  top: 0;
-  left: 0;
-  width: var(--x4-sizer-size);
-  height: 100%;
-  cursor: e-resize;
-}
-.x-sizer-bottom {
-  padding-bottom: var(--x4-sizer-size);
-}
-.x-icon {
-  display: inline-flex;
-  align-items: center;
-  text-align: center;
-  flex-direction: column;
-}
-.x-icon:before {
-  font-family: var(--x4-icon-font-family);
-}
-.x-icon.x-svg-icon,
-.x-icon svg {
-  width: 1em;
-  height: 1em;
-}
-.x-base-button {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  outline: none;
-  cursor: pointer;
-  height: 2rem;
-  padding: 8px;
-  overflow: hidden;
-  border: 1px solid var(--x4-default-border-color);
-  background-color: var(--x4-button-color);
-  color: var(--x4-button-text-color);
-}
-.x-base-button .x-icon {
-  margin: 0 4px;
-  color: inherit;
-}
-.x-base-button:focus {
-  border-color: var(--x4-focus-color);
-  background-color: var(--x4-focus-color);
-  color: white;
-}
-.x-base-button.x-disable {
-  color: gray;
-}
-.x-base-button.x-disable:after {
-  content: "";
-  background-color: rgba(255, 255, 255, 0.6);
-  left: 0;
-  right: 0;
-  display: block;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  cursor: default;
-}
-.x-image {
-  display: flex;
-  overflow: hidden;
-}
-.x-image img {
-  width: 100%;
-  height: 100%;
-}
-.x-video {
-  display: flex;
-  overflow: hidden;
-}
-.x-video video {
-  width: 100%;
-  height: 100%;
-}
-.x-image-upload {
-  width: 96px;
-  height: 96px;
-  margin: 24px;
-}
-.x-image-upload img {
-  width: 96px;
-  height: 96px;
-  background-color: rgba(255, 255, 255, 0.7);
-  border-radius: 50%;
-}
-.x-canvas {
-  overflow: hidden;
-}
-.x-canvas canvas {
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-}
-::-webkit-scrollbar {
-  width: var(--x4-scrollbar-width);
-  height: var(--x4-scrollbar-width);
-  background-color: var(--x4-scrollbar-background);
-  box-sizing: border-box;
-}
-::-webkit-scrollbar-thumb {
-  background-color: var(--x4-scrollbar-thumb);
-}
-.x-circular-chart {
-  background-color: white;
-  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.5);
-}
-.x-circular-chart .head {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  padding: 2px;
-  height: 37px;
-  white-space: nowrap;
-}
-.x-circular-chart .head .x-label {
-  color: white;
-  padding: 8px;
-}
-.x-circular-chart .head .x-button {
-  height: 32px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-.x-circular-chart .head .close-box {
-  color: white;
-  background-color: transparent;
-  border: none;
-  font-size: 28px;
-  padding-right: 0;
-}
-.x-text-edit,
-.x-combo-box {
-  display: flex;
-  align-items: center;
-  width: min-content;
-  min-height: 32px;
-  padding: 0;
-  margin: 0;
-  margin-bottom: 4px;
-}
-.x-text-edit .x-hlayout,
-.x-combo-box .x-hlayout,
-.x-text-edit .x-vlayout,
-.x-combo-box .x-vlayout {
-  overflow: visible;
-}
-.x-text-edit > .x-label,
-.x-combo-box > .x-label {
-  padding: 4px;
-  color: rgba(0, 0, 0, 0.8);
-  margin-top: 1px;
-  line-height: 1.3em;
-  min-height: 2em;
-}
-.x-text-edit > .x-label:after,
-.x-combo-box > .x-label:after {
-  content: ':';
-}
-.x-text-edit input,
-.x-combo-box input,
-.x-text-edit .x-fake-input,
-.x-combo-box .x-fake-input {
-  height: 2em;
-  font-size: inherit;
-  outline: none;
-  border: none;
-  padding: 4px;
-  color: rgba(0, 0, 0, 0.9);
-  background-color: rgba(255, 255, 255, 0.25);
-  border-bottom: 1px solid transparent;
-  margin-top: 1px;
-  line-height: 1.3em;
-}
-.x-text-edit input::placeholder,
-.x-combo-box input::placeholder,
-.x-text-edit .x-fake-input::placeholder,
-.x-combo-box .x-fake-input::placeholder {
-  color: rgba(255, 255, 255, 0.5);
-}
-.x-text-edit input::selection,
-.x-combo-box input::selection,
-.x-text-edit .x-fake-input::selection,
-.x-combo-box .x-fake-input::selection {
-  background-color: var(--x4-selection-color);
-  color: #fff;
-}
-.x-text-edit input:focus,
-.x-combo-box input:focus,
-.x-text-edit .x-fake-input:focus,
-.x-combo-box .x-fake-input:focus {
-  border-bottom-color: var(--x4-focus-color);
-}
-.x-text-edit:focus-within > .x-label,
-.x-combo-box:focus-within > .x-label {
-  color: var(--x4-focus-color);
-}
-.x-text-edit .x-button.gadget,
-.x-combo-box .x-button.gadget {
-  background-color: transparent;
-  font-size: var(--x4-font-size);
-  color: black;
-  border: none;
-  margin: 0;
-  padding: 0;
-  height: 2em;
-  margin-top: 1px;
-}
-.x-text-edit .x-button.gadget:focus,
-.x-combo-box .x-button.gadget:focus {
-  color: var(--x4-focus-color);
-}
-.x-text-edit:focus .x-button.gadget,
-.x-combo-box:focus .x-button.gadget,
-.x-text-edit:focus input,
-.x-combo-box:focus input {
-  border-color: var(--x4-focus-color);
-}
-.x-text-edit:focus input,
-.x-combo-box:focus input {
-  border-bottom: 1px solid var(--x4-focus-color);
-}
-.x-text-edit:focus .x-button.gadget,
-.x-combo-box:focus .x-button.gadget {
-  color: var(--x4-focus-color);
-}
-.x-text-edit:focus .x-label,
-.x-combo-box:focus .x-label {
-  color: var(--x4-focus-color);
-}
-.x-text-edit .error-info,
-.x-combo-box .error-info {
-  font-size: 70%;
-  padding: 4px;
-  color: white;
-  padding-left: 19px;
-  padding-top: 6px;
-  pointer-events: none;
-  right: 0;
-  position: absolute;
-  top: -2px;
-  z-index: 1;
-}
-.x-text-edit.x-required .label1:before,
-.x-combo-box.x-required .label1:before {
-  content: '*';
-  padding-right: 2px;
-}
-.x-text-edit.x-error input,
-.x-combo-box.x-error input {
-  border-bottom: none;
-  border-left: 4px solid var(--x4-error-color);
-}
-.x-combo-box > .x-label {
-  border-top: 1px solid transparent;
-}
-.x-combo-box .x-button.gadget,
-.x-combo-box input,
-.x-combo-box .x-fake-input {
-  border: 1px solid rgba(0, 0, 0, 0.1);
-}
-.x-combo-box .x-fake-input {
-  min-width: 2em;
-}
-.x-combo-box input,
-.x-combo-box .x-fake-input {
-  cursor: default;
-  border-right: none;
-}
-.x-combo-box:focus .x-button.gadget,
-.x-combo-box:focus input,
-.x-combo-box:focus .x-fake-input {
-  border-color: var(--x4-focus-color);
-}
-.x-combo-box:focus input,
-.x-combo-box:focus .x-fake-input {
-  border-bottom: 1px solid var(--x4-focus-color);
-}
-.x-combo-box:focus .x-button.gadget {
-  color: var(--x4-focus-color);
-}
-.x-combo-box:focus .x-label {
-  color: var(--x4-focus-color);
-}
-.x-hlayout > .x-combo-box {
-  margin-bottom: 0;
-  margin-right: 4px;
-}
-.x-text-edit.vertical {
-  align-items: stretch;
-}
-.x-text-edit input:read-only {
-  background-color: transparent;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-.x-text-edit .x-button {
-  padding: 8px 4px;
-  height: auto;
-  border: none;
-  background-color: rgba(0, 0, 0, 0.1);
-}
-.x-text-edit .x-button:hover {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-.x-text-edit:focus input {
-  border-bottom: 1px solid white;
-}
-.x-text-edit:focus .label1 {
-  color: black;
-}
-.x-check-box {
-  align-items: center;
-  color: rgba(0, 0, 0, 0.8);
-  outline: none;
-  padding: 4px 0;
-}
-.x-check-box input {
-  outline: none;
-  margin: 4px;
-  padding: 0;
-}
-.x-check-box .x-label {
-  padding: 4px;
-}
-.x-check-box:focus-within {
-  text-decoration: underline;
-  color: var(--x4-selection-color);
-}
-.x-check-box.slider input {
-  clip: rect(0 0 0 0);
-  position: absolute;
-  width: 1px;
-  height: 1px;
-}
-.x-check-box.slider .x-label:before {
-  box-sizing: border-box;
-  position: absolute;
-  left: 0px;
-  top: 3px;
-  content: "";
-  display: inline-block;
-  width: 2.4em;
-  height: 1.4em;
-  border-radius: 1.4rem;
-  padding: 2px;
-  background-color: rgba(0, 0, 0, 0.3);
-  transition: all 0.2s;
-  border: 1px solid rgba(255, 255, 255, 0.5);
-}
-.x-check-box.slider .x-label:after {
-  box-sizing: border-box;
-  content: "";
-  top: 5px;
-  height: calc(1.4em - 4px);
-  width: calc(1.4em - 4px);
-  border-radius: 50%;
-  background-color: #fff;
-  transition: all 0.2s;
-  position: absolute;
-  left: 2px;
-}
-.x-check-box.slider input:checked + .x-label:before {
-  background-color: var(--x4-selection-color);
-}
-.x-check-box.slider input:checked + .x-label:after {
-  left: calc(1em + 2px);
-  background-color: white;
-}
-.x-check-box.slider .x-label {
-  padding-left: calc(2.5em + 4px);
-  height: 2em;
-}
-.x-menu {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-  background-color: #f7f7f7;
-  padding: 2px 0;
-  max-height: 80%;
-  overflow: auto;
-}
-.x-menu-title {
-  width: 100%;
-  background-color: #e22e6d;
-  color: white;
-  height: 2.3em;
-  display: block;
-  padding: 0 8px;
-  line-height: 2.5em;
-}
-.x-menu-item {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  outline: none;
-  background-color: transparent;
-  color: rgba(0, 0, 0, 0.8);
-  padding: 0px 8px;
-  min-width: 120px;
-  border: none;
-}
-.x-menu-item .x-icon {
-  width: 1em;
-  margin-right: 8px;
-  color: rgba(0, 0, 0, 0.3);
-}
-.x-menu-item .x-label {
-  padding: 4px;
-}
-.x-menu-item:hover {
-  background-color: #c6d3d9;
-  color: black;
-}
-.x-menu-item:hover .x-icon {
-  color: black;
-}
-.x-menu-separator {
-  margin-top: 4px;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  margin-bottom: 3px;
-}
-.x-link {
-  padding: 4px;
-  color: var(--x4-selection-color);
-  cursor: pointer;
-  outline: none;
-  display: flex;
-  align-items: center;
-  color: inherit;
-}
-.x-link:focus {
-  color: var(--x4-selection-color);
-  text-decoration: underline;
-}
-.x-column-view {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
-  overflow: hidden;
-}
-.x-column-view .line {
-  height: 48px;
-}
-.x-column-view .head {
-  background: none;
-  background-color: inherit;
-  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4);
-  z-index: 2;
-  border: 1px solid transparent;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
-  height: 40px;
-  margin: 0 4px;
-}
-.x-column-view .head .x-label {
-  line-height: 32px;
-}
-.x-column-view .h-container {
-  margin-right: var(--x4-scrollbar-width);
-}
-.x-list-view {
-  border: 1px solid var(--x4-default-border-color);
-}
-.x-list-view .x-list-item {
-  padding: 4px;
-  line-height: 2em;
-  white-space: nowrap;
-}
-.x-list-view .x-list-item:hover {
-  background-color: var(--x4-hover-color);
-  color: white;
-}
-.x-list-view .x-list-item.x-selected {
-  background-color: var(--x4-selection-color);
-  color: white;
-}
-.x-list-view .x-list-item:focus {
-  outline: none;
-}
-.x-list-view:focus {
-  outline: none;
-  border-color: var(--x4-focus-color);
-}
-.x-list-view .gadgets {
-  border-top: 1px solid rgba(0, 0, 0, 0.5);
-  background-color: rgba(0, 0, 0, 0.1);
-}
-.x-list-view .gadgets .x-button {
-  background-color: transparent;
-}
-.x-list-view .gadgets .x-button:hover {
-  background-color: white;
-}
-.x-mask {
-  filter: grayscale(80%);
-}
-.x-mask:after {
-  content: '';
-  position: absolute;
-  left: -100vw;
-  top: -100vh;
-  width: 200vw;
-  height: 200vh;
-  background-color: var(--x4-mask-color);
-  z-index: 999;
-}
-.x-popup {
-  position: absolute;
-  z-index: 1000;
-  font-family: var(--x4-font);
-  font-size: var(--x4-font-size);
-}
-.x-popup:focus {
-  outline: none;
-}
-.x-panel > .title {
-  align-items: center;
-  line-height: 1.5em;
-  padding: 4px;
-  border-bottom: 1px solid var(--x4-default-border-color);
-}
-.x-panel > .title > .x-label {
-  flex: 1;
-}
-.x-panel > .title > .x-button {
-  background-color: transparent;
-  padding: 0;
-  border: none;
-  box-shadow: none;
-}
-.x-panel > .title > .x-button:focus {
-  color: black;
-}
-.x-panel > .body {
-  padding: 8px;
-  flex: 1;
-}
-.x-dialog {
-  border: 0.5px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.6);
-  min-width: 250px;
-  min-height: 100px;
-}
-.x-dialog > .title {
-  height: 2rem;
-  color: white;
-  padding: 0 8px;
-  display: flex;
-  align-items: center;
-  background-color: var(--x4-selection-color);
-}
-.x-dialog > .title .x-icon {
-  width: 2em;
-  height: 1.9em;
-  padding: 4px;
-  text-align: center;
-  cursor: pointer;
-}
-.x-dialog > .title .x-icon:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-.x-dialog > .title .x-icon.close-btn:hover {
-  background-color: var(--x4-error-color);
-  color: white;
-}
-.x-dialog > .title .x-label {
-  border-bottom: none;
-  padding: 0;
-}
-.x-dialog > .title .res-btn {
-  display: none;
-}
-.x-dialog.maximized > .title .min-btn,
-.x-dialog.maximized > .title .max-btn {
-  display: none;
-}
-.x-dialog.maximized > .title .res-btn {
-  display: block;
-}
-.x-dialog.x-resized {
-  display: flex;
-  flex-direction: column;
-}
-.x-dialog.x-resized > .x-form {
-  flex: 1;
-}
-.x-dialog.x-resized > .x-form > .container {
-  min-height: 0;
-  min-width: 0;
-  flex: 1;
-  flex-basis: 0;
-}
-.x-dialog.maximized {
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-}
-.x-dialog.maximized > .title {
-  height: 2em;
-}
-.x-size-all {
-  margin: 4px;
-}
-.x-size-all > .x-sizer-overlay {
-  background-color: transparent;
-  border: none;
-}
-.x-size-all > .x-sizer-overlay.topleft,
-.x-size-all > .x-sizer-overlay.topright,
-.x-size-all > .x-sizer-overlay.bottomleft,
-.x-size-all > .x-sizer-overlay.bottomright {
-  cursor: se-resize;
-  width: 6px;
-  height: 6px;
-  z-index: 11;
-}
-.x-size-all > .x-sizer-overlay.topleft {
-  left: -4px;
-  top: -4px;
-}
-.x-size-all > .x-sizer-overlay.bottomright {
-  right: -4px;
-  bottom: -4px;
-}
-.x-size-all > .x-sizer-overlay.topright {
-  cursor: nesw-resize;
-  right: -4px;
-  top: -4px;
-}
-.x-size-all > .x-sizer-overlay.bottomleft {
-  cursor: nesw-resize;
-  left: -4px;
-  bottom: -4px;
-}
-.x-size-all > .x-sizer-overlay.top,
-.x-size-all > .x-sizer-overlay.bottom {
-  width: 100%;
-  height: 4px;
-  left: 0;
-  z-index: 10;
-  cursor: n-resize;
-}
-.x-size-all > .x-sizer-overlay.top {
-  top: -4px;
-}
-.x-size-all > .x-sizer-overlay.bottom {
-  bottom: -4px;
-}
-.x-size-all > .x-sizer-overlay.left,
-.x-size-all > .x-sizer-overlay.right {
-  height: 100%;
-  width: 4px;
-  top: 0;
-  z-index: 10;
-  cursor: w-resize;
-  border: none;
-}
-.x-size-all > .x-sizer-overlay.left {
-  left: -4px;
-}
-.x-size-all > .x-sizer-overlay.right {
-  right: -4px;
-}
-.x-form {
-  background-color: var(--x4-form-color);
-  margin-block-end: 0;
-  padding: 8px;
-  min-width: 250px;
-  min-height: 50px;
-  overflow: auto;
-}
-.x-form > .container {
-  padding: 0px;
-}
-.x-form > .footer {
-  position: relative;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  justify-content: flex-end;
-  padding: 0px;
-  margin-top: 8px;
-  align-items: center;
-}
-.x-form > .footer .x-button:not(.x-small) {
-  min-width: 110px;
-}
-.x-form > .footer .x-button:not(:first-child) {
-  margin-left: 8px;
-}
-.x-hidden {
-  display: none ! important;
-}
-.x-tab-view {
-  overflow: hidden;
-  padding: 24px;
-  padding-top: 0;
-}
-.x-tab-view .x-tab-switch {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  background-color: rgba(0, 0, 0, 0.1);
-}
-.x-tab-view .x-tab-switch .x-tab-btn {
-  border: none;
-  background-color: transparent;
-}
-.x-tab-view .x-tab-switch .x-tab-btn:hover .x-label {
-  text-decoration: underline;
-}
-.x-tab-view .x-tab-switch .x-tab-btn.x-active {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-.x-tab-page {
-  min-width: 0;
-}
-.x-input-box > .title,
-.x-message-box > .title,
-.x-important > .title {
-  background: none;
-  background-color: var(--x4-error-color);
-  height: 2.5em;
-}
-.x-input-box > .title .x-label,
-.x-message-box > .title .x-label,
-.x-important > .title .x-label {
-  border-bottom: none;
-  padding-bottom: 0;
-}
-.x-input-box > .title .x-icon,
-.x-message-box > .title .x-icon,
-.x-important > .title .x-icon {
-  display: none;
-}
-.x-input-box .x-form,
-.x-message-box .x-form,
-.x-important .x-form {
-  min-height: 100px;
-  background-color: white;
-}
-.x-input-box .x-form .panel,
-.x-message-box .x-form .panel,
-.x-important .x-form .panel {
-  align-items: center;
-}
-.x-input-box .x-form .icon,
-.x-message-box .x-form .icon,
-.x-important .x-form .icon {
-  font-size: 48px;
-  color: var(--x4-error-color);
-  margin-right: 8px;
-}
-.x-input-box .x-form .text,
-.x-message-box .x-form .text,
-.x-important .x-form .text {
-  padding: 8px;
-  color: #666666;
-  line-height: 1.7em;
-  max-width: 50vw;
-}
-.x-input-box .x-form > .footer,
-.x-message-box .x-form > .footer,
-.x-important .x-form > .footer {
-  background-color: white;
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-  padding-top: 8px;
-}
-.x-input-box .x-form > .footer .x-button,
-.x-message-box .x-form > .footer .x-button,
-.x-important .x-form > .footer .x-button {
-  background-color: var(--x4-error-color);
-  color: white;
-}
-.x-input-box .x-form > .footer .x-button:focus,
-.x-message-box .x-form > .footer .x-button:focus,
-.x-important .x-form > .footer .x-button:focus {
-  border-color: black;
-}
-.x-spreadsheet,
-.x-grid-view {
-  min-height: 0;
-  overflow: hidden;
-  background-color: white;
-}
-.x-spreadsheet .x-cell,
-.x-grid-view .x-cell {
-  overflow: hidden;
-  padding: 4px;
-  white-space: nowrap;
-  color: black;
-  height: 2em;
-}
-.x-spreadsheet .x-footer,
-.x-grid-view .x-footer,
-.x-spreadsheet .x-header,
-.x-grid-view .x-header {
-  height: 2em;
-  background-color: #f0f0f0;
-  align-items: center;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
-}
-.x-spreadsheet .x-footer .x-sizer-bar,
-.x-grid-view .x-footer .x-sizer-bar,
-.x-spreadsheet .x-header .x-sizer-bar,
-.x-grid-view .x-header .x-sizer-bar {
-  background-color: transparent;
-}
-.x-spreadsheet .x-footer .x-cell,
-.x-grid-view .x-footer .x-cell,
-.x-spreadsheet .x-header .x-cell,
-.x-grid-view .x-header .x-cell {
-  text-overflow: ellipsis;
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-  height: unset;
-}
-.x-spreadsheet .x-footer .x-cell.sort,
-.x-grid-view .x-footer .x-cell.sort,
-.x-spreadsheet .x-header .x-cell.sort,
-.x-grid-view .x-header .x-cell.sort {
-  background-image: var(--x4-icon-arrow-down-long);
-  background-repeat: no-repeat;
-  background-size: 1rem 1rem;
-  background-position: right 0 top 6px;
-  padding-right: calc(1rem + 4px);
-}
-.x-spreadsheet .x-footer .x-cell.sort.desc,
-.x-grid-view .x-footer .x-cell.sort.desc,
-.x-spreadsheet .x-header .x-cell.sort.desc,
-.x-grid-view .x-header .x-cell.sort.desc {
-  background-image: var(--x4-icon-arrow-up-long);
-}
-.x-spreadsheet .x-header .x-cell,
-.x-grid-view .x-header .x-cell {
-  display: flex;
-  align-items: center;
-}
-.x-spreadsheet .x-row,
-.x-grid-view .x-row {
-  position: absolute;
-  width: 100%;
-  border-bottom: 1px solid #f0f0f0;
-  align-items: center;
-  height: 2em;
-}
-.x-spreadsheet .x-row.odd,
-.x-grid-view .x-row.odd {
-  background-color: #fafafa;
-}
-.x-spreadsheet .x-cell,
-.x-grid-view .x-cell {
-  border-right: 1px solid #f0f0f0;
-}
-.x-spreadsheet .x-cell.center,
-.x-grid-view .x-cell.center {
-  text-align: center;
-}
-.x-spreadsheet .x-cell.right,
-.x-grid-view .x-cell.right {
-  text-align: right;
-}
-.x-spreadsheet:focus,
-.x-grid-view:focus {
-  outline: none;
-}
-.x-grid-view .x-footer,
-.x-grid-view .x-header {
-  border-left: 4px solid #f0f0f0;
-}
-.x-grid-view .x-row {
-  border-left: 4px solid transparent;
-}
-.x-grid-view .x-row:hover {
-  background-color: rgba(0, 0, 0, 0.1);
-  border-left-color: rgba(0, 0, 0, 0.6);
-}
-.x-grid-view .x-row.x-selected {
-  background-color: var(--x4-selection-color);
-}
-.x-grid-view .x-row.x-selected .x-cell {
-  color: white;
-}
-.x-grid-view .empty-msg {
-  position: absolute;
-  left: 1em;
-  top: 4em;
-}
-.x-spreadsheet .content .x-cell {
-  position: absolute;
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  height: 2em;
-}
-.x-spreadsheet .x-cell.x-selected {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-.x-spreadsheet:focus .x-cell.x-selected {
-  background-color: var(--x4-selection-color);
-  color: white;
-}
-.x-spreadsheet .x-editor {
-  position: absolute;
-  min-height: 0;
-}
-.x-spreadsheet .x-editor input {
-  margin: 0;
-  min-height: 0;
-}
-.x-side-bar {
-  min-width: 44px;
-}
-.x-side-bar .x-button {
-  background-color: transparent;
-  color: var(--x4-base-color);
-  border: none;
-  min-height: 2em;
-}
-.x-side-bar .x-button:hover {
-  background-color: var(--x4-hover-color);
-  color: white;
-}
-.x-side-bar .x-button:hover .x-icon {
-  color: rgba(255, 255, 255, 0.5);
-}
-.x-side-bar .x-button.x-active {
-  background-color: var(--x4-base-color);
-  color: white;
-}
-.x-side-bar .x-button.x-active .x-icon {
-  color: white;
-}
-.x-side-bar .x-button.x-active:hover {
-  color: white;
-}
-.x-side-bar .x-button.x-active:hover .x-icon {
-  color: rgba(255, 255, 255, 0.5);
-}
-.x-side-bar .x-button.trans,
-.x-side-bar .x-button.trans .x-icon {
-  transition: background-color 0.4s ease, color 0.4s ease;
-}
-.x-side-bar.collapsed .x-button .x-label {
-  display: none;
-}
-.x-side-bar.collapsed .x-button.x-active .x-icon,
-.x-side-bar.collapsed .x-button:hover .x-icon {
-  color: white;
-}
-.x-tooltip {
-  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
-  z-index: 50000;
-  display: inline-block;
-  max-width: 400px;
-  pointer-events: none;
-  background-color: white;
-  color: white;
-  padding-left: 24px;
-  font-size: 0.8rem;
-  font-weight: 300;
-}
-.x-tooltip .x-icon {
-  position: absolute;
-  left: 6px;
-  top: 7px;
-  color: var(--x4-tip-background);
-}
-.x-tooltip .x-label {
-  background-color: var(--x4-selection-color);
-  white-space: break-spaces;
-  display: inline-block;
-  padding: 6px;
-  line-height: 1.3em;
-}
-.x-search-bar {
-  background-color: var(--x4-base-color);
-  height: 2em;
-}
-.x-popup-table {
-  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.6);
-  border-collapse: collapse;
-  background-color: white;
-  padding: 2px 0;
-}
-.x-popup-table tr:hover,
-.x-popup-table tr.x-selected {
-  background-color: #c8ffff;
-}
-.x-popup-table td {
-  padding: 3px 8px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-.x-popup-table .hilite {
-  font-weight: bold;
-}
-.x-scroll-view,
-.x-container.x-scroll-view {
-  overflow-y: auto;
-}
-.x-popup-list-view {
-  background-color: white;
-}
-.x-popup-list-view .x-combo-popup {
-  min-height: 1em;
-  max-height: 400px;
-  border: 1px solid #00000073;
-  overflow: auto;
-  color: black;
-}
-.x-popup-list-view .x-combo-popup .x-list-item {
-  height: 2em;
-  line-height: calc(2em - 8px);
-}
-.x-calendar {
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 4px;
-}
-.x-calendar .month-sel {
-  height: 2em;
-  align-items: center;
-  padding-left: 2em;
-  margin-bottom: 8px;
-}
-.x-calendar .month-sel .month {
-  padding-right: 4px;
-}
-.x-calendar .month-sel .year {
-  cursor: pointer;
-}
-.x-calendar .month-sel .month,
-.x-calendar .month-sel .year {
-  cursor: pointer;
-}
-.x-calendar .month-sel .month:hover,
-.x-calendar .month-sel .year:hover {
-  text-decoration: underline;
-}
-.x-calendar .month-sel .x-label {
-  font-weight: bold;
-}
-.x-calendar .month-sel .x-button {
-  height: auto;
-  color: black;
-}
-.x-calendar .week {
-  align-items: center;
-}
-.x-calendar .week:hover {
-  background-color: var(--x4-hover-color);
-  border-radius: 4px;
-}
-.x-calendar .week .cell {
-  height: 100%;
-  color: rgba(0, 0, 0, 0.7);
-  text-align: center;
-}
-.x-calendar .week .cell span {
-  margin: auto;
-}
-.x-calendar .week .today {
-  font-weight: bold;
-  background-color: var(--x4-error-color);
-}
-.x-calendar .week .today span {
-  border-radius: 2px;
-  color: white;
-}
-.x-calendar .week .weeknum {
-  width: 2em;
-  color: rgba(0, 0, 0, 0.3);
-  font-size: 70%;
-}
-.x-calendar .week .day {
-  cursor: pointer;
-}
-.x-calendar .week .out {
-  color: rgba(0, 0, 0, 0.3);
-}
-.x-calendar .week .day:hover {
-  background-color: var(--x4-hover-color);
-  color: white;
-}
-.x-calendar .header .cell {
-  color: rgba(0, 0, 0, 0.5);
-  height: 1.5em;
-}
-.x-calendar .header:hover {
-  background-color: inherit;
-}
-.x-popup-calendar {
-  width: 250px;
-  height: 200px;
-  background-color: white;
-  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.6);
-}
-.x-separator {
-  background-color: white;
-}
-.x-separator.horizontal {
-  width: 4px;
-  border-left: 1px solid #c7c7c7;
-  border-right: 1px solid #c7c7c7;
-  cursor: e-resize;
-}
-.x-separator.vertical {
-  height: 4px;
-  border-top: 1px solid #c7c7c7;
-  border-bottom: 1px solid #c7c7c7;
-  cursor: n-resize;
-}
-.x-separator:hover {
-  background-color: #575757;
-  border-color: #575757;
-}
-.x-toggle-button.checked {
-  background-color: #a8a8a8;
-}
-.x-color-picker-box .customs {
-  padding: 8px;
-}
-.x-color-picker-box .customs .cust-cc {
-  height: 16px;
-  border: 1px solid rgba(0, 0, 0, 0.4);
-}
-.x-color-picker .sel {
-  position: absolute;
-  left: 10px;
-  top: 10px;
-  right: 40px;
-  bottom: 40px;
-}
-.x-color-picker .sel .marker {
-  position: absolute;
-  width: 6px;
-  height: 6px;
-  margin-top: -3px;
-  margin-left: -3px;
-  border: 1px solid white;
-}
-.x-color-picker .light {
-  background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
-}
-.x-color-picker .dark {
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);
-}
-.x-color-picker .hue {
-  position: absolute;
-  top: 10px;
-  bottom: 40px;
-  right: 10px;
-  width: 20px;
-  background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 66%, #ff00ff 83%, #ff0000 100%);
-}
-.x-color-picker .hue .marker {
-  position: absolute;
-  width: calc(100% + 6px);
-  height: 4px;
-  margin-top: -2px;
-  margin-left: -3px;
-  background-color: black;
-}
-.x-color-picker .sample {
-  position: absolute;
-  bottom: 10px;
-  height: 20px;
-  width: 20px;
-  right: 10px;
-}
-.x-color-picker .sample .color {
-  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #ff0000 100%);
-}
-.x-color-picker .alpha,
-.x-color-picker .transp {
-  position: absolute;
-  left: 10px;
-  bottom: 10px;
-  right: 20px;
-  height: 20px;
-}
-.x-color-picker .transp {
-  bottom: 8px;
-  width: 115px;
-  left: 4px;
-  height: 24px;
-}
-.x-color-picker .hexv {
-  position: absolute;
-  bottom: 8px;
-  left: 120px;
-  height: 24px;
-  margin: 0;
-  width: 90px;
-  min-height: unset;
-}
-.x-color-picker .alpha {
-  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAEsmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIxMCIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS45LjAiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/Pn8+b7YAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRy0tCQRSHv7Qwyh5gRIsWEtZKwwyiNi2UXlAt1CCrjV5fgdrlXiOibdBWKIja9FrUX1DboHUQFEUQ7YLWRW0qbueqoESe4cz55jdzDjNnwBLOKFm93gvZXF4LTvid85EFp+0FK5204sURVXR1JjQepqZ93lNnxluPWav2uX+tOZ7QFahrFB5VVC0vPCk8vZZXTd4R7lDS0bjwmbBbkwsK35l6rMSvJqdK/G2yFg4GwNIu7ExVcayKlbSWFZaX48pmVpXyfcyX2BO5uZDEHvFudIJM4MfJFGMEGGKAEZmH8OCjX1bUyPcW82dZkVxFZpV1NJZJkSaPW9RVqZ6QmBQ9ISPDutn/v33Vk4O+UnW7HxqeDeO9F2zb8FMwjK8jw/g5BusTXOYq+SuHMPwheqGiuQ6gbRPOrypabBcutqDrUY1q0aJkFbckk/B2Ci0RcNxA02KpZ+V9Th4gvCFfdQ17+9An59uWfgF7Hmfv4QYbGAAAAAlwSFlzAAALEwAACxMBAJqcGAAAACdJREFUGJVjbGhoYEAC9fX1yFwmBryAptKM////R+Y3NjbSzW4C0gAo9QeQBmhTIwAAAABJRU5ErkJggg==');
-}
-.x-color-picker .alpha .marker {
-  position: absolute;
-  height: calc(100% + 6px);
-  width: 4px;
-  margin-top: -3px;
-  margin-left: -2px;
-  background-color: black;
-}
-.x-color-picker.with-alpha .sel {
-  left: 4px;
-  top: 4px;
-  bottom: 34px;
-  right: 34px;
-}
-.x-color-picker.with-alpha .hue {
-  top: 4px;
-  right: 4px;
-  bottom: 34px;
-}
-.x-color-picker.with-alpha .hexv {
-  bottom: 4px;
-  left: 4px;
-  width: 120px;
-}
-.x-color-picker.with-alpha .alpha {
-  left: 130px;
-  right: 4px;
-  height: 24px;
-  bottom: 4px;
-}
-.x-color-picker.with-alpha .transp,
-.x-color-picker.with-alpha .sample {
-  display: none;
-}
-.x-color-picker.pal-mode {
-  display: flex;
-  gap: 1px;
-}
-.x-color-picker.pal-mode > .x-container {
-  width: 100%;
-}
-.x-color-picker.pal-mode .hcol,
-.x-color-picker.pal-mode .vcol {
-  justify-content: space-between;
-}
-.x-color-picker.pal-mode .hcol {
-  min-height: 90px;
-  margin-top: 40px;
-}
-.x-color-picker.pal-mode .hexv {
-  bottom: 10px;
-  left: 120px;
-  right: 10px;
-  width: unset;
-}
-.x-color-picker.pal-mode .transp {
-  display: flex;
-}
-.x-color-picker.pal-mode #hsel {
-  gap: 4px;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-.x-color-picker.pal-mode #vsel {
-  gap: 1px;
-  margin-top: 10px;
-}
-.x-color-picker.pal-mode .clr-box {
-  width: 19px;
-  height: 10px;
-}
-.x-color-picker.pal-mode .hclr-box {
-  height: 16px;
-  min-width: 19px;
-  font-size: 9px;
-  line-height: 16px;
-  text-align: center;
-}
-.x-color-picker.pal-mode .hclr-box.selected {
-  border: 1px solid black;
-}
-.x-tree-view .x-scroll-view {
-  margin: 4px;
-}
-.x-tree-view .x-tree-item {
-  line-height: 1.5em;
-  white-space: nowrap;
-  overflow: hidden;
-  align-items: center;
-}
-.x-tree-view .x-tree-item span {
-  padding: 0 4px;
-}
-.x-tree-view .x-tree-item .tree-icon {
-  width: 2em;
-}
-.x-tree-view .x-tree-item.collapsed .tree-icon {
-  transform: rotate(-90deg);
-}
-.x-tree-view .x-tree-item:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-.x-tree-view .x-tree-item.selected {
-  background-color: rgba(255, 255, 255, 0.3);
-}
-.x-tree-view .x-tree-item .indent {
-  position: absolute;
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  height: 100%;
-  top: 0;
-}
-.x-tree-view .gadgets {
-  border-top: 1px solid rgba(0, 0, 0, 0.5);
-  background-color: rgba(0, 0, 0, 0.1);
-}
-.x-tree-view .gadgets .x-button {
-  background-color: transparent;
-}
-.x-tree-view .gadgets .x-button:hover {
-  background-color: white;
-}
-.x-tooltip.error {
-  background-color: var(--x4-error-color);
-  padding: 0 6px;
-  margin-left: 3px;
-  position: absolute;
-  border: 1px solid rgba(0, 0, 0, 0.3);
-}
-.x-tooltip.error .x-label {
-  background-color: transparent;
-  color: white;
-  font-size: inherit;
-  padding: 0;
-}
-.x-tooltip.error .x-icon {
-  display: none;
-}
-.x-text-edit.with-gadgets input {
-  border-right: none;
-}
-.x-text-edit.with-gadgets > .x-icon {
-  border: 1px solid rgba(0, 0, 0, 0.5);
-  width: 1.5em;
-  height: 100%;
-  line-height: 1.8em;
-  border-left: none;
-}
-.x-text-hiliter {
-  overflow: hidden;
-}
-.x-text-hiliter textarea {
-  font-family: monospace;
-  font-size: var(--x4-font-size);
-  padding: 2px;
-  resize: none;
-  outline: none;
-  border: 1px solid transparent;
-  width: 100%;
-  color: transparent;
-  background-color: transparent;
-  caret-color: black;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-}
-.x-text-hiliter textarea:focus {
-  border: 1px solid var(--x4-selection-color);
-}
-.x-text-hiliter .x-syntax-hiliter {
-  font-family: monospace;
-  font-size: var(--x4-font-size);
-  padding: 2px;
-  border: 1px solid transparent;
-  overflow: hidden;
-  white-space: pre;
-  color: #5c5c5c;
-  background-color: white;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-}
-.x-text-hiliter .x-syntax-hiliter .num {
-  color: #008000;
-}
-.x-text-hiliter .x-syntax-hiliter .kword {
-  color: #000080;
-}
-.x-text-hiliter .x-syntax-hiliter .str {
-  color: #8b0000;
-}
-.x-text-hiliter .x-syntax-hiliter .cmt {
-  color: #8b008b;
-  background-color: rgba(139, 0, 139, 0.2);
-}
-.x-text-hiliter .x-syntax-hiliter .punc {
-  font-weight: bold;
-  color: black;
-}
-.x-list-view.virtual .x-list-item {
-  position: absolute;
-  left: 0;
-  right: 0;
-}