/*--------- prayers template start ------------*/
@media screen and (max-width: 769px) {
    .mobile-top-bg {
        display: block !important;
    }
    .parent_nm_mob {
        display: block !important;
    }
}
.breadcrumb img {
    height: 21px;
}

.loading-div {
    position: fixed;
    z-index: 999999;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -50px;
}
.pagination2.dark-theme.simple-pagination {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
}
.pagination2.dark-theme.simple-pagination ul {
    font-family: auto;
    text-align: center;
    margin: 0 auto;
}
.pagination2.dark-theme.simple-pagination li {
    margin: 0 0px;
    padding: 0px;
    width: 30px;
    height: 30px;
    line-height: 100%;
    border: 1px solid #eee;
}
.pagination2 {
    float: none;
    display: block;
    margin: 0 auto;
    text-align: center;
}
.active1 {
    background-color: #4B9256;
    color: white;
}
.pagination2.dark-theme.simple-pagination {
    margin-left: -15px;
    margin-right: -16px;
}
.pagination2 li {
    float: none;
    display: inline-block;
    margin: 7px 4px;
    font-size: 15px;
}
.pagination2 li a {
    color: rgb(122, 94, 61);
}

.pagination2 {
    float: none;
    display: block;
    margin: 0 auto;
    text-align: center;
}
.pagination2 ul li {
    float: none;
    display: inline-block !important;
    vertical-align: middle !important;
}
.pagination2 li a {
    float: none !important;
    color: #C49432 !important;
    display: block !important;
    line-height: 30px !important;
    box-sizing: border-box;
}
input#key_btn {
    padding: 12px;
    width: 251px;
}
input#date_key {
    padding: 12px;
    width: 251px;
}
.pagination2 ul li .current {
    background: #4B9256;
    color: #fff;
    height: 30px;
    display: block;
    line-height: 30px;
}
.pagination2 ul li.disabled .current {
    background: none;
    color: #C49432;
}

.header { 
    background-size: 100%!important;
    left: 0!important;
}
.border-line {
    width: 85%;
    margin-left: 15%;
}

.banner-sec {
    max-width: 100% !important;
    margin: 0 auto !important;
}

.mid-banner h3 {
    position: absolute;
    margin-top: 0;
    text-align: left;
    left: 500px;
    font-size: 30px;
    color: #fff;
    top: 31%;
}
.thum_img {
    position: absolute;
    width: 175px;
    height: 175px;
    left: 10.5%;
    overflow: hidden;
    top: 9%;
}
.thumb-img {
    position: inherit;
    bottom: 0;
    left: 0;
}

@media only screen and (max-width:1900px) {
    .mid-banner {
        margin-top: -8%;
    }

    .thum_img {
        top: -5%;
    }
}
@media only screen and (max-width:1700px) {

    /*.mid-banner h3{left: 400px;}*/
    /*.thum_img{ top:15%;}*/
}
@media only screen and (max-width:1600px) {
    .thum_img {
        top: -15%;
    }
}
@media only screen and (max-width:1550px) {
    /*.thum_img{ top:-5px;}*/
}

@media only screen and (max-width:1400px) {
    .thum_img {
        top: -30%;
    }
}
@media only screen and (max-width:1300px) {
    .mid-banner h3 {
        /*left: 320px;*/
        top: 39%;
    }

}
@media only screen and (max-width:1250px) {
    .mid-banner h3 {
        top: 34%;
    }

}
@media only screen and (max-width:1150px) {
    .thum_img {
        width: 135px;
        height: 135px;
        top: 3%;
    }

    .mid-banner h3 {
        font-size: 20px;
        left: 270px;
    }

    .horizan_img img {
        min-height: 150px;
        max-width: 100%;
    }

    .mid-banner {
        margin-top: -11%;
    }

    .header {
        background-size: 105% !important;
    }

    .mid-banner .horizan_img h3 {
        padding-left: 250px;
    }
}
@media only screen and (max-width:980px) {
    .mid-banner h3 {
        font-size: 18px;
    }

    .mid-banner .horizan_img h3 {
        padding-left: 220px;
    }
}
@media only screen and (max-width:769px) {
    .mid-banner .horizan_img h3 {
        padding-left: 0;
        margin-left: 0;
        text-align: center !important;
    }

    .pth-sub-banner .newcat-top-title {
        display: none;
    }
}
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}
.acdcss {
    margin-top: 10px;
    font-weight: 700;
    color: #0B6623;
    border: none;
    color: none;
    background: no-repeat;
    font-size: 16px;
}
.panelll {
    padding: 0 18px;
    display: none;
    overflow: hidden;
}

.cvf_pag_loading {
    padding: 20px!important;
}

.cvf-universal-pagination ul {
    margin: 0 !important;
    padding: 0 !important;
}
.cvf-universal-pagination ul li {
    display: inline !important;
    margin: 3px!important;
    padding: 4px 8px !important;
    background: #FFF; 
    color: #C49432;
}

.my-soul ul li.active:hover { 
    cursor: pointer;
    background: #4794b6;
    color: white;
}

.about-prayer ul li.active:hover {
    cursor: pointer;
    background: #bfa5be;
    color: white;
}

.prayer-tosay ul li.active:hover {
    cursor: pointer;
    background: #2d6d80;
    color: white;
}

.daily-living ul li.active:hover {
    cursor: pointer;
    background: #549447;
    color: white;
}

.daily-examination ul li.active:hover {
    cursor: pointer;
    background: #602266;
    color: white;
}

.ten-command ul li.active:hover {
    cursor: pointer;
    background: #a39990;
    color: white;
}

.gods-love ul li.active:hover {
    cursor: pointer;
    background: #31693b;
    color: white;
}

.angels-saint ul li.active:hover {
    cursor: pointer;
    background: #f5d66c;
    color: white;
}

.physical-life ul li.active:hover {
    cursor: pointer;
    background: #9fd8e5;
    color: white;
}

.cvf-universal-pagination ul li.inactive {
    background: #0b6623; 
}

.cvf-universal-pagination ul li.selected {
    background: #0b6623;
    color: #fff;
    height: 30px;
    line-height: 30px;
}

.cvf-universal-pagination { 
    text-align: center!important;
    padding-bottom: 22px!important;
}

[anim=ripple] {
    position: relative;
    overflow: hidden;
}

[anim=ripple]:before {
    content: "";
    position: absolute;
    display: block;
    background: var(--ripple-background, white);
    border-radius: 50%;
    pointer-events: none;
    top: calc(var(--y) * 1px);
    left: calc(var(--x) * 1px);
    width: calc(var(--d) * 1px);
    height: calc(var(--d) * 1px);
    opacity: calc(var(--o, 1) * var(--ripple-opacity, 0.3));
    transition: calc(var(--t, 0) * var(--ripple-duration, 600ms)) var(--ripple-easing, linear);
    transform: translate(-50%, -50%) scale(var(--s, 1));
    transform-origin: center;
}

a.link {
    --ripple-background: black!important;
    --ripple-opacity: 0.1!important;
    --ripple-duration: 600ms!important;
    display: block!important;
    color: black!important;
    text-decoration: none;

    text-align: left!important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transition: background-color 300ms;

}

.rainbow {
    --ripple-opacity: 1;
    --ripple-background: radial-gradient(circle at center,
            rebeccapurple,
            dodgerblue,
            olive,
            gold,
            orange,
            tomato);
    --ripple-duration: 2000ms;
    --ripple-easing: cubic-bezier(0, 0.5, 0.5, 1);
    background-color: skyblue;
    color: rgba(255, 255, 255, 0.7);
    transition: background-color 300ms, color 300ms;
}
/*--------- prayers tempplate end ------------*/

/*--------- leftfilter-prayer start ------------*/
    @media screen and (max-width: 769px) {
        .container_mobile {
            display: block !important;
        }

        .new-prayer-section {
            display: none !important; 
        }

    }

    .ripple {
        background-position: center;
        transition: background 0.8s;
    }

    .ripple:hover {
        background: #4794b6 radial-gradient(circle, transparent 1%, #4794b6 1%) center/15000%;
    }

    .ripple:active {
        background-color: #6eb9f7;
        background-size: 100%;
        transition: background 0s;
    }

    .ripple2:hover {
        background: #bfa5be radial-gradient(circle, transparent 1%, #bfa5be 1%) center/15000%;
    }

    .ripple2:active {
        background-color: #eccbeb;
        background-size: 100%;
        transition: background 0s;
    }

    .ripple2 {
        background-position: center;
        transition: background 0.8s;
    }

    .ripple3:hover {
        background: #2d6d80 radial-gradient(circle, transparent 1%, #2d6d80 1%) center/15000%;
    }

    .ripple3:active {
        background-color: #6a97a5;
        background-size: 100%;
        transition: background 0s;
    }

    .ripple3 {
        background-position: center;
        transition: background 0.8s;
    }

    .ripple4:hover {
        background: #549447 radial-gradient(circle, transparent 1%, #549447 1%) center/15000%;
    }

    .ripple4:active {
        background-color: #d6f1d1;
        background-size: 100%;
        transition: background 0s;
    }

    .ripple4 {
        background-position: center;
        transition: background 0.8s;
    }

    .ripple5:hover {
        background: #602266 radial-gradient(circle, transparent 1%, #602266 1%) center/15000%;
    }

    .ripple5:active {
        background-color: #edc6f1;
        background-size: 100%;
        transition: background 0s;
    }

    .ripple5 {
        background-position: center;
        transition: background 0.8s;
    }

    .ripple6:hover {
        background: #a39990 radial-gradient(circle, transparent 1%, #a39990 1%) center/15000%;
    }

    .ripple6:active {
        background-color: #f1e9e3;
        background-size: 100%;
        transition: background 0s;
    }

    .ripple6 {
        background-position: center;
        transition: background 0.8s;
    }

    .ripple7:hover {
        background: #31693b radial-gradient(circle, transparent 1%, #31693b 1%) center/15000%;
    }

    .ripple7:active {
        background-color: #94d29f;
        background-size: 100%;
        transition: background 0s;
    }

    .ripple7 {
        background-position: center;
        transition: background 0.8s;
    }

    .ripple8:hover {
        background: #f5d66c radial-gradient(circle, transparent 1%, #f5d66c 1%) center/15000%;
    }

    .ripple8:active {
        background-color: #f3e5b9;
        background-size: 100%;
        transition: background 0s;
    }

    .ripple8 {
        background-position: center;
        transition: background 0.8s;
    }


    .ripple9:hover {
        background: #9fd8e5 radial-gradient(circle, transparent 1%, #9fd8e5 1%) center/15000%;
    }

    .ripple9:active {
        background-color: #c6e5ec;
        background-size: 100%;
        transition: background 0s;
    }

    .ripple9 {
        background-position: center;
        transition: background 0.8s;
    }

    .btn_check1 {
        border: none;
        border-radius: 2px;
        padding: 14px 14px;
        font-size: 16px;
        text-transform: uppercase;
        cursor: pointer;
        color: white;
        background-color: #4794b6;
        box-shadow: 0 0 4px #999;
        outline: none;
    }

    .btn_check2 {
        border: none;
        border-radius: 2px;
        padding: 14px 14px;
        font-size: 16px;
        text-transform: uppercase;
        cursor: pointer;
        color: white;
        background-color: #bfa5be;
        box-shadow: 0 0 4px #999;
        outline: none;
    }

    .btn_check3 {
        border: none;
        border-radius: 2px;
        padding: 14px 14px;
        font-size: 16px;
        text-transform: uppercase;
        cursor: pointer;
        color: white;
        background-color: #2d6d80;
        box-shadow: 0 0 4px #999;
        outline: none;
    }

    .btn_check4 {
        border: none;
        border-radius: 2px;
        padding: 14px 14px;
        font-size: 16px;
        text-transform: uppercase;
        cursor: pointer;
        color: white;
        background-color: #549447;
        box-shadow: 0 0 4px #999;
        outline: none;
    }

    .btn_check5 {
        border: none;
        border-radius: 2px;
        padding: 14px 14px;
        font-size: 16px;
        text-transform: uppercase;
        cursor: pointer;
        color: white;
        background-color: #602266;
        box-shadow: 0 0 4px #999;
        outline: none;
    }

    .btn_check6 {
        border: none;
        border-radius: 2px;
        padding: 14px 14px;
        font-size: 16px;
        text-transform: uppercase;
        cursor: pointer;
        color: white;
        background-color: #a39990;
        box-shadow: 0 0 4px #999;
        outline: none;
    }

    .btn_check7 {
        border: none;
        border-radius: 2px;
        padding: 14px 14px;
        font-size: 16px;
        text-transform: uppercase;
        cursor: pointer;
        color: white;
        background-color: #31693b;
        box-shadow: 0 0 4px #999;
        outline: none;
    }

    .btn_check8 {
        border: none;
        border-radius: 2px;
        padding: 14px 14px;
        font-size: 16px;
        text-transform: uppercase;
        cursor: pointer;
        color: white;
        background-color: #f5d66c;
        box-shadow: 0 0 4px #999;
        outline: none;
    }

    .btn_check9 {
        border: none;
        border-radius: 2px;
        padding: 14px 14px;
        font-size: 16px;
        text-transform: uppercase;
        cursor: pointer;
        color: white;
        background-color: #9fd8e5;
        box-shadow: 0 0 4px #999;
        outline: none;
    }

    .clicked {
        text-decoration: underline !important;
        font-weight: bold !important;
    }

    @media only screen and (max-width:767px) {
        [anim=ripple] {
            position: relative;
            overflow: hidden;
        }

        [anim=ripple]:before {
            content: "";
            position: absolute;
            display: block;
            background: var(--ripple-background, white);
            border-radius: 50%;
            pointer-events: none;
            top: calc(var(--y) * 1px);
            left: calc(var(--x) * 1px);
            width: calc(var(--d) * 1px);
            height: calc(var(--d) * 1px);
            opacity: calc(var(--o, 1) * var(--ripple-opacity, 0.3));
            transition: calc(var(--t, 0) * var(--ripple-duration, 600ms)) var(--ripple-easing, linear);
            transform: translate(-50%, -50%) scale(var(--s, 1));
            transform-origin: center;
        }

/* for mobile revelations  */        
#exp-box-mob{
    display:block !important;
}

 .oftheday-wrapper {
    
    border-radius: 0px;
} 
        a.lnk {
            --ripple-background: black;
            --ripple-opacity: 0.1;
            --ripple-duration: 600ms;
            display: block !important;
            background: whitesmoke;
            color: black;
            text-align: center;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            transition: background-color 300ms;
        }

        a.lnk:hover {
            background-color: #ededed;
        }

    }
/*--------- leftfilter-prayer end ------------*/