/*

Max width before this PARTICULAR table gets nasty

This query will take effect for any screen smaller than 760px

and also iPads specifically.

*/



/*********************************/

.monthlyheaderTable #table-title {
	font-size:25px;
	font-weight:bold;
}

 .monthlyheaderTable .arrow {
	font-size: 20px;
    padding: 10px 15px;
    margin: 5px 0px;
    background-color: #1f497d;
    border-radius: 5px;
    text-align: center;
    color: #fff!important;
}

#myTable thead tr th, #myTable thead tr th center{
	color:#fff;
	font-weight:bold!important;
	background-color:#1f497d;
	padding:5px 5px;

}



/********************************/




@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;

		padding: 5px;



	}





	#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: 'Sunrise ';

}

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

  content: 'Zuhr ';

}

#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: 'Sunrise ';

}

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

  content: 'Zuhr ';

}

#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;

}

}