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

   * STRUCTURE
      : Body
      : Button Bar

   * ELEMENTS
      : Links (Override/complement)
      : 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)
      :Tables (Override/complement)

   * MODULES
      : Main (Override/complement)
      : Header (Override/complement)
      : Footer (Override/complement)

   * PAGETYPE
      : Dashboard (Override/complement)
         : Section (Override/complement)
      : Login (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: Body
   -------------------------------------------------------------------------- */
@media (min-width: 751px){
   .body--mainOverlap:not(.body--login) .main__wrapper {
       padding-top: 0;
   }

   .body--mainOverlap:not(.body--login) .main__content {
        padding: 4rem 7rem;
        margin-top: -10rem;
        background: #FBFBFB;
        position: relative;
    }

    .body--mainOverlap .main__content:before, .body--mainOverlap .main__content:after{
        content: " ";
        height: 10rem;
        position: absolute;
        top: 10rem;
        width: 2rem;
    }

    .body--mainOverlap .main__content:before {
        box-shadow: -1.5rem 0 2rem -2.5rem var(--color--brand--sub-4) inset;
        left: -2rem;
    }

    .body--mainOverlap .main__content:after {
        box-shadow: 1.5rem 0 2rem -2.5rem var(--color--brand--sub-4) inset;
        right: -2rem;
    }
}

/* ELEMENTS: Links and fonts (New)
   -------------------------------------------------------------------------- */
.link{
    font-weight: var(--font--weight);
    margin-top: var(--spacer--xxxl);
}

.font--grey--darker{
    color: var(--color--grey--darker);
}

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

/* ELEMENTS: Button bar (New)
   -------------------------------------------------------------------------- */
.button-bar__wrap{
    --button-bar--rows--gap: var(--spacer--m);
}

/* COMPONENTS: View more (Override/complement)
   -------------------------------------------------------------------------- */

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

}

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

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

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

}

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

}

/* 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{
    border-bottom-color: var(--color--grey--medium);
}

.list--steps .list__item.list__item--filled .list__item__text__subtitle{
    border-color: var(--color--brand--sub-1);
}

.list--steps .list__item.list__item--current.list__item__text__subtitle{
    border-color: var(--color--brand--sub-1);
}

.list--steps .list__item .list__item__text:after {
    border-bottom-color: var(--color--brand--sub-1);
}

.list--steps .list__item.list__item--current .list__item__text__subtitle{
    background-color: #fff315;
}

.list--steps .list_item--filled .list__item__text__subtitle{
    background-color: var(--color--brand);
}

/* 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;
        border-color: var(--color--grey--medium);
        background-color: var(--color--white);
    }

}

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

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .list--steps--with-label .list__label {
        display: none;
    }

}

/* 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-size: 1.4rem;
    }

    .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 {
    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:not(.button-bar) {
        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: 50.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;
        bottom: 0;
        left: calc(var(--content--w--sidebar) + var(--grid--columns--gap));
        width: unset;
        background-color: var(--color--black);
        max-height: 49.9rem;
    }

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

    .formfieldSpec.button-bar{
        display: flex;
        justify-content: flex-end;
        padding-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 :is(.fieldSpec, .datasetfieldSpec, .formfieldSpec) {
    padding-bottom: 0;
}

.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);
    color: var(--color--grey--darker);
}

.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-weight: var(--font--weight--bold);
    color: var(--color--black);
}

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

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .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-size: 2rem;
    }

}

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .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-size: 2.2rem;
    }

}

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

/* COMPONENTS: Tables (Override/complement)
  -------------------------------------------------------------------------- */

.table__wrap{
    border-color: transparent;
}

.table__wrap .table{
    border-width: 0;
}

.table--default{
    border-color: transparent;
    border-collapse: collapse;
    --table--background--color: transparent;
    color: var(--color--brand--sub-3);
}

.table--default.table--fixed-column--first thead tr th{
    border-right-color: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    --table--background--color: rgba(207, 229, 255, 0.5);
    font-weight: 600;
}

.article--details .article__content__view__field:not(.article__content__view__field--not-format) .article__content__view__field__value>:not(.table) .table--default.table--fixed-column--first thead tr th:nth-child(2), .article--details .article__content__view__field:not(.article__content__view__field--not-format) .article__content__view__field__value>:not(.table) .table--default.table--fixed-column--first tbody tr td:nth-child(2){
    text-align: left !important;
}

.table--default.table--fixed-column.table--fixed-column--first tbody tr>:first-child{
    backdrop-filter: unset;
    background-color: transparent;
    border-right-color: transparent;
    border-right-width: 0;
}

.table--default.table--fixed-column.table--fixed-column--first thead tr th:first-child{
    border-right-color: transparent;
    border-right-width: 0;
    --table--fixed--column--width:9.9rem
}

.table--default.table--fixed-column tbody tr>:first-child::before{
    display: none;
}

@media all and (max-width:750px){
    .table--cards{
        color: var(--color--grey--darker);
    }

    .table--cards tbody tr {
        border-color: var(--color--brand);
        --card--border--radius: 0;
    }

    .table--cards tbody tr td:nth-child(2){
        border-top-color: var(--color--brand);
    }
}

/* MODULES: Main (Override/complement)
   -------------------------------------------------------------------------- */
:root {
    --main--padding--top: var(--spacer--xxl);
    --main--padding--bottom: var(--spacer--xxl);
}

/* MODULES: Header (Override/complement)
   -------------------------------------------------------------------------- */
.logo{
    width: var(--logo--width);
    align-items: end;
}

.logo--login img{
    width: var(--logo--width);
    height: var(--logo--height);
}

.header__wrapper {
    align-items: end;
    padding-right: var(--grid--laterals);
    padding-left: var(--grid--laterals);
    gap: .5rem;
    min-height: 0;
}

.header__legend {
    position: relative;
    top: .4rem;
    height: 4.5rem;
    margin: auto;
    padding-top: 2.3rem;
    text-align: center;
}

.header__legend--slogan .header__legend--image {
    display: block;
    width: 40rem;
}

.header__legend--jobs {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: .1rem solid var(--color--brand);
}

.header__legend--jobs.link {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color--brand);
}

.header__legend--jobs.link:hover {
    border-bottom-color: transparent;
}

.header__menu {
  width: 100%;
  height: 4.7rem;
  background-color: var(--color--brand--sub-1);
  position: relative;
}

.header__text--separator-left{
    flex-shrink: 0;
    border-left-width: 0.1rem;
    border-left-style: solid;
    margin-left: var(--spacer--xs);
    padding-left: var(--spacer--xs);
    border-left-color: var(--color--grey--darkest);
}

.header__list{
    position: absolute;
    transform: translateY(-100%);
}

.header__item--user{
    display: flex;
    align-items: center;
}

.header__thumbnail{
    --thumbnail--height: 1.4rem;
    --thumbnail--width: auto;
}

.header__text--user{
    font-size: 1.3rem;
}

.menu__panel{
    position: relative;
}

@media all and (max-width:750px) {
    .logo--header{
        --logo--width: 100%;
        --logo--height: 100%;
    }

    .logo--header img{
        width: 100%;
        height: 100%;
        min-width: 8rem;
        min-height: 6.6rem;
    }

    .header__wrapper--bottom {
        margin-top: -2.6rem;
        padding-right: 0;
        padding-left: 0;
    }

    .header__menu{
        height: 4.1rem;
    }

    .banner__wrapper {
        flex-direction: column;
    }

    .header__legend{
        padding-top: 0.8rem;
        top: 0;
    }

    .header__legend--jobs{
        padding-top: 0.2rem;
        margin-top: 0.6rem;
    }

    .header__legend--jobs.link{
        font-size: 1.5rem;
    }

    .header__legend--slogan .header__legend--image{
        width: 22rem;
    }
}

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .menu__link {
        text-align: center;
    }

    .header__wrapper--bottom{
        margin-top: 1.4rem;
    }

    .header__logo .logo img {
        height: 7.9rem;
    }
}

/* MODULES: Footer (Override/complement)
   -------------------------------------------------------------------------- */
.footer {
    border-top-width: 0;
    box-shadow: 0 1rem 2rem rgba(14,10,9,0.2);
}

.footer__wrapper {
    display: flex;
    align-items: center;
    justify-content: end;
    height: 9.7rem;
}

.footer__content {
    background-color: var(--color--brand--sub-1);
    color: var(--color--white);
    min-width: 34rem;
    padding: var(--spacer--xxs) var(--spacer--m);
    text-transform: uppercase;
    font-weight: 600;
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .footer__content {
        min-width: 11.7rem;
    }

    .footer__wrapper {
        justify-content: start;
    }
}

.footer__social__item {
    height: 2.5rem;
    margin-left: var(--spacer--s);
}

.footer__social__item+.footer__social__item {
    margin-left: var(--spacer--s);
}

/* 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 .section__header__actions {
        max-width: 24.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: Login (Override/complement)
   -------------------------------------------------------------------------- */
.form--login .comment{
    padding-top: var(--spacer--s);
}

.comment--SSO{
    font-size: 1.4rem;
    padding-top: var(--spacer--xl);
}

.form--login .comment .link, .link--SSO{
    color: var(--color--brand--sub-5);
    font-weight: var(--font--weight--bold);
}

.body--login .button{
    width: 100%;
}

.body--login .article__header{
    padding-top: 1.5rem;
    padding-bottom: 1.1rem;
}

@media all and (max-width:750px) {
    .comment--SSO{
        padding-top: var(--spacer--l);
    }
    .body--login .article__header{
        padding-top: 1.3rem;
        padding-bottom: 1.3em;
    }
}

/* PAGETYPE: Reset password (Override/complement)
   -------------------------------------------------------------------------- */
.paragraph--mail{
    padding-top: var(--spacer--s);
}

/* PAGETYPE: Home (Override/complement)
   -------------------------------------------------------------------------- */
.section__header__questions{
    width: 100%;
}

.body--dashboard .section--dashboard .link--job{
    color: var(--color--brand--sub-5);
    font-weight: var(--font--weight--bold);
}

.body--dashboard .section__header__actions{
    margin-top: 5.8rem;
    margin-bottom: 5.6rem;
}

.body--dashboard .section__header__actions .button--tertiary{
    font-weight: var(--font--weight);
}

.section--video{
    margin-top: 5.3rem;
}

.section__content--video{
    margin-top: var(--spacer--xl);
}

@media all and (max-width:750px){
    .body--dashboard .section--dashboard{
        margin-top: 1.6rem;
    }

    .body--dashboard .section--dashboard .section__header__text__title{
        font-size: 2.2rem;
    }

    .body--dashboard .section__header__actions {
        margin-top: 4.9rem;
        margin-bottom: 5.8rem;
    }
    .body--dashboard .section__header__actions .button--tertiary {
        font-weight: var(--font--weight--bold);
    }

    .body--dashboard .section--dashboard.section--video{
        margin-top: var(--spacer--xxl);
    }

    .section__content--video{
        margin-top: 1.5rem;
    }
}

/* PAGETYPE: job Detail (Override/complement)
   -------------------------------------------------------------------------- */
.body--jobDetail .grid__item--main{
    padding-right: 2.4rem;
}

.body--jobDetail .article--details:not(.separator--general){
    --dividers--border--color: var(--color--brand);
    padding-bottom: 4rem;
}

.body--jobDetail .article--details.article--title-job{
    padding-bottom: var(--spacer--m);
}

.body--jobDetail .article__content__view__field{
    color: var(--color--grey--darker);
}

.body--jobDetail .article__header__text__title{
    display: flex;
    align-items: baseline;
}

.jv_icon--general .article__header__text__title::before{
    content: url(../images/ico-general-info.svg);
    display: block;
    height: 1.6rem;
    margin-left: -0.8rem;
}

.jv_icon--description .article__header__text__title::before{
    content: url(../images/ico-description.svg);
    display: block;
    height: 1.6rem;
    margin-left: -0.8rem;
}

.body--jobDetail .list--view-more .list__item__text__title{
    color: var(--color--black);
}

@media all and (min-width:1025px) {
    .body--jobDetail .grid--2--sidebar--aside-right>.grid__item--main{
        flex-basis: min-content;
    }

    .body--jobDetail .grid--2--sidebar--aside-right>.grid__item--aside-right{
        max-width: 36.1rem;
        flex: auto;
    }

    .body--jobDetail .grid--2--sidebar>.grid__item{
        padding-left: 0;
    }

    .list--view-more .list__item__text__subtitle.subtitle--job{
        color: var(--color--brand);
        font-size: 1.6rem;
    }
}

/* PAGETYPE: FAQ(Override/complement)
   -------------------------------------------------------------------------- */
.article--faq .paragraph{
    color: var(--color--grey--darker);
}

@media all and (min-width:1025px){
    .article--faq{
        --article--width--max: 74.6rem;
        margin: 0;
    }
}

/* PAGETYPE: Practive Interview (Override/complement)
   -------------------------------------------------------------------------- */
.body--practice .cancelButton{
    --buttons--border--color: var(--color--buttons);
    --buttons--background--color: var(--color--buttons);
    --buttons--font--color: var(--color--white);
}

.body--practice .cancelButton:hover{
    --buttons--border--color: var(--color--buttons--sub-1);
    --buttons--background--color: var(--color--buttons--sub-1);
    --buttons--font--color: var(--color--white);
}

.body--practice .cancelButton:focus, .body--practice .cancelButton:active{
    --buttons--outline--width: .2rem;
    --buttons--border--color: var(--color--buttons--sub-2);
    --buttons--border--width: .2rem;
    --buttons--background--color: var(--color--buttons--sub-2);
    --buttons--font--color: var(--color--white);
}

/* PAGETYPE: Interview - Terms and conditions (Override/complement)
   -------------------------------------------------------------------------- */
.terms--header h3{
    font-size: 2.2rem;
    font-weight: var(--font--weight--bold);
    margin-bottom: var(--spacer--l);
    color: var(--color--black);
}

.terms--header p{
    margin-bottom: var(--spacer--l);
    color: var(--color--grey--darker);
}

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

.AcceptCheckboxFieldContainer .tc_formSublabel{
    color: var(--color--grey--darker);
}

/* UTILITIES: XXX
   -------------------------------------------------------------------------- */
.anchor--disabled{
    pointer-events: none
}

.separator--bottom:after {
    content: "";
    display: block;
    margin-top: 1.9rem;
    width: 7rem;
    border-top: 0.2rem solid var(--color--brand--sub-1);
    margin-bottom: 4.8rem;
}

.article__content--message{
    margin-top: var(--spacer--l);
}

.paragraph--message{
    color: var(--color--grey--darker);
}

.article--success .article__header__image{
    width: 8.3rem;
    height: 6.8rem;
}

.body--messages .article__header__text__title{
    color: var(--color--black);
}

.title.title--success{
    color: var(--color--black);
}

@media all and (min-width:1025px){
    .button--interview{
        width: 24.6rem;
    }
}

@media all and (max-width:750px) {
    .separator--bottom:after {
        margin-top: 2rem;
        margin-bottom: 5.6rem;
    }

    .body--jobDetail .separator--bottom:after {
        margin-bottom: 3,3rem;
    }

    .article__content--message{
        margin-top: var(--spacer--s);
    }

    .article--success .article__header__image{
        width: 6.6rem;
        height: 5.4rem;
    }
}