#translateindex .englishtext,#translateindex h1{padding:10px 0;margin:0;text-align:center;direction:ltr}
#sound,#translateindex h1,.ads,.powered{text-align:center}
#translateindex,.aya-number,.ayat,.ayat2,.ayat4tafseer,.ayat4tafseer h2{font-family:kitab,"Traditional Arabic","Times New Roman",Arial,serif}
.ayat,.ayat2,.ayat4tafseer img,.book-image,footer{position:relative}
.overlay,audio{width:100%}

@font-face {font-family: "kitab";font-display: swap;src: local("kitab"),url("../fonts/kitab.woff2") format("woff2"),url("../fonts/Kitab-Regular.ttf") format("truetype");}

html{scroll-behavior:smooth}
body{padding-top:0;padding-bottom:0;background:#f7f7f7;color:#3f3f3f;font-family:Roboto,'sans-serif',Tahoma,Arial;font-family:"Droid Arabic Naskh",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}

a{text-decoration:none;color:#0056b3}

.books .btn,.powered,footer,footer a{color:#fff}

a:hover{color:#115292}
.header-wrapper{background:url(images/header-bg.png)}
.header-wrapper .container{background:0 0;padding-top:0}
.ads{margin:0;padding:15px 0}
footer{background-color:#424242;background:rgb(188 68 118);padding:0;border-top:0 solid rgb(255 255 255);user-select:none;z-index:4}
footer a:hover{color:#dd6698}
.powered{margin:10px 0 0}
footer {
    color: var(--color7);
    padding: 0 0;
    user-select: none;
    -webkit-user-select: none;
    z-index: 5;
    position: relative;
}
footer .footer-bg {
    padding: 50px 0;
    height: 100%;
    min-height: 100px;
}
footer .footer-bg {
    background: var(--footer-bg);
    padding: 10px 0 0px;
    height: 100%;
    min-height: 320px;
}
.block,div.spacer{background-color:#fff}
.custom-breadcrumb{margin-top:15px}
.custom-breadcrumb .breadcrumb {
    border-radius: 5px;
    font-size: 14px;
}
.breadcrumb>.active{color:#444}
.card-custom{margin-bottom:10px;border:none;border-radius:0}
.card-custom .card-header {
    color: var(--color-brand-primary);
    padding: 10px;
    border-radius: 0;
}
.card-header h1 {
    font-size: 1.2rem;
    line-height: 1.6rem;
    margin: 0;
}
.card-custom .card-header:first-child{border-radius:0}
.block{border:1px solid #ddd;margin-bottom:10px}
.navbar-collapse{padding-left:0}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#666}
div.spacer{margin:0 0 10px;}
div:hover.spacer{background-color:#eee;}
.ayat,.ayat2,.ayat4tafseer{font-size:2.5rem;font-weight:500;line-height:6.2rem;word-spacing:0px}
.books,.surah-text{margin-top:30px}
.aya-number{font-size:25px;white-space:nowrap;color:rgb(68 66 66);background:rgb(228 246 215);border-radius:100px;margin:0 .5rem}
#translateindex .ayat,.ayat4tafseer_text{background-color:#fff}
#translateindex h1{color:#333}
#translateindex .englishtext{color:#c00}
#translateindex .translate{direction:ltr}
#translateindex .translate_rtl{margin:10px 5px 10px 0}
#translateindex .ayat,#translateindex .ayat2,#translateindex .translate_rtl{direction:rtl;direction:rtl;text-align:right;font-size:2rem;line-height:3.5rem}
#translateindex .translate{margin:10px 0;text-align:left;direction:ltr;font-size:1.7rem;line-height:2.3rem}
#translateindex .ayat,#translateindex .ayat2{padding:10px;margin-bottom:10px;border:1px solid #ccc}
#translateindex .ayat2{background-color:#f2f2f2}
. span.ayat{color:#333;padding:0}
span:hover.ayat{color:#499ac1}
span:active.ayat{color:#425406}
img.ayatnumber{margin:0 5px}
.tafseer{padding:5px;margin:0}
.tafseer img{padding:0;margin:0;border:none}
.ayat4tafseer,.ayat4tafseer h2{position:relative;margin-bottom:25px;border-bottom:1px solid #ddd;padding-top:5rem;padding-bottom:3rem}
h2.aya-text{font-size:2.5rem;line-height:5.5rem}
.ayat4tafseer_text b,.language-count .far,.language-count .fas{color:var(--color-brand-primary)}
.ayat4tafseer .number{color:#0056b3}
.ayat4tafseer .author{font-size:.7em}
.ayat4tafseer img{top:1px}
.ayat4tafseer_text{margin-bottom:25px;font-size:1.3em;line-height:2.1em;color:#000;text-align:justify}
.ayat4tafseersearch{padding:10px;margin:0 5px 25px;background-color:#f2f2f2;border:1px solid #ccc;text-align:center}
.ayat4tafseer_info{font-size:.7em;margin-bottom:0;line-height:1em}
.share-content a{color:#4a3f33}
.share-content a:hover{opacity:.7}
.share{text-align:center;margin-top:10px;margin-bottom:20px;border:1px solid #ddd;padding:15px}
.quran-file,.share h5{margin-bottom:15px}
.share a{margin:0 15px;font-size:35px;color:#3499cc}
.twitter-btn,a.twitter-btn{color:#1da1f2}
.facebook-btn,a.facebook-btn{color:#4267b2}
.whatsapp-btn,a.whatsapp-btn{color:#25d366}
.listen_aya,.overlay{position:absolute;left:0}
.listen_aya{top:-40px}
.next_aya a,.prevous_aya a{padding:9px;background:rgb(188 68 118);color:rgb(255 255 255);margin:13px;width:100%;max-width:150px;display:inline-block}
.section-content{background:rgba(250,250,250,.9);padding:15px}
.section-title{text-align:center;margin:0 0 20px;padding:0}
.section-title h1{padding-bottom:15px;font-size:25px;font-weight:700;margin:0 0 10px;border-bottom:4px solid #f9c875;display:inline-block}
.section-1,.section-2,.section-3{padding:15px 0;margin:0;background:#e9e9e9;border-bottom:4px solid #dbdbdb}
.books h1,.books h2{font-size:22px;font-weight:600}
.books-type-3 .card-img-top{max-height:250px}
.overlay{top:0;bottom:0;right:0;height:100%;opacity:0;transition:.5s;background-color:#008cba}
.book-image:hover .overlay{opacity:1}
.overlay-text{color:#fff;font-size:20px;padding:15px}
.overlay-text .text-muted,.overlay-text a{color:#fff!important}
.books-languages{background-color:#fff;margin-bottom:15px;padding:15px}
.language-flag{border:0 solid #f9c875;margin-top:20px}
.language-flag img{width:50px;height:30px}
.language-loop{text-align:center;margin-bottom:30px;color:#282828;background:#f7f7f7}
.language-loop a{color:#282b2f}
.language-loop h1{margin-top:15px;padding-top:0;font-weight:700;font-size:20px}
.language-loop h1 a{color:#282828}
.language-count{padding-top:5px;padding-bottom:15px}
.language-count span{margin:0 10px}
.page-item.active .page-link{z-index:1;color:#fff;background-color:#e1e1e1;border-color:#dbdbdb}
.page-link{color:#251e20}
.page-link:hover{color:#c34476}
.flags{width:56px;height:auto}
#languages h5 a,#quran h5 a{font-size:16px}
.custom-navbar-brand{text-decoration:none!important;font-size:22px;font-weight:600}
.custom-nav{background-color:rgba(255,255,255,.9)!important}
@media (max-width:767px){.ads,.logo{width:100%;float:none;text-align:center}
.ayat,.ayat2,.ayat4tafseer{font-size:2.7rem;line-height:5.9rem}
}
@media only screen and (min-width:320px) and (max-width:479px){
.ayat,.ayat2,.ayat4tafseer{font-size:2.2rem;line-height:5.5rem}
}
@media all and (device-width:768px) and (device-height:1024px) and (orientation:portrait){
.logo{width:100%;float:none;text-align:center}
}
@media all and (device-width:1024px) and (device-height:768px) and (orientation:landscape){
.logo{width:100%;float:none;text-align:center}
}
@media (min-width:500px){
.surah-text{text-align:justify;word-spacing:0px}
}


body {
margin: 0px;
padding: 0px
}


.home-title {
display: none;
}


.mark,
mark {
padding: 0;
background-color: unset;
color: rgb(188 68 118);
font-size: .8rem;
}


.aya-number {
display: inline-block;
line-height: initial;
font-size: 1.3rem;
}


audio {
width: 100%;
height: 45px;
margin-top: 5px;
margin-bottom: 5px;
}


audio::-webkit-media-controls-mute-button {
display: none !important;
}


audio::-webkit-media-controls-volume-slider {
display: none !important;
}


audio::-webkit-media-controls-volume-control-container.closed {
display: none !important;
}


audio::-webkit-media-controls-volume-control-container {
display: none !important;
}


audio::-webkit-media-controls-enclosure {
border-radius: 5px;
/*background-color:rgb(172 190 208);*/
}


audio::-webkit-media-controls-panel,
video::-webkit-media-controls-panel,
audio::-webkit-media-controls-panel,
{
background-color: rgb(172 190 208);
}


audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
/*color:#fff;*/
}


.hidden {
display: none;
}


.no-select,
.noselect {
user-select: none;
}


.lang-card a {
background: #f9f9f9;
}


.lang-card a:hover {
background: #ebebeb;
}


@media only screen and (min-width: 320px) and (max-width: 479px) {

.ayat,
.ayat4tafseer,
.ayat2 {
font-size: 2.2rem;
line-height: 4.6rem;
}

}


.container {
width: 100%;
max-width: 100%;
}


@media (min-width: 1200px) {

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
max-width: 1104px;
}

}



/* width */
::-webkit-scrollbar {
width: 10px;
}


/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}


/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}


/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}


.accordion-body {
max-height: 300px;
overflow-y: scroll;
}


.accordion-header button {
font-size: 2rem;
line-height: 2.5rem;
}


.accordion-button:focus {
z-index: 3;
border-color: #000;
outline: 0;
box-shadow: none;
}

a.nav-link1 {
    color: var(--color-brand-primary);
}
.accordion-button {
color: unset;
background-color: unset;
color: #1e2222;
}


.accordion-button:not(.collapsed) {
color: unset;
background-color: #ebebeb;
box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}



.title-bg {
background-color: #fce1ac;
background: url(https://quran.islamonline.net/style/default/images/title-bg.png);
padding: 3rem;
text-align: center;
width: 90%;
margin: auto;
background-size: 99% 97%;
background-position: center center;
font-size: 2.2rem;
font-weight: bold;
color: #303030;

}


.title-bg {
background-color: #fce1ac;
padding: 2.5rem;
text-align: center;
width: fit-content;
margin: auto;
background-size: auto;
background-position: center center;
font-size: 2.2rem;
font-weight: bold;
}


.surah_name_aya_count {
font-family: 'kitab', arail;
}


span.surah-num {
display: inline-block;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-brand-primary);
font-size: 12px;
color: #fff;
width: 38px;
height: 38px;
text-align: center;
padding-top: 4px;
vertical-align: baseline;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
font-weight: bold;
}


.surah_name_aya_count:hover .surah-num {
background: #fff;
color: var(--color-brand-primary);
}


span.surah-name-label {
font-size: 1.5rem;
}


span.quran-aya {
font-family: kitab;
font-weight: normal;
color: var(--color-brand-primary);
}


.soundcloud-frame {
min-height: 100px !IMPORTANT;
max-height: 112px;
}


@media only screen and (max-width: 1900px) {
.soundcloud-frame-mini {
min-height: 20px !IMPORTANT;
height: 20px;
}

}


.soundcloud-player {
background: #fff;
}


.soundcloud-frame {}


.soundcloud-inverse-true {
display: none;
}


.soundcloud-inverse-false {
display: block;
}


.miniSound__body {
height: 100%;
background: #fff482;
}


.miniSound__logo.sc-media-right {
display: none;
}


@media all and (-ms-high-contrast:none) {

:not(.show).collapse,
.accordion-collapse.collapse {
display: block !important;
}

}




@media only screen and (min-width: 320px) and (max-width: 479px) {
.surah-text {
text-align: justify;
}


.ayat,
.ayat4tafseer,
.ayat2 {
font-size: 27px;
line-height: 3.6rem;
text-align: justify;
}


.aya-number {
display: inline-block;
line-height: initial;
font-size: 16px;
padding: 0px;
margin: 0px;
}


}


.footenotes,
.footnotes {
font-size: 1.2rem;
background: none;
padding: 0.5rem;
border-top: 1px solid #c2c2c2;
}


@media only screen and (max-width: 354px) {
.custom-navbar-brand {
max-width: 80px;
font-size: 14px;
}

}


@media only screen and (max-width: 310px) {
.custom-navbar-brand {
max-width: 80px;
font-size: 12px;
}

}


.dropdown-menu.position-absolute {
right: -111px !IMPORTANT;
left: -100px;
max-width: 243px;
}


.pointer {
cursor: pointer;
}


.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: -100%;
background-color: #f1f1f1;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}


.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
display: block;
}



.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}


.head2nav3.fixed-top {
top: 0px;
width: 100%;
padding: 0px 19px;
background: #fff;
border-bottom: 1px solid #777;
}


@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}


.sidenav a {
font-size: 18px;
}

}


.fixed-top .navbar-collapse.collapse.show ul.navbar-nav.ms-autox {
padding-top: 43px;
}


h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
font-size: 18px;
}


.next-arrow a {
    /* clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); */
    padding: 12px 4px 12px 4px;
}


.previous-arrow a {
    /* clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%); */
    padding: 12px 4px 12px 4px;
}

.round-num {
border: 2px solid #fff;
border-radius: 50px;
width: 30px;
height: 30px;
display: inline-block;
line-height: 29px;
font-size: 14px;
margin: 0 4px;
}


.tafsir_text {
font-size: 1.4rem;
line-height: 2.2rem;
max-height: 260px;
overflow: auto;
padding: 1rem 8px;
}


.loading {
background: url(/images/tube-spinner2.svg) no-repeat center;
height: 60px;
}


.FastLink {
background: #fafafae6;
padding: 1.75rem 0.75rem;
}


.FastLink ul {
padding: 0px;
}


.fast-link-title {
border-bottom: 2px solid var(--color-brand-primary);
display: inline-block;
padding-bottom: 10px;
}


.FastLink ul a:before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
background: var(--color-brand-primary);
margin: 0 6px;
margin-inline-start: auto;
}


@media only screen and (max-width: 414px) {
.FastLink ul li {
display: inline-block;
width: 140px;
font-weight: bold;
font-size: 16px;
margin-top: 20px;
margin-right: 5px;
display: inline-flex;
vertical-align: text-top;
}

}


@media only screen and (min-width: 414.1px) {
.FastLink ul li {
display: inline-block;
width: 250px;
padding: 12px 4px;
font-weight: bold;
}

}


@media (prefers-color-scheme: dark) {
body {
background: #000;
}


a {
color: #ddb563;
}


a:hover {
color: #b8597c;
}


.ayat4tafseer .number,
.ayat4tafseer_text b {
color: #ddb563;
}


.breadcrumb>.active {
color: #ddb563;
}


body,
footer,
.card-body,
.ayat4tafseer,
.ayat4tafseer_text,
.section-3,
.section-2,
.section-1,
.section-content,
.FastLink,
div.spacer {
background: #0B2230;
color: #e2e2e2;
}


#translateindex .ayat,
#translateindex .ayat2 {
background-color: #1a1a1a;
}


.bg-white {
background-color: #1d1d1d !important;
}


.form-control {
color: rgb(239 239 239);
background-color: rgb(56 56 56);
}


.custom-nav {
background-color: #151515 !important;
}


.navbar-light .navbar-brand,
.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover {
color: #949494;
}


.navbar-toggler {
color: rgb(0 0 0 / 55%);
border-color: rgb(192 79 126);
}


.navbar-light .navbar-toggler {
border-color: unset;
background-color: unset;
background: none;
border: 0;
}


.navbar-toggler:focus {
box-shadow: none;
}


.navbar-light .navbar-toggler-icon {
filter: contrast(.1) brightness(100);
}


.navbar-light .navbar-nav .nav-link {
color: #949494 !IMPORTANT;
}


.para2 {
background: #242526;
background: #212525;
color: #e2e2e2;
}


.aya-number {
color: rgb(203 203 203);
background: rgb(76 76 76);
}


h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: rgb(190 155 85);
}


.table.table-striped {
background: #2d2d2d;
color: #fff;
}


.table-striped>tbody>tr:nth-of-type(odd) {
background: #171717;
color: #fff;
}


.img-radius {
border: 2px solid #e2e2e2;
}


footer .footer-bg {
border-color: #5b5e5e;
}


footer p {
color: #b1b1b1;
}


.the_content a {
color: #4a8ace;
}


.related-sidebar {
border-right: 8px solid #242526;
}


@media only screen and (max-width: 767px) {
.share-container.float {
background: #0B2230;
}

}



.accordion-button:not(.collapsed) {
color: unset;
background-color: #ebebeb;
box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
color: #2c2c2c;
}


.accordion-body {
max-height: 300px;
overflow-y: scroll;
background: #0B2230;
color: #e5e5e5;
}


.accordion-collapse.collapse.show {
background: #000;
}


.accordion-button:not(.collapsed) {
color: unset;
background-color: #414141;
box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}


span.quran-aya {
color: #bca744
}


.dropdown-menu {
background-color: #1e2222;
border: 1px solid #999
}


.dropdown-item {
color: #ddb563
}


.dropdown-divider {
border-top: 1px solid #ffffff75
}


.nav-link svg {
fill: #fff
}


.soundcloud-player {
background: #2c2c2c
}


.soundcloud-inverse-true {
display: block
}


.soundcloud-inverse-false {
display: none
}


.accordion-button::after {
filter: invert(1)
}


.sidenav {
background: #4b4b4b
}


.closebtn {
color: #fff;
}


.head2nav3.fixed-top {
background: #000;
border-bottom: 1px solid #fff
}


.lang-card a {
background: #383838;
}

}

.svg-icon {
padding: 1px 12px;
background-position: center center ;
background-repeat: no-repeat !IMPORTANT;
margin: 0 2px;
background-size: 20px ;
}


i.icon-time {
background: url(https://islamonline.net/wp-content/themes/is/files/image/time_gray.svg)no-repeat center center;
padding: 1px 7px;
background-size: 12px !IMPORTANT;
}


i.icon-search {
background: url(https://islamonline.net/wp-content/themes/is/files/image/search.svg) no-repeat center center;
padding: 10px 20px;
margin: 0px 2px;
border-radius: 8px;
}


i.icon-facebook {
background-image: url(https://islamonline.net/wp-content/themes/is/files/image/facebook.svg);
}


i.icon-twitter {
background-image: url(https://islamonline.net/wp-content/themes/is/files/image/twitter.svg);
}


i.icon-youtube {
background-image: url(https://islamonline.net/wp-content/themes/is/files/image/youtube.svg);
}


i.icon-instagram {
background-image: url(https://islamonline.net/wp-content/themes/is/files/image/instagram.svg);
}


i.icon-google-news {
background-image: url(https://islamonline.net/wp-content/themes/is/files/image/google-news.svg);
}


i.icon-soundcloud {
background-image: url(https://islamonline.net/wp-content/themes/is/files/image/sound-cloud.svg);
}


#FooteryMenu ul {
list-style: none;
padding-inline-start: 0;
}


#FooteryMenu ul {
list-style: none;
padding-inline-start: 0;
}


#FooteryMenu ul li {
display: inline-block;
border-inline-end: 1px solid #fff;
padding-inline-end: 4px;
margin-bottom: 0.75rem;
}


#FooteryMenu ul li:last-child {
display: inline-block;
border-inline-end: 0px;
padding-inline-end: 0px;
}


.green {
line-height: 2;
}

.newsletter-section {
/*background-color: #793e57;*/
}

.subscribe_label {
line-height: 1.9;
}

#mc_embed_signup {}

#mc-embedded-subscribe-form {}

#mce-EMAIL,
.email-input {
padding-right: 42px;
padding-left: 42px;
height: 42px !important;
font-size: 16px !important;
-webkit-box-shadow: 0 0 4px 0 rgb(68 131 0 / 15%);
box-shadow: 0 0 4px 0 rgb(68 131 0 / 15%);
max-width: 100%;
width: 100%;
background-color: #fff;
border-color: var(--color-brand-primary);
border-radius: 4px;
color: #303030;
align-items: center;
position: relative;
vertical-align: top;

}

#mce-EMAIL {
text-align: left;
direction: ltr;
}

#mce-EMAIL::placeholder {
color: #777;
text-align: center;
}

.icon-newsletter {
color: #cdc8b9;
pointer-events: none;
position: absolute;
top: 0;
z-index: 4;
right: 0;
left: 16px;
}

i.icon-newsletter-envelope {
position: absolute;
}

.icon-newsletter-envelope::before {
content: '';
background: url(https://islamonline.net/wp-content/themes/is/files/image/email.svg);
background-size: cover;
width: 32px;
height: 32px;
display: inline-block;
text-align: center;
vertical-align: baseline;
line-height: 1rem;
padding: 0px;
margin: 6px 0px 0px -10px;
filter: opacity(0.3);
}

.rtl .icon-newsletter-envelope::before {
margin: 6px 10px;
}

.input-container {
position: relative;
}

#mc-embedded-subscribe {
    padding: calc(0.4286em - 1px) 0.8572em !important;
    font-size: 16px !important;
    height: 2.461em !important;
    background-color: var(--color-brand-primary);
    border-color: transparent;
    color: #fff;
    border-radius: 4px;
    margin: 2px 0;
    width: 100%;
}

input#mc-embedded-subscribe:hover {
background-color: #94345c;
}

#subscribe-result {
min-height: 42px;
}


@media (min-width: 768px) {
.subscribe-form {
max-width: 410px;

}

}


/* The checkbox-container */
.checkbox-container2 {
display: block;
position: relative;
padding-left: 22px;
padding-right: 24px;
margin-bottom: 12px;
cursor: pointer;
font-size: 12px;
padding-inline-end: 4px;
}


.checkbox-container {
display: block;
position: relative;
cursor: pointer;
padding-inline-end: 4px;
}


/* Hide the browser's default checkbox */
.checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}


/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
right: 0;
height: 25px;
width: 25px;
background-color: transparent;
border: 1px solid transparent;
}


/* On mouse-over, add a grey background color */
.checkbox-container:hover input~.checkmark {
background-color: #ccc;
}


/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked~.checkmark {
background-color: #2196F3;
}


/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:before {
content: "";
position: absolute;
display: none;
}


/* Show the checkmark when checked */
.checkbox-container input:checked~.checkmark:before {
display: block;
}


.checkbox-container svg:before {
background: none;
}


.checkbox-container .checkmark-x:before {
content: "";
position: absolute;
display: none;
position: absolute;
top: -5px;
right: 15px;
height: 45px;
width: 2px;
background-color: transparent;
border: 1px solid transparent;
transform: rotate(55deg);
opacity: .7;
}


.checkbox-container input:checked~.checkmark-x:before {}


.checkbox-container input:checked+.checkmark-x2:before {
display: block;
background: #262626;
fill: #fff;
}


.checkbox-container input:checked+.checkmark-x svg {
background: var(--color-brand-primary);
fill: #fff;
}


/* Style the checkmark/indicator */
.checkbox-container .checkmark:before {
left: 9px;
top: 1px;
width: 7px;
height: 16px;
border: solid #fff;
border-width: 0px 3px 3px 0px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}


.RepeatBtn {
background: none;
cursor: pointer;
user-select: none;
margin: 0px 15px;
}


.RepeatBtn .checkmark {
transform: scale(0.7);
}


.RepeatBtn .checkmark {
transform: scale(0.7);
}
.RepeatBtn input[type=checkbox]:checked+label {
color: #0964aa;
font-style: normal;
background: black;
width: 60px;
}
.white-bg {
background: #fff;
}
.footer-popup {
display: none;
z-index: 0;
position: absolute;
}
.mp3-player.active .footer-popup,
.popup-audio.active .footer-popup {
display: block;
position: fixed !important;
bottom: 0;
left: 0;
right: 0;
border-top: 3px solid #cd4b4b;
z-index: 1030;
-webkit-transform: translateZ(0);
-webkit-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
padding-top: 10px;
transform: translate(0);
}
.mini {
height: auto;
}

.mini .plays-butn {
display: none !important;
}

.footer-popup * {
cursor: pointer;
}

.play-pause-button-main {
display: inline-block;
cursor: pointer;
}

.play-pause-button {
display: block;
cursor: pointer;
width: 32px;
height: 32px;
}

.play-pause-button-main .play-pause-icon:before,
.play-pause-button .play-pause-icon:before {
content: '';
position: absolute;
width: 32px;
height: 32px;
background: url(https://islamonline.net/wp-content/themes/is/files/image/play-button.svg) no-repeat center center/cover;
}

.rewind-img,
.forward-img {
width: 32px;
height: 32px;
}

.rewind-img:before {
content: '';
position: absolute;
width: 32px;
height: 32px;
background: url(https://islamonline.net/wp-content/themes/is/files/image/rewind-button.svg) no-repeat center center/cover;
}

.forward-img:before {
content: '';
position: absolute;
width: 32px;
height: 32px;
background: url(https://islamonline.net/wp-content/themes/is/files/image/forward-button.svg) no-repeat center center/cover;
}

.play-pause-button-main .play-pause-icon {
height: 33px;
width: 32px;
padding: 0px 10px;
}

.play-pause-button-main .play-label {
margin: 0px 18px 0 22px;
display: inline-block;
}

body.rtl .play-pause-button-main .play-label {
margin: 6px 10px 0 40px;
display: inline-block;
}

body.rtl .play-pause-button-main .play-label {
margin: 0px 20px 0 10px;
}

.play-pause-button-main.active .play-pause-icon:before,
.play-pause-button.active .play-pause-icon:before {
content: '';
background: url(https://islamonline.net/wp-content/themes/is/files/image/pause-button.svg) no-repeat center center/cover;
}

.player {
width: 100%;
max-height: 25px;
max-width: 800px !IMPORTANT;
min-width: 280px;
text-align: center;
margin: auto;
display: block;
margin-top: 8px;
margin-bottom: 8px;
max-height: 25px;
}

.close-button {
left: 12%;
position: absolute;
top: -20px;
margin: 0;
background: #fff;
height: 32px;
width: 32px;
border: 3px solid #cd4b4b;
border-radius: 100px;
padding: 2px;
line-height: 0px;
text-align: center;
vertical-align: middle;
}
.minimize-button {
right: 12%;
position: absolute;
top: -20px;
margin: 0;
background: #fff;
height: 32px;
width: 32px;
border: 3px solid #cd4b4b;
border-radius: 100px;
padding: 2px;
line-height: 0px;
text-align: center;
vertical-align: middle;
}
.rotate {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
transition: all .3s linear;
}
.rotate.down {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.totalTime {
padding: 6px 12px;
}
.gray-player-btn {
border: 1px solid;
border-radius: 10px;
background: var(--color-brand-primary);
padding: 4px 8px;
color: #fff;
}

body.audio-popup-maxmized .back-to-top,
body.audio-popup-maxmized .move-down {
bottom: 120px;
}


@media (prefers-color-scheme: dark) {

body,
header#site-header,
body.sticky-header-mobile #site-header,
.lightgray-bg,
.recent-archive,
.post-meta,
.btn.invers-color,
.ar_detail_bx,
.white-bg {
background: #0B2230;
color: #fff;
}


audio.player {
filter: invert(1);
}

}