@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap");


.IOSbutton{
	
	cursor: pointer;
	
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

 select {
        height: 10%;
			width: 80%;
        padding: 5px;
	 font-size: 24pt;
	 text-align: center; 

    }

input[type=file] { width: 300px; height: 100px; border: 2px solid #7f3f97; }


body {
	margin: 20px;
	background: rgb(150, 150, 150);
	color: #7f3f97;
	font-family: 'roboto', sans-serif;
	text-align: center;
 	cursor:pointer; 
}


#targetChat{
	
    width:70%;
    height:40%;
    margin: 20px;
	font-size: 40px;
	overflow: visible;
}

#newPost{
	
    width:70%;
    height:10%;
    margin: 20px;
	font-size: 40px;
	overflow: visible;
}


	#targetGraphic button {
				    text-align: center;
					background-color: Transparent;
					outline: none;
					border: none;
		
				}

.lockDisp{
	text-shadow: 0px 0px 2px #000000,0px 0px 2px #000000,0px 0px 3px #7f3f97,0px 0px 3px #7f3f97,0px 0px 2px #000000,0px 0px 2px #000000,0px 0px 3px #7f3f97,0px 0px 3px #7f3f97,0px 0px 2px #000000,0px 0px 2px #000000,0px 0px 3px #7f3f97,0px 0px 3px #7f3f97;
	
	 
	padding: 0px;
	 text-align: center;
	color : white;
	margin:auto;
	
	
}



.stageDisp{
	text-shadow: 0px 0px 2px #000000,0px 0px 2px #000000,0px 0px 3px #7f3f97,0px 0px 3px #7f3f97,0px 0px 2px #000000,0px 0px 2px #000000,0px 0px 3px #7f3f97,0px 0px 3px #7f3f97,0px 0px 2px #000000,0px 0px 2px #000000,0px 0px 3px #7f3f97,0px 0px 3px #7f3f97;
	
	 
	padding: 4px;
	 text-align: left;
	color : white;
	
	
}

#surveyDisp{

	background-color:deeppink;

}

#DDDisp{

	background-color:darkseagreen;

}

#SDDisp{

	background-color:darkviolet;

}

#PDDisp{

	background-color:darkorange;

}

#CDDisp{

	background-color:dodgerblue;

}

#CADisp{

	background-color:aqua;

}




.slideD{
	
		position: absolute;
	bottom: 0px;
	right: 50px;
	
	
}

.disc {
	position: absolute;
	bottom: 0px;
	left: 30px;
	z-index: 200;
	background: url('arrow.png');
	width: 36px;
	height: 70px;
	background-size: 100%;
}

.process {
	position: absolute;
	bottom: 0px;
	right: 0px;
	z-index: 200;
	
}

.correctC {
	position: absolute;
	bottom: 15px;
	right: 0px;
	z-index: 200;
	
}

.accu {
	position: absolute;
	bottom: 0px;
	left:0px;
	z-index: 200;
	
}



#slideD {
	position: relative;
	width: 100%;
	display:inline-block;
	background-color: transparent;
	padding: 0px;
	border-radius: 0px;
	border: 0px solid #444;
	overflow: hidden;
	z-index:0;
}


#threeD {
	position: relative;
	width: 100%;
	height: 100%;
	display:inline-block;
	background: #222;
	padding: 0px;
	border-radius: 0px;
	border: none;
	overflow: hidden;
	z-index:0;
}

#viewer {
	position: relative;
	width: 100%;
	height: 100%;
	display:block;
	background: #2F2;
	padding: 0px;
	border-radius: 0px;
	border: none;
	overflow: visible;
	z-index: 1;

}




#view {
	position: relative;
	width: 100%;
	height: 100%;
	
	background: #222;
	padding: 0px;
	border-radius: 0px;
	border: none;
	overflow: hidden;
	z-index:0;
}


#videoElement {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 0;
	width: 100%;
	height: 100%;
}
	
	#videoElementThreeD {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -1;
	width: 100%;
	height: 100%;
	
}

#ball-0 {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 3;
	
	
	
}

#confetti {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 20;
	
	
	
}

textarea { word-break: break-all;
overflow-wrap: break-word;}
.notes{
	
	overflow-wrap: break-word;
	padding:2px;
 	text-align: left;
 	margin-left: auto;
  	margin-right: auto;
	font-size: 18pt;
	height: 200px;
	width : 50%;
	border: 3px solid #7f3f97;
	
}

.ball {
	position: absolute;
	top: 0px;
	left:0px;
	z-index: 3;
	
	
	
}

.input{
	
	border:0px;
	padding:0px;
 	text-align:center;
 	margin-left: auto;
  	margin-right: auto;
	font-size: 18pt;
	height: 42px;
	width : 300px;
}




.radio{
	
	
	border:0px;
	padding:0px;
 	text-align:center;
 	margin-left: auto;
  	margin-right: auto;
	font-size: 18pt;
	height: 42px;
	width : 300px;
	
	display:inline-block;
	
}

#radioT{
	
	float:right;
	margin-left: auto;
  	margin-right: auto;
	
}


#targetInfo {
	margin: 0px;
	 font-weight: 1000;
	text-shadow: 0px 0px 10px #000000, 0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 10px #000000,0px 0px 10px #000000,4px 0px 10px #000000,-4px 0px 10px #000000,4px 0px 10px #000000,-4px 0px 10px #000000,4px 0px 10px #000000,-4px 0px 10px #000000,4px 0px 10px #000000,-4px 0px 10px #000000,4px 0px 10px #000000,-4px 0px 10px #000000,-4px 0px 10px #86fe19,4px 0px 10px #86fe19,-4px 0px 10px #86fe19,4px 0px 10px #86fe19,-4px 0px 10px #86fe19,4px 0px 10px #86fe19,-4px 0px 10px #86fe19,4px 0px 10px #86fe19,-4px 0px 10px #86fe19,4px 0px 10px #86fe19; 
	font-family: 'Trebuchet MS', sans-serif;
	text-align: center;
	
	
}

#tableT th{
	border: 1px solid white;
}

#tableT td{
	border: 1px solid white;
}


* {
                box-sizing: border-box;
	
            }

				@viewport {
  				width: device-width ;
  				zoom: 1.0 ;
				} 
             
            /* CSS property for header section */
            .header {
              
                
                text-align: center;
				
				
            }
             
            /* CSS property for navigation menu */
            .nav_menu {
                overflow: hidden;
                background-color: #333;
				
            }
            .nav_menu a, .signedOn  {
                float: left;
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px ;
                text-decoration: none;
            }

			#status  {
                float: right;
                display: block;
                color: white;
                text-align: center;
               	padding: 7px 7px 0px 0px;
                text-decoration: none;
            }

		
			


            .nav_menu a:hover {
                background-color: white;
                color: green;
            }
             
            /* CSS property for content section */

				.sideContainer {
                padding: 0px;
				background-color: #C1C1C1;
				border: 3px solid #7f3f97;
				border-radius: 15px;
                text-align:center;
					  width: 100%;
					
					float: center;
						margin: 50px auto;
					 resize: both;
					
            }



	.internalContainer {
		margin:10px;
              padding: 3px;
				background-color: #C1C1C1;
				border: 3px solid #7f3f97;
				border-radius: 15px;
                text-align:center;
				overflow:scroll;
		display:inline-block;
		
			float: both;	
		 
					height: 50%;
					max-height: 300px;
						
		
            }

	

.internalContainer::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.internalContainer {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}



	.nodeInfo {
              padding: 0px;
			
             
			
		displa:inline-block;
	
			margin:auto;
		
	border:0px;
	
 
	font-size: 14pt;

	
	height: 40px;
	width : 20px;
	
	
	
		
		
            }


#newTN {
					font-size: 18pt; height: 42px; width : 250px;
				}

#newTNV {
					font-size: 18pt; height: 42px; width : 50px;
				}

#addTargetLink{
					font-size: 18pt; height: 42px; width : 250px;
				}
				
				button{
					font-size: 24pt;  text-align: center;
					background-color: Transparent;
				}



				.sideContainer table {
				float: center;
				margin: 50px auto;
				background-color: #C1C1C1;
				
				}

	

#targetTable{
	margin:auto;
	border: 0;
	padding:0;
	
	
	
}

				

			.CUFile {
				
				overflow-wrap: anywhere;
				text-align:center;
				width: 90%;
				padding:5px;
				
				}

			

			.CUTitle {
				
				text-align:center;	
			}

		


		
            h2 {
				font-family: Arial, Helvetica, sans-serif;
                color:#7f3f97;
                text-align:center;
            }

			img {
	
				 max-width: 100%;
  				height: auto;
	
				}

						#postItT {
				float: center;
				margin: auto;
				position: static;
				box-sizing:content-box;
				resize:vertical;
				  background-color: black;
				color: #10AE1E; 	
				width: 95%;
							height: 100px;
		
}

			
			

           
            /* Media query to set website layout
            according to screen size */
            @media screen and (max-width:900px) {
              
				
				 .sideContainer {
                    width: 100%;
					
					float: center;
						margin: 50px auto;
					 resize: both;
                }
				
				 .internalContainer {
                    width: 100%;
					height: 50%;
					float: center;
						margin: 50px auto;
					 overflow:scroll;
					display:inline-block;
		max-height: 300px;
		
                }
				
				
		
				
				button{
					font-size: 24pt;  text-align: center;
					background-color: Transparent;
				}
				
				  
    
					
				#postItT {
							
					height: 200px;			
					font-size: 30px;	
				}
				
			
			
			
				
				
			
				
         }