@media only screen and (max-width: 800px) {
	
	/* Force table to not be like tables anymore */
	#dynamic-table table, 
	#dynamic-table thead, 
	#dynamic-table tbody, 
	#dynamic-table th, 
	#dynamic-table td, 
	#dynamic-table tr { 
		display: block; 
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	#dynamic-table thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	#dynamic-table tr { border: 1px solid #ccc; }

	#dynamic-table td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
		padding-top:10px;
		padding-bottom:10px;
	}

	#dynamic-table td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
        height:auto;
		padding-right: 10px; 
		text-align:left;
		font-weight: bold;
	}

	/*
	Label the data
	*/
	#dynamic-table td:before { content: attr(data-title); }
	#dynamic-table input.searchinput{width:100%;}

    .datatitleheight{
        height:60px;
    }

}
 






table#dynamic-tablea { 
  margin: 0 auto;
  border-collapse: collapse;
  font-family: open sans, sans-serif;
  font-size: 12px; 
  background: #fff;  
  text-rendering: optimizeLegibility;
  border-radius: 5px; 
  width: 100%; border: 1px solid #ddd;  
}

table#dynamic-tablea thead th { font-weight: 600;background:#c6dcef;
  font-size: 11px; font-family:Verdana;border: 1px solid #fff;  }
  
table#dynamic-tablea thead th, 
table#dynamic-tablea tbody td { 
	padding: .8rem; border: 1px solid #f7f7f7; 
}
table#dynamic-tablea tbody td { 
	padding: .8rem;
}
table#dynamic-tablea tbody tr:not(:last-child) { 
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;  
}

table#dynamic-tablea tbody tr.row1 td{background:#f5fcff;}	
table#dynamic-tablea tbody tr.row2 td{background:#fcfcfc;}	

 
.centera
	 { text-align: center !important;}
.righta
	 { text-align: right !important;}
@media screen and (max-width: 600px) {
  	table#dynamic-tablea caption { background-image: none; }
  	table#dynamic-tablea thead { display: none; }
	table#dynamic-tablea tbody td { 
		display: block;
		padding: .6rem; border: 1px solid #f7f7f7; 
	}
	table#dynamic-tablea tbody tr td:first-child { 
		background: #c6dcef; 
	}
	table#dynamic-tablea tbody td:before { 
	    content: attr(data-th);
	    font-weight: bold;
	    display: inline-block;
	    width: 60%;
	    margin-right: 3%;
	    text-align: left; 
	  }
	  
.centera
	 { text-align: left !important;}
.righta
	 { text-align: left !important;}
}



@media only screen and (max-width: 800px) {
	
	/* Force table to not be like tables anymore */
	#dynamic-tables table, 
	#dynamic-tables thead, 
	#dynamic-tables tbody, 
	#dynamic-tables th, 
	#dynamic-tables td, 
	#dynamic-tables tr { 
		display: block; 
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	#dynamic-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	#dynamic-tables tr { border: 1px solid #ccc; }

	#dynamic-tables td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;		
		padding-top:10px;
		padding-bottom:10px;
	}

	#dynamic-tables td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		text-align:left;
		font-weight: bold;
	}

	/*
	Label the data
	*/
	#dynamic-tables td:before { content: attr(data-title);
	                              white-space: normal!important;word-wrap:break-word;
 }
        .datatitleheight{
        height:60px;
    }
}

@media only screen and (max-width: 800px) {
	
	/* Force table to not be like tables anymore */
	#dynamic-tablesams table, 
	#dynamic-tablesams thead, 
	#dynamic-tablesams tbody, 
	#dynamic-tablesams th, 
	#dynamic-tablesams td, 
	#dynamic-tablesams tr { 
		display: block; 
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	#dynamic-tablesams thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	#dynamic-tablesams tr { border: 1px solid #ccc; }

	#dynamic-tablesams td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
		height:50px;		
		padding-top:10px;
		padding-bottom:10px;
	}

	#dynamic-tablesams td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}

	/*
	Label the data
	*/
	#dynamic-tablesams td:before { content: attr(data-title);
	                              white-space: normal!important;
 }
 td[data-title]:before 
 {
     text-align:center;
     font-family:Verdana;
 }
 td[data-title]:after 
 {
     background-color:red;     
 }

}

  @media only screen and (max-width: 800px) {
    #dynamic-tableNoRecord table, 
	#dynamic-tableNoRecord thead, 
	#dynamic-tableNoRecord tbody, 
	#dynamic-tableNoRecord th, 
	#dynamic-tableNoRecord td, 
	#dynamic-tableNoRecord tr { 
		display: block; 
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	#dynamic-tableNoRecord thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	#dynamic-tableNoRecord tr { border: 1px solid #ccc; }

	#dynamic-tableNoRecord td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left:5%; 
		white-space: normal;
		text-align:center;
		height:auto;
		padding-top:10px;
		padding-bottom:10px;
	}

	    #dynamic-tableNoRecord td:before { 
		    position: absolute;
		    top: -9999px;
		    left: -9999px; 
	    }
    }


  @media only screen and (max-width: 800px) {
	
	/* Force table to not be like tables anymore */
	#dynamic-table5 table, 
	#dynamic-table5 thead, 
	#dynamic-table5 tbody, 
	#dynamic-table5 th, 
	#dynamic-table5 td, 
	#dynamic-table5 tr { 
		display: block; 
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	#dynamic-table5 thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	#dynamic-table5 tr { border: 1px solid #ccc; }

	#dynamic-table5 td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
		height:auto;
		padding-top:10px;
		padding-bottom:10px;
	}

	#dynamic-table5 td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}

    #dynamic-table5 #tdView td{ 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 10%; 
		white-space: normal;
		text-align:left;
		height:auto;
		padding-top:10px;
		padding-bottom:10px;
	}
    #dynamic-table5 #tdView td:before{ 
		/* Behave  like a "row" */
		/*border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 10%; 
		white-space: normal;
		text-align:left;
		height:auto;
		padding-top:10px;
		padding-bottom:10px;*/
        display:none;
	}

	/*
	Label the data
	*/
	#dynamic-table5 td:before { content: attr(data-title);
	                              white-space: normal!important;
 }
}