/* ==========================================================================
   SPECIFICS
   --------------------------------------------------------------------------
   * INVERTING CLICKABLE COLORS (commented and ready to use)
      : Tabs
      : Switcher

   * STRUCTURE
      : XXX

   * ELEMENTS
      : Autosave (New)

   * COMPONENTS
      : View more (Override/complement)
      : Compact list (Override/complement)
      : Steps bar (Override/complement)
         : With label (New)
      : Interview form
         : Boxes and outer stucture/spacings (New)
         : Fields and inner stucture/spacings (New)
         : Text (New)
         : Some specific styles (New)

   * MODULES
      : Main (Override/complement)

   * PAGETYPE
      : Dashboard (Override/complement)
         : Section (Override/complement)

   * UTILITIES
      : XXX

   ========================================================================== */

/* INVERTING CLICKABLE COLORS: Tabs
   -------------------------------------------------------------------------- */

/*
.tabs__list__item:not(.tabs__list__item--active),
.tabs__list__item:not(.tabs__list__item--active):link,
.tabs__list__item:not(.tabs__list__item--active):visited {
    color: inherit;
}

.tabs__list__item:not(.tabs__list__item--active):hover,
.tabs__list__item:not(.tabs__list__item--active):focus,
.tabs__list__item:not(.tabs__list__item--active):active {
    color: var(--color--clickeable);
}

.tabs__list__item--active,
.tabs__list__item--active:link,
.tabs__list__item--active:visited,
.tabs__list__item--active:hover,
.tabs__list__item--active:focus,
.tabs__list__item--active:active {
    color: var(--color--clickeable);
}

+TBD+
*/

/* INVERTING CLICKABLE COLORS: Switcher
   -------------------------------------------------------------------------- */

/*
.switcher--as-icons [class*="__option"]:not([class*="__option--active"]),
.switcher--as-icons [class*="__option"]:not([class*="__option--active"]):link,
.switcher--as-icons [class*="__option"]:not([class*="__option--active"]):visited {
    color: inherit;
}

.switcher--as-icons [class*="__option"]:not([class*="__option--active"]):hover,
.switcher--as-icons [class*="__option"]:not([class*="__option--active"]):focus,
.switcher--as-icons [class*="__option"]:not([class*="__option--active"]):active {
    color: var(--color--clickeable);
}

.switcher--as-icons [class*="__option--active"],
.switcher--as-icons [class*="__option--active"]:link,
.switcher--as-icons [class*="__option--active"]:visited,
.switcher--as-icons [class*="__option--active"]:hover,
.switcher--as-icons [class*="__option--active"]:focus,
.switcher--as-icons [class*="__option--active"]:active {
    color: var(--color--clickeable);
}

+TBD+
*/

/* STRUCTURE: BUTTONS / Link
   -------------------------------------------------------------------------- */

.button {
    font-weight: 500;
}

.button-bar--cols-1 .button-bar__wrap {
    --button-bar--rows--gap: var(--spacer--m);
}

.link--back {
    text-decoration: underline;
    text-decoration-color: initial;
    --font--weight--bold: 400;
}
/* ELEMENTS: Autosave (New)
   -------------------------------------------------------------------------- */

.wizard-auto-save-message {
    position: relative;
    width: 100%;
}

.wizard-auto-save-message .message {
    position: absolute;
    right: 0;
    bottom: var(--spacer--xs);
    font-size: 1.4rem;
}

.wizard-auto-save-message .message__icon {
    width: auto;
}

/* COMPONENTS: View more (Override/complement)
   -------------------------------------------------------------------------- */
.article--view-more--aside {
    font-style: normal;
    --color--grey--lighter: var(--color--white);
}

.article--view-more--aside .link {
    --font--weight--bold: 400;
}

.article--view-more--aside .article__header {
    border: unset;
}

/* Media query to target only tablet */
@media all and (min-width:751px) and (max-width:1024px) {
    .article--view-more--aside .article__content {
        margin-top: var(--spacer--xxl);
    }

}

/* COMPONENTS: Compact list (Override/complement)
   -------------------------------------------------------------------------- */

.list--view-more .list__item a {
    display: initial;
    padding: unset;
}

.list--view-more .list__item:first-child .list__item__text *:not(.list__item__text__title) {
    color: var(--color--grey--darkest);
}

.list--view-more .list__item__text__title {
    color: var(--color--black);
    padding-bottom: var(--spacer--s);
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .list--view-more .list__item {
        padding: var(--spacer--s) 0;
    }

    .list--links--bottom {
        margin-top: var(--spacer--xl);
    }

}

/* Media query to target only tablet */
@media all and (min-width:751px) and (max-width:1024px) {
    .list--view-more .list__item {
        flex: 0 0 50%;
        max-width: 50%;
        padding-top: 0;
    }

}

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .list--view-more .list__item {
        padding: var(--spacer--s) 0;
    }

}

/* COMPONENTS: Steps bar (Override/complement)
   -------------------------------------------------------------------------- */

.list--steps {
    margin-bottom: 0;
}

.list--steps:after {
    display: none;
}

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .list--steps .list__item__text__subtitle {
        margin-bottom: -.8rem;
        width: 2rem;
        height: 2rem;
        text-indent: -999.9rem;
        overflow: hidden;
    }

}

/* COMPONENTS: Steps bar: With label (New)
   -------------------------------------------------------------------------- */

/* Media query to target only mobile */

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .list--steps--with-label {
        --label--width: 15.6rem;
        margin-left: var(--label--width);
        font-weight: var(--font--weight--bold)
    }

    .list--steps--with-label:after {
        bottom: 50%;
        transform: translateY(.2rem);
    }

    .list--steps--with-label .list__label {
        position: absolute;
        right: 100%;
        width: var(--label--width);
        font-weight: 500;
    }

    .list--steps--with-label .list__item__text__subtitle {
        margin-top: 0;
        margin-bottom: 0;
    }

    .list--steps--with-label .list__item .list__item__text:after {
        bottom: 50%;
        transform: translateY(.2rem);
        border-radius: unset;
    }

}

/* COMPONENTS: Interview form: Boxes and outer stucture/spacings (New)
  -------------------------------------------------------------------------- */

.form--interview :is(.Separator, .FormHeader) {
    display: none;
}

.form--interview :is(.Section--sidebar, .Section--main),
.form--interview .Section--form .formfieldSpec {
    box-shadow: var(--color--shadow);
    border-radius: var(--boxes--border--radius);
}

.form--interview .Section--form .formfieldSpec.FileSchemaField div[id*="fileInput_"] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form--interview .Section--form .formfieldSpec.FileSchemaField div[id*="fileInput_"] .uploadedFile {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--fieldSpec--padding--inners);
    padding-right: var(--fieldSpec--padding--inners);
    padding-left: var(--fieldSpec--padding--inners);
}

.form--interview .Section--form .formfieldSpec.FileSchemaField div[id*="fileInput_"] .errorMessage {
    padding-right: var(--fieldSpec--padding--inners);
    padding-left: var(--fieldSpec--padding--inners);
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .form--interview :is(.Section--sidebar, .Section--main),
    .form--interview .Section--form .formfieldSpec {
        padding: var(--spacer--m);
    }

    .form--interview .Section--sidebar + .Section--main {
        margin-top: var(--spacer--m);
    }

    .form--interview .Section--full {
        margin-top: var(--spacer--l);
    }

}

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .form--interview :is(.Section--sidebar, .Section--main),
    .form--interview .Section--form .formfieldSpec {
        padding: var(--spacer--l);
    }

}

/* Media query to target only tablet */
@media all and (min-width:751px) and (max-width:1024px) {
    .form--interview .Section--sidebar + .Section--main {
        margin-top: var(--spacer--l);
    }

    .form--interview .Section--full {
        margin-top: var(--spacer--xl);
    }

}

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .form--interview {
        display: flex;
        flex-wrap: wrap;
    }

    .form--interview .Section {
        margin: 0;
        min-inline-size: initial;
        width: 100%;
    }

    .form--interview .Section--sidebar,
    .form--interview .Section--form .formfieldSpec.FileSchemaField {
        width: var(--content--w--sidebar);
    }

    .form--interview .Section--form .formfieldSpec.FileSchemaField {
        min-height: 40.6rem;
    }

    .form--interview .Section--sidebar + .Section--main {
        margin-left: var(--grid--columns--gap);
        width: calc(100% - var(--content--w--sidebar) - var(--grid--columns--gap));
    }

    .form--interview .Section--form {
        position: relative;
    }

    .form--interview .Section--form .formfieldSpec.FileSchemaField div[id*="fileInput_"] {
        position: absolute;
        top: 0;
        right: 0;
        left: calc(var(--content--w--sidebar) + var(--grid--columns--gap));
        width: unset;
    }

    .form--interview .Section--full {
        margin-top: var(--spacer--l);
    }

}

/* COMPONENTS: Interview form: Fields and inner stucture/spacings (New)
  -------------------------------------------------------------------------- */

.form--interview :is(.Section--sidebar, .Section--main) div[class*="description"] h3,
.form--interview .Section--form .formfieldSpec > label,
.form--interview .Section--form .formfieldSpec fieldset > legend {
    padding-bottom: var(--spacer--m);
}

.form--interview div[class*="fieldSpec"] div[class*="description"] {
    margin-top: 0;
}

.form--interview :is(.Section--sidebar, .Section--main) .fieldSpec .description {
    padding-bottom: 0;
}

.form--interview .Section--form .formfieldSpec .formdescription:not(:empty) {
    display: flex;
    row-gap: var(--spacer--m);
    column-gap: var(--grid--columns--gap);
}

.form--interview .Section--form .formfieldSpec:not(.FileSchemaField) .formdescription:not(:empty) {
    padding-bottom: var(--spacer--m);
}

/* Media query to target mobile and tablet */
@media all and (max-width:1024px) {
    .form--interview .Section--form .formfieldSpec.FileSchemaField .formdescription {
        padding-bottom: var(--spacer--m);
    }

}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .form--interview .Section--form .formfieldSpec .formdescription {
        flex-direction: column;
    }

}

/* Media query to target only tablet */
@media all and (min-width:751px) and (max-width:1024px) {
    .form--interview .Section--form .formfieldSpec .formdescription .formvideoDescription {
        min-width: calc(50% - (var(--grid--columns--gap) * .5));
    }

}

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .form--interview .Section--form .formfieldSpec .formdescription {
        flex-direction: column;
    }

    .form--interview .Section--form .formfieldSpec.FileSchemaField .formdescription {
        padding-bottom: 0;
    }

}

/* COMPONENTS: Interview form: Text (New)
  -------------------------------------------------------------------------- */

.form--interview :is(.Section--sidebar, .Section--main) div[class*="description"] h3,
.form--interview .Section--form .formfieldSpec > label,
.form--interview .Section--form .formfieldSpec fieldset > legend {
    font-family: var(--font--alt);
    font-weight: var(--font--weight--bold);
}

.form--interview div[class*="fieldSpec"] div[class*="description"] {
    font-size: inherit;
}

/* COMPONENTS: Interview form: Some specific styles (New)
  -------------------------------------------------------------------------- */

.form--interview div[class*="fieldSpec"] div[class*="description"] video {
    width: 100%;
}

.form--interview .fieldSpec + .fieldSpec.AcceptanceCheckboxField {
    margin-top: var(--spacer--m);
}

.form--interview .fieldSpec.AcceptanceCheckboxField fieldset > legend {
    padding-bottom: 0;
}

.form--interview.form--step1 .previousButton {
    display: none; /* we add (and then hide) a Prev button between the Next and the Cancel ones, to make the latter look tertiary */
}

/* MODULES: Main (Override/complement)
   -------------------------------------------------------------------------- */

:root {
    --main--padding--top: var(--spacer--xxl);
    --main--padding--bottom: var(--spacer--xxl);
}

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .main__wrapper {
        --content--w--full: var(--content--w--narrow);
    }

}

/* MODULES: HEADER
--------------------------------------------------------------------------------- */
.logo--header img {
    height: 6.5rem;
}

.menu--visible {
    color: var(--menu__link--font--color);
}

.menu--visible .menu__item:hover .menu__link[aria-haspopup=true]+.submenu__list {
    padding: 2rem 1rem;
}

.menu--visible .submenu__list {
    border-bottom-left-radius: var(--spacer--s2);
    border-bottom-right-radius: var(--spacer--s2);
    min-width: 13rem;
}

:where(.body--error,.body--success) .menu--visible .menu__list--separator-left {
    border-left-color: transparent;
}

.menu--visible .portalLanguages__item+.portalLanguages__item {
 border-top-color: transparent;
}

.menu--visible .menu__list:not(.menu__list--user) .menu__item:hover:after,
.menu--visible .menu__list:not(.menu__list--user) .menu__item.menu__item--open:after {
    border-bottom: .3rem solid var(--color--brand);
}

.menu--visible .menu__list:not(.menu__list--user) .menu__item:after {
    border-bottom: .3rem solid transparent;
    content: '';
    display: block;
    position: absolute;
    bottom: var(--spacer--xxs);
    width: 100%;
    height: .3rem;
    z-index: 99;
}

.menu--visible .menu__item:not([aria-current="page"]):hover .menu__link[aria-haspopup=true]:after {
    content: "\f106";
    margin-bottom: 0;
}

/* MODULES: Footer
   -------------------------------------------------------------------------- */

.footer__content .footer__rights {
    align-items: baseline;
    flex-direction: column;
}

.footer__links .footer__links__item.link {
    color: var(--color--white);
    font-weight: normal;
    text-decoration: underline;
    text-decoration-color: initial;
    padding-right: 3rem;
}

.footer__rights__text {
    font-size: 1.2rem;
    padding-top: 1rem;
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .footer__wrapper .footer__content {
        align-items: baseline;
        flex-direction: column;
    }

    .footer__rights__text {
        font-weight: bold;
        padding-top: 4rem;
        width: 30rem;
    }
}

/* BANNER
=============================================================================== */

.banner__text--content {
    background-color: var(--color--brand--sub-2);
    padding: var(--spacer--m) 0;
}

.banner__text--content .banner__wrapper {
    --banner--padding--bottom: unset;
    --banner--padding--top: unset;
}

.banner:not(.banner--secondary--bottom) .banner__text__title {
    margin-bottom: var(--spacer--m);
}

.banner--main .banner__wrapper {
    flex-direction: column;
    align-content: center;
    justify-content: end;
    --banner--padding--bottom: unset;
    --banner--padding--top: unset;
}

.banner--main .banner__wrapper > * {
    width: 100%;
}

/* PAGETYPE: Login (Override/complement)
   -------------------------------------------------------------------------- */
.body--login .main {
    background-color: var(--color--background--sub-1);
}

.body--login .logo.logo--login img {
    height: 4rem;
    width: 14.4rem;
}

.passwordGroup .comment .link {
    font-size: var(--font--size--01);
    font-weight: normal;
    text-decoration: underline;
    text-decoration-color: initial;
}

.form--login .button-bar .button-bar__wrap .button {
    width: 100%;
}

.body--login .section__content .article__content .paragraph:not(:last-of-type) {
    padding-bottom: 1.8rem;
}

.body--login .section__content .article__content .paragraph:first-of-type .title {
    color: var(--color--black);
}

.body--login .body__content .article .form {
    margin-top: 1rem;
}

.body--login .form:not(.form--grid) .fieldSpec+.button-bar {
    padding-top: 0;
}

/* PAGETYPE: Dashboard (Override/complement)
   -------------------------------------------------------------------------- */

/* Media query to target mobile and tablet */
@media all and (max-width:1024px) {
    .body--dashboard .main__wrapper {
        --main--padding--top: var(--spacer--l);
        --main--padding--bottom: var(--spacer--l);
    }

}

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .body--dashboard .main__wrapper {
        --main--padding--top: var(--spacer--xxxl);
        --main--padding--bottom: var(--spacer--xxxl);
    }

}

/* PAGETYPE: Dashboard: Section (Override/complement)
   -------------------------------------------------------------------------- */

.section--dashboard .section__header__text__subtitle {
    font-size: 1.4rem;
}

.section--dashboard * + .section__header__text__subtitle {
    margin-top: var(--spacer--m);
}

.section--dashboard .embed-container iframe {
    border-width: .1rem;
    border-style: solid;
    border-color: var(--color--borders);
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .section--dashboard + .section--dashboard {
        margin-top: var(--spacer--l);
    }

    .section--dashboard .section__header:not(.section__header--center) {
        flex-direction: column;
        align-items: flex-start;
    }

    .section--dashboard .section__header:not(.section__header--center) .section__header__actions {
        margin-top: var(--spacer--l);
    }

    .section--dashboard .section__header__actions {
        width: 100%;
    }

    .section--dashboard .section__header + .section__content {
        margin-top: var(--spacer--m);
    }

}

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .section--dashboard:nth-of-type(1) .section__header {
        padding: var(--spacer--xl) 8rem var(--spacer--l);
    }

    .section--dashboard .section__header__actions {
        max-width: 21.6rem;
    }

    .section--dashboard .section__header + .section__content {
        margin-top: var(--spacer--l);
    }

}

/* Media query to target only tablet */
@media all and (min-width:751px) and (max-width:1024px) {
    .section--dashboard + .section--dashboard {
        margin-top: var(--spacer--xl);
    }

}

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .section--dashboard + .section--dashboard {
        margin-top: var(--spacer--xxxl);
    }

}

/* PAGETYPE: RECORDEDINTERVIEW
   -------------------------------------------------------------------------- */
.form--interview {
    position: relative;
}

.form--interview .button-bar--right .button-bar__wrap {
    --button-bar--cols--gap: var(--spacer--l);
}

.stepper {
    font-weight: 500;
}

.Section--boxed {
    padding: 2.4rem 2.4rem 6.4rem 1.8rem;
    border-radius: .4rem;
    display: block;
    box-shadow: var(--color--shadow);
}

.form--interview .FileSchemaFieldRecordVideo {
    padding: 2.4rem 2.4rem 6.4rem 1.8rem;
    border-radius: .4rem;
    box-shadow: var(--color--shadow);
    font-family: var(--font--alt),Arial,Helvetica,sans-serif;
}

.form--interview .ButtonBarField [class*=Button] {
    font-weight: 500;
}

.form--interview .ButtonBarField [class*=Button].saveButton {
    font-weight: 500;
}

.form--interview .Section--section--aside-right {
    --fieldSpec--padding--outers: 0;
}

.form--interview .alert--error,
.form--interview .alert--error p,
.form--interview .alert .fa {
    line-height: 150%;
    display: inline;
    width: fit-content;
}

button:not(.saveButton):not(.submitButton):not(.nextButton):not(.formNextButton):not(.gotoButton):not(.redirectUrlButton)~.cancelButton {
    text-decoration: unset;
}

/* Stepper ---------------- */
.list--steps .list__item {
    display: none;
}

@media (min-width: 751px) {
    .list--steps--with-label:after {
        display: none;
}
}
/* ------------ */

/* Step 1: terms & cond */
@media (min-width: 1025px) {

    .form--interview .Section--section--aside-left {
        width: 32%;
        margin-right: 2%;
        float: left;
        --title--font--color: var(--color--black);
    }

    .form--interview .Section--section--aside-right {
        width: 66%;
        float: right;
    }

    .FileSchemaField:not(.FileSchemaFieldRecordVideo) .tc_formField {
        align-items: start;
        height: fit-content;
    }

    .form--interview .FileSchemaFieldRecordVideo {
        width: 31%;
        min-height: 42rem;
    }

    .FileSchemaFieldRecordVideo .tc_formField {
        position: absolute;
        top: 0;
        right: 0;
        width: 67%;
    }

}

/* PAGETYPES: SUCCESS / ERROR
--------------------------------------------------------------------- */
.article--success img {
    max-width: 6rem;
}

@media all and (max-width:750px){
    .article--success .title {
        --title--font--size: 2.4rem;
    }

    .body--error .title {
        --title--font--size: 2.4rem;
    }
}
/* PAGETYPES: JOBDETAIL
--------------------------------------------------------------------- */
.body--jobDetail .grid__item--main .grid__item--main__title {
    --title--font--color: var(--color--brand);
}

.body--jobDetail *+.section {
    margin-top: var(--spacer--l);
}

@media all and (max-width:1024px){
    .body--jobDetail .grid--2--sidebar>.grid__item--aside-right {
        padding-top: 0;
    }

    .body--jobDetail .grid__item--main .grid__item--main__title {
        --title--font--size: 2.4rem;
    }
}

/* PAGETYPES: FAQs
--------------------------------------------------------------------- */

.body--faqs .grid__item--main .grid__item--main__title {
    --title--font--color: var(--color--brand);
}

@media all and (min-width:751px){
    .body--faqs .article--details .title {
        --title--font--size: var(--font--size--05);
    }
}

@media all and (min-width:1025px){
    .body--faqs {
        --content--w--sidebar: calc(0.205 * var(--grid--columns--1) * var(--grid--columns--amount) + ((.205 * var(--grid--columns--amount)) - 1) * var(--grid--columns--gap));
    }
}

@media all and (max-width:1024px){
    .body--faqs .grid--2--sidebar>.grid__item {
        padding-top: 0;
    }
}

@media all and (min-width: 751px) and (max-width: 1024px) {
    .list--view-more {
        flex-direction: column;
    }
}
/* PAGETYPE: HELPER CLASSES
-------------------------------------------------------------------------- */

.brand--color {
    color: var(--color--brand);
}