*, ::after, ::before {
    box-sizing: border-box;
}

html, body {width:100%;height:100%}
body {
margin: 0;
background-color: #ccc;
color: #000;
font-family: Monospace;
font-size: 13px;
line-height: 24px;
overscroll-behavior: none;
}
.hidden {display:none}
.hidden-invisible {
    display: none !important;
    opacity: 0 !important;
}
.underlay {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(16, 42, 72, 0.8);
    z-index: 5000;
    -webkit-transition: opacity .3sease;
    transition: opacity .3sease;
}
.pl, .pl:before, .pl:after {
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.pl {
    margin: 0 auto 1.5em auto;
    position: relative;
    width: 3em;
    height: 3em;
}
.pl:before, .pl:after {
    background: #aaa;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    transform-origin: 50% 100%; 
    clip-path: polygon(0 0,100% 0,50% 100%);
    -webkit-clip-path: polygon(0 0,100% 0,50% 100%);
}
.pl-origami {
    animation-name: origamiA;
    animation-timing-function: steps(4);
}
.pl-origami:before, .pl-origami:after {
    clip-path: polygon(50% 0,100% 100%,0% 100%);
    -webkit-clip-path: polygon(50% 0,100% 100%,0% 100%);
}
.pl-origami:before {
    animation-name: origamiB;
}
.pl-origami:after {
    animation-name: origamiC;
    transform: rotate(180deg);
}
@keyframes origamiA {
    from { transform: rotate(0) }
    to { transform: rotate(-360deg) }
}
@keyframes origamiB {
    from, 25%, 50%, 75%, to { opacity: 1; transform: translateZ(0) rotateX(0deg) }
    12.5%, 62.5% { opacity: 1; transform: translateZ(1px) rotateX(-180deg) }
    37.5%, 87.5% { opacity: 0; transform: translateZ(0) rotateX(0deg) }
}
@keyframes origamiC {
    from, 25%, 50%, 75%, to { opacity: 1; transform: translateZ(0) rotateZ(180deg) rotateX(0deg) }
    12.5%, 62.5% { opacity: 0; transform: translateZ(0) rotateZ(180deg) rotateX(0deg) }
    37.5%, 87.5% { opacity: 1; transform: translateZ(1px) rotateZ(180deg) rotateX(-180deg) }
}
.poi-sphere {border: 1px solid #333333;background-color: #FFFFFF;border-radius:50%;width:12px;height:12px;pointer-events:auto;cursor:pointer;}
.poi-sphere.red {z-index:190 !important}
.poi-sphere.yellow {z-index:180 !important}
.poi-sphere.grey {z-index:170 !important}
.menu-poi-circle {position:absolute;left:5px;top:6px;border: 1px solid #333333;background-color: #FFFFFF;border-radius:50%;width:16px;height:16px;pointer-events:auto;cursor:pointer;}
.poi-label {
  border: 1px solid #FFFFFF;
  background-color: #FFFFFF;
  color: #333;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Roboto Condensed', sans-serif;
  pointer-events:auto;
  cursor:pointer;
}
.poi-label.top {z-index:501 !important}
.poi-label-xy, .poi-label-z {font-size:11px;font-family:monospace;padding:0;margin:2px 0;line-height:14px}
.poi-label-dot {display:inline-block;margin:0 2px 0 0;border-radius:50%; width:7px; height:7px; border:1.5px solid #FFFFFF; background-color:#FFFFFF}
.poi-label.transparent {opacity:.3 !important}
.resize-vertical-container {background:#666666}
.resize-vertical {background: #D0D0D0;width: 20%;margin:0 auto;height: 6px;border-radius:3px;cursor: row-resize;flex-shrink: 0;position: relative;z-index: 10;user-select: none;}
.resize-vertical:hover {background: #E0E0E0;}
.resize-vertical:active {background: #FFFFFF;}
#dataChart {height:100%}
::-webkit-scrollbar {
  width: 6px;
  height: 0px;
}
::-webkit-scrollbar-button {
  width: 6px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #D0D0D0;
  border: none;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #E0E0E0;
}
::-webkit-scrollbar-thumb:active {
  background: #FFFFFF;
}
::-webkit-scrollbar-track {
  background: #666666;
  border: none;
  border-radius: 3px;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #666666;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
.menu-poi {margin:8px 0;padding:2px 5px 2px 25px;color:#333333;font-size:16px;font-weight:600;width:100%;background-color:#D8D8D8;border-radius:5px;cursor:pointer;position:relative;}
.menu-poi:hover, .menu-poi.hover {background-color:#FFFFFF}
#icons-panel-horizontal {z-index:1001;position:absolute;top:10px;left:210px}
.icon-control {display:inline-block;width:64px;height:64px;border:1px solid #999999;border-radius:5px;background-color:rgba(51,51,51,0.75);position:relative;cursor:pointer;margin-right:8px;float:left;}
.icon-control:hover {border:1px solid #CCCCCC;background-color:rgba(51,51,51,0.85);}
.icon-control.active {border:2px solid #FFFFFF;background-color:rgba(51,51,51,1);}
.icon-control.active:hover {border:2px solid #D0D0D0}
.icon-control img, .icon-control svg {width:64px;height:64px;position:absolute;top:0px;left:0px;opacity:0.6}
.icon-control:hover img, .icon-control:hover svg {width:64px;height:64px;position:absolute;top:0px;left:0px;opacity:0.85}
.icon-control.active img, .icon-control.active svg {top:-1px;left:-1px;opacity:1}
.tooltip {
  position: absolute;
  background: rgba(20,20,20,.9);
  color: #fff;
  padding: 7px 10px;
  border-radius: 5px;
  white-space: nowrap;
  z-index:1010;
}
.icon-control svg .red {fill:#CCCCCC !important;sstroke:#CCCCCC !important}
.icon-control.active svg .red {fill:#FF0000 !important;sstroke:#FF0000 !important}
#vector-zoom-slider-container {position:absolute;top:74px;left:0;width:210px;}
#vector-zoom-slider {-webkit-appearance: none; appearance: none; cursor: pointer; overflow:hidden; border-radius: 24px; outline: none;width:100%;margin:0;}
#vector-zoom-slider::-webkit-slider-runnable-track {
  height: 23px;
  background: #333333;
  border:1px solid #FFFFFF;
  border-radius: 24px;
}
#vector-zoom-slider::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;height:22px;width:23px;background-color: #333333;border-radius:50%;border: 1px solid #FFFFFF;box-shadow: -1507px 0 0 1500px #fff;}
#vector-zoom-text {position:absolute;line-height:23px;height:23px;left:10px;font-weight:600;color:#333333;user-select:none}
#vector-zoom-text.invert {color:#FFFFFF}