/* 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 .jobs-listing-search-field-icon {
}
#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 {

}
#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;
}
#jobs-filters-container .jobs-filter-div .jobs-filter-content input[type=text]:focus,
#jobs-filters-container .jobs-filter-div .jobs-filter-content input[type=number]:focus,
#jobs-filters-container .jobs-filter-div .jobs-filter-content select {

}

/* 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;
    }
}