body {
    font-size: 100%;
}
div.main {
	position:fixed;
	top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}

div.leftpanel {
	float: left;
	position: fixed;
	width: 20%;
	height: 100%;
	background-color: slategray;
}

div.flist {
	float: left;
	position: relative;
	width: 100%;
	height: 75%;
	background-color: slategray;
	overflow: scroll;
}

.file, .file_fail {
	position: relative;
	color: white;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
	height: 5%;
	text-align: left;
	margin: 3%;
	margin-right: 4%;
    box-shadow: 5px 10px 18px #000000;
	z-index: 1;
    display:flex;
    align-items: center;
    justify-content: left;
	padding-left: 5%;
	overflow: visible;
	cursor: default;

	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.file {
	background-color: gray;
}

.file_fail {
	background-color: red;
}

.file:hover,.file_fail:hover {
	color: white;
    box-shadow: 7px 14px 26px #000000;
	overflow: visible;
}
.file:hover {
	background-color: lightgray;
}
.file_fail:hover {
	background-color: pink;
}
.file:active,.file_fail:active {
	margin-right: 3%;
	margin-left: 4%;
	margin-top: 4%;
	margin-bottom: -1%;
}

div.controlpanel {
	float: left;
	position: relative;
	width: 100%;
	height: 10%;
	background-color: slategray;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
//	padding: 5%;
//	border: 1px solid black;
}

div.controlpanel {
//	float: right;
	position: relative;
	width: 100%;
	height: 5%;
	background-color: slategray;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
	display: flex;
//	padding: 5%;
//	border: 1px solid black;
}

div.controlbutton {
//	position: relative;
	background-color: gray;
	color: white;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
//	width: 20%;
	height: 75%;
	text-align: center;
	margin-left: 3%;
	margin-top: 2%;
	margin-down: 2%;
	margin-right: 0%;
    box-shadow: 5px 10px 18px #000000;
	z-index: 1;
//    display:flex;
display: inline-block;
//    align-items: center;
//    justify-content: left;
	padding-left: 2%;
	padding-right: 2%;
	padding: 1%em;
	overflow: visible;
	cursor: default;

	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
div.controlbutton:hover {
	background-color: lightgray;
	color: white;
    box-shadow: 7px 14px 26px #000000;
	overflow: visible;
}
div.controlbutton:active {
	margin-right: -2%;
	margin-left: 5%;
	margin-top: 4%;
	margin-bottom: -1%;
}

div.reportpanel {
	float: left;
	position: relative;
	width: 100%;
	height: 20%;
	background-color: slategray;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
//	padding: 5%;
//	border: 1px solid black;
}

div.report {
	background-color: white;
	position: relative;
    box-shadow: 5px 10px 18px #000000;
	z-index: 1;
	margin: 3%;
	margin-right: 4%;
	height: 82.4%;
	overflow: scroll;
//	border: 1px solid red;
	padding: 2%;
	white-space: pre-wrap;
}



div.viewpanel {
	position: relative;
	float: right;
	width: 80%;
	height: 100%;
	background-color: slategray;
	z-index: 0;
	overflow: visible;
}
div.viewholder {
//	border: 5px solid red;
	background-color: white;
	position: relative;
	width: 98%;
	height: 98%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    box-shadow: 5px 10px 18px #000000;
	z-index: 1;
}
div.viewer {
//	border: 5px solid green;
	overflow: visible;
	display: block;
	background-color: white;
	position: relative;
	width: 98.2%;
	height: 97%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.can {
	margin: 0 auto;
	position: relative;
}