/* JOBLISTE */
#job-list{
    display:flex;
    flex-direction: column;
}

#job-list .job-item{
    width:100%;
}

#job-list .job-item .wrapper{
    display:flex;
    justify-content: space-between;
    align-items: center;
    border:1px solid #0000001a;
    padding:clamp(20px, 2.08vw, 40px);
    border-radius: clamp(20px, 1.6vw, 30px);
    margin-bottom:10px;
    background-color: #fff;
}

#job-list .job-item .wrapper p{
    margin:0;
}

#job-list .top-job-marker{
    width:clamp(40px, 3vw, 54px);
    display: flex;
}

#job-list .top-job-marker svg{
    width:clamp(40px, 3vw, 54px);
    height:clamp(40px, 3vw, 54px);
}

#job-list .job-position{
    width:35.5%;
}

#job-list :is(.company, .city, .date){
    font-size: var(--e-global-typography-ecbb3e5-font-size);
    font-weight: var(--e-global-typography-ecbb3e5-font-weight);
    line-height: var(--e-global-typography-ecbb3e5-line-height);
    color:#747474;
}

#job-list .city::before{
    font-size: var(--e-global-typography-ecbb3e5-font-size);
    font-weight: var(--e-global-typography-ecbb3e5-font-weight);
    line-height: var(--e-global-typography-ecbb3e5-line-height);
    color:#747474;
}

#job-list .additional-info > div{
    display: flex;
    gap:10px;
    align-items: center;
}

#job-list .additional-info{
    width:28.5%;
    display:flex;
    justify-content: space-between;
}

#job-list .link{
    padding: clamp(8px, 0.53vw, 10px) clamp(20px, 1.6vw, 30px);
    background-color:var(--e-global-color-f692171);
    border:1px solid var(--e-global-color-f692171); 
    border-radius: 50px;
    color:#fff;
    transition:.3s;
    font-size: var(--e-global-typography-f6867e5-font-size);
    font-weight: var(--e-global-typography-f6867e5-font-weight);
    line-height: var(--e-global-typography-f6867e5-line-height);
}

#job-list .link:hover{
    color:var(--e-global-color-f692171);
    background-color:#fff;
}

@media(max-width:1024px){
    #job-list .job-item .wrapper{
        flex-direction: column;
        align-items: start;
    }
    #job-list .job-item .wrapper .top-job-marker{
        margin-bottom:20px;
    }
    #job-list .job-item .wrapper .additional-info{
        margin:10px 0 15px;
        width:100%;
        justify-content: start;
        gap:30px;
    }
    #job-list .job-position{
       width:100%;
    }
}

/*JOBDETAIL*/
#job-item p{
    margin:0;
    color:#000;
}

#job-item .title-button{
    display:flex;
    align-items:center;
    gap:6%;
    justify-content: space-between;
}

#job-item .title-button .position{
    margin:0;
	hyphens: auto;
}

#job-item .title-button .link{
    padding: clamp(8px, 0.53vw, 10px) clamp(20px, 1.6vw, 30px);
    background-color:var(--e-global-color-f692171);
    border:1px solid var(--e-global-color-f692171); 
    border-radius: 50px;
    color:#fff;
    transition:.3s;
    font-size: var(--e-global-typography-f6867e5-font-size);
    font-weight: var(--e-global-typography-f6867e5-font-weight);
    line-height: var(--e-global-typography-f6867e5-line-height);
    flex-shrink: 0;
}

#job-item .title-button .link:hover{
    color:var(--e-global-color-f692171);
    background-color:#fff;
}

#job-item .additional-info > div{
    display: flex;
    gap:20px;
    align-items: center;
}

#job-item .additional-info{
    display:flex;
    gap:6.5%;
}

#job-list .top-job-marker{
    width:clamp(40px, 3vw, 54px);
    display: flex;
}

#job-list .top-job-marker svg{
    width:clamp(40px, 3vw, 54px);
    height:clamp(40px, 3vw, 54px);
}

.custom-breadcrumb{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: var(--e-global-typography-f6867e5-font-size);
    font-weight: var(--e-global-typography-f6867e5-font-weight);
    line-height: var(--e-global-typography-f6867e5-line-height);
}

.custom-breadcrumb a{
    color:#747474;
}

.custom-breadcrumb span{
    color:#000;
}

.custom-breadcrumb svg{
    height:9px;
    width:9px;
}

@media(max-width:767px){
    #job-item .title-button{
        flex-direction: column;
        gap:20px;
        align-items: start;
    }
    #job-item .additional-info{
        flex-direction: column;
        gap:10px;
    }
    
}

/* FILTER */
#filter-con .field-search{
    display:flex;
    gap:clamp(12px, 1.5vw, 20px);
    align-items: center;
    justify-content: space-between;
}

#filter-con .field-search > *{
    width:50%;
}

#filter-con .js-region{
    display: flex;
    align-items: center;  
    gap:2vw;
}

#filter-con select{
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    background-image: url(/wp-content/uploads/2024/07/angle-down-white.svg);
    background-repeat: no-repeat;
    background-position: right 30px center;
    background-size: 9px;
}

#filter-con :is(select, .textfield){
    padding: clamp(8px, .8vw, 10px) clamp(12px, 1.5vw, 20px);
    background-color: #0000001a;
    border-radius: 5px;
    border: none;
}

#filter-con :is(select, input, label){
    color: #fff;
    font-size: var(--e-global-typography-d766bbb-font-size);
    font-weight: var(--e-global-typography-d766bbb-font-weight);
    line-height: var(--e-global-typography-d766bbb-line-height);
}

#filter-con :is(select, input[type="checkbox"], label){
    cursor: pointer;
}

#filter-con .textfield::placeholder {
    color: #fff;
    opacity: 1; /* Firefox */
}

#filter-con .textfield::-ms-input-placeholder { /* Edge 12-18 */
    color: #fff;
}

#filter-con input[type="checkbox"] {
    width: var(--form-checkbox-size);
    height: var(--form-checkbox-size);
    margin:0;
    padding: 0;
    appearance: none;
}

#filter-con input[type="checkbox"]::before{
    content: "";
    width: 19px;
    height: 19px;
    margin-right: 15px;
    display: block;
    background: #0000001a;
    border: 0px solid var(--e-global-color-3e523e1);
    border-radius: 5px;
}

#filter-con input[type="checkbox"]:checked::before {
    filter: brightness(0) invert(1);
}

#filter-con input[type="checkbox"]:checked::before {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAAAoklEQVRoge3XQQrCMBBA0X8Ji97/IC7cta7swuPoIgRKFTFRmAn8t2/5E0LSgiRJkvRHE3AFLtEhPSZgBR7AEtzS7ADcKPF34Bib08b4KMZHMT6K8VHC48/ATLnqW20/D9bOd/xs7gxIEQ+vW+DU8Uz4nm8ZIl189c0QaeOrT0Okj6/eDTFMfLU/YVKcNq22qz7Myu9NlP/XhYFWXpIkSQk8ASIVUgG0/j0XAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#filter-con .js-region > div{
    display: flex;
    align-items: center;
}

@media(max-width:767px){
    #filter-con .field-search{
        flex-direction: column;
    }

    #filter-con .field-search > *{
        width:100%;
    }

    #filter-con .js-region{
        flex-direction: column;
        align-items: start;
    }
}

/* Pagination */
#pagination-controls{
    display:flex;
    gap:10px;
    justify-content: end;
    margin-top:clamp(20px, 2.08vw, 40px);
}

#pagination-controls button{
    padding:0;
    height: 35px;
    width: 35px;
}

#pagination-controls button.active{
    color: var(--e-global-color-f692171);
    background-color: var(--e-global-color-3e523e1);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var(--e-global-color-f692171);
}

#filtered-count{
    margin-bottom:clamp(10px, 1.04vw, 20px);
}