:root {
    --bg-job: url("");
}
.job-cards {
    display: flex;
    padding-top: var(--Sizes-Section-section-padding-lg, 96px);
    align-items: flex-end;
}
    .job-cards .job-card {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
        .job-cards .job-card .item-job-image {
            visibility: hidden;
            opacity: 0;
            transform: translateY(30px); 
            transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s; 
            position: relative;
            background: var(--bg-job, url("")), #ecfae2;
            background-size: cover;
            background-repeat: no-repeat;
            border: 2px solid #9fe870;
            border-radius: 16px;
            margin-bottom: -30px;
            z-index: 0;
            height: 132px;
            width: 100%;
        }
        .job-cards .job-card.active .item-job-image {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0s;
        }
        .job-cards .job-card .item-job-image img {
            position: absolute;
            height: 175px;
            width: 100%;
            top: -70px;
            z-index: 1;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 1s ease, transform 1s ease;
        }
        .job-cards .job-card.active .item-job-image img {
            opacity: 1;
            transform: translateY(0);
        }
        .job-cards .job-card.active .bottom {
            display: flex;
            min-width: 120px;
            padding: var(--Sizes-Gap-gap-24, 24px) var(--Sizes-Padding-padding-16, 16px);
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: var(--Sizes-Gap-gap-16, 16px);
            align-self: stretch;
            border-radius: var(--Sizes-Radius-radius-md, 24px);
            border: 2px solid var(--Primitives-FE-400, #9FE870);
            background: #FFF;
            box-shadow: 0px 2px 16px 0px rgba(159, 232, 112, 0.40);
            z-index: 1;
        }
    .job-cards .bottom {
        display: flex;
        min-width: 120px;
        padding: var(--Sizes-Gap-gap-24, 24px) var(--Sizes-Padding-padding-16, 16px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--Sizes-Gap-gap-16, 16px);
        align-self: stretch;
        border-radius: var(--Sizes-Radius-radius-md, 24px);
        border: 2px solid var(--Primitives-FE-400, #ECFAE2);
        background: #FFF;
        z-index: 1;
    }
.job-result .job-categories {
    min-width: 200px;
    padding: 16px;
    z-index: 1;
}
        .job-result .job-categories .job-categories-list ul {
            display: flex;
            margin: 0px !important;
            width: 100%;
        }
.job-result .job-category-content {
    flex: 1 0 0;
    align-self: stretch;
    border-left: 1px solid #ececec;
    overflow: auto;
    z-index:1;
}
    .job-result .job-categories .job-categories-list ul li button.active {
        background: #ecfae2;
        color: #00994f !important; 
        display:flex;
        width:100%;
    }
    .job-result .job-categories .job-categories-list ul li button{
       height:54px;
       align-items:center;
    }
.job-result .job-category-content .job-tab-pane {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}   
.job-pagination {
    display: flex;
    padding: 12px 24px;
    align-items: flex-start;
    align-self: stretch;
    justify-content: space-between;
    border-top: 1px solid #ececec;
    flex-direction:row;
}
.job-pagination-numbers {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    width:100%;
}
.job-pagination-arrows {
    font-size: 20px;
    display: flex;
    color: #00994f;
}
.job-type-container {
    display: none;
}
    .job-type-container.show {
        display: block;
        margin-top:48px;
    }

@media(max-width:767px){
    .job-cards{
        width:100%;
    }
    .job-result {
        flex-direction: column;
    }
        .job-result .job-categories .job-categories-list ul{
            display:none;
        }
        .job-result .job-categories {
            min-width: 286px;
            margin: 12px;
            padding: 16px 8px;
            border: 1px solid var(--Primitives-Neutral-2, #ECECEC);
            border-radius: 8px;
            background: var(--Palette-Fill-Background-bg-white, #FFFFFF);
        }
    .job-type-container .job-overlay {
        background: linear-gradient(180deg, #DAF6C6 0%, #F8F8F8 23.57%);
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        opacity: 0.4;
        z-index:0;
    }
    .job-items-container .job-item {
        border-radius: 8px;
        margin: 16px 16px 12px 16px;
        padding: 12px;
        border: 1px solid var(--Primitives-Neutral-2, #ECECEC);
        background:#FFF;
    }
    .job-items-container{
        padding-bottom:8px;
    }
}
@media(min-width:768px) and (max-width:991px){
    .job-categories .job-categories-m {
        display: none;
    }
    .job-items-container .job-address {
        width: 38%;
    }
    .job-items-container .job-time {
        width: 38%;
    }
    .job-result .job-categories{
        max-width:250px;
    }
}

@media(min-width:768px){
    .job-categories .job-categories-m{
        display:none;
    }
}
@media(min-width:992px){
     .job-cards .bottom{
        min-height:246px;
    }
    .job-cards .bottom .job-card-title{
        min-height:78px;
    }
    .job-items-container .job-address {
        width: 42%;
    }

    .job-items-container .job-time {
        width: 38%;
    }
}
@media(min-width:1280px){
    .job-cards .bottom{
        min-height:272px;
    }
    .job-cards .bottom .job-card-title{
        min-height:94px;
    }
    .job-result .job-categories{
        width:369px;
    }
}