/*Developer: Trinidad Esparza
Date: 08/10/2017
Description: This is to make the data tables responsive.
Version: 1.0
*/
#case th {
	background: white !important;
	text-align: center !important;
	padding: 6px !important;
	border: 1px solid #ccc !important;
	color: #008000 !important;
	font-family: Arial, sans-serif;
}

#case td {
	background: white !important;
	text-align: center !important;
	padding: 6px !important;
	border: 1px solid #ccc !important;
	color: black !important;
	font-family: Arial, sans-serif;
}

/* 
Generic Styling, for Desktops/Laptops 
*/
table {
	width: 100%;
	border-collapse: collapse;
	font-weight: bold !important;
}

/* Zebra striping */
tr:nth-of-type(odd) {
	background: #eee !important;
}

/*    When making table right aligned when in desktop for the parent table and first td*/
table:first-of-type td:first-child {
	padding: 6px !important;
	border: 0px !important;
	text-align: right !important;
	vertical-align: text-top;
	color: #008000;
	font-family: Arial, sans-serif;
}

/* Style the Table inside of a table center aligned when in desktop for the parent table and first td*/
table:first-of-type table td:first-child {
	padding: 6px !important;
	border: 0px solid #ccc !important;
	text-align: center !important;
	color: black !important;
	font-family: Arial, sans-serif;
}

/* Style the Table inside of a table center aligned when in desktop for the tds*/
table table td {
	padding: 6px !important;
	border: 0px solid #ccc !important;
	text-align: center !important;
	color: black !important;
	font-family: Arial, sans-serif;
}

/* Style the border*/
table table {
	border: 1px solid #ccc !important;
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (min-width: 0px) and (max-width: 991px) {
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr {
		display: block;
	}
	/*    When making table mobile it will align text to the left*/
	table:first-of-type td:first-child {
		padding: 6px !important;
		border: 0px !important;
		text-align: left !important;
		vertical-align: text-top;
		color: #008000;
		font-family: Arial, sans-serif;
	}
	/* Style the Table inside of a table*/
	table table td {
		padding: 6px !important;
		border: 0px solid #ccc !important;
		text-align: center !important;
		color: black !important;
		font-family: Arial, sans-serif;
	}
	/*    When making table mobile it will align text to the left*/
	td, th {
		padding: 6px !important;
		border: 0px !important;
		text-align: left !important;
	}
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	tr {
		border: 1px solid #ccc;
	}
	td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
	}
	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;
	}
	/*    Wrapping the text from the link inside the table */
	tr td a {
		/* These are technically the same, but use both */
		overflow-wrap: break-word;
		word-wrap: break-word;
		-ms-word-break: break-all;
		/* This is the dangerous one in WebKit, as it breaks things wherever */
		word-break: break-all;
		/* Instead use this non-standard one: */
		word-break: break-word;
		/* Adds a hyphen where the word breaks, if supported (No Blink) */
		-ms-hyphens: auto;
		-moz-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
}