#main {
height:600px;
width:800px;
font-family:arial;
cursor:default;
}


#blank {
	height:20px;
	width:800px;
	background-color:#d3d3d3;
	border:1px solid #f2f2f2;
}

#particle{
font-size:12px;
height:20px;
width:795px;
background-color:#dcdcdc;
border:1px solid #f2f2f2;
padding-left: 5px;
padding-top: 5px;
font-weight: bold;

}

#menu{
height:50px;
width:800px;
background-color:#666666;
border:1px solid #808080;
}

.p {
	height: 25px;
    width: 40px;
    float: left;
    border: 1px solid;
    margin: 8px;
    padding-top: 8px;
    text-align: center;
	border-radius: 3px;
    border: 1px solid #000;
	color:white;
	cursor:pointer;
}
#p1{
margin-left:35px;
}
.color1{background: linear-gradient(#e05656 50%,#db3d3d 50%) ; }
.color2{background: linear-gradient(#54df54 50%,#3eda3e 50%) ; }
.color3{background: linear-gradient(#7272e0 50%,#6d6ddf 50%) ; }
.color4{background: linear-gradient(#dfc41d 50%,#cbb41a 50%) ; }
.color5{background: linear-gradient(#e09bc5 50%,#db8abc 50%) ; }
.color6{background: linear-gradient(#639adf 50%,#5692dc 50%) ; }
.color7{background: linear-gradient(#df1ddf 50%,#cb1acb 50%) ; }
.color8{background: linear-gradient(#7070df 50%,#6465e0 50%) ; }
.color9{background: linear-gradient(#6fdf6f 50%,#58da58 50%) ; }
.color10{background: linear-gradient(#489bdf 50%,#3c94dd 50%) ; }
.color11{background: linear-gradient(#9a70df 50%,#8a59d9 50%) ; }
.color12{background: linear-gradient(#1ddfdf 50%,#1acbcb 50%) ; }
.color13{background: linear-gradient(#1f9ce0 50%,#1c8dca 50%) ; }

.color1:hover{box-shadow: inset 9999px 9999px rgba(0,0,0,0.10)} 
.color2:hover{box-shadow: inset 9999px 9999px rgba(0,0,0,0.10)}
.color3:hover{box-shadow: inset 9999px 9999px rgba(0,0,0,0.10)}
.color4:hover{box-shadow: inset 9999px 9999px rgba(0,0,0,0.10)}
.color5:hover{box-shadow: inset 9999px 9999px rgba(0,0,0,0.10)}
.color6:hover{box-shadow: inset 9999px 9999px rgba(0,0,0,0.10)}
.color7:hover{box-shadow: inset 9999px 9999px rgba(0,0,0,0.10)}
.color8:hover{box-shadow: inset 9999px 9999px rgba(0,0,0,0.10)}
.color9:hover{box-shadow: inset 9999px 9999px rgba(0,0,0,0.10)}
.color10:hover{box-shadow: inset 9999px 9999px rgba(0,0,0,0.10)}
.color11:hover{box-shadow: inset 9999px 9999px rgba(0,0,0,0.10)}
.color12:hover{box-shadow: inset 9999px 9999px rgba(0,0,0,0.10)}
.color13:hover{box-shadow: inset 9999px 9999px rgba(0,0,0,0.10)}



.crt{
display:none;
}

.chkBox {
	-webkit-appearance: none;
    width: 15px;
    height: 15px;
}

.chkBox:checked {
	background-image: url("../images/chk_correct.png");
	 background-size: 10px 10px;
	 background-repeat: no-repeat;
	 background-position: center; 
	 background-color:#ffffff;
	 border:1px solid;
	 
}
button:focus {
    outline: none;
}
#correct1{
position: absolute;
left: 60px;
top: 60px;
width: 12px;
}
#correct2{
position: absolute;
left: 120px;
top: 60px;
width: 12px;
}
#correct3{
position: absolute;
left: 180px;
top: 60px;
width: 12px;
}
#correct4{
position: absolute;
left: 235px;
top: 60px;
width: 12px;
}
#correct5{
position: absolute;
left: 295px;
top: 60px;
width: 12px;
}
#correct6{
position: absolute;
left: 353px;
top: 60px;
width: 12px;
}
#correct7{
position: absolute;
left: 410px;
top: 60px;
width: 12px;
}
#correct8{
position: absolute;
left: 468px;
top: 60px;
width: 12px;
}
#correct9{
position: absolute;
left: 526px;
top: 60px;
width: 12px;
}
#correct10{
position: absolute;
left: 585px;
top: 60px;
width: 12px;
}
#correct11{
position: absolute;
left: 643px;
top: 60px;
width: 12px;
}
#correct12{
position: absolute;
left: 700px;
top: 60px;
width: 12px;
}
#correct13{
position: absolute;
left: 760px;
top: 60px;
width: 12px;
}

#text{
width:800px;
height:500px;
border:1px solid ;


}

#left{
    position: absolute;
    left: 0px;
    top: 100px;
    width: 200px;
    height: 500px;
    border: 1px solid;
    background-color: #666666;
}


#right{
	position: absolute;
    left: 200px;
    top: 100px;
    width: 600px;
    height: 500px;
    border: 1px solid;
	background-color:#666666;
	overflow:hidden;
}


table, th, td {
    border: 1px solid black;
    border-collapse: collapse;	
	
	
}
th, td {
    padding: 5px;
}
th {
    text-align: left;
	background: linear-gradient(#d3d3d3 50%,#cccccc 50%);
	font-size: 12px;
    width: 75px;
    width: 75px;
	
}
th:hover {box-shadow: inset 9999px 9999px rgba(0,0,0,0.10)}

tr {background-color:#fff; }

tr:hover { background-color: #cedbef;}/*#a8c6ee */
 tr.active { background-color: #a8c6ee; } /*toogle color */
#data{
height: 17px;
background-color: #dcdcdc;
border: 1px solid #808080;
padding-left: 5px;
font-size: 13px;
padding-top: 3px;
    font-weight: bold;

}

#cat{
height: 18px;
background-color: #dcdcdc;
border: 1px solid #808080;
padding-left: 5px;
padding-top: 2px;
font-size: 13px;
    font-weight: bold;
}

#item_add{
height:400px;
width:150px;
background-color:#fff;
border:1px solid ;
margin-top: 5px;
margin-left:20px;
overflow:auto;

}

#table{
	margin-top: 5px;
    margin-left: 5px;
	overflow:hidden;
}

#add {
	width:40px;
	margin-left: 55px;
	margin-top: 15px;
    border-radius: 3px;
    border: 1px solid;
}

#minus {
	width:40px;
	margin-left: 5px;
	margin-top: 15px;
    border-radius: 3px;
    border: 1px solid;
}

#export{
    width: 70px;
	margin-left: 65px;
	margin-top: 5px;
    border-radius: 3px;
    border: 1px solid;
}

#new_cat{
width:200px;
height:100px;
text-align: center;
background-color:#666666;
font-size:10px;
position:absolute;
top:5px;
left:15px;
border: 1px solid;
}

#title{
    margin-bottom: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
	padding-right: 125px;
    background-color: #b3b3b3;
	font-weight: bold;
}

.item{
	/* height:20px; */
	background-color: #fff;
	font-size: 13px;
/* 	width:500px;
	overflow: hidden; */
}
.item.select { background-color: #a8c6ee !important; }
.item:hover { background-color: #cedbef;}
#left button:hover{background-color: #b3b3b3;}
#new_cat button:hover{background-color: #b3b3b3;}

.close{
	position: absolute;
    top: 2px;
    left: 180px;
	width:10px;
	font-size: 11px;
    font-weight: 600;
    cursor: default;
    border: 1px solid #00800003;
    font-family: 'Calibri';
    letter-spacing: 2.2px;
    padding-left: 2px;
}

.close:hover{
    border: 1px solid;
	cursor:pointer;
}

#p_cat{
width:275px;
height:280px;
background-color: grey;
position:absolute;
top:55px;
left:215px;
border: 1px solid;
z-index: 1;
}

#p_title{
height:20px;
border:1px solid;
}

.close1{
	position: absolute;
    top: 2px;
    left: 253px;
	width:10px;
	font-size: 13px;
    font-weight: 600;
    cursor: default;
    border: 1px solid #00800003;
    font-family: 'Calibri';
    letter-spacing: 2.2px;
    padding-left: 2px;

}
.close1:hover{
    border: 1px solid;
	cursor:pointer;
}
#cancel1{
	width: 70px;
    position: absolute;
    top: 215px;
    left: 195px;
}

#complete1{
width: 70px;
position:absolute;
top:240px;
left:195px;

}

.cat_table{
    position: absolute;
    left: 10px;
    top: 30px;
	font-size:12px;
	/* border:1px solid; */
	height:235px;
	width:172px;
	overflow:auto;
}

#data_export{
    height: 300px;
    width: 250px;
    border: 1px solid;
    position: absolute;
    top: 120px;
    left: 145px;
	background-color:#fff;
}
#data_export:not(.show) {
    display: none;
}

#export_title{
    background-color: #b3b3b3;
    height: 20px;
    padding-left: 5px;
    padding-top: 5px;
    font-size: 12px;
}

 .export_close {
	position: absolute;
    top: 5px;
    left: 226px;
	width:10px;
	font-size: 11px;
    font-weight: 600;
    cursor: default;
    border: 1px solid #00800003;
    font-family: 'Calibri';
    letter-spacing: 2.2px;
    padding-left: 4px;
}

.export_close:hover{
    border: 1px solid;
} 

.popup{
	height: 200px;
    width: 200px;
    border: 1px solid;
    position: absolute;
    top: 120px;
    left: 145px;
	background-color:#fff;
	display:none;
}

.data_close {
width: 15px;
position: absolute;
left: 175px;
top: 5px;
}

#list_title{
    background-color: #b3b3b3;
    height: 17px;
    padding-left: 5px;
    padding-top: 5px;
    font-size: 12px;
	overflow: hidden;
}

.list_datatxt{overflow:auto;height: 175px;}

.data_close:hover{
    border: 1px solid;
}

#dummy{
    position: absolute;
    top: 100px;
    height: 500px;
    width: 200px;
    opacity: 0.4;
    background-color: #000;
	display:none;
}

#dummy1{
    position: absolute;
    top: 0px;
    height: 125px;
    width: 803px;
	opacity: 0.4;
	background-color:#000;
	display:none;
}

.noCrsr {
    margin-right: +5px;    
/*    cursor:col-resize; */
     height: 17px;
    text-align: left;
    display: table-cell;
    vertical-align: middle;
    position: relative;
    /* left: 7px; */
}

.tooltips {
  position: relative;
  display: inline-block;
}

.tooltips .tooltipstext {
  visibility: hidden;
  width: 80px;
  height:10px;
  background-color: #ffffce;
  color: black;
  text-align: center;
  padding: 5px;
  position: absolute;
  z-index: 1;
  top: 135%;
  left: 160%;
  margin-left: -60px;
  font-size: 8px;
  border-radius: 2px;
}

.tooltips .tooltipstext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 30%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent transparent;
}

.tooltips:hover .tooltipstext {
  visibility: visible;
}

.title_txt {
    overflow:  hidden;
	height:14px;
    width: 150px;
    min-width: 150px;
    text-overflow:  ellipsis;
}

button {
padding-bottom: 2px;
cursor:pointer;
}