@font-face {
     font-family: 'Proxima Nova Rg';
     src: url('../fonts/ProximaNova-Regular.eot');
     src: url('../fonts/ProximaNova-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/ProximaNova-Regular.woff') format('woff'), url('../fonts/ProximaNova-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
}
 @font-face {
     font-family: 'Proxima Nova Lt';
     src: url('../fonts/ProximaNova-Semibold.eot');
     src: url('../fonts/ProximaNova-Semibold.eot?#iefix') format('embedded-opentype'), url('../fonts/ProximaNova-Semibold.woff2') format('woff2'), url('../fonts/ProximaNova-Semibold.woff') format('woff'), url('../fonts/ProximaNova-Semibold.ttf') format('truetype');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
}
 @font-face {
     font-family: 'Proxima Nova Rg';
     src: url('../fonts/ProximaNova-Bold.eot');
     src: url('../fonts/ProximaNova-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/ProximaNova-Bold.woff2') format('woff2'), url('../fonts/ProximaNova-Bold.woff') format('woff'), url('../fonts/ProximaNova-Bold.ttf') format('truetype');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
}
 @font-face {
     font-family: 'Proxima Nova Lt';
     src: url('../fonts/ProximaNova-Light.eot');
     src: url('../fonts/ProximaNova-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/ProximaNova-Light.woff2') format('woff2'), url('../fonts/ProximaNova-Light.woff') format('woff'), url('../fonts/ProximaNova-Light.ttf') format('truetype');
     font-weight: 300;
     font-style: normal;
     font-display: swap;
}
 @font-face {
     font-family: 'MQ';
     src: url('../fonts/MQ.eot');
     src: url('../fonts/MQ.eot?#iefix') format('embedded-opentype'), url('../fonts/MQ.woff2') format('woff2'), url('../fonts/MQ.woff') format('woff'), url('../fonts/MQ.svg#MQ') format('svg');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
}
 body {
     font-family: 'Proxima Nova Rg';
}
 h1,h2,h3,h4,h5,h6,p,a,span {
     margin: 0px;
}
 *:focus {
     outline: none !important;
}
 button, input, optgroup, select, textarea {
     font-family: 'Proxima Nova Rg';
}
 p {
     color: #000000;
     font-size: 16px;
}
 a {
     text-decoration: none;
}
 img {
     max-width: 100%;
     width: auto;
     height: auto;
}
 ul {
     padding-left: 0;
}
 ul li {
     list-style: none;
}
 .proxima_font {
     font-family: 'Proxima Nova Rg';
}
 .arabic_text{
     font-family: 'MQ';
     font-size: 40px;
     text-align: right;
}
/* heading font size */
 .banner_heading {
     font-size: 46px;
     font-weight: bold;
     line-height: 46px;
}
 h1 {
     font-size: 34px;
     color: var(--main_primary);
     font-weight: bold;
}
 h2 {
     font-size: 30px;
}
 h3 {
     font-size: 28px;
}
 h4 {
     font-size: 22px;
}
 h5 {
     font-size: 20px;
}
 h6 {
     font-size: 18px;
}
/* Tariq Ahmad generic css*/
 .arabic_font {
     font-family: 'MQ';
}
 .urdu_font {
     font-family: 'Noto Nastaliq Urdu';
}

.lh_0 {
     line-height: 0px;
}
/* main colors */
 :root {
     --main_primary: #FE8F00;
     --light_primary: #FFFDF4;
     --main_secondry: #7CB67D;
     --color_secondry: #5D9634;
     --hover_primary: #F9A942;
     --medium_light_primary: #FFF4E5;
     --hover_secondary: #91C592;
     --focus_primary: #E48914;
     --focus_secondary: #6AA96C;
     --bg_lightgray: #F2F2F2;
}
/* btn */
 .btn {
     padding: 13px 36px;
     font-size: 15px;
     font-weight: bold;
     border-radius: 40px;
     color: white;
     cursor: pointer;
     text-decoration: none;
     text-transform: uppercase;
}
 .btn:focus {
     box-shadow: none;
}
 .transparent_btn {
     border: 2px solid #505050;
     color: #505050;
     text-transform: capitalize;
}
 .transparent_btn:hover {
     background: var(--main_primary);
     border: 2px solid var(--main_primary);
     color: #fff;
}
 .bord_c_gray {
     border-color: #D9D9D9 !important;
}
 .bord_c_blue {
     border-color: #3945AF !important;
}
.bord_c_secondry {
     border-color: var(--main_secondry) !important;
}
 .bord_c_primary {
     border-color: var(--main_primary) !important;
}
 .border_secondry {
     border: 1px solid #D9D9D9;
}
 .f_awesome_icon {
     color: #505050;
}
 .bg_secondry {
     background-color: var(--main_secondry);
}
 .bg_primary {
     background-color: var(--main_primary);
}
 .bg_light_primary {
     background-color: var(--light_primary);
}
 .bg_medium_primary {
     background-color: var(--medium_light_primary);
}
 .bg_lightgray {
     background-color: var(--bg_lightgray);
}
 .text_gray {
     color: #505050;
}
 .text_disabled {
     color: #dee2e6;
}
 .text_disabled i {
     color: #dee2e6;
     pointer-events: none;
}
 .bg_gray {
     background: #505050;
}
 .text_black {
     color: #000000;
}
 .text_dark_secondry {
     color: var(--color_secondry);
}
 .text_blue {
     color:#3945AF;
}
 .text_primary {
     color: var(--main_primary);
}
 .text_secondry {
     color: var(--main_secondry);
}
 .text_darkblue {
     color: #6B8CCC;
}
 .text_redish {
     color: #E17777;
}
 .text_darkred {
     color: #AF184F;
}
 .text_darkpink {
     color: #B835CC;
}
 .bg_logoorange {
     background: #fd8400;
}
 .bg_pink {
     background: #BE56CE;
}
 .bg_lightgreen {
     background: #86B464;
}
 .bg_deepblue {
     background: #5965D6;
}
 .bg_yellow {
     background: #EAB93B;
}
 .bg_skyblue {
     background: #4FAFCD;
}
 .bg_darkred {
     background: #E45554;
}
 .color_darkred {
     color: #E45554;
}
 .bg_cleargreen {
     background: #39D16D;
}
 .bg_darkredish {
     background: #933C5B;
}
 .bg_light_green {
     background: #EDF9ED;
}
 .bg_pink_light {
     background: #F6F6FC;
}
 .bg_tag {
     background:#ECF3E7;
}
 .bg_transparent {
     background: transparent;
}
 .bg_greenish {
     background: #b5af15;
}
 .bg_redish_magenta {
     background: #ae8eaa;
}
 .bg_faded_green {
     background: #81b362;
}
 .bg_persian_orange {
     background: #CD8A5C;
}
 .bg_mango_orange {
     background: #f6854c;
}
 .bg_pinkish_purple {
     background: #C366D1;
}
 .bg_rock {
     background: #4b4033;
}
 .bg_halloween_orange {
     background: #d86b3d;
}
 .bg_selective_yellow {
     background: #ffbe01;
}
 .bg_caribbean_green {
     background: #16bfa2;
}
 .bg_pale_orange {
     background: #F6AB4C;
}
 .bg_brownish {
     background: #b28481;
}
 .bg_ball_blue {
     background: #2ba9df;
}
 .bg_fountain_blue {
     background: #4daecc;
}
 .bg_soft_blue {
     background: #587cf6;
}
 .bg_cool_blue {
     background: #418BCA;
}
 .bg_valentine_red {
     background: #da4f4f;
}
 .bg_lighter_green {
     background: #CFE0C3;
}
 .bg_faded_green {
     background: #62b37e;
}
 .bg_lighter_blue {
     background: #CCE3F2;
}
 .bg_lighter_red {
     background: #F9BDBD;
}
 .bg_lighter_pink {
     background: #F6E0FA;
}
 .bg_medium_pink {
     background: #FACDDD;
}
.bg_bluish {
     background: #2196F3;
}
.bg_blue_gray {
     background: #5F7D8C;
}

 .link_primary:hover {
     color: var(--main_primary);
}
 .btn.bg_primary:hover {
     background: var(--hover_primary);
     transition: 0.2s ease-in;
}
 .btn.bg_primary:focus {
     background: var(--focus_primary);
     box-shadow: none;
}
 .btn.bg_secondry:hover {
     background: var(--hover_secondary);
}
 .btn.bg_secondry:focus {
     background: var(--focus_secondary);
     box-shadow: none;
}
 .btn.bg_gray:hover {
     color: #fff;
}
 .btn.bg_gray:focus {
     background: #666666;
     box-shadow: none;
}
 .bg_primary_transparent {
     border: 2px solid var(--main_primary);
     color: var(--main_primary);
}
 .bg_primary_transparent:hover {
     background: var(--hover_primary);
     transition: 0.2s ease-in;
     color: #fff;
     border: 2px solid transparent;
}
 .bg_primary_transparent:focus {
     background: var(--focus_primary);
     box-shadow: none;
     color: #fff;
}
/* fonts sizes */
 
.font_50 {
     font-size: 50px;
}
.font_34 {
     font-size: 34px;
}
 .font_26{
     font-size: 26px;
}
 .font_28{
     font-size: 28px;
}
 .font_22{
     font-size: 22px;
}
.font_20 {
     font-size: 20px;
}
 .font_18 {
     font-size: 18px;
}
 .font_14 {
     font-size: 14px;
}
 .font_12 {
     font-size: 12px;
}
/* border radius */
 .w_sm_50{
     width: 50%;
}
 .mb_20{
     margin-bottom: 20px;
}
 .border_r_40px {
     border-radius: 40px;
}
 .border_r_30px {
     border-radius: 30px;
}
 .border_r_20px {
     border-radius: 20px;
}
 .border_r_10px {
     border-radius: 10px;
}
 .btn_small {
     padding: 8px 24px;
}
 .btn-close {
     box-shadow: none;
}
 .btn.bg_primary:hover,.btn.bg_secondry:hover {
     color: white;
}
 .btn_white_border {
     display: flex;
     border: 2px solid #fff;
     text-align: center;
     padding: 8px;
     justify-content: center;
     margin: 8px;
     width: 200px;
     align-items: center;
}
 .btn_white_border:hover {
     background: var(--main_primary);
     border: 2px solid var(--main_primary);
     color: #fff;
}
/* box shadows */
 .box_shadow {
     box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
}
 .box_shadow_light {
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}
 .box_shadow_b_right {
     box-shadow: 6px 6px 8px -4px rgba(0,0,0,0.30);
}
 .text_shadow {
     text-shadow: 2px 3px rgba(0,0,0,.15);
}
 .btn_shadow {
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
 .letter_spacing {
     letter-spacing: 1px;
}
 .sec_pad {
     padding-top: 70px;
     padding-bottom: 70px;
}
 .error_mesg {
     color: red;
     font-size: 14px;
     padding-top: 6px;
     display: inline-block;
}
 .w_20 {
     width: 20px;
}
 .w_38 {
     width: 38px;
}
 .w_58 {
     width: 58px;
}
.w_100 {
     width: 100px;
}
 .dropdown-toggle::after {
     display: none;
}
 .dropdown-item.active, .dropdown-item:active {
     background-color: var(--primary-hover);
}
 .dropdown-item:focus, .dropdown-item:hover {
     color: #000;
     background-color: var(--medium_light_primary);
}
 .lang_dropdown ul {
     padding-top: 0;
     padding-bottom: 0;
}
 .lang_dropdown ul li a {
     border-bottom: 1px solid #f0f0f0;
}
 .cursor_pointer {
     cursor: pointer;
}
 .navbar_logo {
     width: 65px;
}
 .modal {
     backdrop-filter: blur(5px);
     z-index: 9999;
}
 .modal-backdrop.fade.show {
     opacity: 0.8;
}
 section {
     padding-bottom: 20px;
}
/* Tariq Ahmad generic css end */
/* header nav */
 .header_nav li a {
     font-size: 16px;
     color: #444444;
     margin-left: 10px;
     margin-right: 10px;
}
 .header_nav li a:hover, .header_nav li a:focus {
     color: var(--main_primary);
}
 .header_nav a.nav-link.active {
     font-weight: bold;
}
 .header_nav li.nav-item a {
     position: relative;
}
 .header_nav a.nav-link.active:after {
     border-bottom: 4px solid #444444;
     position: absolute;
     content: "";
     bottom: -7px;
     left: 0;
     right: 0;
     border-radius: 100px;
}
 header {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
     position: sticky;
     top: 0;
     width: 100%;
     right: 0;
     left: 0;
     z-index: 1030;
}
 .bg_mobile_screen img {
     width: 188px;
}
 .lang_dropdown .dropdown-toggle::after {
     display: none;
}
 .lang_dropdown i {
     font-size: 14px;
     font-weight: bold;
     color: #505050;
}
 .lang_dropdown a:hover {
     color: #000;
}
 .lang_dropdown .dropdown-toggle {
     color: #444444;
     font-weight: bold;
}
/* Header bg image section */

.header_bgimage {
/*    background-image: url(../img/home/pattern.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 0%;*/
    padding-top: 160px;
    padding-bottom: 66px;
    margin-top: -100px;
/*    background-image:
    linear-gradient(66.9deg, rgba(93, 150, 52, 0.5) 13.64%, #FFF4E5 40.48%, rgba(254, 143, 0, 0.6) 91.03% ),
    url('../img/home/vector.png');
    backdrop-filter: blur(5px);
    background-repeat: no-repeat;*/

     background: linear-gradient(66.9deg, rgba(93, 150, 52, 0.8) 13.64%, #FFF4E5 40.48%, rgba(254, 143, 0, 0.6) 91.03%);
    mix-blend-mode: normal;
    backdrop-filter: blur(5px);
}





 .button_menu {
     position: relative;
     top: 10%;
     right: 8px;
     height: 27px;
     width: 28px;
     cursor: pointer;
     z-index: 100;
     transition: opacity .25s ease;
     margin-left: 48px;
     margin-top: 8px;
}
 .button_menu:hover {
     opacity: .7;
}
 .button_menu.active .top {
     transform: translateY(11px) translateX(0) rotate(45deg);
     background: white;
}
 .button_menu.active .middle {
     opacity: 0;
     background: #FFF;
}
 .button_menu .top, .button_menu .middle {
     background: #444444;
     border: none;
     height: 4px;
     width: 100%;
     position: absolute;
     top: 0;
     left: 0;
     transition: all .35s ease;
     cursor: pointer;
}
 .button_menu .middle {
     top: 11px;
}
 .header_overlay {
     position: fixed;
     background: black;
     top: 0;
     left: 0;
     width: 100%;
     height: 0%;
     opacity: 0;
     visibility: hidden;
     transition: opacity .35s, visibility .35s, height .35s;
     overflow: hidden;
     z-index: 99;
}
 .header_overlay.open {
     opacity: 1;
     visibility: visible;
     height: 100%;
}
 .header_overlay.open li {
     animation: fadeInRight .5s ease forwards;
     animation-delay: .35s;
}
 .header_overlay.open li:nth-of-type(2) {
     animation-delay: .4s;
}
 .header_overlay.open li:nth-of-type(3) {
     animation-delay: .45s;
}
 .header_overlay.open li:nth-of-type(4) {
     animation-delay: .50s;
}
 .header_overlay.open li:nth-of-type(5) {
     animation-delay: .50s;
}
 .header_overlay.open li:nth-of-type(6) {
     animation-delay: .55s;
}
 .header_overlay.open li:nth-of-type(7) {
     animation-delay: .6s;
}
 .header_overlay.open li:nth-of-type(8) {
     animation-delay: .65s;
}
 .header_overlay.open li:nth-of-type(9) {
     animation-delay: .7s;
}
 .header_overlay.open li:nth-of-type(10) {
     animation-delay: .75s;
}
 .overlay_menu {
     position: relative;
     height: 70%;
     top: 50%;
     transform: translateY(-50%);
     font-size: 50px;
     font-weight: 400;
     text-align: center;
}
 .overlay_listing {
     list-style: none;
     padding: 0;
     margin: 0 auto;
     display: inline-block;
     position: relative;
     height: 100%;
}
 .overlay_listing li {
     display: block;
     min-height: 34px;
     position: relative;
     opacity: 0;
}
 .overlay_listing li a {
     display: block;
     position: relative;
     color: white;
     text-decoration: none;
     font-family: 'Proxima Nova Rg';
     font-size: 16px;
}
 .overlay_logo img {
     width: 90px;
     margin-bottom: 30px;
}
 .overlay_listing li a:hover:after, .overlay_listing li a:focus:after, .overlay_listing li a:active:after {
     width: 100%;
}
 .button_menu.active .middle {
     opacity: 1;
     background: var(--main_primary);
     transform: translateY(0px) translateX(0) rotate(316deg);
     background: white;
}
 @keyframes fadeInRight {
     0% {
         opacity: 0;
         left: 20%;
    }
     100% {
         opacity: 1;
         left: 0;
    }
}
 .overlay_listing li:first-child a:after {
     display: none;
}
 .bg_icons {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     margin-bottom: 0;
}
 .bg_icons li {
     background: linear-gradient(110.79deg, rgba(255, 255, 255, 0.8) -2.59%, rgba(255, 255, 255, 0.6) 95.44%);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
     height: 136px;
     width: 236px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 30px;
     padding-left: 24px;
     padding-right: 24px;
     margin: 6px;
}
 .bg_icons li:hover {
     background: #7CB67D;
}
 .bg_icons li:hover h6, .bg_icons li:hover p {
     color: #fff;
}
 .timing_icon {
     width: 70px;
     height: 70px;
     border-radius: 100px;
     justify-content: center;
     background: var(--main_secondry);
     padding: 4px;
     display: flex;
     align-items: center;
}
 .all_prayer {
     display: flex;
     align-items: center;
}
 .icon_item {
     width: 38px;
}
 ul.bg_icons li:hover .timing_icon, .all_prayer:hover .timing_icon {
     background: #fff;
}
 ul.bg_icons li:hover .timing_icon svg path {
     fill: #7CB67D;
}
 ul.bg_icons li:hover .timing_icon svg .sun_shade {
     fill: #F69220;
     stroke: #F69220;
}
 .bg_icons .button_box:hover p, .bg_icons .button_box:hover h6 {
     color: #fff;
}
 ul.bg_icons li:hover .all_prayer h6, ul.bg_icons li:hover .all_prayer p {
     color: var(--main_primary);
}
 .timing_icon svg {
     width: 60px;
     padding: 4px;
}
 .grad_box {
     background: linear-gradient(110.79deg, rgba(255, 255, 255, 0.8) -2.59%, rgba(255, 255, 255, 0.6) 95.44%);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
     padding: 24px;
     border-radius: 40px;
}
 .grad_box .d-flex .custom_flex{
     width: 40%;
}
 .blur_box {
     background: rgba(255,255,255,0.68);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     margin-bottom: 8px;
     margin-top: 8px;
     padding: 16px;
     border-radius: 18px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     text-align: center;
     font-weight: bold;
     font-size: 17px;
}
 .owl-carousel .feature_icon {
     display: flex;
     align-items: center;
     text-decoration: none;
     color: #000;
     flex-wrap: wrap;
     margin-top: 22px;
}
 .owl-carousel .feature_icon:hover p {
     color: var(--main_primary);
}
 .custom_flex {
     display: flex;
     align-items: center;
}
 .line_border {
     border: 2px solid black;
     height: 24px;
     margin-left: 20px;
     margin-right: 20px;
}
 .prayer_logModal {
     display: flex;
     align-items: center;
     text-decoration: none;
     cursor: pointer;
}
 ul.bg_icons li:hover .all_prayer h6, ul.bg_icons li:hover .all_prayer p, .prayer_logModal:hover p {
     color: var(--main_primary);
}
 .home_app_btn {
     width: 166px;
}
.icon_img {
    width: 70px;
    height: 65px;
    margin: auto;
    padding: 16px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
}
 .owl-carousel .bg_deepblue img {
     width: 100px;
}
 ul.prayerlog_listing li .radio_custom:checked + .radio_custom_label:before {
     margin-top: -7px;
     font-size: 22px;
     background: var(--medium_light_primary);
}
 ul.prayerlog_listing li {
     border-radius: 40px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     margin-bottom: 16px;
}
 ul.prayerlog_listing > .active {
     background: var(--medium_light_primary);
}
 .calendar_icon {
     color: #E45554;
}
 .login_modal .modal-body, .forgotpass_modal .modal-body, .signup_modal .modal-body {
     padding: 24px;
}
/* Signup and login section */
 .input_field {
     width: 100%;
     padding: 10px 20px;
     border-radius: 40px;
     border: 1px solid #d3d3d3;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.10);
}
 .input_field:focus {
     background: var(--light_primary);
     border: 1px solid var(--main_primary);
}
 .forgot_pass:hover, .get_account:hover {
     color: var(--main_primary);
}
/* Home welcome section */
.welcomebg {
    /* background: url(../img/home/welcomebg.jpg); */
/*    background-size: cover;*/
    background-image: linear-gradient(to right, #9face6 0%, #74ebd5 100%);
    position: relative;
    z-index: 1;
}
 .explore_parg {
     color: #000;
     overflow: hidden;
     width: 100%;
     display: -webkit-box;
     -webkit-line-clamp: 4;
     -webkit-box-orient: vertical;
}
 .explore_more_bg .owl-nav.disabled {
     display: block;
}
/* Home article section */
 .bg_tag_red {
     background: #E17777;
}
 .bg_tag_blue {
     background: #7782E1;
}
 .bg_tag_pink {
     background: #DD81EB;
}
 .owl-carousel.feature_icons .custom_icon:hover .icon_parag, .articlevideo_item:hover .article_parag {
     color: var(--main_primary);
}
 .owl-carousel.channel_icons button.owl-prev, .owl-carousel.channel_icons button.owl-next, .owl-carousel.feature_icons button.owl-prev, .owl-carousel.feature_icons button.owl-next, .owl-carousel.article_and_vid button.owl-prev, .owl-carousel.article_and_vid button.owl-next, .owl-carousel.explore_carousel button.owl-prev, .owl-carousel.explore_carousel button.owl-next {
     position: absolute;
     z-index: 0;
}
 .owl-carousel.channel_icons button.owl-prev, .owl-carousel.channel_icons button.owl-next, .owl-carousel.article_and_vid button.owl-prev, .owl-carousel.article_and_vid button.owl-next, .owl-carousel.explore_carousel button.owl-prev, .owl-carousel.explore_carousel button.owl-next {
     top: 46% 
}
 .owl-carousel.feature_icons button.owl-prev, .owl-carousel.feature_icons button.owl-next {
     top: 42%;
}
 .owl-carousel.channel_icons .left_icon, .owl-carousel.channel_icons .right_icon, .owl-carousel.feature_icons .left_icon, .owl-carousel.feature_icons .right_icon, .owl-carousel.article_and_vid .left_icon, .owl-carousel.article_and_vid .right_icon, .owl-carousel.explore_carousel .left_icon, .owl-carousel.explore_carousel .right_icon {
     font-size: 37px;
     color: #fff;
}
 .owl-carousel.explore_carousel .left_icon, .owl-carousel.explore_carousel .right_icon {
     color: #505050;
}
 .owl-carousel.channel_icons .left_icon, .owl-carousel.channel_icons .right_icon, .owl-carousel.feature_icons .left_icon, .owl-carousel.feature_icons .right_icon {
     color: #505050;
}
 .owl-carousel.channel_icons button.owl-prev, .owl-carousel.feature_icons button.owl-prev, .owl-carousel.article_and_vid button.owl-prev,.owl-carousel.explore_carousel button.owl-prev {
     left: -55px;
}
 .owl-carousel.channel_icons button.owl-next, .owl-carousel.feature_icons button.owl-next, .owl-carousel.article_and_vid button.owl-next, .owl-carousel.explore_carousel button.owl-next {
     right: -55px;
}
 .owl-carousel.feature_icons .owl-dots.disabled, .owl-carousel.article_and_vid .owl-dots {
     display: none;
}
 .owl-carousel .left_icon:hover, .owl-carousel .right_icon:hover {
     color: var(--hover_primary);
}
 .article_and_vid .owl-nav.disabled {
     display: block;
}
 .icon_parag {
     font-size: 15px;
     text-align: center;
     padding-top: 8px;
     color: #000000;
     min-height: 46px;
     line-height: 19px;
     width: 100px;
}
 .article_content {
     min-height: 142px;
     padding-left: 10px;
     padding-right: 10px;
}
 .anchor_heading {
     color: #000;
     text-decoration: none;
}
 .anchor_heading:hover {
     color: var(--main_primary) 
}
 .articlevideo_item {
     position: relative;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     overflow: hidden;
     border-radius: 40px;
     margin-bottom: 30px;
}
 .articlevideo_item a {
     border: 14px solid white;
     text-decoration: none;
     background: white;
     display: block;
     width: 100%;
}
 .articlevideo_item a:hover:before {
     border: 4px solid var(--main_secondry);
     position: absolute;
     content: "";
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     border-radius: 40px;
}
 .articlevideo_item img {
     object-fit: cover;
     height: 190px;
     border-top-left-radius: 32px;
     border-top-right-radius: 32px;
     width: 100%;
}
 .digital_icon img {
     width: 30px;
     height: 30px;
}
 .share_arrow {
     position: absolute;
     right: 43px;
     top: 29px;
     color: #fff;
     width: 46px;
     height: 46px;
     border-radius: 100px;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 100%);
     backdrop-filter: blur(5px);
     display: flex;
     justify-content: center;
     align-items: center;
     border: 1px solid #505050;
     font-size: 24px;
}
 .custom_pagination {
     border-radius: 100px;
     padding: 16px 20px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}
 .custom_pagination li a {
     color: #505050;
     font-weight: bold;
     width: 38px;
     height: 38px;
     line-height: 39px;
     justify-content: center;
     display: flex;
     margin-left: 4px;
     margin-right: 4px;
}
 .custom_pagination li:first-child a, .custom_pagination li:last-child a {
     font-weight: bold;
     margin-right: 18px;
     margin-left: 18px;
}
 .custom_pagination li.active a {
     background: var(--main_secondry);
     color: white;
     border-radius: 100px;
}
 .custom_pagination li a:hover {
     background: var(--main_secondry);
     color: white;
     border-radius: 100px;
}
 .custom_pagination li:first-child a:hover, .custom_pagination li:last-child a:hover {
     background: none;
     color: var(--main_secondry);
}
 .custom_pagination li:first-child a:hover i, .custom_pagination li:last-child a:hover i {
     color: var(--main_secondry);
}
 .article_video_section .articlevideo_item img {
     width: 100%;
}
 .owl-carousel .digital_icon img, .article_video_section .digital_icon img {
     width: 30px;
     height: 30px;
     border-radius: 4px;
     margin-right: 4px;
}
 .owl-carousel.article_and_vid {
     z-index: 9;
}
 .article_parag {
     min-height: 52px;
}
 .itemtitle {
     text-transform: uppercase;
     color: black;
     line-height: 24px;
     font-weight: bold;
     font-size: 14px;
}
 .tag {
     padding: 4px 12px;
     color: white;
     display: inline-block;
     text-align: center;
     font-size: 13px;
}
/* Home Hadith Section */
 .box_arrow:hover {
     color: var(--main_primary);
}
 .share_circle {
     width: 64px;
}
 .share_icon {
     display: flex;
     align-items: center;
     text-transform: uppercase;
     color: #505050;
     font-weight: bold;
     text-decoration: none;
     font-size: 16px;
     cursor: pointer;
}
 .share_icon:hover {
     color: #505050;
}
 .share-round:hover {
     background: #F9A942;
}
 ul.share_listing li a:hover {
     color: #505050;
}
 .share-round {
     color: white;
     background: var(--main_primary);
     border-radius: 100px;
     width: 50px;
     height: 50px;
     text-align: center;
     font-size: 23px;
     margin-right: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .text_onimg {
     position: absolute;
     top: 30px;
     left: 0;
     right: 0;
     color: #fff;
}
 .hadith_box {
     margin-top: 24px;
     padding: 48px;
     border-radius: 40px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: #EDF9ED;
}
 .color_t_red {
     color: #CC5251;
}
 .color_textblue {
     color: #7782E1;
}
 .bg_blue_light {
     background: #F6F6FC;
}
/* Home Explore section */
.explorebg {
    /* background-image: url(../img/explorebg.svg); */
    /* background-size: cover; */
     background-image: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);
     position: relative;
     z-index: 1;
}
 .explore_caption {
     position: absolute;
     bottom: 0;
     z-index: 9;
     background: linear-gradient(91.83deg, rgba(0, 0, 0, 0.72) -4.61%, rgba(122, 122, 122, 0.54) 134.15%);
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     padding: 16px 24px 16px 24px;
     width: 100%;
     text-decoration: none;
}
 .explore_wrap {
     border: 4px solid transparent;
}
 .explore_wrap:hover {
     border: 4px solid var(--main_secondry);
     border-radius: 46px;
}
 .explore_caption h4 {
     color: #fff;
     text-transform: uppercase;
     font-weight: bold;
}
 .explore_caption p {
     color: #fff;
}
 .explore_item:hover h4, .explore_item:hover p {
     color: var(--main_primary);
}
 .explore_item {
     position: relative;
     cursor: pointer;
     overflow: hidden;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     border-radius: 47px;
     width: 100%;
     display: block;
     margin-bottom: 24px;
     margin-left: 20px;
     margin-right: 20px;
}
 .explore_img img {
     width: 100%;
}
 .explore_item:hover:before {
     position: absolute;
     content: "";
     border: 4px solid var(--main_secondry);
     position: absolute;
     content: "";
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     z-index: 999;
     border-radius: 46px;
}
 .live_class {
     display: flex;
     align-items: center;
}
 .live_class .live {
     width: 14px;
     height: 14px;
     background: #E17777;
     margin-left: 16px;
     margin-right: 8px;
     border-radius: 100px;
     display: inline-block;
}
 .e_item {
     border-radius: 30px;
     overflow: hidden;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     display: inline-block;
     width: 100%;
     text-decoration: none;
     position: relative;
     min-height: 177px;
}
 .e_item:hover:before {
     border: 4px solid var(--main_secondry);
     position: absolute;
     content: "";
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     border-radius: 30px;
}
 .e_item:hover h5 {
     color: var(--hover_primary);
}
/* Above footer section */
.abovefooter-bg {
    /* background-image: url(../img/abovefooter.jpg); */
    margin-bottom: 20px;
    height: 460px;
/*    background-size: cover;
    background-position: 50% 50%;*/
    background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
    position: relative;
    z-index: 1;
}
 .footer_mobile_mock {
     position: absolute;
     right: 63px;
     width: 330px;
     top: 36px;
     text-align: center;
}
 .footer_mobile_mock img {
     width: 86%;
}
 .footer_apps_btn {
     width: 166px;
}
/* footer:before {
     background: url(../img/footer-blackbg.jpg);
     width: 100%;
     height: 206px;
     background-size: cover;
     background-position: 50% 0%;
     margin-bottom: -22px;
     position: absolute;
     top: -184px;
     content: "";
     left: 0;
}*/
 footer {
/*     background-image: url(../img/footer_bg.jpg);
     background-size: cover;
     background-position: 50%;*/
     background: #000;
     padding-top: 60px;
     padding-bottom: 60px;
/*     margin-top: 190px;*/
     position: relative;
     z-index: 1;
}
 ul.share_listing li a:hover {
     background: var( --medium_light_primary);
}
 ul.share_listing {
     margin-bottom: 0;
}
 ul.share_listing li a {
     display: flex;
     align-items: center;
     color: #505050;
     text-decoration: none;
     border-bottom: 1px solid #d9d9d9;
     line-height: 36px;
     padding: 10px 20px;
}
/* Footer styling */
 .footer_b_border {
     width: 54px;
     margin-bottom: 24px;
     background: #505050;
     height: 5px;
     margin-top: 19px;
     border-radius: 10px;
}
 .socialicons {
     display: flex;
     justify-content: start;
     margin-top: 16px;
}
 .socialicons li {
     margin-right: 16px;
}
 .socialicons li a {
     color: #fff;
     font-size: 18px;
}
 .footer_item li a {
     color: white;
     font-size: 16px;
     text-decoration: none;
     line-height: 34px;
}
 ul.mailto li a {
     color: #fff;
     text-decoration: none;
     font-size: 18px;
}
 .footer_social:hover {
     color: var(--main_primary);
}
 .socialicons {
     list-style: none;
}
 .copyright {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-top: 8px;
}
 .copyright a {
     color: #fff;
     padding-left: 5px;
     padding-right: 5px;
}
 .copyright a:hover {
     color: var(--main_primary) 
}
/* country listing */
 .country_listing_dropdown button::after {
     display: none;
}
 .dropdown_icon {
     position: absolute;
     right: 14px;
     top: 17px;
}
 .country_list_dropdown li a:hover {
     background: var(--medium_light_primary);
}
 .country_list_dropdown li a:active {
     color: #505050;
}
 .menu_dropdown.show {
     width: 100%;
     background: var(--light_primary) 
}
 .prayer_heading {
     position: relative;
     font-weight: bold;
     line-height: 26px;
     font-size: 22px;
}
 .prayer_heading:after {
     border-bottom: 5px solid var(--main_primary);
     border-radius: 100px;
     width: 80px;
     position: absolute;
     content: "";
     left: 0;
     bottom: -16px;
}
/* Prayer timing */
 .prayer_timing {
     background-image: url(../img/prayertime/prayertime_bg.jpg);
     background-size: cover;
}
 .azan_time .button_box {
     position: relative;
}
.wrong_loc {
    display: flex;
    text-decoration: none;
    color: #505050;
    align-items: center;
    cursor: pointer;
    min-width: 222px;
}
 .map_icon {
     font-size: 24px;
     color: var(--main_secondry) 
}
 .wrong_loc:hover h4, .wrong_loc:hover .map_icon {
     color: var(--hover_primary);
}
 .set_icon {
     width: 46px;
     height: 42px;
     line-height: 46px;
     padding: 0;
     text-align: center;
     background: var(--main_secondry);
     color: white;
     border-radius: 10px;
     font-size: 25px;
     display: inline-block;
}
 .accordion.faq_section button {
     background: none;
     border: none;
     margin-bottom: 0px;
     padding-top: 20px;
     border-radius: 10px;
     box-shadow: none;
     padding-bottom: 16px;
}
 .accordion.faq_section .accordion-item {
     border: none;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     margin-bottom: 20px;
     border-radius: 10px;
}
 .accordion.faq_section .accordion-body {
     padding-top: 0;
     padding-left: 24px;
}
 .accordion.faq_section .accordion-item.is-active {
     background: var(--light_primary);
}
 .appstore_btn {
     width: 166px;
}
 .appstore_btn:first-child {
     margin-right: 8px;
}
 ul.custom_breadcrumb {
     display: flex;
     flex-wrap: wrap;
     margin-bottom: 24px;
}
 ul.custom_breadcrumb li a {
     text-decoration: none;
     color: #000000;
     font-size: 16px;
     color: #000;
     padding-left: 8px;
     padding-right: 8px;
}
 ul.custom_breadcrumb li a:hover {
     color: var(--hover_primary);
}
 .custom_breadcrumb li:first-child {
     margin-left: 0px;
}
 .button_box {
     background: linear-gradient(110.79deg, rgba(255, 255, 255, 0.8) -2.59%, rgba(255, 255, 255, 0.6) 95.44%);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
     height: 126px;
     width: 100%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     text-decoration: none;
     border-radius: 30px;
     margin-bottom: 16px;
     padding-left: 24px;
     padding-right: 24px;
}
 ul.azan_time li {
     width: 200px;
     text-align: center;
}
 ul.azan_time li:hover {
     background: linear-gradient(110.79deg, rgba(255, 255, 255, 0.8) -2.59%, rgba(255, 255, 255, 0.6) 95.44%);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
     color: #000;
}
 .azan_time li:hover h6 {
     color: #000;
}
 ul.azan_time .active_btn {
     background: linear-gradient(110.79deg, rgba(254, 143, 0, 0.6) -2.59%, rgba(254, 143, 0, 0.4) 95.44%);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(5px);
     opacity: 1;
     color: #fff;
}
 ul.azan_time .active_btn:hover {
     background: linear-gradient(110.79deg, rgba(254, 143, 0, 0.6) -2.59%, rgba(254, 143, 0, 0.4) 95.44%);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(5px);
}
 ul.azan_time .active_btn:hover h6 {
     color: #fff;
}
 .setting_icon {
     background: transparent;
     border: none;
     box-shadow: none;
     border: none;
     padding: 0px;
}
 .setting_icon span:hover {
     background: var(--hover_secondary);
}
 ul.azan_time li.active:after {
     width: 68%;
     height: 4px;
     position: absolute;
     content: "";
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
     background: linear-gradient(110.79deg, rgba(254, 143, 0, 0.8) -2.59%, rgba(254, 143, 0, 0.4) 95.44%);
     backdrop-filter: blur(10px);
     border-radius: 90px;
}
 .top_parag {
     width: 37%;
     font-size: 20px;
     text-align: left;
     padding-bottom: 56px;
}
 .monthly_yearly_tabs button {
     background: white;
     border: 2px solid #000;
     color: #000;
}
 .monthly_yearly_tabs button.active:hover {
     background: var(--hover_primary);
     color: white;
}
 .monthly_yearly_tabs button.active {
     background: var(--main_primary) ;
     border: 2px solid var(--main_primary);
     color: white;
}
 .monthly_yearly_tabs button:hover {
     background: var(--main_primary);
     border: 2px solid var(--main_primary);
     color: #fff;
}
 .monthly_yearly_tabs button:focus {
     background: var(--focus_primary);
}
 .yearly_tab_parent {
     display: flex;
     justify-content: space-around;
     align-items: center;
     flex-wrap: nowrap;
     width: 100%;
     padding: 50px;
     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
     border-radius: 20px;
     border: 1px solid #e9e9e9;
}
 .wrap, .select_wrap {
     width: 254px;
     overflow: hidden;
     height: 48px;
     position: relative;
     display: block;
     border: 1px solid #D9D9D9;
     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
}
 .wrap:after, .select_wrap::after {
     content: "";
     color: #000;
     position: absolute;
     right: 4px;
     top: 15px;
     z-index: 1;
     width: 25px;
     height: 100%;
     pointer-events: none;
     text-align: center;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cstyle%3Esvg%7Bfill:%23505050%7D%3C/style%3E%3Cpath d='M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
}
 .select_wrap:last-child {
     margin-left: 16px;
}
 .btn_download {
     padding: 10px 36px;
     font-size: 15px;
     font-weight: bold;
     font-family: 'Proxima Nova Rg';
     border-radius: 5px;
     color: white;
     text-decoration: none;
     background: var(--main_secondry);
     line-height: 26px;
     margin-left: 12px;
     text-align: center;
     border: none;
}
 .btn_download:hover {
     background: var(--hover_secondary);
     color: #fff;
}
 .btn_download:focus {
     background: var(--focus_secondary);
}
 .list_dropdown {
     width: 100%;
     height: 48px;
     background: var(--light_primary);
     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
     padding: 10px;
     border: 0;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     text-indent: 10px;
     color: #000000;
     font-size: 16px;
     border-radius: 10px;
     padding-left: 8px;
}
 a.slide_toggle {
     width: 246px;
     height: 46px;
     line-height: 29px;
     background: var(--main_primary);
     border: 1px solid #D9D9D9;
     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
     padding: 10px 15px 10px 15px;
     color: #fff;
     font-size: 16px;
     border-radius: 10px;
     text-decoration: none;
     display: inline-block;
     cursor: pointer;
     text-align: left;
     margin-left: 16px;
}
 .show {
     display: block;
}
 .hide {
     display: none;
}
 .headertablebar {
     display: none;
}
 .headertablebar.show {
     display: block;
}
 .year_table_item {
     margin-left: 16px;
}
 .select_month {
     color: #505050;
     margin-left: 16px;
     font-size: 16px;
     cursor: pointer;
}
 .select_month:hover {
     color: var(--main_primary);
}
 .prayer_table thead th {
     font-size: 16px;
     color: #000;
     font-weight: normal;
}
 .prayer_table thead {
     background: #FEEDD3;
     line-height: 40px;
}
 .prayer_table tbody tr td {
     line-height: 46px;
     font-size: 16px;
     color: black;
}
 .prayer_table {
     text-align: center;
     margin-bottom: 0;
}
 .prayer_table tr:last-child td:first-child {
     border-bottom-left-radius: 20px;
     border: none;
}
 .prayer_table tr:last-child td:last-child {
     border-bottom-right-radius: 20px;
     border: none;
}
 ul.select_dropdown__list li:hover {
     background: var(--medium_light_primary);
}
 .switch_button {
     width: 300px;
     height: 44px;
     position: relative;
     z-index: 197;
     cursor: pointer;
     transition: 0.3s ease all;
     border-radius: 100px;
     display: flex;
     text-align: center;
}
 .switch_button_case {
     display: inline-block;
     background: white;
     width: 50%;
     height: 100%;
     color: black;
     position: relative;
     transition: 0.3s ease all;
     letter-spacing: 1px;
     padding-bottom: 1px;
     border-radius: 100px;
     border: 2px solid var(--main_primary);
     text-decoration: none;
     line-height: 40px;
}
 .switch_button_case.active:hover {
     background: var(--hover_primary);
}
 .switch_button_case:hover {
     color: black;
     cursor: pointer;
}
 .switch_button_case:focus {
     outline: none;
}
 .switch_button .active {
     position: absolute;
     left: 0;
     top: 0;
     width: 50%;
     height: 100%;
     z-index: -1;
     transition: 0.3s ease-out all;
}
 .switch_button .active_case {
     color: #151515;
}
 .switch_button .active_case {
     border-radius: 100px;
     background: var(--main_primary);
     color: white;
}
 .switch_button_case.right.active_case {
     border-top-left-radius: 0 ;
     border-bottom-left-radius: 0;
}
 .switch_button_case.left {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
}
 .switch_button_case.right {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
}
 #Hijri-tab {
     margin-left: 50%;
}
#gregorian-tab {
    margin-right: 50%;
}
 .city_box .blur_box {
     height: 126px;
}
 .city_box .blur_box:hover {
     background: var(--main_secondry);
     transition: 0.3s;
}
 .city_box .blur_box:hover svg ellipse {
     fill: var(--main_secondry);
}
 .city_box .blur_box:hover svg path {
     fill: #fff;
}
 .city_box .blur_box:hover h6, .city_box .blur_box:hover p {
     color: #fff;
}
/* Prayertime in other cities*/
 .gradient_bg {
     background: linear-gradient(112.78deg, rgba(92, 209, 245, 0.8) -11.98%, rgba(134, 180, 100, 0.6) 107.34%);
     backdrop-filter: blur(5px);
}
 .modal.right .modal-dialog {
     position: fixed;
     margin: auto;
     width: 450px;
     height: 100%;
     -webkit-transform: translate3d(0%, 0, 0);
     -ms-transform: translate3d(0%, 0, 0);
     -o-transform: translate3d(0%, 0, 0);
     transform: translate3d(0%, 0, 0);
}
 .modal.right .modal-content {
     height: 100%;
     overflow-y: auto;
}
 .modal.right.fade .modal-dialog {
     right: 0px;
     -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
     transition: opacity 0.3s linear, right 0.3s ease-out;
}
 .modal.right.fade.in .modal-dialog {
     right: 0;
}
 .right_modal_popup .btn-close {
     position: absolute;
     right: 15px;
     top: 13px;
     z-index: 999;
}
 .your_location, .input_style {
     background: var(--light_primary);
     width: 100%;
     height: 46px;
     border-radius: 5px;
     color: #000;
     padding-left: 12px;
     border: 1px solid #d9d9d9;
}
 .input_style {
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}
 .switch_small {
     display: inline-block;
     width: 46px;
     height: 20px;
     background: #acacac;
     border-radius: 30px;
     position: relative;
     cursor: pointer;
}
 .switch_small:after {
     content: "";
     position: absolute;
     color: #fff;
     font-size: 10px;
     font-weight: 600;
     width: 100%;
     left: 0px;
     text-align: right;
     padding: 0 6px;
     box-sizing: border-box;
     line-height: 21px;
}
 .switch_small:before {
     content: "";
     position: absolute;
     width: 22px;
     height: 22px;
     background: #fff;
     border-radius: 50%;
     top: -1.2px;
     left: 0px;
     transition: .3s;
     box-shadow: -3px 0 3px rgba(0,0,0,0.1);
}
 input.switch_input:checked ~ small {
     background: var(--main_primary);
     transition: .3s;
}
 input.switch_input:checked ~ small:before {
     transform: translate(25px, 0px);
     transition: .3s;
}
 input.switch_input:checked ~ small:after {
     content: "";
     text-align: left;
}
 .right_modal_popup .modal-content {
     background: linear-gradient(160.4deg, rgba(0, 0, 0, 0.9) -1.8%, rgba(0, 0, 0, 0.6) 105.13%);
     backdrop-filter: blur(10px);
}
 .loc_modal_body {
     color: #fff;
     padding-left: 6px;
     padding-right: 6px;
}
 .footer_btns {
     display: flex;
     justify-content: space-between;
     width: 100%;
     flex-wrap: wrap;
}
 .search_icon {
     position: absolute;
     right: 13px;
     top: 12px;
     color: #505050;
}
 div#locationModal {
     backdrop-filter: blur(0px);
}
 .contentA {
     display: none;
}
 .select_dropdown__button {
     background-color: var(--light_primary);
     padding: 10px 0px 10px 10px;
     color: #000;
     border: none;
     width: 100%;
     border-radius: 5px;
     text-align: left;
     display: flex;
     justify-content: space-between;
}
 .select_field {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cstyle%3Esvg%7Bfill:%23505050%7D%3C/style%3E%3Cpath d='M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-position-x: 98%;
     background-position-y: 6px;
     width: 100%;
     padding-right: 33px;
}
 .select_field {
     white-space: nowrap;
     overflow: hidden;
     display: block;
     text-overflow: ellipsis;
}
 .select_dropdown__button:focus {
     outline: none;
}
 .select_down_icon {
     font-size: 11px;
     color: #000;
     margin-right: 6px;
     margin-top: 7px;
}
 .select_dropdown__list {
     position: absolute;
     display: block;
     left: 0;
     right: 0;
     max-height: 200px;
     overflow: auto;
     margin: 0;
     padding: 0;
     list-style-type: none;
     opacity: 0;
     pointer-events: none;
     transform-origin: top left;
     transform: scale(1, 0);
     transition: all ease-in-out 0.3s;
     z-index: 2;
}
 .select_dropdown__list.active {
     opacity: 1;
     pointer-events: auto;
     transform: scale(1, 1);
}
 ul.select_dropdown__list li {
     display: block;
     list-style-type: none;
     padding: 10px 15px;
     background: var(--light_primary);
     border-top: 1px solid #e6e6e6;
     font-size: 14px;
     line-height: 1.4;
     cursor: pointer;
     color: #616161;
     transition: all ease-in-out 0.3s;
}
 .select_dropdown {
     width: 100%;
     border-radius: 5px;
     background: var(--light_primary);
     height: 46px;
     font-size: 16px;
     position: relative;
     display: inline-block;
}
 .manaul_item h6 {
     font-weight: bold;
     text-align: center;
     margin-bottom: 8px;
}
 .number {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 16px;
}
 .number .minus, .number .plus {
     position: relative;
     width: 27px;
     height: 30px;
     font-size: 12px;
     line-height: 32px;
     background: #f2f2f2;
     border-radius: 8px;
     border: 1px solid #D9D9D9;
     display: inline-block;
     vertical-align: middle;
     text-align: center;
     cursor: pointer;
     color: black;
     font-weight: bold;
     margin-left: 3px;
     margin-right: 3px;
}
 .plus:hover,.minus:hover {
     background: var(--hover_primary);
     border: 1px solid var(--hover_primary);
     color: #fff;
}
 .counter_input {
     height: 30px;
     width: 32px;
     text-align: center;
     font-size: 16px;
     border: 1px solid #D9D9D9;
     border-radius: 8px;
     display: inline-block;
     vertical-align: middle;
     color: var(--main_primary);
     font-weight: bold;
}
 .manual_inner_item {
     background: linear-gradient(180deg, rgba(64, 64, 64, 0.9) 0%, rgba(60, 60, 60, 0.7) 100%);
     border-radius: 20px;
     padding: 16px;
}
 .contentB {
     overflow: hidden;
}
 .equal_btn {
     border: 2px solid #fff;
     width: 120px;
     height: 50px;
     line-height: 50px;
     font-size: 15px;
     padding: 0;
     font-weight: 400;
}
 .btn.bg_transparent:hover {
     background: var(--main_primary);
     border: 1px solid var(--main_primary);
     color: white;
}
 .btn.bg_transparent:focus {
     background: var(--focus_primary);
     border: 1px solid var(--focus_primary);
}
 ol.breadcrumb li a {
     color: #000;
     text-decoration: none;
}
 ol.breadcrumb li a:hover {
     color: var(--main_primary);
}
 .breadcrumb-item+.breadcrumb-item::before {
     content: var(--bs-breadcrumb-divider, "|");
}
 ol.breadcrumb li {
     color: #000;
}
/* Hadith page */
 .box_top {
     display: flex;
     justify-content: center;
     align-items: center;
     background: var(--medium_light_primary);
     border: 1px solid var(--main_primary);
     direction: rtl;
     padding: 24px;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
}
 .custom_height {
     line-height: 94px;
}
 .notes_anchor {
     color: #000;
     font-weight: bold;
}
 .notes_anchor:hover {
     color: var(--main_primary);
}
 ul.bookmark_listing_inner li:hover {
     background: var(--light_primary);
}
 .button_nav_link.active {
     border: none;
}
 .toastify {
     border-top-left-radius: 10px !important;
     border-bottom-left-radius: 10px !important;
}
 .toast-close {
     opacity: 1 !important;
     padding: 0 0px 0 50px !important;
     color: #fff;
}
 .crossicon {
     color: white;
}
 .h_box_item, .dua_box_item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     border-bottom: 1px solid #d3d3d3;
     padding: 24px;
     background: white;
     text-decoration: none;
     color: #000;
     border: 1px solid #e9e9e9;
     box-shadow: 0px 0px 10px rgba(0,0,0,0.05);
}
 .h_box_item:first-child, .dua_box_item:first-child {
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
}
 .h_box_item:last-child, .dua_box_item:last-child {
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 20px;
}
 div#dua_tab .nav-link {
     padding-right: 0;
}
 .h_box_item {
     direction: rtl;
}
 .h_box_item:hover, .dua_box_item:hover {
     background: var(--light_primary);
     color: #000;
}
 .hadith_tab_box:hover .left_tab_text, .dua_tab_box:hover .dua_box {
     color: var(--main_primary);
}
 .hadith_tab_box, .dua_tab_box {
     position: relative;
     display: flex;
     align-items: center;
     border-radius: 20px;
     padding: 16px;
     background: white;
     border: 1px solid #d9d9d9;
     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
     justify-content: space-between;
}
 .hadith_header_inner {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     background: var(--main_secondry);
     padding: 24px;
}
 .jump_icon {
     background: none;
     border: none;
     padding: 30px;
     cursor: pointer;
}
 .jump_icon:hover svg path {
     fill: var(--main_primary);
}
 .custom_nav_tab .nav-link {
     border: none;
     padding-left: 0;
}
 .custom_nav_tab {
     display: flex;
     flex-wrap: nowrap;
     flex-direction: column;
     border-bottom: none;
}
 #dua_tabContent {
     height: 1515px;
     overflow-y: auto;
     overflow-x: hidden;
     padding: 3px 12px 0px 3px;
}
 div#dua_tab {
     height: 1386px;
     overflow-y: auto;
     overflow-x: hidden;
     padding-right: 8px;
}
 div#hadith_nav_tabContent {
     height: 1790px;
     overflow-y: auto;
     overflow-x: hidden;
     padding: 3px 12px 8px 3px;
}
 div#hadith_tab {
     height: 1920px;
     overflow-y: auto;
     overflow-x: hidden;
}
 .custom_nav_tab .nav-link.active .hadith_tab_box {
     border: 2px solid var(--main_secondry);
}
 .custom_nav_tab .nav-link {
     color: #000000;
}
 .left_tab_text {
     line-height: 54px;
     color: #000;
     text-align: left;
     margin-left: 16px;
}
 .r_arrow {
     font-size: 18px;
     margin-left: 16px;
     line-height: 24px;
}
 .arrow_slide {
     color: var(--main_secondry);
     font-size: 24px;
     cursor: pointer;
}
 .arrow_slide:last-child {
     margin-left: 10px;
}
 .arrow_slide:hover {
     color: var(--hover_secondary) 
}
 .arrow_icon {
     color: #fff;
     text-shadow: 2px 3px rgba(0,0,0,.15);
     font-size: 24px;
}
 .hadith_tab_icon {
     margin-right: 16px;
}
.icon_round {
    width: 30px;
    height: 30px;
    background: var(--main_primary);
    color: #fff;
    line-height: 32px;
    border-radius: 100px;
    text-align: center;
    display: inline-block;
    min-width: 30px;
    margin-right: 16px;
    font-size: 14px;
}
 .select_box {
     background: var(--light_primary);
     border: 1px solid #d9d9d9;
     width: 100%;
     position: relative;
     padding-left: 16px;
     border-radius: 40px;
}
 .hadith_select_dropdown {
     width: 100%;
     padding: 16px;
     border-radius: 40px;
}
 .hadith_list_item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     border-radius: 40px;
     padding: 16px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     margin-bottom: 16px;
}
 a.resetlink {
     font-size: 13px;
     color: var(--main_primary);
     display: block;
}
 .resetlink:hover {
     color: var(--hover_primary);
}
 .r_slider {
     margin-top: 16px;
     margin-bottom: 24px;
}
 .r_slider .rangeslider__handle:after {
     background-image: none;
}
 .r_slider .rangeslider--horizontal {
     height: 10px;
     width: 100%;
}
 .r_slider .rangeslider__fill {
     background: var(--main_primary);
     position: absolute;
     z-index: 2;
     box-shadow: none;
}
 .r_slider .rangeslider__handle {
     width: 28px;
     height: 28px;
     background: var(--main_primary);
     box-shadow: none;
     border: none;
}
 .r_slider .rangeslider {
     background: #E2E2E2;
     box-shadow: none;
}
 .rangeslider__handle {
     cursor: pointer;
     display: inline-block;
     width: 40px;
     height: 40px;
     position: absolute;
     z-index: 3;
     background: #fff -webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,0)),to(rgba(0,0,0,.1)));
     background: orange;
     background: orange;
     -webkit-box-shadow: 0 0 8px rgba(0,0,0,.3);
     box-shadow: none;
     border-radius: 50%;
}
 .r_slider .rangeslider .rangeslider__handle .tooltip {
     position: absolute;
     bottom: 50px;
     left: 50%;
     transform: translateX(-50%);
     border: 1px solid #707070;
     border-radius: 3px;
     background-color: #e4e4e4;
     padding: 4px;
     display: block;
     width: 200px;
}
 .r_slider output {
     display: none;
}
 .setting_modal .btn-close {
     position: absolute;
     right: 21px;
     top: 13px;
     font-size: 20px;
}
 .btn_second_modal.within_first_modal {
     width: 100%;
     border: none;
     padding: 0;
     margin: 0;
     background: transparent;
}
 .small_text {
     font-size: 13px;
     display: block;
}
 ul.custom_listing {
     width: 100%;
     overflow: hidden;
}
 ul.custom_listing li {
     border-bottom: 1px solid #d9d9d9;
}
/* checkbox styles */
 .radio_custom {
     opacity: 0;
     position: absolute;
}
 .radio_custom, .radio_custom_label {
     display: inline-block;
     vertical-align: middle;
     margin: 5px;
     cursor: pointer;
}
 .radio_custom_label {
     position: relative;
}
 .radio_custom + .radio_custom_label:before {
     content: '';
     background: #fff;
     border: 2px solid transparent;
     display: inline-block;
     vertical-align: middle;
     width: 20px;
     height: 20px;
     padding: 2px;
     position: absolute;
     right: 32px;
}
 .custom_listing .active label.radio_custom_label:before {
     background: var(--light_primary);
     content: "\f00c";
     font-family: 'FontAwesome';
     color: var(--main_primary);
     font-size: 30px;
     margin-top: 4px;
}
 .checkbox-custom:checked + .checkbox-custom-label:before {
     content: "\f00c";
     font-family: 'FontAwesome';
     color: var(--main_primary);
     font-size: 30px;
}
 .radio_custom + .radio_custom_label:before {
     border-radius: 50%;
}
 .radio_custom:checked + .radio_custom_label:before {
     content: "\f00c";
     font-family: 'FontAwesome';
     color: var(--main_primary);
     font-size: 30px;
     margin-top: 4px;
}
 .radio_custom_label {
     width: 100%;
     margin-top: 0;
     margin-bottom: 0;
     padding: 10px 14px;
}
 .custom_listing > .active {
     background: var(--light_primary);
}
 .about_modal .btn-close {
     position: absolute;
     right: 21px;
     top: 17px;
     font-size: 20px;
}
 .modal-open .modal {
     overflow-x: hidden;
     overflow-y: auto;
}
/* hadith single page styling */
 .topic {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     padding-left: 50px;
     padding-right: 50px;
}
 .prev_page {
     background: var(--focus_secondary);
     text-align: center;
     height: 100%;
     line-height: 90px;
     padding-left: 25px;
     padding-right: 25px;
     cursor: pointer;
}
 .f_awesome_icon i {
     font-size: 24px;
     cursor: pointer;
     padding-left: 8px;
     padding-right: 8px;
}
 .f_awesome_icon i:hover {
     color: var(--main_primary);
}
 .link_icon svg path {
     fill: #505050;
}
 .link_icon svg:hover path {
     fill: var(--main_primary);
}
 .hadith_single_top_parent {
     height: 90px;
}
 .setting_popup_div {
     background: var(--focus_secondary);
     text-align: center;
     line-height: 94px;
     height: 90px;
     padding-left: 20px;
     padding-right: 20px;
     box-shadow: none;
     border: none;
     cursor: pointer;
}
 .hadith_with_detail {
     border-radius: 20px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     overflow: hidden;
     margin-top: 30px;
}
 .round_box, .top_box {
     display: flex;
     justify-content: space-between;
     align-items: center;
     direction: rtl;
     background: var(--light_primary);
     padding: 24px;
     border: 1px solid var(--main_primary);
}
 .round_box {
     border-radius: 20px;
     margin-top: 30px;
}
 .top_box {
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
     overflow: hidden;
}
 .multiple_hadith_item {
     border: 1px solid var(--main_primary);
     padding: 24px;
     background: var(--light_primary);
     overflow: hidden;
     border-radius: 20px;
     margin-top: 16px;
}
 .close_btn_modal {
     border: none;
     background: none;
     line-height: 36px;
}
 .modal .modal-header button {
     background: none;
     opacity: 1;
     border: none;
}
 .bg_white {
     background-color: #fff !important;
     color: #000;
}
 .bg_white:hover {
     background-color: var(--main_primary) !important;
     color: #fff;
}
 .hadith_list_item:hover {
     background: var(--light_primary);
}
 .hadith_select_dropdown {
     -webkit-appearance: none;
     appearance: none;
}
 .select_d_arrow {
     position: absolute;
     right: 24px;
     top: 13px;
     font-size: 24px;
}
 .hadith_select_dropdown {
     border: none;
     background: var(--light_primary);
}
 .round_no {
     width: 30px;
     height: 30px;
     background: var(--light_primary);
     line-height: 30px;
     text-align: center;
     border-radius: 100px;
     color: #FE8F00;
     margin-bottom: 20px;
     display: flex;
     justify-content: center;
     font-family: 'MQ';
}
 .link_icon {
     width: 26px;
     background: no-repeat;
     border: none;
     margin-right: 8px;
}
 .warning_modal .modal-title {
     text-align: center;
     font-weight: bold;
     width: 100%;
     font-size: 20px;
}
 .warning_modal .btn-close {
     opacity: 1;
     margin-top: -17px;
}
 .warning_modal .modal-content {
     border-radius: 20px;
     overflow: hidden;
}
 .error_parag {
     font-size: 16px;
     font-weight: bold;
     color: #505050;
     line-height: 30px;
}
 .input_radio_item:checked, .input_radio_item:not(:checked) {
     position: absolute;
     left: -9999px;
}
 .input_radio_item:checked + label, .input_radio_item:not(:checked) + label {
     position: relative;
     padding-left: 28px;
     cursor: pointer;
     line-height: 20px;
     display: inline-block;
     color: #505050;
}
 .input_radio_item:checked + label:before, .input_radio_item:not(:checked) + label:before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     width: 20px;
     height: 20px;
     border: 1px solid var(--main_primary);
     border-radius: 100%;
     background: #fff;
}
 .input_radio_item:checked + label:after, .input_radio_item:not(:checked) + label:after {
     content: '';
     width: 12px;
     height: 12px;
     background: var(--main_primary);
     position: absolute;
     top: 4px;
     left: 4px;
     border-radius: 100%;
     -webkit-transition: all 0.2s ease;
     transition: all 0.2s ease;
}
 .input_radio_item:not(:checked) + label:after {
     opacity: 0;
     -webkit-transform: scale(0);
     transform: scale(0);
}
 .input_radio_item:checked + label:after {
     opacity: 1;
     -webkit-transform: scale(1);
     transform: scale(1);
}
 .warning_textarea {
     border: 1px solid var(--main_primary);
     background: var(--light_primary);
     height: 118px;
     width: 100%;
     padding: 16px;
     margin-top: 16px;
     border-radius: 5px;
     margin-bottom: 16px;
}
/* AL-quran css */
 select#translation_author {
     padding-right: 42px;
}
 select#tafseer_author {
     padding-right: 42px;
}
 .quran_boxes, .quran_verses {
     display: flex;
     align-items: center;
     width: 100%;
     justify-content: space-between;
     direction: rtl;
}
 .quran_verses {
     margin-top: 32px;
}
 .q_arabic_txt {
     font-family: 'MQ';
     color: #000000;
     margin-bottom: 0;
     font-size: 28px;
     text-align: right;
}
 .topic_heading {
     font-size: 20px;
     font-weight: bold;
     text-align: center;
}
 .middle_topic_modal {
     background: none;
     border: none;
     cursor: pointer;
}
 .topic_heading, .middle_topic_modal h2 {
     color: #fff;
}
 .middle_topic_modal:hover p, .middle_topic_modal:hover h2, .middle_topic_modal:hover .awesome_icon {
     color: var(--main_primary);
}
 .nav-tabs.quran_nav li a {
     border: 1px solid var(--main_primary);
}
 .nav-tabs.quran_nav li:first-child a {
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
}
 .nav-tabs.quran_nav li:last-child a {
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
}
 .custom_nav_btn:hover {
     background: var(--hover_primary);
     color: white;
}
 .custom_nav_btn:focus {
     background: var(--focus_primary);
     color: #fff;
}
 .custom_nav_btn {
     border-right: 1px solid var(--main_primary);
     width: 100%;
     background: var(--light_primary);
     color: #000000;
     text-transform: capitalize;
     box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
     font-size: 16px;
     text-align: center;
     padding: 10px;
     text-decoration: none;
     font-weight: bold;
     display: inline-block;
}
 .quran_translation {
     border-radius: 10px;
     overflow: hidden;
     display: inline-flex;
     border: 1px solid var(--main_primary);
}
 .quran_translation li {
     min-width: 130px;
     line-height: 45px;
}
 .quran_translation li:last-child a {
     border-right: none;
}
 .quran_translation li a.active, .quran_nav li a.active {
     background: var(--main_primary);
     color: white;
}
 .nav-tabs.quran_nav::-webkit-scrollbar {
     height: 6px;
}
 ul#quran_navigation::-webkit-scrollbar-thumb:horizontal {
     background: var(--main_primary);
     border-radius: 10px;
}
 .quran_translation_content {
     padding: 60px;
}
 .quran_translation_content .blur_box {
     padding: 24px;
     display: inline-block;
     margin-bottom: 10px;
     font-weight: normal;
}
 .quran_translation_content .blur_box:hover {
     background: #86B464;
}
 .quran_translation_content .blur_box:hover h6 , .quran_translation_content .blur_box:hover h3, .quran_translation_content .blur_box:hover p {
     color: #fff;
}
 .quran_translation_content {
     background: linear-gradient(91.08deg, rgba(92, 209, 245, 0.8) -35.06%, rgba(255, 214, 106, 0.6) 125.24%);
     backdrop-filter: blur(5px);
}
 .awesome_icon {
     color: #fff;
}
 .awesome_icon:hover {
     color: var(--main_primary);
}
 .select_img_icon svg:hover path {
     fill: var(--main_primary);
}
 .juzmodal_btn {
     position: absolute;
     right: 16px;
     top: 10px;
}
 .quran_verse {
     max-width: 95%;
     flex: 95%;
}
 .circle_dot {
     width: 15px;
     height: 15px;
     background: var(--main_primary);
     display: block;
     border-radius: 100px;
}
 .nav-tabs.quran_nav {
     overflow: auto;
     white-space: nowrap;
     flex-wrap: nowrap;
     overflow-y: hidden;
     height: 62px;
}
 .quran_nav li a {
     padding-left: 24px;
     padding-right: 24px;
}
 .quran_nav li:first-child {
     margin-left: 1px;
}
 .quran_nav li {
     margin-left: -1px;
}
 .custom_nav_item.active {
     background: var(--main_primary);
     color: white;
}
 .custom_nav_item:hover {
     color: #505050;
}
 .quran_listing_inner {
     overflow-x: hidden;
     overflow-y: auto;
     height: 450px;
}
 .box_highlight {
     background: #FAFFF6;
}
 .alquran_item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     direction: rtl;
     width: 100%;
     padding: 24px;
     background: var(--medium_light_primary);
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     border: 1px solid var(--main_primary);
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
}
 select.qari_voices {
     width: 82%;
     height: 46px;
     background: var(--light_primary);
     border-radius: 5px;
     padding-left: 10px;
}
 .first_row_listing, .second_row_listing {
     display: flex;
     justify-content: space-between;
     align-items: center;
     direction: rtl;
}
 .second_row_listing {
     padding-top: 10px;
}
 .quran_listing_item:hover {
     background: var(--light_primary);
}
 .number_box {
     width: 30px;
     height: 30px;
     line-height: 30px;
     text-align: center;
     background-color: var(--medium_light_primary);
     color: #000;
     margin-right: 8px;
}
 .cross_f_awesome, .pencil_f_awesome {
     width: 34px;
     height: 33px;
     line-height: 35px;
     font-size: 16px;
     border-radius: 100px;
     text-align: center;
     display: inline-block;
     border: 1px solid #d9d9d9;
}
 .cross_f_awesome:hover, .pencil_f_awesome:hover {
     background: var(--hover_primary);
     color: white;
}
 #deleteModal, #deleteModal_notes {
     backdrop-filter: blur(0px);
     position: fixed;
}
 .color_borderline {
     height: auto;
     border-radius: 100px;
     max-width: 10px;
     flex: 2%;
}
 .modal.deleteModal .modal-dialog, .modal.colorModal .modal-dialog , .modal.style_control .modal-dialog {
     position: fixed;
     top: auto;
     right: 0;
     left: 0;
     bottom: 0;
     transform: translate(0%, 0%);
     margin-bottom: 0;
}
 ul.highlight_list {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     padding: 0;
}
 .highlight_list li {
     height: 34pt;
     width: 34pt;
}
 .red_line {
     width: 1px;
     height: 52px;
     position: absolute;
     top: 0;
     background-color: red;
     transform: rotate(45deg);
     margin-top: -7px;
     margin-right: 0;
}
 .colorModal {
     backdrop-filter: blur(0px);
}
 .color_f_awesome {
     position: absolute;
     top: 16px;
     right: 18px;
     font-size: 20px;
     color: #000000;
}
 .highlight_list li {
     display: flex;
     justify-content: center;
     border-radius: 6px;
     margin: 2px;
}
 .hightlight {
     background: #EFE9A8;
     display: inline-block;
     padding: 14px 10px 6px 10px;
     border-radius: 8px;
}
/* Notes modal css */
 textarea.notes {
     width: 94%;
     height: 34.6em;
     line-height: 31px;
     background-image: -webkit-linear-gradient(left, white 0, transparent 0), -webkit-linear-gradient(right, white 0, transparent 0), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
     background-repeat: repeat-y;
     background-size: 100% 100%, 100% 100%, 100% 31px;
     background-attachment: local;
     border-bottom-right-radius: 20px;
     padding-left: 10px;
     resize: none;
     overflow: auto;
     outline: none;
     box-shadow: none;
     border-color: #ced4da;
}
 textarea.notes:hover {
     resize: none;
     overflow: auto;
     outline: none;
     box-shadow: none;
     border-color: #ced4da;
}
 .save_link {
     color: var(--main_primary);
     font-size: 20px;
     cursor: pointer;
     font-weight: bold;
}
 .save_link:hover, .cancel_link:hover {
     color: var(--hover_primary);
}
 .notesmodal .btn-close {
     margin: 0;
     background: none;
     opacity: 1;
     font-size: 20px;
     color: #000;
     margin: 0px;
}
 .notes_modal_title {
     border-bottom: 2px dashed black;
}
 .tafseer_modal .btn-close {
     position: absolute;
     right: 27px;
     top: 20px;
}
 .tafseer_btn_third_modal.tafseer_within_first_modal {
     width: 100%;
     border: none;
     background: transparent;
}
 .modal.tafseer_modal {
     backdrop-filter: blur(0px);
}
/* Prayer Log */
 #myChart, #myChart2 {
     width: 80%;
     max-width: 100%;
     margin: auto;
     border: 1px solid #d3d3d3;
     border-radius: 18px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     margin-top: 20px;
     padding: 20px;
}
 ul#mychartTab li a {
     border: none;
     background: var(--main_primary);
     border-radius: 10px;
     color: white;
     margin-left: 6px;
     margin-right: 6px;
     height: 51px;
     display: flex;
     align-items: center;
     justify-content: center;
}
 ul#mychartTab {
     border-bottom: none;
}
 ul#mychartTab li a svg path {
     fill: #fff;
}
/* Dua CSS */
 .dua_icon {
     width: 60px;
     margin-right: 16px;
     line-height: 0;
}
 .dua_box {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
}
 .chevron_arrow {
     color: var(--main_primary);
     font-size: 27px;
     cursor: pointer;
}
 .chevron_arrow:hover {
     color: var(--main_primary);
}
 .b_mark_round {
     width: 30px;
     height: 30px;
     background: var(--medium_light_primary);
     border-radius: 100px;
     color: var(--main_primary);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-left: 20px;
     cursor: pointer;
}
/* Tasbihat */
 .tasbihat_main_bg {
     background-image: url(../img/tasbihat/bgimg.svg);
}
 .box_style {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: var(--light_primary);
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     padding: 24px;
     border-radius: 20px;
     margin-bottom: 30px;
}
/* 99 Names */
 .banner_box {
     position: absolute;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
}
/* .main_bg > img {
     object-fit: cover;
     height: 100%;
}*/
 .names_item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: url(../img/99names/item_bg.svg);
     border-radius: 20px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     margin-bottom: 20px;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: 100%;
     position: relative;
}
 .right_arrow {
     position: absolute;
     content: "\f0a9";
     background: var(--main_primary);
     right: 0;
     width: 65px;
     height: 100%;
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 30px;
     border-top-right-radius: 16px;
     border-bottom-right-radius: 16px;
}
 .right_arrow:hover {
     color: #fff;
}
 .names_item.active {
     background: url(../img/99names/active_img.svg);
     background-size: cover;
     border: 2px solid var(--main_primary);
}
 .names_inner_item {
     width: 94%;
     direction: rtl;
     display: flex;
     align-items: center;
     padding: 16px 30px;
}
 .name_nextprev_wrapper {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 20px;
}
 .names_item svg {
     width: 66px;
     height: 66px;
}
/* Volume slider */
 .vol_slider {
     width: 100%;
     margin: 12px;
}
 .font_sizer {
     margin: 12px 0px;
     padding-bottom: 18px;
}
 .min_value, .max_value {
     float: left;
     width: 10vw;
     color: #6c6d70;
     text-align: right;
     font-weight: bold;
}
 .vol_slider .max_value {
     display: none;
}
 .current_value {
     position: absolute;
     top: -48px;
     left: 50%;
     width: 37px;
     height: 33px;
     text-align: center;
     color: #000;
     font-weight: bold;
     white-space: nowrap;
     background: var(--medium_light_primary);
     line-height: 34px;
     font-size: 14px;
     border-radius: 5px;
}
 .current_value:before {
     position: absolute;
     content: "";
     left: 50%;
     bottom: -8px;
     transform: translateX(-50%);
     width: 0;
     height: 0;
     border: 4px solid transparent;
     border-top-color: var(--medium_light_primary);
}
 .range {
     position: relative;
     float: left;
     width: 100%;
}
 .vol_slider input[type=range] {
     -webkit-appearance: none;
     display: block;
     width: 100%;
     height: 10px;
     padding: 0;
     border-radius: 4px;
     background: #6c6d70;
     box-sizing: content-box;
}
 .vol_slider input[type=range]:focus {
     outline: none;
}
 .vol_slider input[type=range]::-webkit-slider-thumb {
     -webkit-appearance: none;
     width: 20px;
     height: 20px;
     border-radius: 25px;
     background: #fff;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     z-index: 99999;
}
/* Volume slider end */
 #player {
     width: 350px;
     height: 50px;
     max-width: 100%;
     position: relative;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: 16px;
}
 .audio_progress {
     height: .5rem;
     width: 100%;
     position: relative;
     background: #F1F1F1;
     border: 1px solid #DDDDDD;
     box-shadow: inset 2px 4px 2px rgba(0, 0, 0, 0.1);
     border-radius: 5px;
}
 .audio_progress .bar {
     height: 100%;
     background-color: var(--main_primary);
}

 #audio_progress_handle {
     display: block;
     position: absolute;
     z-index: 1;
     margin-top: -1px;
     margin-left: 0px;
     width: 20px;
     height: 20px;
     transform: rotate(45deg);
     border-radius: 100%;
     background-color: #fff;
     box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
     cursor: pointer;
}
 div#audio_player_container {
     width: 100%;
     margin-left: 10px;
     margin-right: 10px;
}
 .draggable {
     float: left;
     margin: 0 10px 10px 0;
}
 .audiotrack {
     position: sticky;
     bottom: 10px;
     margin: auto;
     width: 645px;
     max-width: 100%;
     padding: 16px 30px;
     margin: auto;
     border-radius: 30px;
     background: #fff;
     gap: 1rem;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     z-index: 9;
}
 .audiotrack_modal .modal-dialog {
     min-height: 100%;
     margin: 0 0 0 auto;
     background: #fff;
     max-width: 430px;
     padding: 14px;
}
 .modal.audiotrack_modal.fade .modal-dialog {
     -webkit-transform: translate(100%,0)scale(1);
     transform: translate(100%,0)scale(1);
}
 .modal.audiotrack_modal.show .modal-dialog {
     -webkit-transform: translate(0,0);
     transform: translate(0,0);
     display: flex;
     align-items: stretch;
     -webkit-box-align: stretch;
     height: 100%;
}
 .audiotrack_modal .modal-dialog, .audiotrack_modal .modal-content {
     background: linear-gradient(160.4deg, rgba(0, 0, 0, 0.8) -1.8%, rgba(0, 0, 0, 0.6) 105.13%);
}
 .audiotrack_modal .modal-title {
     color: var(--main_primary);
     font-weight: bold;
}
 .select_style {
     background: var(--light_primary);
     width: 100%;
     height: 46px;
     color: #000;
     padding-left: 8px;
     border-radius: 5px;
     font-size: 16px;
     border: 1px solid #d9d9d9;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cstyle%3Esvg%7Bfill:%23505050%7D%3C/style%3E%3Cpath d='M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-position-x: 98%;
     background-position-y: 14px;
}
 .c_listing li .radio_custom + .radio_custom_label:before {
     width: 0;
     height: 0;
     background: #000;
}
 .c_listing li .radio_custom:checked + .radio_custom_label:before {
     margin-top: -7px;
     font-size: 18px;
}
 .c_listing li .radio_custom_label {
     padding-top: 14px;
     padding-bottom: 14px;
}
 .c_listing li {
     border-bottom: 1px solid #474747;
}
/* Country Listing */
 .country_list .blur_box {
     color: var(--color_secondry);
     height: 120px;
}
 .city_name, .province_name {
     display: block;
     width: 100%;
     text-align: left;
     padding-left: 22px;
}
 .city_name {
     color: var(--color_secondry);
     font-size: 17px;
}
 .province_name {
     font-weight: normal;
}
 .country_list .blur_box:hover p {
     color: #fff;
}
 .country_list .blur_box:hover {
     background: var(--main_secondry);
     color: #fff;
}
 .alphabet_ul, .alphabet_ul li a {
     display: flex;
     justify-content: space-between;
}
 ul.alphabet_ul li {
     display: flex;
     align-items: center;
}
 ul.alphabet_ul li.active a {
     color: #fff;
     background: var(--main_secondry);
     border-radius: 5px;
}
 ul.alphabet_ul li.active {
     position: relative;
}
 ul.alphabet_ul li.active:before {
     content: "";
     position: absolute;
     border-bottom: 3px solid var(--main_secondry);
     bottom: 0;
     left: 0;
     right: 0;
}
 .alphabet_ul {
     background: #FFFDF4;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     border-radius: 100px;
     padding: 0px 20px 0px 0;
     margin-bottom: 60px;
     flex-wrap: wrap;
}
 .alphabet_ul li a {
     display: inline-flex;
     align-items: center;
     color: var(--main_secondry);
     cursor: pointer;
     font-weight: bold;
     width: 30px;
     height: 30px;
     justify-content: center;
}
 ul.alphabet_ul li a:hover {
     color: var(--main_primary);
}
 ul.alphabet_ul li:first-child a {
     border-radius: 100px;
     padding: 26px 33px;
     color: white;
     width: inherit;
}
/* zakat calculator */
 .accordion-button.collapsed, .accordion-button:not(.collapsed) {
     background: var(--medium_light_primary);
     color: #000;
     font-weight: bold;
     padding: 22px 24px;
     border: 2px solid var(--main_primary);
}
 .zakat_accordion .accordion_item .accordion-button {
     align-items: start;
}
 .accordion-button.collapsed {
     border-radius: 20px;
     box-shadow: 0 6px 8px -4px rgba(0,0,0,0.10);
     margin-bottom: 20px;
}
 .accordion-button:not(.collapsed) {
     border-top-right-radius: 20px;
     border-top-left-radius: 20px;
     box-shadow: none;
}
 .accordion-button {
     font-size: 18px;
}
 .accordion-button::after {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cstyle%3Esvg%7Bfill:%23505050%7D%3C/style%3E%3Cpath d='M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'/%3E%3C/svg%3E");
}
 .accordion-button:not(.collapsed)::after {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cstyle%3Esvg%7Bfill:%23505050%7D%3C/style%3E%3Cpath d='M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'/%3E%3C/svg%3E");
}
 .accordion .accordion-button::after {
     width: 17px;
     height: 17px;
     background-size: 16px;
     top: 24px;
     position: absolute;
     right: 18px;
     bottom: 0;
}
 .custom_input {
     padding: 12px 20px;
     background: var(--light_primary);
     border-radius: 10px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}
 .currency {
     position: absolute;
     right: 15px;
     top: 13px;
     font-size: 18px;
}
 .total_assets {
     padding: 40px;
     border-radius: 20px;
     box-shadow: 6px 6px 8px -4px rgba(0,0,0,0.30);
     margin-top: 50px;
}
 .cutom_accord_body {
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 20px;
     margin-bottom: 30px;
     padding: 40px 0 0;
}
 .weight_tab li {
     padding: 0;
}
 .weight_dropdown {
     position: absolute;
     top: 4px;
     right: 0px;
     margin: 3px;
     padding: 3px 8px;
}
 .weight_no {
     width: 118px;
     display: inline-flex;
     border: 1px solid #d9d9d9;
     padding: 10px;
     border-radius: 10px;
     align-items: center;
}
 .weight_tab {
     border-radius: 10px;
     overflow: hidden;
     display: inline-flex;
     height: 44px;
     border: 1px solid var(--main_primary);
     margin-bottom: 40px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     margin: 10px 26px;
}
 .weight_tab li button {
     background: var(--light_primary);
     color: var(--main_primary);
     padding: 10px 26px;
     border: none;
     font-weight: bold;
     line-height: 24px;
}
 ul.weight_tab li:before {
     width: 0;
     height: 0;
}
 .weight_tab li .active {
     background: var(--main_primary);
     color: #fff;
}
 .custom_btn {
     width: 155px;
     margin-left: 10px;
}
 .custom_input:focus {
     color: #000;
     border: 1px solid var(--main_primary);
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}
 .weight_dropdown .dropdown_toggle::after {
     content: "\f078";
     position: absolute;
     font-family: 'FontAwesome';
     right: 6px;
     color: #505050;
     font-size: 11px;
     top: 9px;
     border-radius: 0;
     border: none;
}
 .weight {
     width: 128px;
     display: inline-flex;
     border: 1px solid #d9d9d9;
     padding: 10px;
     border-radius: 10px;
     background: var(--light_primary);
}
 .dropdown_toggle {
     white-space: nowrap;
     width: 25px;
     display: inline-flex;
}
/* Kalima page */
 .kalima_main_bg {
     background: url(../img/banner_imgs/kalima.webp);
}
 .img_box {
     background: url(../img/kalima/kalimas_bg.png);
     display: inline-flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     padding: 30px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     margin-bottom: 10px;
     border-radius: 18px;
     margin-bottom: 20px;
     background-repeat: no-repeat;
     background-size: cover;
}
 .secondry_box_top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
     overflow: hidden;
     background: var(--main_secondry);
}
 .kalima_img {
     text-align: center;
     padding: 20px 40px 40px;
}
 .kalima_img img {
     border-radius: 20px;
}
/* islamic media */
 .media_main_bg {
     background: url(../img/banner_imgs/islamic_media.webp);
}
 .calendar-box {
     text-align: center;
     padding: 20px;
     border: 1px solid #ccc;
     border-radius: 10px;
     background-color: white;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     width: 300px;
}
 .calendar-title {
     font-size: 18px;
     margin-bottom: 10px;
     color: #333;
}
 .calendar {
     background-color: white;
     border-radius: 10px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     width: 300px;
     position: absolute;
     z-index: 1;
     display: none;
}
 .header {
     background-color: #3498db;
     color: white;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
}
 #prevBtn, #nextBtn {
     background: none;
     border: none;
     color: white;
     cursor: pointer;
     font-size: 16px;
}
 #monthYear {
     font-size: 18px;
     font-weight: bold;
}
 .days {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 5px;
     padding: 10px;
}
 .day {
     padding: 10px;
     text-align: center;
     border-radius: 5px;
     cursor: pointer;
}
 .day.current {
     background-color: #3498db;
     color: white;
}
 .day.selected {
     background-color: #2ecc71;
     color: white;
}
 #dateInput {
     width: 100%;
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
     font-size: 14px;
     outline: none;
     cursor: pointer;
}
 .channel_links {
     background: var(--medium_light_primary);
     font-weight: bold;
     font-size: 18px;
     padding: 24px 40px 24px;
     color: #000;
     border-radius: 20px;
     display: block;
     border: 1px solid var(--main_primary);
     margin-bottom: 18px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}
 .channel_links:hover {
     color: var(--main_primary);
}
 .channel_img {
     box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
     border-radius: 30px;
     overflow: hidden;
}
 .channel_img, .radio_channel {
     margin: auto;
     width: 130px;
     height: 130px;
     position: relative;
     cursor: pointer;
}
 .owl-carousel.channel_icons .icon_parag {
     font-weight: bold;
     font-size: 16px;
     padding-top: 14px;
}
 .radio_channel i {
     display: none;
}
 .radio_channel.active i {
     position: absolute;
     left: 0;
     right: 0;
     margin: auto;
     top: 0;
     text-align: center;
     font-size: 30px;
     color: #fff;
     display: block;
}
 .select_option{
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
}
 input.d_picker, .select_option {
     width: 100%;
     height: 46px;
     background: var(--light_primary);
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     padding: 10px 8px 10px;
     border: 0;
     text-indent: 10px;
     color: #000000;
     font-size: 16px;
     border-radius: 10px;
     position: relative;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cstyle%3Esvg%7Bfill:%23505050%7D%3C/style%3E%3Cpath d='M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: 97%;
}
 .ui-datepicker-calendar tbody td a.ui-state-active {
     background-color: var(--main_primary);
}
 .ui-datepicker-calendar tbody td a:hover {
     background-color: var(--main_primary);
     color: #fff;
}
 input.d_picker:focus {
    outline: none;
}
 #ui-datepicker-div {
     display: none;
     background-color: #fff;
     box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.1);
     margin-top: 0.25rem;
     border-radius: 0.5rem;
     padding: 0.5rem;
}
 table.ui-datepicker-calendar {
     border-collapse: collapse;
     border-spacing: 0;
}
 .ui-datepicker-calendar thead th {
     padding: 0.25rem 0;
     text-align: center;
     font-size: 0.75rem;
     font-weight: 400;
     color: #78909C;
}
 .ui-datepicker-calendar tbody td {
     width: 2.5rem;
     text-align: center;
     padding: 0;
}
 .ui-datepicker-calendar tbody td a {
     display: block;
     border-radius: 0.25rem;
     line-height: 2rem;
     transition: 0.3s all;
     color: #546E7A;
     font-size: 0.875rem;
     text-decoration: none;
     height: 32px;
     width: 32px;
     border-radius: 100%;
}
 .ui-datepicker-calendar tbody td a:hover {
     background-color: #E0F2F1;
}
 .ui-datepicker-calendar tbody td a.ui-state-active {
     background-color: #009688;
     color: white;
}
 .ui-datepicker-header a.ui-corner-all {
     cursor: pointer;
     position: absolute;
     top: 0;
     width: 2rem;
     height: 2rem;
     margin: 0.5rem;
     border-radius: 0.25rem;
     transition: 0.3s all;
}
 .ui-datepicker-header a.ui-corner-all:hover {
     background-color: #ECEFF1;
}
 .ui-datepicker-header a.ui-datepicker-prev {
     left: 0;
     background: url("data:image/svg+xml base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==");
     background-repeat: no-repeat;
     background-size: 0.5rem;
     background-position: 50%;
     transform: rotate(180deg);
}
 .ui-datepicker-header a.ui-datepicker-next {
     right: 0;
     background: url('data:image/svg+xml base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==');
     background-repeat: no-repeat;
     background-size: 10px;
     background-position: 50%;
}
 .ui-datepicker-header a>span {
     display: none;
}
 .ui-datepicker-title {
     text-align: center;
     line-height: 2rem;
     margin-bottom: 0.25rem;
     font-size: 0.875rem;
     font-weight: 500;
     padding-bottom: 0.25rem;
}
 .ui-datepicker-week-col {
     color: #78909C;
     font-weight: 400;
     font-size: 0.75rem;
}
 .gallery_main_bg {
     background: url(../img/banner_imgs/islamic_gallery.webp);
}
 .image_gallery {
     margin-top: 40px;
     overflow: hidden;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
}
 .img_wrapper {
     position: relative;
     margin-top: 15px;
     border-radius: 40px;
     overflow: hidden;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     margin-bottom: 8px;
     padding: 0;
     margin: 10px;
     width: 31.33%;
     display: none;
}
 .show {
     display: block;
}
 .share_arrow {
     right: 32px;
     top: 27px;
     cursor: pointer;
}
 .img_overlay {
     background: rgba(0, 0, 0, 0.5);
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     opacity: 0;
}
 .img_overlay i {
     color: #fff;
     font-size: 3em;
}
 .box_overlay {
     background: rgba(0, 0, 0, 0.8);
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
}
 .box_overlay img {
     -o-object-fit: contain;
     object-fit: contain;
     border-radius: 20px;
     background: #fff;
}
 .overlay_img_container {
     text-align: center;
     background: #fff;
     width: 32%;
     padding: 17px 10px 23px;
     border-radius: 20px;
}
 .overlay_share_btn {
     margin-top: 16px;
}
 #shareModal_slider {
     z-index: 9999;
}
 #nextButton {
     right: 23%;
}
 #prevButton {
     left: 23%;
}
 #prevButton, #nextButton {
     color: #fff;
     font-size: 2em;
     transition: opacity 0.8s;
     position: absolute;
     font-size: 2em;
     cursor: pointer;
}
 #nextButton:hover, #prevButton:hover {
     opacity: 0.7;
}
 #exitButton {
     color: #fff;
     font-size: 2em;
     transition: opacity 0.8s;
     position: absolute;
     top: 15px;
     right: 15px;
     cursor: pointer;
}
 #exitButton:hover {
     opacity: 0.7;
}
 .owl-carousel.islamicgallery_carousel .owl-item button.active  {
     background: var(--main_primary);
     color: #fff;
}
 ul#myBtnContainer .owl-item:last-child button {
     border-right: 1px solid var(--main_primary);
}
 .owl-carousel.islamicgallery_carousel .owl-nav {
     display: block;
}
 .owl-carousel.islamicgallery_carousel .owl-nav button.owl-prev, .owl-carousel.islamicgallery_carousel .owl-nav button.owl-next {
     position: absolute;
     top: 10px;
     font-size: 24px;
}
 .owl-carousel.islamicgallery_carousel .owl-nav button.owl-prev {
     left: 18px;
}
 .owl-carousel.islamicgallery_carousel .owl-nav button.owl-next {
     right: 18px;
}
 #myBtnContainer {
     display: inline-flex;
     justify-content: center;
}
 #myBtnContainer .owl-item button {
     color: #000;
     font-weight: bold;
     text-transform: capitalize;
     border-radius: 0;
     padding: 13px 10px;
     width: 100%;
}
 #myBtnContainer .owl-item button.active {
     background: var(--main_primary);
     color: #fff;
}

.owl-carousel.islamicgallery_carousel .owl-stage-outer {
    width: 90%;
    margin: auto;
}


#myBtnContainer .owl-item button {
    border-left: 1px solid var(--main_primary);
    border-top: 1px solid var(--main_primary);
    border-bottom: 1px solid var(--main_primary);
}



 .link_style {
     border: 2px solid var(--main_primary);
     display: flex;
     align-items: center;
     border-radius: 12px;
     background: var(--light_primary);
     margin-left: 8px;
     margin-right: 8px;
     height: 51px;
     width: 68px;
     min-width: 68px;
     text-align: center;
     justify-content: center;
     cursor: pointer;
     font-size: 30px;
     padding: 8px;
}
 .drop_icon, .font_awesome_icon{
     border: 2px solid var(--main_primary);
     border-radius: 12px;
     background: var(--light_primary);
     margin-left: 8px;
     margin-right: 8px;
     height: 51px;
     width: 68px;
     min-width: 68px;
     color: var(--main_primary);
     font-size: 40px;
     line-height: 40px;
     display: flex;
     align-items: center;
     transition: all 0.3s;
     text-align: center;
     justify-content: center;
     padding: 3px 0px 0px 0px ;
}
 .font_awesome_icon {
     font-size: 30px;
}
 .font_awesome_icon:hover{
     background-color: var(--main_primary);
     color: #fff;
}
 .link_style a {
     display: flex;
     align-items: center;
}
 .drop_icon_toggle i{
     font-size: 40px;
}
 .key_icon{
     font-size: 26px;
}
 svg.graph_icon {
     height: 25px;
}

 .datepicker_label {
     font-size: 16px;
     font-weight: 400;
     display: block;
     margin-bottom: 0.5rem;
     color: var(--main_primary);
     border: none;
     padding: 20px;
     border-radius: 0.5rem;
     background: var( --medium_light_primary);
     width: 100%;
     margin-left: 6px;
     margin-right: 6px;
}
 .datepicker_input {
     border-radius: 5px;
     border: 1px solid transparent;
     padding: 10px;
     font-size: 16px;
     color: #000;
     width: 100%;
     margin-top: 0.5rem;
}
 .datepicker_input:focus {
     outline: none;
}
 .years_dropdown {
     width: 230px;
     text-align: center;
     padding: 0;
}
 .years_dropdown li {
     line-height: 30px;
     cursor: pointer;
}
 .years_dropdown li:hover {
     background: var(--medium_light_primary);
}
 .log_calendar {
     min-height: 312px;
}
 .log_calendar thead th {
     font-size: 16px;
}
 .log_calendar tr td {
     line-height: 44px;
     font-size: 16px;
}
 .log_calendar tbody tr {
     height: 38px;
}
 .table.log_calendar>:not(caption)>*>* {
     padding: 0px;
}
 .prayerlog-dropdown li svg {
     margin-right: 19px;
}
 .prayerlog-dropdown li i {
     margin-right: 10px;
     width: 24px;
}
 .prayerlog-dropdown li a {
     border-bottom: 1px solid #d9d9d9;
     padding: 10px 20px;
}
 .prayerlog-dropdown {
     padding-top: 0;
     padding-bottom: 0;
}
 ul#mychartTab {
     margin-right: 85px;
}

.nav-tabs.modal_graph_tabs li a {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto !important;
}

ul#mychartTab li a , ul#mychartTab li a.active {
    position: absolute;
}
ul#mychartTab li a {
    z-index: 9;
}
 ul#mychartTab li a.active {
     z-index: 1;
}
 .log_reminder li {
     border-radius: 100px;
     border: 1px solid #d9d9d9;
     margin-bottom: 15px;
     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.10);
     text-align: center;
     font-weight: bold;
}
 .log_reminder .active label.radio_custom_label:before {
     position: absolute;
     right: 28px;
     top: 0px;
     font-size: 20px;
}
 .log_reminder .radio_custom + .radio_custom_label:before {
     margin-right: 0px;
     float: inherit;
     right: 10px;
     position: absolute;
}
 .round_item {
     width: 30px;
     height: 30px;
     border-radius: 100px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #000;
}
 .primary_shade span {
     background: var(--main_primary);
     color: #fff;
}
/* Loader */
/* keyFrames */
 @-webkit-keyframes rotation {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 .loader-18 {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     display: inline-block;
     border-top: 4px solid var(--main_primary);
     border-right: 4px solid transparent;
     -webkit-animation: rotation 1s linear infinite;
     animation: rotation 1s linear infinite;
}
 .loader-18:after {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 48px;
     height: 48px;
     border-radius: 50%;
     border-bottom: 4px solid var(--main_secondry);
     border-left: 4px solid transparent;
}
 .loader-19 {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     display: inline-block;
     border-top: 4px solid #FFF;
     border-right: 4px solid transparent;
     -webkit-animation: rotation 1s linear infinite;
     animation: rotation 1s linear infinite;
}
/* Account setting bg */
 .account_setting_bg {
     background: url(../img/banner_imgs/account_setting.webp);
}
 .nav_custom_pills {
     padding-right: 50px;
     border-right: 1px solid #d9d9d9;
}
 .vertical_navlinks.active {
     background: var(--medium_light_primary);
     border: 1px solid var(--main_primary);
     border-radius: 100px;
     font-weight: bold;
     color: var(--main_primary);
}
 .vertical_navlinks {
     background: none;
     border: none;
     margin-bottom: 14px;
     margin-right: 20px;
     width: 180px;
     height: 52px;
     font-size: 20px;
}
 .profile_img {
     border-radius: 10px;
     overflow: hidden;
     margin-right: 14px;
}
 .transparent_btn:hover i {
     color: #fff;
}
/* Features page */
 .features_bg {
     background: url(../img/banner_imgs/features.webp);
}
 .videoWrapper {
     position: relative;
     padding-bottom: 35.25%;
     height: 0;
     width: 80%;
     margin: auto;
     border-radius: 40px;
     overflow: hidden;
     margin-top: 40px;
}
 .videoWrapper iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
 .video-preview-image {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: top left;
     background-repeat: no-repeat;
     z-index: 2;
     cursor: pointer;
}
 .video-preview-image:after {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     content: "";
     width: 50px;
     height: 50px;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cstyle%3Esvg%7Bfill:%23ffffff%7D%3C/style%3E%3Cpath d='M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9V344c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z'/%3E%3C/svg%3E");
     background-position: top left;
     background-repeat: no-repeat;
     background-size: 46px;
}
 .feature_carousel_item {
     width: 98%;
     margin: auto;
     margin-top: 50px;
}
 .feature_img img {
     height: inherit;
}
 .feature_carousel i {
     color: #000;
}
 .feature_carousel i:hover {
     color: var(--main_primary);
}
 .app_galery {
     background: url(../img/features/gallerybg.jpg);
     background-size: cover;
     padding-top: 70px;
     padding-bottom: 70px;
     margin-bottom: 20px;
}
 .gallery_img img {
     border-radius: 30px;
}
 .app_galery .owl-dots {
     text-align: center;
     padding-top: 50px;
}
 .app_galery .owl-dots button.active {
     background: var(--main_primary);
     border: 1px solid var(--main_primary);
     width: 20px;
     height: 20px;
     border-radius: 100px;
     margin-right: 11px;
     outline: none;
}
 .app_galery .owl-dots button {
     border: 1px solid var(--main_primary);
     width: 20px;
     height: 20px;
     border-radius: 100px;
     margin-right: 11px;
}
 .feature_parag {
     color: #000;
     overflow: hidden;
     width: 100%;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
}
 .dynamic_content h1 {
     font-weight: bold;
     color: var(--main_primary);
     margin-bottom: 16px;
}
 .dynamic_content h2 {
     font-weight: 600;
     margin-bottom: 20px;
}
 .dynamic_content h3 {
     font-weight: bold;
     font-size: 22px;
     margin-bottom: 16px;
}
 .dynamic_content h4 {
     font-weight: bold;
     color: #000;
     margin-bottom: 16px;
}
 .dynamic_content h5 {
     color: var(--main_secondry);
     font-weight: bold;
     margin-bottom: 16px;
}
 .dynamic_content img {
     border-radius: 10px;
}
 .dynamic_content .table1, .dynamic_content .table2 {
     padding: 40px;
     background: var(--light_primary);
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     border-radius: 20px;
     margin-top: 30px;
     margin-bottom: 30px;
}
 .dynamic_content .table2 table, .dynamic_content .table1 table {
     width: 100%;
}
 .dynamic_content .table1 tr td.eng_text {
     text-align: right;
}
 .dynamic_content .table2 .arabic_font {
     color: var(--main_primary);
     font-size: 22px;
}
 .dynamic_content .table1 td span , .dynamic_content .table2 td span {
     font-weight: bold;
}
 .dynamic_content .arabic_font {
     direction: rtl;
}
 .dynamic_content blockquote {
     padding: 1rem;
     border-left: 7px solid var(--main_secondry);
}
 .dynamic_content blockquote p {
     font-size: 18px;
}
 .dynamic_content p {
     color: #505050;
     margin-bottom: 16px;
}
 .dynamic_content a {
     color: var(--main_secondry);
}
 .dynamic_content ul li {
     position: relative;
     padding-left: 20px;
     line-height: 30px;
}
 .dynamic_content ul li span {
     color: var(--main_secondry);
     font-weight: bold;
}
 .dynamic_content ul li:before {
     width: 10px;
     height: 10px;
     background: orange;
     position: absolute;
     content: "";
     border-radius: 100px;
     top: 8px;
     left: 0;
}
 .dynamic_content ol {
     padding-left: 24px;
}
 .dynamic_content ol li {
     color: #505050;
     line-height: 30px;
}
 .content {
     background: #fff;
     position: relative;
}
 .dynamic_content .blockquote_center {
     text-align: center;
}
 .dynamic_content .blockquote_center p {
     line-height: 30px;
}
 .dynamic_content .zakat_btn button {
     background: var(--main_secondry);
     color: #fff;
     border: none;
     padding: 12px 26px;
     font-weight: bold;
     border-radius: 100px;
}
 .dynamic_content .zakat_btn {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 24px;
}
 .dynamic_content .zakat_btn h2 {
     margin-bottom: 0;
}
 .dynamic_content .dynamic_box {
     background: var(--light_primary);
     padding: 50px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     border-radius: 20px;
     margin-top: 20px;
     margin-bottom: 20px;
     text-align: center;
}
 .dynamic_content .dynamic_box h4 {
     font-weight: bold;
     color: #000;
     margin-bottom: 16px;
}
 .dynamic_content .dynamic_box h5 {
     color: var(--main_primary);
     font-weight: bold;
     width: 80%;
     margin: auto;
     line-height: 26px;
     padding-bottom: 16px;
}
 .dynamic_box p {
     font-size: 20px;
     color: #505050;
     margin-bottom: 16px;
}
 ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
}
 ::-webkit-scrollbar-track {
     background: linear-gradient(180deg, rgba(217, 217, 217, 0.8) 0%, rgba(217, 217, 217, 0.6) 100%);
     border: 1px solid #d9d9d9;
     border-radius: 100px;
}
 ::-webkit-scrollbar-thumb {
     background: var(--main_primary);
     border-radius: 100px;
}
 .alphabet_ul::-webkit-scrollbar, body::-webkit-scrollbar, .modal-dialog-scrollable .modal-body::-webkit-scrollbar, ul.bookmark_listing_inner::-webkit-scrollbar, .custom_nav_tab::-webkit-scrollbar, .custom_tab_pane::-webkit-scrollbar, .topic_modal_inner::-webkit-scrollbar, .select_dropdown__list.active::-webkit-scrollbar, .quran_listing_inner::-webkit-scrollbar, .list_dropdown::-webkit-scrollbar, .right_modal_popup .modal-content::-webkit-scrollbar {
     width: 8px;
     height: 10px;
}
 .alphabet_ul::-webkit-scrollbar-track, body::-webkit-scrollbar-track, .modal-dialog-scrollable .modal-body::-webkit-scrollbar-track, ul.bookmark_listing_inner::-webkit-scrollbar-track, .custom_nav_tab::-webkit-scrollbar-track, .custom_tab_pane::-webkit-scrollbar-track, .topic_modal_inner::-webkit-scrollbar-track, .select_dropdown__list.active::-webkit-scrollbar-track, .quran_listing_inner::-webkit-scrollbar-track, .nav-tabs.quran_nav::-webkit-scrollbar-track, .list_dropdown::-webkit-scrollbar-track, .right_modal_popup .modal-content::-webkit-scrollbar-track {
     background: linear-gradient(180deg, rgba(217, 217, 217, 0.8) 0%, rgba(217, 217, 217, 0.6) 100%);
     border: 1px solid #d9d9d9;
     border-radius: 100px;
}
 .alphabet_ul::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb, ul.bookmark_listing_inner::-webkit-scrollbar-thumb, .custom_nav_tab::-webkit-scrollbar-thumb, .custom_tab_pane::-webkit-scrollbar-thumb, .topic_modal_inner::-webkit-scrollbar-thumb, .select_dropdown__list.active::-webkit-scrollbar-thumb, .quran_listing_inner::-webkit-scrollbar-thumb, .nav-tabs.quran_nav::-webkit-scrollbar-thumb, .list_dropdown::-webkit-scrollbar-thumb, .right_modal_popup .modal-content::-webkit-scrollbar-thumb {
     background: var(--main_primary);
     border-radius: 100px;
}
 .custom_flex_b, .hadith_listing_item, .item_listing, .article_timing, .article_inner, .yearly_tab_right, .sm_switch_btn {
     display: flex;
     align-items: center;
     justify-content: space-between;
}
 a.share_icon:hover .share_text, .arrow_icon:hover, .footer_item li a:hover, .overlay_listing li a:hover {
     color: var(--hover_primary);
}
 .d_rtl {
     direction: rtl;
}
 .d_ltr {
     direction: ltr;
}
 .modal-dialog-scrollable .modal-body, .custom_nav_tab, .custom_tab_pane, .nav-tabs.quran_nav,.quran_listing_inner, .about_modal .modal-body, .bookmark_modal .modal-body, .notes_modal .modal-body, .language_modal .modal-body, .topic_modal_inner {
     scrollbar-width: thin !important;
     scrollbar-color: var(--main_primary) #f3f3f3;
     -moz-appearance: none !important;
}
 .tooltip-inner {
     background-color: var(--main_primary);
     opacity: 1 !important;
}
 .tooltip.bs-tooltip-right .tooltip-arrow::before {
     border-right-color: var(--main_primary) ;
}
 .tooltip.bs-tooltip-left .tooltip-arrow::before {
     border-left-color: var(--main_primary);
}
 .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
     border-bottom-color: var(--main_primary);
}
 .tooltip.bs-tooltip-top .tooltip-arrow::before {
     border-top-color: var(--main_primary);
}
 .bs-tooltip-end .tooltip-arrow::before {
     right: -1px;
     border-width: .4rem .4rem .4rem 0;
     border-right-color: var(--main_primary);
}
 .bs-tooltip-start .tooltip-arrow::before {
     border-left-color: var(--main_primary);
     top: -9px;
}
 .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow:before, .bs-tooltip-top .tooltip-arrow:before {
     border-top-color: var(--main_primary);
}
/*start aneeza pages style*/
/*start calendar converter page styling*/
 #g_calendar {
     display: none;
}
 .namaz_settings_btn {
     background-color: #FFFDF4;
     color: #000;
     padding: 8px 15px;
     border-radius: 8px;
}
 .namaz_settings_btn:hover {
     color: #000;
}
/*start widget page styling*/
 .colors {
     height: 33px;
     width: 33px;
     border-radius: 7px;
     margin: 5px;
}
 .color_1{
     background-color: var(--main_primary);
}
 .color_2{
     background-color: #EAB93B;
}
 .color_3{
     background-color: #5965D6;
}
 .color_4{
     background-color: #B5BCF4;
}
 .color_5{
     background-color: #7CB67D;
}
 .color_6{
     background-color: #F67776;
}
 .color_7{
     background-color: #3BD26E;
}
 .color_8{
     background-color: #5AEB8B;
}
 .color_9{
     background-color: #BE56CE;
}
 .color_input {
     width: 130px;
     margin: 5px;
}
 .widget_card {
     min-height: 134px;
}
 .color_input input, .color_input span{
     height: 33px;
}
 .input_style_2, select.input_style_2, .input-group select.input_style_2{
     background-color: transparent;
     border-radius: 30px !important;
     border-width: 2px;
     padding: 5px 15px;
}
 .rounded_input:hover .input_append {
     background-color: var(--medium_light_primary);
}
 .adjust_widget_wrap{
     width: 50%;
}
 .adjust_widget{
     height: 100%;
}
 .widgets_parent{
     width: 100% ;
     height: 300px;
     overflow-y: auto;
     padding:10px 7px 5px 7px;
}
 .img_box.orange_img_box{
     background-image: url("../img/widgets/widget-pattern.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     transition: all 0.3s;
     min-height: 130px;
     background-color: #faf0e3;
}
 .input_append{
     position: absolute;
     right: 1.5px;
     z-index: 111;
     background-color: #d9d9d9;
     top: 1.5px;
     border-top-right-radius: 30px;
     border-bottom-right-radius: 30px;
     width: 40px;
     height: 37px;
}
 .rounded_input {
     border: 2px solid #F0F0F0;
     border-radius: 20px;
     height: 40px;
     padding-right: 50px;
     margin-bottom: 20px;
}
 .form-control:focus{
     box-shadow: 0px 0px 0px transparent;
}
 .rounded_input:hover, .rounded_input:focus, .input_style_2:focus, .contact_form textarea:focus, .contact_form textarea:hover {
     border-color: var(--main_primary);
     background-color: #fffaf2;
}
 .input_parent_div:hover .input_append{
     background-color: #FFF4E5;
}
/*start qibla direction page styling*/
 .qibla_card img {
     width: 100%;
}
 .card_description {
     background: var(--main_primary);
     padding: 14px;
}
 .card_description p {
     text-align: center;
     color: #fff;
     font-size: 18px;
     font-weight: bold;
}
 .card_description:hover {
     background: var(--hover_primary);
}
 .card_description:focus {
     background: var(--focus_primary);
}
/*start tasbihat page styling*/
 .blur_box.light_blur_box{
     background-color: var(--light_primary);
     height: 140px;
     border: 2px solid transparent;
}
 .blur_box.light_blur_box:hover{
     border-color: var(--main_secondry);
}
 .heighted_img{
     height: 85px;
}
 .less_heighted_img{
     height: 70px;
}
 .tasbih_carousel_section p{
     width: 180px;
}
 .tasbih_carousel_section section{
     width: calc(100% - 190px);
}
 .tasbih_slider a img{
     width: 50px;
     height: 50px;
}
 .tasbih_slider .owl-nav{
     position: absolute;
     top: 15%;
     width: 100%;
}
 .tasbih_slider .owl-dots{
     display: none;
}
 .owl-carousel.tasbih_slider .owl-nav .owl-prev, .owl-carousel.tasbih_slider .owl-nav .owl-next{
     position: absolute;
     font-size: 35px;
}
 .tasbih_slider .owl-nav .owl-next{
     right: 0;
     left: auto;
}
 .ball6 {
     height: 45px;
}
 .tasbih_slider a:hover::after {
     background-color: var(--main_primary);
     transition: all 0.3s;
     width: 44px;
}

 .tasbih_slider a:after {
     position: absolute;
     content: "";
     width: 0px;
     height: 3px;
     background-color: transparent;
     bottom: 0;
     left: 0;
     transition: all .3s;
     margin: auto;
     right: 0;
}
 .tasbih_slider a {
     height: 80px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
}
 .active_line:before {
     position: absolute;
     content: "";
     bottom: 0;
     left: 0;
     transition: all .3s;
     margin: auto;
     right: 0;
     border-bottom: 3.5px solid var(--main_primary);
     width: 44px;
}
/*start ramadan page styling*/
 .img_box.brown_img_box{
     background-image: url("../img/ramadan/boxes-bg.jpg");
     min-height: 150px;
     justify-content: flex-start;
     direction: ltr;
}
 .img_box.brown_img_box svg{
     width: 80px;
     margin-right: 25px;
}
 .img_box.brown_img_box h4{
     width: calc(100% - 90px);
}
 .ramadan_table th, .ramadan_table td{
     text-align: left;
     padding: 8px 25px;
}
 .lang_dropdown .dropdown-menu{
     border: 0px;
     box-shadow: 0px 0px 10px lightgray;
     border-radius: 20px;
     width: 200px;
}
 .lang_dropdown .dropdown-menu .dropdown-item{
     border-bottom: 1px solid #D9D9D9;
     border-top: 1px solid #D9D9D9;
     padding: 7px 15px;
}
 .lang_dropdown .dropdown-menu li:first-child .dropdown-item{
     border-top-right-radius: 20px;
     border-top-left-radius: 20px;
}
 .lang_dropdown .dropdown-menu li:last-child .dropdown-item{
     border-bottom-right-radius: 20px;
     border-bottom-left-radius: 20px;
}
 .lang_dropdown .dropdown-menu .dropdown-item:hover{
     background-color: #FFF4E5;
     border-color: var(--main_primary);
}
 .profile_name{
     display: flex;
     align-items: center;
     font-weight: bold;
}
 .profile_name img {
     margin-right: 5px;
     margin-left: 5px;
}
/*start style for islamic events page*/
 #events_tabs li{
     width: auto;
     line-height: 22px;
}
 #events_tabs li a{
     font-size: 14px;
     padding: 10px 20px;
}
 .date{
     width: 100px;
     height: 80px;
}
 .event_time{
     width: 140px;
}
 .event_time i {
     font-size: 28px;
}
 .event_time i:hover{
     color: var(--main_primary);
}
 .date_area{
     width: calc(100% - 150px);
     border-right: 1px solid #7C7C7C;
}
 .event_desc{
     width: calc(100% - 120px);
}
 .date p{
     font-size: 20px;
}
 .event_desc h3{
     font-size: 20px;
}
 .bg_red{
     background-color: #E45554;
}
 .bg_blue{
    ;
     background-color: #5965D6
}
 .bg_purple{
     background-color: #BE56CE;
}
 .bg_s_green{
     background-color: #4FAFCD;
}
 .bg_mustard{
     background-color: #EAB93B;
}
 .bg_green{
     background-color: #39D16D;
}
 #events_year{
     width: 130px;
     background-position-x: 92%;
     border-radius: 8px;
     background-position-y: 11px;
     height: 40px;
}
/*start salah guide page styling*/
 .circle_bg {
     height: 90px;
     width: 90px;
     border-radius: 100%;
     background-color: #fff;
}
 .circle_bg svg {
     height: 60px;
}
 .img_box.gray_img_box{
     background-image: url("../img/salah-guide/nmaz-rounded-bg.png");
     direction: ltr;
     justify-content: start;
     min-height: 120px;
}
 .img_box.gray_img_box .p_name{
     width: calc(100% - 120px);
}
 .green_circle {
     background-color: var(--main_secondry);
}
/*start wudu page styling*/
 .wudu_step_img{
     height: 130px;
}
 .salah_step_img{
     height: 170px;
}
 .select_style.curved_select {
     border-radius: 8px;
     background-color: transparent;
     border: 0px;
     box-shadow: 0px 0px 10px lightgray;
     background-position-y: 14px;
     margin-bottom: 20px;
     padding-left: 14px;
}
 .curved_select_wrap label{
     font-size: 16px;
     margin-bottom: 10px;
}
/*start styling for hajj and umrah module*/
 .radial_img_box{
     background: rgba(255,255,255,0.7);
     background-image: url("../img/hajj-and-umrah/radial-bg-img.png");
     min-height: 150px;
}
 .number_li li {
     counter-increment: my-awesome-counter;
     margin: 0.25rem;
     list-style: none;
     display: flex;
     align-items: center;
}
 .number_li li::before {
     content: counter(my-awesome-counter);
     background: var(--main_primary);
     width: 16px;
     height: 16px;
     border-radius: 50%;
     color: white;
     text-align: center;
     margin-right: 0.5rem;
     font-size: 12px;
}
 .mosque_content{
     min-height: 100px;
}
 .mosques_card img{
     height: auto;
}
 .book_img{
     width: 100px;
}
 .book_img img{
     box-shadow: 0px 0px 10px lightgray;
     border-radius: 20px;
     margin-bottom: -12px;
     width: 100%;
     height: 130px;
     object-fit: cover;
}
 .download_progress .progress{
     height: 7px;
     width: 110px;
     background-color: #D9D9D9;
}
 .download_progress{
     position: absolute;
     bottom: 10px;
}
 .download_progress .progress .progress-bar{
     background-color: var(--color_secondry);
}
 .download_icon{
     height: 25px;
     width: 25px;
     background-color: var(--main_primary);
     border-radius: 100%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: #fff;
}
 .download_icon:hover{
     color: #fff;
}
 .download_icon small{
     font-size: 8px;
}
 .gradient_img_box{
     background-image: url("../img/hajj-and-umrah/gradient-img-box.jpg");
     direction: ltr;
     justify-content: flex-start;
     min-height: 225px;
     border: 2px solid #fefbf4;
     position: relative;
}
 .gradient_img_box .d-flex{
     align-items: center;
}
/* login page */
 .login_bg{
     background-image: url(../img/login-img.jpg);
     background-size: cover;
     width: 100%;
     height: 100vh;
     text-align: center;
}
 .login_form{
     width: 400px;
     max-width: 80%;
     margin: 0 auto;
     position: relative;
     padding-top: 100px;
}
 .back_btn{
     position: absolute;
     top: 0;
     left: 0;
}
 .login_line{
     width: 100%;
     height: 1px;
     background-color:#D9D9D9 ;
}
/*start styling for islamic calendar page*/
 .year_select_box select{
     width: 120px;
}
 .calendar_table {
     border-radius: 20px;
     box-shadow: 0 0 10px #d3d3d3;
     overflow: hidden;
     margin: 10px 0 20px;
     table-layout: fixed;
     min-height: 336px;
}
 .calendar_table thead{
     background-color: var(--main_secondry);
     color: #fff;
     height: 44px;
     line-height: 44px;
}
 .calendar_table td, .calendar_table th{
     font-size: 14px;
     text-align: center;
}
 #dateModal .modal-body{
     overflow-x: hidden;
}
 .calendar_table span.active, .calendar_table td a span:hover{
     background-color: var(--main_primary);
     color: #fff;
     cursor: pointer;
}
 .calendar_table td span{
     height: 30px;
     width: 30px;
     border-radius: 100%;
     display: inline-block;
    line-height: 31.5px;
}
 .calendar_table td span:hover{
     background-color: var(--main_primary);
     cursor: pointer;
     color: #fff;
}
 .verify_bg{
     background-image: url("../img/verify-email-bg.jpg");
     background-size: cover;
     background-position: center;
}
 .blank_page_bg{
     background-image: url("../img/banner_imgs/404.jpg");
     background-position: bottom;
}
 .f_blur_box h1{
     font-size: 150px;
     color: #ff582e;
     font-weight: bold;
     line-height: 120px;
}
 .f_blur_box h2{
     font-size: 60px;
     font-weight: bold;
}
 .f_blur_box .btn{
     padding: 10px 15px;
     margin: 5px 3px;
     width: 165px;
}
 .form_blur_box{
     width: 600px;
}
 .f_blur_box{
     width: 800px;
}
 .f_blur_box svg{
     height: 115px;
}
 .green_heading, .dynamic_content .green_heading{
     color: var(--main_secondry);
     font-weight: bold;
}
 .blue_link, .dynamic_content a.blue_link{
     color: #3945AF;
     text-decoration: underline;
}
 .d_picker.disabled{
     background-color: #DCD7CB;
}
/*start style for terms of use*/
/*start contact us page styling*/
 .contact_form textarea{
     border: 2px solid #F0F0F0;
     border-radius: 20px;
     height: 150px;
}
 .dynamic_content .dark_link{
     color: #505050;
}
 .green_link:hover, .dark_link:hover{
     color: var(--main_primary);
}
 .widget_table tr td:nth-child(2){
     text-align: right;
}
 .widget_table tr:last-child td{
     border-bottom: 0px;
}
 .copy_btn{
     top: 0;
     right: 0;
     border-top-right-radius: 20px;
     border-bottom-left-radius: 20px;
     position: absolute;
     font-weight: bold;
     color: #fff;
     padding: 4px 12px;
}
 .sec_pad_min{
     padding-bottom: 20px;
}
 .play_icon:hover{
     color: var(--main_primary);
}
/*start calendar table widget styling*/
 .calendar_table_widget th, .calendar_table_widget td{
     width: 14.28%;
     text-align: center;
}
 .calendar_table_widget td {
     border-right: 1px solid lightgray;
     height: 90px;
     vertical-align: middle;
}
.table.calendar_table_widget>:not(:last-child)>:last-child>* {
    border-bottom-color: lightgray;
}
 .date p{
     font-size: 16px;
     font-weight: bold;
}
 .date small{
     font-size: 14px;
     color: var(--main_primary);
     font-weight: bold;
}
 .calendar_table_widget td:hover, .calendar_table_widget td.active{
     background-color: var(--medium_light_primary);
}
 .islamic_events_widget .date_area{
     width: 100%;
     border-right: 0px;
     border-bottom: 1px solid #7C7C7C;
     padding: 10px 0px;
}
 .islamic_events_widget .date {
     width: 60px;
     height: 50px;
     border-radius: 10px;
}
 .islamic_events_widget .event_desc {
     width: calc(100% - 60px);
}
 .islamic_events_widget .date p, .islamic_events_widget .event_desc p{
     font-size: 14px;
}
 .islamic_events_widget .event_desc h3 {
     font-size: 16px;
}
 .islamic_events_widget .date_area:last-child{
     border-bottom: 0px;
}
 .kalima_desc{
     background: rgb(255,249,165);
     background: linear-gradient(151deg, rgba(255,249,165,1) 0%, rgb(252 252 248) 62%, rgba(254,240,253,1) 100%);
     text-align: center;
     padding: 80px 40px;
}
 .kalima_desc img{
     margin-bottom: 70px;
}
 .calendar_detail_table td, .calendar_detail_table th{
     font-size: 18px;
}
 .calendar_detail_table td span{
     height: 40px;
     width: 40px;
     line-height: 42px;
}
 .calendar_detail_table td{
     height: 65px;
     vertical-align: middle;
}
 .calendar_table span.bg_mustard, .calendar_table span.bg_blue, .calendar_table span.bg_s_green, .calendar_table span.bg_red{
     color: #fff;
}
 .widget_inputs .input_div{
     width: 100% !important;
     margin: 5px 0px;
     padding: 0px;
}
.header_country_flag {
    height: 30px;
    border-radius: 7px;
}
/*audio player bar style*/
 .player_bar{
     position: fixed;
     bottom: 0;
     width: 100%;
     z-index: 1;
     background-color: #fff;
}
 .time, .cancel_icon{
     width: 200px;
}
 .player_bar_inner {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .audio_profile {
     display: flex;
     align-items: center;
     width: 100%;
}
 .volume_timer {
     width: 100%;
     text-align: end;
     display: flex;
     align-items: center;
     justify-content: flex-end;
}
 .prayer_time_tabs li {
     width: 18%;
     line-height: 24px;
     margin-bottom: 14px;
     min-width: 18%;
}
 .prayer_time_tabs li a {
     border: 1px solid var(--main_primary);
     border-radius: 10px;
}
 .prayer_time_tabs {
     width: 100%;
     border: none;
     justify-content: space-between;
}
 .prayer_time_tabs li:last-child a{
     border-right: 1px solid var(--main_primary);
}
 .prayer_log_reminder li{
     text-align: left;
}
 .nav-tabs.modal_graph_tabs li a {
     width: 170px;
     border-radius: 30px !important;
     background-color: var(--main_secondry) !important;
     padding: 10px;
     height: ;
}

 .modal_graph_tabs li{
     margin-bottom: 20px;
}
 @media only screen and (max-width: 992px){
     .adjust_widget{
         height: auto;
         width: 100%;
    }
     .adjust_widget_wrap {
         width: 100%;
    }

     #events_tabs {
         border: 1px solid var(--main_primary);
         justify-content: flex-start;
         width: auto;
    }
     #events_tabs li{
         width: auto;
         margin-bottom: 0px;
    }
     #events_tabs li a{
         border-radius: 0px;
         border: 0px;
    }
     .events_card {
         margin-bottom: 30px;
    }
     .form_blur_box{
         width: 95%;
    }
     .prayer_time_tabs li {
         width: 18%;
         line-height: 24px;
         min-width: 18%;
    }
}
 @media only screen and (max-width: 767px){
     .w_sm_50{
         width: 100%;
    }
     .top_bar p{
         font-size: 10px !important;
    }
     .tasbih_carousel_section p{
         width: 100%;
         text-align: center;
    }
     .tasbih_carousel_section section{
         width: 100%;
    }
     .img_box.brown_img_box{
         min-height: 120px;
    }
     .btn_download{
         padding: 10px 10px;
    }
     .prayer_table tbody tr td {
         line-height: 18px;
         font-size: 12px;
    }
     .ramadan_table th, .ramadan_table td {
         padding: 8px 10px;
    }
}
 @media only screen and (max-width: 576px){
     .f_blur_box .btn {
         padding: 10px 6px;
         width: 135px;
         font-size: 12px !important;
    }
     .islamic_events_widget .event_desc h3 {
         font-size: 14px;
    }
     .islamic_events_widget .event_desc p {
         font-size: 10px !important;
    }
     .radial_img_box{
         min-height: 120px;
    }
     .book_img {
         width: 75px;
    }
     .book_img img{
         height: 100px;
    }
     .date_area{
         width: 100%;
         border-right: 0px;
         border-bottom: 1px solid #7C7C7C;
         padding-bottom: 10px;
         text-align: center;
    }
     .date{
         width: 80px;
         height: 70px;
         margin: auto;
    }
     .event_time{
         width: 100%;
         padding-top: 10px;
    }
     .single_event_inner{
         flex-wrap: wrap;
    }
     .event_desc{
         width: 100%;
         padding-top: 15px;
    }
     .calendar_bg {
         padding: 250px 0px 40px 0px;
    }
     #events_tabs {
         width: 100%;
    }
     #events_tabs li:first-child{
         width: 40%;
    }
     #events_tabs li:last-child{
         width: 60%;
    }
     .kalima_desc{
         padding: 40px 20px;
    }
     .main_bg{
         min-height: 280px;
    }
     .f_blur_box svg {
         height: 80px;
    }
     .f_blur_box .oops_img svg {
         height: 48px;
         margin-top: 30px;
    }
}
 div#language_modal {
     z-index: 99999;
}
/* islamic places */
 .img_box.places_box {
     background-image: url("../img/places/islamic_places_bg.png");
     direction: ltr;
     padding: 18px 26px;
}
 .map_listing {
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
     padding: 24px;
     border-radius: 20px;
     width: 100%;
     display: inline-block;
     margin-bottom: 24px;
     border: 2px solid transparent;
}
 .map_listing:hover {
     border: 2px solid var(--main_primary);
}
 .map_listing:hover i {
     color: var(--main_primary);
}
 .road_distance {
     display: flex;
     background: #F2F2F2;
     padding: 24px 40px;
     border-radius: 20px;
     justify-content: center;
     margin-left: 16px;
     margin-right: 16px;
     width: 100%;
}
 .big_text {
     font-size: 40px;
     line-height: 30px;
     font-weight: bold;
}
 .img_box.places_box svg {
     min-width: 120px;
}
 .widget_card span.active {
     border: 2px solid black;
}
.main_bg {
    position: relative;
    margin-top: -110px;
    padding-top: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 360px;
    display: flex;
    align-items: center;
}
 .ajax-load {
     position: absolute;
     left: 0;
     right: 0;
     margin: auto;
}
 .ui-datepicker-header a.ui-datepicker-prev {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='8' viewBox='0 0 256 512'%3E%3C!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.--%3E%3Cpath fill='%23ffffff' d='M24.7 38.1L4.9 57.9c-4.7 4.7-4.7 12.3 0 17L185.6 256 4.9 437.1c-4.7 4.7-4.7 12.3 0 17L24.7 473.9c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17L41.7 38.1c-4.7-4.7-12.3-4.7-17 0z'/%3E%3C/svg%3E");
     margin: 4px;
     background-size: 7px;
}
 .ui-datepicker-header a.ui-datepicker-next {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='8' viewBox='0 0 256 512'%3E%3C!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.--%3E%3Cpath fill='%23ffffff' d='M24.7 38.1L4.9 57.9c-4.7 4.7-4.7 12.3 0 17L185.6 256 4.9 437.1c-4.7 4.7-4.7 12.3 0 17L24.7 473.9c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17L41.7 38.1c-4.7-4.7-12.3-4.7-17 0z'/%3E%3C/svg%3E");
     margin: 4px;
     background-size: 7px;
}
 div#ui-datepicker-div {
     padding: 0;
     border-radius: 10px;
     overflow: hidden;
}
 .ui-datepicker-title {
     background: var(--main_secondry);
     margin-bottom: 0;
     color: white;
     padding-top: 4px;
}
 table.ui-datepicker-calendar tr th {
     background: var(--main_secondry);
     color: white;
}
 table.ui-datepicker-calendar tbody tr td {
     padding: 2px;
}
 .vertical_dotted_line {
     border-left: 2px dotted #b8b8b8;
     height: 18px;
     margin-top: 4px;
     margin-bottom: 4px;
     margin-left: 10px;
}
 .street_dir {
     width: 50px;
     text-align: center;
}
 .street_dir img {
     height: 50px;
}
 .custom_disabled:hover {
     color: #d3d3d3;
}
 .custom_disabled {
     color: #d3d3d3;
     pointer-events: none;
}
 .islamic_places_found svg {
     min-width: 120px;
}
 .islamic_places_found:hover i {
     color: var(--main_primary);
}
 .prev_page.disabled {
     color: #D3D3D3;
     pointer-events: none;
}
 .img_box {
     position: relative;
}
 .img_box:hover:after {
     border: 2px solid var(--main_primary);
     position: absolute;
     content: "";
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     border-radius: 20px;
     cursor: pointer;
}
 .wrap_channel_banner {
     width: 60%;
     margin: auto;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .radio_audio_player .cancel_icon {
     width: inherit;
}
 .radio_audio_player {
     background: white;
     padding: 10px 30px;
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 20px;
}
 .channel_banner_img img {
     border-radius: 20px;
     overflow: hidden;
}

 .article_bg {
/*     background-image: url(../img/home/article/article.jpg);
     background-size: cover;*/
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
position: relative;
z-index: 1;
}
 .owl-carousel.names_carousel .owl_items img {
     width: 250px;
     margin: auto;
}
 .owl-carousel.names_carousel .owl-nav.disabled {
     display: block;
}
 .owl-carousel.names_carousel button.owl-prev, .owl-carousel.names_carousel button.owl-next {
     position: absolute;
     z-index: 0;
     top: 42%;
}
 .owl-carousel.names_carousel button.owl-prev {
     left: 0px 
}
 .owl-carousel.names_carousel button.owl-next {
     right: 0px;
}
 .big_font {
     font-size: 70px;
     font-weight: 600;
}
 tr.mobileview {
     display: none;
}
 .name_nextprev_wrapper img {
     width: 200px;
}
 .error_feature_icon .icon_img {
     width: 90px;
     height: 85px;
     border-radius: 28px;
}
.error_feature_icon {
     margin-right: 8px;
     margin-left: 8px;
     margin-bottom: 20px;
}

 .error_wrapper {
     width: 90%;
     margin: auto;
}
 .prayer_search_location .selectize-input {
     height: 46px;
     line-height: 30px;
}
 .prayer_search_location .selectize-input:after {
     content: none !important;
}
 .places_box img {
     width: 120px;
     height: 120px;
}
 div#settings_box_div {
     min-height: 200px;
}
 .qibla_carousel_wrapper {
     margin: 0 auto;
     max-width: 800px;
}
 #thumbs .item h1 {
     font-size: 18px;
}
 .owl-theme .owl-nav [class*="owl-"] {
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
}
 #carousel.owl-theme {
     position: relative;
}
 #qiblacarousel .item img {
     width: 200px;
     margin: auto;
}
 #thumbs .item img {
     width: 110px;
}
 #qiblacarousel .owl-nav {
     display: none;
}
 #thumbs .item {
     text-align: center;
     margin: auto;
     display: flex;
     justify-content: center;
}
 #thumbs .owl-nav .owl-next, #thumbs .owl-nav .owl-prev {
     position: absolute;
     top: 33%;
}
 #thumbs .owl-nav .owl-next i, #thumbs .owl-nav .owl-prev i {
     font-size: 24px;
}
 #thumbs .owl-nav .owl-next {
     right: -23px;
}
 #thumbs .owl-nav .owl-prev {
     left: -23px;
}
 div#thumbs {
     margin-top: 28px;
}
 #thumbs .owl-item.active.current {
     border: 1px solid var(--main_primary);
     padding: 10px;
     border-radius: 10px;
}
 #thumbs .owl-item.active {
     padding: 10px;
}
 .tab_content_wrapper {
     max-height: 700px;
     overflow-y: auto;
     padding-right: 13px;
     padding-left: 8px;
}
 .radio_buttons_left {
     display: flex;
     align-items: center;
     position: relative;
     width: 100%;
}
 .radio_buttons_left img, .radio_buttons_right img {
     position: relative;
     z-index: 9;
     width: 58px;
     height: 58px;
     border-radius: 100px;
}
 .radio_buttons_left .radio_text, .radio_buttons_right .radio_text {
     background: #fff;
     padding: 10px 20px;
     border-radius: 10px;
     position: absolute;
     min-width: 172px;
}
 .radio_buttons_left .radio_text {
     margin-left: 50px;
}
 .radio_buttons_right .radio_text {
     margin-right: 50px;
}
 .radio_buttons_right {
     display: flex;
     flex-direction: row-reverse;
     align-items: center;
     position: relative;
     width: 100%;
}
 .level_arrow {
     transform: rotate(-90deg);
     color: var(--main_primary);
     position: relative;
     left: 3px;
}
.icon_white {
    font-size: 34px;
    display: inline-block;
    background: #fff;
    height: 55px;
    min-width: 55px;
    border-radius: 10px;
    margin-right: 16px;
    color: var(--focus_secondary);
    line-height: 62px;
    text-align: center;
}
 .icon_gray {
     width: 55px;
     height: 55px;
     background: #f2f2f2;
     font-size: 28px;
     border-radius: 10px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-left: 10px;
     cursor: pointer;
}
 .link_style i {
     font-size: 28px;
     color: var(--main_primary);
}
 .greeting_card {
     display: flex;
     align-items: center;
     justify-content: space-between;
     direction: rtl;
     border-bottom: 1px solid #d9d9d9;
     padding: 16px;
}
 .greeting_card:hover {
     background: var(--light_primary);
}
 .modal.greeting_modal .modal-header button {
     background: var(--main_primary);
}
 .greeting_controls {
     display: flex;
     justify-content: end;
     align-items: center;
     margin-bottom: 16px;
}
 .style_control {
     backdrop-filter: blur(0px);
}
 .style_control_slider {
     margin-bottom: 26px;
     width: 96%;
}
 .border_sep {
     border-left: 2px solid #d9d9d9;
     padding: 14px 0px;
     margin: 0 24px;
}
 .color_bittersweet {
     background: #FE6F5E;
}
 .color_cardinal {
     background: #C51E3A;
}
 .color_cerise {
     background: #DE3163;
}
 .color_firebrick {
     background: #B22222;
}
 .color_rose {
     background: #FF0080;
}
 .color_aerospaceorange {
     background: #FF4F00;
}
 .color_alloyorange {
     background: #C46210;
}
 .color_amber {
     background: #FFBF00;
}
 .color_butterscotch {
     background: #E09540;
}
 .color_carrot {
     background: #ED9121;
}
 .color_auborn {
     background: #A52A2A;
}
 .color_cocoabrown {
     background: #D2691E;
}
 .color_darkbrown {
     background: #4A412A;
}
 .color_goldenrod {
     background: #DAA520;
}
 .color_liver {
     background: #674C47;
}
 .color_sandybrown {
     background: #F4A460;
}
 .color_sepia {
     background: #704214;
}
 .color_crayola {
     background: #EE204E;
}
 .color_goldengate {
     background: #F04A00;
}
 .color_citron {
     background: #DDD06A;
}
 .color_redwood {
     background: #AB4E52;
}
 .color_johnquil {
     background: #FACA16;
}
 .color_khaki {
     background: #C3B091;
}
 .color_hookergreen {
     background: #49796B;
}
 .color_straw {
     background: #E4D96F;
}
 .color_pakgreen {
     background: #00401A;
}
 .color_applegreen {
     background: #8DB600;
}
 .color_aquamarine {
     background: #00FFBF;
}
 .color_castaltongreen {
     background: #00563B;
}
 .color_avocado {
     background: #568203;
}
 .color_emarld {
     background: #50C878;
}
 .color_sgbusgreen {
     background: #55DD33;
}
 .color_midnightgreen {
     background: #004953;
}
 .color_persiangreen {
     background: #00A693;
}
 .color_pinegreen {
     background: #01796F;
}
 .color_robineggblue {
     background: #00CCCC;
}
 .color_turquoise {
     background: #40E0D0;
}
 .color_azure {
     background: #007FFF;
}
 .color_moonstone {
     background: #3AA8C1;
}
 .color_amethyst {
     background: #9966CC;
}
 .color_byzantium {
     background: #702963;
}
 .color_darkviolet {
     background: #9400D3;
}
 .color_electricpurple {
     background: #BF00FF;
}
 .color_fuchsia {
     background: #FF00FF;
}
 .color_mauve {
     background: #E0B0FF;
}
 .color_orchid {
     background: #DA70D6;
}
 .color_finn {
     background: #683068;
}
 .color_hotmagenta {
     background: #FF1DCE;
}
 .color_violet {
     background: #5B3256;
}
 .color_mistyrose {
     background: #FFE4E1;
}
 .color_raspberyrose {
     background: #B3446C;
}
 .color_rosequartz {
     background: #AA98A9;
}
 .color_bone {
     background: #E3DAC9;
}
 .color_teal {
     background: #008080;
}
 .color_bluedefrance {
     background: #318CE7;
}
 .color_cambridgeblue {
     background: #85B09A;
}
 .color_cornflowerblue {
     background: #6495ED;
}
 .color_majorblue {
     background: #6050DC;
}
 .color_frenchgray {
     background: #BEBFC5;
}
 .color_ashgray {
     background: #B2BEB5;
}
 .color_coolgray {
     background: #8C92AC;
}
 .color_glaucous {
     background: #6082B6;
}
 .color_charcoal {
     background: #36454F;
}
 .color_richblack {
     background: #010B13;
}
 .color_midnightblue {
     background: #191970;
}
 .color_champagne {
     background: #F7E7CE;
}
 .color_bluencs {
     background: #0087BD;
}
 .color_seagreen {
     background: #20B2AA;
}
 .color_japanesviolet {
     background: #5B3256;
}
 .color_tomato {
     background: #FF6347;
}
 .color_brown {
     background: #993300;
}
 .color_selectiveyellow {
     background: #FFBA00;
}
 .select_settings.selectize-control.single .selectize-input:after {
     content: " ";
     top: 10px;
     width: 0;
     height: 0;
     border-width: 0;
     content: "\f078";
     position: absolute;
     font-family: "Font Awesome 5 Pro";
     right: 22px;
     color: #505050;
     font-size: 16px;
     font-weight: 400;
}
 .select_settings.selectize-control.single .selectize-input.dropdown-active:after {
     margin-top: inherit !important;
}
 .audio_profile img {
     width: 76px;
     border-radius: 100px;
     height: 76px;
}
 .radio_wrap {
     background: #000033;
     border-radius: 20px;
     text-align: center;
     padding: 60px;
}
 .bigtext {
     color: #fff;
     font-size: 88px;
     font-weight: bold;
     line-height: 87px;
     margin-top: 48px;
     display: inline-block;
}
 .radio_wrap img {
     border-radius: 100%;
     width: 200px;
     height: 200px;
}
 .radio_control_wrap {
     display: flex;
     justify-content: space-between;
     padding-top: 16px;
     width: 67%;
     margin: auto;
}
 .mycalendar .date small.active {
     background: var(--main_secondry);
     padding: 4px;
     width: 100%;
     display: inline-block;
     color: #fff;
     font-size: 12px;
}
 .mycalendar tbody td {
     padding: 0;
     height: inherit;
}
 .mycalendar .date p {
     font-size: 14px;
     font-weight: bold;
     padding-top: 5px;
     padding-bottom: 5px;
}
.nav-tabs.angle_minutes_tabs li .nav-link.active {
    background: var(--main_primary);
    color: #fff;
}
 .angle_minutes_tabs {
     border-bottom: none;
}
 .angle_minutes_tabs {
     border-bottom: none;
     border: 2px solid #fff;
     display: flex;
     justify-content: space-between;
     flex-wrap: nowrap;
     border-radius: 100px;
     overflow: hidden;
}
.languageflag img {
    width: 61px;
    border-radius: 12px;
}

.pagination li:first-child a, .pagination li:last-child a {
    width: inherit;
}

.main_bg {
    background: linear-gradient(112.78deg,#7CB67D -11.98%,#FFF4E5 32.17%,#FE8F00 105.55%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.owl-carousel.feature_carousel .articlevideo_item a {
    min-height: 445px;
}

.e_content {
    min-height: 188px;
}

.header_bgimage:before, .abovefooter-bg:before, .welcomebg:before, .article_bg:before, .explorebg:before, footer:before, .main_bg:before {
    position: absolute;
    background-image: url(../img/home/pattern03.png);
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0.4;
}

footer:before {
     opacity: 0.3 !important;
}