/* 

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),

(min-device-width: 768px) and (max-device-width: 1024px)  {



	/* Force table to not be like tables anymore */

	#myTable  table, #myTable  thead, #myTable  tbody,#myTable  th,#myTable  td,#myTable  tr { 

		display: block; 
		
			border-right-style:none !important;

	}

	

	/* Hide table headers (but not display: none;, for accessibility) */

	#myTable  thead tr{ 

		position: absolute;

		top: -9999px;

		left: -9999px;



	}

	

	#myTable  tr { border: 1px solid #ccc; counter-reset: section;counter-increment: section;}

	@media (max-width:411px) {
		#myTable  td.long { 
		position: absolute;
		
		
		
		
		
		padding-left: 60%;
		margin-top:-14%;
		border-color: transparent !important;
		background-color: transparent !important;

	}
	
	}

	@media (min-width:411px) {
		#myTable  td.long { 
		position: absolute;
		
		
		padding-left: 60%;
		margin-top:-6%;
		border-color: transparent !important;
		background-color: transparent !important;

	}
		
	}

	.longtoday-row{ 

color: white;



background-color: transparent !important;

position: absolute;

border: none;

padding-left: 80%;

margin-top:-40px;

	}

	.today-row{

		background-color: #7f8c8d !important; 

		

		color: white; 

		font-weight: bold;

	}

		

	

	#myTable  td { 

		/* Behave  like a "row" */



		

		border: none;

		border-bottom: 1px solid #eee; 

		position: relative;

		



	}





	#myTable  td:before { 

		/* Now like a table header */

		position: absolute;

		/* Top/left values mimic padding */

		top: 6px;

		left: 6px;

		width: 2%; 

		padding-right: 10px; 

		white-space: nowrap;

	}

	

	/*

	Label the data

	*/



	
#myTable:hover {
    background-color: transparent !important;
}


#myTable tr.iRow td:nth-of-type(1):before {

  content: 'Date ';

}

#myTable tr.iRow td:nth-of-type(2):before {

  content: 'Fajr ';

}

#myTable tr.iRow td:nth-of-type(3):before {

  content: '';

}

#myTable tr.iRow td:nth-of-type(4):before {

  content: 'S.Rise ';

}

#myTable tr.iRow td:nth-of-type(5):before {

  content: 'Dhuhr ';

}

#myTable tr.iRow td:nth-of-type(6):before {

  content: '';

}

#myTable tr.iRow td:nth-of-type(7):before {

  content: 'Asr ';

}

#myTable tr.iRow td:nth-of-type(8):before {

  content: '';

}

#myTable tr.iRow td:nth-of-type(9):before {

  content: 'Maghrib ';

}

#myTable tr.iRow td:nth-of-type(10):before {

  content: '';

}

#myTable tr.iRow td:nth-of-type(11):before {

  content: 'Isha ';

}

#myTable tr.iRow td:nth-of-type(12):before {

  content: '';

}

#myTable tr:not(.iRow) td:nth-of-type(1):before {

  content: 'Date ';

}

#myTable tr:not(.iRow) td:nth-of-type(2):before {

  content: 'Fajr ';

}

#myTable tr:not(.iRow) td:nth-of-type(3):before {

  content: 'S.Rise ';

}

#myTable tr:not(.iRow) td:nth-of-type(4):before {

  content: 'Dhuhr ';

}

#myTable tr:not(.iRow) td:nth-of-type(5):before {

  content: 'Asr ';

}

#myTable tr:not(.iRow) td:nth-of-type(6):before {

  content: 'Maghrib ';

}

#myTable tr:not(.iRow) td:nth-of-type(7):before {

  content: 'Isha ';

}

	

	



}


.iqamahTable {
	
	border-style:none;
	 border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0" width="100%"
}



.iqamahTable table, th, td {

    border-right-style: none !important;

}


table.myTable {

    border-collapse: collapse ;

}







/*

table.my#myTable tr:hover {

    background-color: rgba(129,208,177,.3);

}



table.myTable  col.hovered {

    background-color: rgba(129,208,177,.3);

}

.myTable tbody .troll {

    background-color: #f5f5f5;

    transition: all .125s ease-in-out;

}

*/



.myTable td, th {



    text-align: center;

}

@media all and (min-width: 1400px){

.monthlyheaderTable {
	 border-style: none !important;
	 border: 1px none !important;
}
.myTable {
 BOX-SIZING: border-box;
    WIDTH: 100% !important !important;
    HEIGHT: 100%;
    PADDING: 10px 0 10px 10px;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap;
	border-width: 0 0 0 0 !important;
}
/* For appearance */





	.myTable td.err {

		background-color: #e992b9;

		color: #fff;

		

		text-align: center;

		

	}

  

.sticky-wrap {

	overflow-x: hidden;

	overflow-y: hidden;

	position: relative;

	//margin: 3em 0;

	width: 100%;

}





.sticky-wrap .sticky-thead,

.sticky-wrap .sticky-col,

.sticky-wrap .sticky-intersect {

	opacity: 0;

	position: absolute;

	top: 0;

	left: 0;

	transition: all .125s ease-in-out;

	//z-index: 50;

	width: 100% !important; /* Prevent table from stretching to full size */
	//font-size: 10px !important;

}

	.sticky-wrap .sticky-thead {

		box-shadow: 0 0.25em 0.1em -0.1em rgba(0,0,0,.125);

		z-index: 100;

		width: 100%; /* Force stretch */

	}

	.sticky-wrap .sticky-intersect {

		opacity: 1;

		z-index: 150;



	}

		.sticky-wrap .sticky-intersect th {

			background-color: #666;

			color: #eee;

		}

.sticky-wrap td,

.sticky-wrap th {

	box-sizing: border-box;

}



/* Not needed for sticky header/column functionality */

td.user-name {

	text-transform: capitalize;

text-align: center;

}

.sticky-wrap.overflow-y {

	overflow-y: auto;

	max-height: 50vh;

}

}