x4js 1.4.53 → 1.5.0

package/lib/ts_src/x4.less

@@ -0,0 +1,2236 @@
+// out: ../lib/x4.css
+
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|  
+*  /__/ \__\   |_|
+*        
+* @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: Helvetica, Arial, Sans-Serif;
+	--x4-font-size: 13px;
+
+	--x4-base-color: #266888;
+	
+	--x4-selection-color: #2458B3;
+	--x4-selection-text: white;
+
+	--x4-hover-color: fadeout( #2458B3, 10% );
+	--x4-hover-text: white;
+
+	--x4-mask-color: fadeout( #2458B3, 40% );
+	--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: rgb(54,54,54);
+	
+	--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);
+
+	// todo: svg
+	--x4-icon-font-family: "fonteawesome";
+
+	// icons are from Font Awesome  by @fontawesome - https://fontawesome.com 
+	--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-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-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-icon-calendar-days: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M160 32V64H288V32C288 14.33 302.3 0 320 0C337.7 0 352 14.33 352 32V64H400C426.5 64 448 85.49 448 112V160H0V112C0 85.49 21.49 64 48 64H96V32C96 14.33 110.3 0 128 0C145.7 0 160 14.33 160 32zM0 192H448V464C448 490.5 426.5 512 400 512H48C21.49 512 0 490.5 0 464V192zM64 304C64 312.8 71.16 320 80 320H112C120.8 320 128 312.8 128 304V272C128 263.2 120.8 256 112 256H80C71.16 256 64 263.2 64 272V304zM192 304C192 312.8 199.2 320 208 320H240C248.8 320 256 312.8 256 304V272C256 263.2 248.8 256 240 256H208C199.2 256 192 263.2 192 272V304zM336 256C327.2 256 320 263.2 320 272V304C320 312.8 327.2 320 336 320H368C376.8 320 384 312.8 384 304V272C384 263.2 376.8 256 368 256H336zM64 432C64 440.8 71.16 448 80 448H112C120.8 448 128 440.8 128 432V400C128 391.2 120.8 384 112 384H80C71.16 384 64 391.2 64 400V432zM208 384C199.2 384 192 391.2 192 400V432C192 440.8 199.2 448 208 448H240C248.8 448 256 440.8 256 432V400C256 391.2 248.8 384 240 384H208zM320 432C320 440.8 327.2 448 336 448H368C376.8 448 384 440.8 384 432V400C384 391.2 376.8 384 368 384H336C327.2 384 320 391.2 320 400V432z"/></svg>';
+	--x4-icon-tip: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464zM296 336h-16V248C280 234.8 269.3 224 256 224H224C210.8 224 200 234.8 200 248S210.8 272 224 272h8v64h-16C202.8 336 192 346.8 192 360S202.8 384 216 384h80c13.25 0 24-10.75 24-24S309.3 336 296 336zM256 192c17.67 0 32-14.33 32-32c0-17.67-14.33-32-32-32S224 142.3 224 160C224 177.7 238.3 192 256 192z"/></svg>';
+	--x4-icon-check: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M440.1 103C450.3 112.4 450.3 127.6 440.1 136.1L176.1 400.1C167.6 410.3 152.4 410.3 143 400.1L7.029 264.1C-2.343 255.6-2.343 240.4 7.029 231C16.4 221.7 31.6 221.7 40.97 231L160 350.1L407 103C416.4 93.66 431.6 93.66 440.1 103V103z"/></svg>';
+	--x4-icon-folder-closed: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M448 96h-172.1L226.7 50.75C214.7 38.74 198.5 32 181.5 32H64C28.65 32 0 60.66 0 96v320c0 35.34 28.65 64 64 64h384c35.35 0 64-28.66 64-64V160C512 124.7 483.3 96 448 96zM64 80h117.5c4.273 0 8.293 1.664 11.31 4.688L256 144h192c8.822 0 16 7.176 16 16v32h-416V96C48 87.18 55.18 80 64 80zM448 432H64c-8.822 0-16-7.176-16-16V240h416V416C464 424.8 456.8 432 448 432z"/></svg>';
+	--x4-icon-folder-opened: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><path d="M572.6 270.3l-96 192C471.2 473.2 460.1 480 447.1 480H64c-35.35 0-64-28.66-64-64V96c0-35.34 28.65-64 64-64h117.5c16.97 0 33.25 6.742 45.26 18.75L275.9 96H416c35.35 0 64 28.66 64 64v32h-48V160c0-8.824-7.178-16-16-16H256L192.8 84.69C189.8 81.66 185.8 80 181.5 80H64C55.18 80 48 87.18 48 96v288l71.16-142.3C124.6 230.8 135.7 224 147.8 224h396.2C567.7 224 583.2 249 572.6 270.3z"/></svg>';
+
+	--x4-icon-chevron-down: 	'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M432.6 209.3l-191.1 183.1C235.1 397.8 229.1 400 224 400s-11.97-2.219-16.59-6.688L15.41 209.3C5.814 200.2 5.502 184.1 14.69 175.4c9.125-9.625 24.38-9.938 33.91-.7187L224 342.8l175.4-168c9.5-9.219 24.78-8.906 33.91 .7187C442.5 184.1 442.2 200.2 432.6 209.3z"/></svg>';
+	--x4-icon-chevron-right: 	'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><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-chevron-left: 	'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><path d="M206.7 464.6l-183.1-191.1C18.22 267.1 16 261.1 16 256s2.219-11.97 6.688-16.59l183.1-191.1c9.152-9.594 24.34-9.906 33.9-.7187c9.625 9.125 9.938 24.37 .7187 33.91L73.24 256l168 175.4c9.219 9.5 8.906 24.78-.7187 33.91C231 474.5 215.8 474.2 206.7 464.6z"/></svg>';
+	--x4-icon-chevron-up: 		'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M15.41 302.7l191.1-183.1C212 114.2 218 111.1 224 111.1s11.97 2.219 16.59 6.688l191.1 183.1c9.594 9.152 9.906 24.34 .7187 33.9c-9.125 9.625-24.38 9.938-33.91 .7187L224 169.2l-175.4 168c-9.5 9.219-24.78 8.906-33.91-.7187C5.502 327 5.814 311.8 15.41 302.7z"/></svg>';
+
+	--x4-icon-square-check: 	'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M211.8 339.8C200.9 350.7 183.1 350.7 172.2 339.8L108.2 275.8C97.27 264.9 97.27 247.1 108.2 236.2C119.1 225.3 136.9 225.3 147.8 236.2L192 280.4L300.2 172.2C311.1 161.3 328.9 161.3 339.8 172.2C350.7 183.1 350.7 200.9 339.8 211.8L211.8 339.8zM0 96C0 60.65 28.65 32 64 32H384C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96zM48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80H64C55.16 80 48 87.16 48 96z"/></svg>';
+	--x4-icon-square: 	'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"  fill="currentColor"><path d="M384 32C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H384zM384 64H64C46.33 64 32 78.33 32 96V416C32 433.7 46.33 448 64 448H384C401.7 448 416 433.7 416 416V96C416 78.33 401.7 64 384 64z"/></svg>';
+}
+
+@BLACK10:	rgba(0,0,0,0.1);
+@BLACK20:	rgba(0,0,0,0.2);
+@BLACK30:	rgba(0,0,0,0.3);
+@BLACK40:	rgba(0,0,0,0.4);
+@BLACK50:	rgba(0,0,0,0.5);
+@BLACK60:	rgba(0,0,0,0.6);
+@BLACK70:	rgba(0,0,0,0.7);
+@BLACK80:	rgba(0,0,0,0.8);
+@BLACK90:	rgba(0,0,0,0.9);
+@BLACK:	#000;
+
+@WHITE5: rgba(255,255,255,0.05);
+@WHITE10: rgba(255,255,255,0.1);
+@WHITE20: rgba(255,255,255,0.2);
+@WHITE25: rgba(255,255,255,0.25);
+@WHITE30: rgba(255,255,255,0.3);
+@WHITE40: rgba(255,255,255,0.4);
+@WHITE50: rgba(255,255,255,0.5);
+@WHITE60: rgba(255,255,255,0.6);
+@WHITE70: rgba(255,255,255,0.7);
+@WHITE80: rgba(255,255,255,0.8);
+@WHITE90: rgba(255,255,255,0.9);
+@WHITE:	#fff;
+
+/* source: https://tailwindcss.com/docs/customizing-colors/#default-color-palette */
+:root {
+	--black: #000000;
+	--white: #ffffff;
+  
+	--gray-100: #f7fafc;
+	--gray-200: #edf2f7;
+	--gray-300: #e2e8f0;
+	--gray-400: #cbd5e0;
+	--gray-500: #a0aec0;
+	--gray-600: #718096;
+	--gray-700: #4a5568;
+	--gray-800: #2d3748;
+	--gray-900: #1a202c;
+  
+	--red-100: #fff5f5;
+	--red-200: #fed7d7;
+	--red-300: #feb2b2;
+	--red-400: #fc8181;
+	--red-500: #f56565;
+	--red-600: #e53e3e;
+	--red-700: #c53030;
+	--red-800: #9b2c2c;
+	--red-900: #742a2a;
+  
+	--orange-100: #fffaf0;
+	--orange-200: #feebc8;
+	--orange-300: #fbd38d;
+	--orange-400: #f6ad55;
+	--orange-500: #ed8936;
+	--orange-600: #dd6b20;
+	--orange-700: #c05621;
+	--orange-800: #9c4221;
+	--orange-900: #7b341e;
+  
+	--yellow-100: #fffff0;
+	--yellow-200: #fefcbf;
+	--yellow-300: #faf089;
+	--yellow-400: #f6e05e;
+	--yellow-500: #ecc94b;
+	--yellow-600: #d69e2e;
+	--yellow-700: #b7791f;
+	--yellow-800: #975a16;
+	--yellow-900: #744210;
+  
+	--green-100: #f0fff4;
+	--green-200: #c6f6d5;
+	--green-300: #9ae6b4;
+	--green-400: #68d391;
+	--green-500: #48bb78;
+	--green-600: #38a169;
+	--green-700: #2f855a;
+	--green-800: #276749;
+	--green-900: #22543d;
+  
+	--teal-100: #e6fffa;
+	--teal-200: #b2f5ea;
+	--teal-300: #81e6d9;
+	--teal-400: #4fd1c5;
+	--teal-500: #38b2ac;
+	--teal-600: #319795;
+	--teal-700: #2c7a7b;
+	--teal-800: #285e61;
+	--teal-900: #234e52;
+  
+	--blue-100: #ebf8ff;
+	--blue-200: #bee3f8;
+	--blue-300: #90cdf4;
+	--blue-400: #63b3ed;
+	--blue-500: #4299e1;
+	--blue-600: #3182ce;
+	--blue-700: #2b6cb0;
+	--blue-800: #2c5282;
+	--blue-900: #2a4365;
+  
+	--indigo-100: #ebf4ff;
+	--indigo-200: #c3dafe;
+	--indigo-300: #a3bffa;
+	--indigo-400: #7f9cf5;
+	--indigo-500: #667eea;
+	--indigo-600: #5a67d8;
+	--indigo-700: #4c51bf;
+	--indigo-800: #434190;
+	--indigo-900: #3c366b;
+  
+	--purple-100: #faf5ff;
+	--purple-200: #e9d8fd;
+	--purple-300: #d6bcfa;
+	--purple-400: #b794f4;
+	--purple-500: #9f7aea;
+	--purple-600: #805ad5;
+	--purple-700: #6b46c1;
+	--purple-800: #553c9a;
+	--purple-900: #44337a;
+  
+	--pink-100: #fff5f7;
+	--pink-200: #fed7e2;
+	--pink-300: #fbb6ce;
+	--pink-400: #f687b3;
+	--pink-500: #ed64a6;
+	--pink-600: #d53f8c;
+	--pink-700: #b83280;
+	--pink-800: #97266d;
+	--pink-900: #702459;
+  }
+
+.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;
+	
+	&:focus {
+		border: 1px solid var( --x4-selection-color );
+	}
+
+	&::selection {
+		background-color: var( --x4-selection-color );
+		color: #fff;
+	}
+}
+
+.z-float-4 {
+	box-shadow: 4px 4px 8px @BLACK40;
+}
+
+.z-float-6 {
+	box-shadow: 6px 6px 10px @BLACK50;
+}
+
+.z-float-8 {
+	box-shadow: 8px 8px 16px @BLACK60;
+}
+
+.z-float-15 {
+	box-shadow: 4px 4px 15px @BLACK60;
+}
+
+.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-hlayout > .x-min-content {
+	min-width: min-content;
+}
+
+.x-vlayout > .x-min-content {
+	min-height: min-content;
+}
+
+.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;
+
+	&.center {
+		align-items: center;
+	}
+}
+
+.x-grid-layout {
+	display: grid;
+	justify-content: space-evenly;
+}
+
+.x-vlayout {
+	display: flex;
+	flex-direction: column;	
+}
+
+.x-label {
+	color: inherit;
+	&.right {
+		text-align: right;
+	}
+
+	&.center {
+		text-align: center;
+	}
+}
+
+.x-sizer-overlay {
+	position: absolute;
+
+	&.top {
+		width: 100%;
+		height: var( --x4-sizer-size );
+		cursor: n-resize;
+		left: 0;
+		top: 0;
+	}
+
+	&.bottom {
+		width: 100%;
+		height: var( --x4-sizer-size );
+		cursor: n-resize;
+		left: 0;
+		bottom: 0;
+	}
+	
+	&.right {
+		top: 0;
+		right: 0;
+		width: var( --x4-sizer-size );
+		height: 100%;
+		cursor: e-resize;
+	}
+
+	&.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 {
+	&:before {
+		font-family: var( --x4-icon-font-family );
+	}
+	
+	display: inline-flex;
+    align-items: center;
+	text-align: center;
+	flex-direction: column;
+
+	&.x-svg-icon {
+		width: 1rem;
+		height: 1rem;
+
+		& > svg {
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+
+.x-base-button {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	outline: none;
+	cursor: pointer;
+	font-family: var( --x4-font );
+	font-size: var( --x4-font-size );
+
+	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-icon {
+		margin: 0 4px;
+		color: inherit;
+	}
+
+	.x-svg-icon {
+		width: 100%;
+		height: 100%;
+		margin: 0;
+	}
+
+	&:focus {
+		border-color: var( --x4-focus-color );
+		background-color: var( --x4-focus-color );
+		color: white;
+	}
+
+	&.x-disable {
+		color: gray;
+
+		&:after {
+			content: "";
+			background-color: @WHITE60;
+			left: 0;
+			right: 0;
+			display: block;
+			top: 0;
+			bottom: 0;
+			position: absolute;
+			cursor: default;
+		}
+	}
+}
+
+.x-image {
+	display: flex;
+	overflow: hidden;
+
+	img {
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.x-video {
+	display: flex;
+	overflow: hidden;
+	
+	video {
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.x-image-upload {
+	@size: 96px;
+
+	width: @size;
+	height: @size;
+	margin: 24px;
+	
+	img {
+		width: @size;
+		height: @size;
+
+		background-color: @WHITE70;
+		//border: 1px solid white;
+		border-radius: 50%;	
+	}
+}
+
+.x-canvas {
+	overflow: hidden;
+	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 );
+	//border-radius: calc( var( --x4-scrollbar-width ) / 2 - 1px );
+}
+
+.x-circular-chart {
+	background-color: white;
+	.z-float-6;
+	
+	.head {
+		border-bottom: 1px solid @WHITE10;
+		padding: 2px;
+		height: 37px;
+		white-space: nowrap;
+		
+		.x-label {
+			color: white;
+			padding: 8px;
+		}
+
+		.x-button {
+			height: 32px;
+			border: 1px solid @WHITE10;
+		}
+
+		.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: 100%;
+	min-width: min-content;
+	min-height: 32px;
+	padding: 0;
+
+	margin: 0;
+	margin-bottom: 4px;
+
+	.x-hlayout,
+	.x-vlayout {
+		overflow: visible;
+	}
+	
+	&>.x-label {
+		&:after {
+			content: ':';
+		}
+
+		padding: 4px;
+		color: var( --gray-900 );
+		margin-top: 1px; // hack alignement label / edit
+		line-height: 1.3em;
+		min-height: 2em;
+	}
+
+	input,
+	.x-fake-input {
+		height: 2em;
+		font-size: inherit;
+		outline: none;
+		border: none;
+		padding: 4px;
+		color: var( --gray-900 );
+		border-bottom: 1px solid transparent;
+		margin-top: 1px; // hack alignement label / edit
+		line-height: 1.3em;
+
+		&::placeholder {
+			color: var( --gray-800 );
+		}
+
+		&::selection {
+			background-color: var( --x4-selection-color );
+			color: #fff;
+		}
+
+		&:focus {
+			border-bottom-color: var( --x4-focus-color );
+		}
+	}
+
+	&:focus-within {
+		&> .x-label {
+			color: var( --x4-focus-color );
+		}
+	}
+
+	.x-button.gadget {
+		background-color: transparent;
+		font-size: var( --x4-font-size );
+		color: var( --gray-900 );
+		border: none;
+
+		margin: 0;
+		padding: 0;
+		height: 2em;
+		margin-top: 1px;
+
+		&:hover {
+			background-color: transparent;
+		}
+
+		&:focus {
+			color: var( --x4-focus-color );
+		}
+	}
+
+	&:focus {
+		.x-button.gadget,
+		input {
+			border-color: var( --x4-focus-color );
+		}
+
+		input {
+			border-bottom: 1px solid var( --x4-focus-color );
+		}
+	
+		.x-button.gadget {
+			color: var( --x4-focus-color );
+		}			
+	
+		.x-label {
+			color: var( --x4-focus-color );
+		}
+	}
+
+	.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-required .label1:before {
+		content: '*';
+		padding-right: 2px;
+	}
+
+	&.x-error {
+		input {
+			border-bottom: none;
+			border-left: 4px solid var( --x4-error-color );
+		}
+	}
+}
+
+.x-text-edit {
+	// align with combo
+	.x-button.gadget {
+		margin-left:1 px;
+		margin-right:1 px;
+	}
+}
+
+.x-combo-box {
+	
+	&> .x-label {
+		border-top: 1px solid transparent;
+	}
+
+	.x-button.gadget,
+	input,
+	.x-fake-input {
+		border: 1px solid @BLACK10;
+	}
+
+	.x-fake-input {
+		min-width: 2em;
+	}
+
+	input,
+	.x-fake-input {
+		cursor: default;
+		border-right: none;
+	}
+
+	&:focus {
+		.x-button.gadget,
+		input,
+		.x-fake-input {
+			border-color: var( --x4-focus-color );
+		}
+
+		input,
+		.x-fake-input {
+			border-bottom: 1px solid var( --x4-focus-color );
+		}
+	
+		.x-button.gadget {
+			color: var( --x4-focus-color );
+		}			
+	
+		.x-label {
+			color: var( --x4-focus-color );
+		}
+	}
+	
+}
+
+
+
+
+.x-hlayout {
+	& > .x-combo-box {
+		margin-bottom: 0;
+		//min-height: unset;
+		margin-right: 4px;
+	}
+}
+
+.x-text-edit {
+
+	&.vertical {
+		align-items: stretch;
+	}
+
+	input {
+		&:read-only {
+			background-color: transparent;
+			border-bottom: 1px solid @BLACK10;
+		}
+	}
+
+	.x-button {
+		padding: 8px 4px;
+		height: auto;
+		border: none;
+		background-color: rgba(0,0,0,0.1);
+
+		&:hover {
+			background-color: rgba(0,0,0,0.3);
+		}
+	}
+
+	
+
+	&:focus {
+		input {
+			border-bottom: 1px solid white;
+		}
+
+		.label1 {
+			color: black;
+		}
+	}
+
+}
+
+.x-radio-btn,
+.x-check-box {
+	align-items: center;
+	color: var( --gray-900 );
+	outline: none;
+	//min-height: 2em;
+	padding: 4px 0;
+	
+	input {
+		//position: absolute;
+		//display: none;
+		outline: none;
+		margin: 4px;
+		padding: 0;
+	}
+
+	.x-label {
+		padding: 4px;
+	}
+
+	&:focus-within {
+		text-decoration: underline;
+		color: var( --x4-selection-color );
+	}
+}
+
+.x-check-box.slider {
+	@delay: 0.2s;
+
+	input {
+		position: absolute;
+		clip: rect(0 0 0 0);
+		position: absolute;
+		width: 1px;
+		height: 1px;
+	}
+
+	.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: @BLACK30;
+		transition: all .2s;
+		border: 1px solid @WHITE50
+	}
+
+	// circle
+	.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 .2s;
+		position: absolute;
+		left: 2px;
+	}
+
+	input:checked + .x-label:before {
+		background-color: var( --x4-selection-color );
+	}
+
+	input:checked + .x-label:after {
+		left: calc( 1em + 2px);
+		background-color: white;
+	}
+
+	.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: var( --gray-900 );
+	
+	padding: 0px 8px;
+    min-width: 120px;
+	border: none;
+
+	.x-icon {
+		width: 1em;
+		margin-right: 8px;
+		color: var( --gray-700 );
+
+		&.pop-mark {
+			height: 0.8em;
+		}
+	}
+
+	.x-label {
+		padding: 4px;
+	}
+
+	&:hover {
+		background-color: var( --x4-hover-color);
+		color: var(--x4-hover-text);
+		
+		.x-icon {
+			color: var( --gray-900 );
+		}
+	}
+}
+
+.x-menu-separator {
+	margin-top: 4px;
+	border-top: 1px solid @BLACK10;
+	margin-bottom: 3px;
+}
+
+.x-link {
+	padding: 4px;
+    color: var( --x4-selection-color );
+	cursor: pointer;
+	outline: none;
+	
+	display: flex;
+	align-items: center;
+	
+	&:focus {
+		color: var( --x4-selection-color );
+		text-decoration: underline;
+	}
+
+//	min-height: 32px;
+	color: inherit;
+}
+
+.x-column-view {
+	border-bottom: 1px solid @WHITE50;
+	overflow: hidden;
+
+	.line {
+		height: 48px;	
+	}
+
+	.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 @WHITE50;
+		height: 40px;
+
+		margin: 0 4px;
+		
+		.x-label {
+			line-height: 32px;
+		}
+	}
+
+	.h-container {
+		margin-right: var( --x4-scrollbar-width );
+	}
+}
+
+.x-list-view {
+	
+	border: 1px solid var( --x4-default-border-color );
+
+	.x-list-item {
+		padding: 4px;
+		line-height: 2em;
+		white-space: nowrap;
+		
+		&:hover {
+			background-color: var( --x4-hover-color );
+			color: var( --x4-hover-text );
+		}
+		
+		&.x-selected {
+			background-color: var( --x4-selection-color );
+			color: var( --x4-selection-text );
+		}
+	
+		&:focus {
+			outline: none;
+		}
+	}
+
+	&:focus {
+		outline: none;
+		border-color: var( --x4-focus-color );
+	}
+
+	.gadgets {
+		border-top: 1px solid @BLACK50;
+		background-color: @BLACK10;
+
+		.x-button {
+			background-color: transparent;
+			&:hover {
+				background-color: white;
+			};
+		}
+	}
+}
+
+.x-mask {
+	filter: grayscale(80%);
+	
+	&:after {
+		content: '';
+
+		position: absolute;	// to be sure it will be over everybody
+		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 );
+	
+	&:focus {
+		outline: none;
+	}
+}
+
+.x-panel {
+	&>.title {
+		align-items: center;
+		line-height: 1.5em;
+		padding: 4px;
+
+		&> .x-label {
+			flex: 1;
+		}
+
+		&> .x-button {
+			background-color: transparent;
+			padding: 0;
+			border: none;
+			box-shadow: none;
+			&:focus {
+				color: var( --gray-900 );
+			}
+		}
+
+		border-bottom: 1px solid var( --x4-default-border-color );
+	}
+	
+	&>.body {
+		padding: 8px;
+		flex: 1;
+	}
+}
+
+.x-dialog {
+	border: 0.5px solid @BLACK20;
+
+	.z-float-8;
+		
+	& > .title {
+		height: 2rem;
+		color: white;
+		padding: 0 8px;
+		display: flex;
+		align-items: center;
+		background-color: var( --x4-selection-color );
+		width: 0;	// to avoid title changing dialog size when long
+		
+		.x-icon {
+			width: 2em;
+			height: 1.9em;
+			padding: 4px;
+
+			text-align: center;
+			cursor: pointer;
+			
+			&:hover {
+				background-color: @WHITE10;
+			}
+		}
+
+		.x-icon.close-btn:hover {
+			background-color: var( --x4-error-color );
+			color: white;
+		}
+
+		.x-label {
+			border-bottom: none;
+			padding: 0;
+			overflow: hidden;
+    		text-overflow: ellipsis;
+    		white-space: nowrap;
+		}
+
+		.res-btn {
+			display: none;
+		}
+	}
+
+	&.maximized > .title {
+		.min-btn,
+		.max-btn {
+			display: none;
+		}
+
+		.res-btn {
+			display: block;
+		}
+	}
+
+	min-width: 250px;
+	min-height: 100px;
+}
+
+
+.x-dialog.x-resized {
+	display: flex;
+	flex-direction: column;
+
+	&>.x-form {
+		flex: 1;
+
+		&>.container {
+			.x-flex;
+		}
+	}
+}
+
+.x-dialog.maximized {
+	left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+	margin: 0;
+	
+	& > .title {
+		height: 2em;
+	}
+}
+
+.x-size-all {
+	margin: 4px;
+
+	&> .x-sizer-overlay {
+		background-color: transparent;
+		border: none;
+	
+		&.topleft,
+		&.topright,
+		&.bottomleft,
+		&.bottomright {
+			cursor: se-resize;
+			width: 6px;
+			height: 6px;
+			z-index: 11;
+		}
+
+		&.topleft {
+			left: -4px;
+			top: -4px;
+		}
+
+		&.bottomright {
+			right: -4px;
+			bottom: -4px;
+		}
+
+		&.topright {
+			cursor: nesw-resize;
+			right: -4px;
+			top: -4px;
+		}
+
+		&.bottomleft {
+			cursor: nesw-resize;
+			left: -4px;
+			bottom: -4px;
+		}
+
+		&.top,
+		&.bottom {
+			width: 100%;
+			height: 4px;
+			left: 0;
+			z-index: 10;
+			cursor: n-resize;
+		}
+
+		&.top {
+			top: -4px;
+		}
+
+		&.bottom {
+			bottom: -4px;
+		}
+		
+		&.left,
+		&.right {
+			height: 100%;
+			width: 4px;
+			top: 0;
+			z-index: 10;
+			cursor: w-resize;
+			border: none;
+		}
+
+		&.left {
+			left: -4px;
+		}
+
+		&.right {
+			right: -4px;
+		}
+	}
+}
+
+.x-form {
+	background-color: var( --x4-form-color );
+	margin-block-end: 0;
+	padding: 8px 0;
+	min-width: 250px;
+	min-height: 50px;
+	padding-right: 4px;
+	
+	&>.container {
+		padding: 0px;
+		overflow: auto;
+		padding: 0 4px 0 8px;
+	}
+
+	&>.footer {
+		position: relative;
+		left: 0;
+		bottom: 0;
+		width: 100%;
+		justify-content: flex-end;
+		padding: 0px 4px 0 8px;
+		margin-top: 8px;
+		align-items: center;
+
+		.x-button:not(.x-small) {
+			min-width: 110px;
+		}
+
+		.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-switch {
+		border-bottom: 1px solid @WHITE10;
+		background-color: rgba(0,0,0,0.1);
+
+		.x-tab-btn {
+			border: none;
+			background-color: transparent;
+			
+			&:hover {
+				.x-label {
+					text-decoration: underline;
+				}
+			}
+		}
+
+		.x-tab-btn.x-active {
+			background-color: rgba(255,255,255,0.2);
+		}
+	}
+}
+
+.x-tab-page {
+	min-width: 0;
+}
+
+.x-input-box,
+.x-message-box,
+.x-important {
+
+	&>.title {
+		background: none;
+		background-color: var( --x4-error-color );
+		height: 2.5em;
+
+		.x-label {
+			border-bottom: none;
+			padding-bottom: 0;
+		}
+
+		.x-icon {
+			display: none;
+		}
+	}
+
+	.x-form {
+		min-height: 100px;
+		background-color: white;
+
+		.panel {
+			align-items: center;
+		}
+		
+		.icon {
+			font-size: 48px;
+			width: 48px;
+			height: 48px;
+			color: var( --x4-error-color );
+			margin-right: 8px;
+		}
+
+		.text {
+			padding: 8px;
+			color: #666666;
+			line-height: 1.7em;
+			max-width: 50vw;
+		}
+
+		&>.footer {
+			background-color: white;
+			border-top: 1px solid rgba(0,0,0,0.05);
+			padding-top: 8px;
+
+			.x-button {
+				background-color: var( --x4-error-color );
+				color: white;
+			}
+
+			.x-button:focus {
+				border-color: black;
+			}
+		}	
+	}
+}
+
+@bwidth: 4px;
+
+.x-spreadsheet,
+.x-grid-view {
+	
+	@def-height: 2em;
+	
+	min-height: 0;
+	overflow: hidden;
+	background-color: white;
+
+	.x-cell {
+		overflow: hidden;
+		padding: 4px;
+		white-space: nowrap;
+		color: var( --gray-900 );
+		height: @def-height;
+
+		span {
+			width: 100%;
+		}
+	}
+
+	.x-footer,
+	.x-header {
+		height: @def-height;
+		background-color: #f0f0f0;
+		align-items: center;
+		border-bottom: 1px solid rgba(0,0,0,0.4);
+		
+		.x-sizer-bar {
+			background-color: transparent;
+		}
+
+		.x-cell {
+			border-right: 1px solid rgba(0,0,0,0.1);
+			height: 100%;
+			display: flex;
+			align-items: center;
+
+			span {
+				min-width: 0;
+				text-overflow: ellipsis;
+				overflow: hidden;
+			}
+
+			&.sort {
+				height: 0.7rem;
+				opacity: 0.7;
+			}
+		}
+	}
+
+	.x-header {
+		.x-cell {
+			span {
+				width: unset;
+				text-transform: uppercase;
+				font-weight: bold;
+			}
+
+			.sort {
+				width: 1em;
+				height: 1em;
+				padding-left: 4px;
+			}
+		}
+	}
+
+	.x-row {
+		position: absolute;
+		width: calc( 100% - @bwidth );	// todo: border of 1st col
+		border-bottom: 1px solid #d0d0d0;
+		align-items: center;
+		height: @def-height;
+
+		&.odd {
+			background-color: rgb(250,250,250);
+		}
+	}
+
+	.x-cell {
+		border-right: 1px solid #d0d0d0;
+		
+		&.center {
+			text-align: center;
+			justify-content: center;
+		}
+
+		&.right {
+			text-align: right;
+			justify-content: right;
+		}
+	}
+	
+	&:focus {
+		outline: none;
+	}
+}
+
+.x-grid-view {
+	.x-footer,
+	.x-header {
+		border-left: @bwidth solid #f0f0f0;
+	}
+
+	.x-row {
+		border-left: @bwidth solid transparent;
+
+		&:hover {
+			background-color: rgba(0,0,0,0.1);
+			border-left-color: @BLACK60;
+		}
+
+		&.x-selected {
+			background-color: var( --x4-selection-color );
+
+			.x-cell {
+				color: white;
+			}
+		}
+	}
+
+	.empty-msg {
+		position: absolute;
+		left: 1em;
+		top: 4em;
+	}
+}
+
+.x-spreadsheet {
+
+	.x-header {
+		//position: absolute;
+	}
+
+	.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;
+		align-items: center;
+		display: flex;
+	}
+
+	.x-cell.x-selected {
+		background-color: @BLACK10;
+	}
+
+	&:focus {
+		.x-cell.x-selected {
+			background-color: var( --x4-selection-color );
+			color: white;
+		}
+	}
+
+	.x-editor {
+		position: absolute;
+		min-height: 0;
+		margin: 0;
+
+		input {
+			margin: 0;
+			min-height: 0;
+			height: 100%;
+		}
+	}
+}
+
+.x-form .x-spreadsheet .x-editor {
+	background-color: white;
+}
+
+.x-side-bar {
+	min-width: 44px;
+
+	.x-button {
+		background-color: transparent;
+		color: var( --x4-base-color );
+		border: none;
+		//border-bottom: 1px solid fadeout(var( --x4-base-color ),90%);
+		
+		min-height: 2em;
+
+		//.x-icon {
+		//	color: fadeout( var( --x4-base-color ), 50% );
+		//}
+
+		&:hover {
+			background-color: var( --x4-hover-color );
+			color: white;
+
+			.x-icon {
+				color: fadeout(white,50%);
+			}
+		}		
+
+		&.x-active {
+			background-color: var( --x4-base-color );
+			color: white;
+
+			.x-icon {
+				color: white;
+			}
+		}
+
+		&.x-active:hover {
+			//background-color: fadeout(var( --x4-base-color ),20%);
+			color: white;
+
+			.x-icon {
+				color: fadeout(white,50%);
+			}
+		}
+
+		&.trans,
+		&.trans .x-icon {
+			transition: background-color 0.4s ease, color 0.4s ease;
+		}
+	}
+
+	&.collapsed {
+		.x-button {
+			.x-label {
+				display: none;
+			}
+
+			&.x-active .x-icon,
+			&:hover .x-icon {
+				color: white;
+			}
+		}
+	}
+}
+
+.x-tooltip {
+	.z-float-4;
+	z-index: 50000;
+	display: inline-block;
+	max-width: 400px;
+	pointer-events: none;
+
+	background-color: white;
+    color: white;
+	padding-left: 24px;
+	
+	font-family: var( --x4-font );
+	font-size: var( --x4-font-size );
+		
+	.x-icon {
+		position: absolute;
+		left: 5px;
+		top: 7px;
+		color: var( --x4-selection-color );	
+	}
+
+	.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 {
+	.z-float-8;
+
+	border-collapse: collapse;
+	background-color: white;
+	padding: 2px 0;	
+
+	tr.x-selected {
+		//background-color: rgba(200,255,255,1);
+		background-color: var(--x4-selection-color);
+		color: var( --x4-selection-text);
+	}
+
+	tr:hover {
+		background-color: var(--x4-hover-color);
+		color: var( --x4-hover-text);
+	}
+
+	td {
+		padding: 3px 8px;
+		border-bottom: 1px solid rgba(0,0,0,0.1);
+	}
+
+	.hilite {
+		font-weight: bold;
+	}	
+}
+
+
+.x-scroll-view,
+.x-container.x-scroll-view {
+	overflow-y: auto;
+
+	.x-scroll-container {
+		//min-height: 100%; 
+		//pb: le container réduit tous les éléments contenus
+	}
+}
+
+
+.x-popup-list-view {
+	.z-float-4( );
+	background-color: white;
+	
+	.x-combo-popup {
+		min-height: 1em;
+		max-height: 400px;
+	
+		border: 1px solid #00000073;
+		
+		.x-list-item {
+			height: 2em;
+			line-height: calc( 2em - 8px );
+		}
+
+		overflow: auto;
+		color: var( --gray-900 );
+	}
+}
+
+.x-calendar {
+	border: 1px solid @BLACK10;
+	padding: 4px;
+	
+	.month-sel {
+		height: 2em;
+		align-items: center;
+		padding-left: 2em;
+
+		.month {
+			padding-right: 4px;
+		}
+
+		.year {
+			cursor: pointer;
+		}
+
+		.month, 
+		.year {
+			cursor: pointer;
+			&:hover {
+				text-decoration: underline;		
+			}
+		}
+				
+		.x-label {
+			font-weight: bold;
+		}
+
+		.x-button {
+			height: auto;
+			color: var( --gray-900 );
+		}
+
+		margin-bottom: 8px;
+	}
+
+	.week {
+		align-items: center;
+		border: 1px solid transparent;
+
+		&:hover {
+			border-color: var( --x4-hover-color );
+			border-radius: 4px;
+		}
+
+		.cell {
+			height: 100%;
+			color: var( --gray-900 );
+			text-align: center;
+			span {
+				margin: auto;
+			}
+		}
+
+		.today {
+			font-weight: bold;
+			background-color: var( --x4-error-color );
+				
+			span {
+				//border: 2px solid #013e69;
+				//padding: 4px;
+				border-radius: 2px;
+				color: white;
+			}
+		}
+
+		.weeknum {
+			width: 2em;
+			color: @BLACK30;
+			font-size: 70%;
+		}
+
+		.day {
+			cursor: pointer;
+		}
+
+		.out {
+			color: @BLACK30;
+		}
+
+		.day:hover {
+			background-color: var( --x4-hover-color );
+			color: white;
+		}
+	}
+
+	.header {
+		.cell {
+			color: var( --gray-800 );
+			height: 1.5em;
+		}
+
+		&:hover {
+			background-color: inherit;
+		}
+	}	
+}
+
+.x-container {
+//	overflow: hidden;
+}
+
+.x-popup-calendar {
+	width: 250px;
+	height: 200px;
+	background-color: white;
+	.z-float-8;
+
+	
+}
+
+.x-separator {
+	background-color: white;
+		
+	&.horizontal {
+		width: 4px;
+		border-left: 1px solid #c7c7c7;
+		border-right: 1px solid #c7c7c7;
+		cursor: e-resize;
+	}
+
+	&.vertical {
+		height: 4px;
+		border-top: 1px solid #c7c7c7;
+		border-bottom: 1px solid #c7c7c7;
+		cursor: n-resize;
+
+	}
+
+	&:hover {
+		background-color: #575757;
+		border-color: #575757;
+	}
+}
+
+.x-toggle-button {
+	&.checked {
+    	background-color: #a8a8a8;
+	}
+}
+
+
+.x-color-picker-box {
+	.customs {
+		padding: 8px;
+
+		.cust-cc {
+			height: 16px;
+			border: 1px solid @BLACK40;
+		}
+	}
+}
+
+.x-color-picker-editor {
+	.alpha {
+		background-image: url( 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QA6RXhpZgAATU0AKgAAAAgAA1EAAAQAAAABAAAAAFEBAAMAAAABAAEAAFEEAAEAAAAB/AAAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAQABADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9iK90orwugD//2Q==' );
+		padding: 4px;
+	}
+}
+
+.x-color-picker {
+
+	.sel {
+		position: absolute;
+		left: 10px;
+		top: 10px;
+		right: 40px;
+		bottom: 40px;
+
+		.marker {
+			position: absolute;
+			width: 6px;
+			height: 6px;
+			margin-top: -3px;
+			margin-left: -3px;
+
+			border: 1px solid white;
+		}
+	}
+
+	.light {
+		background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
+	}
+
+	.dark {
+		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
+	}
+
+	.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%);
+
+		.marker {
+			position: absolute;
+			width: calc( 100% + 6px );
+			height: 4px;
+			margin-top: -2px;
+			margin-left: -3px;
+			background-color: black;
+			//border: 1px solid white;
+		}
+	}
+
+	.sample {
+		position: absolute;
+		bottom: 10px;
+		height: 20px;
+		width: 20px;
+		right: 10px;
+
+		.color {
+			background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgb(255,0,0) 100%);
+		}
+	}
+
+	.alpha,
+	.transp {
+		position: absolute;
+		left: 10px;
+		bottom: 10px;
+		right: 20px;
+		height: 20px;
+	}
+
+	.transp {
+		bottom: 8px;
+    	width: 115px;
+		left: 4px;
+		height: 24px;
+	}
+
+	.hexv {
+		position: absolute;
+		bottom: 8px;
+    	left: 120px;
+		height: 24px;
+		margin: 0;
+		width: 90px;
+		min-height: unset;
+	}
+
+	.alpha {
+		background-image: url( 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QA6RXhpZgAATU0AKgAAAAgAA1EAAAQAAAABAAAAAFEBAAMAAAABAAEAAFEEAAEAAAAB/AAAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAQABADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9iK90orwugD//2Q==' );
+
+		.marker {
+			position: absolute;
+			height: calc( 100% + 6px );
+			width: 4px;
+			margin-top: -3px;
+			margin-left: -2px;
+			background-color: black;
+			//border: 1px solid white;
+		}
+	}
+
+	&.with-alpha {
+
+		.sel {
+			left: 4px;
+			top: 4px;
+			bottom: 34px;
+			right: 34px;
+		}
+
+		.hue {
+			top: 4px;
+			right: 4px;
+			bottom: 34px;
+		}
+
+		.hexv {
+			bottom: 4px;
+			left: 4px;
+			width: 120px;
+		}
+
+		.alpha {
+			left: 130px;
+    		right: 4px;
+			height: 24px;
+			bottom: 4px;
+		}
+
+		.transp,
+		.sample {
+			display: none;
+		}
+	}
+
+	&.pal-mode {
+		display: flex;
+		gap: 1px;
+		
+		&>.x-container {
+			width: 100%;
+		}
+
+		.hcol, .vcol {
+			justify-content: space-between;
+		}
+	
+		.hcol {
+			min-height: 90px;
+			margin-top: 40px;
+		}
+	
+		.hexv {
+			bottom: 10px;
+			left: 120px;
+			right: 10px;
+			width: unset;
+		}
+
+		.transp {
+			display: flex;
+		}
+
+		#hsel {
+			gap: 4px;
+			flex-wrap: wrap;
+			justify-content: center;
+		}
+
+		#vsel {
+			gap: 1px;
+			margin-top: 10px;
+		}
+
+		.clr-box {
+			width: 19px;
+			height: 10px;
+		}
+
+		.hclr-box {
+			height: 16px;
+			min-width: 19px;
+			
+			&.selected {
+				border: 1px solid black;
+			}
+
+			font-size: 9px;
+			line-height: 16px;
+			text-align: center;
+		}
+	}	
+}
+
+
+
+.x-tree-view {
+
+	.x-scroll-view {
+		margin: 4px;
+	}
+			
+	.x-tree-item {
+		line-height: 1.5em;
+		white-space: nowrap;
+		overflow: hidden;
+		align-items: center;
+		
+		span {
+			padding: 0 4px;
+		}
+
+		.tree-icon {
+			width: 2em;
+			color:#999;
+			height: 0.8em;
+		}
+
+		&.selected {
+			background-color: var( --x4-selection-color );
+			color: var( --x4-selection-text );
+
+			.tree-icon {
+				color: var( --x4-selection-text );
+			}
+		}
+
+		&:hover {
+			background-color: var( --x4-hover-color );
+			color: var( --x4-hover-text );
+
+			.tree-icon {
+				color: var( --x4-hover-text );
+			}
+		}
+
+		.indent {
+			position: absolute;
+			border-left: 1px solid @BLACK10;
+			height: 100%;
+			top: 0;
+		}
+	}
+
+	.gadgets {
+		border-top: 1px solid @BLACK50;
+		background-color: @BLACK10;
+
+		.x-button {
+			background-color: transparent;
+			&: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-label {
+		background-color: transparent;
+		color: white;
+		font-size: inherit;
+		padding: 0;
+	}
+
+	.x-icon {
+		display: none;
+	}
+}
+
+.x-text-edit.with-gadgets {
+	input {
+		border-right: none;
+	}
+
+	&> .x-icon {
+		border: 1px solid @BLACK50;
+		width: 1.5em;
+		height: 100%;
+		line-height: 1.8em;
+		border-left: none;
+	}
+}
+
+.x-text-hiliter {
+	overflow: hidden;
+	
+	textarea {
+		font-family: monospace;
+		font-size: var( --x4-font-size );
+		padding: 2px;
+
+		resize: none;
+		outline: none;
+		border: 1px solid transparent;
+		width: 100%;
+
+		&:focus {
+			border: 1px solid var( --x4-selection-color )
+		}
+
+		color: transparent;
+		background-color: transparent;
+		color: var( --gray-900 );
+		
+		-moz-tab-size : 4;
+		-o-tab-size : 4;
+		tab-size : 4;
+	}
+
+	.x-syntax-hiliter {
+		font-family: monospace;
+		font-size: var( --x4-font-size );
+		padding: 2px;
+		border: 1px solid transparent;
+		overflow: hidden;
+		white-space: pre;
+		color: rgb(92,92,92);
+		background-color: white;
+
+		-moz-tab-size : 4;
+		-o-tab-size : 4;
+		tab-size : 4;
+			
+		.num {
+			color: #008000;
+		}
+
+		.kword {
+			color: #000080;
+		}
+
+		.str {
+			color: #8b0000;
+		}
+
+		.cmt {
+			color: #8b008b;
+			background-color: fadeout( #8b008b, 80% );
+		}
+
+		.punc {
+			font-weight: bold;
+			color: black;
+		}
+	}
+}
+
+.x-list-view.virtual {
+	.x-list-item {
+		position: absolute;
+		left: 0;
+		right: 0;
+	}
+}
+
+.x-masonry {
+	display: grid;
+	grid-gap: 10px;
+	grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
+	grid-auto-rows: 10px;
+}
+
+.x-tab-bar {
+	border-bottom: 1px solid var(--gray-600);
+    background-color: var(--gray-100);
+
+	&> .x-button {
+		border: none;
+		color: var( --gray-600 );
+
+		&.selected {
+			font-weight: bold;
+			//border: 1px solid var( --x4-selection-color );
+			border-bottom: none;
+			color: var( --x4-selection-color );
+			background-color: transparent;
+		}
+
+		&:focus:not(.selected) {
+			text-decoration: underline;
+			color: black;;
+		}
+	}
+}