@media only screen and (max-width: 400px) 
{ 
	  .basic_form 
	{
	  display: grid;
	  grid-template-columns: auto;
	}
	
	.my_label
	 {
		 display:block
	 }
	 	
	 .help
	 {
		 display:none
	 }
	 
	.ex_profile 
	{
	  display: grid;
	  grid-template-columns: auto auto;
	}	
	
	.only_print
	{
		display:none
	}	 
	
	.two_column_one_by_two
	{
	  display: grid;
	  grid-template-columns: auto;
	}


	.two_column_two_by_one
	{
	  display: grid;
	  grid-template-columns: auto;
	}


	.two_column_nine
	{
	  display: grid;
	  grid-template-columns: auto;
	}		
}

/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) 
{
  
	.basic_form 
	{
	  display: grid;
	  grid-template-columns: 33% 67%;
	}

	 .help
	 {
		 display:none
	 }

	.ex_profile 
	{
	  display: grid;
	  grid-template-columns: auto auto auto auto;
	}	   

	.only_print
	{
		display:none
	}	 


	.two_column_one_by_two
	{
	  display: grid;
	  grid-template-columns: auto;
	}


	.two_column_two_by_one
	{
	  display: grid;
	  grid-template-columns: auto;
	}


	.two_column_nine
	{
	  display: grid;
	  grid-template-columns: auto;
	}	
}

@media only screen and (min-width: 961px) 
{
	.basic_form 
	{
	  display: grid;
	  grid-template-columns: 20% 40% 40%;
	}	

	.horizontal1 
	{
	  display: grid;
	  grid-template-columns: auto;
	}	

	.horizontal2
	{
	  display: grid;
	  grid-template-columns: 20% 80%;*/
	}
	
	.horizontal2 .help 
	{
		grid-column: span 2;
	}
	 

	.horizontal3
	{
	  display: grid;
	  grid-template-columns: 20% 50% 30%;
	}	
	
	
	.basic_form_histo
	{
	  display: grid;
	  grid-template-columns: 100%;
	}

/* these two styles ensure that
 * report occupy 1/3 space horizontally (equally devided vetween name:result
 * The help colum is hidden
 * */
 
	.compact_report 
	{
	  display: inline-grid;
	  grid-template-columns: 50% 50%;		/*both given equal space*/
	  width:33%;							/*itself occupy 33% of space*/
	}

	
	.compact_report .help
	{
		display:none;
	}

/*********************************/
		
	.horiz
	{
	  display: grid;
	  grid-template-columns: 34% 33% 33%;
	}	
	
		
	.ex_profile 
	{
	  display: grid;
	  grid-template-columns: auto auto auto auto auto auto;
	}	

	.only_print
	{
		display:none
	}	 


	.two_column_one_by_two
	{
	  display: grid;
	  grid-template-columns: 33% 67%;
	}


	.two_column_two_by_one
	{
	  display: grid;
	  grid-template-columns: 67% 33%;
	}


	.two_column_nine
	{
	  display: grid;
	  grid-template-columns: 90% 10%;
	}	
	
	
	.index_page
	{
		display:grid;
		background-color:red;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: auto auto;
		grid-template-areas:
		'login mmenu mmenu mmenu'
		'sstatus sstatus sstatus sstatus';
	}  
}

@media only print 
{
	.basic_form 
	{
	  display: grid;
	  grid-template-columns: 25% 40% 35%;
	}	


	  #main_menu, #root_menu, .data_header, .sh, .print_hide
	 {
		 display:none
	 }

	.horiz
	{
	  display: grid;
	  grid-template-columns: 34% 33% 33%;
	}	
		 	
	.ex_profile 
	{
	  display: grid;
	  grid-template-columns: auto auto auto auto auto auto;
	}
	
	 /* footer {page-break-after: always;}	  */
	 
	 
	 
	.horizontal1 
	{
	  display: grid;
	  grid-template-columns: auto;
	}	

	.horizontal2
	{
	  display: grid;
	  grid-template-columns: 20% 80%;
	}
	
	.horizontal2 .help 
	{
		grid-column: span 2;
	}
	 
	
	
	.horizontal3
	{
	  display: grid;
	  grid-template-columns: 20% 40% 40%;
	}
	
	.compact_report 
	{
	  display: inline-grid;
	  grid-template-columns: 50% 50%;
	  width:33%;
	}
	
	.compact_report .help
	{
		display:none;
	}

}

/*
.zoom:focus {
    height: 6em;
    width: 50em;
}
*/
.two_column 
{
  display: grid;
  grid-template-columns: auto auto;
}





fieldset {
  border:1px solid;
}

legend {
  width:auto;
  margin-left: 10%;
  background-color: lightgray;

}

th, td {
  padding: 2px;
}

*{
overflow-wrap: anywhere;
}

input[type=datetime-local]
{
overflow:auto;
width: auto;
}

input[type=textarea]
{
overflow:scroll;
width: auto;
}

.basic_form_without_help 
{
  display: grid;
  grid-template-columns: 20% 80%;
}