html,body{
	height 			: 100%;
	overflow 		: hidden;
}
#instruction-panel{
	overflow-y 		: auto;
}
*[data-container="procedure"]{
	padding 		: 20px;
	overflow-y 		: auto;
}

.main-exercise-panel-container{
	height 			: 100%;
	overflow-y 		: auto;
}
.main-exercise-panel-container > .cpanel{
	height 			: 100%;
}
.main-exercise-panel-container > .cpanel:not(.active){
	display 		: none;
}

.preparation-panel-header{
	width 			: 100%;
	height 			: 40px;
	background-color: #555;
	color 			: #eee;
	padding 		: 10px;
	font-size 		: 15px;
	font-weight		: bold; 
	position		: relative; 
}
.preparation-panel-header > .dropdown-container{
	position 		: absolute;
	right 			: 5px;
	top 			: 3px; 
	width 			: 200px;
}
.preparation-panel-header > .dropdown-container-categ{
	position 		: absolute;
	right 			: 210px;
	top 			: 3px; 
	width 			: 200px;
}

.preparation-panel-body{
	width 			: 100%;
	height 			: calc(100% - 80px);
}

.preparation-panel-footer{
	width 			: 100%;
	padding 		: 3px 5px;
	height			: 40px;
	background-color: #555;  
}

*[data-container="prepared_materials"]{
	padding 		: 20px;
}

.prep-material-box{
	height 			: 40px;
	width 			: calc(25% - 10px);
	min-width		: 
	border-radius	: 5px; 
	border 			: 1px solid #555;
	position		: relative;
	float 			: left; 
	overflow		: hidden; 
	cursor 			: pointer;
	margin 			: 5px;
}
.prep-material-box .material-name{
	overflow 		: hidden;
	text-overflow	: ellipsis;
	white-space		: nowrap;  
	height 			: 100%;
	width 			: calc(100% - 40px);
	padding 		: 10px 5px;
}
.prep-material-box button.remove{
	background-color: transparent;
	border			: none; 
	position		: absolute;
	right 			: 0px;
	top 			: 0px;
	font-size 		: 20px;
	color 			: #f55;
	cursor 			: pointer;
	z-index 		: 2;
	height 			: 40px;
	width 			: 40px;
	outline 		: none;
}
.prep-material-box button.remove:hover{
	font-weight 	: bold;
}


.microscope-container{
	position		: relative; 
}
.microscope-button-container{
	position		: absolute;
	left 			: 0;
	bottom 			: 0;
	z-index 		: 2000;
	/*background-color: #555;*/
	width 			: 100%;
	height 			: 50px;
	padding 		: 8px;
}

.mc-instruction-container{
	width 			: 100%;
	height 			: 33px;
	position		: absolute; 
    top 			: 0;
    left			: 0;
    z-index			: 100;
    color			: #fff;
    padding 		: 10px;
    background-color: rgba(50,50,50,0.9);
    transition		: height 0.5s ease; 
	overflow 		: hidden;
	text-overflow	: ellipsis;
	white-space 	: nowrap; 
	padding-right 	: 60px;
}

.mc-instruction-container > .instruction-header{
	font-weight		: bold; 
}
.mc-instruction-container > .readbtn{
	color 			: #5af;
	position 		: absolute;
	right 			: 10px; 
	top 			: 15px; 
	font-size 		: 10px;
	cursor 			: pointer;
	display 		: initial;
}
.mc-instruction-container > .readbtn:hover{
	text-decoration	: underline; 
}

.mc-instruction-container.active{
	height 			: auto;
	white-space		: normal; 
}
.mc-instruction-container.active > .readbtn{
	position		: static;  
	padding-left 	: 10px;
}

.mc-area{
	position 		: relative; 
}

.mc-prop{
	position		: absolute;
	bottom 			: 10px;
	right 			: 10px; 
	color 			: #fff;
	z-index 		: 2000;
}

.mc-image-container{
	height 			: 500px;
	width 			: 500px;
	position		: relative;
	background-color: #ccc;
	overflow 		: hidden;
	cursor 			: move;
	margin 			: auto;
}

#mc-image-main{
	/*border 			: 2px double #333;*/
	/*height 			: 10%;
	width  			: 10%;*/
	position 		: absolute;
	top 			: 0px;
	left 			: 0px; 
	z-index			: 1; 
	/*filter 		: brightness(0.8);
	filter 			: blur(10px);*/
}
input[type="range"][disabled]{
 	cursor 			: not-allowed; 	
}

#mc-preview-overlay{
	position		: absolute;
	z-index 		: 10; 
	top 			: 0;
	left 			: 0;
}

#mc-preview-overlay2{
	position		: absolute;
	z-index 		: 10; 
	top 			: 0;
	left 			: 0;
}


.mc-control-panel{
	width 			: 100%;
	background-color: #555;
	padding 		: 30px 20px;
	color 			: #fff;
	overflow-y  	: auto;
}

.slide-post-label{
	width 			: 100%;
}
.slide-post-label td{
	text-align 		: center;
}
.slide-post-label td:first-child{
	width 			: 20%;
	text-align		: left; 
}
.slide-post-label td:last-child{
	width 			: 20%;
	text-align		: right; 
}


#microscope-submit-error{
	height 			: 30px;
	width 			: 100%;
	float 			: left;
	color 			: #f55;
}
#microscope-submit-error > span.success{
	color 			: #5fa;
}


#stage-control-y{
	position		: absolute;
    z-index			: 2000;
    left			: -10%;
    width			: 400px;
    top				: 46%;
    transform		: rotate(90deg);
}
#stage-control-x{
	position		: absolute;
    z-index			: 2000;
    left			: 24.5%;
    width			: 400px;
    bottom 			: 5%;
}

div[data-container="report-body"]{
	padding 		: 20px;
	overflow-y 		: auto;
}

.microscope-report-container{
	border 			: 1px solid black;
	border-radius	: 5px;
	padding 		: 20px;  			
	width 			: 100%;
	min-height 		: 300px;
}
.microscope-report-container:not(:last-child){
	margin-bottom 	: 20px; 		
}


.report-lesson{
	font-weight 	: bold;
	width 			: 100%;
	font-size 		: 20px; 
	text-align		: center;
}

.report-img-container{
	padding 		: 25px 20%;
	overflow 		: hidden;
}
.report-detail-container{
	padding 		: 10px 20%;
}


.report-orig-image{
	float 	 		: left;
}
.report-student-image{
	float 	 		: right;
}

.report-img-box{
	position 		: relative; 
	width 			: 300px;
	height 			: 300px;
}

.report-img-box > canvas,
.report-img-box > div{
	position 		: absolute; 
}

.report-img-box > canvas{
	top 			: 0px;
	left 			: 0px;
}

.report-img-box > img,
.report-img-box > canvas{
	width 			: 100%;
	height 			: auto;
}
.report-img-box > div{
	bottom 			: 0px;
	left 			: 0px;
	height 			: 30px;
	width 			: 100%; 
	text-align 		: center;
	color 			: #fff;
	background-color: rgba(20,20,20,0.5);
	padding 		: 5px; 

}
.report-speciment-title{
	width 			: 100%;
	text-align		: center;
	font-style 		: italic; 
	font-size 		: 20px;
	color 			: #555;
}


@media(max-width: 991px){
	.microscope-container{
	}
}

@media(max-width: 1080px){
	.report-img-container{
		padding 	: 25px 10%;
	}
	.report-detail-container{
		padding 		: 10px 10%;
	}

}

@media(max-width: 800px){
	.report-img-container{
		padding 	: 25px 20px;
	}
	.report-detail-container{
		padding 		: 10px 20px;
	}


	.report-img-box{
		width 		: 250px;
		height 		: 250px;
	}

}

@media(max-width: 600px){
	.report-img-container{
		padding 	: 25px 10px;
	}
	.report-detail-container{
		padding 		: 10px 10px;
	}

	.report-img-box{
		width 		: 100%;
		height 		: auto; 
		margin-top 	: 10px;
	}

}