html,body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

::selection
{
background-color:rgba(0, 0, 255, 0.3)!important;
}


.mm-highlight{
  position: absolute;
  background-color: red;
  z-index:3;
}

.mm-highlight.active{
 border:1px solid blue;
}

.viewerHeader{
  display: flex;
}

.viewerHeader div{
  height: 100%;
  vertical-align: middle;
  flex:1;
}

.header-center{
  text-align: center;
}

.icon{
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  border:0;
  outline: none;
  cursor: pointer;
  margin-top:6px;
}

.header-right{
  text-align: right;
}

.icon:hover{
  background-color: #f5f5f5;
}

.icon-toggle {
  margin-left:10px;
  background: url('./images/toolbarButton-sidebarToggle.svg') center center no-repeat;
}

.icon-zoomOut {
  margin-left:10px;
  background: url('./images/toolbarButton-zoomOut.svg') center center no-repeat;
}

.icon-zoomIn {
  margin-left:10px;
  background: url('./images/toolbarButton-zoomIn.svg') center center no-repeat;
}

.icon-createImage{
  background: url('./images/screenshort.svg') center center no-repeat;
}

.icon-info{
  margin-right:10px;
  background: url('./images/secondaryToolbarButton-documentProperties.svg') center center no-repeat;
}

.viewerSider{
  width:260px;
  overflow: auto;
  border-right:1px solid #ccc;
  flex-shrink:0;
  display: flex;
  flex-direction: column;
}

.viewerSiderMenu{
  height:30px;
  line-height: 30px;
  flex-shrink:0;
  background-color: #f5f5f5;
  text-align:center;
}

.viewerSiderAnnotate{
  background-color: #eaeaea;
  height:100%;
  overflow: auto;
}

.annotate-item{
  width: 96%;
  display: block;
  margin:4px auto;
  background-color: #fff;
  border-radius:4px;
  font-size: 14px;
  cursor: pointer;
}

.annotate-item-header{
  line-height: 24px;
  font-weight: bold;
  padding: 0 6px;
  border-bottom:1px solid #e5e5e5;
}

.annotate-item-content{
  padding: 6px;
  box-sizing: border-box;
  font-size: 12px;
  overflow: auto;
} 

.annotate-item-content img{
  width:100%;
}

.annotate-item-content blockquote{
  padding: 0;
  margin: 0;
  border-left:0.2em solid #ccc;
  padding-left: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.annotate-item.active .annotate-item-content blockquote{
  display: block;
  -webkit-line-clamp: initial;
  -webkit-box-orient: initial;
}

.mm-highlight-yellow .annotate-item-content blockquote{
  border-left:0.2em solid rgb(247,255,0);
}

.mm-highlight-green .annotate-item-content blockquote{
  border-left:0.2em solid rgb(125,240,102);
}

.mm-highlight-blue .annotate-item-content blockquote{
  border-left:0.2em solid rgb(143,222,249);
}

.mm-highlight-pink .annotate-item-content blockquote{
  border-left:0.2em solid rgb(247,153,209);
}

.mm-highlight-red .annotate-item-content blockquote{
  border-left:0.2em solid rgb(253,73,73);
}

.annotate-menu{
  position: absolute;
  left:100px;
  top:200px;
  display: none;
  padding: 4px;
  border-radius: 2px;
  border:1px solid #e1e1e1;
  background-color: #ffff;
  z-index: 10;
}

.annotate-menu button{
  width: 20px;
  height:20px;
  border:0;
  outline: none;
  margin:0;
  padding:0;
  vertical-align: middle;
  background-color: transparent;
  margin: 0 2px;
  cursor: pointer;
}

.annotate-menu button svg{
  margin-top:2px;
  margin-left:2px;
} 

.textLayer{
  z-index: 2; 
  opacity: .8;
  mix-blend-mode: multiply;
}


.annotateLayer{
    opacity: 0.6;
}

.annotate-item.active{
     box-shadow: 0 0 3px #ccc;
     border:2px solid blue;
}

.annotate-item.active .annotate-item-note{
     min-height: 30px;
     line-height:20px ;
}

.annotate-item-note{
     border:1px solid #f5f5f5;
     width: 100%;
     box-sizing: border-box;
     outline: none;
     padding: 4px ;
     font-size: 12px;
}

.annotate-comment {
     width: 300px;
     max-width: 600px;
     height:200px;
     max-height: 500px;
     position: absolute;
     z-index: 200;
     border-radius:5px;
     font-size: 14px;
     background-color: rgb(255 246 203)!important;
     box-shadow: 0 0 8px #dadada;
     border: 1px solid #fddb60;
     overflow-y:auto;
}

.comment-bar{
     cursor: pointer!important;
     z-index: 120!important;
     position: absolute;
}

.comment-bar:hover{
     background-color: #f5f5f5;
     box-shadow: 0 0 8px #ccc;
}

#showAnnotation{
  border:0;
  margin-left:1px;
  cursor: pointer;
  padding: 6px;
  border-radius:3px;
}

#showAnnotation:hover{
  background-color: #f5f5f5;
}

#showAnnotation.toggled{
  background-color: rgba(0, 0, 0, 0.3);
}



.annotate .annotate-head{
  position: absolute;
  left:0;
  right: 0;
  height:24px;
  background-color: transparent;
  cursor: move;
  display: none;
}
.annotate .annotate-resize{
  position: absolute;
  width: 16px;
  height: 16px;
  right:0;
  bottom: 0;
  display: none;
  cursor: se-resize;
}
.annotate:hover .annotate-resize,
.annotate:hover .annotate-head,
.annotate.active .annotate-resize,
.annotate-resize .annotate-head{
   display: block;
}