/*** SE:WSHA-3359 Pagination alignment ***/
/*** SE:WSHA-3432 Update the icons while viewing the Weekly & advanced in different viewports ***/
/*** SE:WSHA-2079, 2080 Make Search Result Grid responsive ***/
	/* 
	Max width before this PARTICULAR table gets nasty
	This query will take effect for any screen smaller than 760px
	and also iPads specifically.
	@media (min-width: 860px) and (max-width: 1024px)
	*/
	
	@media 
	only screen and (max-width: 860px),
	(min-device-width: 860px) and (max-device-width: 1024px) {
		/*#fda_table { table-layout: auto;}*/
		/* Force table to not be like tables anymore */
		/* SE:WSHA-3539 */
		#fda_table table, #fda_table tbody, #fda_table tr, #fda_table td { 
			display: block; 
			/*float: left;*/
			clear: both;
			/*width: 100%;*/
		}
		
		/* Hide table headers (but not display: none;, for accessibility) */
		#fda_table thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
				
		#fda_table tr {outline: thin solid #2A902A ; width: 100% !important; }
		
		#fda_table tr.child {display:none !important;}
		#fda_table td { 
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid /* #eee */ #2A902A; 
			position: relative !important;
			padding-left: 40% !important;
			/*width:55%;*/
			width: 58.5%;
			display:inline-block !important; /* se 0102 */
		}
		
		#fda_table td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			padding-right: 10px; 
			
			width: 48%; 			 
			/*white-space: nowrap;*/
		}
		
		#fda_table td.removeBorder {
			padding-left: 0% !important;
		}
		
		div.smallStyles { padding-bottom: 15px !important; }
		/*#fda_table {table-layout: auto !important ; }*/
		
		
		
		
		.dataTables_wrapper .dataTables_info { float: left !important;  }
		/*.dataTables_wrapper .dataTables_paginate { padding-top: 4em !important; }*/
		.dataTables_wrapper .dataTables_paginate .paginate_button {padding: 0.3em 0.3em 0.6em 0.3em  !important; }  	
		.dataTables_wrapper .dataTables_length {padding-top: 0.45em !important ;}
		.dataTables_wrapper .dataTables_length {margin-top: 0px !important; margin-bottom: 0px !important; }
		.dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .paging_full_numbers_no_ellipses {margin-top: 0px !important; margin-bottom: 0px !important; }
		.ui-widget, .ui-dialog, .ui-dialog-title { margin-left: 15px !important;  margin-right: 15px !important; }
				
		
		/*	Label the data	*/
		/** SE:WSHA-3354 **/
		#fda_table td.productType:before {  font-weight:bold; content: "Product Type"; }
		#fda_table td.firmName:before { font-weight:bold;  content: "Recalling Firm"; }
		#fda_table td.recentlyUpdated:before { font-weight:bold;  content: "Recently Updated Record**"; }
		#fda_table td.uTooltip:hover:before{
        	content: 'This column displays values as Yes/No. \A "Yes" indicates that an update has occurred in any or all the Product Description, Reason for Recall, Classification or Code Information fields within the last 7 days. \A "No" indicates that no updates have occurred within the last 7 days.';
         	z-index: 1000;
       		position: absolute;
       		display: block;
       		text-align: left;
      		font-weight: normal;
      		background-color:	#FFFFE0; 
    		color: #000000; 
        	border: 1px solid #cccccc;
    		border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px;
    		width: 255px !important;
    		max-width:285px !important;
			
    	}
		
		#fda_table td.classification:before { font-weight:bold;  content: "Classification"; }
		#fda_table td.status:before {  font-weight:bold; content: "Status"; }
		#fda_table td.distributionPattern:before { font-weight:bold;  content: "Distribution Pattern"; }
		#fda_table td.productDescription{ word-break: break-word !important; }
		#fda_table td.productDescription:before { font-weight:bold;  content: "Product Description"; }
		
		#fda_table td.codeInformation:before { font-weight:bold;  content: "Code Information"; }
		#fda_table td.reasonRecall:before { font-weight:bold;  content: "Reason for Recall"; }	
		/* SE:WSHA-6113 Mobile UI fix*/
		#fda_table td.searchText:before { font-weight:bold;  content: "Search term found in:"; }
			
		/*.hColor {position: initial !important;  }*/
		
		.exp { max-height: 30vh !important; }	/*SE:WSHA-6340 */
		
	}
	
	/* Smartphones (portrait and landscape)@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) ----------- */
	@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
		body { 
			padding: 0; 
			margin: 0; 
			width: auto;
		}
		
	}
	
	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 860px) and (max-device-width: 1024px) {
		body { 
			/*width: 495px;*/
		}	
		
		
	}
	
	
	/* 
		Hide First set/Last set and Next Page/Previous Page for pagination in extra small device
	*/
	@media only screen and (max-width: 377px) {		
		div.pagination li#prev, div.pagination li#next {
			display: none !important;
		}
	}

	/* 
		view port max size 480
	*/

	@media only screen and (max-width: 480px) {	
		#pageContent .nav-tabs {
			font-size:0.5em !important;
		}
		.exp { max-height: 18vh !important; }	 /*SE:WSHA-6340 */	
	}
	
	@media only screen and (min-width:490px) {	/* max-width: 480px */
		#pageContent .nav-tabs {
			font-size:1em !important;
		}	
		/*.dataTables_wrapper .dataTables_info { float: left !important;  }
		.dataTables_wrapper .dataTables_paginate { padding-top: 4em !important; }
		.dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .paging_full_numbers_no_ellipses {margin-top: 0px !important; margin-bottom: 0px !important; }
		.ui-widget, .ui-dialog, .ui-dialog-title {margin-left: 15px !important;  margin-right: 15px !important; }*/
		/*#fda_table {table-layout: auto !important ; }*/
		.hColor {position: initial !important;  }
		
	}
	

	@media(max-width:800px) {
		.hrStyles{
			width: 80% !important;
		}
		img.imgStyles { margin: 5px !important; }
	}

	@media screen and (min-width: 0px) and (max-width: 480px) {
  		.printStyles { margin-top: 20px ; }   /* show it only on xsmall screens */
  		.pagination-sm > li > a {font-size: 10px !important;}
  		.pagination-sm {width:30em !important; left: -15px; position: relative;}
  		#fda_table td { width: 36%; padding-left: 48% !important; word-break: break-word !important;} 
  		#fda_table > tbody > tr > td {padding-bottom: 15px !important;  display: inline-block !important;} /* SE:WSHA-6113 */
  		.dataTables_wrapper .dataTables_paginate .paginate_button {padding: 0.3em 0.3em !important; } 		
		#fda_table > tbody > tr.child {display: none!important; padding-left:0px !important; }
		.exp { max-height: 18vh !important; } /*SE:WSHA-6340 */
	
	}	
		
		
		
	/* SE:WSHA-3639 */
	
	@media only screen and (min-width: 0px) and (max-width: 375px)	and (orientation: portrait) {
		  	.xsStyles {width: 100% !important; padding-bottom: 15px; }  
		  	#spaceStyles {margin-top: -15px; display: block !important; }		
		    .exp { max-height: 25vh !important; } /*SE:WSHA-6340 */
	}
	
	@media screen and (min-width: 0px) and (max-width: 800px)  {
  		#divFilters {
  			border: 1px solid #adadad;
  			margin: 15px !important;
  			border-radius: 5px;  			
  		}
  		.form-group {
  		/* 	margin-left: 20px; */
			margin-right: 20px;
  		} 
  		button#filterClear {
  			margin-bottom: 15px;
  			margin-left: -20px;
  		}
  		.btn-group-filter > .filterBtn {
  			float:left !important;
  		}
  		
  		.dataTables_wrapper .dataTables_info, .dataTables_length {
  			float:left !important;
  		}
  		
  		.popover { margin-right: 5px !important; } /* SE:WSHA-3768 */
  		
  		/*#fda_table tbody td {word-wrap: break-word; }*/
  		
  		
  		.dataTables_length { display: none !important; }
  		
  		.dataTables_paginate,  .dataTables_wrapper .paging_full_numbers_no_ellipses, .dataTables_wrapper .dataTables_length { float: left !important; width: 100% !important; margin-top: 0px !important; margin-bottom: 0px !important;}
  		.dataTables_info { text-align: left !important; background-color: #D9EDF7; width: 100%; margin-top: 0px !important; margin-bottom: 0px !important;}
  		
  		.dataTables_wrapper .dataTables_paginate { padding-top: 2em !important; }
  		/* SE:WSHA-6725 UI mobile fix */
		#fda_table { table-layout: auto; display:inline-block;}
  		div#loadProductEventResult {     margin-left: -20px !important; }
  		/******************** Force table to not be like tables anymore ********************/
		#productData1 table, #productData1  tbody, #productData1  tr, #productData1  td { 
			display: block; 
			float: left;
			clear: both;
			width:100%;
			border: 1px;
		}
		
		/******************** Hide table headers (but not display: none;, for accessibility) ********************/
			#productData1 thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
			font-weight: bold;
		}
				
		#productData1 tr { border: 1px solid #ccc; }
		
		#productData1 td { 
			/******************** Behave  like a "row" ********************/
			/*border: none;*/
			border-bottom: 1px solid #ccc; 
			position: relative !important;
			padding-left: 47% !important;			
			min-height:40px !important; 
		}
		
		#productData1 td:before { 
		/******************** Now like a table header ********************/
			position: absolute;
			top: 6px;
			left: 6px;
			padding-right: 5%;
			width: 25%;
		}
		
		/******************** SE:WSHA-2743 ********************/
		/*#productData1 th { 
			height:3%;
			min-height:40px !important; 
		}*/
		
		/******************** Label the data  ******************/
		#productData1 td#col1:before {  font-weight:bold; content: "#"; }
		#productData1 td#col2:before {  font-weight:bold; content: "Product Description"; }
		#productData1 td#col3:before { font-weight:bold;  content: "Recall Number"; }
		#productData1 td#col4:before { font-weight:bold;  content: "Classification"; }
		#productData1 td#col5:before {  font-weight:bold; content: "Code Information"; }
		#productData1 td#col6:before { font-weight:bold;  content: "Product Quantity"; }
		#productData1 td#col7:before { font-weight:bold;  content: "Reason for Recall"; }
		
		.hColor {position: absolute !important;  }
  		
  		#fda_table > tbody > tr.child > td {padding-left:0px !important; } 	
  		/*SE:WSHA-6575 */	
  		div#lastUpdtChk > label {font-size: 0.90em !important;}
  		
	}
	/*SE:WSHA-6340 */
	@media screen and (min-width: 0px) and (max-width: 800px) and (orientation: portrait)  {
		.exp { max-height: 18vh !important;}
		div#lastUpdtChk { padding-right: 0px !important;}
	}

	@media only screen and (device-width: 768px) and (device-height: 1024px)  {  /*(min-width: 801px)*/
		#fda_table { table-layout: fixed; width:100%;	width:930px\9;   }	
		.hColor {position: initial !important;  }
	}
	
	/*
	@media only screen and (min-width: 980px) {
		.ui-dialog { width: 750px !important; }
	}*/