/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/

/* =Theme customization starts here
------------------------------------------------------- */
#main-content .container:before{
    width: 0px;
    background-color: none;
}
/*merchan lsiting*/

.content-area{
    margin-bottom: 50px;
    margin-top: 20px;
}
.content-area .listing{

}
.content-area .listing ul{
    margin: 0px;
    padding: 0px;
    align-items: flex-end;
    justify-content: flex-start;
    align-content: stretch;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
}
.content-area .listing ul li{
    list-style: none;
    flex: 0 0 32%;
    outline: 1px solid #CCC;
    margin: .5333% .3333%;
    padding: 10px;
    border-radius: 10px;
}
.content-area .listing ul li .item-box{
    
}
.content-area .listing ul li .item-box .img-box{
    height: 200px;
    max-height: 200px;
    text-align: center;
}
.content-area .listing ul li .item-box .img-box img{
    max-width: 100%;
    height: inherit;
    margin: 0 auto;
    text-align: center;
}
.content-area .listing ul li .item-box h2{
    margin: 0px;
    padding: 10px 0px 0px 0px;
}
.content-area .listing ul li .item-box h3{
    margin: 0px;
    padding: 10px 0px 0px 0px;
    font-size: 18px;
}
.content-area .listing ul li .item-box h4{
    margin: 0px;
    padding: 10px 0px 10px 0px;
    font-size: 16px;
}
.content-area .listing ul li .item-box p{

}
/* Container */
.pagination {
    text-align: center;
    margin: 20px 0;
}

/* Pagination Links */
.pagination a, .pagination span {
    display: inline-block;
    margin-right: 5px;
    padding: 8px 12px;
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #444;
    font-size: 14px;
}

.pagination a:hover, .pagination a:focus {
    background-color: #e9e9e9;
}

/* Current Page */
.pagination .current {
    background-color: #0073aa;
    color: #fff;
}

/* Disabled Page */
.pagination .disabled {
    color: #888;
    background: #f1f1f1;
}

/* Next/Previous */
.pagination .prev, .pagination .next {
    font-weight: bold;
}

.navbar-vertical.navbar-expand-lg .navbar-nav .nav-link {
   
}
 

/** sidebar width*/
.navbar-vertical.navbar-expand-lg {
    display: block;
    position: relative;
    top: 0;
    bottom: 0;
    width: 100%;
   overflow-y: auto;
   margin-bottom: 20px;
}
 

.navbar-vertical .navbar-nav .nav-link {
    display: flex;
    align-items: center;
   
}

 .navbar-vertical.navbar-expand-lg .navbar-nav .nav .nav-link {
    padding-left: 2.25rem;
}

.navHeading {
    padding-left: 0.35rem;
}
.navPagesSub .nav-item .nav-link {
    padding-left: 3.25rem!important;
}

.filter{

}
.content-area .listing ul li .item-box .obt-name .message{
    position: absolute;
    bottom: 0px;
    z-index: 99999999;
    background: #000;
    color: #FFF;
    padding: 0px 5px 0px 5px;
    font-size: 12px;
}
.filter-ul{
    max-width: 750px;
    float: right;
    margin: 0px;
    padding: 0px;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    flex-wrap: nowrap;
    flex-direction: row;
}
.filter-ul li{
    list-style: none;
    margin-right: 5px;
}
.filter-ul li .clearbtn{
    background: red;
    padding: 5px;
    float: left;
    width: auto;
    color: #FFF;
    line-height: 20px;
    margin-left: 4px;
}
.filter-ul li input,.filter-ul li select{
    width: 100%;
    margin: auto 5px;
    height: 30px;
}
.filter-ul li button{
    background: #01375a;
    color: #FFF;
    border: 0px;
    padding: 5px;
    height: 30px;
}
.content-area{
    margin-bottom: 50px;
    margin-top: 20px;
}
.content-area .obituary_listing{

}
.content-area .obituary_listing ul{
    margin: 0px;
    padding: 0px;
    align-items: stretch;
    justify-content: space-between;
    display: flex;
    list-style: none;
    padding-left: 0;
    align-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
}
.content-area .obituary_listing ul li{
    list-style: none;
    outline: 1px solid #CCC;
    margin: 0px 0px 15px 5px;
    border-radius: 0px;
    border: 0px;
    width: 16%;
    padding: 5px;
}
.content-area .obituary_listing ul li .item-box{
    position: relative;
    z-index: 9999;
    overflow: hidden;
}
.content-area .obituary_listing ul li .item-box .img-box{
    height: 200px;
    max-height: 200px;
    text-align: center;
}
.content-area .obituary_listing ul li .item-box .img-box img{
    max-width: 100%;
    height: initial;
    margin: 0 auto;
    text-align: center;
    max-height: initial;
}
.content-area .obituary_listing ul li .item-box h2{
    margin: 0px;
    padding: 10px 0px 0px 0px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
}
.content-area .obituary_listing ul li .item-box h2 button{
    border: 0px;
    /* background: #1cc119; */
    font-size: 18px;
    color: #585858;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 53px;
    align-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;}
.content-area .obituary_listing ul li .item-box h3{
    margin: 0px;
    padding: 10px 0px 0px 0px;
    font-size: 18px;
}
.content-area .obituary_listing ul li .item-box h4{
    margin: 0px;
    padding: 10px 0px 10px 0px;
    font-size: 16px;
}
/*merchant listing end*/
.user-panel{
    background: #000;
    padding: 5px;
    color: #FFF;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.user-panel a{
    color: #FFF;
    text-decoration: none;
    background: #787878;
    padding: 2px 9px 2px 10px;
}
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #DDD;
}
.content-area .obituary_listing ul li .item-box h2 button.likeEmoji{
    cursor: pointer;
}
.content-area .obituary_listing ul li .item-box h2 button img{
    width: 25px;
}
.f70{
    flex: 0 0 70px;
}
#searchBox1,#searchBox2 {
    margin-bottom: 10px;
    width: calc(100% - 10px); /* Adjusts the width to fit the container */
    padding: 5px;
    box-sizing: border-box;
    width: 100%;
}
.custom-multiple {
    border: 1px solid #ccc !important;
    padding: 5px !important;
    height: auto !important;
    height: 200px !important;
    overflow-y: auto !important;
    background: white !important;
    box-sizing: border-box;
}
.custom-multiple label {
    display: block;
    margin: 2px 0;
}
.merchant_listing ul{
    margin: 0px;
    padding: 0px;
    margin: 0px;
    padding: 0px;
    align-items: center;
    justify-content: center;
    display: flex;
    list-style: none;
    padding-left: 0;
    align-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
}
.merchant_listing ul li{
    list-style: none;
    flex: 0 0 30%;
    outline: 0px solid #CCC;
    margin: 0px 0px 15px 5px;
    padding: 0px;
    border-radius: 0px;
    border: 0px;
}
.merchant_listing ul li .item-box{
    padding: 5px;
    border: 1px solid #CCC;
    margin: 6px;
}
.merchant_listing ul li .item-box .img-box{
    height: 200px;
}
.merchant_listing ul li .item-box h2{
    font-size: 22px;
}
.merchant_listing ul li .item-box h3{
    font-size: 18px;
}
.merchant_listing ul li .item-box h3 a{
    color: #1a60ff;
}
.merchant_listing ul li .item-box h4{
    font-size: 14px;
}
.merchant_listing ul li .item-box p{
    background: #f3f3f3;
    text-align: center;
    color: #FFF;
}
.front-admin-panel{
    margin: 100px auto;
}
.navbar-nav .nav-item{
    border: 1px solid #CCC;
}
.navbar-nav li.active{
    font-weight: bold;
}
.filter{

}
.content-area .obituary_listing .filter-ul,.filter-ul{
    margin: 0px;
    padding: 0px;
    display: flex;
    align-items: stretch;
    margin: 0px;
    padding: 0px;
    align-items: stretch;
    justify-content: flex-end;
    display: flex;
    list-style: none;
    padding-left: 0;
    align-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
}
.content-area .obituary_listing .filter-ul li, .filter-ul li{
    list-style: none;
    outline: 0px solid #CCC;
    margin: 0px 0px 0px 0px;
    border-radius: 0px;
    border: 0px;
    width: auto;
    padding: 5px;
}
.content-area .obituary_listing .filter-ul li .clearbtn, .filter-ul li .clearbtn{
    background: red;
    padding: 5px;
    float: left;
    width: auto;
    color: #FFF;
    line-height: 20px;
    margin-left: 4px;
}
.content-area .obituary_listing .filter-ul li .filter-ul li input, .content-area .obituary_listing .filter-ul li .filter-ul li select, .filter-ul li input,.filter-ul li select{
    width: 100%;
    margin: auto 5px;
    height: 30px;
}
.content-area .obituary_listing .filter-ul .filter-ul li button, .filter-ul li button{
    background: #01375a;
    color: #FFF;
    border: 0px;
    padding: 5px;
    height: 30px;
}
.page-listing{
    margin-top: 100px;
}
.obituary-list .filter{
    clear: both;
    display: grid;
}
.mt-100 {
    margin-top: 100px;
}
.mb-100 {
    margin-bottom: 100px;
}
body.page-template-obituary-listing #main-content .container, body:not(.et-tb-has-header) #main-content .container {
    padding-top: 0px;
}
.filter-form {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.filter-toggle {
    display: none;
}
.membership-search{
    border: 1px solid #ddd;
    border-radius: 10px;
    max-width: 600px;
    background-color: #f9f9f9;
    margin: 0 auto;
}
/* Mobile Styles */
@media screen and (max-width: 768px) {
    .filter-toggle {
        display: block;
        background-color: #01375a;
        color: white;
        padding: 10px;
        margin-bottom: 10px;
        width: 100%;
        text-align: center;
        border: none;
    }

    .filter-form {
        display: none; /* Hide the filter form by default on mobile */
        flex-direction: column;
        width: 100%;
    }

    .filter-ul li {
        width: 100%;
        margin: 5px 0;
    }

    .filter-form.active {
        display: flex; /* Show the filter form when active */
    }
}
@media only screen and (max-width: 600px) {
    
    .merchant_listing ul li {
        flex: 0 0 100%;
    }
    .content-area .obituary_listing ul li {
        list-style: none;
        outline: 1px solid #CCC;
        margin: 2.5333% .3333%;
        padding: 10px;
        border-radius: 10px;
    }
    .merchant-listing .container {
        padding-top: 30px;
        width: 95%;
    }
    .filter-ul {
        margin: 0px;
        padding: 0px;
        display: flex;
        align-items: stretch;
        justify-content: flex-end;
        flex-wrap: nowrap;
        flex-direction: column;
        width: 100%;
    }
    .filter-ul li input, .filter-ul li select {
        width: 100%;
        margin: auto 5px;
        height: 30px;
    }
    .filter-ul li button {
        background: #01375a;
        color: #FFF;
        border: 0px;
        padding: 5px;
        height: 30px;
        margin: 6px auto;
        width: 200px;
    }
    .filter-ul li {
        list-style: none;
        text-align: center;
        margin: 0px 5px 0px 0px;
    }
    .content-area .listing ul li {
        list-style: none;
        flex: 0 0 90%;
        outline: 1px solid #CCC;
        margin: 5px auto;
        padding: 10px;
        border-radius: 10px;
    }
}
@media only screen and (max-width: 768px) {
    .content-area .obituary_listing ul li{
        width: 30%;
    }
}
@media only screen and (max-width: 700px) {
    .content-area .obituary_listing ul li{
        width: 30%;
    }
    .pagination a, .pagination span {
        padding: 8px 9px;
    }
}
@media only screen and (max-width: 600px) {
    .content-area .obituary_listing ul li{
        width: 30%;
    }
}
@media only screen and (max-width: 500px) {
    .content-area .obituary_listing ul li{
        width: 50%;
    }
}
@media only screen and (max-width: 400px) {
    .content-area .obituary_listing ul li{
        width: 100%;
    }
}