html,body {
	height:100%;
	font-size: 1em;
}

/* remove focus border */
 /* a {outline:none;} */
.page-wrapper {
	text-align: left;
}

.logo-area{
	text-align: left;
}

.body-wrapper {
}

.frame_loader {
	background: url('../images/loader109.gif') no-repeat center 150px;
}

.ui-popup {
	position: absolute;
	z-index: 19999;
}

/* override jquery theme link color must be set after loading the jquery theme css files */
/*.ui-widget-content a {
	color: #295e85;
}
*/
.table-listing-row .borderless{
	border: 0px solid red;
}

.portlet-header .ui-icon {float: right;}

#categories-menu {
	z-index: 99999;
}
.ui-menu {
	padding: 2px;
	margin: 0px;
    width: 200px;
    z-index: 99999;
}
.ui-menu .ui-menu-item {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
}
.ui-menu .ui-menu-item a {
	display: block;
	padding: .5em 1em;
	min-height: 0;
    /*white-space: nowrap;*/
    /*text-overflow: ellipsis;*/
}

/*.ui-multiselect-filter input {width: 80%}*/

.ui-multiselect {padding:.5em 1em;}
input.ui-button {
	padding: .5em 1em;
}

.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text,
.ui-button-text-only .ui-button-text {
	padding: .5em 1em;
}

input, textarea {
	/*padding: .5em 1em;*/
}

.ui-menubar {
  padding-right: 0;
}

.ui-multiselect-single .ui-multiselect-checkboxes label {
	/*padding: 5px !important;*/
	padding: .5em !important;
}

.ui-multiselect-checkboxes li label { margin-right: .0em;}
.ui-multiselect-checkboxes li label input { margin: .5em .3em}
.ui-multiselect-single .ui-multiselect-checkboxes li label { margin-right: .0em;}
.ui-multiselect-single .ui-multiselect-checkboxes li label input { margin: .5em .3em}

.ui-menubar .ui-button {
	padding: .5em 0;
	font-weight: bold;
	border-left-width: 0px;
}


/* bootstrap */
.centered {
	float: none;
	display: block;
	margin-right: auto;
	margin-left: auto;
}
.center-block {
    float: none !important;
}

/* bootstrap */
.has-feedback .form-control {
	/*padding-right: 0px;*/
}

.row .row-condensed [class*="col-"] {
	padding-left: 4px !important;
	padding-right: 4px !important;
}

/* Responsive Text Alignment */
@media (max-width: 767px) {
	.text-left-xs {
		text-align: left;
	}
	.text-right-xs {
		text-align: right;
	}
	.text-center-xs {
		text-align: center;
	}
	.text-justify-xs {
		text-align: justify;
	}

    .pull-xs-left {
        float: left;
    }
	.cursor-pointer-xs{cursor:pointer; cursor:;}
}

@media (min-width: 768px) and (max-width: 991px) {
	.text-left-sm {
		text-align: left;
	}
	.text-right-sm {
		text-align: right;
	}
	.text-center-sm {
		text-align: center;
	}
	.text-justify-sm {
		text-align: justify;
	}

    .pull-sm-right {
        float: right;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
	.text-left-md {
		text-align: left;
	}
	.text-right-md {
		text-align: right;
	}
	.text-center-md {
		text-align: center;
	}
	.text-justify-md {
		text-align: justify;
	}
    .pull-md-right {
        float: right;
    }
}

@media (min-width: 1200px) {
	.text-left-lg {
		text-align: left;
	}
	.text-right-lg {
		text-align: right;
	}
	.text-center-lg {
		text-align: center;
	}
	.text-justify-lg {
		text-align: justify;
	}
    .pull-lg-right {
        float: right;
    }
}


/* Move away from * { box-sizing: border-box }  https://github.com/twbs/bootstrap/issues/12351 */
.box-content *, .box-content *:before, .box-content *:after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/* remove table border */
.table-no-border>thead>tr>th, 
.table-no-border>tbody>tr>th, 
.table-no-border>tfoot>tr>th, 
.table-no-border>thead>tr>td, 
.table-no-border>tbody>tr>td, 
.table-no-border>tfoot>tr>td,
.table-no-border>tbody,
.table-no-border>thead,
.table-no-border>tfoot{
  border-top: none !important; 
  border-bottom: none !important; 
}

/* Center responsive images */
.img-center img{
  margin: 0 auto;
}

.row-spacer {
	margin-bottom: 10px;
}

.badge-border {
	border-radius: 1em;
}

.text-bold {
	font-weight: bold;
}

.navbar-brand {
	padding-top: 0;
	padding-bottom: 0;
}
.navbar-brand>img {
	margin-top: 0px;
	height:100%;
	max-height:100%;
}

/* fix issue in bootstrap 3.3.5 */
.btn-toolbar .btn, .btn-toolbar .btn-group, .btn-toolbar .input-group {
  float: right;
}

table .img-responsive {
	width: 100%;
}
/* end bootstrap */

/* Bootstrap 5.3 migration: layout compatibility */
.main-div { float:none !important; width:100% !important; clear:both; display:block; }
.main-div > .row { width:100%; }
.content-div { min-width:0; }

/* Responsive navbar and page footer */
#top-area-container .navbar-nav .nav-link { display:block; }
#top-area-container .navbar-brand img { max-width:100%; height:auto; }
#footer, footer { clear:both; }

/* Bootstrap 5.3 / Bootswatch navbar colors are supplied by bg-primary
   and data-bs-theme="dark" in the navbar templates. Keep layout rules only. */
#top-area-container .navbar-brand { margin-inline-end: 1rem; }
#top-area-container .navbar-brand img { height:auto; max-height:60px; width:auto; }
#top-area-container #welcome-area { width:auto; flex: 1 1 auto; }
#top-area-container #welcome-area .nav { align-items:center; }
#bottom-area-container .container-fluid > .row { width:100%; }
#bottom-area-container .navbar-text { white-space:normal; }
/* Quran accordion: preserve its original blue info-colored headers, not green success. */
#sidebar #accordion .card-header,
#accordion > .card.border-info > .card-header {
    background-color: var(--bs-info, #3498db) !important;
    color: #fff !important;
}
#sidebar #accordion .card-header .card-title,
#sidebar #accordion .card-header .accordion-toggle,
#accordion > .card.border-info > .card-header .card-title {
    color: #fff !important;
}
#sidebar #accordion .card-header[data-bs-toggle="collapse"],
#accordion > .card.border-info > .card-header[data-bs-toggle="collapse"] {
    cursor: pointer;
}
#sidebar #accordion .card-header[data-bs-toggle="collapse"]:hover,
#sidebar #accordion .card-header[data-bs-toggle="collapse"]:focus-visible,
#accordion > .card.border-info > .card-header[data-bs-toggle="collapse"]:hover {
    filter: brightness(.91);
}


/* Bootstrap 5 RTL header: keep Arabic navigation words intact. */
#top-area-container .navbar-nav .nav-link { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
#top-area-container .navbar-brand { flex: 0 0 auto; }
#top-area-container #welcome-area { flex: 0 0 auto; width: auto; min-width: 0; padding-inline: 0; }
#top-area-container #welcome-area .nav { display:flex; flex-wrap:nowrap; align-items:center; }
#top-area-container #welcome-area .nav a { white-space:nowrap; }
@media (min-width: 768px) {
  #top-area-container > .container-fluid { display:flex; flex-wrap:nowrap; align-items:center; gap: 0.5rem; }
  #top-area-container > .container-fluid > .islambook-nav-brand { order:1; flex:0 0 auto; }
  #top-area-container > .container-fluid > #navbar-collapse { order:2; flex: 0 1 auto; width:auto; min-width:0; }
  #top-area-container > .container-fluid > #welcome-area { order:3; flex:0 0 auto; margin-inline-start:auto; }
  #top-area-container #navbar-collapse .navbar-nav { display:flex; flex-wrap:nowrap; align-items:center; margin:0 !important; gap:0; }
  #top-area-container #navbar-collapse .nav-link { padding-inline: .42rem; }
  #top-area-container #welcome-area { display:flex; align-items:center; gap:.3rem; }
  #top-area-container #welcome-area .nav { float:none !important; }
}
@media (max-width: 767.98px) {
  #top-area-container > .container-fluid { display:flex; flex-wrap:wrap; align-items:center; }
  #top-area-container > .container-fluid > .islambook-nav-brand { order:1; }
  #top-area-container > .container-fluid > #welcome-area { order:2; margin-inline-start:auto; }
  #top-area-container > .container-fluid > #navbar-collapse { order:3; flex-basis:100%; width:100%; }
  #top-area-container #navbar-collapse .navbar-nav { align-items:stretch; }
  #top-area-container #navbar-collapse .nav-link { white-space:normal; }
}


/* Arabic Quran header: two-row grid prevents overlap at all desktop widths. */
#top-area-container > .container-fluid {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "welcome welcome" "brand links";
  column-gap: 1.25rem;
  row-gap: .3rem;
  align-items: center;
}
#top-area-container > .container-fluid > #welcome-area {
  grid-area: welcome !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: space-between;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}
#top-area-container #welcome-area > .nav {
  display: flex;
  flex-wrap: wrap;
  float: none !important;
  margin: 0;
  padding: 0;
}
#top-area-container #welcome-area a { white-space: nowrap; }
#top-area-container > .container-fluid > .islambook-nav-brand {
  grid-area: brand !important;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  margin: 0 !important;
}
#top-area-container > .container-fluid > #navbar-collapse {
  grid-area: links !important;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
}
#top-area-container #navbar-collapse .navbar-nav {
  display: flex;
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: flex-start;
  gap: .15rem .35rem;
  margin: 0 !important;
  padding: 0;
}
#top-area-container #navbar-collapse .nav-item { flex: 0 0 auto; }
#top-area-container #navbar-collapse .nav-link {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  padding: .35rem .5rem;
}
@media (max-width: 767.98px) {
  #top-area-container > .container-fluid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "welcome" "brand" "links";
  }
  #top-area-container > .container-fluid > .islambook-nav-brand {
    width: 100%;
    justify-content: space-between;
  }
  #top-area-container > .container-fluid > #navbar-collapse:not(.show) { display: none; }
  #top-area-container > .container-fluid > #navbar-collapse.show { display: block; }
  #top-area-container #navbar-collapse .navbar-nav { align-items: stretch; }
}

/* Quran accordion Bootstrap 5: blue only on headings, never on expanded bodies. */
#sidebar #accordion > .card,
#sidebar #accordion > .card.border-info {
  background-color: #fff !important;
  color: #212529;
  overflow: hidden;
}
#sidebar #accordion > .card > .panel-collapse,
#sidebar #accordion > .card > .panel-collapse.show,
#sidebar #accordion > .card > .panel-collapse.collapsing,
#sidebar #accordion > .card > .panel-collapse > .card-body {
  background: #fff !important;
  color: #212529 !important;
}
#sidebar #accordion > .card > .card-header {
  background-color: #3498db !important;
  color: #fff !important;
}
#sidebar #accordion > .card > .panel-collapse .form-group,
#sidebar #accordion > .card > .panel-collapse .input-group {
  background-color: transparent !important;
  color: #212529;
}


/* Footer colors follow the active Bootstrap theme. */
#bottom-area-container.islambook-footer {
    border-top: 1px solid var(--bs-border-color);
}
#bottom-area-container.islambook-footer .navbar-text,
#bottom-area-container.islambook-footer .nav-link {
    color: var(--bs-body-color) !important;
}
#bottom-area-container.islambook-footer a.nav-link:hover,
#bottom-area-container.islambook-footer a.nav-link:focus-visible {
    color: var(--bs-body-color) !important;
}

/* Footer links remain without underlines across Bootswatch 5 themes. */
#bottom-area-container.islambook-footer a,
#bottom-area-container.islambook-footer a:hover,
#bottom-area-container.islambook-footer a:focus,
#bottom-area-container.islambook-footer a:active,
#bottom-area-container.islambook-footer a:visited {
    text-decoration: none !important;
}

/* Keep a gap between the Quran header and the app banner. */
#top-area-container:has(.quran-navbar-brand-group, .islambook-nav-brand) {
  margin-bottom: 13px;
}

/* Quran desktop header: utility controls above the bottom-aligned brand and links. */
@media (min-width: 768px) {
  #top-area-container:has(.quran-navbar-brand-group, .islambook-nav-brand) {
    padding-block: 4px;
  }
  /* Keep the desktop logo row as compact as the original header. */
  #top-area-container:has(.quran-navbar-brand-group, .islambook-nav-brand) .navbar-brand img {
    max-height: 51px;
  }
  #top-area-container:has(.quran-navbar-brand-group, .islambook-nav-brand) > .container-fluid {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas: ". welcome" "brand links" !important;
    align-items: end !important;
    min-height: 0;
    grid-template-rows: auto auto;
    gap: 0 1rem !important;
  }
  #top-area-container > .container-fluid > .islambook-nav-brand {
    grid-area: brand !important;
    order: initial !important;
  }
  #top-area-container > .container-fluid > #navbar-collapse {
    grid-area: links !important;
    width: auto !important;
    min-width: 0 !important;
    order: initial !important;
  }
  #top-area-container > .container-fluid > #welcome-area {
    grid-area: welcome !important;
    align-self: start !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    order: initial !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
  }
  #top-area-container #welcome-area > .nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Quran navigation on small screens: logo and hamburger on opposite sides.
   Keep the language/settings row above and the menu collapsed until toggled. */
@media (max-width: 767.98px) {
  #top-area-container > .container-fluid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "welcome" "brand" "links" !important;
    gap: .4rem !important;
    align-items: center !important;
  }
  #top-area-container > .container-fluid > #welcome-area {
    grid-area: welcome !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
  }
  #top-area-container > .container-fluid > .quran-navbar-brand-group,
  #top-area-container > .container-fluid > .islambook-nav-brand {
    grid-area: brand !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
  }
  #top-area-container .quran-navbar-brand-group > .navbar-brand,
  #top-area-container .islambook-nav-brand > .navbar-brand {
    order: 0 !important;
    margin: 0 !important;
  }
  #top-area-container .quran-navbar-brand-group > .navbar-toggler,
  #top-area-container .islambook-nav-brand > .navbar-toggler {
    order: 1 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
  #top-area-container > .container-fluid > #navbar-collapse {
    grid-area: links !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex-basis: auto !important;
  }
  #top-area-container > .container-fluid > #navbar-collapse:not(.show):not(.collapsing) {
    display: none !important;
  }
  #top-area-container > .container-fluid > #navbar-collapse.show {
    display: block !important;
  }
  #top-area-container #navbar-collapse .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
  }
}

/* Bootstrap 5 / Bootswatch: welcome links inherit the same navbar palette
   as the Quran, Azkar, Audio, Hadith and Prayer Times navigation links. */
#top-area-container #welcome-area .nav a,
#top-area-container #welcome-area .nav .nav-link,
#top-area-container #welcome-area .nav .nav-link {
    color: var(--bs-navbar-color, rgba(255,255,255,.65)) !important;
    text-decoration: none !important;
}
#top-area-container #welcome-area .nav a:hover,
#top-area-container #welcome-area .nav a:focus-visible,
#top-area-container #welcome-area .nav .nav-link:hover,
#top-area-container #welcome-area .nav .nav-link:focus-visible {
    color: var(--bs-navbar-hover-color, rgba(255,255,255,.8)) !important;
    text-decoration: none !important;
}
#top-area-container #welcome-area .nav a.active,
#top-area-container #welcome-area .nav .nav-link.active {
    color: var(--bs-navbar-active-color, #fff) !important;
}

/* General (non-Quran) site navbar: Bootstrap 5 / Bootswatch responsive alignment. */
#top-area-container .site-navbar-brand-group { display:flex; align-items:center; gap:.5rem; }
#top-area-container .site-welcome-area { margin-inline-start:auto; order:3; }
#top-area-container .site-welcome-area .container-fluid { padding:0; }
#top-area-container .site-welcome-area .nav { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; }
#top-area-container .site-welcome-area .nav-link,
#top-area-container .site-welcome-area .nav-item > a:not(.btn) {
  color:var(--bs-navbar-color) !important; text-decoration:none !important;
}
#top-area-container .site-welcome-area .nav-link:hover,
#top-area-container .site-welcome-area .nav-item > a:not(.btn):hover {
  color:var(--bs-navbar-hover-color) !important; text-decoration:none !important;
}
#top-area-container .site-welcome-area .nav-link:focus,
#top-area-container .site-welcome-area .nav-item > a:not(.btn):focus {
  color:var(--bs-navbar-active-color) !important; text-decoration:none !important;
}
#top-area-container .site-welcome-area .float-start,
#top-area-container .site-welcome-area .float-end { float:none !important; }
#top-area-container .site-welcome-area > .container-fluid { display:flex; align-items:center; gap:.75rem; }
#top-area-container .navbar-collapse { order:2; flex-grow:0; }
#top-area-container .site-navbar-brand-group { order:1; }
@media (max-width:767.98px) {
  #top-area-container .site-navbar-brand-group { width:100%; justify-content:space-between; }
  #top-area-container .site-welcome-area { order:2; width:100%; margin-inline-start:0; }
  #top-area-container .site-welcome-area > .container-fluid { flex-wrap:wrap; }
  #top-area-container .navbar-collapse { order:3; flex-basis:100%; width:100%; }
}
/* General footer: remove hover underlines while preserving Bootswatch light text. */
#bottom-area-container a, #bottom-area-container a:hover,
#bottom-area-container a:focus, #bottom-area-container a:active { text-decoration:none !important; }

/* General-site navigation: independent utility bar and responsive main navbar.
   Scoped to site-navbar-brand-group so Quran navigation remains unchanged. */
#top-area-container:has(.site-navbar-brand-group) > .container-fluid {
  display:flex !important; flex-wrap:nowrap !important; align-items:center !important;
  gap:1rem !important;
}
#top-area-container .site-navbar-brand-group {
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  flex:0 0 auto !important; order:0 !important; min-width:0;
}
#top-area-container:has(.site-navbar-brand-group) #navbar-collapse {
  order:1 !important; flex:1 1 auto !important; min-width:0;
}
#top-area-container:has(.site-navbar-brand-group) #navbar-collapse .navbar-nav {
  display:flex; flex-direction:row; flex-wrap:nowrap; gap:.25rem;
}
#top-area-container:has(.site-navbar-brand-group) #navbar-collapse .nav-link { white-space:nowrap; }
#top-area-container:has(.site-navbar-brand-group) .navbar-toggler-icon {
  display:inline-block; width:1.5em; height:1.5em;
  background-image:var(--bs-navbar-toggler-icon-bg);
  background-repeat:no-repeat; background-position:center; background-size:100%;
}
/* The general website's Login/Register/actions row sits above the primary navbar. */
.site-welcome-area {
  width:100%; background:var(--bs-body-bg); color:var(--bs-body-color);
  padding:.25rem .75rem;
}
.site-welcome-area > .container-fluid {
  display:flex !important; flex-wrap:wrap !important; align-items:center !important;
  justify-content:space-between !important; gap:.35rem 1rem; padding:0;
}
.site-welcome-area .nav { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; }
.site-welcome-area .nav-link, .site-welcome-area a:not(.btn) {
  color:var(--bs-link-color) !important; text-decoration:none !important;
}
.site-welcome-area .nav-link:hover, .site-welcome-area a:not(.btn):hover {
  color:var(--bs-link-hover-color) !important; text-decoration:none !important;
}
@media (max-width:767.98px) {
  #top-area-container:has(.site-navbar-brand-group) > .container-fluid {
    display:flex !important; flex-wrap:wrap !important;
  }
  #top-area-container .site-navbar-brand-group {
    width:100% !important; flex:0 0 100% !important;
  }
  #top-area-container .site-navbar-brand-group .navbar-brand { order:0 !important; margin:0 !important; }
  #top-area-container .site-navbar-brand-group .navbar-toggler { order:1 !important; margin:0 !important; }
  #top-area-container:has(.site-navbar-brand-group) #navbar-collapse {
    flex:0 0 100% !important; width:100% !important; order:2 !important;
  }
  #top-area-container:has(.site-navbar-brand-group) #navbar-collapse:not(.show):not(.collapsing) {
    display:none !important;
  }
  #top-area-container:has(.site-navbar-brand-group) #navbar-collapse.show { display:block !important; }
  #top-area-container:has(.site-navbar-brand-group) #navbar-collapse .navbar-nav {
    flex-direction:column !important; align-items:stretch !important; width:100%;
  }
  #top-area-container:has(.site-navbar-brand-group) #navbar-collapse .nav-item { width:100%; }
  .site-welcome-area > .container-fluid { justify-content:space-between !important; }
}

/* Bootstrap 5.3 general-site navbar: keep utility row separate, brand and links on one line. */
#top-area-container:has(.site-navbar-brand-group) > .container-fluid { display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:space-between !important; }
#top-area-container:has(.site-navbar-brand-group) .site-navbar-brand-group { flex:0 0 auto !important; width:auto !important; order:0 !important; }
#top-area-container:has(.site-navbar-brand-group) .navbar-collapse { order:1 !important; flex:1 1 auto !important; }
#top-area-container:has(.site-navbar-brand-group) .navbar-nav { flex-direction:row; align-items:center; }
#top-area-container:has(.site-navbar-brand-group) .navbar-toggler { color:var(--bs-navbar-color); border-color:var(--bs-navbar-toggler-border-color); }
@media (max-width:767.98px) {
 #top-area-container:has(.site-navbar-brand-group) > .container-fluid { flex-wrap:wrap !important; }
 #top-area-container:has(.site-navbar-brand-group) .site-navbar-brand-group { flex:0 0 100% !important; width:100% !important; display:flex !important; justify-content:space-between !important; }
 #top-area-container:has(.site-navbar-brand-group) .navbar-collapse { flex:0 0 100% !important; width:100% !important; order:2 !important; }
 #top-area-container:has(.site-navbar-brand-group) .navbar-collapse:not(.show):not(.collapsing) { display:none !important; }
 #top-area-container:has(.site-navbar-brand-group) .navbar-collapse.show { display:block !important; }
 #top-area-container:has(.site-navbar-brand-group) .navbar-nav { flex-direction:column !important; align-items:stretch !important; }
}

/* Bootstrap 5: justify the Arabic Hadith text in the daily card. */
#azkar-today-panel .card-text {
    text-align: justify;
    text-align-last: start;
}

/* Settings controls retain Bootstrap pill feedback in the utility navigation. */
#welcome-area .nav .navbar-settings-pill {
    border-radius: var(--bs-border-radius-pill, 50rem);
    padding: .25rem .65rem;
    background-color: transparent;
}
#welcome-area .nav .navbar-settings-pill:hover,
#welcome-area .nav .navbar-settings-pill:focus-visible,
#welcome-area .nav .navbar-settings-pill[aria-expanded="true"] {
    background-color: rgba(var(--bs-emphasis-color-rgb, 255, 255, 255), .15);
}

/* Pill feedback for the main Quran navigation links. */
#top-area-container :is(.quran-navbar-brand-group, .islambook-nav-brand) ~ .navbar-collapse .nav-pills .nav-link {
    padding-inline: .8rem;
}
#top-area-container :is(.quran-navbar-brand-group, .islambook-nav-brand) ~ .navbar-collapse .nav-pills .nav-link:hover,
#top-area-container :is(.quran-navbar-brand-group, .islambook-nav-brand) ~ .navbar-collapse .nav-pills .nav-link:focus-visible {
    background-color: rgba(255, 255, 255, .15);
}

/* Theme choices share the light, spacious appearance of Azkar settings. */
:is(#navbar-theme-menu, .audio-choice-menu, .settings-choice-menu).theme-picker-menu {
    --bs-dropdown-bg: #fff;
    --bs-dropdown-color: #212529;
    --bs-dropdown-link-color: #212529;
    --bs-dropdown-link-hover-color: #2c3e50;
    --bs-dropdown-link-hover-bg: #ecf0f1;
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #2c3e50;
    --bs-dropdown-header-color: #212529;
    --bs-dropdown-border-color: #cbd3da;
    --bs-dropdown-border-radius: .5rem;
    min-width: 13rem;
}
:is(#navbar-theme-menu, .audio-choice-menu, .settings-choice-menu).theme-picker-menu .dropdown-item {
    padding: .65rem 1rem;
    font-size: 1rem;
    border: 0;
    border-radius: 0;
    text-align: start;
}
:is(#navbar-theme-menu, .audio-choice-menu, .settings-choice-menu).theme-picker-menu .dropdown-header {
    padding: .75rem 1rem;
}

/* Secondary footer uses Bootstrap contrast colors. */
#bottom-area-container.islambook-footer.bg-secondary .navbar-text,
#bottom-area-container.islambook-footer.bg-secondary .nav-link {
    color: inherit !important;
}



/* Tertiary footer foreground matches light and dark Bootstrap modes. */
#bottom-area-container.islambook-footer.bg-body-tertiary,
#bottom-area-container.islambook-footer.bg-body-tertiary .navbar-text,
#bottom-area-container.islambook-footer.bg-body-tertiary .nav-link {
    color: #212529 !important;
}
[data-bs-theme="dark"] #bottom-area-container.islambook-footer.bg-body-tertiary {
    color: #dee2e6 !important;
}

/* Bootstrap 3 navbar-inverse appearance for the Bootstrap 5 footer. */
#bottom-area-container.islambook-footer.navbar-inverse {
    background-color: #222;
    border-color: #080808;
    color: #fff !important;
}
#bottom-area-container.islambook-footer.navbar-inverse .navbar-text,
#bottom-area-container.islambook-footer.navbar-inverse .nav-link {
    color: #fff !important;
}

/* Neutral charcoal footer with consistent contrast in every theme. */
#bottom-area-container.islambook-footer.bg-dark {
    background-color: #212529 !important;
    color: #fff !important;
}
#bottom-area-container.islambook-footer.bg-dark .navbar-text,
#bottom-area-container.islambook-footer.bg-dark .nav-link {
    color: #fff !important;
}

/* Keep charcoal footer links readable in every interaction state. */
#bottom-area-container.islambook-footer.bg-dark a.nav-link:link,
#bottom-area-container.islambook-footer.bg-dark a.nav-link:visited,
#bottom-area-container.islambook-footer.bg-dark a.nav-link:hover,
#bottom-area-container.islambook-footer.bg-dark a.nav-link:focus,
#bottom-area-container.islambook-footer.bg-dark a.nav-link:active {
    color: #fff !important;
}

/* Success footer preserves white text and link interaction colors. */
#bottom-area-container.islambook-footer.bg-success,
#bottom-area-container.islambook-footer.bg-success .navbar-text,
#bottom-area-container.islambook-footer.bg-success .nav-link,
#bottom-area-container.islambook-footer.bg-success a.nav-link:hover,
#bottom-area-container.islambook-footer.bg-success a.nav-link:focus,
#bottom-area-container.islambook-footer.bg-success a.nav-link:active,
#bottom-area-container.islambook-footer.bg-success a.nav-link:visited {
    color: #fff !important;
}

/* Light footer: readable text and pills in every theme and link state. */
#bottom-area-container.islambook-footer.bg-light,
#bottom-area-container.islambook-footer.bg-light .navbar-text,
#bottom-area-container.islambook-footer.bg-light .nav-link,
#bottom-area-container.islambook-footer.bg-light a.nav-link:hover,
#bottom-area-container.islambook-footer.bg-light a.nav-link:focus,
#bottom-area-container.islambook-footer.bg-light a.nav-link:active,
#bottom-area-container.islambook-footer.bg-light a.nav-link:visited {
    color: #212529 !important;
}

.audio-choice-dropdown { position: relative; flex: 1 1 auto; min-width: 0; }
.audio-choice-trigger { width: 100%; text-align: start; color: #212529; background-color: #fff; border-color: #cbd3da; border-radius: .5rem; padding-block: .65rem; }
.audio-choice-menu { z-index: 1080; margin: 0; max-width: calc(100vw - 16px); }
.audio-choice-menu .dropdown-item { white-space: normal; }
.audio-surah-menu { background: #fff; color: #212529; border: 1px solid #cbd3da; border-radius: .5rem; padding: .5rem !important; }
.audio-surah-menu .audio-surah-name { color: #212529; padding: .65rem 1rem; border-radius: .5rem !important; }
.audio-surah-menu .audio-surah-name:hover, .audio-surah-menu .audio-surah-name:focus-visible { color: #2c3e50; background-color: #ecf0f1; }
.audio-surah-menu .audio-surah-name[aria-pressed="true"] { color: #fff; background-color: #2c3e50; }
.audio-surah-menu .dropdown-divider { display: none; }

.settings-choice-menu { z-index: 1080; }

/* Scroll-to-top control shared with the admin center. */
#scrollUp {
    display: none;
    position: fixed;
    z-index: 1080;
    bottom: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #555;
    color: #fff;
    font: bold 25px/32px Arial, sans-serif;
    text-align: center;
    cursor: pointer;
    opacity: .6;
    transition: background 250ms ease-in-out;
}
#scrollUp:hover { background: #df0070; opacity: .8; }
#scrollUp:focus-visible { outline: 3px solid #3498db; outline-offset: 3px; opacity: 1; }
@media print { #scrollUp { display: none !important; } }

/* Keep profile links and the sharing button on the same baseline. */
.footer-social-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer-social-buttons .social { display: flex; margin: 0; }
.footer-social-buttons .social ul.social_links { display: flex; align-items: center; float: none; margin: 0; padding: 0; gap: 10px; }
.footer-social-buttons .social ul li { float: none; margin: 0; width: 32px; height: 32px; }
.footer-social-buttons .a2a_kit { display: flex; align-items: center; line-height: 1; }
.footer-social-buttons .a2a_kit a { padding: 0; }

/* Contain footer social buttons in their own column in either direction. */
.footer-social-buttons { clear: both; width: 100%; min-width: 0; position: static; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px; margin-block: 12px; }
.footer-profile-links { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.footer-profile-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; color: #fff !important; font-size: 22px; text-decoration: none; }
.footer-twitter-link { background: #1da1f2; }
.footer-facebook-link { background: #1877f2; }
.footer-social-buttons .a2a_kit { flex: 0 0 32px; width: 32px; height: 32px; float: none; margin: 0; }
.footer-social-buttons .a2a_kit a { float: none; display: block; width: 32px; height: 32px; }

.footer-social-buttons .site-social-button, .footer-social-buttons .site-share-widget { flex: 0 0 auto; }
.footer-social-buttons .site-social-button { white-space: nowrap; }

/* Keep explicitly white account links/icons white across navbar themes. */
#top-area-container #welcome-area .nav .text-white,
#top-area-container #welcome-area .nav .text-white:hover,
#top-area-container #welcome-area .nav .text-white:focus,
#top-area-container #welcome-area .nav .text-white:focus-visible,
#welcome-area.site-welcome-area .nav .text-white {
    color: var(--bs-white, #fff) !important;
}

/* Match the top account area's size consistently across every footer column. */
#bottom-area-container { font-size: 1rem; font-weight: 700; color: #fff; }
#bottom-area-container .nav-link.text-white,
#bottom-area-container .nav-link.text-white,
#bottom-area-container .navbar-text.text-white,
#bottom-area-container span.text-white {
    color: #fff !important;
    font-size: 1rem !important;
    font-family: inherit;
    line-height: 1.5;
    font-weight: 700;
}

/* Plain footer copy is regular; navigation and sharing links stay bold. */
#bottom-area-container { font-weight: 400; }
#bottom-area-container span.fw-normal { font-weight: 400 !important; }
#bottom-area-container a, #bottom-area-container button { font-weight: 700; }

/* Match Arabic footer navigation to the top navigation font stack. */
#bottom-area-container a.nav-link,
#bottom-area-container a.nav-link {
    font-family: Arial, Verdana, Tahoma, Times, sans-serif;
}

/* Footer pills use the same hover feedback as the top navigation. */
#bottom-area-container .nav-pills > .nav-item > a.nav-link { width: fit-content; }
#bottom-area-container .nav-pills > .nav-item > a.nav-link:hover,
#bottom-area-container .nav-pills > .nav-item > a.nav-link:focus-visible { background-color: rgba(255, 255, 255, .15); }

#bottom-area-container a.nav-link.fw-normal { font-weight: 400 !important; }

/* Fit both store badges in one footer row on tablet and desktop screens. */
@media (min-width: 768px) {
    #bottom-area-container .store-badges { flex-wrap: nowrap !important; }
    #bottom-area-container .store-badges > a,
    #bottom-area-container .store-badges > .hidden-ios { flex: 1 1 0; min-width: 0; }
    #bottom-area-container .store-badges a { display: flex; justify-content: center; padding-inline: 0 !important; }
    #bottom-area-container .store-badges img { display: block; width: 100% !important; height: auto !important; max-height: 45px; object-fit: contain; }
}