html, body { height: 100%; scroll-behavior: smooth;}

a:hover {color: #025d8c;}
a {color:#025d8c }
address {  display: block;  font-style: italic;}

body {	
	background-color: #F0EAE8; 
	color:#111; 	
	font-family: Verdana, Arial, 'Open Sans', Helvetica, sans-serif; 
	font-size:16px;
	line-height: 1.60;
	font-weight: 400;
	letter-spacing: 0px; 
}
caption { color: #545454; font-style: italic;text-align: center;  caption-side: top; background: #dedede;}
em.verse { color: #025d8c;font-size: 16px; background: #efefef;text-align: left !important;padding: 5px 10px; display: block;border: 1px solid #e8e6e6; margin-bottom: 12px}
em span{font-style: normal; color: #a38b00; font-size: 14px}
h {font-family: Verdana, Geneva, Arial, Tahoma, Helvetica, sans-serif;}
h1 { font-size:1.9em; color: #0B3857; margin-bottom: 15px; font-weight: bold;}
h2 { font-size:1.7em;  color: #0B3857;}
h2.qhi-title {margin-top: 3rem;font-size: 1.1rem;color: #0B3857;background: #cccaca;padding: 10px 10px;border-radius: 3px;border: solid 1px #b9b9b9;text-align: center}
h3 { font-size: 1.5em; color: #444444;}
h4 { font-size: 1.33em;}
h5 { text-transform:uppercase; color:#777; font-size:1.14em;  font-weight:bold}
h5 {font-size: 16px;}
h6, h6 {font-size: 14px;}
hr.hrtitle {		
	height:1px;
	background-color:#193857;
	margin-top:0;
	margin-bottom: 0;
	padding-bottom: 0;	
	width: 75%;
	float: left;
}
ul.contact-smedia-icons {display: flex; text-align: center ; padding-left: 0px; }
ul.related-tags {padding-left: 0px;}
ul.related-tags li {display: inline; background: #8d959c;text-align: center;    border-radius: 4px;}
ul.related-tags li a{color: white;vertical-align: text-top;  font-size: 13px;    padding-left: 10px;    padding-right: 10px;}

#accordion .btn-link {font-size: 22px; line-height: 27px; color:#444444;}

#page-content {padding-top: 1.52em; min-height: 500px}

.alpha-topics h2 {text-align: center; padding: 10px 0; background: #e8e8e8;}
.alpha-topics table {border: 1px solid #a5a5a5!important}

.basmalah {
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-style: italic; color: #003366; background-position: center; text-align: center; margin: 2pt; padding: 0px;
}


.bg-light-gold {background:#dfd3b3;}
.bg-light-gold:hover {background:#dfd3b3;}

.btn-info { color: #fff; background-color: #327a99; border-color: #327a99;}
.btn-info:hover {background-color: #256987; border-color: #256987foot;}
.btn-outline-primary {color: #17a2b8; border-color: #17a2b8;}
.btn-outline-primary:active{ background-color: #17a2b8!important; border-color: white;}
.btn-outline-primary:focus{ background-color: #17a2b8!important; border-color: white; color: white}
.btn-outline-primary:hover{ background-color: #17a2b8!important; border-color: white;}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-primary.dropdown-toggle:focus {box-shadow: none!important;}
.btn-primary {background: #008CBA; border-color: #008CBA;}
.btn-primary:active {background: #008CBA; border-color: #008CBA;}
.btn-primary:focus {background: #008CBA; border-color: #008CBA;}
.btn-primary:hover {background: #008CBA; border-color: #008CBA;}
.btn:focus {box-shadow: none;}

.card-header {padding: .75rem 1.25rem; margin-bottom: 0; background-color: #efefef;  border-bottom: 1px solid rgba(0,0,0,.125);}

.contact-smedia-icons li {  list-style-type:none; align-items: center;  font-size:2em;margin-right: 10px;  }
.contact-smedia-icons h4 a {font-size: .8rem; padding:.5rem .5rem;background: #e5e7e9; color: #666666 }

.font600 {font-weight: 600}
.footer h4  {font-size:0.8em;margin-bottom: 5px; color: #fff; font-family:Verdana, 'Open Sans', Arial, Helvetica, sans-serif; font-weight: 400; text-transform: uppercase;letter-spacing: 0.5px;}
.footer ul li a {color: #b2c5cf;font-size: 12px;padding: 0px;}
.footer ul li a:hover {color:#fff}
.footer ul {margin-bottom: 1.5rem;padding: 0;list-style: none;}
.footer {background-color:#191919; color:#fff; text-shadow:none; width:100%; padding-bottom: 0px;}

.form-control:focus {box-shadow: none!important;}

.frameindex {}
.framelinkbarcell {color: white}

.ft-copyright a {color: #a38b00; }
.ft-copyright a:hover {color:#fff!important}
.ft-copyright p {text-align: center;font-size: 0.8em;vertical-align: middle;text-shadow: none;color: #ccc;padding-top: 0.8em; padding-bottom: 0.8em; margin-bottom: 0px!important; }
.ft-copyright {background:#191919; border-top: solid; border-top-color: slategray; border-top-width: 1px;}

.header {background-color:#193857; position:relative;z-index:2000;border-bottom: solid; border-bottom-color: slategray; border-bottom-width: 1px;}

.hm-highlights {padding-top:1em; padding-bottom:1em; }
.hm-highlights .invitation { padding-bottom:1.33em;}
.hm-highlights .card {background:white; margin-bottom:30px; }
.hm-highlights .card-title { background-color:#193857; margin-bottom:0px; font-size: 0.95em; color:#F4F4F2; font-family:Verdana,Arial,sans-serif; text-transform: uppercase; text-align:center; letter-spacing:0.1em; padding: 12px 20px; border-radius: 5px 5px 0px 0px;}
.hm-highlights .card-body{  border-radius: 0px 0px 5px 5px;  color: #444; font-size: 0.9em; line-height: 1.6em; padding: 20px 20px 25px 20px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.19); border:none !important; height:80%;}
.hm-highlights .col-container { display: table; width: 100%; }
.hm-intro {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-position: center;
	text-align: center;
}
.hm-intro .invitation p {text-align: left;}
.hm-slogan p {font-family: Geneva, Verdana, Arial, Tahoma, sans-serif; font-size:1.33em; text-align:center; letter-spacing: 0.1em; text-transform: uppercase;}
.happinessContainer {
	color:seashell;
	text-align: center;
	background-color: #193857;
}

.hr-style {background-color: #fff;border-top: 2px dotted #8c8b8b;}

.logo-section {width: 300px;}

.mt-golden-font {color:#a38b00; }

.navbar {margin-bottom: 0px}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {background:none !important;}
.navbar-toggle .icon-bar {background: #a38b00 !important}
.navbar-toggle {border: none; }

.nav-scroller {position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;}

.nav-scroller .nav {flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;}

.question {color: #ebc700}

/*Quran Search Page CSS START*/
.quran-search input { width: 100%; margin-bottom: 1rem; text-align: center}
.quran-search input::placeholder { color: #888888; text-align: center;}
.quran-search [placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.3s 0.3s ease;
	opacity: 0;}

.r-sidebar .list-group-item.active { background-color:#193857; color:#fff!important; border-color: #084567!important;}
.r-sidebar a.list-group-item{color:#333!important;font-size: 0.9em; letter-spacing: 1px;}
.r-sidebar iframe {margin-top: 4em; width:100%; padding-top:2em; background:#eaeaea; border-top: solid 4px #a38b00 }

.sectionTitleContainer {padding:1em;}
.sectionverse {
	font-family:  Georgia, "Times New Roman", Times, serif;
	font-style: normal;
	color: #193857;
	font-size:1.14em;
}
.sectionSubtitle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: italic;
	color: #000000;	
	margin-bottom: 0px;
}
.spacer{background-color: seashell; padding-top: 0.25em; padding-bottom: 0.25em; }
.sub-title{    text-align: center!important;
    font-style: italic;
	margin-bottom: 0px;
}
.tdu {border-bottom: solid 1px;}
ul {list-style-type: square;}

/*Collapse css start */
[data-toggle="collapse"] .fa:before {content: "\f139";}

[data-toggle="collapse"].collapsed .fa:before {content: "\f13a";}


@media only screen and (min-width: 1198px) {
	.navbar-nav {float: right}
}

/*  CSS to control mobile device sizes ===START===  */
@media only screen and (max-width: 1197px){
	h1 { font-size:1.5em;  color: #0B3857; margin-bottom: 15px}
	h2 { font-size:1.3em; }
	h3 { font-size:1.2em; }
	div#accordion .card {margin-bottom: 5px;}
	#accordion .btn-link {  font-size: 20px;   line-height: 27px;  color: #444444;  text-align: left;}	
	.sectionTitleContainer h1 {font-size: 1.71em; font-weight: bold;}
	
	.hm-highlights .card-title {font-size:0.85em;}
    .hm-slogan p { font-size: 1.14em; letter-spacing:normal; text-transform:uppercase; }
	.navbar-form {display: flex!important; float: none}
	.r-sidebar {  margin-top: 3em; margin-bottom: 2em;}	
}
/*  CSS to control mobile device sizes ===END===  */



.chooselanguage {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	text-align: center;
}
.contact {
	font-family: "Book Antiqua", "Times New Roman", Times, Georgia, serif;
	font-size: 12px;
	font-style: normal;
	text-align: center;
	vertical-align: middle;
}
.copyright {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color: #660000;
	text-align: center;
	vertical-align: middle;
}
.happiness {
	white-space:nowrap;
}
.itemspacer > li {
	margin-bottom: 0.5em;
	line-height: 1.5em;
	font-size: 0.95em;
}
.language {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-style: normal;
	color: #003366;
	text-align: center;
	vertical-align: middle;
	margin-bottom: 0pt;
}
.menuTitle{
	color:white;
}
.linkbar {
	background-color:#0B4466;

}
.org {
	float:left;
	color:#003366;
	white-space:nowrap;
	padding-left:10px;
}
.qlink {
	margin-top: 4pt;
	margin-bottom: 5pt;
	background-color:#FFFFF0;
}
.qlinkhead {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-style: normal;
	text-align: left;
	color: #003399;
	font-weight: bold;
	vertical-align: middle;
	margin-bottom: 5pt;
	margin-top: 10pt;
}
.contReadQ {
	padding: 5px;
	background-color: #FFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #006666;
	text-align: center;
	vertical-align: middle;
	font-size: 10pt;
}
.readQuranL {
	background-color: #FFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #006666;
	text-align: center;
	vertical-align: middle;
	font-size: 10pt;
	border: medium solid #999;
	margin:0;
	padding:0;
}
.readQuranR {
	background-color: #FFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #006666;
	text-align: center;
	vertical-align: middle;
	font-size: 10pt;
	border: medium solid blue;
	margin:0;
	padding:0;
}

.freeQuran {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #006666;
	text-align: center;
	vertical-align: middle;
	font-style: normal;
	font-size: 11pt;
	margin: 0px;
	padding: 10px;
	border: medium solid #090;
	float:left;
	width:100%;
	background-color: #FFFFDF;
}
.ramadan {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #006666;
	text-align: center;
	vertical-align: middle;
	font-style: normal;
	font-size: 11pt;
	margin: 0px;
	border: medium solid #000099;
	float:left;
	width:100%;
	background-color: #FFF;
}
.ramadan strong {
	color: #990000;
}
.search {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11pt;
	color: #990033;
	text-align: center;
	font-weight: bold;
	background-color: #CCCCCC;
	margin: 0pt;
}
.toc {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11pt;
	font-style: normal;
	text-align: left;
	color: #003399;
	margin-left: 7pt;
}
.translate {
	text-align: center;
	vertical-align: text-top;
	margin-top: 0pt;
}
.translationcite {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #003366;
	text-align: center;
	vertical-align: middle;
	margin-top: 5pt;
}
.verse262 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11pt;
	font-style: normal;
	color: #003366;
}
.water {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #333;
	text-align: center;
	vertical-align: middle;
	font-style: normal;
	font-size: 11pt;
	margin: 0px;
	padding: 10px;
	border: medium solid #000099;
	float:left;
	width:100%;
	background-color: #CDF8F7;
}
.water strong {
	color: #F30;
}