/* Timetable styles here */


#section-times{
	z-index:100;
	position:relative;

	.container{
		@media only screen and (max-width:767px){
			padding:0;
		}
	}
}

#mobileTimetableReminder{
	background-color:$accent1;
	padding:10px 20px;
	max-width:600px;
	margin:-100px auto 10px;
	color:white;
	h3{
		color:$accent2 !important;
	}

	.btn{
		background-color: transparent;
		border:1px solid $accent2;
		border-radius:50px;
		color:$accent2;
		margin-bottom:10px;

		&:hover{
			background-color:$accent2;
			color:$accent1;
			@include transition();
		}
	}

}


#section-times{
	.dpt-horizontal-wrapper{
		background-color:$accent1;
		margin-top:-110px;
		position:relative;
		box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
		font-family:$text-font;
		color:$font2 !important;

		h3{
			color:$font2 !important;
		}

		i{
			color:white;
		}

		.dpt-heading{
			padding:10px 30px;
			border-bottom:1px solid $accent1-border;

			h3{
				font-size:18px;
				text-transform: initial !important;

				@media only screen and (max-width:450px){
					text-align:left !important;
				}
			}

			.green{
				display:none;
			}

			.hijri-date{
				text-align:left;
			}

			.timetable-link{
				text-align:right;
				a{
					color:$accent2;
					font-size:18px;
				}

				.fa{
					font-size:12px;
					color:$accent2;
				}

				&:hover{
					a,.fa{
						color:white;
						@include transition();
					}
				}
			}
			
		}

		.dpt-wrapper-container{
			background-color:$accent1 !important;

			.prayer-time{
				padding:15px 0 10px;
				border-color:$accent1-border;

				&.highlight{
					background-color:$accent1-darker;

					h3,i,.prayer-start,.prayer-jamaat{
						color:white !important;
					}
				}

				@media only screen and (max-width:767px){
					i{
						font-size:18px !important;
					}
					h3{
						font-size:16px !important;
					}
				}

				i{
					font-size:24px;
					margin-bottom:10px;
				}

				h3{
					font-weight:bold;
					font-size:18px;
					margin: 0 0 5px !important;

				}
				.prayer-start,.prayer-jamaat{
					margin:0 5px !important;
					font-size:16px !important;
				}

				&.prayer-sunrise{
					div{
						margin-top:0;
						margin-bottom:0;
					}
				}
			}
		}
	}
}


// Monthly timetable styles


.monthlyTimetable{
	overflow-x:auto;
}
.printTimetable{
	margin:10px 0;
	display:none;
}


#printAndMonth{
	font-family:$text-font;

	#monthContainer{
		padding:20px 0;
		max-width:300px;
		clear:both;
		overflow:hidden;
		margin:0 auto;
		.monthHeading{
			font-size:18px;
		}

		select{
			background-color: transparent;
			border-radius:0;
			border:0;
			border-bottom:2px solid $accent1 !important;
			box-shadow:none;
			padding:0 10px 5px;
			min-width:110px;
			&:focus{
				outline:none;
			}

		}
		.printIcon{
			display:none;
		}
	}

	table{
		.tableHeading{
			color:white;
			background-color:$accent1;
		}
		.hijriDate{
			font-style: initial;
			font-size:14px;
		}

		tr{
			&:nth-child(even){
				background-color:#f5f5f5;

				&:hover{
					background-color:#f5f5f5;
				}
			}

			&:hover{
				background-color:transparent;
			}

			&.highlight{
				background-color:$accent2 !important;
			}
		}

		td.Sat, td.Sun {
		    font-weight: bold;
		    color: $accent1;
		}

		tr,td{
			padding:0 5px;
			font-size:16px;
		}

		td.jamah{
			background-color: $lighter-grey;
		}

		.highlight{
			td.jamah{
				background-color:#d3b362 !important;
			}
		}

		tr, td, th{
			border-color:lightgrey;
		}
	}
}



// mobile timetable button on homepage

.mobileTimetable-button{
	background-color: #d3b362;
    height: 40px;
    width: 40px;
    position: absolute;
    top: -116px;
    z-index: 10000;
    text-align: center;
    line-height: 40px;
    border-radius: 100px;
    font-size: 22px;
    color: #004940;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    left: 50%;
    margin-left: -20px;
    @include transition();

    @media only screen and (max-width:450px){
    	right:20px !important;
    	left:initial;
    	margin-left:0;
    	top:-90px;

    }

    &:hover{
    	background-color:white;
    	@include transition();
    }
}



.blockPage{
	background-color: white !important;
	border:0 !important;
	box-shadow:none;
	width:0;
	h1{
		font-family:$text-font !important;
		text-transform: capitalize !important;
		font-size:30px;
		margin:20px;
	}
}