html, body {margin:0;padding:0;}
body {font-family:Arial,sans-serif;font-size:16px;}
.fileviewer {position:relative;float:left;width:50%;height:100vh;overflow:auto;background-color: #DFDBE5;background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%237d7d7d' fill-opacity='0.15'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
.dataviewer {overflow:auto;box-sizing:border-box;padding:10px;color:#FFF;float:left;width:50%;height:100vh;position:relative;background-color:#282828;}
.uplbtn {position:absolute;width:210px;right:0;bottom:0;background-color:#000;color:#FFF;line-height:50px;cursor:pointer;text-align:center;font-weight:bold;}
.fileviewerimg {position:relative;}
.fileviewerimg img {width:100%;}
.linechooser {background-color:gainsboro;color:#000;padding-top:5px;padding-bottom:5px;margin-top:10px;display:inline-block;padding-left:10px;padding-right:10px;margin-right:10px;cursor:pointer;}
.lineonimage {position:absolute;background-color:rgba(127,187,136,0.6);cursor:pointer;}
.lineonimage.active {background-color:rgba(219,218,33,0.6);}
.linechooser.active {background-color:#fffe00;}

.loadingouter {background-color:rgba(0,0,0,0.5);position:fixed;top:0;left:0;width:100%;height:100%;z-index:200;display:none;}
.loadinginner {
  width: 40px;
  height: 40px;
  background-color: #006099;

  margin: auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
  top: 50%;
  margin-top: -20px;
  position: relative;
  z-index: 20;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}