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

   * STRUCTURE
      : XXX

   * ELEMENTS
      : Autosave (New)
      : Fonts
      : Links

   * 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)
      : breadcrumbs
      : recordVideo

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

   * PAGETYPE
      : Dashboard (Override/complement)
         : Section (Override/complement)
      : Login
      : RecordedInterview
      : FAQS

   * 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+
*/
/*
    ELEMENTS/Fonts: Custom font FonterraNew
*/

@font-face {
    font-family: 'FonterraNew';
    src: url('../fonts/FonterraNew-Light.woff') format("woff"),
        url('../fonts/FonterraNew-Light.woff2') format("woff2");
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'FonterraNew';
    src: url('../fonts/FonterraNew-Regular.woff') format("woff"),
        url('../fonts/FonterraNew-Regular.woff2') format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'FonterraNew';
    src: url('../fonts/FonterraNew-Medium.woff') format("woff"),
        url('../fonts/FonterraNew-Medium.woff2') format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'FonterraNew';
    src: url('../fonts/FonterraNew-Bold.woff') format("woff"),
        url('../fonts/FonterraNew-Bold.woff2') format("woff2");
    font-weight: 700;
    font-display: swap;
}

/* STRUCTURE: XXX
   -------------------------------------------------------------------------- */

/* 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: Fonts (New)
   -------------------------------------------------------------------------- */

/* ELEMENTS: Fonts (New)
   -------------------------------------------------------------------------- */
.link {
    text-decoration-color: inherit;
    text-decoration-thickness: auto;
}

/* 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;
    font-weight: normal;
}

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

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

}

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

.list--steps:after {
    border-bottom-color: rgba(117, 214, 255, .3);
    border-bottom-width: 0.2rem;
}

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

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .list--steps .list__item__text__subtitle {
        background-color: rgba(117, 214, 255, .3);
    }

    .list--steps .list__item .list__item__text:after {
        border-bottom-width: 0.2rem;
    }

    .list--steps .list__item--current .list__item__text:after {
        width: 100%;
    }

    .list--steps--with-label {
        --label--width: calc(var(--content--w--sidebar) + var(--grid--columns--gap));
        margin-left: calc(var(--label--width));
        color: var(--color--brand);
    }

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

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

    .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(.1rem) translateX(.2rem);
        border-radius: unset;
    }
}

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

/* COMPONENTS: Interview form: Boxes and outer stucture/spacings (New)
  -------------------------------------------------------------------------- */
.form--interview :is(.Separator, .FormHeader):not(.section--title) {
    display: none;
}

.Separator {
    font-size: var(--font--size--08);
}

.form--interview .section--title.Separator {
    font-size: var(--font--size--06);
    font-weight: var(--font--weight--medium);
    color: var(--labels--font--color);
}

.form--interview :is(.Section--sidebar, .Section--main),
.form--interview .Section--form .formfieldSpec {
    border: 0.1rem solid var(--color--brand);
    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--xl) var(--spacer--l) 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: 59rem;
    }

    .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);
    }

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

    .wizardFormStepper+.section {
        margin-top: 7rem;
    }

}

/* 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 .Section--form .formfieldSpec>label,
.form--interview .Section--form .formfieldSpec fieldset>legend {
    font-weight: normal;
    font-size: 1.6rem;
    color: var(--color--brand);
    line-height: 1.375;
}

.form--interview :is(.fieldSpec, .datasetfieldSpec, .formfieldSpec) {
    padding-bottom: 0;
    /* margin-top: 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 div[class*="fieldSpec"] div[class*="description"] {
    font-size: inherit;
}

.delegate-widget__fieldSpec__label,
.form--login label,
.form--methods label,
.labeledCheckboxLabel,
.table--default.table--in-wizard tbody tr td[data-th]:not(.table__td--action):before {
    line-height: 2.2rem;
}

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

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

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

.form--interview .fieldSpec.AcceptCheckboxField 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: breadcrumbs
  -------------------------------------------------------------------------- */
.breadcrumbs {
    font-size: 1.6rem;
}

.breadcrumbs__wrapper {
    padding-left: 0;
}

.breadcrumbs .link {
    font-weight: 400;
    text-decoration-color: transparent;
}

.list--links .list__item:not(:last-of-type) {
    margin-right: var(--spacer--s);
}

.list--links--top .list__item:not(:last-of-type):after {
    transform: translateX(0.5rem) rotate(15deg);
}

/* COMPONENTS: recordVideo
  -------------------------------------------------------------------------- */

.recordVideo__custom--aside-left .formfieldSpec.FileSchemaFieldRecordVideo {
    position: relative;
    display: flex;
}

.recordVideo__custom--aside-left .formfieldSpec.FileSchemaFieldRecordVideo label {
    position: absolute;
    left: 2rem;
    top: 2rem;
    font-size: var(--font--size--06);
    font-weight: var(--font--weight--medium);
}

.recordVideo__custom--aside-left .formfieldSpec.FileSchemaFieldRecordVideo div[class*="description"] {
    padding: 6rem 2rem;
    border-radius: .4rem;
    box-shadow: 0 0 .4rem .1rem var(--color--shadow--description);
    margin-right: var(--grid--columns--gap);
    flex: 30%;
}

/* Media query to target tablet and mobile */
@media all and (max-width:1024px) {
    .recordVideo__custom--aside-left .formfieldSpec.FileSchemaFieldRecordVideo {
        flex-wrap: wrap;
    }

    .recordVideo__custom--aside-left .formfieldSpec.FileSchemaFieldRecordVideo div[class*="description"] {
        margin-right: 0;
        margin-bottom: var(--grid--columns--gap);
    }

    .recordVideo__custom--aside-left .formfieldSpec.FileSchemaFieldRecordVideo div[class*="description"]+div {
        flex: 100%;
    }
}

/* MODULES: Header (Override/complement)
   -------------------------------------------------------------------------- */
.menu--visible .menu__link[aria-haspopup="true"]:after {
    display: none;
}

.menu--visible .menu__link[aria-haspopup="true"] {
    padding-right: var(--spacer--l);
    background-image: var(--fields--icon--caret--down);
    background-position: right;
}

.menu--visible .menu__list--separator-left {
    margin-left: var(--spacer--s);
    padding-left: var(--spacer--s);
}

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .header {
        height: 6rem;
    }

    .menu--visible .menu__item:hover .menu__link[aria-haspopup=true],
    .menu--visible .menu__item.menu__item--open .menu__link[aria-haspopup=true] {
        border-color: transparent;
        box-shadow: none;
    }

    .menu--visible .menu__item:hover .menu__link[aria-haspopup=true]+.submenu__list,
    .menu--visible .menu__item.menu__item--open .menu__link[aria-haspopup=true]+.submenu__list {
        width: 20.2rem;
        padding: 1.6rem 2.4rem;
        box-shadow: 0 0.2rem 0.4rem 0 rgb(51 51 51 / 15%), 0 0.2rem 0.4rem 0 rgb(0 0 0 / 50%);
        background-color: var(--color--blue--darker);
        left: 50%;
        top: 4.1rem;
        transform: translatex(-50%);
        border: 0;
        border-radius: 1rem;
        overflow: inherit;
    }

    .menu--visible .menu__item:hover .menu__link[aria-haspopup=true]+.submenu__list:before,
    .menu--visible .menu__item.menu__item--open .menu__link[aria-haspopup=true]+.submenu__list:before {
        content: "";
        display: table;
        position: absolute;
        border: 1.6rem solid transparent;
        border-bottom-color: var(--color--blue--darker);
        left: 50%;
        top: -2.6rem;
        transform: translateX(-1.6rem);
    }

    .menu--visible .submenu__item:not([aria-current="page"]):hover .submenu__link {
        background-color: transparent;
    }

    .menu--visible .menu__list.menu__list--separator-left .menu__item:after {
        content: "";
        width: 100%;
        height: 2rem;
        position: absolute;
        opacity: 0;
    }

}

html[menu-type=visible] .header__content {
    justify-content: flex-end;
}

html[menu-type=toggleable][menu-toggleSide=right] .header__content {
    justify-content: flex-end;
}

/* Media query to target tablet and mobile */

.menu__link:after{
    --toggle--font--color: var(--color--white);
}

.menu--toggleable .menu__panel {
    background-color: var(--color--blue--dark);
}

.header {
    --logo--height: 4.8rem;
    --color--background: var(--color--white);
}

.toggle--menu {
    --toggle--background--color: transparent;
}
/* MODULES: Banner (Override/complement)
   -------------------------------------------------------------------------- */

.banner__wrapper {
    flex-direction: column;
}

.logo--banner {
    display: block;
    width: 10.7rem;
    height: 8.6rem;
    background-image: var(--logo--banner--image);
    background-position: center center;
    background-size: contain;
}

.banner__text__title {
    font-weight: var(--font--weight--bold);
    line-height: 1.04;
}

/* Media query to target tablet and desktop */
@media all and (min-width: 751px) {
    .banner--main {
        height: auto;
        padding-top: 20%;
    }

    .banner__wrapper {
        padding-bottom: 0;
    }

    .banner__text {
        margin-top: 3.4rem;
        min-height: 15.1rem;
        width: 100%;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color--white);
        color: var(--color--brand);
    }

    .banner__text__title {
        font-size: 5.6rem;
        text-align: center;
    }
}

@media all and (max-width: 750px) {
    .banner--main {
        height: auto;
        padding-top: 37.33%;
        min-height: auto;
    }

    .banner__text__title {
        font-size: 2.6rem;
    }
}

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

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

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

.footer {
    font-size: 1.4rem;
}

.footer .link {
    font-weight: normal;
    text-decoration: none;
    border: 0;
}

.footer__social__item{
    height: auto;
}

.footer__social__item__icon{
    width: 2rem;
    height: 2rem;
    display: inline-block;
}

.footer__content{
        min-height: 7.2rem;
    }

@media (min-width: 1025px) {
    .footer__links__divider {
        margin-left: var(--spacer--m2);
        margin-right: var(--spacer--m2);
    }

}
@media (min-width: 751px) {
    .footer__social__item+.footer__social__item {
        margin-left: 2rem;
    }
}

@media (max-width: 1024px) {
    .footer__content {
        flex-direction: column;
    }

    .footer__content>*+* {
        margin-top: 1.2rem;
    }

    .footer__links {
        display: flex;
    }
}

@media all and (max-width: 750px) {
    .footer__links__divider:nth-last-child(2) {
        display: none;
    }
    .footer__links__item:nth-last-child(1){
       flex: 0 0 100%;
       text-align: center;

    }
}

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

    .section--dashboard {
        padding: 0 var(--spacer--m);
    }

}

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {

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

    .section--dashboard {
        padding: var(--spacer--xl) var(--spacer--l) var(--spacer--l);
        border: 0.1rem solid var(--color--borders);
    }

}

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

}

/** Interview Duration and Job Information */

.section__content__interview {
    display: flex;
    justify-content: center;
}

.section__content__interview .section__content__interview__item {
    margin: 0 5rem;
}

.section__content__interview .article__intro {
    margin: 0 0 .5rem 0;
    text-align: center;
    color: var(--color--brand);
}

.section__content__interview .article__content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.article--interviewed__icon {
    background-image: var(--fields--icon--folder);
    padding-left: 3.2rem;
    min-height: 4rem;
    background-size: 2rem;
    background-position: 0 center;
}

.section__content__interview .article__content__title {
    font-weight: var(--font--weight--bold);
    text-align: center;
}

.section__content__interview .article__content__title a {
    text-decoration: none;
}

.section__content__interview .article__content__text {
    font-size: 1.6rem;
    line-height: 1.5;
    margin: .5rem 0 0 0;
}

/* Media query to target mobile and tablet */
@media all and (max-width:1024px) {
    .section__content__interview {
        flex-wrap: wrap;
        justify-content: left;
    }

    .section__content__interview .section__content__interview__item {
        margin: 0 auto;
        width: 50%;
    }
}

/* PAGETYPE: Login
   -------------------------------------------------------------------------- */

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

.body--login .article {
    border: 0.1rem solid var(--login__body--border--color);
}

.body--login .article__header {
    padding-bottom: var(--spacer--xxxl);
    border-bottom-color: var(--login__body--border--color);
    justify-content: center;
}

.form--login .labelRequiredIcon {
    display: inline-block;
}

.form--login .comment .link {
    font-weight: var(--font--weight--medium);
    text-decoration: none;
    margin-top: var(--spacer--s);
}

.logo--login {
    height: 6.6rem;
}

/* PAGETYPE: RecordedInterview
   -------------------------------------------------------------------------- */
.form--interviewSession {
    position: relative;
}

.form--interview .button-bar {
    margin-top: var(--spacer--l);
}

.Section.Section--section__custom--aside-left,
.Section.Section--section__custom--aside-right {
    padding: 4rem 2rem;
    border-radius: .4rem;
    box-shadow: 0 0 .4rem .1rem rgba(0, 0, 0, 0.2);
}

.Section.Section--section__custom--aside-left {
    float: left;
    width: 32%;
    margin-right: 4%;
}

.Section.Section--section__custom--aside-right {
    width: 64%;
}

.Section.Section--section__custom--aside-left div[class*="fieldSpec"] div[class*="description"] strong:first-of-type {
    font-size: var(--font--size--06);
    font-weight: var(--font--weight--medium);
    color: var(--color--blue--dark);
}

/* Media query to target tablet and mobile */
@media all and (max-width:1024px) {

    .Section.Section--section__custom--aside-left,
    .Section.Section--section__custom--aside-right {
        width: 100%;
    }

    .Section.Section--section__custom--aside-left {
        margin-right: 0;
        margin-bottom: var(--grid--columns--gap);
    }
}

/* PAGETYPE: FAQS
   -------------------------------------------------------------------------- */

.body--faqs .article--details:not(:last-of-type) {
    padding-bottom: 0;
}

.body--faqs .article--details+.article--details {
    border-top-width: 0;
}

.body--faqs .article__header:not(.article__header--top) {
    padding-bottom: var(--spacer--m);
    border-bottom: 0.1rem solid var(--color--borders);
}

.body--faqs .article--collapsible:last-child {
    border-bottom-width: 0;
}

/* PAGETYPE: Session Expiration
   -------------------------------------------------------------------------- */

#timeoutSessionPopup+.ui-dialog-buttonpane {
    display: none;
}

#timeoutSessionPopup {
    margin-top: var(--spacer--m);
}

/* PAGETYPE: Job details
   -------------------------------------------------------------------------- */
.grid--2--sidebar>.grid__item {
    padding-top: var(--spacer--l);

}

.grid--2--sidebar>.grid__item--aside-right {
    padding-left: var(--spacer--xxxl);
}

.section--job-name .article__header__text__title {
    font-size: var(--font--size--08);
}

.list--links--bottom .link {
    text-transform: uppercase;
}

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

.ButtonBarField [class*=Button],
.TIN_display_Button[id*=TIN_display_Button].TIN_display_CloserButton_NotificationAndDialog,
.TIN_display_Button[id*=TIN_display_Button].TIN_input_button_Cancel,
.TIN_display_Button[id*=TIN_display_Button].TIN_input_button_Primary,
.TIN_display_Button[id*=TIN_display_Button].autoschedule_editor_availability_header_Container_HeaderButton,
.autoschedule_Availability .TIN_display_Anchor,
.button,
.greyButtonBar [class*=Button] {
    text-transform: uppercase;
    font-weight: var(--font--weight--medium);
}

.section--job-name .article__content__view__field__value{
    font-size: 1.9rem;
}

@media (min-width: 751px) {
    .article--details.regular-fields--cols-2Z .article__content__view__field {
        padding-bottom: var(--spacer--l);
    }
}

@media (max-width: 1024px) {
    .article--view-more--aside {
        padding: 0;
        background-color: transparent;
    }

    .grid--2--sidebar>.grid__item--aside-right {
        padding-top: 0;
        padding-bottom: var(--spacer--m);
    }
}

/* PAGETYPE: Practice Interview
   -------------------------------------------------------------------------- */

.recordVideo__custom--center {
    max-width: 73.1rem;
    margin-left: auto;
    margin-right: auto;
}

/* PAGETYPE: Interview Questions
   -------------------------------------------------------------------------- */
.body--interview-questions .article--details {
    color: var(--color--brand);
}

.custom-field--question {
    padding: var(--spacer--m);
    background-color: rgba(117, 214, 255, 0.3);
    border-radius: 2rem;
    margin-top: var(--spacer--l);
    margin-bottom: var(--spacer--l);
}

.body--practice-interview .form--interview,
.field--privacy-content {
    color: var(--color--brand);
}

.body:not(.body--login) .button,
.tc_formButton {
    max-width: 22.8rem;
}

.button-bar--center .button-bar__wrap {
    justify-content: center;
}

@media all and (min-width:1025px) {

    .body--practice-interview .form--interview,
    .field--privacy-content,
    .body--interview-questions .article--details,
    .section--dashboard .section__content--welcome {
        font-size: 2.6rem;
    }

}

.list--bulleted li {
    list-style-type: disc;
    list-style-position: inside;
}

:root {
    --button-bar--rows--gap: var(--spacer--m);
}

@media all and (max-width:750px) {

    .p--t--xl,
    .p--t--xxl {
        padding-top: var(--spacer--m);
    }

    .m--b--xl {
        margin-bottom: var(--spacer--m);
    }

    .p--b--s {
        padding-bottom: var(--spacer--xs);
    }
}