/* CV Upload */
#jobs-cv-upload {
    border: 2px dashed #000;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 200px;
    /*background: #fbfbfb;*/
}

#jobs-cv-upload .jobs-upload-icon {
    width: 50px;
}

#jobs-cv-upload p {
    width: 80%;
    color: #000;
}

#job-loader {
    text-align: center;
    padding: 20px, 24px, 20px, 24px;
}

#job-loader .job-loader-title {
    text-align: center;
    font-size: 35px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
}

#job-loader .job-loader-text {
    margin-bottom: 20px;
    font-size: 24px;
}

.cv-upload,
.job-upload-cv-link {
    cursor: pointer;
}

/**/

.cv-upload p {
    margin-block-end: 0 !important;
    margin-bottom: 0 !important;
}

#job-loader .loader {
    width: 80px;
    height: 80px;
    border: 10px solid #dbe1ec;
    /* Couleur de fond du cercle */
    border-top: 10px solid #20269f;
    /* Couleur du segment animé */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 50px auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#job-loader .step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
}

#job-loader .step-icon {
    width: 20px;
    height: 20px;
    border: 2px solid #3bd48c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3bd48c;
    font-size: 14px;
    margin-top: 4px;
    flex-shrink: 0;
}

#job-loader .step-content {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    /* Pour forcer l'empilement */
    align-items: flex-start;
    /* Aligne le contenu à gauche */
    text-align: left;
    /* Important si tu as du texte centré par défaut */
}

#job-loader .step-title {
    font-weight: 700;
    color: #1e2a3b;
    margin-bottom: 8px;
    align-content: start;
    text-align: left;
}

#job-loader .step-description {
    color: #8c94a3;
    padding-left: 10px;
    border-left: 2px solid #dbe1ec;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
}




/* Job listing */
.btn-job,
a.btn-job {
    display: block;
    text-align: center;
    color: #3e3e3f;
    font-size: 16px;
    font-weight: 700;
    line-height: 32px;
    word-wrap: break-word;
    border-radius: 0;
    padding: 10px 24px;
    text-decoration: none;
    background: #dadada;
}

.btn-job.small,
a.btn-job.small {
    padding: 4px 24px;
}

.btn-grad,
.btn-job.btn-grad {
    color: white;
    /*background-image: linear-gradient(to right, #30ac65 0%, #F4D03F  51%, #16A085  100%);*/
    background: linear-gradient(to right, #30ac65 0%, #94c120 51%, #30ac65 100%);
    /*margin: 10px;*/
    /*padding: 15px 45px;*/
    /*text-align: center;*/
    /*text-transform: uppercase;*/
    transition: 0.5s;
    background-size: 200% auto;
    /*color: white;*/
    /*box-shadow: 0 0 20px #eee;*/
    /*border-radius: 10px;*/
    /*display: block;*/
}

.btn-grad a,
#site-header .menu .menu-item.btn-grad a {
    color: white !important;
}

.btn-grad.disabled,
.btn-job.disabled,
a.disabled {
    opacity: 0.4;
}

.btn-grad:hover {
    background-position: right center;
    /* change the direction of the change here */
    color: #fff;
}


#jobs-listing-container form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    /*gap: 40px;*/
    /*margin: 20px 0;*/
    padding: 0;
    font-family: Red Hat Display, Arial;
}

#jobs-listing-container>form {
    gap: 40px;
}

#jobs-listing-container [type=button],
#jobs-listing-container [type=submit],
#jobs-listing-container button {
    border: none;
}

#jobs-listing-container #jobs-listing-search {
    width: 100%;
    background: white;
    box-shadow: 8px 8px 0px 0px #dadada;
    border-radius: 8px;
    border: 2px #222325 solid;
    align-items: center;
    display: inline-flex;
    padding: 20px 20px;
}

#jobs-listing-container #jobs-listing-search #jobs-listing-search-fields {
    align-items: center;
    display: flex;
    flex: 1;
    margin-right: 20px;
}

#jobs-listing-container #jobs-listing-search #jobs-listing-search-fields .jobs-listing-search-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

#jobs-listing-container #jobs-listing-search #jobs-listing-search-fields .jobs-listing-search-field input[type=text] {
    border: none;
}

#jobs-listing-container #jobs-listing-search #jobs-listing-search-fields .jobs-listing-search-separator {
    width: 2px;
    height: 48px;
    background: #EDEDEE;
    margin: 0 10px;
}

#jobs-listing-result-container {
    justify-content: space-between;
    display: inline-flex;
    width: 100%;
    padding: 0 4%;
}

#jobs-listing-result-container #jobs-filters {
    width: 28%;
    flex-direction: column;
    gap: 16px;
    display: inline-flex;
}

#jobs-listing-result-container #jobs-filters #jobs-filters-title {
    align-self: stretch;
    justify-content: space-between;
    align-items: center;
    display: inline-flex;
}

#jobs-listing-result-container #jobs-filters #job-filters-reinit {
    text-decoration: none;
    color: #B8B9B9;
    font-size: 14px;
    font-weight: 700;
}

#jobs-filters-container {
    align-self: stretch;
    flex-direction: column;
    gap: 32px;
    display: flex;
}

#jobs-filters-container .jobs-filter-div {
    align-self: stretch;
    flex-direction: column;
    gap: 16px;
    display: flex;
}

#jobs-filters-container .jobs-filter-div .jobs-filter-title-div {
    align-self: stretch;
    justify-content: space-between;
    align-items: center;
    display: inline-flex;
}

#jobs-filters-container .jobs-filter-div .jobs-filter-title-div .jobs-filter-title {
    font-size: 16px;
    font-weight: 700;
}

#jobs-filters-container .jobs-filter-div .jobs-filter-content {
    align-self: stretch;
    flex-direction: column;
    gap: 16px;
    display: flex;
    max-height: 270px;
    overflow: auto;
}

/* Pagination */
#jobs-pagination {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#jobs-pagination a {
    text-decoration: none;
    color: #000;
}


/* Checkbox */
#jobs-filters-container .jobs-filter-div .jobs-filter-content .jobs-filter-checkbox-div {
    align-self: stretch;
    align-items: center;
    gap: 12px;
    display: inline-flex;
}

#jobs-filters-container .jobs-filter-div .jobs-filter-content .jobs-filter-checkbox-div .jobs-filter-checkbox input[type="checkbox"] {
    display: none;
}

.checkbox-checked {
    display: none;
}

#jobs-filters-container .jobs-filter-div .jobs-filter-content .jobs-filter-checkbox-div .jobs-filter-checkbox input[type="checkbox"]:checked~.checkbox-empty {
    display: none;
}

#jobs-filters-container .jobs-filter-div .jobs-filter-content .jobs-filter-checkbox-div .jobs-filter-checkbox input[type="checkbox"]:checked~.checkbox-checked {
    display: inline;
    fill: #000;
}

#jobs-filters-container .jobs-filter-div .jobs-filter-content .jobs-filter-checkbox-div .jobs-filter-checkbox svg {
    width: 24px;
    fill: #EDEDEE;
}

/* Input */
#jobs-filters-container .jobs-filter-div .jobs-filter-content input[type=text],
#jobs-filters-container .jobs-filter-div .jobs-filter-content input[type=number],
#jobs-filters-container .jobs-filter-div .jobs-filter-content select {
    border: 2px solid #ededee;
    border-radius: 9px;
}

/* Localization */
#jobs-filters-container .jobs-filter-div .jobs-filter-content .jobs-filter-columns {
    align-self: stretch;
    gap: 10px;
    display: inline-flex;
}

#jobs-filters-container .jobs-filter-div .jobs-filter-content .jobs-filter-columns .jobs-filter-column {
    flex: 1 1 0;
    height: 44px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 2px #EDEDEE solid;
    justify-content: space-between;
    align-items: center;
    display: flex;
}

#jobs-listing-result-container #jobs-listing-results-column {
    width: 67%;
    flex-direction: column;
    gap: 32px;
    display: inline-flex;
}

#jobs-listing-result-container #jobs-listing-results {
    align-self: stretch;
    flex-direction: column;
    gap: 16px;
    display: flex;
}

#jobs-listing-result-container #jobs-listing-results .job-result {
    align-self: stretch;
    padding: 24px 20px;
    background: white;
    border-radius: 8px;
    /*justify-content: center;*/
    /*gap: 8px;*/
    /*display: inline-flex;*/
    color: #7A7B7C;
    font-size: 14px;
    position: relative;
}

#jobs-listing-result-container #jobs-listing-results .job-result .job-result-columns {
    flex: 1 1 0;
    gap: 15px;
    display: flex;
}

#jobs-listing-result-container #jobs-listing-results .job-result .job-result-columns .job-result-vertical-column {
    flex: 1 1 0;
    flex-direction: column;
    gap: 12px;
    display: inline-flex;
}

#jobs-listing-result-container #jobs-listing-results .job-result .job-result-infos {
    display: none;
    transition: 0.5s;
}

#jobs-listing-result-container #jobs-listing-results .job-result .job-result-see-infos {
    cursor: pointer;
}

#jobs-listing-result-container #jobs-listing-results .job-result .job-share,
#jobs-listing-result-container #jobs-listing-results .job-result .job-share-small {
    cursor: pointer;
}

.job-popup {
    display: none;
    position: fixed;
    z-index: 10;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    backdrop-filter: blur(10px);
    /*overflow: auto;*/
    z-index: 100;
}

.job-popup.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.job-popup .job-popup-content {
    background: #fff;
    padding-left: 70px;
    padding-top: 24px;
    padding-right: 70px;
    padding-bottom: 24px;
    border: 1px solid #d9e7d9;
    border-radius: 13px;
    width: 500px;
    max-height: 90vh;
    overflow: auto;
}

.job-popup.job-popup-share .job-popup-content {
    width: 400px;
}

.job-popup p {
    margin-block-end: 0;
}

#jobs-listing-result-container #jobs-listing-results .job-result .job-detail-popup .job-result-infos {
    display: inline-flex;
}

.job-application-popup input[type=text],
.job-application-popup select {
    background: #f6f6f6;
    border: none;
}

.job-application-popup .cv-upload {
    cursor: pointer;
    border: 1px dashed #cacacb;
    height: 100px;
    justify-content: center;
    border-radius: 6px;
}

#cv-uploaded {
    background: #DADADA;
    padding: 10px;
}

#cv-uploaded .name-div {
    font-weight: bold;
}

#cv-uploaded .avatar {
    width: 50px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    font-weight: bold;
    font-size: 20px;
}

#cv-uploaded .current_job {
    width: 100%;
    flex-direction: row-reverse;
}

#cv-uploaded .current_job .btn-job {
    padding: 5px 10px;
}

#cv-uploaded .current_job a {
    text-decoration: none;
}

.job-popup-share-small {
    border: 1px solid #D6DDEB;
    border-radius: 10px;
    padding: 10px 15px;
    position: absolute;
    top: 20px;
    right: 0px;
    z-index: 10;
    background: #fff;
    display: none;
}

.job-popup-share-small a {
    text-decoration: none;
    color: #3E3E3F;
}

/*CARROUSSEL*/

#carousel-controls {
    text-align: center;
    margin-top: 20px;
}

.carousel-button {
    cursor: pointer;
    padding: 10px 20px;
    height: 50px;
    align-self: center;
    margin: 0 10px;
    color: #ffffff;
    background: #EBBE31;
    border: none;
    border-radius: 5px;
    font-size: 16px;
}

.btn-job-carroussel {
    text-align: center;
    width: 172px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 32px;
    word-wrap: break-word;
    border-radius: 0;
    padding: 12px 24px;
    text-decoration: none;
    background: #dadada;
    margin-top: 50px;
    border: none;
}


.btn-job-carroussel:hover {
    background-color: #4AA5DC !important;
    color: #ffffff !important;
}


.carousel-button:hover {
    background-color: #4AA5DC;
    color: #ffffff !important;
}

.carousel-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.job-group-carroussel {
    display: inline-flex;
    gap: 10px;
    flex-wrap: unset;
    overflow: hidden;
    width: 100%;
    transition: transform 1s ease-in-out;
    /* Ajoute la transition */
}

.job-group-carroussel.hidden {
    display: none;
}

#pagination-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.pagination-dot {
    width: 10px;
    height: 10px;
    background: #4A529E;
    opacity: 50%;
    border-radius: 50%;
    transition: background 0.3s;
}


#jobs-pagination-carroussel {
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.pagination-dot.active {
    background: #4A529E;
    opacity: 100%;
}

.job-result-carroussel {
    height: fit-content;
    margin: 10px;
    width: 100%;
    padding: 24px 20px;
    background: white;
    border-radius: 10px;
    justify-content: center;
    gap: 8px;
    color: #7A7B7C;
    font-size: 14px;
    position: relative;
    box-sizing: border-box;
    /* Inclut le padding et la bordure dans la largeur */
}

#job-listing-results-carroussel {
    display: inline-flex;
    align-self: center;
    width: 100%
}



/* CHATBOT */
#jobs-chatbot-div {
    width: 100%;
}

#jobs-chatbot-email {
    border-radius: 7px;
}

#jobs-chatbot-send {
    border: none;
}


/* GENERAL */
.flex-line {
    align-self: stretch;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex;
}

.flex-column {
    /*align-self: stretch;*/
    flex-direction: column;
    /*align-items: center;*/
    display: inline-flex;
}

.space-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: flex-end;
}

.flex-center {
    align-items: center;
}

.flex-start {
    align-items: flex-start;
}

.flex-end {
    align-items: flex-end;
}

.flex-stretch {
    align-self: stretch;
}

.flex1 {
    flex: 1;
}

.gap4 {
    gap: 4px;
}

.gap12 {
    gap: 12px;
}

.gap20 {
    gap: 20px;
}

.reverse {
    transform: rotate(180deg);
}

.no-bg,
a.no-bg {
    background: none;
}

.wfull {
    width: 100%;
}

.relative {
    position: relative;
}

.vert-kiwi,
.vert-kiwi a {
    color: #95C11F;
}

a.vert-kiwi:hover {
    color: #FBFBFB;
}

.vert-kiwi.menu-item a {
    color: #95C11F !important;
}

.vert-kiwi.menu-item a:hover {
    color: #FBFBFB !important;
}

.no-list {
    list-style: none;
    padding: 0;
}


.job-title {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin-top: 0;
}

.job-detail-title {
    font-size: 14px;
    font-weight: 700;
    color: #000;
    margin-bottom: 3px;
}

.overflow-hidden {
    overflow: hidden;
}

.dragging {
    background: #cdcdcd;
}


#mobile-menu nav ul li a {
    justify-content: center;
    background: none;
}

#mobile-menu nav ul li.job-upload-cv-menu {
    margin: 0 auto;
    width: auto;
}


/* Smartphones */
.visible-mobile,
.visible-mobile-flex,
.visible-tablette {
    display: none !important;
}

@media (max-width: 768px) {

    .btn-job-carroussel {
        text-align: center;
        width: 100px;
        color: #ffffff;
        font-size: 16px;
        font-weight: 700;
        line-height: 32px;
        word-wrap: break-word;
        border-radius: 0;
        padding: 12px 24px;
        text-decoration: none;
        background: #dadada;
        margin-top: 20px;
        margin-bottom: 20px;
        border: none;
    }


    .job-result-carroussel {
        height: fit-content !important;
        margin: 10px;
        width: 100%;
        padding: 12px 10px;
        background: white;
        border-radius: 10px;
        justify-content: center;
        gap: 8px;
        color: #7A7B7C;
        font-size: 14px;
        position: relative;
        box-sizing: border-box;
        /* Inclut le padding et la bordure dans la largeur */
    }


    .hidden-mobile {
        display: none !important;
    }

    .visible-mobile {
        display: block !important;
    }

    .visible-mobile-flex {
        display: inline-flex !important;
    }

    .flex-column-mobile {
        flex-direction: column;
    }

    .flex-start-mobile {
        align-items: flex-start;
    }

    .gap12-mobile {
        gap: 12px;
    }

    .block-mobile {
        display: block;
    }

    .absolute-mobile {
        position: absolute;
    }

    #jobs-listing-result-container {
        flex-direction: column;
    }

    #jobs-listing-result-container #jobs-filters {
        width: 100%;
        /*max-height: 90vh;*/
        display: none;

        position: fixed;
        z-index: 100;
        background: #fff;
        left: 0;
        top: 0;
        overflow: auto;
        height: 100vh;
        padding: 20px 25px;
    }

    /*.admin-bar #jobs-listing-result-container #jobs-filters {*/
    /*    max-height: 95vh;*/
    /*    margin-top: 5vh;*/
    /*}*/
    #jobs-listing-result-container #jobs-listing-results-column {
        width: 100%;
    }

    .job-popup .job-popup-content,
    .job-popup.job-popup-share .job-popup-content {
        width: 95%;
    }

    #jobs-listing-result-container #jobs-filters #jobs-filters-title {
        width: 100%;
    }
}

/* Tablettes */
@media (max-width: 1330px) {

    .btn-job-carroussel {
        text-align: center;
        width: 173px;
        color: #ffffff;
        font-size: 16px;
        font-weight: 700;
        line-height: 32px;
        word-wrap: break-word;
        border-radius: 0;
        padding: 12px 24px;
        text-decoration: none;
        background: #dadada;
        margin-top: 20px;
        margin-bottom: 20px;
        border: none;
    }

    .job-result-carroussel {
        height: 20vh;
        margin: 10px;
        width: 100%;
        padding: 12px 10px;
        background: white;
        border-radius: 10px;
        justify-content: center;
        gap: 8px;
        color: #7A7B7C;
        font-size: 14px;
        position: relative;
        box-sizing: border-box;
        /* Inclut le padding et la bordure dans la largeur */
    }

    .visible-tablette {
        display: block !important;
    }

    .absolute-tablette {
        position: absolute;
    }

    #mobile-menu nav ul {
        padding: 20px 0;
    }

    /* MENU TABLETTE FIX */
    .hfe-nav-menu__breakpoint-tablet .hfe-layout-horizontal .hfe-nav-menu__toggle,
    .hfe-nav-menu__breakpoint-tablet .hfe-layout-vertical .hfe-nav-menu__toggle {
        visibility: visible;
        opacity: 1;
        display: block;
    }

    .hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
        visibility: hidden;
        opacity: 0;
    }

    .hfe-nav-menu__breakpoint-tablet .hfe-active-menu+.hfe-nav-menu__layout-horizontal .hfe-nav-menu {
        visibility: visible;
        opacity: 1;
        background-color: #fff;
    }

    .hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal li,
    .hfe-nav-menu__breakpoint-tablet .hfe-nav-menu {
        width: 100%;
        margin-right: 0px;
    }
}

/* Desktop 1024 */
@media (min-width: 1024px) and (max-width: 1330px) {
    .hfe-nav-menu__breakpoint-tablet .hfe-active-menu+.hfe-nav-menu__layout-horizontal {
        width: 400px;
        margin-left: auto;
    }
}

#jobs-listing-result-container #jobs-listing-results-column.grid-layout #jobs-listing-results {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

#jobs-listing-result-container #jobs-listing-results-column.grid-layout #jobs-listing-results .job-result {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

#jobs-listing-result-container #jobs-listing-results-column.grid-layout #jobs-listing-results .job-result>div.flex-line.space-between.flex-start {
    flex-direction: column;
}

/* On mobile, keep it single column even if grid is selected */
@media screen and (max-width: 991px) {
    #jobs-listing-result-container #jobs-listing-results-column.grid-layout #jobs-listing-results {
        display: flex;
        flex-direction: column;
    }
}