*{
    font-family: "Poppins",sans-serif;
    }
    h1,h2,h3,h4,h5,h6{
        font-weight: bold;
    }
    .image-container{
        transition: all 0.3s ease;
        display: contents;
        width: 360px;
        height: 250px;
        border-radius: 10px !important;
    }
    .image-container .image-church {
        display: none;
        position: absolute;
        object-fit: cover;
        border-radius: 10px !important;
        width: 360px;
        height: 250px;
        z-index: 2;
        left: 0;
        transition: all 0.2s ease; 
    }
    .hover-image-church{
        display: block !important;
    }
    .name-church:hover > .image-church {
        display: block !important;
        z-index: 1;
    
    }
    
    
    /*table */
    
    
    .table-container{
        position: relative;
        padding: 3rem 8rem;
        background-color: #f6f4e1;
        max-width: 100%;
        margin-top: 100px;
    
    }
    
    .table-container .head-table{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4rem;
    
    }
    
    .table-container .head-table .title h2{
        font-size: 45px;
        margin: 0;
        color: rgb(3, 70, 3);
    }
    
    .table-container .head-table .title .subtitle{
        font-size: 16px;
        text-transform: uppercase;
        font-weight: 900;
        color: #444;
        letter-spacing: 2px;
    }
    
    .table-container .table-church {
        border-collapse: collapse;
        width: 100%;
        /* overflow-x: auto; */
        border-top: 0.5px solid  #969494;;
    }
    .table-container .table-church td{
        font-size: 18px;
        position: relative;
        
    }
    
     .table-church td, th {
        border-bottom: 1px solid #0f3111;
        padding: 44px 0;
    }
    .table-church td:nth-child(1) {
        width: 30px;
    }
    .table-church td:nth-child(2) {
        width: 20rem;
    }
    .table-church td:nth-child(3) {
        padding-left: 40px;
        width: 20rem;
    }
    
    .table-church td a{
        text-decoration: none;
    }
    .table-church td .name-church{
        cursor: pointer;
        font-size: 18px;
        color: rgb(6, 90, 6);
        font-weight: 600;
        transition: all 0.3s ease;
    }
    .table-church td .location-church-mobile{
        display: none;
    }
    .table-church td .name-church:hover{
        color: rgb(165, 124, 11);
    }
    
    .table-church td .location-church{
        /* font-size: 14px; */
        font-size: 1.0rem;
        font-weight: 500;
    }
    .table-church .location-church .location{
        padding-right: 20px;
        font-weight: 600;
        text-transform:none;
    }
    .table-container .footer-table{
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0.5rem 0;
    }
    .table-container .row-per-page-container{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    
    .table-container .no-data-found{
        text-align: center;
    }
    .table-container #pagination{
        position: relative;
        display: flex;
        gap: 0.5rem;
        padding: 0;
        padding-top: 18px;
    }
    
    .table-container #pagination li.activePagination { 
        background-color: green;
    }
    .table-container #pagination li.activePagination > a { 
        color: #fff;
    }
    .table-container #pagination li {
        position: relative;
        width: 33px;
        height: 33px;
        border-radius: 50%;
        background-color: rgb(161, 155, 155,0.5);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .table-container #pagination li a {
        color: green;
        text-decoration: none;
    }
    
    
    /* search filter*/
    .table-container #search {
        border: none;
        border-bottom: 1px solid #969494;
        padding: 5px;
        margin-bottom: 10px;
        padding: 20px 1px;
        width: 40%;
        float: right;
        background-color: transparent;
    }
    .table-container #search:focus {
        outline: none;
        border-bottom: 1px solid #000;
    }
    
    /* row per page  */
    .table-container .row-per-page-container label{
        margin-right: 0.5rem;
    }
    .selectPage{
        position: relative;
        display: inline-block;
    }
    .selectPage .select-arrow{
        position: absolute;
        top: 2px;
        right: -6px;
        bottom: 0;
        margin: auto;
        width: 20px;   
        height: 20px;
        pointer-events: none;
        font-size:  13px;
    }
    /* .select-arrow::after {
        content: "\2BC6";
    } */
    
    .select-row-page label{
        font-size: 14px;
    }
    .select-row-page{
        display: none;
    }
    
    /* old style */
    /* .select-row-page .selectPage #rowsPerPage {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        border: none;
        background: transparent;
        padding: 5px 10px;
        border-bottom: 1px solid rgba(0, 0, 0);
    }
    
    .select-row-page .selectPage #rowsPerPage:focus{
        outline: none;
    } */
    
    .table-container .footer-table .row-per-page-container .select-row-page{ 
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* new edit */
    .table-container .footer-table .row-per-page-container{ 
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin-top: 2rem;
    }
    .table-container .footer-table .row-per-page-container .select {
        position: relative;
        display: inline-block;
        margin-right: 1rem;
    }
    .table-container .footer-table .row-per-page-container .select .select-arrow{
        position: absolute;
        top: 2px;
        right: -6px;
        bottom: 0;
        margin: auto;
        width: 20px;   
        height: 20px;
        pointer-events: none;
        font-size:  13px;
    }
    .table-container .footer-table .row-per-page-container .select #rowsPerPage {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        border: none;
        background: transparent;
        padding: 5px 10px;
        border-bottom: 1px solid rgba(0, 0, 0);
    }
    .table-container .footer-table .row-per-page-container .select #rowsPerPage:focus{
        outline: none;
    }
    
    /* showing info */
    
    #showingInfo{
        color: rgb(20, 133, 20);
        font-size: 14px;
    }
    
    @media only screen and (max-width: 600px) {
        body{
            padding: 0;
            margin: 0;
        }
        .table-scroll-container{
            /* overflow-x: auto; */
            padding: 15px 0;
            min-height: 200px;
        }
        .table-container{
            padding: 1rem 0.5rem 3rem 0.5rem;
            margin: 1rem;
            background-image: linear-gradient(-60deg, rgb(237, 248, 212) 0%, rgb(252, 249, 206) 100%);
            margin-top: 70px;
        }
         .table-container .table-church{
            position: relative;
            /* width: 600px !important; */
            padding-bottom: 4rem;
         }
        .image-container{
            display: cover;
            width: 200px;
            height: 200px;
            border-radius: 7px;
        }
        .image-container .image-church {
            
            position: absolute;
            object-fit: cover;
            width: 120px;
            height: 100px;
            top: 2px !important;
            left: 12px;
        }
        .table-container .head-table{
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            margin-bottom: 1rem;
        
        }
        
    
        .table-container .head-table #search{
            width: 90%;
        }
        .table-container .table-church td, th {
            border-bottom: 1px solid #030101;
            padding: 1.5rem 0;
        }
        td:nth-child(1) {
            width: 30px;
        }
        td:nth-child(2) {
            width: 240px !important;
            padding: 0;
        }
        td:nth-child(3) {
            padding-left: 15px !important;
            display: none;
            
        }
        td:nth-child(4) {
            padding-left: 10px;
            width: 230px !important;
            
        }
        td .name-church{
            font-size: 16px !important;
            color: green;
            font-weight: 600;
        }
    
        td .location-church{
            font-size: 13px !important;
            font-weight: 500;
        }
        td .location-church-mobile{
            color: #000;
            display: contents !important;
        }
        .table-church .location-church .location{
            padding-right: 10px;
        }
        td .church-url{
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .table-container .footer-table{
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            margin: 1rem 0;
        
        }
        .table-container .footer-table .row-per-page-container .select-row-page{ 
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .table-container .footer-table .row-per-page-container{ 
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            padding: 0;
            margin-top: 2rem;
            gap: 1rem;
        }
        .table-container .footer-table .row-per-page-container #pagination{ 
            flex-wrap: wrap;
            padding: 0;
        }
    }
    
    
    @media only screen and (min-width: 601px) and (max-width: 1024px) {
            .table-container{
                padding: 2rem 2rem;
            }
            .image-container{
                display: cover;
                width: 180px;
                height: 150px;
                border-radius: 7px;
            }
            .image-container .image-church {
                transition: all 0.3s ease;
                position: absolute;
                object-fit: cover;
                width: 180px;
                height: 150px;
                top: 4%;
                left: 1.5rem;
            }
            .table-container .head-table{
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 1rem;
            
            }
        
            .table-container .table-church td, th {
                border-bottom: 1px solid #030101;
                padding: 1.5rem 0;
            }
            .table-church td:nth-child(1) {
                width: 30px;
            }
            .table-church td:nth-child(2) {
                width: clamp(8rem,2vw,11rem) ;
                padding-right: 10px;
            }
            .table-church td:nth-child(3) {
                padding-left: 30px;
                width: 10rem;
            }
            .table-church td .name-church{
                font-size: 1rem;
                color: green;
                font-weight: 600;
            }
        
            td .location-church{
                font-size: 0.8rem;
                font-weight: 500;
            }
        
            .table-container .footer-table{
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                margin: 1rem 0;
            
            }
            .table .footer-table .row-per-page-container .select-row-page{ 
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .table .footer-table .row-per-page-container{ 
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
                padding: 0;
                margin-top: 2rem;
            }
            .table .footer-table .row-per-page-container #pagination{ 
                padding: 0;
            }
        
    }