html {
background-color:#51bd608c;
}	

.aitools {
    background:none;
	
}

.aitools:hover{
   
	filter: invert(70%) sepia(50%) hue-rotate(290deg) saturate(500%);

}


.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;

  width: 30px;
  height: 2px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 5px;
  height: 10px;
  background: #04AA6D;
  background: blue;
  cursor: pointer;
}

body {

background-color: transparent;
 
font-family: Arial, Helvetica, sans-serif;
/*overflow:hidden;margin:0px;*/
}	

#minicontainer {
	
height:30px;
background-color:#f4d62a30;

}

/* 
 z-index: 289;background-color:#b9b9b21f;
width:40px;height:650px;position:fixed;left:20px;top:0px*/

#left{
	
 display: flex;  justify-content: center;   align-items: center; z-index: 289;
background-color:#b9b9b21f;width:40px;height:650px;position:fixed;left:20px;top:0px	
	
}


#ctxmenu {
  position: fixed;
  background: ghostwhite;
  color: black;
  cursor: pointer;
  border: 1px black solid
}

#ctxmenu > p {
  padding: 0 1rem;
  margin: 0
}

#ctxmenu > p:hover {
  /*background: black;*/
  background: gray;
  color: ghostwhite
}


#ctxmenu   a:hover {
	color: red;
}
#ctxmenu > div:hover {
  
}
#ctxmenu > div {
  padding: 0 1rem;
  margin: 0;
  width:300px;
  display:block
  //padding-left:20px;
  //
  
  
}
#right{
	
display: flex;  justify-content: center;   align-items: center; z-index: 289; 
 background-color: #b9b9b21f;width:40px;height:650px;position:fixed;left:860px;top:0px
	
}

#right img:hover {
	width:50px;
	height:50px;
	opacity: 0.7;
	color: #eee;
}
#left img:hover {
	width:50px;
	height:50px;
	opacity: 0.7;
	color: #eee;
}
#top{
	

	
display:flex;
align-content:center;
padding-left:5%;
padding-right:5%;

top:0px;
position:fixed;
display:block;
z-index: 501;
background-color:#1b637d;
width:100%;
height:10px;
color:yellow;
//visibility:hidden;	
//display:none;
}
#panel {
background-color:#fff7e3;
margin-left:30px;
top:5px;
left:900px;
width:450px;
padding-left:20px;
padding-right:20px;

padding-bottom:30px;
padding-top:30px;
position:relative;
}
#container {
	
  height: 2000px;
  width:800px;
  position:absolute;
	left:60px;
	top:30px;

  /*
  //border:1px solid #000;
  //height:auto;
  //width: 80%;
  margin:0px
  overflow: hidden;
  background-color:yellow*/
 }

#hyperlinks {
	background-color: white;
	height: 120px;
	display:inline;
	float:right;
	width: 18%;
	padding-left:10px;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
        display:none
	/*margin-left:5px;
	overflow: scroll;
	overflow: visible;*/
}
#hyperlinks:hover {
	background-color: white;
	overflow:visible;
	/*width: 100%;
	*/
	
}

.snip, #warning  {
	width:100%
}
 .mySaveBtn, .myIndexBtn {
	display: block;
	background-color:SeaShell;
	background-color:white;
	width:30%;
margin: 0 auto;	
 }
 /*width="100%" height="100%"
 style="display:inline;float:right;font-weight: bold;"
 */

#titleModal, #titleModalOCR{
	
	display:inline;
        float:right;
        font-weight: bold;
        margin-right:4%;
}
#svgX1{
	 margin-top:2px;
 }
 svg{
	width:100%;height:100%;
 }
.links{
	border-radius: 5px;
	margin-left:5px;
	position:relative; top:5px;
	padding:3px;
	
	/*
	border-style: solid; 
	border-width: 1px;  
	border-color: red;
	cursor: pointer;
	background-color:#ebf1f2;
	height:30px;*/
}
.up, .down, .citation {
	border-radius: 5px;
	margin-left:5px;
	position:relative; top:5px;
	padding:3px;
	background-color:#ebf1f2;
	/*border-style: solid; 
	border-width: 1px;  
	border-color: red;*/
	cursor: pointer;
	background-size: contain;
	background-repeat: no-repeat;

 
}
.up  {
	background-image: url('img/up.png');
}
.down {
	background-image: url('img/down.png');
}
.citation {
	background-image: url('img/citation.png');
}
.metadata, .delete{
	border-radius: 5px;
	margin-left:5px;
	position:relative; top:5px;
	padding:3px;
	cursor: pointer;
	height:30px;
	background-size: contain;
	background-repeat: no-repeat;

/*//background-color:#ffff0054;
//background-color: SeaShell;
//border-style: solid; 
//border-width: 1px;  
//border-color: red;
//margin-bottom:15px;*/
}
.delete{
background-image: url('img/delete.png');
}
.metadata{
background-image: url('img/metadata.png');
}
.snip{
	margin-bottom:5px;
	font-size:14px;
	border:solid 1px  #630802;
	border:solid 2px blue;
	height:120px;
	overflow:hidden;
	border-radius: 5px;
	
	
}
.myKey {
margin-top:5px;
margin-left:5px;
padding:3px;
white-space: nowrap;display-inline-block;
text-overflow: ellipsis;
width:97%;
font-weight:bold;
overflow:hidden;cursor: pointer;
font-weight: bold;
font-size: 14px;
border-style: solid; 
border-width: 1px;  
border-color: red;
background-color: SeaShell;
color:#581845;
}
#warning {
  background: cornsilk;
  border: 1px solid black;
  border-radius: 5px;
  color:red;
  margin-bottom:10px;
  text-align: center;
 
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 500; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0px;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  background-color: rgba(0,0,0,0.1); 
}
/* Modal Content */
.modal-content {
  background-color: #fefefe;
  border: 1px solid #888;
  width: 40%;
  left:800px;
  position:relative;
  /*margin: auto;*/
}
/* The Close Button */
.close {
  color: #aaaaaa;
  float: left;
  font-size: 28px;
  font-weight: bold;
  width:20%;
}
.close:hover,.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
#rect {
  /*fill: none;
  stroke: #000000;*/
  stroke-width: 1;
}
#menu {
	
	display: block; 

	width:100%;
	
	text-align: center;

}
#copyButton{
	padding:10px;
	cursor: pointer;
	height:30px;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url('img/copy.png');
	/*background: url(delete.png) no-repeat;color:white;
	background-color:black;
	padding:2px;
	margin:2px;*/
}
.xfragment, .xpage {
	display: block;
	float:left;
	margin-top:20px;
	margin-left:5px;
	cursor: pointer;
	text-decoration: none; 
	//padding:3px;
}
.xlinks{
	/*style="float:left;*/
	width:20%;
	background-color:#ebf1f2;
}

#result{
	 margin-top:10px;
	 width:100%
 }
#w3reviewOCR , #w3review{

    width:90%;
    margin-left :4%;
    margin-right :4%;
    font-size:20px;
    height:300px;
}