/* Single Job Listing Header */
body.single-job_listing header.simplistic-header{
    padding: 30px 0;
    background-color: var(--color-main);
}

body.budi-scrolled.single-job_listing header.simplistic-header{
    padding: 10px 0 !important;
}

@media only screen and (min-width: 767px) {
    body.single-job_listing header.simplistic-header .simplistic-logo .logo {
        filter: unset;
    }

    body.single-job_listing.budi-scrolled header.simplistic-header .simplistic-logo .logo {
        filter: brightness(0) invert(1);
    }
}

.budi-job-grid {
    display: grid;
    gap: 24px;
}

.budi-job-grid:not(.bj-not-found) {
    min-height: 150px;
}

.budi-job-grid.budi-layout-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}

.budi-job-grid__item {
    background-color: rgb(247, 247, 247);
    padding: 32px;
    gap: 32px;
}

.budi-job-grid__item-company {
    margin-bottom: 3px;
    color: #737373;
    font-size: 12px;
}

.budi-job-grid__item-title {
    margin-bottom: 12px;
}

.budi-job-grid__item-meta {
    column-gap: 14px;
    row-gap: 5px;
    font-size: 12px;
    color: #737373;
}

.budi-job-grid__item-meta span {
    padding: 4px 0 4px 20px;
}

.budi-job-grid__item-location {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3334 6.66634C13.3334 10.6663 8.00002 14.6663 8.00002 14.6663C8.00002 14.6663 2.66669 10.6663 2.66669 6.66634C2.66669 5.25185 3.22859 3.8953 4.22878 2.8951C5.22898 1.89491 6.58553 1.33301 8.00002 1.33301C9.41451 1.33301 10.7711 1.89491 11.7713 2.8951C12.7715 3.8953 13.3334 5.25185 13.3334 6.66634Z' stroke='%23737373' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 8.66699C9.10457 8.66699 10 7.77156 10 6.66699C10 5.56242 9.10457 4.66699 8 4.66699C6.89543 4.66699 6 5.56242 6 6.66699C6 7.77156 6.89543 8.66699 8 8.66699Z' stroke='%23737373' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.budi-job-grid__item-type {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_476_24)'%3E%3Cpath d='M7.99998 14.6663C11.6819 14.6663 14.6666 11.6816 14.6666 7.99967C14.6666 4.31778 11.6819 1.33301 7.99998 1.33301C4.31808 1.33301 1.33331 4.31778 1.33331 7.99967C1.33331 11.6816 4.31808 14.6663 7.99998 14.6663Z' stroke='%23737373' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 4V8H11' stroke='%23737373' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_476_24'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.budi-job-grid__item-overview {
    line-height: 1.625em;
    color: var(--body-text-color);
}

.budi-job-grid__item-button {
    padding: 4px 32px 4px 0;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 7.55859H17V17.5586' stroke='%23E0163C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 17.5586L17 7.55859' stroke='%23E0163C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    color: var(--color-light);
}

/* Fullwidth Style */
.budi-job-grid.budi-layout-fullwidth .budi-job-grid__item {
    background-color: #ffffff;
}

.budi-job-grid.budi-layout-fullwidth .budi-job-grid__item-header,
.budi-job-grid.budi-layout-fullwidth .budi-job-grid__item-logo-content {
    gap: 16px;
}

.budi-job-grid.budi-layout-fullwidth .budi-job-grid__item-logo-content {
    width: 100%;
    max-width: calc(100% - 16px - 135px);
}

@media (min-width: 769px) {
    .budi-job-grid.budi-layout-fullwidth .budi-job-grid__item-logo-content {
        justify-content: center;
        align-items: center;
    } 
}

.budi-job-grid__item-image-container {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    display: grid;
    place-content: center;
}

.budi-job-grid.budi-layout-fullwidth .budi-job-grid__item-image {
    width: 70px;
}

.budi-job-grid.budi-layout-fullwidth .budi-job-grid__item-header-content {
    width: 100%;
    max-width: calc(100% - 16px - 70px);
}

.budi-job-grid.budi-layout-fullwidth .budi-job-grid__item-buttons {
    width: 135px;
}

@media(max-width: 1200px) {
    .budi-job-grid.budi-layout-grid {
        gap: 35px;
    }

    .budi-job-grid__item {
        padding: 30px;
    }
}

@media(max-width: 992px) {
    .budi-job-grid.budi-layout-fullwidth .budi-job-grid__item-logo-content {
        max-width: calc(100% - 16px);
    }

    .budi-job-grid.budi-layout-grid {
        gap: 25px;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 767px) {
    .budi-job-grid.budi-layout-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .budi-job-grid.budi-layout-fullwidth .budi-job-grid__item-logo-content {
        gap: 8px;
    }

    .budi-job-grid__item-meta {
        gap: 5px;
    }
}

@media(max-width: 360px) {

    .budi-job-grid__item {
        padding: 20px;
    }
}

/* Filter Sidebar
=================================== */

.budi-job-grid-filter__wrapper {
    padding: 24px;
    background-color: #ffffff;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 100px;
}

.budi-job-grid-filter__inner {
    gap: 32px;
}

.budi-job-grid-filter__header {
    padding-bottom: 8px;
    border-bottom: 0.5px solid #BABABA;
}

.budi-job-filter__clear-all {
    color: var(--color-light);
}

.budi-job-filter__clear-all:hover {
    color: var(--color-main);
}

.budi-job-grid-filter__field-title {
    color: #707070;
}

.budi-job-grid-filter__field ul {
    gap: 20px;
}

.budi-job-grid-filter__field li label {
    padding-left: 28px;
    font-weight: 500;
    color: #707070;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.budi-job-grid-filter__field li label>div {
    gap: 10px;
}

.budi-job-grid-filter__field li input {
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.budi-job-grid-filter__field li .budi-checkmark {
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    border: 2px solid #DBE1E6;
    background-color: transparent;
}

.budi-job-grid-filter__field li input:checked~.budi-checkmark {
    background-color: var(--color-main);
    border-color: var(--color-main);
}

.budi-job-grid-filter__field li .budi-checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.budi-job-grid-filter__field li input:checked~.budi-checkmark:after {
    display: block;
}

.budi-job-grid-filter__field li .budi-count-job {
    font-size: 14px;
    color: #707070;
}

/* Grid Filter Select */
.budi-job-grid-filter__select {
    border: 1px solid #DBE1E6;
    padding: 8px 30px 8px 16px;
    color: #5A6474;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.00001 6.3334C5.81001 6.3334 5.62084 6.26923 5.46667 6.14007L0.466672 1.9734C0.113339 1.67923 0.0650056 1.1534 0.360006 0.800068C0.654172 0.446734 1.17917 0.399234 1.53334 0.693401L6.00917 4.4234L10.4775 0.827568C10.8358 0.539235 11.3608 0.595901 11.6492 0.954234C11.9375 1.31257 11.8808 1.83673 11.5225 2.1259L6.52251 6.14923C6.37001 6.27173 6.18501 6.3334 6.00001 6.3334' fill='%23707070'/%3E%3C/svg%3E%0A");
    background-position: right 16px center;
}

@media(max-width: 767px) {
    .budi-job-grid-filter__inner {
        gap: 20px;
    }
}

@media(max-width: 360px) {
    .budi-job-grid-filter__wrapper {
        padding: 20px;
    }
}

/* Job Pagination */
.budi-job-pagination {
    margin-top: 24px;
    gap: 32px;
}

.budi-job-pagination .page-numbers {
    min-width: 15px;
    text-align: center;
    position: relative;
    font-weight: 600;
    color: var(--color-main);
}

.budi-job-pagination .page-numbers.current::after {
    content: '';
    position: absolute;
    width: 110%;
    height: 2px;
    left: -5%;
    bottom: -5px;
    background-color: var(--color-light);
}

.budi-job-pagination .page-numbers.prev,
.budi-job-pagination .page-numbers.next {
    color: var(--color-light);
}

@media(max-width: 992px) {
    .budi-job-pagination {
        gap: 20px;
    }
}