.stackViewer .sliceTiles,
.stackViewer img.tracing-data {
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  transform: translateZ(0px);
}

.stackViewer div.sliceTiles img {
  position: absolute;
  border: none;
  margin: 0;
  padding: 0;
  transform: translateZ(0px);
}

.stackViewer div.sliceTiles.transpose img {
  transform: rotate3d(1, 1, 0, 180deg);
}

.stackViewer div.sliceTiles.interpolation-mode-nearest img {
  image-rendering: optimizeSpeed;             /*               */
  image-rendering: -moz-crisp-edges;          /* Firefox       */
  image-rendering: -o-crisp-edges;            /* Opera         */
  image-rendering: pixelated;                 /* Chrome        */
  image-rendering: optimize-contrast;         /* CSS3 Proposed */
  -ms-interpolation-mode: nearest-neighbor;   /* IE8+          */
}

.stackViewer .windowButton {
  color: #ffffff;
  background-color: #a0a0a0;
  margin: 0 0 0 0.2em;
  padding: 4px 2px 4px 2px;
}

.stackViewer .stackInfo_selected .windowButton {
  color: #ffffff;
  background-color: #0000ff;
}

.stackViewer .sourcepanel {
  position: relative;
  background-color: #FFF;
  z-index: 6;
}

div.smallMapView,
div.smallMapView_hidden {
  position: absolute;
  bottom: 0;
  right: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  max-width: 192px;
  max-height: 192px;
  border: none 0;
  z-index: 6;
}

div.smallMapView_hidden {
  width: 16px;
  height: 16px;
}

div.smallMapView div.smallMapToggle,
div.smallMapView_hidden div.smallMapToggle {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background: #FF0000 url(../images/smallmapclose.gif) no-repeat left top;
}

div.smallMapView_hidden div.smallMapToggle {
  background: #FF0000 url(../images/smallmapopen.gif) no-repeat left top;
}

div.smallMapView img.smallMapMap,
div.smallMapView_hidden img.smallMapMap {
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

div.smallMapView div.smallMapRect,
div.smallMapView_hidden div.smallMapRect {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  border: solid 2px #0000FF;
  background: rgba(0,0,255,0.2);
  overflow: hidden;
}

div.smallMapView div.smallMapRect div,
div.smallMapView_hidden div.smallMapRect div {
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  height: 100%;
  background: #0000FF;
  opacity: .25;
}

div.LayerControl {
  border-right: solid 1px #00F;
  margin: 0;
  padding: 8px;
  position: relative;
  top: 0;
  left: 0;
  width: 42em;
  min-width: 13em;
  max-width: 80%;
  height: calc( 100% - 19px - 16px );
  overflow-x: hidden;
  overflow-y: auto;
  color: #FFFFFF;
  background: #000;
  opacity: 0.8;
}

div.LayerControl .setting {
  float: none;
  display: flex;
  align-items: center;
}

div.LayerControl ol {
  list-style-type: none;
  margin: 0;
  padding: 1em 0;
  clear: both;
}

div.LayerControl .layerControl {
  margin: 0 4px 6px 4px;
  padding: 0.4em;
  counter-increment: order-counter;
}

div.LayerControl .customselect {
  color: black;
  margin-top: 0.3em;
}

.layerControl.orderable {
  background: #111;
}

li.layerControl:before {
  content: counter(order-counter);
  margin-right: 5px;
  margin-top: 0.25em;
  background-color: #ccc;
  color: #000;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
  float: left;
}

div.LayerControl h4 {
  margin: 0.5em 0;
}

div.LayerControl h5 {
  margin: 1em 1em 0 0;
  padding: 0.25em 0 0 0.5em;
  border-top: solid 2px #444;
  color: #bbb;
}

.layerControl dt, .layerControl dd {
  display: inline-block;
}

.layerControl dt {
  margin-left: 2.5em;
}

div.LayerControl .layerClose {
  float: right;
  margin: 0.3em;
  cursor: pointer;
}

.layerControl .setting, .layerControl dl {
  float: none;
  margin: 0.2em 0;
}

.layerControl .setting.distribute {
  justify-content: space-between;
}

div.LayerControl .hSliderView {
  float: none;
  display: inline-block;
  vertical-align: middle;
  flex:  1;
}

li.layerControl ol {
  margin-left: 3em;
  padding: 0 1em;
  list-style-type: decimal;
}

div.LayerControl li.highlight {
  min-height: 1em;
  border: solid 1px #00F;
}

.layerControl .layerFilterControl input.remove {
  position: absolute;
  left: 2em;
}

.layerControl .layerFilterControl h5 {
  margin: 0;
}

div.stackControlToggle,
div.stackControlToggle_hidden {
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 16px;
  height: 16px;
  border: none 0;
  background: #A0A0A0;
  color: #FFFFFF;
  z-index: 6;
}

div.stackControlToggle i,
div.stackControlToggle_hidden i {
  margin: 0.25em;
}

div.stackControlToggle_hidden {
  background: #0000FF;
}

.stackViewer div.sliceMouseCatcher {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  cursor: move;
}

div.scaleBenchmark {
  position: absolute;
  left: 32px;
  bottom: 32px;
  height: 0.5em;
  width: 100px;
  border: solid 2px #0000FF;
  border-top: none;
  overflow: visible;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  z-index: 3;
}

div.scaleBenchmark p {
  border: none;
  margin: 0;
  margin-top: -12px;
  padding: 3px min(6px, 5%) 3px min(14px, 5%);
  color: #FFFFFF;
  background: rgba(0,0,255,0.2);
  overflow: hidden;
}

div.scaleBenchmark p span {
  padding: 3px 6px 3px 6px;
  background: #0000FF;
}

.stackViewer div.metadata {
  position: absolute;
  right: 10px;
  top: 42px;
  height: 0.5em;
  width: auto;
  border: none;
  overflow: visible;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  z-index: 3;
}

.stackViewer div.metadata p {
  border: none;
  margin: 0;
  margin-top: -12px;
  padding: 3px 6px 3px 14px;
  color: #FFFFFF;
  background: rgba(0,0,255,0.2);
  overflow: hidden;
}

.stackViewer div.indicatorbar {
  position: absolute;
  right: 5px;
  top: 25px;
  height: 0.5em;
  width: auto;
  border: none;
  overflow: visible;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  z-index: 10;
}

.stackViewer p.active-element {
  position: absolute;
  right: 6.3em;
  top: 0;
  width: auto;
  border: none;
  margin: 0;
  padding: 3px 6px 3px 6px;
  vertical-align: bottom;
  z-index: 7;
  color: #ffffff;
  background-color: #060;
}

.stackViewer p.active-element.local {
  background-color: #060;
}

.stackViewer p.active-element.remote {
  background-color: #ca6d16;
}

.stackViewer p.note {
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
  border: none;
  margin: 0;
  padding: 3px 6px 3px 6px;
  vertical-align: bottom;
  z-index: 7;
  color: #ffffff;
  background-color: #853c00;
}

.stackViewer p.sort-val {
  position: absolute;
  right: 0;
  bottom: 0;
  width: auto;
  border: none;
  margin: 0;
  padding: 3px 6px 3px 6px;
  vertical-align: bottom;
  z-index: 7;
  color: #ffffff;
  background-color: #850084;
}

.stackViewer p.active-element:empty {
  display: none;
}

div.stackInfo,
div.stackInfo_selected {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  color: #FFFFFF;
  background: rgba(0,0,0,0.2);
  overflow: hidden;
  z-index: 6;
}

div.stackInfo_selected {
  background: rgba(0,0,255,0.2);
}

div.stackInfo p,
div.stackInfo_selected p {
  margin: 0;
  padding: 3px 6px 3px 6px;
  background: #A0A0A0;
  color: #FFFFFF;
}

div.stackInfo_selected p {
  background: #0000FF;
}

div.stackInfo p.stackTitle,
div.stackInfo_selected p.stackTitle {
  float: left;
}

div.stackInfo p.stackClose,
div.stackInfo_selected p.stackClose {
  cursor: pointer;
  float: right;
}

.stackViewer div.cropBox,
.stackViewer div.cropBoxNonActive {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  border: solid 1px #0000FF;
  background: rgba(0,0,255,0.2);
  overflow: visible;
  z-index: 3;
}

.stackViewer div.cropBoxNonActive {
  opacity: .5;
}

.stackViewer div.cropBox p.world,
.stackViewer div.cropBox p.screen,
.stackViewer div.cropBox p.close {
  position: absolute;
  right: -1px;
  bottom: -24px;
  margin: 0;
  padding: 2px;
  background: #0000FF;
  color: #FFFFFF;
  white-space: nowrap;
}

.stackViewer div.cropBoxNonActive p.world,
.stackViewer div.cropBoxNonActive p.screen,
.stackViewer div.cropBoxNonActive p.close {
    visibility: hidden;
}

.stackViewer div.cropBox p.screen {
  bottom: -47px;
}

.stackViewer div.cropBox p.close {
  top: -22px;
  height: 12px;
  z-index: 6;
  cursor: pointer;
}

.clear {
  clear: both;
}

div.sliceTiles > * {
  transform: translateZ(0);
  will-change: top, left;     /* Post-chrome36 */
}
