/*.div{
	border: black;
	border-style: dotted;
}*/

.header{
	width: 100%;
	height: 50px;
}     

.body{
	width: 98.5%;
	height: calc(100% - 55px);
	display: block;
	overflow: hidden;
	white-space: nowrap;
	bottom: 0px;
	z-index: 1;
	text-align: center;
	/*border: 1px solid red;*/
	position: absolute;
}  

.body_center{
	border-right: 1px solid grey;
	border-left: 1px solid grey;
	display: inline-block;
	position: relative;
	height: calc(100% - 0px);
	width: 3%;
	white-space: normal;
	z-index: 1;
	vertical-align: top;
}


.body_center .deactivate{
	border-style: outset;
	border-color: red;
	cursor: not-allowed;
}


.body_center .activate{
	border-style: outset;
	border-color: orange;
	cursor: not-allowed;
}


 .body table {
    width: 100%;
    border-spacing: 0;
}

/*thead, tbody, tr, th, td { display: block; }*/

.body thead tr {
    /* fallback */
    width: 97%;
    /* minus scroll bar width */
    width: -webkit-calc(100% - 16px);
    width:    -moz-calc(100% - 16px);
    width:         calc(100% - 16px);
}

.body tr:after {  /* clearing float */
  content: ' ';
  display: table;
  visibility: hidden;
  clear: both;
	display: relative;
 }

.body tbody {
  height: calc(100% - 20px);
  overflow-y: scroll;
  overflow-x: hidden;
}

.body tbody td, .body thead th {
  width: 23%;  /* 19% is less than (100% / 5 cols) = 20% */
  float: left;
	white-space: nowrap;
 }

.body thead tr:hover{
	cursor: default;
}

.body tbody tr:hover{
	background-color: #ffff99;
	cursor: pointer;
}

span{
	color: blue;
}














.body .outer { 
	font:normal 14px/18px 'latomedium', arial, sans-serif;
	border-right: 1px solid grey;
	border-left: 1px solid grey;
	border-bottom: 1px solid red;
 	display: inline-block;
	position: relative;
	height: calc(100% - 55px);
	width: 47.8%;
	white-space: normal;
	z-index: 1;
	vertical-align: top;
	position:relative;
	padding:40px 0 0 0;
	/*width:52%;*/
	background:#eee;
	margin:0 0 50px 0;
}

.body .inner {
	overflow-y:scroll;
	width:100%;
 	/*width:90%;*/
	height:calc(100% - 25px);
	background:#eee;
}

.body .outer table caption {
	position:absolute;
	width:calc(100% - 25px);
	text-align:center;
	top:0;
	left:0;
	height:17px;
	background:#FFFFFF;
	border:1px solid #fff;
	color:#fff;
	border-style: inset;
	text-align: left;
	padding-left: 20px;
}


.body .outer table caption span {
cursor: pointer;
}

 .body .outer thead tr {
	position:absolute;
	top:20px;
	height:20px;
	left:0;
	width:calc(100% - 17px);
}
.body .outer tfoot td {
	position:absolute;
	width:100%;
	text-align:center;
	background:#f0c992; 
	border:1px solid #000;
	color:#000;
	bottom:0;
 	left:0
}

.body .outer th, .outer td {
	width:10em;
	text-align:center;
}

.body .outer th {
	background:#724a10; 
	color:#fff;
}

.body .outer .dk {
	background:#fff;
}


.body .outer td:nth-child(1), .body .outer th:nth-child(1) {
	width: 47%;
}

.body .outer td:nth-child(2), .body .outer th:nth-child(2) {
	width: 12%;
}

.body .outer td:nth-child(3), .body .outer th:nth-child(3) {
	width: 12%;
}

.body .outer td:nth-child(4), .body .outer th:nth-child(4) {
	width: 25%;
} 

.body tfood td:nth-child(1), .body tfood th:nth-child(1) {
	width:25em;
	text-align:center;
}

.body table, .body th, .body td {
	border: 0.1px solid white;
}

.body table tbody td{
	height: 25px;
}

/* Selected elments in row */
.body .selected {
	background: #bdf;
}

/* block to select the item */
.body tr {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}







/*.body #myTable span{
cursor: pointer;

}


.body #myTable span:hover {
cursor: pointer;
color: red;
}*/







/*.control{
width: 100%;
height: 50px;
text-align: center;
}*/

/*.explorer_window{
border-right: 1px solid grey;
border-left: 1px solid grey;
border-bottom: 1px solid red;
 display: inline-block;
position: relative;
height: calc(100% - 55px);
width: 48%;
white-space: normal;
z-index: 1;
vertical-align: top;
} */

/*.link{
display: inline-block;
position: relative;
white-space: normal;
z-index: 1;
vertical-align: bottom;
overflow: hidden;
margin: 0 0 10px;
border-style: ridge;
padding: 3px 10px 3px 10px;
min-width: 48%;
max-width: 49%;
bottom: 0;
}*/



/*#cross {
  background: red;
  height: 100px;
  position: relative;
  width: 20px;
}

#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
}
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid red;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}


#triangle-left {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-right: 100px solid red;
	border-bottom: 50px solid transparent;
}

#triangle-right {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-left: 100px solid red;
	border-bottom: 50px solid transparent;
}*/