/* css for the labels on the tissue check boxes */


body {background-color: black;}

@media screen and (orientation: landscape) {

	.grid 	{
		display: grid;
		height: 100vh;
		width: 100vw;
		grid-template-areas : 	
								"header header header"
								"t1_graph t1_graph didactic"
								"tissue_T1s tissue_T1s didactic"
								"axis slider didactic"
								"footer footer footer ";
								
		grid-template-columns: 25% 25% 50%;
		grid-template-rows: 5% 44% 23% 23% 5%;
			
		}
		

		#TR_slider {
		 width: 200px;
		 height: 20px;
			}
	
		#TI_slider {
		 width: 200px;
		 height: 20px;
			} 

	
		 #slider {

			grid-area : slider;
			display: flex;
			justify-content : center;
			align-items: center;
			background-color: white;

			}	
			
		.sliders {
			width : 200px;
			height : 50px;
			display: block;
			}	
		
		.center_vert {;}
	
		#content_wrapper {
		
			box-sizing: border-box;
			border-top: solid;
			border-bottom: solid;
			border-left: solid;
			position: relative;
			height : 90vh;
			overflow: hidden;
	

			/* Prevent native touch events on Windows */
			-ms-touch-action: none;

			/* Prevent the callout on tap-hold and text selection */
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;

			/* Prevent text resize on orientation change, useful for web-apps */
			-webkit-text-size-adjust: none;
			-moz-text-size-adjust: none;
			-ms-text-size-adjust: none;
			-o-text-size-adjust: none;
			text-size-adjust: none;
		}
		
}
	
		
@media screen and (orientation: portrait) {
		
.grid  		
{
		display: grid;
		height: 100vh;
		width: 100vw;
		grid-template-areas : 	
								"header header header header"
								"slider t1_graph t1_graph t1_graph"
								"axis axis tissue_T1s tissue_T1s"
								"didactic didactic didactic didactic"
								"footer footer footer footer";
								
		grid-template-columns: 10% 30% 30% 30%;
		grid-template-rows: 5% 25% 15% 50% 5%;
					
		}
		
	#TR_slider {
	 -webkit-appearance: slider-vertical;
	 width: 20;
	 height: 200px;
		}
	
	#TI_slider {
	 -webkit-appearance: slider-vertical;
	 width: 20;
	 height: 200px;
		} 
		
	#slider {
/* 		grid-area : slider; */
		display: flex;
		align-items: center;
		justify-content : center;
		background-color: white;
		}	
	
	.center_vert {
		display: flex;
		align-items: center;
		justify-content : center;	
	}
	
	.sliders {
		width: 30px;
		height: 224px;
		dislay: inline;
		}	
		
	
	#content_wrapper {

		box-sizing: border-box;
		border-top: solid;
		border-bottom: solid;
		position: relative;
		height : 50vh;

		overflow: hidden;
	

		/* Prevent native touch events on Windows */
		-ms-touch-action: none;

		/* Prevent the callout on tap-hold and text selection */
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;

		/* Prevent text resize on orientation change, useful for web-apps */
		-webkit-text-size-adjust: none;
		-moz-text-size-adjust: none;
		-ms-text-size-adjust: none;
		-o-text-size-adjust: none;
		text-size-adjust: none;
	}


}
		
	

#header {
	grid-area: header;
	display : flex;
	align-items: center;
	justify-content : center;}
	
	
	
#footer {
	grid-area: footer;
	display : flex;
	align-items: center;

	}
	
	

#t1_tissue_filter {

	grid-area : t1_graph;
	background-color : white;

}


	

#TR_and_axis
	{
	grid-area : axis;
	display: flex;
	justify-content : center;
	align-items: center;
	background-color : white;

	}
	
#axis_toggle {
	width: 150px;
	display: block;
	}

#select_TR_TI {
	width: 150px;
	display: block;
	}


#tissue_T1_checkboxes {

	grid-area : tissue_T1s;

	display: flex;
	justify-content : center;
	align-items: center;
	background-color : white;

}




      
.table_title {

padding-bottom:5px;

}



#didactic {
	grid-area : didactic;


	}

	


#content {
	position: absolute;
	padding-top:10px;
	padding-right:25px;
	padding-left:25px;
	padding-bottom: 10px;
	background: #fff;
	color: #000000;
	font-family: Thonburi, Arial, sans-serif;
    font-size  :   125% ;

	/* Prevent elements to be highlighted on tap */
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	/* Put the scroller into the HW Compositing layer right from the start */
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}




/* 
.slider input {
	margin-top:10%;
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	transform:rotate(270deg);
	}
 */