/*url('font/SahlNaskh.eot?#iefix')  format('embedded-opentype'),
		url('font/SahlNaskh.otf')           format('opentype'),
		url('font/SahlNaskh.woff')          format('woff'),
		url('font/SahlNaskh.ttf')           format('truetype'),
		url('font/SahlNaskh.svg#SahlNaskh') format('svg'),*/

/*url('font/SahlNaskh-Bold.eot?#iefix')         format('embedded-opentype'),
		url('font/SahlNaskh-Bold.otf')                format('opentype'),
		url('font/SahlNaskh-Bold.ttf')                format('truetype'),
		url('font/SahlNaskh-Bold.svg#SahlNaskh-Bold') format('svg'),*/

/*@font-face {
   font-family: 'SahlNaskh';
   src:	url('font/SahlNaskh.woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'SahlNaskh-Bold';
   src: url('font/SahlNaskh-Bold.woff');
   font-weight: normal;
   font-style: normal;
}	*/

h1, h2, h3, h4, h5, h6 {
    /*font-family: 'SahlNaskh-bold';*/
    font-family: 'Noto Naskh Arabic', serif;
    font-weight: 600;
    line-height: 1.5;
    /* color: hsl(39.29deg 15.08% 22.71%); */
}

.table td, .table th{
    border-top: 0;
    border: 0;
    border-right: 1px solid hsl(0deg 0% 92%);
    vertical-align: middle;
    white-space: nowrap;
}

.table td:first-child, .table th:first-child {
    border-right: 0 !important;
    width: 1rem;
    text-align: center;
}

.cal-cell {
    margin-left: 1rem;
    float: right;
    border-right: 1px solid #dee2e6;
    padding-right: 1rem;
    width: auto;
}
a.dropdown-item:active {
	background-color: #d9b56b;
}
a.dropdown-item:hover {
	/*background-color: #a3c026;*/
	/*background-color: #800000;*/
	background-color: hsl(40deg 55% 46% / 5%);
}
.dropdown-menu {
	border-color: #b5872c;
	background-color: hsl(0deg 0% 100% / 95%);
	margin-right: 5px;
	margin-left: 5px;
}


.dropdown-item:focus, .dropdown-item:hover {
	background-color: hsl(40deg 55% 46% / 5%);
}

.fixed-right-menu {
    position: static;
    max-width: 210px; /*252px;*/
    /* max-width: 0; */
    width: fit-content;
    right: -252px;
    right: 0;
    transition: all 0.7s;
    z-index: 1;
    overflow: hidden;
}

.fixed-right-menu .dropdown-menu {
    border:0;
    border-right: 2px solid #b5872c;
    background-color: hsl(0deg 0% 100% / 75%);
    margin-right: 5px;
    margin-left: 0px; /*5px*/
    transition: all 0.5s /*ease-in-out*/;
    position: static !important;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}

.fixed-right-menu .dropdown-menu.show {
    padding: .5rem 0;
    height: calc(100% - 50px);
}

.fixed-right-menu .dropdown-menu .dropdown-item {
    padding: .25rem 1.125rem;
}



body{
  direction: rtl;
  text-align: right;
  line-height: normal; /*1.6875rem; 2.125rem*/
  font-family: 'Noto Naskh Arabic', serif;
  font-weight: 100;
  color: hsl(220deg 12% 32%);
  opacity:0;
  transition: opacity 0.75s ease-out;
  /*	font-size: 1.1rem;*/
  /*font-family: 'SahlNaskh';*/
  /*	font-family: 'GEHeritageTwo-Medium';  */
  /*	font-family: "Simplified Arabic";*/
  /*	font-weight: 700; */
  /*background: url(https://halquran.alhodacenter.com/assets/themes/quran/img/ce2.png)  scroll no-repeat, linear-gradient(to bottom right,hsl(213deg 100% 98% / 99%),hsl(0deg 0% 100% / 99%), hsl(0deg 0% 100%));*/
  /*background-size: contain;*/
  /*background:
    url(https://halquran.alhodacenter.com/assets/themes/quran/img/ce2.png) scroll no-repeat,
    linear-gradient(to bottom right,
    hsl(0deg 0% 100% / 85%),
    hsl(0deg 0% 100% / 95%),
    hsl(0deg 0% 100% / 85%)
    );
    background-size: auto;
    background-position: 0 0px;
    background-attachment: fixed;
    background-blend-mode: soft-light;*/
}

.body-bg{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity:0.12;
  z-index: -1;
	background: url(https://alhodacenter.com/assets/themes/quran/img/ce2.png) scroll no-repeat,
    linear-gradient(to bottom right,
    hsl(0deg 0% 100% / 85%),
    hsl(0deg 0% 100% / 95%),
    hsl(0deg 0% 100% / 85%)
    );
	/* background-size: auto;
  background-position: 0 0px;
  background-attachment: fixed;
  background-blend-mode: darken; */
}

/*@media screen and (max-device-width: 1024px){
    body {
        background-attachment: scroll;
        transition:background 0.25s;
    }
}*/

.oi{
/*	color:#999; */
    top: 3px !important;
    color:inherit;/* #800000;*/
}

.page-item.active .page-link{
	background-color: #840707;
    border-color: #840707;
}
.page-item .page-link{
	color: #840707;
}

h1{
	font-size: 2rem;
}

h2{
	/*font-size: 1.3rem;*/
	/*font-weight: normal;*/
}
.title-underline {
    margin: 0.125rem auto 1.25rem auto;
    width: 14%;
    min-width: 240px;
    height: 3px;
    background: hsl(36deg 47% 71%);
}

ul.product_authors_list {
   /* padding: 10px 16px;*/
    /*list-style: inline;*/
		display:inline;
		list-style-type: none;
    margin: 0;
    padding: 0;

}
ul.product_authors_list li {
	display: inline;
}

ul.product_authors_list li+li:before {
    /*padding: 8px;*/
    color: #999;
    content: "، ";
}


/*------------------------------------*/

ul.article_cat_list {
   /* padding: 10px 16px;*/
    /*list-style: inline;*/
    display: inline-block;
    margin: 0;
    padding: 0;
}
ul.article_cat_list li {
    display: inline-block;
}

ul.article_cat_list li+li:before {
    /*padding: 8px;*/
    color: #999;
    content: "\00bb"; /*"/\00a0";*/
}

ul.article_cat_list li a {

/*    color: #a3c026;*/
    /*color: #800000;*/
    /*text-decoration: none;*/
}

a {
/*	color: #a30401;*/
	color: inherit; /*#800000;*/
    text-decoration: none;
    transition: color 0.7s;
}
a:hover{
/*    color: #a3c026;*/
    color: hsl(220deg 12% 4%); /*#276ecf;*/
    text-decoration: none;
}

.oi {
	padding-left: 10px;
}
/*.card-title{
	color: #a30401;
	color: #800000;
}*/
.bg-dark {
	background-color: #a30401;
}

.details-text {
    /*color: #800000;*/
    letter-spacing: -0.11px;
}

audio, video {
    width: -webkit-fill-available;
    aspect-ratio: 16 / 9;
    background: black;
}

.soundcloud-text {
	color: #d9b56b;
	background:#372c10;
	padding: 10px 10px 10px 10px;
}

.soundcloud-text-1 {
/*
	color: #372c10;
	background:#d9b56b;
*/
	/*color: #fff;*/
	padding: 10px 10px 10px 10px;
}
.youtube-text {
	color: #d9b56b ;
	background:#111;
	padding: 10px 10px 10px 10px;
}
.product-text {
	font-size: 1.4rem;
	color: #a30401 ;
	background:#FFF;
	padding: 10px 10px 10px 10px;
}
.product-author {
/*
	color: #000 ;
	background:#e9d09b;
*/
	color: #800000;
    background: hsl(89.13deg 39.18% 86%);
	padding: 10px 10px 10px 10px;
}

.huda-soundcloud {
	margin: 0rem 0rem 2rem 0rem;
	/*padding: 2rem 2rem 2rem 2rem;*/
	/*background: #fff;*/
}
p{
	text-align: justify;
}
.img-thumbi {
	width: 100%;
	height: 15rem;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.img-thumbi-media {
	width: 100%;
	height: 12rem;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.img-thumbi-1 {
	width: 100%;
	height: 70px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.product-thumbi {
	width: 100%;
	height: 20rem;
/*	background: hsl(89.13deg 39.18% 86%);
    background: #152544;
*/
    background: #fff;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
.topic-title{
	background: #d9b56b;
	color: #000;
	padding: 1rem 1rem 1rem 1rem;
	border-radius: 5px;
}
.topic-title1{
	background: #d9b56b;
	color: #000;
	padding: 1rem 1rem 1rem 1rem;
}
.quesition-title{
	/* background: #a3c026;  */
	color: #000;
	font-size: 1.24rem;
}

.ask-search {
	font-size: 1.24rem;
	text-decoration: none;
}
/*.ask-search a:link, .ask-search a:visited{
	color: #fff; / *#9a6933;* /
}*/
.ask-search {
	color: #877d6a;
}
.ask-search a:active, .ask-search a:hover{
	/* color: #a30401; */
	text-decoration: none;
}
.card {
/*	border-color: #ffeec9;*/
}
.card-footer {
/*  color: #a30401;
	background: #ffeec9;*/
    /*color: hsl(48 39% 26% / 1); #800000;*/
    background: hsl(89.13deg 39.18% 86%);
	border-top: 0;
	font-size: 0.9rem;
}

.wrapper > .navbar-custom {
    background-color: hsl(89.13deg 39.18% 86%);
    border-bottom: 0.14rem solid hsl(87.86deg 44.06% 62.26%);
    z-index: 1021;
}

.fixed-right-menu .navbar-custom {
    background-color: hsl(89.13deg 39.18% 86%);
    border-left: 0.14rem solid hsl(87.86deg 44.06% 62.26%);
}




/* Modified Theme */
    /* Bootstrap missing classes */
    .ml-n1 {
      margin-left: -0.25rem !important;
    }

    .mb-n5 {
        margin-bottom: -3rem;
    }
    .mb-n2 {
        margin-bottom: -0.25rem;
    }
    .mt-n3{
      margin-top: -1rem!important;
    }
    .mt-n4{
      margin-top: -1.5rem!important;
    }
    .mt-n5{
      margin-top: -3rem!important;
    }

    .border-radius{
        border-radius: 0.25rem;
    }

    .btn-group .btn {
        display: inline-block !important;
        user-select: none;
        border: 1px solid transparent;
        padding: .375rem .75rem !important;
        /* border-radius: .25rem !important; */
    }
    .btn-group .btn:only-child {
        border-radius: .25rem !important;
    }

    .btn-group.icon > .btn {
      padding: .375rem .5rem .375rem .65rem !important;
    }

    .btn-group.icon > .btn.icon {
      padding: .375rem 1rem !important;
    }

    .btn-group .btn.entries {
        border-left: 2px solid #dee2e6;
    }
    .h-0 {
      height: 0px !important;
    }

    .btn-warning {
        color: hsl(36deg 47% 37% / 85%);
        background-color: hsl(40deg 80% 88%);
        border-color: transparent;
    }
    .btn-warning:hover, .btn-warning.active {
        color: hsl(36 47% 10% / 1) !important;
        background-color: hsl(40deg 80% 78% / 85%) !important;
        border-color: transparent !important;
    }

    .btn-outline-warning {
      color: hsl(36deg 47% 37% / 85%);
      background-color: transparent;
      border-color: hsl(40deg 80% 78% / 85%);
    }

    .btn-outline-warning.active, .btn-outline-warning:active, .btn-outline-warning:hover {
      color: hsl(36 47% 10% / 1) !important;
      background-color: hsl(40deg 80% 78% / 85%) !important;
      border-color: transparent !important;
      /* max-width: 108.58px; */
    }

    .btn-group .btn.toggle-switch{
    	line-height: 1.8rem;
    	padding-bottom: 0.2rem !important;
    }

    /* Bootstrap missing classes */
    /* .input-group .input-group-text {
        border-radius: .25rem !important;
    } */

    .input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group>.input-group-append:last-child>.input-group-text:not(:last-child), .input-group>.input-group-append:not(:last-child)>.btn, .input-group>.input-group-append:not(:last-child)>.input-group-text, .input-group>.input-group-prepend>.btn, .input-group>.input-group-prepend>.input-group-text {
      border-top-right-radius: .25rem !important;
      border-bottom-right-radius: .25rem !important;
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }

    .input-group input {
      border-top-left-radius: .25rem !important;
      border-bottom-left-radius: .25rem !important;
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }

    #btnContainer .btn-light:not(.active) {
        background-color: #ffffff;
    }

    .loading-icon {
      position: absolute;
      opacity: 0;
      color: #fff;
      margin: auto;
      top: 0;
      right: 25%;
      bottom: 0;
      left: 0;
      width: fit-content;
      height: fit-content;
    }

    .fa-spin {
      -webkit-animation: fa-spin 1s infinite cubic-bezier(0.39, 0.71, 0.38, 0.7);
      animation: fa-spin 1s infinite cubic-bezier(0.39, 0.71, 0.38, 0.7) !important;
      /* animation: fa-spin 0.75s infinite linear; */
    }

    .h-col-dark{
        color: #372c10;
    }

    .latest-articles-bg-color {
        background-color: linear-gradient(to bottom right,#9a7324,#212c36, hsl(210deg 10% 19%));
    }

    /* Settings */
    #settings {
        opacity: 0;
        top: -242px; /*-108px;*/
        right: 0;
        left: 0;
        width: fit-content;
        position: fixed;
        z-index: 1019; /*1021*/
        background-color: hsl(0deg 0% 100%);
        border: 1px solid hsl(210deg 14% 89%);
        transition: all 1s;
        zoom: 1.07;
        overflow: hidden;
        opacity: 0;
        display: inline-block;
    }

    nav #settings {
        position: static;
        opacity: 1;
        margin: auto;
        width: auto;
        display: flex;
        flex-wrap: wrap;
        border: navajowhite;
        background: none;
        box-shadow: none !important;
        margin-bottom: 0 !important;
    }

    nav #settings button {
        width: 46%;
    }

    nav #settings button.btn-light {
        background-color: hsl(0deg 0% 100% / 66%);
        border: none;
        opacity:0.9;
    }

    nav #settings button.btn-light:hover {
        background-color: hsl(0deg 0% 100% / 100%);
        border: none;
        opacity:1;
    }

    #settings.shown {
        top: 83px;
        opacity: 1;
        zoom: 1.05;
        z-index:1022; /*1021*/
    }

    #settings ion-icon {
        /*transition: all 1s;*/
        margin-bottom: -5px;
    }

    #settings-btn-lg{
        zoom: 0.9;
    }
    /* Settings */


    /* News Ticker */
    .acme-news-ticker {
        border-radius: 5px;
        overflow: hidden;
        margin-top: 0px !important;
    }
    /*.acme-news-ticker.questions{
        border-color: #f3baba;
    }*/

    /*.acme-news-ticker.questions .acme-news-ticker-pause{
        background: #fff0f0;
    }*/

    /*.acme-news-ticker.questions .acme-news-ticker-label{
        background: rgb(255 245 239);
    }*/

    /* Focusing the button with a keyboard will show a dashed black line. */
    button:focus-visible {
      outline: none;
    }

    /* Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */
    button:focus:not(:focus-visible) {
      outline: none;
      box-shadow: none;
    }

    .acme-news-ticker-controls button {
        background: rgb(249 250 250 / 75%) !important;
        border-color: #eeeeee85 !important;
    }

    .acme-news-ticker{
        border: 0px solid hsl(36deg 47% 71%) !important;
    }

    .acme-news-ticker-label{
        background: hsl(41deg 78% 88%) !important;
        color: hsl(48 39% 26% / 1) !important;
        color: unset !important;
        float: right !important;
        margin-left: 15px !important;
        margin-right: 0 !important;
        font-size: 1rem !important;
        text-align:center;
        top: 0 !important;
    }

    .acme-news-ticker-controls{
        float: left !important;
        position: unset !important;
    }

    .my-news-ticker li {
        height: 45px;
        padding: 12px 0;
        top:-10px;
    }
    /* News Ticker */


    /* Body */
    body{
    	font-size: 1rem;
    }

    .article, .question{
    	font-size: 1.24rem;
    }
    /* Body */

    /* Wrapper */
    /*body > .wrapper {
        min-height: calc(25vh + 25vw);
    }*/
    body > .wrapper {
        min-height: calc(25vh + 25vw);
        background-color: hsl(0deg 0% 100% / 35%); /* hsl(40deg 80% 95% / 35%); / * hsl(40deg 100% 97% / 35%);*/
        /*background-color: floralwhite;
        background-color: aliceblue;
        background-color: azure;
        background-color: beige;
        background-color: ghostwhite;
        background-color: ivory;
        background-color: mintcream;*/
    }
        /* background-color: antiquewhite; */
        /* background-color: lemonchiffon; */
        /* background-color: lightgoldenrodyellow; */
        /* background-color: lightyellow; */
        /* background-color: papayawhip; */
    /* Wrapper */

    /* Nav */
    .navbar-brand .logo-image {
      width: 29%;
      min-width: 73px;
      max-width: 175px;
      filter: saturate(8);
    }

    .navbar-light .navbar-toggler, .btn.settings-btn {
        background-color: hsl(0deg 0% 100%); /*hsl(40deg 80% 88%); hsl(0deg 0% 100% / 75%);*/
        color: hsl(210deg 1% 27%);
        border: none;
        width: 49.19px;
        /* border-color: hsl(0deg 0% 100% / 75%); */
    }

    /* .navbar-light .navbar-toggler {
        background-color: hsl(0deg 0% 100% / 75%);
        border-color: hsl(0deg 0% 100% / 75%);
    } */

    .navbar-light .navbar-toggler{
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    .dropdown-toggle::after {
        vertical-align: .15em !important;
        margin-left: 0.255em !important;
        margin-right: 0.398rem !important;
    }

    .fixed-right-menu .navbar-nav > .nav-item.dropdown > .nav-link.dropdown-toggle::after {
        /* vertical-align: .15em !important; */
        margin-left: 0.255em !important;
        margin-right: 0.398rem !important;
        transition: all 0.25s;
        width: 0;
        overflow: hidden;
        position: relative;
        top: 1px;
        bottom: 0;
        margin: auto;
        /* color: hwb(40deg 6% 36% / 75%); */
        display: inline-flex;
        left: -102px;
        opacity: 0;
    }

    .fixed-right-menu .navbar-nav > .nav-item.dropdown > .nav-link.dropdown-toggle:hover::after {
        left: 0px;
        opacity: 1;
    }

    .navbar-nav .nav-link {
        font-weight: 500;
        font-size: 1rem;
    }

    .navbar.navbar-custom .navbar-nav .nav-link.active {
        background-color: hsl(0deg 0% 0% / 1%);
        border-bottom: 2px solid hsl(220deg 40% 64% / 80%);
        margin-bottom: -2px;
    }

    .letter-spacing-condensed{
      letter-spacing: -0.5px;
    }

    /* Right Side */
    .fixed-right-menu .navbar-nav>li {
        width: max-content;
        min-width: 100%;
        overflow: hidden;
    }
    /* Nav */


    /* nav-pills */
        .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
        color: currentColor;
        background-color: hsl(87.86deg 38.89% 85.88%);
    }
    /* nav-pills */


    /* Icons */
    ion-icon {
        font-size: 1.2rem !important;
        transition: all 1s;
    }

    .navbar ion-icon {
        margin: auto 0.3rem -5px 0.35rem;
    }

    .settings-btn{
        padding: 8px 10px 5px 13px !important;
        background-color: hsl(0deg 0% 100% / 75%);
        border-color: hsl(0deg 0% 100% / 75%);
        color:hsl(0deg 0% 0% / 60%);
    }

    .settings-btn ion-icon {
        font-size: 1.31rem !important
    }

    .theme-mode-btn {
        padding: 7px 10px 5px 12px !important;
    }

    /*.theme-mode-btn ion-icon { / Hide it /
        transition: all 1s;
        font-size: 1.4rem !important;
    }

    #theme-mode-btn-lg{ / Hide it /
        zoom: 0.75;
    }*/
    /* Icons */


    /* Cards */
    .card {
        overflow: hidden;
        box-shadow: 0px 1px 16px 0px hsl(0deg 0% 0% / 6%);
        border-radius: 0.35rem;
        border: 1px solid rgb(223 200 166 / 20%);
        border-width: thin;
        /*cursor: default;*/
    }

    .plyr {
        opacity: 0.975;
        background-color: #ffffff;
        border-radius: 7px;
        box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 8%);
        /* box-shadow: -3px 6px 16px 0px hsl(0deg 0% 0% / 6%) !important; */
    }

    .media_details .plyr {
        position: absolute;
        top: auto;
        right: -10px;
        bottom: 0px;
        left: -10px;
        margin: auto;
        width: calc(100% - 0px);
        max-width: 100%;
        opacity: 0.975;
        background-color: #f1f3f4;
        border-radius: 0px;
        box-shadow: 0px -20px 100px 10px rgb(0 0 0 / 50%);
    }

    .media_details .plyr.plyr--audio .plyr__controls{
        /* opacity: 0.9; */
        /* background-color: #f1f3f4; */
    }

    .plyr--full-ui input[type=range]{
        color:hsl(39.29deg 15.08% 22.71%) !important;
    }

    .plyr--audio .plyr__control.plyr__tab-focus, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true] ,
    .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{
        background: hsl(39.29deg 15.08% 22.71%) !important;
    }

    .floting-media {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 10px;
        min-width: 0;
        max-width: 40vw;
        margin: auto;
        width: 0;
        z-index: -1;
        overflow: visible;
        opacity: 0;
    }

    .floting-media.shown {
        width: calc(100% - 30px);
        min-width: 290px;
        max-width: 600px;
        z-index: 9;
        opacity: 1;
    }

    .floting-media > span{
      border-top-right-radius: 0.333rem;
      border-top-left-radius: 0.333rem;
      background: hsl(87.86deg 38.89% 85.88%);
      font-weight: 500;
    };

    .card-title{
    	font-size: 1.24rem !important;
    	/*color: hsl(220deg 12% 44%);*/
    }

    h4.card-title{
    	font-size: 1.24rem !important;
    }

    .shadow {
        /*box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 8%) !important;*/
        box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 8%) !important;
    }
    .shadow-light {
        box-shadow: -3px 6px 16px 0px hsl(0deg 0% 0% / 6%) !important;
    }
    /* Cards */


    /* Main Slider */
    .carousel-inner {
        /*overflow: visible;  to make shadow visible */
    }

    .carousel-card {
        /*max-height: 250px;*/
    }

    .carousel-card .img-thumbi {
        width: auto;
        height: 100%;
        min-height: 246px;
    }

    .carousel-title {
        font-size: 1.6rem;
    }

    .carousel-control-prev{
        top: auto !important;
        left: 18px !important;
        bottom: 15px  !important;
    }

    .carousel-control-next {
        top: auto !important;
        right: auto !important;
        left: 48px !important;
        bottom: 15px !important;
    }

    .carousel-control-prev-icon, .carousel-control-next-icon {
        background-color: transparent !important;
    }

    .carousel-control-prev-icon, .carousel-control-next-icon {
        filter: invert(1);
    }

          .carousel-control-next, .carousel-control-prev {
        width: unset;
    }

    .carousel-control-prev-icon, .carousel-control-next-icon{
        background-color: #022979;
    }

            .carousel-control-next {
            right: -8%;
        }

        .carousel-control-prev {
            left: -8%;
        }
    /* Main Slider */



    /* Random Youtubes */
    .youtube-overlay-title{
        z-index: 2;
        background-color: #fff;
        border-top-right-radius: 0.25rem;
        border-top-left-radius: 0.25rem;
    }

    .truncate {
        width: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .youtube-iframe{
        max-height: 183px; /*253px*/
        position: relative;
        top: -55px;
        z-index: 1;
        transition: max-height ease-in-out 0.75s ;
        border-bottom-right-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
    }

    .youtube-iframe iframe{
        height: 280px; /*310px 420px; 196px;*/
        border-bottom-right-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
    }

    .youtube-iframe video {
        aspect-ratio: auto;
    }

    /*.youtube-iframe .bottom-video-bg {
        position: absolute;
        bottom: -55px;
        width: 100%;
        height: 18px;
        background-color: #0f0c09;
        z-index: -1;
    }*/
    /* Random Youtubes */


    /* Footer */
    .footer{
        background: linear-gradient(to bottom, rgb(248 246 242 / 50%), rgb(254 252 250));
    }
    /* Footer */



    /* Meta */
    .compact-view .meta, .article-meta{
      font-size: 0.9rem;
    }

    ul.article_cat_list li+li:before {
        content: none;
    }

    ul.article_cat_list li:not(:last-child):after{
        content: "\00bb"; /*"/\00a0";*/
    }

    table ul.article_cat_list li:not(:last-child):after {
        margin: auto -14px auto 17px;
    }
    /* Meta */


    /* Prayer Times */
    .prayer-times {
        margin-top: 1.33rem;
        margin-bottom: auto;
    }

    .prayer-times p {
        padding: 0.5rem 0 0;
        text-align: center;
        margin: 0;
    }

    .prayer-times .page-link {
        color: inherit;
        font-size: 0.9rem;
        min-width: 156.5px; /*113.7656px; 139.7656px;*/
        border: none;
    }

    /*.prayer-times li:first-child .page-link {
        border-left: 1px solid #dee2e6;
    }*/

    .prayer-times .prayer-item:first-child .page-link {
      /* border-left: 1px solid rgba(255,255,255,0.5); */
      margin-left: 1px;
      background-color: hsl(87.86deg 38.89% 85.88%);
      max-width: 150px;/*139.5px*/
      min-height: 100%;
    }

    .prayer-times .prayer-item:first-child .page-link > p{
      font-size: 0.8rem;
    }

    .prayer-item.active .page-link {
        /*background-color: hsl(210deg 14% 98%);*/
        background-color: hsl(88deg 39% 86% / 48%);
        /*background-color: hsl(41deg 100% 100% / 100%);*/
    }

    .prayer-times li.d-none.prayer-item.d-lg-block.active {
        display: block !important;
    }

    .prayer-item ion-icon {
        stroke: hsl(210deg 11% 15%);
        fill: #fff;
    }
    /* Prayer Times */

    /* Tables */

    table {
        border-collapse: collapse;
        /*margin: 0.75rem -2px 0.75rem 0;*/
        margin: 0 !important;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
        border-radius: 0.25rem;
    }

    table thead tr, .article table tr:first-of-type:not(:only-child){
        background-color: #60949d; /*#6c757d;*/
        color: #ffffff;
        text-align: left;
    }

    table th, table td {
        padding: 12px 15px;
    }

    table tbody tr {
        border-bottom: 1px solid hsl(0deg 0% 92%);
    }

    table tbody tr:nth-of-type(even) {
        background-color: #f7f7f7;
    }

    table tbody tr:nth-of-type(odd) {
        background-color: #ffffff; /*#fefbf6*/
    }

    table tbody tr:last-of-type {
        border-bottom: 2px solid #60949d;/*#6c757d;*/
    }

    table tbody tr:nth-of-type(odd), table tbody tr:nth-of-type(even), table tbody tr.oddActive, table tbody tr.evenActive {
        transition: background 0.25s;
    }

     table tbody tr:nth-of-type(odd):hover,  table tbody tr.oddActive:nth-of-type(odd) {
        /* transition: background 0.25s; */
        background: -moz-linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 99.7%, rgba(87,87,87,1) 99.7%, rgba(87,87,87,1) 99.7%);
        background: -webkit-linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 99.7%, rgba(87,87,87,1) 99.7%, rgba(87,87,87,1) 99.7%);
        background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 99.7%, rgba(87,87,87,1) 99.7%, rgba(87,87,87,1) 99.7%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#575757",GradientType=1);
    }

     table tbody tr:nth-of-type(even):hover,  table tbody tr.evenActive:nth-of-type(even) {
        background: rgb(247,247,247);
        background: -moz-linear-gradient(90deg, rgba(247,247,247,1) 0%, rgba(247,247,247,1) 99.7%, rgba(87,87,87,1) 99.7%, rgba(87,87,87,1) 99.7%);
        background: -webkit-linear-gradient(90deg, rgba(247,247,247,1) 0%, rgba(247,247,247,1) 99.7%, rgba(87,87,87,1) 99.7%, rgba(87,87,87,1) 99.7%);
        background: linear-gradient(90deg, rgba(247,247,247,1) 0%, rgba(247,247,247,1) 99.7%, rgba(87,87,87,1) 99.7%, rgba(87,87,87,1) 99.7%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f7f7f7",endColorstr="#575757",GradientType=1);
    }

    .table-responsive{
        border-radius: 0.25rem;
        box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 8%);
    }

    table td a {
        display: inline-block;
        text-wrap: balance;
        margin: -0.75rem 0;
        width: 100%;
        padding: 12px 0;
    }

    .article table {
      zoom: 0.8125;
      margin: auto 6rem !important;
      font-weight: 500;
      text-align: center !important;
      text-align-last: center;
    }
    /* Tables */

.article hr {
    border-top: 1px solid rgb(0 0 0 / 15%);
    width: 35%;
    min-width: 238px;
}

    /* forms */
    .input-group input.rounded-0 {
        border-radius: 0!important;
    }

    .search-form .btn.rounded-left{
      border-top-right-radius: 0!important;
      border-bottom-right-radius: 0!important;
    }

    .search-form input.form-control, #dialog_search{
      border-top-left-radius: 0!important;
      border-bottom-left-radius: 0!important;
    }

    #askForm input:not(.is-invalid):not(.is-valid), #askForm textarea:not(.is-invalid):not(.is-valid), .search-form input:not(.is-invalid):not(.is-valid) {
        border: 0px solid rgb(0 0 0 / 1.5%);
    }

    #askForm input, #askForm textarea, .search-form input {
        padding: 0.85rem 1rem 0.65rem;
        box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 8%) !important;
    }

    #askForm button {
        padding: 0.85rem 1rem 0.576rem;
        box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 8%) !important;
    }
    /* forms */



    /* Books */
    /*.book-library .img-anchor {
        display: inline-block;
        height: auto;
        position: absolute;
        margin: auto;
        left: 10%;
    }*/

    .book-library .card-img-top {
        /* max-width: 106px; */
        height: auto;
        width: 100%;
        border-radius: 0.15rem;
    }

    .article iframe {
      height: calc(100vh - 40px - 160px);
      max-height: 934.36875px;
      /* margin-top: 20px; */
      /* width: calc(100vw - 717px); */
      width: calc((100vh - 40px - 60px) / 1.38425);
      min-width: 100% !important;
      max-width: 100% !important;
    }
    /* Books */

    /* Calendar */

    .fullscreen-wrapper .back-wrapper {
        position: fixed;
        z-index: 9998;
        opacity: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
    .fullscreen-wrapper {
        position: absolute;
        z-index: -1;
        opacity: 0;
        top: calc(4vw + 8vh);
        width: calc(100vw - 20px);
        max-width: calc(100vh / 1.505);
        left: 2px;
        right: 0;
        margin: auto !important;
    }
    .fullscreen-wrapper.shown {
        z-index: 9999;
        opacity: 1;
    }
    .fullscreen-wrapper.shown.wide {
        max-width: calc(100vh);
    }
    .compact-view .card.fullscreen-wrapper {
        box-shadow: -2px 0 0 0 rgb(255 255 255), 0 0 6rem -10px rgb(91 122 145 / 78%), 0 0 0 calc(50vw + 50vh) rgb(255 255 255) !important;
    }
    .transition-05 {
        transition: all 0.75s ease-out;
    }
    .fullscreenControls{
        position: absolute;
        z-index: -1;
        top: 20px;
        left: 24px;
        margin: auto;
    }
    .btn-group .btn.cal_fullscreen_exit, .btn-group .btn.cal_zoom {
        width: 35px;
        height: 32px;
        padding: 0.4rem !important;
        background-color: hsl(208deg 7% 46% / 92%);
        border-color: hsl(208deg 7% 46% / 25%) !important;
    }
    .fullscreenControls.shown {
        z-index: 10000;
        opacity: 1;
    }
    .sans {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-weight: 500;
    }
    .meta [type="button"] {
        width: calc(33.333% - 5px);
        font-size: 0.8rem;
        background-color: #ffffff !important;
        color: hsl(221deg 25% 25%);
    }
    .btn-sm ion-icon {
        font-size: 1rem !important;
    }
    .old-cal-border-fix {
        box-shadow: inset 0 0 0px calc(0.5vw + 0.6vh) #ffffff !important;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    /* Calendar */
/* Modified Theme */






@media (min-width: 992px) {
	.navbar-nav {
		display: block;
		padding-right: 0;
	}
	.fixed-right-menu .navbar-nav {
		flex-wrap: wrap;
	}
/* Modified Theme */
    /* Nav */
    .navbar-custom {
        padding: 0 1rem;
    }

    .navbar-brand .logo-image {
        width: 100%;
        height: auto;
        padding: 0.5rem;
    }

    .navbar-container {
        max-width: fit-content;
        /*padding-right: 0;*/
        /*padding-left: 0;*/
        padding: 0.35rem 0;
    }

    .navbar.navbar-custom .navbar-nav .nav-link {
        padding: 0.9rem 0.55rem 0.5rem; /*1.25rem 0.55rem 0.85rem;*/
        border-color: #b5872c;
    }
    .fixed-right-menu .navbar.navbar-custom .navbar-nav .nav-link {
        /* padding: 0.75rem 0.55rem 0.6rem; */
        /* padding: 0.75rem 0.55rem 0.3rem 0.3rem; */
        padding: 0.75rem 0rem 0.3rem .3rem; /* 0.75rem 0.55rem 0.3rem .3rem; */
        border-radius: 0.25rem;
        /* width: fit-content; */
        margin-left: 0px;
    }


    .navbar.navbar-custom .navbar-nav .nav-link:hover {
        background-color: hsl(0deg 0% 0% / 2.5%);
        border-bottom: 2px solid hsl(40deg 61% 44% / 90%); /*hsl(220deg 40% 64% / 90%);*/
        margin-bottom: -2px;
        transition-property: background-color, border-color;
        /*transition-duration: 0.25s;*/
    }

    .navbar.navbar-custom .navbar.navbar-custom .navbar-nav .nav-link:hover {
        border-right: 2px solid hsl(40deg 61% 44% / 75%);
        margin-right: -2px;
    }

    /*.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {*/
    /*    color: rgba(0,0,0,.9);*/
    /*    background-color: hsl(0deg 0% 0% / 1%);*/
    /*    border-bottom: 2px solid hsl(220deg 40% 64% / 80%);*/
    /*    margin-bottom: -2px;*/
    /*}*/
    /* Nav */
/* Modified Theme */

    /*#settings.shown {
        top: 120px;
    }*/

    #settings {
        /*top: 120px;*/
        right: auto;
        left:  -3px;
        width: min-content;
        zoom:1;
        z-index:0; /*1021*/
    }

    #settings.shown {
        top: 120px;
        right: auto;
        left:  -3px;
        width: min-content;
        zoom:1;
        z-index:1022; /*1021*/
    }

    /*#settings.shown {
        top: 60px;
    }*/

    #settings button {
        margin: 0.25rem auto !important;
        width:100%;
    }

    .settings-btn {
        padding: 10px 10.5px 5px 11.5px !important;
    }


    .prayer-times .page-link {
        min-width: 114px; /*113.7656px;*/
    }

    .mt-md-n5{
      margin-top: -3rem!important;
    }
}

@media (min-width: 1415px) {
    #settings.shown {
        top: 62px;
    }
}

.container.compact-view {
    margin-top: 1.5rem;
}

/* .section-header {
    background: url(https://alhodacenter.com/assets/themes/default/img/ce4.png) scroll no-repeat, linear-gradient(to bottom right, #b4ccff3d, hsl(220deg 55% 14%));
    color: #fff;
    background-size: 100%;
    background-blend-mode: lighten;
    background-color: #2d49a529;
} */

.section-header {
    background: url(https://alhodacenter.com/assets/themes/default/img/ce4.png) scroll no-repeat, linear-gradient(to bottom right, hsl(106deg 80% 94% / 58%), hsl(87.53deg 44.04% 62.16%));
    background-blend-mode: darken;
    background-color: hsl(36deg 47% 37% / 5%);
}

/*.section-questions .section-header {
    background: url(https://alhodacenter.com/assets/themes/default/img/ce4.png) scroll no-repeat, linear-gradient(to bottom right, hsl(201deg 100% 87% / 24%), hsl(200deg 60% 26% /90%));
    background-blend-mode: lighten;
    background: #2d49a529;
}*/

.section-articles .section-header {

    background: url(https://alhodacenter.com/assets/themes/default/img/ce4.png) scroll no-repeat, linear-gradient(to bottom right, #ade7ff3d, #00333a);
    background-blend-mode: overlay;
    background-color: rgb(255 227 185 / 16%);

}

.section-media  .section-header {
    background: url(https://alhodacenter.com/assets/themes/default/img/ce4.png) scroll no-repeat, linear-gradient(to bottom right, hsl(189deg 57% 97% / 0%), hsl(189deg 25% 65%), hsl(189deg 25% 39%));
    background-blend-mode: normal;
    background-color: rgb(255 255 255 / 100%);
}

.section-header {
    color: #fff;
    background-size: 130% !important;
    background-position: center right !important;
    border: none !important;
}

.section-header h1 {
  color: #ffffff;
  text-shadow: 2px 1px 5px hsl(77.54deg 100% 22.16%), 0px -4px 10px rgb(255 255 255 / 30%);
}

.section-header *:not(h1) {
  color: #ffffff;
  font-weight: 500;
  /* text-shadow: 2px 1px 5px hsl(41deg 55% 10% / 81%), 0px -4px 10px rgb(255 255 255 / 30%); */
  text-shadow: 2px 1px 5px hsl(77.54deg 100% 22.16%), 0px -4px 10px rgb(255 255 255 / 30%);
}

.section-media .section-header h1 {
    color: #ffffff;
    text-shadow: 2px 1px 5px hsl(201deg 100% 7% / 81%), 0px -4px 10px rgb(255 255 255 / 20%);
}


.section-media .section-header *:not(h1) {
  color: #ffffff;
  font-weight: 500;
  text-shadow: 2px 1px 5px hsl(201deg 100% 7% / 81%);/*, 0px -4px 10px rgb(255 255 255 / 20%);*/
}

/*
.section-header h1 {
    color: #ffffff;
    text-shadow: 2px 1px 5px rgb(12 50 51 / 81%), 0px -4px 10px rgb(255 255 255 / 30%);
}

.section-header span, .section-header a {
    color: #ffffff;
    font-weight: 500;
    text-shadow: 2px 1px 5px rgb(12 50 51 / 81%), 0px -4px 10px rgb(255 255 255 / 30%);
}
*/

.section-header .card-img-top {
    box-shadow: 0 0 8px 0px rgb(11 50 50 / 50%) !important;
}

@media (min-width: 600px) {
	.div-line-space{
		height: 50px;
	}

  /* .section-header {
      background-size: 250%;
      background-size: cover;
      background-position: top;
  } */

  .compact-view .meta {
    padding-top: 0.16rem;
  }
  /*.compact-view span, .compact-view a {
    font-weight: 500;
  }
  .compact-view .article_cat_list a {
    filter: invert(1);
    color: #fff;
    font-weight: 500;
  }
  .compact-view .meta .oi {
    color: #999;
    line-height: 1.5;
  }*/

	#btnContainer {
      float: left;
      margin: -55px 0 0 0;
  }
  .compact-view #btnContainer {
      margin-top: 47px;
  }
}

.compact-view .content-view #btnContainer {
    margin: auto !important;
}

@media (max-width: 768px) {

  .row.my-3.content-view .col-12 > br:only-child{
    display: none;
  }

	.card {
		flex: 0 1 auto;
	}
	/*.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {*/
 /*   margin-right: 1.5rem;*/
 /*   }*/

 .ayah-content-action-btn-wrapper {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0;
  }
}

@media (min-width: 768px) {
	.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
    margin-right: 1.2rem; /*1.5rem;*/
    }

  .pull-md-left {
      float: left;
  }

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

  .btn-collapse{
    overflow: hidden;
    width: 30px;
    transition: width 0.3s ease-in-out;
    text-overflow: ellipsis;
  }

  .btn-collapse:hover{
    width: 120px;
  }
  .meta [type="button"] {
      width: 100%;
      font-size: 1rem;
  }
  .old-cal-border-fix {
      box-shadow: inset 0 0 0px calc(0.3vw + 0.6vh) #ffffff !important;
  }
  .fullscreen-wrapper {
      top: calc(1.5vh);
  }
}


/*@media (min-width: 428px) { / Hide it /

    .theme-mode-btn {
        margin: auto auto auto 1rem;
    }
}*/

@media (max-width: 375px) {

    .navbar-light .navbar-brand {
        max-width: 188px;
    }

    .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
        margin-right: 0.5rem;
    }

    /*#settings.shown {
        zoom: 0.9;
    }*/

    /* .prayer-times .page-link {
        min-width: 113.7656px;
    } */
}

@media (max-width: 320px) {
    .navbar-custom {
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar-light .navbar-brand {
        max-width: 162px !important;
        margin: 0 10px 0 0 !important;
    }
    .navbar-light .navbar-brand img {
        /*width: -webkit-fill-available;*/
        /*height: 25px;*/
    }

    #settings.shown {
        zoom: 0.9;
        top: 74px;
    }
}



@media (max-width: 430px) {
    .acme-news-ticker-pause {
        display: none !important;
    }

    .acme-news-ticker-label {
        /*position: absolute!important;*/
        top: 0 !important;
        z-index: 1;
    }

    .navbar-light .navbar-brand img {
        margin-bottom: -2px !important;
    }

    /*#settings.shown {
        zoom: 0.9;
    }*/
}



@media (max-width: 1199px) {

  .prayer-times li.d-none.prayer-item.d-lg-block.active .page-link {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
  }
}


@media (max-width: 1242px) {
    /*#settings-btn-sm {
        padding: 8px 10px 6px 13px!important;
        zoom:1;
    }*/
    #settings-btn-sm ion{
        font-size: 1.25rem;
    }
    /*.prayer-times .page-link {
        min-width: calc(40vw); / - 14px/
    }*/
    /*.prayer-times .prayer-item:first-child .page-link {
        border-left: 1px solid rgba(255,255,255,0.5);
        margin-left: 1px;
        background-color: hsl(87.86deg 38.89% 85.88%);
    }*/
}




@media (min-width: 1200px) {
    /*#settings-btn-lg {
        zoom: 0.9;
        position: absolute;
        top: 160px;
        right: 210px;
        z-index: 1;
    }*/
    #settings-btn-lg {
        zoom: 0.9;
        position: absolute;
        top: 10px;
        right: 250px;
        z-index: 1;
        height: 40px;
        width: 50.5px;
    }

    #settings {
        top: 55px; /*145px;*/
        right: 90px;
        left: auto;
        width: min-content;
        zoom: 1;
    }

    #settings.shown {
        top: 55px;
        right: 225px;
        left: auto;
        width: min-content;
        zoom: 1;
        z-index:1019; /*1021*/
    }

    /*#settings.shown {
        top: 145px;
        right: 260px;
        left: auto;
        width: min-content;
        zoom: 1;
    }/*

    /*#settings.shown {
        margin-top:-5px;
        right: auto;
        left:  -3px;
        width: min-content;
        zoom:1;
    }*/

    #settings button {
        margin: 0.25rem auto !important;
        width:100%;
    }

    .prayer-times .page-link {
        min-width: 9vw; /*112.5px*/
    }
    .acme-news-ticker-label {
        min-width:137px;
    }
}

@media (device-width: 1366px) {
    .prayer-times .page-link {
        min-width: 132px;
    }
}

@media (min-width: 1440px) {
    /*#settings {
        right: auto;
        left:  calc((50%) - 690px);
    }

    #settings {
        right: auto;
        left:  calc((50%) - 690px);
    }*/

    .prayer-times .page-link {
        min-width: 138.32812px; /*136.5px;*/ /*139.5px*/
    }
}


.search-icon-placeholder {
    position: absolute;
    top: 12px;
    right: 16px;
    color: rgb(73 80 87 / 75%);
    font-size: 1.4rem !important;
}

.mic-icon-placeholder {
    font-size: 1.5rem !important;
    margin-bottom: -0.5rem;
}

.card-sura{
  margin: auto auto 1rem;
}





/* Baheth CSS */
/* ----------------------------- */
/* Baheth.php */
/* ----------------------------- */
.ion-close {
    position: absolute;
    left: -15px;
    top: -10px;
    background-color: #fff;
    border-radius: 5rem;
    padding: 0.2175rem 0.2rem 0.2rem 0.2175rem;
    box-shadow: 0 0 5px #0003;
    cursor: pointer;
    opacity: 0;
    zoom:0;
    transition: all 0.3s;
}

.ion-close.shown {
    opacity: 0.9;
    zoom:1;
}

.cancel-filter {
    position: absolute;
    left: 10px;
    margin: auto;
    top: 0;
    bottom: 0;
    color: #aaa;
    cursor: pointer;
    /* background-color: #f3f3f3; */
    padding: 3px;
    /* border-radius: 1rem; */
    z-index: 9;
}

.cancel-filter:hover {
    background-color: #f3f3f3;
    border-radius: 1rem;
}


.section-baheth-search .surahSearchIcon {
    border: none !important;
}

.section-baheth-search input[name="surahSearch"] {
    /* border-color: #e9ecef !important; */
    /* border: none !important; */
    padding: 0.7rem 0.7rem 0.5rem;
}

.section-baheth-search select[name="reciter"] {
    /* border-color: #e9ecef !important; */
    /* border: none !important; */
    padding-top: 0.5rem;
    min-height: 45px;
}

.btn-green {
    /* background-color: #a1c478; */
    background-color: #b1cb91;
    color: #FFF;
}

.btn.btn-green.active, .btn.btn-outline-green.active {
    background-color: hsl(87 36% 53% / 1);
    color: #FFF;
}

/* ----------------------------- */
/* Read.php */
/* ----------------------------- */

  .mb-n3 {
      margin-bottom: -0.4rem;
  }

  input:focus, input.form-control:focus {
      outline:none !important;
      outline-width: 0 !important;
      box-shadow: none;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
  }

  .shadow-0, #askForm input:focus, #askForm textarea:focus, .search-form input.shadow-0, .search-form input:focus{
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
  }

  /* Table */
  .surah-list-item.ng-enter,
  .surah-list-item.ng-leave,
  .surah-list-item.ng-move {
    transition: 0.25s linear all;
  }

  .surah-list-item.ng-enter,
  .surah-list-item.ng-move {
    height: 0;
    opacity: 0;
    overflow: hidden;
  }

  .surah-list-item.ng-enter.ng-enter-active,
  .surah-list-item.ng-move.ng-move-active {
    height: auto;
    opacity: 1;
  }

  .surah-list-item.ng-leave {
    opacity: 1;
    overflow: hidden;
  }

  .surah-list-item.ng-leave.ng-leave-active {
    height: 0;
    opacity: 0;
    padding-bottom: 0;
    padding-top: 0;
  }



  /* search-dialog */
  #main_search{
    cursor: pointer;
    padding: 0.95rem 1rem 0.75rem;
}

.section-baheth-read .btn-search-submit {
    border: 1px solid rgb(233 236 239);
    border-right: none;
}

  .bg-blur {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    /* z-index: 1; */
    z-index: -2;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    background-color: rgb(211 202 181 / 70%);
    /* cursor: alias; */
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0, 0, 1, 2.5) !important;
  }

  .bg-blur.show {
    opacity: 1;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
  }

  .search-dialog {
    position: fixed;
    min-width: 300px;
    max-width: 800px;
    /* width: -webkit-fill-available; */
    /* top: 50px; */
    /* max-height: 100%; */
    /* z-index: 2; */
    width: calc(100% - 20px);
    top: 30px;
    max-height: calc(100% - 185px);
    height: 490px;
    z-index: -1;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    min-height: 450px; /*fit-content;*/
    padding: 1.5rem;
    border-radius: 0.75rem;
    background-color: hsl(89.13deg 39.18% 86%); /* hsl(40 50% 89% / 1);*/
    opacity: 0;
    transition: all 0.5s cubic-bezier(0, 0, 1, 2.5) !important;
  }

  .search-dialog.show {
    opacity: 1;
    z-index: 10000;
  }

  .results, .speechRecognitionLoader {
    width: calc(100% + 22px);
    /* max-height: 490px; */
    max-height: 290px;
    overflow: auto;
    /* box-shadow: 0px -16px 10px -10px inset rgb(0 0 0 / 20%); */
    position: relative;
    padding-left: 1.4rem;
    right: 0px;
    left: -20px
  }

  .speechRecognitionLoader {
  	display: flex;
    flex-direction: column;
  	align-items: center;
  	justify-content: center;
  	height: 100%;
  	display: none;
  }

  #wave {
  	height: 70px;
  	width: 70px;
  	fill: hsl(36deg 47% 37% / 60%);
  }

/*  */

#Line_1 {
	 animation: pulse 0.8333333333s infinite;
	 animation-delay: 0.15s;
}
 #Line_2 {
	 animation: pulse 0.6666666667s infinite;
	 animation-delay: 0.3s;
}
 #Line_3 {
	 animation: pulse 1.2666666667s infinite;
	 animation-delay: 0.55s;
}
 #Line_4 {
	 animation: pulse 1.3333333333s infinite;
	 animation-delay: 0.6s;
}
 #Line_5 {
	 animation: pulse 0.6666666667s infinite;
	 animation-delay: 0.75s;
}
 #Line_6 {
	 animation: pulse 0.3333333333s infinite;
	 animation-delay: 0.9s;
}
 #Line_7 {
	 animation: pulse 0.6666666667s infinite;
	 animation-delay: 1.05s;
}
 #Line_8 {
	 animation: pulse 0.3333333333s infinite;
	 animation-delay: 1.2s;
}
 #Line_9 {
	 animation: pulse 0.3333333333s infinite;
	 animation-delay: 1.35s;
}
 @keyframes pulse {
	 0% {
		 transform: scaleY(1);
		 transform-origin: 50% 50%;
	}
	 50% {
		 transform: scaleY(0.5);
		 transform-origin: 50% 50%;
	}
	 100% {
		 transform: scaleY(1);
		 transform-origin: 50% 50%;
	}
}




  /*  */

  .search-dialog .list-group-item {
    background-color: transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    text-align: justify;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

  .search-dialog .list-group-item.visited-item {
    padding-left: 3.3rem;
    text-align: justify;
  }

  .search-dialog .list-group-item:hover, .search-dialog .list-group-item.more {
    background-color: rgba(0,0,0,0.05);
  }

  .clear-btn {
    background-color: rgb(209 189 147 / 60%);
    border-radius: .25rem;
    position: absolute;
    zoom: 1.3;
    left: 10px;
    top: 0;
    z-index: 9;
    opacity: 0.5;
    transition: opacity 0.25s ease-in-out;
    bottom: 0;
    margin: auto;
  }

  .clear-btn:hover {
    opacity: 1;
  }

  .dialogSearch-clear-btn {
    /* background-color: rgb(209 189 147 / 60%); */
    border-radius: .25rem;
    position: absolute;
    zoom: 1.3;
    left: 10px;
    top: 0;
    bottom: 0;
    z-index: 9;
    margin: auto;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.25s ease-in-out;
  }

  .dialogSearch-clear-btn:hover {
    opacity: 1;
  }

  .dialogSearch-close-btn {
    border-radius: 5rem;
    position: absolute;
    zoom: 2.5;
    top: -25px;
    right: 0;
    left: 0;
    /* bottom: auto; */
    z-index: 10;
    margin: auto;
    cursor: pointer;
    opacity: 0.25;
    transition: opacity 0.5s ease-in-out;
  }

  .dialogSearch-close-btn.show{
    opacity: 0.25;
  }

  .dialogSearch-close-btn:hover {
    opacity: 0.75;
  }


  .results-type-filter{
    display: flex;
  }


/* Margin Right */
.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 1rem;
}

.mr-4 {
  margin-right: 1.5rem;
}

.mr-5 {
  margin-right: 3rem;
}


/* Margin left */
.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 1rem;
}

.ml-4 {
  margin-left: 1.5rem;
}

.ml-5 {
  margin-left: 3rem;
}


/* Negative Margin Right */
.mr-n1 {
  margin-right: -0.25rem;
}

.mr-n2 {
  margin-right: -0.5rem;
}

.mr-n3 {
  margin-right: -1rem;
}

.mr-n4 {
  margin-right: -1.5rem;
}

.mr-n5 {
  margin-right: -3rem;
}


/* Negative Margin left */
.ml-n1 {
  margin-left: -0.25rem;
}

.ml-n2 {
  margin-left: -0.5rem;
}

.ml-n3 {
  margin-left: -1rem;
}

.ml-n4 {
  margin-left: -1.5rem;
}

.ml-n5 {
  margin-left: -3rem;
}

.list-style-none{
  list-style: none;
}

.modal-header .close{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  margin: -1rem auto -1rem -0.75rem;
}

.circle {
    display: inline-block;
    background-color: springgreen;
    border-radius: 1rem;
    width: 15px;
    height: 15px;
    vertical-align: middle;
    margin: auto -0.1rem auto 0.5rem;
}

.section-baheth-read .modal-lg {
    max-width: 843px;
}

#tajweedRulesModal .modal-dialog.modal-dialog-centered.modal-lg {
    max-width: 710px;
}

.section-baheth-read .breadcrumb {
    background-color: transparent;
}

.tab-pane.fade.show.active {
    transition: all 1s ease-in-out !important;
}

#bahethBookContentModal .modal-body{
  min-height: 400px;
}

#bahethBookContentModal a.dropdown-item {
	display: block;
}

.section-baheth-read .modal .oi {
    font-size: 0.8rem;
}

.section-baheth-read .modal .btn-warning .oi {
    color: #6c5e49;
}


.section-baheth-read .modal surah {
    text-align: center;
    display: block;
}

.fade-in {
    opacity: 1;
    transition: opacity .25s linear;
}

.fade-out {
    opacity: 0;
    transition: opacity .25s linear;
}

#html-spinner{
width:40px;
height:40px;
border:4px solid hsl(40deg 80% 78% / 25%);
border-top:4px solid hsl(40deg 80% 78% / 100%);
border-radius:50%;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1.2s;
-webkit-animation-name: rotate;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;

-moz-transition-property: -moz-transform;
-moz-animation-name: rotate;
-moz-animation-duration: 1.2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;

transition-property: transform;
animation-name: rotate;
animation-duration: .75s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

#html-spinner.dark{
  border: 4px solid hsl(45 45% 60% / 0.45);
  border-top: 4px solid hsl(45 45% 60% / 1);
}

@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}

@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

#html-spinner-container{width: 100%;max-width: 100%;margin:1em auto;position:relative;height: 200px;}
.section-baheth-search #html-spinner-container{height: 70px;}


/* spinner positioning */
#html-spinner{position:absolute;top: 9px;bottom: 0;left: 0;right: 0;margin: auto;}


.blockquote {
    padding-right: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
}

@media (min-width: 320px) {
  .mobile-surah-search-input{
    width: 27px !important;
  }
}

@media (min-width: 375px) {
  .mobile-surah-search-input{
    width: 37px !important;
  }
}

@media (min-width: 412px) {
  .mobile-surah-search-input{
    width: 45px !important;
  }
}

@media (min-width: 430px) {
  .mobile-surah-search-input {
      width: 10.6vw !important;
      max-width: 245px;
  }
}

@media (min-width: 576px) {
  .mobile-surah-search-input {
      max-width: 215px;
  }
}


.surah-scroll-wrapper {
    position: relative;
    border-left: 1px solid #f1f1f1; /*eee;*/
    padding: 0.5rem 3rem 0 0px;
    max-height: 200px;
    margin: 0.75rem -2.5rem 0 -1rem;
    overflow: overlay;
    z-index: 1;
}

/*.surah-scroll-wrapper::before {
    content: " ";
    display: block;
    position: absolute;
    width: 16px;
    height: 200px;
    background-color: #FFFFFF;
    top:12px;
    left: 0px;
    / * box-shadow: -1px 0px 0px hsl(220deg 13% 15%); * /
}*/

.surah-scroll-wrapper li{
  max-width: 90%; /*108.58px;*/
}

#quickNavigationModal .surah-scroll-wrapper {
    border-left: none
}

.ayah-scroll-wrapper {
    position: relative;
    padding: 0.5rem 0.5rem 0 1.3rem;
    max-height: 200px;
    margin: 0.75rem 0rem 0 0rem;
    overflow: overlay;
    z-index: 9999999999;
    /* max-width: 185.41px; */
}

#quickNavigationModal .ayah-scroll-wrapper {
    padding: 0.5rem 0.5rem 0 0.5rem
}

.section-baheth-read .border-right.quick-nav-divider{
  border-color: rgb(241 241 241 / 100%) !important
}

.highlighted {
    background-color: burlywood;
    border-radius: 0.7rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.btn-surah-info{
    width: 32px;
    height: 32px;
    color: hsl(210 6% 58% / 1);
}

.btn-outline-secondary:hover {
  opacity: 1 !important;
}

iconify-icon.unselect{
  position: absolute;
  opacity: 0.6;
  font-size: 1.1rem;
  top: 9px;
  left: 3px;
}

iconify-icon {
    padding-left: .25rem;
    margin-bottom: -0.4rem;
}

.dropdown-toggle.sr-0 {
  padding-left: 4px !important;
}

.sr-0.dropdown-toggle::after {
  display: none !important;
}

.border-gray{
  border-color: lightgray;
}

.goToTop{
  display: block;
  width: 40px;
  height: 40px;
  position: fixed;
  bottom: 18px;
  right: 18px;
  background-color: #fff;
  z-index: 1045;
  text-align: center;
  padding-top: 0.25rem;
  box-shadow: 0 0 1rem rgb(0 0 0 / 25%) !important;
  cursor: pointer;
  color: hsl(87.21deg 35.83% 52.94%);
}








/* ------------------------- perfect-scrollbar ------------------------- */

/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  /* background-color: #eee; */
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #999;
  height: 11px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
  width: 11px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}
/*
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}

@media (forced-colors: active), (forced-colors: none) {
  .ps {
    overflow: auto !important;
  }
}*/
/* ------------------------- perfect-scrollbar ------------------------- */