:root {
	--black: #000000;
	--white: #bbbbbb;
	--gray: #333333;
	--padding: 12px;
	
	--title_height: 49px;
	--font_size: 24px;
	--large_font_size: 32px;
}
@font-face{ font-family:Naskh; src: url('fonts/uthmantn.eot');src:local('KFGQPC Uthman Taha Naskh'), url('fonts/uthmantn.eot?iefix') format('eot'), url('fonts/uthmantn.otf') format('opentype'), url('fonts/uthmantn.woff') format('woff'), url('fonts/uthmantn.ttf') format('truetype'), url('fonts/uthmantn.svg#svgFontName') format('svg'); }
@font-face { font-family: 'icons'; src: url('fonts/icons.ttf') format('truetype'); }
html, body { margin: 0px; padding: 0px; }
* {
	font-family: 'Naskh', 'Hafs', 'Adobe Arabic', 'Simplified Arabic', 'Traditional Arabic', 'Arabic Typesetting', 'Times New Roman', 'Tahoma', 'Arial', 'serif';
	font-weight: bold;
	color: var(--white);
	font-size: var(--font_size);
	text-align: justify;
	text-justify: inter-word;
	line-height: 2;
	-webkit-user-select: none; /* disable selection/Copy of UIWebView */
	-webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
html {
	scroll-behavior: smooth;
}
body {
	background-color: var(--black);
	overflow: hidden;
}

/* Layout ================================================================== */
.layout_header {
	height: var(--title_height);
	vertical-align: top;
	border-bottom: 1px solid var(--gray);
}
.layout_content {
	width: 100vw;
	height: calc(100vh - var(--title_height));
	overflow: auto;
	text-align: center;
	scroll-behavior: smooth;
}
.content {
	0padding-bottom: 51px;
}
.layout_header td:first-child {
	padding-right: var(--padding);
}
.icon {
	font-family: 'icons';
	font-weight: normal;
	cursor: pointer;
	padding-right: var(--padding);
	padding-left: var(--padding);
}
#load{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 9999;
	background: url('loading.svg') no-repeat center center rgba(0,0,0,0.7);
	0background: url('shock.svg') no-repeat center center rgba(0,0,0,0.25);
	0background-size: 200px 200px;
}
#confirm{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 8888;
	background: rgba(0,0,0,0.7);
	vertical-align: center;
}
#confirm table td {
	text-align: center;
	border: 1px solid var(--white);
	padding-left: 24px;
	padding-right: 24px;
	border-radius: 200px;
	background-color: var(--gray);
	cursor: pointer;
}

/* List ==================================================================== */
.list {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.list li {
	display: block;
	margin: 0;
	padding: 0;
}
.list li:not(:last-child) {
	border-bottom: 1px solid var(--gray);
}
.list a:link, .list a:visited, .list a:hover, .list a:active {
	display: block;
	text-decoration: none;
	text-align: center;
	padding: 16px;
}

/* Azkar =================================================================== */
.zikr {
	width: 100%;
	height: calc(100vh - var(--title_height));
}
.zikr_title table, .zikr_content table {
	width: 100%;
}
.zikr_title {
	background-color: var(--gray);
	padding-right: var(--padding);
}
.zikr_title td {
	line-height: 1.6;
	white-space: nowrap;
	padding-bottom: 4px;
}
.zikr_content {
	height: 100%;
	vertical-align: top;
	padding: var(--padding);
}
.zikr_text {
	font-size: var(--large_font_size);
}
.zikr_hint {
	padding-top: var(--padding);
	color: var(--gray);
}