html[data-theme="Wallonia"] {
    --button-color: #00939D;
}

html[data-theme="Brussels"] {
    --button-color: #152D5C;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url("../font/Nunito_Sans/NunitoSans-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url("../font/Nunito_Sans/NunitoSans-BlackItalic.ttf") format("truetype");
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url("../font/Nunito_Sans/NunitoSans-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url("../font/Nunito_Sans/NunitoSans-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url("../font/Nunito_Sans/NunitoSans-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url("../font/Nunito_Sans/NunitoSans-ExtraBoldItalic.ttf") format("truetype");
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url("../font/Nunito_Sans/NunitoSans-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url("../font/Nunito_Sans/NunitoSans-ExtraLightItalic.ttf") format("truetype");
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url("../font/Nunito_Sans/NunitoSans-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url("../font/Nunito_Sans/NunitoSans-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url("../font/Nunito_Sans/NunitoSans-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url("../font/Nunito_Sans/NunitoSans-LightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url("../font/Nunito_Sans/NunitoSans-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url("../font/Nunito_Sans/NunitoSans-SemiBoldItalic.ttf") format("truetype");
    font-weight: 600;
    font-style: italic;
}

.logged-out-page iframe {
    display: none;
    width: 0;
    height: 0;
}

html {
    height: 100vh;
}

body {
    height: 100%;
    overflow: hidden;
}

nav {
    height: 45px;
    background-color: #EDEEEF;
}

footer {
    height: 38px;
    background-color: #EDEEEF;
}

nav {
    display: grid;
    padding-left: 45px;
    padding-right: 55px;
}

nav div {
    display: flex;
    align-items: center;
}

.header-login {
    display: flex;
    justify-content: space-between;
}

.logo-login {
    padding-bottom: 5px;
}

.form-lang {
    padding-top: 3px;
}

.app {
    height: calc(100% - 83px);
}

.ale-login-bg {
    background: url("/img/BO-background.webp") no-repeat;
    background-size: cover;
}

.worker-login-bg {
    background: url("/img/WorkerMobileLoginIllustration.svg") no-repeat bottom;
    background-size: auto;
}

.customer-login-bg {
    background: url("/img/CustomerMobileLoginIllustration.svg") no-repeat bottom;
    background-size: auto;
}

.login-page {
    height: 100%;
}

.login-page-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.overflow-auto{
    overflow: auto;
}

.select-ale-card {
    background: #FFFFFF 0 0 no-repeat padding-box;
    box-shadow: 0 3px 6px #00000029;
    opacity: 0.91;
    padding: 18px 70px 31px 70px;
    max-width: 460px;
    height: 350px;
}

.select-payment-card {
    background: #FFFFFF 0 0 no-repeat padding-box;
    box-shadow: 0 3px 6px #00000029;
    opacity: 0.91;
    padding: 18px 70px 31px 70px;
    max-width: 42rem;
    height: auto;
}

.select-worker-card {
    padding: 18px 70px 31px 70px;
    width: 100%;
    height: 100%;
}

@media (max-width: 1024px) {
    .select-ale-card {
        max-width: 100%;
        margin-left: 40px;
        margin-right: 40px;
    }

    .select-payment-card {
        max-width: 100%;
        margin-left: 40px;
        margin-right: 40px;
    }
}

.agence-pour-emploi {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.welcome.worker {
    color: #3f1a43 !important;
}

.welcome.customer {
    color: #2F3A48 !important;
}

.welcome {
    color: #2F3A48;
    text-align: center;
    font: normal normal bold 18px/24px Nunito Sans;
    letter-spacing: 0;
    opacity: 1;
    margin-bottom: 33px;
    width: 20rem;
    display: flex;
    align-items: center;
}

.expired-link-text {
    text-align: center;
    font: normal normal normal 14px/19px Nunito Sans;
    letter-spacing: 0px;
    opacity: 1;
    margin-bottom: 2rem;
}

.ale-selection {
    margin-bottom: 13px;
}

.ale-selection label {
    text-align: left;
    font: normal normal 600 12px/16px Nunito Sans;
    letter-spacing: 0;
    color: #2F3A48;
    opacity: 1;
}

.ale-selection select {
    background: #FFFFFF 0 0 no-repeat padding-box;
    border: 1px solid #E3E3E3;
    border-radius: 3px;
    opacity: 1;
    padding: 7px 13px;
    width: 100%;
}

.ale-selection select option {
    text-align: left;
    font: normal normal 12px/16px Nunito Sans;
    letter-spacing: 0;
    opacity: 1;
}

.ale-selection select option [hidden=true] {
    font-style: italic;
    color: #BCBCBC;
}

.ale-connect {
    display: flex;
    justify-content: flex-end;
}

.app-connect {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.worker-connect {
    display: flex;
    justify-content: center;
}

.worker-connect button {
    width: 103px;
    height: 39px;
    background: #bf247a;
    border-radius: 3px;
    opacity: 1;
    border: 0;
    color: white;
}

.customer-connect {
    display: flex;
    justify-content: center;
}

.customer-connect button {
    width: 103px;
    height: 39px;
    background: #2e3a48;
    border-radius: 3px;
    opacity: 1;
    border: 0;
    color: white;
}

.payment-connect {
    display: flex;
    justify-content: center;
}

.payment-connect button {
    width: 103px;
    height: 39px;
    background: #171A4E;
    border-radius: 3px;
    opacity: 1;
    border: 0;
    color: white;
}

.workers-grid-container {
    display: grid;
    grid-template-columns: auto auto;
    margin-left: -1rem;
    padding: 10px;
}

.index-workers-grid-container {
    display: flex;
    justify-content: center;
}

.worker-selected-item {
    background-color: #F2F2FA;
}

.workers-grid-item {
    background-color: #F4F4F4;
    margin-left: 1rem;
    margin-bottom: 1rem;
    font-size: 14px;
    text-align: center;
    border: 0;
    padding: 2rem;
    border-radius: 5px;
}

.index-workers-grid-item {
    background-color: #F4F4F4;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    font-size: 14px;
    text-align: center;
    border: 0;
    padding: 2rem;
    border-radius: 5px;
}

.workers-grid-item[selected] {
    background: #3F1A43;
    color: #f2f2fa;
}

.payment-grid-item {
    background-color: #F4F4F4;
    margin-left: 1rem;
    margin-bottom: 1rem;
    font-size: 14px;
    text-align: center;
    border: 0;
    padding: 2rem;
    border-radius: 5px;
    width: 8rem;
}

.payment-grid-item[selected] {
    background: #171A4E;
    color: #f2f2fa;
}

.customers-grid-item {
    background-color: #F4F4F4;
    margin-left: 1rem;
    margin-bottom: 1rem;
    font-size: 14px;
    text-align: center;
    border: 0;
    padding: 2rem;
    border-radius: 5px;
}

.customers-grid-item[selected] {
    background: #CFE0E1;
}

.ale-connect button {
    width: 103px;
    height: 39px;
    background: var(--button-color) 0 0 no-repeat padding-box;
    border-radius: 3px;
    opacity: 1;
    border: 0;
    color: white;
}

.app-connect button {
    width: 103px;
    height: 39px;
    background: var(--button-color) 0 0 no-repeat padding-box;
    border-radius: 3px;
    opacity: 1;
    border: 0;
    color: white;
}

footer {
    display: flex;
    justify-content: space-between;
    padding-left: 1rem;
    padding-right: 1rem;
}


@media (max-width: 1024px) {
    footer .copyright {
        font: normal normal normal 14px/19px Nunito Sans;
        letter-spacing: 0;
        color: #171A4E;
        opacity: 1;
        justify-content: flex-end;
    }
}

footer div {
    display: flex;
    align-items: center;
}

footer .copyright {
    font: normal normal normal 14px/19px Nunito Sans;
    letter-spacing: 0;
    color: #171A4E;
    opacity: 1;
    justify-content: center;
}

#login-box {
    padding-bottom: 15px;
}

.public-app-blue-logo-container.customer.landscape.mobile {
    display: none;
}

@media screen and (max-width: 1023px) {

    @media (orientation: landscape) {
        .public-app-logo-container.mobile.landscape {
            transform: translate(-90%);
        }
    }
    .public-app-logo-container.desktop {
        display: none;
    }

    .public-app-login-container {
        display: flex;
        flex-direction: column-reverse;
        height: 100%;
    }

    .public-app-logo-container.mobile {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        opacity: 0.40;
        display: block;
    }


    .public-app-right-container {
        z-index: 2;
        height: 100%;
        overflow: auto;
    }

    .buttons-wrapper {
        display: flex;
        flex-direction: column;
    }

    .payment-buttons-wrapper {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-gap: 1rem;
    }

    .workers-grid-item {
        margin-left: 0;
    }
}

@media screen and (min-width: 1024px) {
    .login-page-container {
        flex-direction: row;
    }

    .login-page-container-public {
        display: flex;
        justify-content: right;
        flex-direction: row;
    }

    #login-box {
        padding-bottom: 0px;
        padding-top: 15px;
    }

    .select-worker-card {
        background: inherit;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    .form-container {
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .public-app-login-container {
        display: flex;
        flex-direction: row;
        height: 100%;
    }

    .public-app-logo-container.desktop {
        display: flex;
        width: 50%;
        height: 100%;
        align-items: center;
        justify-content: center;
    }

    .public-app-logo-container.worker.desktop {
        background-color: #F9F9FD;
    }

    .public-app-logo-container.customer.desktop {
        background-color: #F3F8F8;
    }

    .public-app-logo-container.mobile {
        display: none;
    }

    .public-app-right-container {
        display: flex;
        width: 50%;
        height: 100%;
        align-items: center;
        overflow: auto;
    }

    .buttons-wrapper {
        display: flex;
        justify-content: center;
    }

    .payment-buttons-wrapper {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-gap: 1rem;
    }

    .login-page-container-public {
        display: flex;
        justify-content: right;
        flex-direction: row;
    }

    #login-box {
        padding-bottom: 0px;
    }

    .index-login-page-container {
        display: flex;
        flex-direction: row;
        height: 100%;
        align-items: center;
    }

    .worker-login-bg {
        background: url("/img/WorkerLoginIllustration.svg") no-repeat 10% center, linear-gradient(to right, #F9F9FD 0 50%, #ffffff 0 50%);
    }

    .customer-login-bg {
        background: url("/img/CustomerLoginIllustration.svg") no-repeat 10% center, linear-gradient(to right, #F5F9F9 0 50%, #ffffff 0 50%);
    }

    .index-select-worker-card {
        background: inherit;
        width: 40%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-right: 5rem;
    }

    .index-workers-grid-container {
        margin-left: 0;
        padding: 0;
    }
}

.actiris-icon {
    margin-top: 30px;
    margin-bottom: 10px;
}

@media only screen and (max-width: 800px) {
    .public-app-logo-container.mobile {
        display: none;
    }

    .public-app-blue-logo-container.mobile {
        display: block !important;
        position: absolute;
        z-index: -1;
        opacity: 0.2;
    }

    .header {
        height: 10vh;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 10;
    }

    .footer {
        height: 10vh;
        position: fixed;
        width: 100%;
        bottom: 0;
        z-index: 10;
    }

    .app {
        height: calc(100% - 10vh);
    }

    img#sodexo-logo-header {
        height: 5vh;
    }

    img#footer-sodexo-logo {
        height: 5vh;
    }

    img#footer-forem-logo {
        height: 6vh;
    }

    .form-lang {
        height: 0;
    }

}

@media only screen and (max-width: 1024px) {
    h1.welcome.customer {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    h1.welcome.worker {
        display: flex;
        width: 100%;
        justify-content: center;
    }
}