body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 20px; /* Location of the box */
    left: 40%;
    top: 15px;
    width: 50%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
}
.modal_lab_cs {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 20px; /* Location of the box */
    left: 17%;
    top: 220px;
    width: 50%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
}
.modal_res {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 20px; /* Location of the box */
    left: 40%;
    top: 15px;
    width: 50%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
}
/************************************************/
/* The Modal (background) for QUIT and Animation*/
.modal_quit_ani {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    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 */
}
#quit_body {
	text-align: center;
	color:white;
	background-color: #dbd6d6;
}
#quit_body > h4{
	font-weight: bold;
}
#quit_body > h5{
	font-weight: bold;
}
#quit_body > h6{
	color:#ABB2B1;
	font-weight: bold;
}
.quitbtn_boxr{
	background-color: #CA3527;
	padding:5px;
	margin:10px;
	border:3px solid white;
	display: inline-table;
}
.quitbtn_box{
	padding:5px;
	margin:10px;
	border:3px solid white;
	background-color: #7B8A8F;
	display: inline-table;
}
/*
 * /
/*technition in lab*/
.modal_technition {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 0px; /* Location of the box */
    left: 20%;
    top: 10%;
    width: 50%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
}
/*animation popup in lab*/
.modal_ani_popup {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 0px; /* Location of the box */
    left: 30%;
    top: 10%;
    width: 50%; /* Full width */
    max-height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
}

@media only screen and (max-width: 2561px){
	.modal_lab_cs {
    	left: 19%;
    	top: 475px;
    	width: 40%; /* Full width */
    }
    .modal_res {
    	right: 1%;
    	top: 450px;
    	width: 40%; /* Full width */
    }
   /*Buttons on main screen*/
    
    
}
@media only screen and (max-width: 1441px){
	.modal_lab_cs {
    	left: 19%;
    	top: 220px;
    	width: 40%; /* Full width */
    }
    .modal_res {
    	right: 1%;
    	top: 50px;
    	width: 40%; /* Full width */
    }
/*technition in lab*/
.modal_technition {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 20px; /* Location of the box */
    left: 20%;
    top: 15%;
    width: 80%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
}
/*Buttons on main screen*/

}
@media only screen and (max-width: 1050px){
	.modal {
		left: 40%;
    	width: 70%; /* Full width */
	}		
	.modal_lab_cs {
    	left: 6%;
    	top: 160px;
    	width: 60%; /* Full width */
    }
    .modal_res {
    	right: 1%;
    	top: 1px;
    	width: 50%; /* Full width */
    }
	/*technition in lab*/
	.modal_technition {
    	display: none; /* Hidden by default */
    	position: fixed; /* Stay in place */
    	z-index: 1; /* Sit on top */
    	padding-top: 30px; /* Location of the box */
    	left: 10%;
    	top: 5%;
    	width: 100%; /* Full width */
    	height: 100%; /* Full height */
    	overflow: auto; /* Enable scroll if needed */
	}
	/*Buttons on main screen*/

}
@media only screen and (max-width: 800px){
	.modal {
		left: 0;
    	width: 100%; /* Full width */
	}
	.modal_lab_cs {
    	left: 1%;
    	top: 150px;
    	width: 70%; /* Full width */
    }
    .modal_res {
    	right: 1%;
    	top: 1px;
    	width: 75%; /* Full width */
    }
	/*technition in lab*/
	.modal_technition {
    	display: none; /* Hidden by default */
    	position: fixed; /* Stay in place */
    	z-index: 1; /* Sit on top */
    	padding-top: 5px; /* Location of the box */
    	left: 5%;
    	top: 2%;
    	width: 100%; /* Full width */
    	height: 100%; /* Full height */
    	overflow: auto; /* Enable scroll if needed */
	}	
	/*animation popup in lab*/
	.modal_ani_popup {
    	display: none; /* Hidden by default */
    	position: fixed; /* Stay in place */
    	z-index: 1; /* Sit on top */
    	padding-top: 0px; /* Location of the box */
    	left: 10%;
    	top: 5%;
    	width: 90%; /* Full width */
    	height: 100%; /* Full height */
    	overflow: auto; /* Enable scroll if needed */
	}
	/*Buttons on main screen*/

}
@media only screen and (max-width: 500px){
	/*
	.modal {
		left: 0;
    	width: 100%; 
	}*/
	.modal_lab_cs {
    	left: 0px;
    	top: 70px;
    	width: 100%; /* Full width */
    }
    .modal_res {
    	left:1px;
    	top: 1px;
    	width: 100%; /* Full width */
    }
       /*Buttons on main screen*/
   
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 70%;
}

 /* Modal Header */
.modal-header {
	background-image: url("../images/toplieux.PNG");	
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 100%;
	max-height: 100%;
	letter-spacing: -1px;
	font-weight: bold;
	color:#333333;
	padding:5px;
	margin-bottom:15px;	
    padding: 2px 16px;
}

/* Modal Body */
.modal-body {padding: 2px 10px;}
.nav_model_body{
	padding-top:7px;
	background-color: #c5c9c9;
}
/*
 Crime Scene & Laboratories
 */
.CSL_model{
	color: white;
	margin-bottom: 15px;
}
.CSL_model > p:first-child{
	border:2px dotted white;
	background-color: #819095;
}
.CSL_model > p:first-child > img:first-child{
	border-right:2px dotted white;
}
.CSL_model > p:nth-child(2){
	background-color: #A18C9F;
}
.CSL_model > p:nth-child(3){
	background-color: #71A07E;
}
.CSL_model > p:nth-child(4){
	background-color: #8294BC;
}
.CSL_model > p:nth-child(5){
	background-color: #C48C91;
}
.CSL_model > p{
	border:2px solid white;
}
.CSL_model > p > img{
	border-right:2px solid white;
}
.CSL_model > p:hover{
	background-color:#CC3426;
}
/* The Close Button */
.close {
    float: right;
    font-size: 11px;
    font-weight: bold;
    color: white;
}
.close_box{
    font-size: 15px;
    font-weight: bold;
    color:white;
    background-color: red;
	border:1px solid white;	
	padding: 1px 1px;
}
.close_box_evi{
    font-size: 15px;
    font-weight: bold;
    color:black;
    background-color: lightgrey;
	border:1px solid white;	
	padding: 1px 1px;
}
/* Modal Footer */
.modal-footer {
    padding: 10px 16px;
    background-color: #999999;
    color: white;
    border-bottom:1px solid white;
}
/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 65%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.model-top{
	animation-name: animatetop;
    animation-duration: 0.4s;	
}
/* Add Animation */
@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}
.model-bottom{
	animation-name: animatebottom;
    animation-duration: 0.4s;	
} 
/* Add Animation */
@keyframes animatebottom {
    from {top: 0px; opacity: 0}
    to {top: 0px; opacity: 1}
} 

#myModal_Exhi,#myModal_Help{
	font-size: 11px;
}
#myModal_Exhi > .modal-content{
	line-height: 1.2;
	background-color: #CB3526;
	color: white;
}
/*modal header*/
.nav_model_head
{
	background-color: #c5c9c9;
}

/*Resource box*/
.res_box{
	border:1px solid #959FA1;
	color: white;
	margin-bottom: 5px;
}
.res_box > aside:nth-child(1){
	font-size: 12px;
	padding-left: 2px;
	padding-bottom: 2px;
	font-weight:bold;
	display:inline;
	letter-spacing: 0.15px;	
}
.res_box > aside:nth-child(2){
	background-color: #6F8080;
	border-left:1px solid white;
	border-bottom:1px solid white;
	font-size: 12px;
	font-weight:bold;
	display:inline;
	float:right;
	letter-spacing: 0.15px;
	padding-left: 2px;
	padding-right: 2px;
}
.res_box > aside:nth-child(3){
	background-color: #7A898E;
	border-top:1px solid white;
	display:block;
	padding:10px;
}
.res_box > aside:nth-child(3)> p {
	font-size: 12px;
}

.res_box > aside:nth-child(3)> label {
	font-size: 10px;
	font-weight:bold;
	border: 1px solid white;
	padding: 5px;
	margin:0px;
}
/*Evidence Box*/

.evi_box{
	border:2px solid white;
	color: white;
}
.evi_box > div:nth-child(1) > div:nth-child(1){
	background-color:#728081;
	border:1px solid white;
	font-size: 9px;
	padding-left: 2px;
	padding-bottom: 2px;
	font-weight:bold;
	display:inline;
	letter-spacing: 0.15px;	
}
.evi_box > div:nth-child(1) > div:nth-child(2) {
	background-color:#728081;
	border:1px solid white;
	font-size: 9px;
	font-weight:bold;
	display:inline;
	float:right;
	letter-spacing: 0.15px;
	padding-left: 2px;
	padding-right: 2px;
}
/*Evi Box Second row*/
.evi_box > div:nth-child(2) > div:nth-child(1){
	font-size: 10px;
	border:1px solid white;
	padding-left: 2px;
	font-weight:bold;
	display:inline;
	letter-spacing: 0.15px;	
	background-color: #CC3426;
}
.evi_box > div:nth-child(2) > div:nth-child(2) {
	background-color: #6F8080;
	border:1px solid white;
	font-size: 10px;
	font-weight:bold;
	display:inline;
	float:right;
	letter-spacing: 0.15px;
	padding: 10px;
}
.evi_box > div:nth-child(2) > div:nth-child(3) {
	background-color: #6F8080;
	border:1px solid white;
	font-size: 10px;
	font-weight:bold;
	display:inline;
	float:right;
	letter-spacing: 0.15px;
	padding: 10px;
}
.evi_img{
	max-width:100px;
	display: inline;
	border: 1px solid lightgrey;
}
#evi_title{
	font-size: 16px;
}
/*EVIDENCE WINDOW 2*/
.evi_box2{
	border:3px solid white;
	background-color:#5E6C6D;
	color: white;
	font-size: 9px;
	padding-bottom:5px;
	padding:5px;
}
.evi_box2 > span:nth-child(1){
	font-size: 12px;
	font-weight:bold;
	letter-spacing: 0.15px;
	padding-left: 2px;
	padding-right: 2px;
}

.evi_box2 > div > div > aside{
	background-color:#819095;
	border:1px solid white;
	font-size: 12px;
	font-weight:bold;
	letter-spacing: 0.15px;
	padding: 5px;
}
.evi2_title{
	font-size: 10px;
	padding:5px;
	background-color: #CFCEC8
	
}
/*Green Box - Evidence + Analyze Lab*/
.evi_box2G{
	background-color: #01905B;
	border:3px solid white;
	color: white;
	font-weight:bold;
	text-align: center;
	padding:25px 20px;
}
.evi_box2G > span:nth-child(1){
	font-size: 12px;
	
}
.evi_box2G > span:nth-child(4){
	background-color: #00855A;
	border:3px solid white;
	font-size: 11px;
	padding:5px;	
}
/*Red Box - Evidence*/
.evi_box2R{
	background-color: #B32C1F;
	border:3px solid white;
	color: white;
	font-weight:bold;
	text-align: center;
	padding:25px 20px;
}
.evi_box2R > span:nth-child(1){
	font-size: 12px;
	
}
.evi_box2R > span:nth-child(4){
	background-color: #9F241C;
	border:3px solid white;
	font-size: 11px;
	padding:5px;	
}
/*evidence lab analyze*/
.evi_box3{
	border:3px solid white;
	background-color:#5E6C6D;
	color: white;
	font-size: 9px;
	padding-bottom:5px;
	padding:5px;
}
.evi_box3 > span:nth-child(1){
	font-size: 12px;
	font-weight:bold;
	letter-spacing: 0.15px;
	padding-left: 2px;
	padding-right: 2px;
}
.evi_btn3{
	border:1px solid white;
	font-size: 11px;	
	font-weight:bold;
	letter-spacing: 0.15px;
	padding: 5px;
}

/*background colors*/
/*used in res labels*/
.crime_bk{
	background-color: #666C6C;
}
.genetics_bk{
	background-color: #7D6C7E;
}
.ballistic_bk{
	background-color: #56865C;
}
.chemistry_bk{
	background-color: #6F84AF;
}
.finger_bk{
	background-color: #B87683;
}
.res_label_bk{
	background-color: #636E70;	
}
.crime_bk:hover,.genetics_bk:hover,.ballistic_bk:hover,.chemistry_bk:hover,.finger_bk:hover,.res_label_bk:hover,.res_aside_top:hover{
	background-color: #CC3426;
}
.evi3_btn:hover, .evi_box2 > div > div > aside:hover, .evi_box2G > span:nth-child(4):hover{
		background-color: #CC3426;
}
.quitbtn_boxr:hover,.quitbtn_box:hover{
		background-color: #CC3426;
		border:5px solid white;
}

/*****  NEW BTN_SCENE STYLE******/

.Ebtn_1{
    position: absolute;
    left: 16vh;
    top: 14vh;
  
}
.Ebtn_2{
    position: absolute;
    left: 35vh;
    top: 30vh;
  
}
.Ebtn_3{
    position: absolute;
    left: 22vh;
    top: 50vh;
  
}
.Ebtn_4{
    position: absolute;
    left: 42vh;
    top: 47vh;
  
}
.Ebtn_5{
    position: absolute;
    left: 58vh;
    top: 32vh;
  
}
.ETech{
    position: absolute;
    left: 69vh;
    top: 12vh;
}