[data-theme=gray] {
	--color-schema: "gray";
  --SignalCol:#FF0000;
  --IconInvert:0%;
  --DragIconBrightness:50%;
  --CmpCol3d:rgba(255,255,0,77);
  --MainBgCol:rgb(87,97,107);
  --Invisible:#FF000000;
  --MenuBarBgCol:#68798a;
  --DlgFgCol:#FFFFFF;
  --DlgFgColA03:#FFFFFF55;
  --MenuBarHlCol:#A3A3A3;
  --DlgBarFgCol:#FFFFFF;
  --MenuBarMnuFgCol:#000000;
  --MenuBarMnuBrdCol: #CCCCCC;
  --CtxMenuBgCol:#68798aDD;
  --BrwsContentBgCol:#68798a99;
  --BrwsBarBgCol:#46525e;
  --BrwsBarHlCol:#0a87c1;
  --BrwsDragBarBgCol:#68798aBB;
  --IconHlCol:#006f91;
  --BtnBgCol:#0a87c1;
  --BtnHlCol:#006f91;
  --RowHlCol:#006f9155;
  --DlgBarBgCol:#0a87c1;
  --DlgBgCol:#47515BE0;
  --DlgBgColA03:#47515B55;
  --DlgBgColA07:#47515BAA;
  --DlgBgColNoAlpha:#47515BFF;
  --DlgContentBgCol:#47515BE0;
  --DlgBorderCol:#47515BE0;
  --StatTxtFgCol:#FFFFFF;
  --LoginBgCol:#00FF0055;
  --TableHdBgCol1:#0a87c1;
  --TableHdBgCol2:#006f91;
  --TransparentArea:#F5F5F5CC;
  --SensorFgCol:#000000;
  --SensorBgCol:#FFFFFF;
}

[data-theme=wgPub] {
	--color-schema: "wgPub";
  --SignalCol:#FF0000;
  --IconInvert:0%;
  --DragIconBrightness:50%;
  --CmpCol3d:rgba(255,255,0,77);
  --MainBgCol:rgb(87,97,107);
  --Invisible:#FF000000;
  --MenuBarBgCol:#888888;
  --DlgFgCol:#FFFFFF;
  --DlgFgColA03:#FFFFFF55;
  --MenuBarHlCol:#A3A3A3;
  --DlgBarFgCol:#FFFFFF;
  --MenuBarMnuFgCol:#000000;
  --MenuBarMnuBrdCol: #CCCCCC;
  --CtxMenuBgCol:#888888DD;
  --BrwsContentBgCol:#88888899;
  --BrwsBarBgCol:#777777;
  --BrwsBarHlCol:#FFC300;
  --BrwsDragBarBgCol:#888888BB;
  --IconHlCol:#1E90FF;
  --BtnBgCol:#1E90FF;
  --BtnHlCol:#0070D3;
  --RowHlCol:#0070D355;
  --DlgBarBgCol:#FFC300;
  --DlgBgCol:#47515BE0;
  --DlgBgColA03:#47515B55;
  --DlgBgColA07:#47515BAA;
  --DlgBgColNoAlpha:#47515BFF;
  --DlgContentBgCol:#47515BE0;
  --DlgBorderCol:#47515BE0;
  --StatTxtFgCol:#000000;
  --LoginBgCol:#00FF0055;
  --TableHdBgCol1:#1E90FF;
  --TableHdBgCol2:#0070D3;
  --TransparentArea:#F5F5F5CC;
}

[data-theme=dark] {
	--color-schema: "dark";
  --SignalCol:#FF0000;
  --IconInvert:0%;
  --DragIconBrightness:40%;
  --CmpCol3d:rgba(255,255,0,50);
  --MainBgCol:rgb(43,43,43);
  --Invisible:#FF000000;
  --MenuBarBgCol:#585B5D;
  --DlgFgCol:#FFFFFF;
  --DlgFgColA03:#FFFFFF55;
  --MenuBarHlCol:#4D4F51;
  --DlgBarFgCol:#FFFFFF;
  --MenuBarMnuFgCol:#000000;
  --MenuBarMnuBrdCol:#CCCCCC;
  --BrwsContentBgCol:#585B5D99;
  --CtxMenuBgCol:#585B5DDD;
  --BrwsBarBgCol:#3F4143;
  --BrwsBarHlCol:#FA6800;
  --BrwsDragBarBgCol:#888888BB;
  --IconHlCol:#B54800;
  --BtnBgCol:#B54800;
  --BtnHlCol:#FA6800;
  --RowHlCol:#FA680055;
  --DlgBarBgCol:#B54800;
  --DlgBgCol:#3F4143E0;
  --DlgBgColA03:#3F414355;
  --DlgBgColA07:#3F4143AA;
  --DlgBgColNoAlpha:#3F4143FF;
  --DlgContentBgCol:#3F4143E0;
  --DlgBorderCol:#3F4143E0;
  --StatTxtFgCol:#FFFFFF;
  --LoginBgCol:#00FF0055;
  --TableHdBgCol1:#FA6800;
  --TableHdBgCol2:#B54800;
  --TransparentArea:#F5F5F5CC;
  --SensorFgCol:#000000;
  --SensorBgCol:#FFFFFF;
}

:root, [data-theme=light] {
	--color-schema: "light";
  --SignalCol:#FF0000;
  --IconInvert:75%;
  --DragIconBrightness:90%;
  --CmpCol3d:rgba(0,0,255,77);
  --MainBgCol:rgb(255,255,255);
  --Invisible:#FF000000;
  --MenuBarBgCol:#F5F5F5;
  --DlgFgCol:#000000;
  --DlgFgColA03:#00000011;
  --MenuBarHlCol:#E8E8E8;
  --DlgBarFgCol:#FFFFFF;
  --MenuBarMnuFgCol:#000000;
  --MenuBarMnuBrdCol:#CCCCCC;
  --BrwsContentBgCol:#F5F5F599;
  --CtxMenuBgCol:#F5F5F5DD;
  --BrwsBarBgCol:#E5E5E5;
  --BrwsBarHlCol:#0A87C1;
  --BrwsDragBarBgCol:#E5E5E5BB;
  --IconHlCol:#0CA9F2;
  --BtnBgCol:#0A87C1;
  --BtnHlCol:#0CA9F2;
  --RowHlCol:#0CA9F255;
  --DlgBarBgCol:#0A87C1;
  --DlgBgCol:#E5E5E5E0;
  --DlgBgColA03:#3F414355;
  --DlgBgColA07:#3F4143AA;
  --DlgBgColNoAlpha:#E5E5E5FF;
  --DlgContentBgCol:#E5E5E5E0;
  --DlgBorderCol:#E5E5E5E0;
  --StatTxtFgCol:#FFFFFF;
  --LoginBgCol:#00FF0077;
  --TableHdBgCol1:#0CA9F2;
  --TableHdBgCol2:#0A87C1;
  --TransparentArea:#F5F5F5CC;
  --SensorFgCol:#000000;
  --SensorBgCol:#FFFFFF;
}
/*5-3-3*/
:root {
--LargeRadius: 8px;
--MiddleRadius:5px;
--SmallRadius: 5px;
--BrowserFont: 14px;
}

@font-face {
  font-family: "icons";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("icons.woff") format("woff");
}

.pulsate {
  -webkit-animation: pulsate 2s ease-out;
  -webkit-animation-iteration-count: infinite;
  opacity: 0.5;
}
@-webkit-keyframes pulsate {
  0% { opacity: 0.3;}
  50% { opacity: 1.0;}
  100% { opacity: 0.3;}
}

input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
  accent-color: var(--BtnBgCol);
}

.non-selectable {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.selectable {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: text;
}

/*----------------------------attribute table---------------------------*/
/*https://codepen.io/florantara/pen/dROvdb*/

.fl-table {
  border-radius: var(--SmallRadius);
  font-size: 12px;
  font-weight: normal;
  border: none;
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  background-color: var(--MainBgCol);
}

.fl-table th {
  text-align: left;
  padding: 8px;
}

.fl-table td {
  text-align: left;
  padding: 5px;
  border-right: 2px solid var(--MenuBarBgCol);
  font-size: 12px;
}

.fl-table thead th {
  color: var(--DlgBarFgCol);
  background: var(--TableHdBgCol2);
}

.fl-table thead th:nth-child(odd) {
  color: var(--DlgBarFgCol);
  background: var(--TableHdBgCol1);
}

.fl-table tr:nth-child(even) {
  background: var(--MenuBarBgCol);
}


#StatusText {position:absolute;bottom:10px;left:50%;text-align:center;transform:translate(-50%,0);padding-left:10px;padding-right:10px;color:var(--StatTxtFgCol);background-color:var(--BrwsBarHlCol);font-size:16px;font-weight:bold;border-radius: var(--SmallRadius);}
#ToolTippText {position:absolute; display:none; color:var(--DlgBarBgCol); background-color:var(--DlgBarFgCol);border-radius: var(--SmallRadius);}

body
{
  margin: 0;
  background-color:var(--MainBgCol);
  font-family:Arial,Helvetica,Geneva,Sans-serif;
  font-size: 14px;
}
textarea
{
  font-family:Arial,Helvetica,Geneva,Sans-serif;
}

.backgroundArea {
  position: fixed;
  left:0;
  top:0;
  min-width:100%;
  min-height:100%;
  padding: 0px;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arArea {
  position:fixed;
  left:0;
  top:0;
  min-width:100%;
  min-height:100%;
  z-index:1;
  pointer-events:none;
}
.modelArea {
  position:absolute;
  touch-action:none;
  z-index:2;
}
.dragArea {
  position:absolute;
  touch-action:none;
  z-index:19;
  width:100%;
  height:100%;
}

/*----------------------------menu---------------------------*/
/*https://doodlenerd.com/html-control/css-dropdown-generator*/
.cmiMenu {
  position: relative;
  display: inline-block;
  margin-bottom: 0px;
  background: var(--Invisible);
  color: var(--DlgFgCol);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cmiMenu select {
  display: inline-block;
  width: 100%;
  height:30px;
  cursor: pointer;
  padding: 0px 5px;
  outline: 0;
  border: 0px solid #000000;
  border-radius: 0px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--MenuBarBgCol);
  color: var(--DlgFgCol);
}
.cmiMenu select::-ms-expand {display: none;}

.cmiMenu select option {
  background: var(--MenuBarMnuBgCol);
  color: var(--MenuBarFgCol);
}
.cmiMenu select option:hover,
.cmiMenu select option:focus
{
  background:var(--IconHlCol);
}

.iconToolbar {font-family:icons;font-size:26px;border:0px;}
.iconToolbar td {justify-content:center;background-color:var(--Invisible);padding:0px;}
.iconToolbar div {display:flex;align-items:center;background-color:var(--MenuBarBgCol);width:fit-content;padding-left:5px;padding-right:5px;}
.iconToolbar input[type=radio]{display: none;}
.iconToolbar input[type=radio]:checked + label{background-color:var(--IconHlCol)}
.iconToolbar input[type=checkbox]{display: none;}
.iconToolbar input[type=checkbox]:checked + label{background-color:var(--IconHlCol);}
.iconToolbar input[type=checkbox] + label {width:34px;}
.iconToolbar input[type=checkbox] + label:hover {background-color:var(--IconHlCol);}
.iconToolbar input[type=checkbox]:checked + label {background-color: var(--IconHlCol);}
.iconToolbar input[type=checkbox]:not(:checked) + label {background-color: transparent;}
.iconToolbar input[type=checkbox]:active + label, input[type=checkbox]:focus + label {background-color: var(--IconHlCol);}

.iconToolbar label {display:inline-grid;align-content:center;justify-content:center;width:28px;height:35px;}
.iconToolbar label:hover {background-color:var(--IconHlCol);}
.iconToolbar span {display:inline-grid;align-content:center;justify-content:center;width:28px;height:35px;}
.iconToolbar span:hover {background-color:var(--IconHlCol);}
.iconToolbar img {filter: invert(var(--IconInvert));height:20px;width:20px;}

.cmiToolbar td {
  justify-content:center;
  background-color:var(--Invisible);
  padding:1px;
}
.cmiToolbar div {
    display:flex;
    align-items:center;
    background-color:var(--MenuBarBgCol);
    width:fit-content;
    height:35px;
    padding-left:5px;
    padding-right:5px;
}

/*------------------------browser---------------------------*/

/* dyn resize https://stackoverflow.com/questions/26233180/resize-a-div-on-border-drag-and-drop-without-adding-extra-markup*/

.dragBarRight{
  background-color:var(--BrwsDragBarBgCol);
  height:100%;
  float: right;
  width: 3px;
  z-index:20;
  cursor: col-resize;
  pointer-events: auto;
  border-bottom-right-radius: var(--LargeRadius);
}
.dragBarLeft{
  background-color:var(--BrwsDragBarBgCol);
  height:100%;
  float: left;
  width: 3px;
  z-index:1;
  cursor: col-resize;
  pointer-events: auto;
  border-bottom-left-radius: var(--LargeRadius);
}
.dragIconRight{
   position: absolute;
   display:none;
   filter: brightness(var(--DragIconBrightness));
   height:16px;
   z-index:30;
   cursor: col-resize;
   pointer-events: auto;
}
.dragIconLeft{
   position: absolute;
   display:none;
   filter: brightness(var(--DragIconBrightness));
   height:16px;
   z-index:30;
   cursor: col-resize;
   pointer-events: auto;
}

.browserArea {
  position: absolute;
  background-color:var(--Invisible);
  width:20%;
  min-width:230px;
  overflow:hidden;
  z-index:3;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  border-radius: var(--LargeRadius);
}

.browserHeaderTable  {
  display: table;
  white-space:nowrap;
  color:var(--DlgFgCol);
  width:100%;
  table-layout:fixed;
  pointer-events: auto;
}

.iconBrowserBar button{border:0px; }
.iconBrowserBar input[type=radio]{display: none;}
.iconBrowserBar input[type=radio]:checked + label{background-color:var(--IconHlCol)}
.iconBrowserBar input[type=checkbox]{display: none;}
.iconBrowserBar input[type=checkbox]:checked + label{background-color:var(--IconHlCol);}
.iconBrowserBar input[type=checkbox] + label:hover {background-color:var(--IconHlCol);}
.iconBrowserBar label {font-family:icons;font-size:28px;display:inline-grid;align-content:center;justify-content:center;width:24px;}
.iconBrowserBar label:hover {background-color:var(--IconHlCol);}
.iconBrowserBar nobr {font-family:icons;display:inline-grid;align-content:center;justify-content:center;width:24px;}
.iconBrowserBar nobr:hover {background-color:var(--IconHlCol);}

.browserTableToolbar {height:35px;vertical-align:middle;background-color:var(--MenuBarBgCol);}

.browserContentArea {
  position: absolute;
  left:3px;
  width:100%;
  background-color:var(--Invisible);
  overflow-x:hidden;
  overflow-y:auto;
  pointer-events: auto;
  border-bottom-left-radius: var(--LargeRadius);
  border-bottom-right-radius: var(--LargeRadius);
}
.browserContentTable {
  font-size:var(--BrowserFont);
  background-color:var(--BrwsContentBgCol);
  color:var(--DlgFgCol);
  width:100%;
  z-index:5;
  table-layout: fixed;
  white-space:nowrap;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  }
.browserContentTable img {filter: invert(var(--IconInvert));}
.browserContentTable th{padding-top:5px;padding-bottom:5px;text-align:center;position:sticky;position:-webkit-sticky;top:0;background-color:var(--MenuBarBgCol);z-index:2;}
.browserContentTable th:first-child{text-align:left;}
.browserContentTable th:nth-child(2){width:30px;text-align:left;}
.browserContentTable th:nth-child(3){width:30px;text-align:left;padding-left:5px;}
.browserContentTable td{text-align:center;}
.browserContentTable td:first-child{
  text-align:left;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browserContentTable td:nth-child(2){width:30px;text-align:left;}
.browserContentTable td:nth-child(3){width:30px;text-align:left;}
.browserContentTable nobr {font-family:icons;font-size:21px;}
.browserContentTable input[type='text'] { font-size: var(--BrowserFont); }
.browserContentTable tr:hover
{
  background:var(--RowHlCol);
}

.cmiAssIcon.document {width:20px;background:url("../Images/document.png"); filter: invert(var(--IconInvert)); background-size:12px;background-position-x:2px;background-position-y:2px;background-repeat:no-repeat;}
.cmiAssIcon.article {width:20px;background:url("../Images/article.png"); filter: invert(var(--IconInvert)); background-size:12px;background-position-x:2px;background-position-y:2px;background-repeat:no-repeat;}
.cmiAssIcon.pageRef {width:20px;background:url("../Images/document.png"); filter: invert(var(--IconInvert)); background-size:12px;background-position-x:2px;background-position-y:2px;background-repeat:no-repeat;}
.cmiAssIcon.pageRefAnn {width:20px;background:url("../Images/annotations.png"); filter: invert(var(--IconInvert)); background-size:12px;background-position-x:2px;background-position-y:2px;background-repeat:no-repeat;}
.cmiAssPosNrActive {width:30px;color:var(--DlgFgCol);background-color:var(--Invisible);border:1px solid var(--MenuBarMnuBrdCol);text-align:right;}
.cmiAssPosNrFixed {width:30px;color:var(--DlgFgCol);background-color:var(--Invisible);border:0px;pointer-events:none;text-align:right}
.cmiAssNodeSupressSub {color:var(--DlgFgCol);border:0px;font-style:italic;}
.cmiAssNodeSupressed {color:var(--DlgFgCol);border:0px;font-style:italic;}
.cmiAssNodeDynPos {color:var(--DlgFgCol);background-color:var(--Invisible);border:0px;font-weight:bold;}
.cmiAssNodeActive {color:var(--DlgFgCol);background-color:var(--Invisible);border:0px;}
.cmiAssNodeStd {color:var(--DlgFgCol);background-color:var(--Invisible);border:0px;}
.cmiAssNodeHandled {color:var(--DlgFgCol);}
.cmiAssNodeFixed {font-style:italic;}
.cmiAssNodeDrop {color:var(--DlgFgCol);background-color:var(--Invisible);border:0px;}
.cmiAssSmallTabDisplay {display:inline-block;width:10px;font-weight:bold;}
.cmiAssTabDisplay {display:inline-block;width:20px;}

.activeBrowser {background-color:var(--BrwsBarHlCol);height:30px;vertical-align:middle;}
.activeBrowser button {background-color:var(--BrwsBarHlCol);color: var(--DlgFgCol);}
.activeBrowser button:hover {background-color:var(--BrwsBarHlCol);filter: brightness(90%);}
.activeBrowser select {background-color:var(--BrwsBarHlCol);}
.activeBrowser select:hover {background-color:var(--BrwsBarHlCol);filter: brightness(90%);}
.activeBrowser span {background-color:var(--BrwsBarHlCol);}

.inActiveBrowser {background-color:var(--BrwsBarBgCol);height:30px;vertical-align:middle;}
.inActiveBrowser button {background-color:var(--BrwsBarBgCol);color: var(--DlgFgCol);}
.inActiveBrowser button:hover {background-color:var(--BrwsBarBgCol);filter: brightness(110%);}
.inActiveBrowser select {background-color:var(--BrwsBarBgCol);}
.inActiveBrowser select:hover {background-color:var(--BrwsBarBgCol);filter: brightness(110%);}
.inActiveBrowser span {background-color:var(--BrwsBarBgCol);}

.ownChatEntry {text-align:right;}
.ownChatEntry span{background-color:var(--TableHdBgCol1);color: var(--DlgBarFgCol);display:inline-block;margin:0px;padding-block:5px;padding-left:10px;padding-right:10px;border-radius:5px;}
.extChatEntry {text-align:left;}
.extChatEntry span{background-color:var(--TableHdBgCol2);color: var(--DlgBarFgCol);display:inline-block;margin:0px;padding-block:5px;padding-left:10px;padding-right:10px;border-radius:5px;}
.extChatEntry pre { font-family: monospace; white-space: normal;background-color:#3f4143;color:#ffffff}

.chatReplyEntry {font-size:10px;font-style:italic;color:var(--DlgBarFgCol);}
.chatInfo {font-size:10px;font-weight:bolder;}

/*--------------------------- menus ------------------------*/
.flexDiv {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0px;
  float:left;
}
.selWrp {
  width: 100%;
  position: relative;
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms linear 0s;
  filter: drop-shadow(0px 6px 26px #0008);
  z-index:5;
}

.mulSel {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  box-sizing: border-box;
  border-radius: 0 0 var(--SmallRadius) var(--SmallRadius);
  position: absolute;
  width: fit-content;
  white-space:nowrap;
  left: 0;
  right: 0;
  overflow: hidden;
  color:var(--DlgFgCol);
  background-color: var(--MenuBarBgCol);
  transition: transform 300ms ease-in-out 0s, clip-path 300ms ease-in-out 0s;
}
.msCtx
{
  border-radius: var(--SmallRadius);
  position: absolute;
  width: fit-content;
  white-space:nowrap;
  left: 0;
  right: 0;
  overflow: hidden;
  color:var(--DlgFgCol);
  background-color:var(--CtxMenuBgCol);
  user-select: none;          /* Prevent text selection */
  -webkit-user-select: none;  /* For Safari */
  -webkit-touch-callout: none; /* Disable the context menu on iOS */
  /*backdrop-filter: blur(6px); does not work in firefox*/
}

.mulSel div, .msCtx div {
  padding: 5px;
  width: auto;
  cursor: pointer;
}
.mulSel div:hover, .msCtx div:hover {
  background-color: var(--BtnHlCol);
}

.bBdr {
  border-bottom: 1px solid var(--MenuBarMnuBrdCol);
}

.fntIcon {
	font-family:icons;
  cursor: pointer;
  font-size:16px;
}
.sMnRight {
	position: absolute;
	top:50%;
	right:4px;
	transform: translate(0%, -50%);
	text-align: center;
	font-family:icons;
}
.sMnLeft {
	font-family:icons;
  font-size:18px;
  width: 20px;
  height: 0px;
  display: inline-block;
}

.topBorder {
  border-top: 1px solid var(--MenuBarMnuBrdCol);
}

.iconSelector {
  display: inline-block;
  padding: 6px;
  max-height:70px;
  overflow: auto;
}

.iconSelector img {
  filter:invert(0%) !important;
  width: 32px;
  height: 32px;
}

.iconDiv {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.iconDiv i {
  pointer-events: none;
}

.noSpace {
  justify-content: flex-start;
  gap: 6px;
}
.titleDiv {
  pointer-events: none;
  font-weight: 700;
}
.mulSel i {
  color: var(--MenuBarMnuFgCol);
}
.mulSel {
  transform: translateX(100%);
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
.mulSel:nth-of-type(1) {
  transform: translateX(0);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.sec_btn {
  background-color: var(--MenuBarBgCol);
  color: var(--DlgFgCol);
}
.sec_btn:hover {
  color: var(--DlgBarFgCol);
  background-color: var(--BtnHlCol);
}

.sec_icn {
  height:20px;
  margin:5px;
  margin-right:15px;
}
.sec_icn:hover {
  background-color: var(--BtnHlCol);
  filter: invert(0%);
}

.tb_icn {
	font-family:icons;
  font-size:27px;
  display: inline-block;
  margin:0px;
  margin-right:20px;
}
.tb_icn:hover {
  background-color: var(--BtnHlCol);
  filter: invert(0%);
}

.swiper {
  width: 100%;
  height: 50%;
  padding-bottom: 30px !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 256px;
  height: 256px;
}

.swiper-slide img {
  filter:invert(0%) !important;
  display: block;
  height: 100%;
  margin:auto;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  background: var(--DlgBarBgCol);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 10px; /* Set a specific slider handle width */
  height: 20px; /* Slider handle height */
  background: var(--BtnHlCol);
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 20px; /* Slider handle height */
  background: var(--BtnHlCol); /* Green background */
  cursor: pointer; /* Cursor on hover */
}

/*------------------------dialogs---------------------------*/

@keyframes buttonShake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.dialog {
	display: none; /* not visible by default */
	font-family: Verdana, sans-serif;
	font-size: 12px;
	font-weight: 400;
	color: var(--DlgFgCol);
	background: var(--DlgBgCol);
	border: 0px solid var(--DlgBorderCol);
  border-radius: var(--LargeRadius);
	margin: 0;
	position: absolute;
	z-index:4;
	outline: none;
	backdrop-filter: blur(6px);
  -moz-box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.4 );
  -webkit-box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.4 );
	box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.4 );
  user-select: none;          /* Prevent text selection */
  -webkit-user-select: none;  /* For Safari */
  -webkit-touch-callout: none; /* Disable the context menu on iOS */	
}
.dialog .dlgDragIcon{
   position:absolute;
   filter: brightness(var(--DragIconBrightness));
   right:0px;
   bottom:0px;
   height:15px;
   z-index:5;
   cursor: nwse-resize;
   pointer-events: auto;
   border-bottom-right-radius: var(--LargeRadius);
}
.dialog .titlebar {
	height: 32px; /* same as .dialog>button height */
	line-height: 32px; /* same as .dialog>button height */
	vertical-align: middle;
	font-size: 1.2em;
	padding: 0 8px 0 8px; /* change NOT allowed */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: move;
	background: var(--DlgBarBgCol);
	color: var(--DlgBarFgCol);
	border-top-left-radius: var(--LargeRadius);
}
.dialog .content {
	position: absolute;
	top: 48px; /* change allowed */
	left: 16px; /* change NOT allowed */
	overflow: auto;
	font-size: 1em;
	/*padding:2px;*/
	/*background: var(--DlgContentBgCol);*/
	/*border-radius: var(--LargeRadius);*/
}
.dialog .content img {filter: invert(var(--IconInvert));}
.dialog .content a {font-size: 14px; color: var(--DlgFgCol);}

.dialog input[type=radio]{display: none;}
.dialog input[type=radio]:checked + label{display:inline-block;padding:3px;cursor:pointer; background-color:var(--BtnBgCol);color:var(--DlgBarFgCol);}
.dialog input[type=radio] + label{display: inline-block; padding:3px; cursor: pointer;}
.dialog nobr {font-family:icons;font-size:18px;cursor: pointer;-webkit-user-select:none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

.dialog .buttonpane:before {
	width: 100%;
	height: 0;
	border-bottom: 1px solid; /* change allowed */
	content: '';
	position: absolute;
	top: -16px; /* change allowed */
}
.dialog .buttonpane {
	width: 100%;
	position: absolute;
	bottom: 16px; /* change allowed */
	right: 16px; /* change NOT allowed */
	white-space: nowrap; /* keep buttons on one line */
}
.dialog .bottomArea{
  width:100%;
  position:absolute;
  bottom:0px;
}
.dialog .flexHeightArea{
  width:100%;
  position:absolute;
  top:0px;
  overflow-y:auto;
}

.dialog .buttonset {
	float: right;
}
.dialog button {
	-webkit-transition: 0.25s;
	transition: 0.25s;
	color: var(--DlgBarFgCol);
}
.dialog button::-moz-focus-inner {
	border: 0;
}
/* .dialog button.hover, */ /* Let's use standard hover */
.dialog button:hover,
.dialog button.focus,
.dialog button.active
{
	cursor: pointer;
  background:var(--BtnHlCol);
}
.dialog .switchSize {
	width: 32px; /* change NOT allowed */
	height: 32px; /* same as .dialog .titlebar height */
	position: absolute;
	top: 0;
	right: 35px;
	line-height: 35px;
	text-align: center;
	padding: 0;
	border: 0;
	font-size: 1.4em;
	color: var(--DlgBarFgCol);
	background: var(--DlgBarBgCol);
  border-top-right-radius: 0;
	font-family: "icons";
	font-size: 1.8em;
}
.dialog .switchSize:hover
{
  background:var(--BtnHlCol);
  /*box-shadow: inset -16px 0 0 0 #e80, inset 16px 0 0 0 #e80;*/
}

.dialog>button {
	width: 32px; /* change NOT allowed */
	height: 32px; /* same as .dialog .titlebar height */
	position: absolute;
	top: 0;
	right: 0;
	padding: 0;
	border: 0;
	font-size: 1.4em;
	color: var(--DlgBarFgCol);
	background: var(--DlgBarBgCol);
	border-top-right-radius: var(--LargeRadius);
}
/* .dialog>button.hover, */
.dialog>button:hover,
.dialog>button.focus
{
  background:var(--BtnHlCol);
  /*box-shadow: inset -16px 0 0 0 #e80, inset 16px 0 0 0 #e80;*/
}
.dialog>button.active {
	background: var(--Invisible); /* irrelevant */
	border: 0px solid var(--Invisible); /* irrelevant */
}
.dialog .buttonset button {
	height: 32px; /* change allowed */
	/*width: 70px; change allowed */
	min-width: 40px;
	font-size: 1.1em;
	/*padding: 0;  irrelevant */
	padding-left: 5px;
	padding-right: 5px;
	/*margin-left: 16px; change NOT allowed */
	border: 2px solid var(--DlgBorderCol); /* change allowed */
	background: var(--BtnBgCol);
	border-radius: var(--MiddleRadius);
}
.dialog .buttonset button:first-child {
	margin-left: 0;
}
/* .dialog .buttonset button.hover, */
.dialog .buttonset button:hover,
.dialog .buttonset button.focus
{
  background:var(--BtnHlCol);
	/*box-shadow: inset -35px 0 0 0 #17a, inset 35px 0 0 0 #17a;*/
}
.dialog .buttonset button.active {
	background: var(--BtnBgCol);
	border-color: var(--BtnBgCol);
}
.dialog fieldset {
  border: 1px solid var(--DlgFgCol);
}
.dialog .embeddedButton {
  white-space:nowrap;
  display:inline-block;
  margin-bottom:5px;
  background-color:var(--BtnBgCol);
  color:var(--DlgBarFgCol);
  border:0px;
  padding:5px;
  cursor: pointer;
  border-radius: var(--SmallRadius);
}
.dialog .embeddedButton button:hover,
.dialog .embeddedButton button.focus
{
  background:var(--BtnHlCol);
}

#loginDialogPwdResetTitle {
  width: 120px;
  margin-right: 18px;
}

.tabArea {
  width:100%;
  margin-top:2px;
  overflow: hidden;
  border-bottom: 1px solid var(--DlgBarBgCol);
  background-color: var(--DlgBgCol);
}

.tabArea input[type=radio]{display: none;}
.tabArea input[type=radio]:checked + label{
  display: inline-block;
  padding:5px;
  margin-right:-2px;
  margin-left:-2px;
  background-color:var(--BtnBgCol);
  color: var(--DlgBarFgCol);
  border-top-left-radius: var(--SmallRadius);
  border-top-right-radius: var(--SmallRadius);
  }
.tabArea input[type=radio] + label{
  cursor: pointer;
  display: inline-block;
  padding:5px;
  margin-right:-2px;
  margin-left:-2px;
  border-top: 1px solid var(--DlgBarBgCol);
  border-right: 1px solid var(--DlgBarBgCol);
  border-top-left-radius: var(--SmallRadius);
  border-top-right-radius: var(--SmallRadius);
  }
.tabArea input[type=radio]:hover + label{
  background-color: var(--BtnHlCol);
}
.tabArea select{
  margin-left:2px;
  margin-right:2px;
}

/*------------------------file selection---------------------------*/

.file-upload {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.file-upload-lab{
  cursor:pointer;
  font-size:1.0vh;
  border: 0px solid;
  padding: 3px;
  background-color: var(--BtnBgCol);
  color: var(--DlgBarFgCol);
}
.file-upload-lab:hover {background-color: var(--BtnHlCol);}

/*-------------------------poi3d pages----------------------------*/
.fixedHeaderArea {
  position: fixed;
  margin: 0;
  background: var(--TransparentArea);
  top: 0%;
  height:15%;
  width: 100%;
  padding: 0px;
  z-index: 2;
  padding-left: 10px;
}
.fixedHeaderArea img {
  position: fixed;
  top: 0px;
  right: 0px;
  max-width:10%;
  max-height:10%;
}
.fixedHeaderArea p {
  font-size: 3vh;
  font-weight: bold;
}
.fixedHeaderArea a{
  position: relative;
  top: 20%;
  left:0%;
  background: rgba(0, 0, 0, 0);
  color: var(--MenuBarMnuFgCol);
  z-index: 2;
  font-size: 4vh;
}
.fixedHeaderArea  span{
  text-decoration: none;
  display: inline-block;
  color: #000000;
  background-color: #1E90FF;
}
.fixedBodyArea {
  position: fixed;
  bottom: 0;
  left:0%;
  background: var(--TransparentArea);
  padding: 10px;
  font-size: 2vh;
  width: 100%;
}
.fixedBodyArea a{
}
.fixedBodyArea p{
  width:95%;
}

.floatingBodyArea {
  position: absolute;
  top: 18%;
  background: var(--MainBgCol);
  width: 98%;
  padding: 1%;
  font-size: 2vh;
  z-index: 0;
}
.floatingBodyArea a{
  text-decoration: none;
}
.floatingBodyArea span {
  color: #000000;
  background-color: #1E90FF;
}
#bgVideo {
  position: fixed;
  left: 0;
  top: 60px;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  visibility: visible;
}

@keyframes blinker {50% {opacity: 0.5;}}
.sensors {position:absolute;}
.sensorStd {position:absolute; cursor: pointer; white-space:nowrap; z-index:2; color:var(--SensorFgCol); background-color:var(--SensorBgCol);border-radius: var(--SmallRadius);padding:2px;border:2px solid var(--SensorBgCol);}
.sensorCrit {position:absolute; cursor: pointer; white-space:nowrap; z-index:2; color:var(--SignalCol); background-color:var(--SensorBgCol);border-radius: var(--SmallRadius);padding:2px; border:2px solid var(--SignalCol); animation: blinker 1s linear infinite;}