:root{--link-color: rgb(100, 113, 251);--yellow: rgb(230, 226, 172);--paniv-pa-border-color: 2px;--paniv-red: #E10A1D;--paniv-blue: #006ABA;--paniv-green: #009640;--paniv-yellow: #FDD40E;--paniv-orange: #F7931E;--paniv-a: "A";--paniv-b: "B";--paniv-c: "C";--paniv-d: "D";--paniv-e: "E";--paniv-f: "F";--paniv-g: "G";--paniv-h: "H";--paniv-i: "I";--paniv-k: "K";--paniv-l: "L";--paniv-m: "M";--paniv-o: "O";--paniv-p: "P";--paniv-q: "Q";--paniv-u: "U";--paniv-r: "R";--paniv-t: "T";--paniv-x: "X";--paniv-z: "Z";--paniv-y: "Y";--paniv-1: "1";--paniv-2: "2";--paniv-3: "3";--paniv-4: "4";--paniv-5: "5";--paniv-6: "6";--paniv-7: "7";--paniv-ii: "II";--paniv-iii: "III";--paniv-plus: "+";--paniv-spade: "♠";--paniv-diamond: "♦";--paniv-heart: "♥";--paniv-club: "♣";--paniv-glass: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><!-- Created with Inkscape (http://www.inkscape.org/) --><svg width="4.3193498mm" height="4.9278903mm" viewBox="0 0 4.3193498 4.9278903" version="1.1" id="svg1632" inkscape:version="1.1.2 (b8e25be833, 2022-02-05)" sodipodi:docname="glass.svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview id="namedview1634" pagecolor="%23ffffff" bordercolor="%23666666" borderopacity="1.0" inkscape:pageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:document-units="mm" showgrid="false" inkscape:zoom="2.9611953" inkscape:cx="96.41377" inkscape:cy="3.0393132" inkscape:window-width="1920" inkscape:window-height="1017" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="layer1" /><defs id="defs1629" /><g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1"><path class="st10" d="m 0.1488415,0.1488415 h 4.021667 c 0,0 0,0.502709 0,1.74625 0,1.481667 -1.031875,2.090209 -1.984375,2.090209 -0.9525,0 -1.984375,-0.635 -1.984375,-2.090209 -0.05292,-1.137708 -0.05292,-1.74625 -0.05292,-1.74625 z" id="path69" style="fill:none;stroke:%23170606;stroke-width:0.297683;stroke-miterlimit:10" /><line class="st10" x1="0.14884342" y1="4.7790489" x2="4.1705108" y2="4.7790489" id="line71" style="fill:none;stroke:%23170606;stroke-width:0.297683;stroke-miterlimit:10" /><line class="st10" x1="2.186136" y1="3.9852943" x2="2.186136" y2="4.7790489" id="line73" style="fill:none;stroke:%23170606;stroke-width:0.297683;stroke-miterlimit:10" /></g></svg>');--paniv-key: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><!-- Created with Inkscape (http://www.inkscape.org/) --><svg width="3.003021mm" height="4.6698971mm" viewBox="0 0 3.003021 4.6698971" version="1.1" id="svg1993" inkscape:version="1.1.2 (b8e25be833, 2022-02-05)" sodipodi:docname="key.svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview id="namedview1995" pagecolor="%23ffffff" bordercolor="%23666666" borderopacity="1.0" inkscape:pageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:document-units="mm" showgrid="false" inkscape:zoom="0.74029882" inkscape:cx="396.46153" inkscape:cy="345.8063" inkscape:window-width="1920" inkscape:window-height="1017" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="layer1" /><defs id="defs1990" /><g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1"><path class="st9" d="m 2.9038025,1.0517185 c 0,-0.50271 -0.608542,-0.9525 -1.402292,-0.9525 -0.740833,0 -1.402292,0.39687 -1.402292,0.9525 0,0.50271 0.555625,0.89958 1.296459,0.9525 v 1.34937 h -0.15875 v 1.00542 h 0.211666 v 0.21167 h 0.15875 v -2.61938 c 0.687917,0 1.296459,-0.39687 1.296459,-0.89958 z m -1.402292,0.84667 c -0.635,0 -1.190625,-0.34396 -1.190625,-0.84667 0,-0.50271 0.555625,-0.84667 1.190625,-0.84667 0.635,0 1.190625,0.34396 1.190625,0.84667 0,0.50271 -0.47625,0.84667 -1.190625,0.84667 z" id="path67" style="fill:%231c0000;stroke:%23170606;stroke-width:0.198437;stroke-miterlimit:10" /></g></svg>');--30-background-color: #FDD40E;--60-background-color: #009640;--120-background-color: #006ABA;--HT-background-color: #E10A1D}input[type=range]{overflow:hidden;-webkit-appearance:none;background-color:var(--yellow);border-radius:20px;height:10px}input[type=range]::-webkit-slider-thumb{width:10px;-webkit-appearance:none;height:10px;cursor:ew-resize;background:var(--link-color)}#paniv-slider{width:400px}.slider-marker{position:absolute;width:2px;height:20px;background-color:var(--link-color);top:5px;transform:translate(-50%);cursor:pointer;z-index:-1;transition:all .11s ease-in-out}.slider-marker:hover{top:7px}.slider-marker p{position:absolute;color:var(--link-color);left:50%;transform:translate(-50%);padding-top:10px}.slider-marker p:hover{text-decoration:underline}.test-control{display:flex;flex-direction:column;align-items:center}.select-test{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:40px}.select-test select{height:30px;background-color:gray;color:#fff;border-radius:12px;text-align:center}body{background-color:#000;isolation:isolate;font-family:Arial,Helvetica,sans-serif}p,.paniv-label{color:#fff}.paniv-test{display:grid;place-items:center;grid-template-columns:repeat(7,56px);grid-template-rows:repeat(3,60px);margin-right:50px;margin-bottom:40px}.pa-control-check{margin:18px 0}.paniv-test.paniv-unaligned{grid-template-columns:repeat(7,35px);grid-template-rows:repeat(3,60px)}.paniv-test.paniv-close-gap{grid-template-columns:repeat(7,50px)}.paniv-test.paniv-1-per-2-col-gap{grid-template-columns:repeat(7,35px)}.paniv-info{margin-top:10px;height:40px}.paniv-test div{position:relative}.l1{grid-row:1}.l2{grid-row:2}.l3{grid-row:3}.c1{grid-column:1}.c2{grid-column:2}.c3{grid-column:3}.c4{grid-column:4}.c5{grid-column:5}.c6{grid-column:6}.c7{grid-column:7}.circle{position:relative;z-index:1;mix-blend-mode:screen;-webkit-mix-blend-mode:screen;transform:translateZ(0)}.circle.white,.circle.orange{mix-blend-mode:darken;-webkit-mix-blend-mode:darken}.paniv-test{background-color:transparent}#paniv-displace-type,#paniv-displace-info{color:var(--yellow)}.circle:before{content:"";color:#000;box-sizing:border-box;border-style:dotted;border-width:2px;border-color:transparent;font-family:Arial;position:absolute;background-color:#fff;z-index:1;top:0;left:0;width:50px;height:50px;border-radius:50%;line-height:48px;text-align:center;font-size:18pt}.circle.paniv-is-over:before{z-index:2}.paniv-letter-a:before{content:var(--paniv-a)}.paniv-letter-b:before{content:var(--paniv-b)}.paniv-letter-c:before{content:var(--paniv-c)}.paniv-letter-d:before{content:var(--paniv-d)}.paniv-letter-e:before{content:var(--paniv-e)}.paniv-letter-f:before{content:var(--paniv-f)}.paniv-letter-g:before{content:var(--paniv-g)}.paniv-letter-h:before{content:var(--paniv-h)}.paniv-letter-i:before{content:var(--paniv-i)}.paniv-letter-k:before{content:var(--paniv-k)}.paniv-letter-l:before{content:var(--paniv-l)}.paniv-letter-m:before{content:var(--paniv-m)}.paniv-letter-p:before{content:var(--paniv-p)}.paniv-letter-o:before{content:var(--paniv-o)}.paniv-letter-q:before{content:var(--paniv-q)}.paniv-letter-u:before{content:var(--paniv-u)}.paniv-letter-r:before{content:var(--paniv-r)}.paniv-letter-t:before{content:var(--paniv-t)}.paniv-letter-x:before{content:var(--paniv-x)}.paniv-letter-y:before{content:var(--paniv-y)}.paniv-letter-z:before{content:var(--paniv-z)}.paniv-letter-1:before{content:var(--paniv-1)}.paniv-letter-2:before{content:var(--paniv-2)}.paniv-letter-3:before{content:var(--paniv-3)}.paniv-letter-4:before{content:var(--paniv-4)}.paniv-letter-5:before{content:var(--paniv-5)}.paniv-letter-6:before{content:var(--paniv-6)}.paniv-letter-7:before{content:var(--paniv-7)}.paniv-letter-ii:before{content:var(--paniv-ii)}.paniv-letter-iii:before{content:var(--paniv-iii)}.paniv-letter-plus:before{content:var(--paniv-plus)}.paniv-letter-spade:before{content:var(--paniv-spade)}.paniv-letter-diamond:before{content:var(--paniv-diamond);color:var(--paniv-red)}.paniv-letter-heart:before{content:var(--paniv-heart);color:var(--paniv-red)}.paniv-letter-club:before{content:var(--paniv-club)}.paniv-letter-glass:before{content:var(--paniv-glass)}.paniv-letter-key:before{content:var(--paniv-key)}.green:before{background-color:var(--paniv-green)}.yellow:before{background-color:var(--paniv-yellow)}.red:before{background-color:var(--paniv-red)}.blue:before{background-color:var(--paniv-blue)}.orange:before{background-color:var(--paniv-orange)}.white:before{background-color:#fff}.circle.white{mix-blend-mode:multiply;-webkit-mix-blend-mode:multiply}.paniv-pa{mix-blend-mode:darken;-webkit-mix-blend-mode:darken;z-index:0}.paniv-pa:before{border-color:var(--paniv-pa-border-color)}.right-20:before{left:20px}.left-20:before{left:-20px}.select-test ul{display:block;background-color:#333;border-radius:5px;padding:10px;margin-top:5px;list-style-type:none}.select-test li{color:#fff;padding:5px 0;cursor:pointer}.select-test .list-item:hover{transform:translate(-3px)}.select-test .list-group{background-color:red;padding:5px;border-radius:5px;margin-top:10px}.select-test .list-item{transition:transform .2s ease;padding-left:15px}#test-title{text-align:center;color:#fff}#test-title .group{padding:5px;border-radius:6px}#test-search{padding:5px;border-radius:4px}