/* ==========================================================================
    LAYOUTS
    -------------------------------------------------------------------------
    Grid
      : Tasks (New)
        : Grided (New)

    ELEMENTS
    -------------------------------------------------------------------------
    External
      : Attachments (Overrides)
    Indicators
      : Pills (New)
        : Status
        : Type
    Loaders
      : Progress bar (New)
    Typography
      : Links
        : With icon
          : Download (New)
          : Resource (New)
      : Quotes (New)
    Alerts

    COMPONENTS
    -------------------------------------------------------------------------
    Button bar (Complement/Overrides)
    Cards (New)
      : Mini (New)
    Lists
      : Compact (Complement)
      : Subtasks (New)
    Breadcrumbs

    WIDGETS
    -------------------------------------------------------------------------
    Forms
      : Types
        : CheckBoxListFormField (Overrides)

    MODULES
    -------------------------------------------------------------------------
    Banner
      : Center (Complement)
    Slider (New)
      : Quotes (New)
      : Tasks (New)
    Article Header

    PAGETYPES
    -------------------------------------------------------------------------
    Success

    UTILITIES
    -------------------------------------------------------------------------
    XXX
========================================================================== */

/*
    LAYOUTS/Grid: Tasks (New)
*/

.tasks__panel {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: var(--grid--columns--gap);
}

/*
    LAYOUTS/Grid: Tasks: Grided
*/

/* Media query to target only tablet */
@media all and (min-width:751px) and (max-width:1024px) {
    .tasks--grided .tasks__panel {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .tasks--grided .tasks__panel {
        grid-template-columns: repeat(4, 1fr);
    }

}

/*
    ELEMENTS/External: Attachments (Overrides)
*/

.article--details iframe.view-document_viewer {
    --accross--width: var(--content--w--narrow);

    width: var(--accross--width);
    height: var(--document-viewer--height);
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: calc(-1 * (var(--accross--width) / 2));
    margin-right: calc(-1 * (var(--accross--width) / 2));
}

.tc_formField iframe.documentCatalog {
    --accross--width: var(--content--w--narrow);
    width: var(--accross--width);
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: calc(-1 * (var(--accross--width) / 2));
    margin-right: calc(-1 * (var(--accross--width) / 2));
}

/*
    ELEMENTS/Indicators: Pills (New)
*/

.pill {
    --pill--border--radius: 0;
    --pill--border--width: 0;
    --pill--border--color: transparent;
    --pill--height: auto;
    --pill--background--color: transparent;
    --pill--padding--outers--v: 0;
    --pill--padding--outers--h: 0;
    --pill--padding--inners: var(--spacer--xs);
    --pill--font--size: inherit;
    --pill--font--color: inherit;
    --pill__icon--width: 0;
    --pill__icon--height: 0;

    display: inline-flex;
    align-items: center;
    border-radius: var(--pill--border--radius);
    border-width: var(--pill--border--width);
    border-style: solid;
    border-color: var(--pill--border--color);
    height: var(--pill--height);
    background-color: var(--pill--background--color);
    padding-top: calc(var(--pill--padding--outers--v) - var(--pill--border--width));
    padding-right: calc(var(--pill--padding--outers--h) - var(--pill--border--width));
    padding-bottom: calc(var(--pill--padding--outers--v) - var(--pill--border--width));
    padding-left: calc(var(--pill--padding--outers--h) - var(--pill--border--width));
    gap: var(--pill--padding--inners);
    font-size: var(--pill--font--size);
    color: var(--pill--font--color);
    white-space: nowrap;
}

.pill:before {
    flex-shrink: 0;
    width: var(--pill__icon--width);
    height: var(--pill__icon--height);
    background-image: var(--pill__icon--background--image);
    background-position: center center;
}

.pill[aria-disabled="true"]:before {
    background-color: currentColor;
    background-image: none;
    mask-image: var(--pill__icon--background--image);
    -webkit-mask-image: var(--pill__icon--background--image);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
}

.pill__text {
    line-height: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*
    ELEMENTS/Indicators: Pills: Status (New)
*/

.pill--status {
    --pill--border--width: .1rem;
    --pill--border--radius: 4.5rem;
    --pill--height: 2.4rem;
    --pill--padding--outers--v: var(--spacer--xs);
    --pill--padding--outers--h: var(--spacer--xs);
    --pill--font--size: 1.2rem;
    --pill--font--color: var(--color--grey--darkest);
    --pill__icon--width: 1.3rem;
    --pill__icon--height: 1.3rem;
}

.pill--status:before {
    content: '';
}

.pill--status--pending {
    --pill--border--color: var(--color--grey--light);
    --pill--background--color: var(--color--grey--light);
}

.pill--status--completed {
    --pill--border--color: var(--color--success--sub-1);
    --pill--background--color: var(--color--success--sub-1);
}

.pill--status--disabled,
.pill--status[aria-disabled="true"] {
    --pill--border--color: var(--color--disabled--sub-1);
    --pill--background--color: none;
    --pill--font--color: var(--color--disabled--sub-1);

    pointer-events: none;
}

/*
    ELEMENTS/Indicators: Pills: Type (New)
*/

.pill--type {
    --pill--font--size: 1.4rem;
    --pill--font--color: var(--color--grey--dark);
    --pill__icon--width: 1.3rem;
    --pill__icon--height: 1.3rem;
}

.pill--type:before {
    content: '';
}

.pill--type--single {
    --pill__icon--width: 1rem;
}

.pill--type--subtask {
    --pill__icon--width: 1.4rem;
}

.pill--type--grouped {
    --pill__icon--width: 1.5rem;
}

.pill--type--disabled,
.pill--type[aria-disabled="true"] {
    --pill--font--color: var(--color--disabled--sub-1);

    pointer-events: none;
}

/*
    ELEMENTS/Loaders: Progress bar (New)
*/

.progressbar {
    --progressbar--height: 1rem;

    position: relative;
    margin-bottom: var(--spacer--l);
    padding-bottom: var(--spacer--l);
}

.progressbar:before {
    content: '';
    display: block;
    border-radius: calc(var(--progressbar--height) / 2);
    width: 100%;
    height: var(--progressbar--height);
    background-color: var(--color--grey--light);
}

.progressbar__progress {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: calc(var(--progressbar--height) / 2);
    height: var(--progressbar--height);
    background-color: var(--color--brand);
}

.progressbar__progress:after {
    content: attr(data-progress)'%';
    position: absolute;
    top: calc(100% + var(--spacer--xs));
    right: 0;
    transform: translateX(50%);
    font-size: 1.6rem;
    font-weight: var(--font--weight--bold);
    text-transform: uppercase;
    color: var(--color--black);
    word-break: normal;
}

/*
    ELEMENTS/Typography: Links: With icon: Download (New)
*/

.link--download {
    --link__icon--width: 1.9rem;

    position: relative;
    display: inline-flex;
    align-items: baseline;
    margin-left: calc(var(--link__icon--width) + var(--spacer--xs));
}

.link--download:before {
    content: 'o';
    font: normal normal normal 1.4rem/1 FontVoutique;
    font-size: inherit;
    text-transform: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    right: calc(100% + var(--spacer--xs));
    width: var(--link__icon--width);
    text-align: right;
    text-decoration: unset;
}

.link--download .link__label,
.link--download .link__filename + span {
    display: none;
}

/*
    ELEMENTS/Typography: Links: With icon: Resource (New)
*/

.link--resource {
    align-items: baseline;
}

.link--resource .link__icon {
    text-decoration: unset;
}

/*
    ELEMENTS/Typography: Quotes (New)
*/

.quote {
    --quote__icon--width: 3.1rem;
    --quote__icon--height: 2rem;

    display: flex;
    flex-direction: column;
    gap: var(--spacer--m);
    border: unset;
    padding: unset;
    quotes: initial;
}

.quote:before {
    content: '';
    width: var(--quote__icon--width);
    height: var(--quote__icon--height);
    background-color: currentColor;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: left center;
    -webkit-mask-position: left center;
    mask-size: contain;
    -webkit-mask-size: contain;
}

/*
    ELEMENTS/Alerts
*/

.alert {
    background: var(--color--white);
    border: var(--alert--border--width) solid var(--alert--border--color);
    padding: var(--alert--padding--v) var(--alert--padding--h);
    border-left: var(--alert--border--left--width) solid var(--alert--border--left--color);
    font-size: var(--alert--font-size);
}

/*
    COMPONENTS/Bars: Buttons (Complement/Overrides)
*/

.button-bar--button--disabled--hidden .button--disabled {
    display: none;
}

.button,
.ButtonBarField .tc_formButton {
    text-transform: uppercase;
    line-height: normal;
}

/*
    COMPONENTS/Cards (New)
*/

.card {
    --card--outline--width: .2rem;
    --card--outline--color: var(--color--white);
    --card--padding--outers--v: var(--spacer--s2);
    --card--padding--outers--h: var(--spacer--m);
    --card--padding--inners: var(--spacer--s2);

    display: flex;
    flex-direction: column;
    gap: var(--card--padding--inners);
    border-radius: var(--card--border--radius);
    border-width: var(--card--border--width);
    border-top-width: .3rem;
    border-style: solid;
    border-color: var(--card--border--color);
    background-color: var(--card--background--color);
    padding-top: calc(var(--card--padding--outers--v) - var(--card--border--width));
    padding-right: calc(var(--card--padding--outers--h) - var(--card--border--width));
    padding-bottom: calc(var(--card--padding--outers--v) - var(--card--border--width));
    padding-left: calc(var(--card--padding--outers--h) - var(--card--border--width));
}

.card__header {
    display: flex;
    width: 100%;
}

.card__header__content {
    display: flex;
    flex-direction: column;
    gap: var(--card--padding--inners);
    flex-grow: 1;
}

.card__header__content__text .title .link {
    font-size: var(--font--size--05);
    color: var(--color--brand--sub-1);
}

.card__footer {
    display: flex;
    gap: var(--card--padding--inners);
    width: 100%;
}

/* if the card is disabled */
.card[aria-disabled="true"] {
    --card--border--color: var(--color--disabled--sub-1);
    --color--clickeable: var(--color--disabled--sub-1);

    pointer-events: none;
}

/* if the card is clickable */
a.card:hover {
    box-shadow: 0 0 .4rem .1rem var(--color--shadow);
}

a.card:focus {
    --card--border--width: .2rem;
    --card--border--color: var(--color--black);

    outline-width: var(--card--outline--width);
    outline-style: solid;
    outline-color: var(--card--outline--color);
}

/*
    COMPONENTS/Cards: Mini (New)
*/

.card--mini {
    --card--border--radius: 0;

    justify-content: space-between;
    min-height: 13.1rem;
    max-height: 15rem;
}

.card--mini .title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*
    COMPONENTS/Lists: Compact (Complement)
*/

.list--view-more {
    --thumbnail--width: 5rem;
    --thumbnail--height: 5rem;
}

.list--view-more {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--grid--columns--gap));
    margin-right: 0;
    margin-bottom: 0;
    margin-left: calc(-1 * var(--grid--columns--gap));
}

.list--view-more .list__item {
    display: flex;
    flex: 0 0 100%;
    max-width: 100%;
    padding-top: var(--grid--columns--gap);
    padding-right: 0;
    padding-bottom: 0;
    padding-left: var(--grid--columns--gap);
}

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

}

/*
    COMPONENTS/Lists: Subtasks (New)
*/

.list--subtasks {
    --subtask__item--padding--outers--v: var(--spacer--m);
    --subtask__item--padding--outers--h: 0;
    --subtask__item--padding--inners: var(--spacer--s2);
    --subtask__icon--border--width: .1rem;
    --subtask__icon--border--color: transparent;
    --subtask__icon--width: 1.9rem;
    --subtask__icon--height: 1.9rem;
    --subtask__icon--background--color: transparent;
    --subtask__icon--background--image: none;
}

* + .list--subtasks {
    margin-top: var(--spacer--m);
}

.list--subtasks .list__item {
    display: flex;
    gap: var(--subtask__item--padding--inners);
    border-bottom-width: .1rem;
    border-bottom-style: solid;
    border-bottom-color: var(--dividers--border--color);
    padding-top: var(--subtask__item--padding--outers--v);
    padding-right: var(--subtask__item--padding--outers--h);
    padding-bottom: var(--subtask__item--padding--outers--v);
    padding-left: var(--subtask__item--padding--outers--h);
}

.list--subtasks .list__item + .list__item {
    margin-top: var(--spacer--s);
}

.list--subtasks .list__item:before {
    content: '';
    flex-shrink: 0;
    border-radius: 100%;
    border-width: var(--subtask__icon--border--width);
    border-style: solid;
    border-color: var(--subtask__icon--border--color);
    width: var(--subtask__icon--width);
    height: var(--subtask__icon--height);
    background-color: var(--subtask__icon--background--color);
    background-image: var(--subtask__icon--background--image);
    background-position: center center;
}

.list--subtasks .list__item--pending {
    --subtask__icon--border--color: var(--color--borders);
    --subtask__icon--background--color: var(--color--white);
}

.list--subtasks .list__item[aria-disabled="true"] {
    --subtask__icon--border--color: var(--color--disabled--sub-1);
    --subtask__icon--background--color: var(--color--disabled--sub-1);
    --color--clickeable: var(--color--disabled--sub-1);

    pointer-events: none;
}

/*
    COMPONENTS/Breadcrumbs
*/
.breadcrumbs .list__item--active {
    color: var(--color--brand--sub-5);
}

/*
    WIDGETS/Forms: Types: CheckBoxListFormField (Overrides)
*/

.formfieldSpec.CheckBoxListFormField .tc_formLabel,
.formfieldSpec.CheckBoxListFormField .tc_formDescription {
    display: none;
}

.formfieldSpec.CheckBoxListFormField .tc_formField .cb-a11y {
    display: flex;
    gap: var(--fieldSpec--padding--inners);
    align-items: baseline;
}

.formfieldSpec.CheckBoxListFormField .tc_formField .cb-a11y input[type=checkbox] {
    flex-shrink: 0;
    margin: var(--spacer--xs);
}

.formfieldSpec.CheckBoxListFormField .tc_formField .cb-a11y label {
    --sublabels--font--weight: 400;

    flex-grow: 1;
    display: block;
    margin-left: unset;
    font-size: var(--sublabels--font--size);
    font-weight: var(--sublabels--font--weight);
    color: var(--sublabels--font--color);
    cursor: pointer;
}

.formfieldSpec.CheckBoxListFormField .tc_formField .cb-a11y label:after {
    content: ' *';
    color: var(--color--error);
}

.form input[type=checkbox], .form input[type=radio] {
    margin-right: var(--spacer--xs);
}

/*
    MODULES/Header: Header (New)
*/

.header {
    --toggle--font--color: var(--color--brand--sub-5);
    font-family: var(--font--alt);
}

.menu--visible .menu__link:focus-visible {
    outline-color: var(--color--brand);
    outline-width: .3rem;
    outline-style: solid;
}

.menu--visible .menu__item:not([aria-current="page"]):hover .menu__link {
    color: var(--color--brand);
}

.header .toggle[aria-expanded='true'] {
    --toggle--font--color: var(--color--brand);
}

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .header .menu__link:after {
        color: inherit;
        font-size: var(--font--size--00);
    }

    .header .menu__panel .menu__list:first-child .menu__link {
        padding-inline: .6rem;
        margin-inline: 2.7rem;
    }

    .header .menu--visible .menu__list--separator-left {
        margin-left: 1.2rem;
        padding-left: 1.7rem;
    }

    .header .menu__panel .menu__list:first-child .menu__item:last-child .menu__link {
        margin-right: 4.2rem;
    }

    .header .menu--toggleable .submenu__list {
        margin-left: 0;
    }
}

/* Media query to target mobile and tablet */
@media all and (max-width:1024px) {
    .header__logo {
        flex-grow: 1;
        padding-right: 2.3rem;
    }
}

/*
    MODULES/Banner: Main
*/

.banner--main .banner__text__title {
    font-size: 6.2rem;
    font-weight: bold;
    color: var(--color--brand--sub-5);
    line-height: 1.03;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    -webkit-line-clamp: 3;
}

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .banner--main .banner__text {
        max-width: 40%;
    }
}

/* Media query to target only tablet */
@media all and (min-width:751px) and (max-width:1024px) {
    .banner--main .banner__text__title {
        font-size: 4.8rem;
    }
}
/* Media query to target only mobile */
@media all and (max-width:750px) {
    .banner--main .banner__text__title {
        font-size: 3.6rem;
        color: var(--color--white);
        text-align: center;
    }
}

/*
    MODULES/Banner: Center (Complement)
*/

.banner--center {
    --color--background: var(--color--brand);
    --banner--padding--top: var(--spacer--xl);
    --banner--padding--bottom: var(--spacer--xl);
    --color--font: var(--color--white);
}

/*
    MODULES/Banner: Pages
*/

.banner--main {
    background-image: var(--banner--background--image);
}

.banner--main:not(.banner--detail):has(.banner__text__title) {
    background-image: var(--color--banner--gradient), var(--banner--background--image);
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .banner--main:not(.banner--detail):has(.banner__text__title) {
        --title--font--color: var(--color--white);
        background-image: var(--color--banner--gradient--mobile);
    }
}

/*
    MODULES/Banner: Cookies
*/

.banner--cookies {
    background-image: var(--banner--background--image--cookies);
}

/*
    MODULES/Cookies: Video/Document disabled
*/

.embed-container {
    background-image: var(--cookie--video--unabled);
    background-size: contain;
}

.body iframe[data-type="document"] {
    background-color: var(--color--grey--medium);
    background-image: var(--cookie--document--unabled); /* if the image is disabled or not define, we set a back-color before to show instead */
    background-size: cover;
    background-position: center;
}

/*
    MODULES/Slider (New)
*/

.slider {
    --swiper-navigation-size: 2.4rem;

    position: relative;
    padding-right: calc((var(--swiper-navigation-size)/ 44 * 27) + var(--grid--columns--gap));
    padding-left: calc((var(--swiper-navigation-size)/ 44 * 27) + var(--grid--columns--gap));
}

.swiper-button-prev,
.swiper-button-next {
    color: var(--color--clickeable);
}

.swiper-button-prev:focus,
.swiper-button-next:focus {
    outline-width: 0.1rem;
    outline-style: dotted;
    outline-color: var(--color--clickeable);
}

.slider .swiper-container ~ .swiper-button-prev {
    left: 0;
}

.slider .swiper-container ~ .swiper-button-next {
    right: 0;
}

.slider .swiper-container ~ .swiper-pagination-bullets {
    bottom: 0;
    left: 0;
    width: 100%;
}

.slider .swiper-container ~ .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 .4rem;
}

.swiper-button-disabled {
    display: none;
}

/*
    MODULES/Slider: Quotes (New)
*/

.article--slider--quotes .slider {
    padding-bottom: 3.6rem;
}

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .article--slider--quotes {
        --article--width--max: var(--content--w--narrower);
    }

}

/*
    MODULES/Slider: Tasks (New)
*/

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .article--slider--tasks {
        --article--width--max: var(--content--w--reduced);
    }

}

.article--slider--tasks .article__header + * {
    margin-top: var(--spacer--l);
}

/* creating space for the box-shadow of any content to be visible */
.swiper--tasks {
    padding: var(--spacing--basis);
    margin: calc(-1 * var(--spacing--basis));
}

/* restoring the box sizing for elements inside any content (parents need content-box for sizing purposes) */
.swiper--tasks .swiper-slide > * > * {
    box-sizing: border-box;
}

/*
    MODULES/Footer (New)
*/

.footer {
    background: linear-gradient(to bottom, var(--color--brand--sub-1) 0%, var(--color--brand) 62%);
    border: none;
}

.footer__content {
    flex-direction: column;
    padding-block: calc(7rem - var(--footer--padding--top));
}

.footer .footer__social__item:focus-visible,
.footer .footer__links__item:focus-visible {
    outline-color: var(--color--white);
    outline-width: .3rem;
    outline-style: solid;
}
.footer__divider {
    margin-block: 2.6rem;
    width: 100%;
    height: .1rem;
    background: var(--color--white);
}

.footer__social__item {
    width: 2.5rem;
    height: 2.5rem;
}

.footer__links {
    gap: 6.4rem;
}

.footer__links__item {
    color: var(--color--white);
    font-family: var(--font--alt);
    font-size: var(--font--size--02);
    font-weight: var(--font--weight--regular);
}

.footer__social__item+.footer__social__item {
    margin-left: 3.4rem;
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .footer__content {
        padding-block: calc(4rem - var(--footer--padding--top));
    }

    .footer__social__item {
        width: var(--size--social-icon);
        height: var(--size--social-icon);
    }

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

    .footer__divider {
        margin-block: var(--spacing--divider-block);
    }

    .footer__links {
        gap: var(--spacer--l);
        flex-direction: column;
        align-items: baseline;
        margin-right: auto;
        margin-left: var(--spacer--xl);
    }

    .footer__links__item {
        line-height: normal;
        font-weight: var(--font--weight--regular);
    }
}

/*
    MODULES/Article header
*/

.article__header__image {
    width: var(--article-header-image--size);
    height: var(--article-header-image--size);
}

/*
    MODULES/List links bottom
*/

.list--links--bottom {
    font-size: var(--font--size--01);
}

@media all and (max-width: 750px) {
    .list--links--bottom {
        font-size: var(--font--size--00);
    }
}

/*
    PAGETYPES/Success
*/

.body--success .article__content {
    font-size: var(--font--size--01);
}
.body--success .article__header {
    font-size: var(--font--size--12);
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .body--success .article__header {
        font-size: var(--font--size--07);
    }
}

/*
    UTILITIES/XXX
*/

.useful-contacts {
    --article--width--max: var(--content--w--narrow);
}