/*GENERAL CSS*/
body {
	width:100%;
	height:100%;
   	margin: 0;
   	padding: 0;
	font-size:12px;
	position:relative;
	font-size:12px;
	font-family:'verdana';
	color:white;
}
html {
	width:100%;
	height:100%;
   	margin: 0;
   	padding: 0;
}
h1{font-size:18px;color:white;}
h2{font-size:16px;color:white;}
h3{font-size:14px;color:white;}
h4{font-size:12px;color:white;}
.websocketsOnly{display:none;}
.NOwebsocketsOnly{display:none;}
.smallButton{font-size:9px;}
/*INIT: MAIN ZONES OF INTERFACE*/
#topRule{
	position:absolute;
	z-index:30;
	top:0px;left:0px;right:0px;
	width:100%;
	height:78px;
	background-image:url(design/1/h1.png);
}
#topRule2{
	position:absolute;
	z-index:20;
	top:69px;left:0px;right:0px;
	width:100%;
	height:126px;
	background-image:url(design/1/h2.png);
}
#logo{
	position:absolute;
	top:10px;
	left:20px;
}
#bottomRule{
	position:absolute;
	z-index:20;
	bottom:0px;left:0px;right:0px;
	width:100%;
	height:162px;
	background-image:url(design/1/bottom1.png);
}
.rul1{font-size:10px;color:#dddddd;}
.rul2{font-size:10px;color:#bbbbbb;}
.rul3{font-size:10px;color:#999999;}
#editor{
	position:absolute;
	background-color:#555555;
	bottom:150px;left:0px;right:0px;top:183px;
	overflow:hidden;
}

#editorbuttons{
	top:20px;
	left:20px;
	position:absolute;
	width:200px; 
}
 
#editorzoomable{
  margin: auto;
  background-image:url(design/1/backgrid2.png);  
  background-color:#444444;
  border:1px solid silver;
  width:10000px;
  height:10000px;
  position: absolute;
}

/*TOOLS*/

.toolscell{
 padding-right:5px;
}
.numInd{width:20px;height:10px;background-color:#555555;border:1px solid #333333;font-size:10px;color:silver;}
.numInf{width:20px;height:10px;background-color:#333333;border:1px solid #555555;font-size:10px;color:silver;}
.toolscell h4{color:#dddddd;margin-bottom:3px;margin-top:2px;}
.toolsBox{}
.toolsTable{font-size:10px;color:silver;}
.toolsTable tr{height:22px;}
.toolsTable input[type=radio]{padding:0 0 0 0;margin-right:2px;margin-bottom:0px;margin-top:0px;margin-left:0px;}
.toolsTable input[type=checkbox]{padding:0 0 0 0;margin-right:2px;margin-bottom:0px;margin-top:0px;margin-left:0px;}
.toolsTable input[type=button]{font-size:10px;padding:2 2 2 2;margin-right:0px;margin-bottom:0px;margin-top:0px;margin-left:0px;}
.toolsTable select{font-size:10px;padding:2 2 2 2;margin-right:0px;margin-bottom:0px;margin-top:0px;margin-left:0px;}
.toolsTitleCell{padding-right:10px;}
.tools3rdCell{padding-left:12px;}
.toolsLabel2{color:#888888;}

.shadow{	-webkit-box-shadow: 0 0 14px 0 #000000;
	-moz-box-shadow: 0 0 14px 0 #000000;
	box-shadow: 0 0 14px 0 #000000;}
	
.shadowS{	-webkit-box-shadow: 0 0 7px 0 #000000;
	-moz-box-shadow: 0 0 7px 0 #000000;
	box-shadow: 0 0 7px 0 #000000;}	

/*COMBOBOX HTML CSS*/
.sel-box{
    position:relative;
}
.sel-box-select{
    display:block;
    height:25px;
    border:1px solid #999;
    padding:5px;
}
.toc-odd{
	list-style:none;
	list-style-type: none;
	list-style-position:inside;
   	position:absolute;
   	top:37px;
   	background:#f1f1f1;
	border:1px solid silver;
    display:none;
	padding: 5px;
	height:200px;
	overflow:auto;
	z-index:10;
}
.toc-odd li{
    padding:5px;
	margin:0px;
    border-bottom:1px solid #999;
}
#InitialContainer{
	font-size:18px;
	color:#dddddd;
	font-weight:bold;
}
#WaitContainer{
	font-size:18px;
	color:#dddddd;
	font-weight:bold;
}
.getStartedImg{
	border:1px solid silver;
	cursor:pointer;
}
#imageUploadStart{
	height:100%;width:100%;
	font-size:20px;
	background-color:silver;
	color:#222222;
	cursor:pointer;

}
#imageUploadStartCLASSIC{
	height:100%;width:100%;
	font-size:20px;
	background-color:silver;
	color:#222222;
	cursor:pointer;

}
.disableClicks{
	pointer-events:none;
}
#ImageContainer{
	position:relative;
	height:400px;
	width:800px;
	background-color:white;
	-webkit-box-shadow: 0 0 14px 0 #000000;
	-moz-box-shadow: 0 0 14px 0 #000000;
	box-shadow: 0 0 14px 0 #000000;
},
.shadowed{
	-webkit-box-shadow: 0 0 14px 0 #000000;
	-moz-box-shadow: 0 0 14px 0 #000000;
	box-shadow: 0 0 14px 0 #000000;
}
#QRcodeInfo{
	position:absolute;
	font-size:10px;
	height:100%;
	width:100%;
	top:0px;
	left:0px;
	cursor:move;
	overflow:hidden;

}
#QRcodeCanvas{
	position:absolute;
	height:200px;
	width:200px;
	top:0px;
	left:0px;
	cursor:move;

}
#QRcodeCanvasImage{
	position:relative;
	height:100%;
	width:100%;
}
#TrappedLoader{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	display:none;
}
#TrappedLoaderImg{
	margin-top:25%;
	width:50%;
	height:50%;
}

/*INSIDE EDITOR QRCODE EDITION*/
#workzone{position:absolute;width:100%;height:100%;background-image:url(shadows/backgrid1.png);z-index:-1;}
#qrcodeMask{width:100%;height:100%;position:relative;border:1px solid green;}
.Trapped{border:1px solid red;width:400px;Height:400px;background-color:gray;cursor:move;position:relative;-webkit-box-shadow: 0 0 14px 0 #000000;
-moz-box-shadow: 0 0 14px 0 #000000;
box-shadow: 0 0 14px 0 #000000;}

#img{display:block;margin-left:auto;margin-right:auto;}
#Background{width:400px;height:400px;z-index:-1;position:absolute;background-color:white;}
#Generated{z-index:-1;border:1px solid aaaaaa;position:absolute;-webkit-box-shadow: 0 2px 20px 0 #000000;
-moz-box-shadow: 0 2px 20px 0 #000000;
box-shadow: 0 2px 20px 0 #000000}
#GeneratedCell{}

.bottomTable h4{color:#666666;margin-bottom:0px;margin-top:10px;font-weight:normal;font-size:11px;}
.bottomTable td{padding-left:10px;width:80px;}
.controlCanvas{border:1px solid #888888;width:70px;height:70px;color:#cccccc;text-align:center;}
.canvasImg{width:70px;height:70px;}
.centered {  
	background-color:silver;
  position:fixed;
  z-index: 100;  
  top:50%;  
  left:50%;  
  margin:-185px 0 0 -460px;  
  width:920px;  
  height:370px;  
  z-index:1002;
}  
#modalDiv{background-color:black;height:100%;width:100%;z-index:1001;opacity: 0.5;position: fixed; left: 0px; top: 0px; z-index: 1001;}

/* QRCODEBOX INTRO — LC2 visual language */
body.intro-active{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto;background:#06131d;}
body.intro-active>#topRule,
body.intro-active>#topRule2,
body.intro-active>#bottomRule,
body.intro-active>#editor{visibility:hidden!important;pointer-events:none!important;}
body:not(.intro-active)>#introPage{display:none!important;}

#introPage{--intro-ink:#090a0c;--intro-ink-2:#14171b;--intro-wine:#4f575e;--intro-coral:#c9d0d5;--intro-paper:#eceff1;--intro-line:rgba(224,230,234,.14);position:relative;z-index:2000;min-height:100vh;overflow:hidden;contain:layout style paint;isolation:isolate;background:radial-gradient(circle at 78% 32%,rgba(174,184,191,.11),transparent 30%),linear-gradient(128deg,#08090b 36%,#111419 72%,#08090b);color:#f4f6f7;font-family:'DM Sans',Arial,sans-serif;box-sizing:border-box;}
#introPage *{box-sizing:border-box;}
.intro-noise{position:absolute;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.intro-nav{height:88px;display:flex;align-items:center;padding:0 5vw;border-bottom:1px solid var(--intro-line);position:relative;z-index:2;}
.intro-brand{position:relative;display:flex;align-items:center;gap:3.5px;height:24px;color:#eef1f3;text-decoration:none;font-family:'Space Grotesk',Arial,sans-serif;}
.qrbox-vector-logo{position:relative;display:inline-block;width:84px;height:31px;isolation:isolate;}
.qrbox-vector-logo:before{content:'';position:absolute;z-index:-1;inset:7px 4px 1px;background:rgba(226,234,238,.3);filter:blur(9px);border-radius:50%;opacity:.6;}
.qrbox-vector-logo svg,.qrbox-vector-logo img{display:block;width:100%;height:100%;overflow:visible;object-fit:contain;}
.qrbox-vector-logo text{font-family:'Space Grotesk',Arial,sans-serif;font-weight:700;letter-spacing:2px;}
.qrbox-logo-top text{font-size:17px;fill:none;stroke:#e8edef;stroke-width:1.15px;paint-order:stroke;}
.qrbox-logo-dots rect{fill:#e8edef;}
.qrbox-logo-box rect{fill:none;stroke:#e8edef;stroke-width:2px;}
.qrbox-logo-box text{font-size:18px;fill:#e8edef;letter-spacing:1px;}
.intro-brand .qrbox-vector-logo{width:76px;height:28px;}
.intro-brand:after{content:'';position:absolute;z-index:3;top:-5px;bottom:-5px;left:-7px;width:1px;background:linear-gradient(transparent,rgba(238,241,243,.85),transparent);box-shadow:0 0 7px rgba(238,241,243,.45);opacity:0;pointer-events:none;animation:introLogoScan 8s ease-in-out infinite;}
.intro-qmark{position:relative;display:block;box-sizing:border-box;flex:0 0 16.5px;width:16.5px;height:16.5px;border:3px solid #eef1f3;border-radius:2px;transform:translateY(-.08px);animation:introQDetect 8s ease-in-out infinite;}
.intro-qmark:before{display:none;}
.intro-qmark i{position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:1px;background:#eef1f3;transform:translate(-50%,-50%);animation:introQCore 8s ease-in-out infinite;}
.intro-qmark:after{content:'';position:absolute;right:-5px;bottom:-5px;width:9px;height:3px;border-radius:2px;background:#eef1f3;transform:rotate(45deg);transform-origin:center;box-shadow:0 0 0 1px #090a0c;}
.intro-wordmark{display:flex;align-items:center;height:24px;font-size:23px;line-height:1;letter-spacing:-.04em;white-space:nowrap;}
.intro-wordmark strong{display:block;color:#f4f6f7;font-size:inherit;font-weight:700;line-height:1;letter-spacing:-.07em;}
.intro-wordmark>span{display:block;margin-left:4px;color:#899399;font-size:inherit;font-weight:500;line-height:1;letter-spacing:.01em;}
.intro-wordmark small{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:16px;margin-left:6px;padding:0 2px;border:0;background:#aeb6bb;color:#090a0c;font:700 17px 'Space Grotesk',Arial,sans-serif;line-height:1;letter-spacing:-.06em;transform:translateY(-.33px);animation:introBoxRead 8s ease-in-out infinite;}
.intro-nav-meta{margin-left:auto;color:#81929b;font:500 10px 'Space Grotesk',Arial,sans-serif;letter-spacing:.15em;}
.intro-nav-meta a{color:inherit;text-decoration:none;transition:color .2s ease;}
.intro-nav-meta a:hover{color:#eef1f3;}
.intro-nav-meta i,.intro-kicker i,.intro-live i{display:inline-block;width:7px;height:7px;margin-right:9px;background:#dce1e4;box-shadow:0 0 12px rgba(220,225,228,.7);}
.intro-meta-separator{margin:0 10px;color:#435862;}
.intro-languages{display:flex;margin-left:20px;border-left:1px solid var(--intro-line);padding-left:16px;}
.intro-languages button{border:0;background:transparent;color:#596970;padding:4px 5px;cursor:pointer;font:600 9px 'Space Grotesk',Arial,sans-serif;letter-spacing:.1em;transition:color .2s ease;}
.intro-languages button:hover,.intro-languages button.is-active{color:#f1f4f5;}
#introThinkingQr{position:absolute;z-index:0;top:-8vh;left:-8vw;width:115vw;height:115vh;opacity:.34;pointer-events:none;transform-origin:center;mask-image:radial-gradient(ellipse at 58% 48%,#000 0,rgba(0,0,0,.88) 42%,rgba(0,0,0,.48) 70%,transparent 94%);animation:introThinkingDrift 18s ease-in-out infinite alternate;}
.intro-hero{position:relative;z-index:1;display:grid;grid-template-columns:1.04fr .96fr;gap:6vw;align-items:center;min-height:670px;padding:80px 5vw 90px;}
.intro-copy{max-width:780px;}
.intro-kicker{margin:0;color:#c8d1d5;font:500 11px 'Space Grotesk',Arial,sans-serif;letter-spacing:.16em;}
.intro-kicker i{background:#aeb7bd;box-shadow:0 0 15px rgba(220,225,228,.55);}
.intro-copy h1{max-width:850px;margin:30px 0 26px;color:#fff;font:600 clamp(54px,6.5vw,96px)/.96 'Space Grotesk',Arial,sans-serif;letter-spacing:-.058em;}
.intro-copy h1 em{color:#aeb7bd;font-style:normal;}
.intro-lead{max-width:740px;margin:0;color:#d5dade;font-size:clamp(19px,1.12vw,24px);font-weight:500;line-height:1.65;}
.intro-actions{display:flex;align-items:center;gap:30px;margin-top:36px;}
.intro-primary,.intro-method button{border:0;border-radius:0;background:#d9dee1;color:#0a0b0d;padding:17px 23px;cursor:pointer;font:700 14px 'DM Sans',Arial,sans-serif;transition:background .2s ease,transform .2s ease;}
.intro-primary:hover,.intro-method button:hover{background:#fff;transform:translateY(-2px);}
.intro-primary span,.intro-method button span{margin-left:10px;color:#687279;}
.intro-action-note{max-width:390px;margin:0;color:#cbd2d6;font-size:14px;line-height:1.45;}
.intro-action-note span{display:inline-block;margin-right:10px;color:#87939a;transition:transform .2s ease;}
.intro-actions:hover .intro-action-note span{transform:translateX(-4px);}
.intro-signals{display:grid;grid-template-columns:repeat(3,1fr);margin-top:68px;border-top:1px solid var(--intro-line);border-bottom:1px solid var(--intro-line);}
.intro-signals>div{padding:18px 18px 18px 0;}
.intro-signals>div+div{padding-left:18px;border-left:1px solid var(--intro-line);}
.intro-signals small{display:block;color:#aeb7bd;font:500 9px 'Space Grotesk',Arial,sans-serif;letter-spacing:.14em;}
.intro-signals strong{display:block;margin-top:7px;color:#e3eaed;font:600 11px 'Space Grotesk',Arial,sans-serif;letter-spacing:.08em;}
.intro-signals span{display:block;margin-top:4px;color:#687c86;font-size:10px;}
.intro-visual{position:relative;min-height:515px;padding:22px;border:1px solid var(--intro-line);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.01));box-shadow:0 40px 80px rgba(0,0,0,.28);overflow:hidden;}
.intro-visual:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:38px 38px;}
.intro-visual-head{position:relative;z-index:3;display:flex;justify-content:space-between;color:#899aa3;font:500 9px 'Space Grotesk',Arial,sans-serif;letter-spacing:.14em;}
.intro-live i{width:6px;height:6px;margin-right:6px;}
.intro-gallery{position:absolute;inset:58px 28px 38px;}
.intro-card{position:absolute;margin:0;padding:8px 8px 26px;background:#dfe3e5;box-shadow:0 20px 45px rgba(0,0,0,.48);transition:transform .45s ease;}
.intro-card img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.06);}
.intro-card-main img{animation:introImageRead 9s ease-in-out infinite;}
.intro-card figcaption{position:absolute;right:8px;bottom:8px;left:8px;color:#5e696d;font:500 8px 'Space Grotesk',Arial,sans-serif;letter-spacing:.11em;}
.intro-card figcaption b{margin-right:8px;color:#2e3438;}
.intro-card-main{z-index:2;inset:35px 19% 10px 8%;transform:rotate(-2deg);}
.intro-card-top{z-index:1;top:0;right:1%;width:38%;height:48%;transform:rotate(4deg);}
.intro-card-bottom{z-index:3;right:0;bottom:0;width:37%;height:47%;transform:rotate(2deg);}
.intro-visual:hover .intro-card-main{transform:rotate(-3deg) translate(-5px,-4px);}
.intro-visual:hover .intro-card-top{transform:rotate(6deg) translate(4px,-6px);}
.intro-visual:hover .intro-card-bottom{transform:rotate(1deg) translate(6px,4px);}
.intro-method{position:relative;z-index:2;display:grid;grid-template-columns:.35fr 1.3fr auto;gap:5vw;align-items:center;padding:38px 5vw;border-top:1px solid var(--intro-line);background:#040e15;}
.intro-method>span{color:#aeb7bd;font:500 10px 'Space Grotesk',Arial,sans-serif;letter-spacing:.16em;}
.intro-method p{max-width:820px;margin:0;color:#aab7bd;font-size:14px;line-height:1.7;}
.intro-method button{padding:13px 18px;background:transparent;border:1px solid rgba(255,255,255,.35);color:#eef1f3;}
@keyframes introLogoScan{0%,18%,72%,100%{transform:translateX(0);opacity:0}24%{opacity:.42}48%{transform:translateX(121px);opacity:.68}58%{transform:translateX(155px);opacity:0}}
@keyframes introQDetect{0%,20%,66%,100%{box-shadow:none;border-color:#eef1f3}27%,40%{box-shadow:0 0 10px rgba(238,241,243,.28);border-color:#fff}}
@keyframes introQCore{0%,20%,66%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}29%,39%{opacity:.72;transform:translate(-50%,-50%) scale(.72)}}
@keyframes introBoxRead{0%,42%,68%,100%{background:#aeb6bb;color:#090a0c}50%,58%{background:#eef1f3;color:#090a0c}}
@keyframes introImageRead{0%,24%,100%{filter:saturate(.86) contrast(1.06) brightness(1)}45%,62%{filter:saturate(.94) contrast(1.12) brightness(1.035)}}
@keyframes introThinkingDrift{0%{transform:translate3d(-2.5%,-1.5%,0) rotate(-11deg) scale(1.08)}50%{transform:translate3d(1%,1%,0) rotate(-9.8deg) scale(1.11)}100%{transform:translate3d(3%,2%,0) rotate(-8.8deg) scale(1.14)}}
@media(max-width:900px){.intro-hero{grid-template-columns:1fr;padding-top:65px}.intro-copy{max-width:none}.intro-visual{min-height:540px}.intro-method{grid-template-columns:1fr}.intro-method button{justify-self:start}.intro-signals{margin-top:48px;}}
@media(max-width:560px){.intro-nav{height:72px;padding:0 22px}.intro-nav-meta{display:none}.intro-languages{margin-left:auto}.intro-languages button{padding:4px}.intro-languages button.is-active{color:#fff}#introThinkingQr{top:-12vh;left:-80vw;width:250vw;height:150vh;opacity:.28}.intro-hero{padding:54px 22px 65px}.intro-copy h1{font-size:47px}.intro-lead{font-size:16px}.intro-actions{align-items:flex-start;flex-direction:column}.intro-signals{grid-template-columns:1fr}.intro-signals>div+div{padding-left:0;border-left:0;border-top:1px solid var(--intro-line)}.intro-visual{min-height:430px;padding:16px}.intro-gallery{inset:52px 16px 28px}.intro-card-main{inset:30px 8% 10px 0}.intro-card-top{width:42%}.intro-card-bottom{width:43%}.intro-method{padding:34px 22px}}
@media(prefers-reduced-motion:reduce){#introThinkingQr,.intro-brand:after,.intro-qmark,.intro-qmark i,.intro-wordmark small,.intro-card-main img{animation:none}.intro-card{transition:none}}

/* V1 source/preview/output metadata in the desktop footer. */
#bottomRule .editor-output-info{position:static;z-index:auto;display:none;align-items:center;gap:12px;min-width:0;padding:0;margin:0 8px 0 0;border:0;border-radius:0;background:transparent;box-shadow:none;font:10px/1.2 "DM Sans",Arial,sans-serif;color:#b7c7d2;backdrop-filter:none;white-space:nowrap}
#bottomRule .editor-output-info.has-image{display:flex}
#bottomRule .editor-output-info>div,#bottomRule .editor-output-info>label{display:flex;align-items:center;gap:5px;margin:0}
#bottomRule .editor-output-info span{font-size:8px;letter-spacing:.08em;color:#6f8797}
#bottomRule .editor-output-info strong{font-weight:600;color:#d9e5eb}
#bottomRule .editor-output-info input{width:43px;padding:1px 3px;border:1px solid #35434a;border-radius:2px;background:#171b1e;color:#e8f7ff;text-align:right;font:600 9px "DM Sans",Arial,sans-serif}
#bottomRule .footer-separator{width:1px;height:16px;margin:0 7px;background:#343b3f;flex:0 0 auto}
#bottomRule .footer-coordinate{display:inline-flex;align-items:center;gap:3px;margin-left:7px}

/* Source-space output metrics and export controls */
#bottomRule .editor-output-info input{pointer-events:auto;user-select:text;-webkit-user-select:text;width:52px;}
#bottomRule .footer-position-toggle{display:inline-flex;align-items:center;cursor:pointer;user-select:none;}
#bottomRule .footer-position-toggle:hover .rul3{color:#fff;}
.editor-export-zone{display:flex;gap:8px;align-items:center;justify-content:center;}
.editor-export-zone a,.editor-export-zone button{height:28px;padding:0 12px;border:1px solid #465057;background:#171c1f;color:#dce7ec;text-decoration:none;font:650 9px 'Space Grotesk',Arial,sans-serif;letter-spacing:.08em;cursor:pointer;}
.editor-export-zone a{display:inline-flex;align-items:center;}
.editor-export-zone button:hover,.editor-export-zone a:hover{background:#252c30;border-color:#718089;}
.editor-export-zone button:disabled{opacity:.45;cursor:wait;}

/* V15 rendering mode selector */
.blend-mode-switch{display:flex;gap:2px;white-space:nowrap}
.blend-mode-switch button{border:1px solid #4a5358;background:#171c1f;color:#8f9a9f;font-size:9px;padding:5px 6px;cursor:pointer;text-transform:uppercase}
.blend-mode-switch button.is-active{background:#343d42;color:#fff;border-color:#758087}
.blend-mode-select{width:100%;min-width:92px;background:#171c1f;color:#e5eaed;border:1px solid #4a5358;padding:4px 5px;font-size:10px;text-transform:uppercase}


/* V39: the native language selector replaces the three compact header buttons on narrow phones. */
.qrcb-language-select{display:none;}
@media(max-width:450px){
 .intro-languages{padding-left:8px;}
 .intro-languages button{display:none;}
 .intro-languages .qrcb-language-select{display:block;}
}