table.tickets { 
	width: 100%; 
	border-collapse: collapse; 
	margin:5px auto;
	}

/* Zebra striping */
.tickets tr.rij:nth-of-type(odd) { 
	background: rgb(255,255,255,0.6); 
	color: #336d80;
	}
.tickets tr.rij:nth-of-type(even) { 
	background: #d6ebf299; 
	color:#336d80;
	}
.tickets td.rijprio:nth-of-type(odd) { 
	background: #f8c2bc99; 
	color: #336d80;
	}
.tickets td.rijprio:nth-of-type(even) { 
	background: #fdd5d199; 
	color: #336d80;
	}
.tickets td.rijlock:nth-of-type(odd) { 
	background: #c8ffcd99; 
	color: #336d80;
	}
.tickets tr.wit{
		background: #ffffff99;
		color: #336d80;
		border: 1px solid #ccc; 
		/*opacity:0.6;*/
	}
.tickets tr{
	background: #336d80;
	color: white;
	border: 1px solid #ccc; 
}
.tickets tr.red{
	background: #a9071e;
	color: white;
	border: 1px solid #ccc; 
}
/*.tickets tr.rij {
	opacity: 0.6;
	}*/
.tickets th { 
	background: #336d80; /*#0d477f;*/
	/*border: 1px solid #ccc; */
	color: white; 
	font-weight: bold;
	}
.tickets th.red {
	background: #a9071e;
	color:white;
	font-weight:bold;
}

.tickets td, .tickets th { 
	padding: 2px; 
	/*border: 1px solid #ccc; */
	text-align: left; 
	font-size: 11px;
	}
.tickets img {
	padding: 0px;
	margin:0px;
}

.tickets td.wrap{
	white-space:nowrap;
	max-width:0;
	text-overflow:ellipsis;
	overflow:hidden;
}

.tickets tr:hover.rij {
	background-color: #eeb3ab99;
	/*opacity: 0.6;*/
  }
  .tickets tr:hover.rijlock {
	background-color: #eeb3ab99;
	/*opacity: 0.6;*/
  }
.tickets tr:hover.rijprio {
	background-color: #eeb3ab99;
	/*opacity: 0.6;*/
  }
/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
/*
,(min-device-width: 768px) and (max-device-width: 1024px)
*/
@media 
only screen and (max-width: 760px)  {

	.tickets table { 
	  	width: 100%; 
	}

	/* Force table to not be like tables anymore */
	.tickets table, .tickets thead,.tickets tbody, .tickets th, .tickets td, .tickets tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.tickets thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.tickets tr { border: 1px solid #ccc; }
	
	.tickets td {
		/* Behave  like a "row" */
		border: none;
		/*border-bottom: 1px solid #eee; */
		position: relative;
		padding-left: 0%; 

		/*white-space: nowrap;
	
		
		max-width:100%;
		text-overflow:ellipsis;
		overflow:hidden;*/
		
	}
	.tickets td.wrap {
		min-width:100%;
	}
	.tickets 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;
	
		/*
		max-width:0;
		text-overflow:ellipsis;
		overflow:hidden;
*/
		/* Label the data */
		content: attr(data-column);

		color: #000;
		font-weight: bold;
	}

}




/* digitable */
table.digitable { 
	width: 100%; 
	border-collapse: collapse; 
	margin:2px auto;
	}
.digitable tr{
	/*background: #336d80;*/
	color: #336d80;
	border: 0px solid #ccc; 
}
.digitable td, .digitable th { 
	padding: 2px; 
	/*border: 1px solid #ccc; */
	text-align: left; 
	font-size: 11px;
	}
.digitable img {
	padding: 0px;
	margin:0px;
}

/*.digitable td.wrap{
	white-space:nowrap;
	max-width:0;
	text-overflow:ellipsis;
	overflow:hidden;
}*/

/* 
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 (max-width: 760px)  {

	.digitable table { 
		  min-width:100%;
	}
	/* Force table to not be like tables anymore */
	.digitable table, .digitable thead,.digitable tbody, .digitable th, .digitable td, .digitable tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.digitable thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.digitable tr.dummy {
		position: absolute;
		top: -9999px;
		left:-9999px;
	}
	.digitable tr {
		min-width:100%;
		width:auto;
		max-width: 101%;
	}
	.digitable td { 
		/*position: relative;*/
		padding-left: 0%;
		width:auto;
		min-width:99%;
		max-width:101%;
	}

	.digitable td input{
		width:100%;
	}
}













table.onderhoud { 
	width: 100%; 
	border-collapse: collapse; 
	margin:5px auto;
	}

/* Zebra striping */
.onderhoud tr.rij:nth-of-type(odd) { 
	background: rgb(255,255,255,0.6); 
	color: #336d80;
	}
.onderhoud tr.rij:nth-of-type(even) { 
	background: #d6ebf299; 
	color:#336d80;
	}
.onderhoud tr.titel {
	background:#336d80;
	color:white;
}
.onderhoud tr.rij span {
	display:none;
}
/*.tickets tr.rij {
	opacity: 0.6;
	}*/
.onderhoud th { 
	background: #336d80; /*#0d477f;*/
	/*border: 1px solid #ccc; */
	color: white; 
	font-weight: bold;
	}


.onderhoud td, .onderhoud th { 
	padding: 2px; 
	/*border: 1px solid #ccc; */
	text-align: left; 
	font-size: 11px;
	}

.onderhoud tr:hover.rij {
	background-color: #eeb3ab99;
	/*opacity: 0.6;*/
  }

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
/*
,(min-device-width: 768px) and (max-device-width: 1024px)
*/
@media 
only screen and (max-width: 760px)  {

	.onderhoud table { 
	  	width: 100%; 
	}

	/* Force table to not be like tables anymore */
	.onderhoud table, .onderhoud thead,.onderhoud tbody, .onderhoud th, .onderhoud td, .onderhoud tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.onderhoud thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.onderhoud tr { border: 1px solid #ccc; }
	
	.onderhoud td {
		/* Behave  like a "row" */
		border: none;
		/*border-bottom: 1px solid #eee; */
		position: relative;
		padding-left: 0%; 

		/*white-space: nowrap;
	
		
		max-width:100%;
		text-overflow:ellipsis;
		overflow:hidden;*/
		
	}
	.onderhoud td.wrap {
		min-width:100%;
	}
	.onderhoud 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;
	
		/*
		max-width:0;
		text-overflow:ellipsis;
		overflow:hidden;
*/
		/* Label the data */
		content: attr(data-column);

		color: #000;
		font-weight: bold;
	}
	.onderhoud tr.rij span {
		display:inline;
	}
}