:root{
/*   font-family: 'MS Gothic'; */
}

.viewer-container{
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 550px;
  height: 400px;
  border: 5px solid seagreen;
  
  max-width: 100%;
  
  resize: both;
  overflow: auto;
}

.viewer-info{
  position: absolute;
  display: block;
  box-sizing: border-box;
  left: 0;
  top:  0;
  width: 100%;
  height: 40px;
  border: 5px solid gray;
}

.viewer{
  position: absolute;
  display: block;
  box-sizing: border-box;
  left: 0;
  top: 40px;
  width: 100%;
  height: calc( 100% - 40px );
  border: 5px solid sienna;
}

.viewer > *{
  position: absolute;
  display: block;
  box-sizing: border-box;
}

.viewer > .loading{
  width: 100%;
  height: 100%;
  border: 5px solid lime;
  margin: 0;
}

.viewer > .error{
  width: 100%;
  height: 100%;
  border: 5px solid crimson;
  margin: 0;
}

.viewer > figure{
  width: 100%;
  height: 100%;
  border: 5px solid violet;
  margin: 0;
}

.viewer > figure > :is(img, video){
  position: absolute;
  display: block;
  box-sizing: border-box;
  border: 1px solid violet;
  image-rendering: pixelated;
  
  left: 50%;
  top: 50%;
  transform: translate( -50%, -50% );
  max-width: 100%;
  max-height: 100%;
}

.viewer > figure > figcaption{
  position: absolute;
  display: none;
  box-sizing: border-box;
  border: 1px solid violet;
}

.viewer > figure:hover > figcaption{
  display: block;
}

.viewer > iframe{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 5px solid cornflowerblue;
}

.viewer > table{
  border: 5px solid rebeccapurple;
  left: 0;
  top: 0;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  border-spacing: 0 0;
}

.viewer > table thead{
  background-color: yellow;
}

.viewer > table caption{
  border: 1px solid;
  font-size: 20px;
  font-weight: bold;
}


.viewer > table thead td{
  
}

.viewer > table tfoot td{
  
}

.viewer > table td{
  white-space: nowrap;
  border: 3px solid orange;
  overflow: hidden;
  text-overflow: ellipsis;
}


.viewer > table td[data-sort-dir]::after{
  content : '';
  display: inline-block;
  position: relative;
  border: 1px solid;
  width: 1em;
  height: 1em;
  vertical-align: top;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.viewer > table td[data-sort-dir='up']::after{
  background-image: url( icons/up.gif );
}

.viewer > table td[data-sort-dir='dn']::after{
  background-image: url( icons/down.gif );
}

.viewer table img{
  width: 2em;
  height: 2em;
  object-fit: scale-down;
/*   image-rendering: pixelated; */
  border: 2px solid red;
  box-sizing: border-box;
}

.viewer table img[src=''][data-thumb-helper]{
  background-image: url( icons/unknown.gif );
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.viewer table img[src=''][data-thumb-helper^='video-']{
  background-image: url( icons/movie.gif );
}

.viewer table img[src=''][data-thumb-helper^='text-']{
  background-image: url( icons/text.gif );
}

.viewer table img[src=''][data-thumb-helper='folder']{
  background-image: url( icons/folder.gif );
}

.viewer table img[src=''][data-thumb-helper='application-pdf']{
  background-image: url( icons/pdf.gif );
}

.viewer table img[src=''][data-thumb-helper='application-x-cd-image']{
  background-image: url( icons/diskimg.gif );
}

.viewer table img[src=''][data-thumb-helper='text-html']{
  background-image: url( icons/index.gif );
}

.viewer table tr:hover img[src=''][data-thumb-helper='folder']{
  background-image: url( icons/folder~0.gif );
}

.viewer table img[src=''][data-thumb-helper='up']{
  background-image: url( icons/back.gif );
}

.viewer table img[src=''][data-thumb-helper='about']{
  background-image: url( icons/comp_gr~.gif );
}

.viewer table tr:hover img[src=''][data-thumb-helper='about']{
  background-image: url( icons/comp_bl~.gif );
}

.viewer table img[src=''][data-thumb-helper='hosts']{
  background-image: url( icons/world1.gif );
}

.viewer table tr:hover img[src=''][data-thumb-helper='hosts']{
  background-image: url( icons/world2.gif );
}