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

ELEMENTS
-------------------------------------------------------------------------
Tables
Links
Fields
    : Inputs
External
    : Attachments (Overrides)
Indicators
    : Pills (New)
    : Status
    : Type
Loaders
    : Progress bar (New)
Typography
    : Links
    : With icon
        : Download (New)
        : Resource (New)
    : Quotes (New)
Search wizards

COMPONENTS
-------------------------------------------------------------------------
Header
Button bar (Complement/Overrides)
Cards (New)
    : Mini (New)
Lists
    : Compact (Complement)
    : Subtasks (New)
    : Controls
    : Links
    : Breadcrum
    : Swiper
Phases

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

MODULES
-------------------------------------------------------------------------
Banner
    : Center (Complement)
Slider (New)
    : Quotes (New)
    : Tasks (New)
    : Phases
Footer

PAGETYPES
-------------------------------------------------------------------------
Login
Dashboard
Video
Sucess
Task Completed
Phases

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

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

.grid__item--bottom {
    justify-content: end;
}

.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(3, 1fr);
    }

}

/*
    LAYOUTS/Grid: Phases (New)
*/
.section__content__phases {
    margin: 6rem 0 2rem;
}

/*
    ELEMENTS/ Tables
*/

.table--default thead tr th,
.tableField thead tr th,
.table--default tbody tr>*,
.tableField tbody tr td {
    color: var(--color--black);
}

.table--default thead tr th:first-child,
.table--default tbody tr>:first-child {
    border-right: .1rem solid var(--color--brand--sub-2);
}

.table--default.table--people thead tr th:first-child {
    padding-left: 1.5rem;
}

.table .link:not(.footer__links__item) {
    color: var(--color--clickeable);
    text-decoration: none;
}

.table .link:hover {
    text-decoration: underline;
}

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

    .table--cards.table--people tbody tr>:first-child .thumbnail {
        width: 3.6rem;
        height: 3.6rem;
    }
}

/*
    ELEMENTS/Links
*/

a:focus,
input:focus,
button:focus,
summary:focus,
.TIN_input_Checkbox[type=checkbox]:focus {
    border-radius: 0;
    outline-offset: .2rem;
}

a:focus,
input:focus,
button:focus,
.TIN_input_Checkbox[type=checkbox]:focus {
    outline: .5rem auto var(--color--buttons--focus);
}

summary:focus {
    outline: .1rem solid var(--color--buttons--focus);
}

.list--links--bottom .link {
    padding-left: 2.3rem;
    background-image: var(--custom__icon--caret-back);
}

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .list--links--bottom {
        margin-top: 11.6rem;
    }
}

/*
    ELEMENTS/ Fields : inputs
*/

::placeholder {
    font-weight: var(--font--weight--light);
}

.dropdown__placeholder,
.form .tox.tox-tinymce,
.form input[type=color],
.form input[type=date],
.form input[type=datetime-local],
.form input[type=email],
.form input[type=file],
.form input[type=month],
.form input[type=number],
.form input[type=password],
.form input[type=range]:not(.progress-bar__selector),
.form input[type=search]:not([class*=select2]),
.form input[type=tel],
.form input[type=text]:not([class*=select2]),
.form input[type=time],
.form input[type=url],
.form input[type=week],
.form select,
.form textarea,
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single,
.TIN_input_TextArea {
    transition: box-shadow .3s ease;
    font-weight: var(--font--weight--light);
}

.form .fieldSpec.hasErrors:not(.formfieldSpec,.datasetField,.MultipleDatasetEntryFormField,.fieldSpec--in-dataset) input[type=file] {
    color: var(--color--error);
}

.dropdown__placeholder:hover,
.form .tox.tox-tinymce:hover,
.form input[type="color"]:hover,
.form input[type="date"]:hover,
.form input[type="datetime-local"]:hover,
.form input[type="email"]:hover,
.form input[type="file"]:hover,
.form input[type="month"]:hover,
.form input[type="number"]:hover,
.form input[type="password"]:hover,
.form input[type="range"]:not(.progress-bar__selector):hover,
.form input[type="search"]:not([class*="select2"]):hover,
.form input[type="tel"]:hover,
.form input[type="text"]:not([class*="select2"]):hover,
.form input[type="time"]:hover,
.form input[type="url"]:hover,
.form input[type="week"]:hover,
.form select:hover,
.form textarea:hover,
.select2-container--default .select2-search--dropdown .select2-search__field:hover,
.select2-container--default .select2-selection--multiple:hover,
.select2-container--default .select2-selection--single:hover,
.TIN_input_TextArea:hover {
    box-shadow: 0 0.4rem 1.6rem 0 var(--color--shadow);
}

.select2-container--default .select2-results__option,
.select2-container--default .select2-search--inline .select2-search__field {
    font-weight: var(--font--weight--light);
}

.select2-container--default .select2-results__option {
    font-size: var(--font--size--small);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true] {
    color: var(--color--clickeable);
    background-color: var(--color--white);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: var(--color--clickeable);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border-radius: .8rem;
    border-color: var(--color--fields--border);
    color: var(--labels--font--color);
    font-size: 1.4rem;
    font-weight: var(--font--weight--regular);
}

.form .formfieldSpec.hasErrors:not(.MultipleDatasetEntryFormField) .select2-container .select2-selection__placeholder,
.hasErrors .select2-container--default .select2-selection--single .select2-selection__placeholder,.MultipleSelectFormField.hasErrors .select2-container--default .select2-search--inline .select2-search__field::placeholder, .fieldSpec.hasErrors,
.hasErrors .select2-selection__placeholder,
.alert--error, .duplicateWarningMessage,
.form .hasErrors select:not([multiple]):required:invalid {
    color: var(--color--error);
    font-family: var(--font);
}

.errorMessage, .message, .warningMessage {
    font-size: 1.4rem;
}

.errorMessageIcon:after {
    content: '';
    background-image: var(--icon--error-warning);
    width: 1.6rem;
    margin-top: .35rem;
}

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

.article--details iframe.view-document_viewer {
    --accross--width: 100%;
    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));
}

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .article--details .article__content__view__field__value iframe,
    .article--details .view-document_viewer {
        min-height: 72rem;
    }
}

/*
    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--s);
    --pill--font--size: 1.4rem;
    --pill--font--color: var(--color--grey--darkest);
    --pill__icon--width: 1.3rem;
    --pill__icon--height: 2rem;
}

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

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

.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/Loaders: Progress bar (New)
*/

.section__content__progressbar {
    margin-top: var(--spacer--m);
    position: relative;
}

.progressbar {
    --progressbar--height: .8rem;
    position: relative;
}

.progressbar:before {
    content: '';
    display: block;
    border-radius: var(--progressbar--height);
    width: 100%;
    height: 1.2rem;
    border: .1rem solid var(--color--grey--darker);
}

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

.section__content__progressbar:after {
    top: -.5rem;
    right: -5rem;
    color: var(--color--grey--darkest);
    content: attr(data-progress)'%';
    position: absolute;
    word-break: normal;
    font-weight: var(--font--weight--light);
    text-transform: uppercase;
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .grid__item>:not(.grid).section__content__progressbar {
        width: 90%;
    }

    .section__content__progressbar:after {
        top: -.4rem;
        right: -4rem;
        font-size: var(--font--size--small);
        font-weight: var(--font--weight--regular);
    }
}

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

.section--resources .grid__item {
    align-items: center;
    gap: 1rem;
}

.section--resources .link.link--download {
    text-align: center;
    text-decoration: none;
    font-weight: var(--font--weight--regular);
}

.section--resources .link--download:hover {
    text-decoration: underline;
}

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

.section--resources .article__header,
.section--resources .article__content {
    margin: var(--spacer--xxl) 0;
}

.section--resources .grid__item:hover {
    cursor: pointer;
}

.section--resources .grid__item::before {
    width: 7rem;
    height: 7rem;
    content: "";
    display: block;
    background-size: contain;
    background-position: center;
    background-image: var(--resource-icon-1);
    transition: transform .2s ease-in-out;
}

.section--resources .grid__item:hover::before {
    transform: scale(1.1);
}

.section--resources .resourceIcon1::before {
    background-image: var(--resource-icon-1);
}

.section--resources .resourceIcon2::before {
    background-image: var(--resource-icon-2);
}

.section--resources .resourceIcon3::before {
    background-image: var(--resource-icon-3);
}

.section--resources .resourceIcon4::before {
    background-image: var(--resource-icon-4);
}

.section--resources .resourceIcon5::before {
    background-image: var(--resource-icon-5);
}

.section--resources .resourceIcon6::before {
    background-image: var(--resource-icon-6);
}

.section--resources .resourceIcon7::before {
    background-image: var(--resource-icon-7);
}

.section--resources .resourceIcon8::before {
    background-image: var(--resource-icon-8);
}
.section--resources .grid__item:hover .link {
    color: var(--color--clickeable);
    text-decoration: underline;
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .section--resources .grid--4>.grid__item {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

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

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

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

@media all and (max-width:750px){
    .link--resource {
        font-size: 1.4rem;
    }
}

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

.section__header__text__paragraph {
    font-weight: var(--font--weight--light);
}

/*
    ELEMENTS/ Search wizards
*/
.search__panel .submitButton,
.button--cancel,
.ButtonBarField .cancelButton,
.clearButton,
.TIN_display_Anchor,
.TIN_input_button_Cancel {
    border-color: var(--color--grey--medium);
    color: var(--color--grey--darkest);
    border-width: .1rem;
}

.search__panel .submitButton:hover,
.button--cancel:hover,
.ButtonBarField .cancelButton:hover,
.clearButton:hover,
.TIN_display_Anchor:hover,
.TIN_input_button_Cancel:hover {
    border-color: var(--color--brand);
    color: var(--color--brand);
    border-width: .1rem;
    text-decoration: none;
}

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

.search__panel .submitButton:active,
.search__panel .submitButton:active:focus,
.button--cancel:active,
.ButtonBarField .cancelButton:active,
.clearButton:active,
.TIN_display_Anchor:active,
.TIN_input_button_Cancel:active,
.button--cancel:active:focus,
.ButtonBarField .cancelButton:active:focus,
.clearButton:active:focus,
.TIN_display_Anchor:active:focus,
.TIN_input_button_Cancel:active:focus {
    border-color: var(--color--buttons--sub-2);
    color: var(--color--buttons--sub-2);
    background-color: var(--color--white);
    border-width: .1rem;
    border-style: solid;
}

.search__panel .submitButton:focus,
.button--cancel:focus,
.ButtonBarField .cancelButton:focus,
.clearButton:focus,
.TIN_display_Anchor:focus,
.TIN_input_button_Cancel:focus {
    border-color: var(--color--light--black);
    color: var(--color--grey--darkest);
    background-color: var(--color--white);
    border-width: .2rem;
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .search__panel .submitButton {
        background-color: var(--color--buttons--active);
        border-color: var(--color--buttons--active);
        color: var(--color--white);
    }

    .search__panel .submitButton:active {
        background-color: var(--color--buttons--pressed);
        border-color: var(--color--buttons--pressed);
        color: var(--color--white);
    }

    .search__panel .submitButton:focus {
        background-color: var(--color--buttons--hover);
        border-color:var(--color--buttons--focus);
        color: var(--color--white);

    }

    .search__panel .submitButton:hover {
        background-color: var(--color--buttons--hover);
        border-color:var(--color--buttons--hover);
        color: var(--color--white);
    }
}

/*
    COMPONENTS/Header
*/

.header {
    box-shadow: 0 .4rem 1.6rem 0 var(--color--shadow--sub-1);
}

.tabs__placeholder:after,
.toggle__icon {
    font-size: 2rem;
}

.menu__link:after {
    font-size: 1.4rem;
    font-weight: 600;
    padding-top: .3rem;
}

.banner__text__subtitle {
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

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

.menu--visible .menu__item:hover .menu__link[aria-haspopup=true] {
    box-shadow: unset;
}

.menu--visible .portalLanguages__item+.portalLanguages__item,
.menu--visible .submenu__item+.submenu__item {
    border-top-color: var(--color--white);
}

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

    .toggle--menu[aria-expanded=true] .toggle__icon {
        color: var(--color--brand);
    }

    .toggle--menu[aria-expanded=true] .toggle__icon:before,
    .toggle--menu[aria-expanded=true] .toggle__icon:after {
        width: 1.4rem;
        background-color: var(--color--brand);
    }

    .menu__link[aria-expanded=true]:after {
        color: var(--color--brand);
        font-size: 2.3rem;
    }

    .menu__link[aria-expanded=false]:after {
        font-size: 2.3rem;
    }

    .banner__image img {
        width: 6rem;
        height: 6rem;
    }
}

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

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

/*
    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: 2.1rem;

    display: flex;
    flex-direction: column;
    gap: var(--card--padding--inners);
    border-radius: .6rem;
    border-width: var(--card--border--width);
    border-style: solid;
    border-color: var(--color--grey--light);
    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));
    height: 13.7rem;
}

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

.card__header__content {
    display: flex;
    flex-direction: column;
    gap: var(--card--padding--inners);
    flex-grow: 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(--color--black);
}

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

.card--mini {
    --card--border--radius: .8rem;

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

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

.globe__footer {
    padding-top: .8rem;
}

.globe__footer__content__text .title {
    font-size: 1.8rem;
}

/*
    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: 2.5rem;
    --subtask__icon--height: 2.5rem;
    --subtask__icon--background--color: transparent;
    --subtask__icon--background--image: none;
}

.list--subtasks .list__item .link {
    color: var(--color--clickeable);
    font-weight: var(--font--weight--bold);
    padding-left: var(--spacer--s);
}

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

.list--subtasks .list__item {
    display: flex;
    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-position: center center;
}

.list--subtasks .list__item--completed:before {
    background-image: var(--custom__icon--task-complete);
}

.list--subtasks .list__item--pending:before {
    background-image: var(--custom__icon--task-pending);
}

.list--subtasks .list__item--pending {
    --subtask__icon--border--color: var(--color--white);
    --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;
}

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

.CheckBoxListFormField_more,
.RadioButtonListFormField_more,
.article--details .article__content__view__field__value a,
.link,
.tc_formDescription a,
.tc_formSublabel a {
    font-weight: 400;
}

/*
    COMPONENTS/Links
*/

a:focus,
input:focus,
button:focus,
summary:focus,
.TIN_input_Checkbox[type=checkbox]:focus {
    border-radius: .8rem;
    outline-offset: -.2rem;
}

a:focus,
input:focus,
button:focus,
.TIN_input_Checkbox[type=checkbox]:focus {
    outline: .5rem auto var(--color--buttons--focus);
}

summary:focus {
    outline: .2rem solid var(--color--buttons--focus);
}

a.submenu__link:focus {
    outline: 0;
    width: fit-content;
}

.link:not(.footer__links__item) {
    color: var(--color--font);
    text-decoration: underline;
    font-weight: var(--font--weight--light);
}
.link:not(.footer__links__item):hover {
    color: var(--color--clickeable);
    text-decoration: underline;
}

/*
    COMPONENTS/Breadcrums
*/

.breadcrumbs .list--links {
    min-height: 3.75rem;
}

.breadcrumbs .list--links .list__item--active {
    font-weight: var(--font--weight--light);
}

.breadcrumbs .list--links .link {
    font-weight: var(--font--weight--light);
}

/*
    COMPONENTS/Swiper
*/

.swiper-button-next,
.swiper-button-prev {
    color: var(--color--grey--500);
    top: unset;
    border: 0.1rem solid var(--color--grey--light);
    padding: 1.8rem;
    border-radius: 10rem;
    background-color: var(--color--white);
    margin: 1.5rem;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: unset;
    background-color: var(--color--grey--banner);
    color: var(--color--grey--medium);
}

.swiper-scrollbar {
    height: .5rem;
    background-color: var(--color--grey--banner);
    margin: var(--spacer--xl) 6rem;
}

.swiper-scrollbar-drag {
    background-color: var(--color--grey--light3);
}

/* only for jobSlider */
.swiper-controlers .swiper-button-next,
.swiper-controlers .swiper-button-prev {
    top: -3rem;
}

.swiper-controlers {
    position: relative;
    margin: 5rem auto;
    padding: 0 2rem;
}

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .swiper-controlers {
        max-width: 40rem;
        text-align: center;
    }
}

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

.banner--center {
    --banner--padding--top: var(--spacer--xl);
    --banner--padding--bottom: var(--spacer--xl);
}

/*
    MODULES/Slider (New)
*/

.slider {
    --swiper-navigation-size: 1.7rem;
    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:focus,
.swiper-button-next:focus {
    outline-style: auto;
    outline-width: 0.1rem;
    outline-color: var(--color--buttons--focus);
}

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

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

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

}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .article--slider--tasks .title {
        font-size: 1.6rem;
    }
}

.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: .4rem;
    margin: -.4rem;
}

/* 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/Slider: Phases
*/

.swiper--phases .swiper-slide {
    width: 17rem;
}

.phases__link {
    align-items: center;
    display: flex;
    flex-direction: column;
}

.phases__link:hover .phase__footer .title {
    color: var(--color--clickeable);
    text-decoration: underline;
}

.phase__content {
    width: 17rem;
    height: 17rem;
    border: .1rem solid var(--color--grey--light3);
    border-radius: 10rem;
    margin-bottom: 1rem;
    align-items: end;
    justify-content: end;
    display: flex;
    background-size: 100%;
    background-position: center;
    transition: background-size 0.6s ease-in-out;
    -webkit-transition: background-size 0.6s ease-in-out;
}

.phases__link:hover .phase__content {
    background-size: 120%;
    transition: background-size 0.6s ease-in-out;
    -webkit-transition: background-size 0.6s ease-in-out;
    box-shadow: 0 0 .8rem .3rem rgba(0, 0, 0, 0.12);

}

.phase__content.Phase1 {
    background-image: var(--image--phase1);

}

.phase__content.Phase2 {
    background-image: var(--image--phase2);
}

.phase__content.Phase3 {
    background-image: var(--image--phase3);
}

.phase__content.Phase4 {
    background-image: var(--image--phase4);
}

.phase__content.Phase5 {
    background-image: var(--image--phase5);
}

.phase__status {
    height: 4.8rem;
    width: 4.8rem;
    display: flex;
}

.phase__status-icon {
    width: 4.8rem;
}

.phase--completed .phase__status-icon {
    background-image: var(--custom__icon--phase-complete);
}

.phase--late .phase__status-icon,
.phase--pending .phase__status-icon,
.phase--disabled .phase__status-icon {
    background-image: var(--custom__icon--phase-pending);
}

.phase--disabled .phase__footer .title,
.phase--late .phase__footer .title {
    color: var(--color--buttons--disabled--text);
    text-decoration: none;
}

.phase--disabled:hover .phase__footer .title,
.phase--late:hover .phase__footer .title {
    color: var(--color--buttons--disabled--text);
    text-decoration: none;
}

.phase__footer {
    text-align: center;
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .phase__footer {
        margin: var(--spacer--m);
    }
}

/*
    MODULES/Footer
*/

.footer__rights__copy {
    font-size: var(--font--size--small);
    font-weight: var(--font--weight--light);
}

.footer__links__item {
    color: var(--color--grey--darkest);
    font-size: var(--font--size--small);
    font-weight: var(--font--weight--light);
    text-decoration: none;
}

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

.footer__links__divider {
    color: var(--color--light--black);
}

.footer__links__divider {
    margin-left: var(--spacer--m);
    margin-right: var(--spacer--m);
}

.footer__social__item {
    width: 2.8rem;
    background-size: contain;
}

.footer__social__item__icon--facebook {
    background-image: var(--footer--social--icon--facebook--active);
}

.footer__social__item__icon--facebook:hover {
    background-image: var(--footer--social--icon--facebook--hover);
}

.footer__social__item__icon--x {
    background-image: var(--footer--social--icon--x--active);
}

.footer__social__item__icon--x:hover {
    background-image: var(--footer--social--icon--x--hover);
}

.footer__social__item__icon--linkedin {
    background-image: var(--footer--social--icon--linkedin--active);
}

.footer__social__item__icon--linkedin:hover {
    background-image: var(--footer--social--icon--linkedin--hover);
}

.footer__social__item__icon--instagram {
    background-image: var(--footer--social--icon--instagram--active);
}

.footer__social__item__icon--instagram:hover {
    background-image: var(--footer--social--icon--instagram--hover);
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .footer__links {
        column-gap: var(--spacer--m);
    }

    .footer__links__divider {
        display: none;
    }
}

/*
    PAGETYPES/Login
*/

.body--login .article {
    border: .1rem solid var(--color--grey--medium);
}

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

.form--login .comment {
    padding-top: var(--fieldSpec--padding--inners);
    color: var(--color--brand);
}

.form--login .link {
    color: var(--color--font);
    text-decoration: underline;
    font-size: 1.4rem;
}

.form--login .link:hover {
    color: var(--color--clickeable);
    text-decoration: underline;
}

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

.body--login .paragraph {
    line-height: 2.4rem;
    padding-bottom: 1.2rem;
}

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .form--login .comment {
        font-size: 1.6rem;
    }
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .form--login .comment {
        font-size: 1.4rem;
    }

}

/* PAGETYPES: JobDetail
   -------------------------------------------------------------------------- */
.fv-atom-o:before{
    content: "";
    background-image: var(--icon--atom--background--image);
    width: 2.4rem;
    height: 2.4rem;
    display: block;
    background-position: center;
    background-size: cover;
}

.aside .fv-atom-o:before {
    width: 1.8rem;
    height: 1.8rem;
}

/* PAGETYPES: Dashboard
   -------------------------------------------------------------------------- */

.section__header__text__title .title {
    margin-bottom: var(--spacer--m);
}

.fv-external-link {
    color: var(--color--clickeable);
}

.list--bullet .link {
    font-weight: var(--font--weight--light);
}

.custom-external-link {
    background-image: var(--custom__icon--external-link);
    height: 1.8rem;
    background-position: bottom;
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .section__header__text__paragraph {
        font-size: 1.4rem;
    }

    .list-controls__text__legend {
        font-weight: var(--font--weight--regular);
        margin-bottom: 2rem;
    }

    .section__header__tasks {
        padding: 0 var(--spacer--l);
    }

    .banner--center .banner__text {
        max-width: unset;
    }

    .banner__wrapper {
        align-items: end;
    }

    .break-line-only-mobile {
        display: block;
    }
}

.body--dashboard .tasks .link{
    font-size: 1.8rem;
}

/* PAGETYPES: Dashboard : Video
   -------------------------------------------------------------------------- */

.section__video .article {
    margin: var(--spacer--xl) auto;
}

.section__video .article__header__text__title {
    margin-bottom: var(--spacer--l);
}

.section__video .article__header__text__subtitle {
    font-size: var(--font--size--regular);
    line-height: 2.4rem;
    font-weight: var(--font--weight--light);
    margin-bottom: var(--spacer--l);
}

.section__video .embed-container {
    border-radius: 1rem;
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .article__header__text {
        text-align: center;
    }
}

/* PAGETYPES: Success
   -------------------------------------------------------------------------- */

.article--success .article__header:not(.article__header--center) .article__header__image {
    margin-right: 0;
}

.article--details .article__content__view__field__value a {
    color: var(--color--grey--darkest);
    font-weight: var(--font--weight--light);
}

.article--success .article__header__image img {
    height: 9rem;
}

/* PAGETYPES: Detail
   -------------------------------------------------------------------------- */

.article--details .article__header__text__title {
    font-size: 2.4rem;
}

/*
    PAGETYPES/Task list
*/

.section__tasks {
    border-radius: 2.4rem;
    background-color: var(--color--white);
    box-shadow: 0 .4rem 2rem 0 var(--color--shadow--sub-1);
}

.section__header__tasks {
    background-color: var(--color--grey--lighter);
    border-radius: 2.4rem 2.4rem 0 0;
    font-weight: var(--font--weight--light);
}

.section__content__tasks:not(.slider) {
    padding: var(--spacer--xl);
}

.task--status {
    padding: .2rem 0 .2rem 3rem;
}

.task--pending {
    background-image: var(--custom__icon--task-pending);
}

.task--completed:not(.alert--info) {
    background-image: var(--custom__icon--task-complete);
}

.task__header {
    color: var(--color--light--black);
    font-size: var(--font--size--00);
}

.task__content .link {
    color: var(--color--clickeable);
    display: -webkit-box;
    overflow: hidden;
    font-weight: var(--font--weight--bold);
    text-overflow: ellipsis;
    text-decoration: none;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.task__footer [class*=task--type] {
    font-weight: var(--font--weight--light);
}

.task__footer [class*=task--type--]:not(.task--type--single) {
    padding-left: 2.1rem;
    background-image: var(--task__icon--background--image);
    background-position: left center;
}

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .body--taskList .title--banner {
        max-width: 60rem;
    }
}

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .section__header__tasks {
        padding: var(--spacer--xl);
        font-weight: var(--font--weight--light);
        border-radius: 2.4rem 2.4rem 0 0;
        background-color: var(--color--grey--lighter);
    }
}

@media all and (max-width:750px){
    .body--taskList .link{
        font-size: 1.4rem;
    }
}

/*
    PAGETYPES/Task pending
*/
@media all and (max-width:750px){
    .body--taskPending .article__content__view__field__value{
        font-size: 1.4rem;
    }
}

/*
    PAGETYPES/Task Completed
*/

.body--taskCompleted .alert--info {
    font-weight: var(--font--weight--light);
    padding-left: 2.8rem;
    background-size: 1.9rem;
    background-image: var(--custom__icon--task-success-complete);
    background-position: .5rem center;
}

.body--taskCompleted .article--details .article__content__view__field {
    padding-bottom: var(--spacer--s2);
}

/*
    PAGETYPES/Phases
*/

.body--phases {
    background-color: var(--color--grey--banner);
}

/*
    COMPONENTS/Buttons
*/

.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],
.ui-dialog .ui-dialog-buttonpane .ui-button {
    font-weight: var(--font--weight--regular);
}

.button--tertiary {
    font-weight: var(--font--weight--bold);
}

.button--tertiary.downloadAttachmentsButton {
    width: 100%;
}

.AcceptanceCheckboxField:not(.hasErrors) .tc_formField:first-child .tc_formSublabel {
    font-weight: var(--font--weight--bold);
}

.table--default.table--fixed-column.table--fixed-column--first tbody tr>:first-child:before {
    background-color: var(--color--white);
}

/* Inputs:
-------------------------------------------------------------------------- */
::placeholder {
    font-weight: var(--font--weight--light);
}

.dropdown__placeholder {
    color: var(--color--light--black);
}

.dropdown__placeholder,
.form .tox.tox-tinymce,
.form input[type=color],
.form input[type=date],
.form input[type=datetime-local],
.form input[type=email],
.form input[type=file],
.form input[type=month],
.form input[type=number],
.form input[type=password],
.form input[type=range]:not(.progress-bar__selector),
.form input[type=search]:not([class*=select2]),
.form input[type=tel], .form input[type=text]:not([class*=select2]), .form input[type=time], .form input[type=url], .form input[type=week], .form select, .form textarea, .select2-container--default .select2-search--dropdown .select2-search__field, .select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single, textarea.TIN_input_TextArea {
    transition: box-shadow .3s ease;
}

.form .tox.tox-tinymce,
.form input[type=color],
.form input[type=date],
.form input[type=datetime-local],
.form input[type=email],
.form input[type=file],
.form input[type=month],
.form input[type=number],
.form input[type=password],
.form input[type=range]:not(.progress-bar__selector),
.form input[type=search]:not([class*=select2]),
.form input[type=tel], .form input[type=text]:not([class*=select2]), .form input[type=time], .form input[type=url], .form input[type=week], .form select, .form textarea, .select2-container--default .select2-search--dropdown .select2-search__field, .select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single, textarea.TIN_input_TextArea {
    font-weight: var(--font--weight--light);
}

.form input[type=date],
.form input[type=week],
.form input[type=time],
.form input[type=month],
.form input[type=datetime-local] {
    display: block;
}

.form .fieldSpec.FileField.hasErrors select,
.form .fieldSpec.DateFormField.hasErrors .DateFormField::placeholder,
.form .fieldSpec.SelectFormField.hasErrors .SelectFormField,
.form .fieldSpec.CheckBoxListFormField.hasErrors .select2-search__field::placeholder,
.form .fieldSpec.SelectFormField.hasErrors .select2-selection__placeholder,
.form .fieldSpec.hasErrors:not(.formfieldSpec, .datasetField, .MultipleDatasetEntryFormField, .fieldSpec--in-dataset) input[type=file] {
    color: var(--color--error);
}

.dropdown__placeholder:hover,
.form .tox.tox-tinymce:hover,
.form input[type="color"]:hover,
.form input[type="date"]:hover,
.form input[type="datetime-local"]:hover,
.form input[type="email"]:hover,
.form input[type="file"]:hover,
.form input[type="month"]:hover,
.form input[type="number"]:hover,
.form input[type="password"]:hover,
.form input[type="range"]:not(.progress-bar__selector):hover,
.form input[type="search"]:not([class*="select2"]):hover,
.form input[type="tel"]:hover,
.form input[type="text"]:not([class*="select2"]):hover,
.form input[type="time"]:hover,
.form input[type="url"]:hover,
.form input[type="week"]:hover,
.form select:hover,
.form textarea:hover,
.select2-container--default .select2-search--dropdown .select2-search__field:hover,
.select2-container--default .select2-selection--multiple:hover,
.select2-container--default .select2-selection--single:hover,
textarea.TIN_input_TextArea:hover {
    box-shadow: 0 0.4rem 1.6rem 0 var(--color--shadow);
}

.alert--info,
.dropdown__item,
.list--attachments .list__item__actions .link,
.select2-container--default .select2-results__option,
.select2-container--default .select2-search--inline .select2-search__field {
    font-weight: var(--font--weight--light);
}

.list-controls__text__legend,
.article__header__text__subtitle {
    font-size: var(--font--size);
}

.article__header__text__subtitle {
    font-weight: var(--font--weight--light);
}

.list-controls__text__legend {
    font-weight: var(--font--weight--regular);
}

.article__header__text__subtitle {
    font-size: var(--font--size--regular);
    letter-spacing: .04rem;
}

.list-controls--right .list-controls__text {
    align-items: end;
    justify-content: end;
}

.dropdown__item,
.select2-container--default .select2-results__option {
    font-size: var(--font--size--small);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: var(--color--clickeable);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    color: var(--color--brand);
    background-color: var(--color--white);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: var(--color--grey--darkest);
    border-color: var(--color--fields--border);
    border-radius: var(--boxes--border--radius)
}

.alert--info {
    --alert--background--color: var(--color--grey--banner);
}

/* Links:
-------------------------------------------------------------------------- */
.CheckBoxListFormField_more,
.RadioButtonListFormField_more,
.article--details .article__content__view__field__value a,
.link,
.tc_formDescription a,
.tc_formSublabel a {
    color: var(--color--font);
    transition: none;
    font-weight: var(--font--weight--light);
    text-decoration-color: currentColor;
}

.CheckBoxListFormField_more:hover,
.RadioButtonListFormField_more:hover,
.article--details .article__content__view__field__value a:hover,
.link:hover,
.tc_formDescription a:hover,
.tc_formSublabel a:hover {
    color: var(--color--buttons);
}

.title--job .link {
    color: var(--color--clickeable);
    font-weight: var(--font--weight--bold);
    text-decoration: none;
}

.title--job .link:hover {
    color: var(--color--buttons--hover);
}

.title--job .link:focus {
    color: var(--color--buttons--focus);
}

.title--job .link:active {
    color: var(--color--buttons--pressed);
}

/* Button - Cancel:
-------------------------------------------------------------------------- */
.button--secondary+.button--cancel,
.button--secondary+.button--cancel:link,
.button--secondary+.button--cancel:visited,
.button--tertiary, .button--tertiary:link,
.button--tertiary:visited,
button:not(.saveButton):not(.submitButton):not(.nextButton):not(.formNextButton):not(.gotoButton):not(.redirectUrlButton)~.cancelButton,
button:not(.saveButton):not(.submitButton):not(.nextButton):not(.formNextButton):not(.gotoButton):not(.redirectUrlButton)~.cancelButton:link,
button:not(.saveButton):not(.submitButton):not(.nextButton):not(.formNextButton):not(.gotoButton):not(.redirectUrlButton)~.cancelButton:visited {
    text-decoration: none;
}

.tableField thead tr th,
.tableField tbody tr td,
.table--default thead tr th,
.table--default tbody tr td {
    color: var(--table--color);
}

/*
    UTILITIES/XXX
*/

.session-dialog .session-dialog-title {
    color: var(--color--grey--darkest);
    font-weight: var(--font--weight--bold);
}

.title--center {
    text-align: center;
}

.font--weight--regular {
    font-weight: var(--font--weight--regular);
}

.link--error.tpt_attachments_deleteFileTrigger {
    cursor: pointer;
}

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

.body--Firefox img {
    color: transparent;
}

.hide--google-tag-manager {
    display: none;
    visibility: hidden;
}