/*
Theme Name:         PFG Karriere
Theme URI:          https://www.cyrano.de/
Description:        WordPress Theme for PFG
Version:            1.0.0
Author:             Cyrano
Author URI:         https://www.cyrano.de/
Text Domain:        sage
License:            MIT License
License URI:        https://opensource.org/licenses/MIT
Requires PHP:       8.1
Requires at least:  5.9
*/

.onlyfy-jobs.ofj-wrap{
    max-width: 1536px;
    padding-left: 0rem;
    padding-right: 0rem;
}

.ofj-controls{
    margin-top: 100px !important;
    background:#E9E9E9;
    margin-bottom:1rem;
    display:flex;
    gap:5px;
    flex-wrap: wrap;
    border-radius: 30px;
    padding: 5px;
    padding-bottom: 5px !important;
    padding-top: 5px !important;
}

.ofj-list{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px;
    background:#E9E9E9;
    border-radius: 30px;
}

.ofj-list li{
    width: 100%;
}

.ofj-list li a{
    min-height: 50px;
    border-radius: 50px;
    background: #ffffff;
    width: 100%;
    color: #102E26;
    font-weight: 600;
    min-width: 100% !important;
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.ofj-controls .searchField{
    width: calc(100% - 155px) !important;
    min-height: 50px !important;
    position: relative;
}

.ofj-list li a span:nth-child(1){
    width: 75% !important
}

.ofj-list li a span:nth-child(2){
    width: 25% !important;
    text-align: left !important;
    position: relative;
    padding-left: 30px;
}

.ofj-list li a span:nth-child(2):before{
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxMSAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTAgNS45NTgzM0MxMCA4LjY5Njc0IDUuNSAxNSA1LjUgMTVDNS41IDE1IDEgOC42OTY3NCAxIDUuOTU4MzNDMSAzLjIxOTkyIDMuMDE0NzIgMSA1LjUgMUM3Ljk4NTI4IDEgMTAgMy4yMTk5MiAxMCA1Ljk1ODMzWiIgc3Ryb2tlPSIjMTAyRTI2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8Y2lyY2xlIGN4PSI1LjUiIGN5PSI1LjUiIHI9IjEuNSIgZmlsbD0iIzEwMkUyNiIvPgo8L3N2Zz4=");
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}



.ofj-controls .searchField input{
    padding-left: 50px !important;
}

.ofj-controls .searchField input::placeholder{
    color: #989898 !important;
}

.ofj-controls .searchField:before{
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    height: 17px;
    width: 17px;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI4LjUiIGN5PSI1LjUiIHI9IjQuNSIgc3Ryb2tlPSIjNUIyNzg0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxsaW5lIHgxPSI1IiB5MT0iOS40MTQyMSIgeDI9IjEuNDE0MjEiIHkyPSIxMyIgc3Ryb2tlPSIjNUIyNzg0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4=");
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}


.ofj-controls .searchField input{
    border-radius: 50px !important;
    min-height: 50px !important;
    margin-top: 0px !important;
}

.ofj-controls .searchField + button{
    width: calc(150px - 10px) !important;
    border-radius: 50px;
    background:#F3FF33 !important;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    min-height: 50px !important;
    transition: 0.25s all linear;
}

.ofj-controls .searchField + button:hover{
    background:#5B2784 !important;
    color: #ffffff !important;
    transition: 0.25s all linear;
}

.ofj-controls .searchField + button:hover svg{
    color: #ffffff !important;
}

.ofj-controls .searchField + button:hover svg *{
    stroke: #ffffff !important;
}

.dropdownFilters{
    width: 100% !important;
    row-gap: 10px;
    column-gap: 40px;
    flex-wrap: wrap;
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 4px;
}

.dropdownFilters > label span{
    width: 150px;
    font-weight: 600;
    color: #102E26 !important
}

.umkreisField input{
    border-radius: 50px !important;
    min-height: 50px !important;
}

.dropdownFilters > label select{
    width: 100% !important;
    border-radius: 50px;
    min-height: 50px !important;
}

.dropdownFilters > label.ortFilter{
    width: calc(50% - 20px) !important;
}

.dropdownFilters > label.ortFilter + label{
    width: calc(30% - 20px) !important;
}

.dropdownFilters > label.ortFilter span, .dropdownFilters > label.bereichFilter span{
    width: 80px !important;
}

.dropdownFilters > label.bereichFilter,.dropdownFilters > label.jobFilter{
    width: calc(50% - 20px) !important;
}

.ofj-loadmore{
    background:#F3FF33 !important;
    border-radius:100px !important;
    padding: 13px 30px 13px 30px !important;
    font-weight:600 !important;
    transition:0.25s all linear !important;
    position:relative !important;
    color: #102E26 !important;
    margin: auto !important;
    display:table;
}

.ofj-loadmore:hover{
    background: #5B2784 !important;
    color: #ffffff !important
}

.filter-is-hidden{
    display: none;
}


/* color normal */
/* color normal */
.ofj-city,
.ofj-industry,
.ofj-ptype { color: #102E26; }

/* mientras el option seleccionado tenga value="" pinta como placeholder */
.ofj-city:has(option:checked[value=""]),
.ofj-industry:has(option:checked[value=""]),
.ofj-ptype:has(option:checked[value=""]) {  color: #989898 !important; }


.ofj-city:has(option.empty:checked[value=""]),
.ofj-industry:has(option.empty:checked[value=""]),
.ofj-ptype:has(option.empty:checked[value=""]) { color: #102E26 !important; display:block !important}

/* el placeholder no aparece en el desplegable */
.ofj-city option[value=""],
.ofj-industry option[value=""],
.ofj-ptype option[value=""] { display: none; }

option.empty{display:block !important;}


.onlyfy-jobs.ofj-wrap select{
    appearance: none;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSIyNSIgY3k9IjI1IiByPSIyNSIgZmlsbD0iI0YzRkYzMyIvPgogIDxwYXRoIGQ9Ik0zMS41IDIzLjc1TDI0Ljc1IDMwLjVMMTggMjMuNzUiIHN0cm9rZT0iIzEwMkUyNiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=);
    background-size: 50px !important;
    background-position: calc(100% - 0px) center;
    background-repeat: no-repeat;
}

.onlyfy-jobs.ofj-wrap select:focus{
    outline: none !important;
}



@media (min-width: 1024px) {
    .onlyfy-jobs.ofj-wrap {
        max-width: 1024px !important;
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }
}

@media (max-width: 1279px){
    #main .dropdownFilters label{
        flex-direction: column !important;
        align-items: flex-start !important;
        row-gap: 5px !important;
    }
}

@media (min-width: 1280px) {
    .onlyfy-jobs.ofj-wrap {
        max-width: 1280px !important;
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

@media (min-width: 1536px) {
    .onlyfy-jobs.ofj-wrap {
        max-width: 1536px !important;
        padding-left: 6rem;
        padding-right: 6rem;
    }
   
}

@media (min-width: 768px) {
    .onlyfy-jobs.ofj-wrap {
        max-width: 768px;
    }
}

@media (min-width: 640px) {
    .onlyfy-jobs.ofj-wrap {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (max-width: 767px){
    .ofj-list li a{
        border-radius: 25px !important;
        gap: 10px !important
    }
    .ofj-list li a span:nth-child(1), .ofj-list li a span:nth-child(2){
        width: 100% !important;
    }

    .dropdownFilters > label{
        width: 100% !important;
        min-width: 100%;
    }

    .dropdownFilters{
        padding-left: 10px !important;
        padding-right: 5px !important;
    }

    .dropdownFilters > label > span{
        min-width: auto !important;
    }

    .dropdownFilters{
        margin-top: 10px !important;
        gap: 20px !important;
    }

    .umkreisField input{
        width: 100% !important;
    }
}