From ba2b8f67eff46142c2ee011b537900aee1261462 Mon Sep 17 00:00:00 2001
From: Gilgamesh Athoraya <e9gille@gmail.com>
Date: Thu, 13 May 2021 13:37:52 +0200
Subject: [PATCH] Change format of cursor pos in statusbar to match ODE (#706)

* change format of cursor pos in statusbar

* hide CC GC in statusbar
---
 src/ed.js                         |   4 +-
 src/ide.js                        |  16 +-
 src/prf.js                        |   1 +
 src/se.js                         |   4 +-
 style/dark-theme.css              | 156 +++++++++----------
 style/less/layout/status_bar.less |   5 +-
 style/light-theme.css             | 158 +++++++++----------
 style/ride-base.css               | 249 +++++++++++++++---------------
 8 files changed, 302 insertions(+), 291 deletions(-)

diff --git a/src/ed.js b/src/ed.js
index c1a783d15..36dc5204f 100644
--- a/src/ed.js
+++ b/src/ed.js
@@ -162,7 +162,7 @@
       const ed = this;
       const { me } = ed;
       const model = me.getModel();
-      ed.ide.setCursorPosition(e.position);
+      ed.ide.setCursorPosition(e.position, model.getLineCount());
       if (ed.xline == null) return;
       const n = model.getLineCount();
       const l = e.position.lineNumber;
@@ -331,7 +331,7 @@
       }
       window.focused || window.focus();
       ed.me.focus();
-      ed.ide.setCursorPosition(ed.me.getPosition());
+      ed.ide.setCursorPosition(ed.me.getPosition(), ed.me.getModel().getLineCount());
     },
     insert(ch) {
       this.isReadOnly || this.me.trigger('editor', 'type', { text: ch });
diff --git a/src/ide.js b/src/ide.js
index b5557990d..323080963 100644
--- a/src/ide.js
+++ b/src/ide.js
@@ -45,8 +45,12 @@ D.IDE = function IDE(opts = {}) {
     I.sb_dq.hidden = !1;
     I.sb_sis.hidden = !1;
     I.sb_threads.hidden = !1;
-    I.sb_cc.hidden = !1;
-    I.sb_gc.hidden = !1;
+    ide.showCCGC = (x) => {
+      I.sb_cc.hidden = !x;
+      I.sb_gc.hidden = I.sb_cc.hidden;
+    };
+    D.prf.showCCGC(showCCGC);
+    ide.showCCGC(D.prf.showCCGC());
     ide.wins[0] = new D.Se(ide);
     D.wins = ide.wins;
     D.send('GetSyntaxInformation', {});
@@ -773,8 +777,6 @@ D.IDE = function IDE(opts = {}) {
       I.sb_trap.classList.toggle('active', x.TRAP !== 0);
       I.sb_dq.classList.toggle('active', x.DQ !== 0);
       I.sb_threads.classList.toggle('active', x.NumThreads > 1);
-      // I.sb_cc.classList.toggle('active', x.CompactCount !== 1);
-      // I.sb_gc.classList.toggle('active', x.GarbageCount !== 0);
     },
     ReplyFormatCode(x) {
       const w = D.wins[x.win];
@@ -820,6 +822,8 @@ D.IDE = function IDE(opts = {}) {
         I.sb_io.hidden = true;
         I.sb_trap.hidden = true;
         I.sb_dq.hidden = true;
+        I.sb_cc.hidden = true;
+        I.sb_gc.hidden = true;
         toggleStats();
       } else if (x.name === 'GetConfiguration') {
         D.get_configuration_na = 1;
@@ -836,8 +840,8 @@ D.IDE.prototype = {
     ide.profile = z;
     ide.updTitle();
   },
-  setCursorPosition(p) {
-    I.sb_cp.innerText = `Ln ${p.lineNumber - 1}, Col ${p.column - 1}`;
+  setCursorPosition(p, lc) {
+    I.sb_cp.innerText = `Pos: ${p.lineNumber - 1}/${lc},${p.column - 1}`;
   },
   die() { // don't really, just pretend
     const ide = this;
diff --git a/src/prf.js b/src/prf.js
index 4599fe254..07fc8dc68 100644
--- a/src/prf.js
+++ b/src/prf.js
@@ -48,6 +48,7 @@ D.prf = {};
   ['sbar',               1], //show status bar
   ['selectedExe',        ''],//which interpreter is selected in dropdown in the Connect page?
   ['selectionHighlight', 0],// hightlight matching words
+  ['showCCGC',           0], // show CC and GC in statusbar
   ['showEditorToolbar',  1],// show toolbar in editor windows
   ['snippetSuggestions', 1],// show snippet suggestions
   ['title',              '{WSID}'], //a.k.a. "caption"
diff --git a/src/se.js b/src/se.js
index b0da78b71..735c021bf 100644
--- a/src/se.js
+++ b/src/se.js
@@ -131,7 +131,7 @@
       se.btm = se.me.getContentHeight() + e.scrollTop;
     });
     me.onDidFocusEditorText(() => { se.focusTS = +new Date(); se.ide.focusedWin = se; });
-    me.onDidChangeCursorPosition(e => ide.setCursorPosition(e.position));
+    me.onDidChangeCursorPosition(e => ide.setCursorPosition(e.position, se.me.getModel().getLineCount()));
     se.promptType = 0; // see ../docs/protocol.md #SetPromptType
     se.processAutocompleteReply = D.ac(me);
     // me.viewModel.viewLayout.constructor.LINES_HORIZONTAL_EXTRA_PX = 14;
@@ -350,7 +350,7 @@
       D.elw && D.elw.focus();
       window.focused || window.focus();
       this.me.focus();
-      this.ide.setCursorPosition(this.me.getPosition());
+      this.ide.setCursorPosition(this.me.getPosition(), this.me.getModel().getLineCount());
     },
     insert(ch) {
       this.isReadOnly || this.me.trigger('editor', 'type', { text: ch });
diff --git a/style/dark-theme.css b/style/dark-theme.css
index 567792c6a..ec5c082f1 100644
--- a/style/dark-theme.css
+++ b/style/dark-theme.css
@@ -1,3 +1,27 @@
+.ctl_listview {
+  background-color: #1c1e28;
+  color: white;
+}
+.ctl_listview tr {
+  background-color: rgba(118, 136, 217, 0.5);
+  border-bottom: 1px solid #1c1e28;
+}
+.ctl_listview tr:hover {
+  background-color: rgba(118, 136, 217, 0.25);
+}
+.ctl_listview tr.selected {
+  background-color: #1c1e28;
+}
+#debug {
+  background: #1c1e28;
+}
+#debug .ctl_listview_header {
+  background-color: #7688d9;
+  color: white;
+}
+#debug .ctl_listview_header h2 {
+  font-size: 16px;
+}
 #cn input:not([type=button]):not([type=file]):not([type=submit]):not([type=checkbox]),
 #cn textarea {
   border: 1px solid rgba(169, 169, 169, 0.3);
@@ -72,30 +96,6 @@
   font-size: 16px;
   font-family: monospace;
 }
-.ctl_listview {
-  background-color: #1c1e28;
-  color: white;
-}
-.ctl_listview tr {
-  background-color: rgba(118, 136, 217, 0.5);
-  border-bottom: 1px solid #1c1e28;
-}
-.ctl_listview tr:hover {
-  background-color: rgba(118, 136, 217, 0.25);
-}
-.ctl_listview tr.selected {
-  background-color: #1c1e28;
-}
-#debug {
-  background: #1c1e28;
-}
-#debug .ctl_listview_header {
-  background-color: #7688d9;
-  color: white;
-}
-#debug .ctl_listview_header h2 {
-  font-size: 16px;
-}
 /*various dialogs*/
 #dlg_modal_overlay {
   background-color: black;
@@ -142,60 +142,6 @@
   text-align: left;
   border: 1px solid transparent;
 }
-label {
-  color: #a9a9a9;
-  font-family: Roboto;
-  font-size: 14px;
-  font-weight: 600;
-}
-label.cb_label {
-  cursor: pointer;
-}
-button {
-  background: #7688d9;
-  color: white;
-  border-radius: 4px;
-  background-image: -moz-linear-gradient(90deg, #7688d9 0%, #9eabe4 100%);
-  background-image: -webkit-linear-gradient(90deg, #7688d9 0%, #9eabe4 100%);
-  background-image: -ms-linear-gradient(90deg, #7688d9 0%, #9eabe4 100%);
-}
-button:hover {
-  color: #4c4a4a;
-}
-[type=checkbox] {
-  background-color: #1c1e28;
-  border: 1px solid #7688d9;
-}
-[type=checkbox]:checked {
-  background-color: #7688d9;
-}
-[type=checkbox]:hover::before {
-  background: #323446;
-}
-[type=checkbox]:active::before {
-  background: #7688d9;
-  color: #323446;
-}
-[type=checkbox]:checked::before {
-  color: #7688d9;
-}
-[type=checkbox]:checked:after {
-  color: #1c1e28;
-}
-[type=checkbox]:disabled::before {
-  color: transparent;
-  box-shadow: 0 0 0 1px #7688d9 inset;
-  background: #323446;
-}
-[type=checkbox]:checked:disabled::before {
-  color: grayscale(#7688d9);
-  background: grayscale(#1c1e28);
-}
-select {
-  background-color: #272937;
-  border: 1px solid rgba(169, 169, 169, 0.3);
-  color: white;
-}
 /*Golden Layout*/
 .lm_goldenlayout {
   background: #272937 !important;
@@ -282,6 +228,60 @@ select {
   background-color: white;
   border: 1px dashed #7688d9;
 }
+label {
+  color: #a9a9a9;
+  font-family: Roboto;
+  font-size: 14px;
+  font-weight: 600;
+}
+label.cb_label {
+  cursor: pointer;
+}
+button {
+  background: #7688d9;
+  color: white;
+  border-radius: 4px;
+  background-image: -moz-linear-gradient(90deg, #7688d9 0%, #9eabe4 100%);
+  background-image: -webkit-linear-gradient(90deg, #7688d9 0%, #9eabe4 100%);
+  background-image: -ms-linear-gradient(90deg, #7688d9 0%, #9eabe4 100%);
+}
+button:hover {
+  color: #4c4a4a;
+}
+[type=checkbox] {
+  background-color: #1c1e28;
+  border: 1px solid #7688d9;
+}
+[type=checkbox]:checked {
+  background-color: #7688d9;
+}
+[type=checkbox]:hover::before {
+  background: #323446;
+}
+[type=checkbox]:active::before {
+  background: #7688d9;
+  color: #323446;
+}
+[type=checkbox]:checked::before {
+  color: #7688d9;
+}
+[type=checkbox]:checked:after {
+  color: #1c1e28;
+}
+[type=checkbox]:disabled::before {
+  color: transparent;
+  box-shadow: 0 0 0 1px #7688d9 inset;
+  background: #323446;
+}
+[type=checkbox]:checked:disabled::before {
+  color: grayscale(#7688d9);
+  background: grayscale(#1c1e28);
+}
+select {
+  background-color: #272937;
+  border: 1px solid rgba(169, 169, 169, 0.3);
+  color: white;
+}
 #lb {
   background-color: #1c1e28;
   border-bottom: 1px black solid;
diff --git a/style/less/layout/status_bar.less b/style/less/layout/status_bar.less
index 1798a22c0..74a0be0fd 100644
--- a/style/less/layout/status_bar.less
+++ b/style/less/layout/status_bar.less
@@ -17,7 +17,10 @@
     .tb_btn {
       padding:0;
     }
-  }		
+  }
+  #sb_cp {
+    min-width: 15em;
+  }
   #sb_prf {
     padding: 2px 6px 3px;
   }
diff --git a/style/light-theme.css b/style/light-theme.css
index 513de63b0..7ba4a37bb 100644
--- a/style/light-theme.css
+++ b/style/light-theme.css
@@ -142,60 +142,6 @@
   text-align: left;
   border: 1px solid transparent;
 }
-label {
-  color: #4c4a4a;
-  font-family: Roboto;
-  font-size: 14px;
-  font-weight: 600;
-}
-label.cb_label {
-  cursor: pointer;
-}
-button {
-  background: #7688d9;
-  color: white;
-  border-radius: 4px;
-  background-image: -moz-linear-gradient(90deg, #7688d9 0%, #9eabe4 100%);
-  background-image: -webkit-linear-gradient(90deg, #7688d9 0%, #9eabe4 100%);
-  background-image: -ms-linear-gradient(90deg, #7688d9 0%, #9eabe4 100%);
-}
-button:hover {
-  color: #4c4a4a;
-}
-[type=checkbox] {
-  background-color: #edeff5;
-  border: 1px solid #7688d9;
-}
-[type=checkbox]:checked {
-  background-color: #7688d9;
-}
-[type=checkbox]:hover::before {
-  background: #9eabe4;
-}
-[type=checkbox]:active::before {
-  background: #7688d9;
-  color: #9eabe4;
-}
-[type=checkbox]:checked::before {
-  color: #7688d9;
-}
-[type=checkbox]:checked:after {
-  color: #edeff5;
-}
-[type=checkbox]:disabled::before {
-  color: transparent;
-  box-shadow: 0 0 0 1px #7688d9 inset;
-  background: #9eabe4;
-}
-[type=checkbox]:checked:disabled::before {
-  color: grayscale(#7688d9);
-  background: grayscale(#edeff5);
-}
-select {
-  background-color: #dde0ec;
-  border: 1px solid rgba(169, 169, 169, 0.3);
-  color: #4e65ce;
-}
 /*Golden Layout*/
 .lm_goldenlayout {
   background: #dde0ec !important;
@@ -282,41 +228,59 @@ select {
   background-color: black;
   border: 1px dashed #7688d9;
 }
-/*menu (see ../src/menu.js for the DOM structure)*/
-.menu {
-  background-color: #edeff5;
-  border-bottom: solid grey 1px;
+label {
+  color: #4c4a4a;
+  font-family: Roboto;
+  font-size: 14px;
+  font-weight: 600;
 }
-.menu a,
-.menu a:hover {
-  color: black;
-  font-size: 0.8em;
+label.cb_label {
+  cursor: pointer;
 }
-.menu .m-open {
-  background: rgba(0, 0, 0, 0.2);
+button {
+  background: #7688d9;
+  color: white;
+  border-radius: 4px;
+  background-image: -moz-linear-gradient(90deg, #7688d9 0%, #9eabe4 100%);
+  background-image: -webkit-linear-gradient(90deg, #7688d9 0%, #9eabe4 100%);
+  background-image: -ms-linear-gradient(90deg, #7688d9 0%, #9eabe4 100%);
 }
-.menu .m-open .m-top {
-  border-color: transparent;
+button:hover {
+  color: #4c4a4a;
 }
-.menu .m-box {
-  background-color: white;
-  border-color: rgba(0, 0, 0, 0.2);
+[type=checkbox] {
+  background-color: #edeff5;
+  border: 1px solid #7688d9;
 }
-.menu .m-box a {
-  border: none;
-  border-color: #edeff5;
+[type=checkbox]:checked {
+  background-color: #7688d9;
 }
-.menu .m-box a .m-shc {
+[type=checkbox]:hover::before {
+  background: #9eabe4;
+}
+[type=checkbox]:active::before {
+  background: #7688d9;
+  color: #9eabe4;
+}
+[type=checkbox]:checked::before {
   color: #7688d9;
 }
-.menu .m-box a:focus {
-  background: rgba(0, 0, 0, 0.2);
+[type=checkbox]:checked:after {
+  color: #edeff5;
 }
-.menu .m-box a.m-checked {
-  background: transparent 5px center no-repeat url(img/menu_chk.png);
+[type=checkbox]:disabled::before {
+  color: transparent;
+  box-shadow: 0 0 0 1px #7688d9 inset;
+  background: #9eabe4;
 }
-.menu .m-box a:focus.m-checked {
-  background: rgba(0, 0, 0, 0.2) 5px center no-repeat url(img/menu_chk.png);
+[type=checkbox]:checked:disabled::before {
+  color: grayscale(#7688d9);
+  background: grayscale(#edeff5);
+}
+select {
+  background-color: #dde0ec;
+  border: 1px solid rgba(169, 169, 169, 0.3);
+  color: #4e65ce;
 }
 #lb {
   background-color: #edeff5;
@@ -351,6 +315,42 @@ select {
   border-top: 1px solid #d7d7d3;
   border-bottom: 1px solid white;
 }
+/*menu (see ../src/menu.js for the DOM structure)*/
+.menu {
+  background-color: #edeff5;
+  border-bottom: solid grey 1px;
+}
+.menu a,
+.menu a:hover {
+  color: black;
+  font-size: 0.8em;
+}
+.menu .m-open {
+  background: rgba(0, 0, 0, 0.2);
+}
+.menu .m-open .m-top {
+  border-color: transparent;
+}
+.menu .m-box {
+  background-color: white;
+  border-color: rgba(0, 0, 0, 0.2);
+}
+.menu .m-box a {
+  border: none;
+  border-color: #edeff5;
+}
+.menu .m-box a .m-shc {
+  color: #7688d9;
+}
+.menu .m-box a:focus {
+  background: rgba(0, 0, 0, 0.2);
+}
+.menu .m-box a.m-checked {
+  background: transparent 5px center no-repeat url(img/menu_chk.png);
+}
+.menu .m-box a:focus.m-checked {
+  background: rgba(0, 0, 0, 0.2) 5px center no-repeat url(img/menu_chk.png);
+}
 .breakpoint {
   background: no-repeat transparent center center url(img/breakpoint.png);
 }
diff --git a/style/ride-base.css b/style/ride-base.css
index c5fd8cafb..6109d1662 100644
--- a/style/ride-base.css
+++ b/style/ride-base.css
@@ -190,6 +190,27 @@
 #sistack {
   height: calc(100% - 24px);
 }
+.lm_content {
+  border: none !important;
+}
+.lm_header .lm_tab {
+  padding: 5px 15px 5px 10px !important;
+  margin-top: 0!important;
+  height: 15px!important;
+}
+.lm_close {
+  display: none !important;
+}
+.lm_splitter {
+  opacity: 1 !important;
+}
+.lm_header .lm_tab .lm_title {
+  padding: 0px 10px 2px 0px;
+}
+.lm_header .lm_tab .lm_close_tab {
+  top: 4px !important;
+  right: 6px !important;
+}
 /*various dialogs*/
 #dlg_modal_overlay {
   width: 100%;
@@ -985,27 +1006,6 @@ body .ui-tooltip {
 .ui-icon-closethick {
   background: no-repeat center center url(img/close.png);
 }
-.lm_content {
-  border: none !important;
-}
-.lm_header .lm_tab {
-  padding: 5px 15px 5px 10px !important;
-  margin-top: 0!important;
-  height: 15px!important;
-}
-.lm_close {
-  display: none !important;
-}
-.lm_splitter {
-  opacity: 1 !important;
-}
-.lm_header .lm_tab .lm_title {
-  padding: 0px 10px 2px 0px;
-}
-.lm_header .lm_tab .lm_close_tab {
-  top: 4px !important;
-  right: 6px !important;
-}
 #lb {
   font-family: apl, monospace;
   font-size: 18px;
@@ -1123,63 +1123,6 @@ body .ui-tooltip {
   width: 10px;
   height: 10px;
 }
-#sb {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-#sb div {
-  display: inline-block;
-  padding: 3px 6px 4px;
-  user-select: none;
-  cursor: default;
-}
-#sb div.right {
-  float: right;
-}
-#sb div[hidden] {
-  display: none;
-}
-#sb div .tb_btn {
-  padding: 0;
-}
-#sb #sb_prf {
-  padding: 2px 6px 3px;
-}
-.tooltip {
-  width: 16px;
-  height: 16px;
-  position: relative;
-  display: inline-block;
-}
-/* Tooltip text */
-.tooltip .tooltiptext {
-  visibility: hidden;
-  text-align: center;
-  padding: 5px;
-  border-radius: 6px;
-  /* Position the tooltip text - see examples below! */
-  position: absolute;
-  z-index: 1;
-  top: -5px;
-  left: 25px;
-  min-width: 30vw;
-}
-.tooltip .tooltiptext::after {
-  content: " ";
-  position: absolute;
-  top: 12px;
-  right: 100%;
-  /* To the left of the tooltip */
-  margin-top: -5px;
-  border-width: 5px;
-  border-style: solid;
-}
-/* Show the tooltip text when you mouse over the tooltip container */
-.tooltip:hover .tooltiptext {
-  visibility: visible;
-}
 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
 html,
 body,
@@ -1366,33 +1309,65 @@ h2 {
 #status .t8 {
   color: red;
 }
-#vt_bln {
-  font-family: apl, monospace;
-  font-size: 18px;
+#sb {
   position: absolute;
-  padding: 7px;
-  white-space: pre;
-  overflow: hidden;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
-#vt_tri {
+#sb div {
+  display: inline-block;
+  padding: 3px 6px 4px;
+  user-select: none;
+  cursor: default;
+}
+#sb div.right {
+  float: right;
+}
+#sb div[hidden] {
+  display: none;
+}
+#sb div .tb_btn {
+  padding: 0;
+}
+#sb #sb_cp {
+  min-width: 15em;
+}
+#sb #sb_prf {
+  padding: 2px 6px 3px;
+}
+.tooltip {
+  width: 16px;
+  height: 16px;
+  position: relative;
+  display: inline-block;
+}
+/* Tooltip text */
+.tooltip .tooltiptext {
+  visibility: hidden;
+  text-align: center;
+  padding: 5px;
+  border-radius: 6px;
+  /* Position the tooltip text - see examples below! */
   position: absolute;
-  border: solid;
-  border-width: 6px 6px 0 6px;
-  height: 6px;
-  bottom: -6px;
-  border-left-color: transparent!important;
-  border-right-color: transparent!important;
-  background-color: transparent!important;
-  content: "";
+  z-index: 1;
+  top: -5px;
+  left: 25px;
+  min-width: 30vw;
 }
-#vt_tri.inv {
-  border-width: 0 6px 6px 6px;
-  margin-top: -6px;
-  bottom: auto;
+.tooltip .tooltiptext::after {
+  content: " ";
+  position: absolute;
+  top: 12px;
+  right: 100%;
+  /* To the left of the tooltip */
+  margin-top: -5px;
+  border-width: 5px;
+  border-style: solid;
 }
-.vt_marker {
-  border: dotted transparent 2px;
-  margin: -2px;
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
 }
 .toolbar {
   cursor: default;
@@ -1430,6 +1405,34 @@ h2 {
   margin: 0 8px 0 0;
   vertical-align: middle;
 }
+#vt_bln {
+  font-family: apl, monospace;
+  font-size: 18px;
+  position: absolute;
+  padding: 7px;
+  white-space: pre;
+  overflow: hidden;
+}
+#vt_tri {
+  position: absolute;
+  border: solid;
+  border-width: 6px 6px 0 6px;
+  height: 6px;
+  bottom: -6px;
+  border-left-color: transparent!important;
+  border-right-color: transparent!important;
+  background-color: transparent!important;
+  content: "";
+}
+#vt_tri.inv {
+  border-width: 0 6px 6px 6px;
+  margin-top: -6px;
+  bottom: auto;
+}
+.vt_marker {
+  border: dotted transparent 2px;
+  margin: -2px;
+}
 /*IDE page*/
 #splash,
 #ide,
@@ -1470,29 +1473,6 @@ body.floating-window {
   padding: 0!important;
   height: auto!important;
 }
-/*z-indices; CodeMirror uses 1-10; .dlg uses 100+ */
-.ui-tooltip {
-  z-index: 9999;
-}
-#lb_tip {
-  z-index: 300;
-}
-#vt_bln,
-#vt_tri {
-  z-index: 300;
-}
-.menu .m-box {
-  z-index: 200;
-}
-.ui-front {
-  z-index: 100;
-}
-.ui-selectable-helper {
-  z-index: 100;
-}
-.lm_splitter {
-  z-index: 11 !important;
-}
 /*workspace explorer*/
 /*variable*/
 /*field*/
@@ -1602,6 +1582,29 @@ body.floating-window {
 .bt_collapsed > div {
   display: none;
 }
+/*z-indices; CodeMirror uses 1-10; .dlg uses 100+ */
+.ui-tooltip {
+  z-index: 9999;
+}
+#lb_tip {
+  z-index: 300;
+}
+#vt_bln,
+#vt_tri {
+  z-index: 300;
+}
+.menu .m-box {
+  z-index: 200;
+}
+.ui-front {
+  z-index: 100;
+}
+.ui-selectable-helper {
+  z-index: 100;
+}
+.lm_splitter {
+  z-index: 11 !important;
+}
 .zoom12 #wse,
 .zoom12 #debug,
 .zoom12 #lb_tip *,