/* ==========================================================================
    LAYOUTS
    -------------------------------------------------------------------------
    XXX

    ELEMENTS
    -------------------------------------------------------------------------
    Typography
      : Links
        : With icon

    COMPONENTS
    -------------------------------------------------------------------------
    Cards
      : Dashlet (New)
    Lists
      : Dashlet (New)
      : Pipeline (New)
    Navigation
      : Tabs (Inverting clickable colors - commented and ready to use)
      : Switcher
        : Aside (New)
        : As icons (Inverting clickable colors - commented and ready to use)

    WIDGETS
    -------------------------------------------------------------------------
    New requisition from scratch (New)
    Reports (New)
    Stats (New)

    MODULES
    -------------------------------------------------------------------------
    Blind
    Footer
    Menu
    Tables
    Header

    PAGETYPES
    -------------------------------------------------------------------------
    Dashboard
      : Wrapper (Override/complement)
      : Section (Override/complement)

    Login
      : Layout/Colors (Override/complement)

    Detail

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

/*
    LAYOUTS/XXX
*/

/*
    ELEMENTS/Typography: Links
*/

.link {
    cursor: pointer;
}

/*
    ELEMENTS/Typography: Links: With icon
*/

.link__icon.fa-arrow-left {
    font-size: 1.2rem
}

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

.table--cards.table tr .link {
    font-size: var(--font--size--04);
    text-decoration: none;
    font-weight: bold;
}

.table--cards tbody tr td:last-child .link,
.table--cards tbody tr>* {
    font-size: var(--font--size--01);
}

.table--cards .toggle__icon {
    color: var(--color--brand);
}

.article--boxed--dashlet .article__header__count {
    vertical-align: middle;
    font-weight: var(--font--weight--bold);
    color: var(--color--brand);
}

[class*="--boxed--dashlet"] .article__content {
    border-top-width: .1rem;
}

.article--accordion>.article__footer .link {
    text-transform: initial;
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .article--boxed--dashlet .article__header__count {
        font-size: 2.8rem;
    }

}

/* Media query to target only tablet */
@media all and (min-width:751px) and (max-width:1024px) {
    .article--boxed--dashlet.article--accordion > .article__header {
        padding-right: var(--boxes--padding--outers);
    }

    .article--boxed--dashlet[class*="--accordion"]:not([class*="--accordion__open"]) > [class*="__content"] {
        display: block;
    }

}

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .article--boxed--dashlet {
        display: flex;
        flex-direction: column;
    }

    .article--boxed--dashlet .article__header__count {
        font-size: 3.6rem;
    }

    .article--boxed--dashlet .article__content {
        flex-grow: 1;
    }

}

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

.list--dashlet {
    margin-bottom: -.1rem;
}

.list--dashlet .list__item {
    border-bottom-width: .1rem;
    border-bottom-style: solid;
    border-bottom-color: var(--boxes--border--color);
}

.list--dashlet .list__item__text {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    min-height: calc(var(--sizing--basis) * 16);
    padding: var(--spacer--s) var(--spacer--m);
    transition: all 0.3s ease;
}

.list--dashlet .list__item:not(.partially-saved) a.list__item__text:hover {
    background-color: var(--color--clickeable);
    transition: all 0.3s ease;
}

.list--dashlet a.list__item__text .js-simple-tooltip,
.list--dashlet a.list__item__text .list__item__text__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.list--dashlet a.list__item__text .list__item__text__title {
    font-weight: var(--font--weight--bold);
    line-height: 160%;
    color: var(--color--clickeable);
    transition: all 0.3s ease;
}

.list--dashlet .list__item:not(.partially-saved) a.list__item__text:hover .list__item__text__title {
    color: var(--color--white);
    transition: all 0.3s ease;
}

.list--dashlet .list__item__text__subtitle {
    width: 100%;
    font-size: 1.4rem;
    line-height: 160%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: all 0.3s ease;
}

.list--dashlet .list__item:not(.partially-saved) a.list__item__text:hover .list__item__text__subtitle {
    color: var(--color--white);
    transition: all 0.3s ease;
}

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

.list--pipeline a {
    display: flex;
    align-items: center;
    border-top-width: .1rem;
    border-top-style: solid;
    border-top-color: var(--dividers--border--color);
    padding: var(--spacer--s) 0;
}

.list--pipeline .list__item__count {
    width: calc(var(--sizing--basis) * 9);
    margin-right: var(--spacer--m);
    text-align: right;
}

.list--pipeline .list__item__count__value {
    font-size: 3.2rem;
    color: var(--color--clickeable);
}

.list--pipeline .list__item__text {
    flex-grow: 1;
}

.list--pipeline .list__item__text__title {
    font-size: 1.4rem;
}

/*
    COMPONENTS/Navigation: Tabs (Inverting clickable colors - commented and ready to use)
*/

/*
.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+
*/

/*
    COMPONENTS/Navigation: Switcher: Aside (New)
*/

.switcher--aside .switcher__toggling__option {
    display: inline-block;
}

.switcher--aside .switcher__toggling__option:focus {
    outline: 0;
}

.switcher--aside .switcher__toggling__option:focus-visible {
    outline: 0.1rem dotted var(--color--clickeable);
}

.switcher__toggling__option__icon {
    display: inline-block;
    width: 2.4rem;
    height: 2.4rem;
    vertical-align: middle;
    background: var(--color--clickeable);
    mask-image: var(--button__icon--background--image);
    -webkit-mask-image: var(--button__icon--background--image);
    mask-size: contain;
    -webkit-mask-size: contain;
}

.switcher.switcher--aside .switcher__toggling__option--active .switcher__toggling__option__icon {
    background: var(--color--black);
    cursor: default;
}

.aside .list__item__text__title {
    text-decoration: underline;
}

/*
    COMPONENTS/Navigation: Switcher: Table/Cards (Button reset)
*/

.switcher--table .switcher__toggling__option {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/*
    COMPONENTS/Navigation: Switcher: As icons (Inverting clickable colors - commented and ready to use)
*/

/*
.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+
*/

/*
    WIDGETS/New requisition from scratch (New)
*/

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .article--from-scratch {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .article--from-scratch .article__content {
        flex-grow: 1;
    }

}

/*
    WIDGETS/Reports (New)
*/

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

    .article--report .article__header {
        flex-wrap: wrap;
    }

    .article--report .article__header__text {
        width: 100%
    }

    .article--report .article__header__actions {
        margin-top: var(--spacer--s);
        width: 100%
    }

    .article--report .article__header__actions .switcher {
        display: none;
    }

    .article--report .article__header + .article__content {
        margin-top: var(--spacer--s2);
    }

    .article--report .article__content__graphic {
        display: none;
    }

}

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .article--report .article__header {
        align-items: baseline;
    }

    .article--report .article__header__text {
        flex-grow: initial;
        white-space: nowrap;
    }

    .article--report .article__header__actions {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        flex-grow: 1;
        margin-left: var(--spacer--m);
    }

    .article--report .article__header__actions .switcher__pointing {
        font-size: 120%;
    }

    .article--report .article__content__table {
        display: none;
    }

    .article--report .article__content__graphic .highcharts-container,
    .article--report .article__content__graphic .highcharts-container svg {
        max-width: 100%;
    }

    .section--dashboard .article__content__graphic {
        display: none;
    }

    .section--dashboard .article--report .article__content__table {
        display: block;
    }
}

/* Media query to target only tablet */
@media all and (min-width:751px) and (max-width:1024px) {
    .article--report.article--boxed {
        padding: var(--spacer--xl) var(--spacer--l) var(--spacer--l);
    }

    .article--report .article__header {
        padding-bottom: var(--spacer--m);
    }

}

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .article--report.article--boxed {
        padding: var(--spacer--xl) var(--spacer--xl) var(--spacer--l);
    }

    .article--report .article__header {
        margin-bottom: var(--spacer--l);
        border-bottom-width: .1rem;
        border-bottom-style: solid;
        border-bottom-color: var(--dividers--border--color);
        padding-bottom: var(--spacer--l);
    }

}

.article--report .table .sort__item__icon {
    display: none; /* Patch: We hide the sort via CSS, this should be done via flow */
}

/*
    WIDGETS/Stats (New)
*/

.article--stats.article--boxed {
    padding: var(--boxes--padding--outers) var(--boxes--padding--outers);
}

.article--stats .article__header__count {
    font-size: 5.8rem;
    font-weight: 300;
}

.section__content.section__content--stats .article__header__count {
    display: flex;
    justify-content: center;
}

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

    .article--stats .article__header__text {
        margin-top: var(--spacer--xs);
    }

}

/* Media query to target only tablet */
@media all and (min-width:751px) and (max-width:1024px) {
    .article--stats .article__header {
        flex-direction: row;
    }

    .article--stats .article__header__count {
        margin-right: var(--spacer--s);
    }

}

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

    .article--stats .article__header__text {
        margin-top: var(--spacer--xs);
    }

}

/*
    MODULES/Blind
*/

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .grid.grid--1 .extra-panel .button-bar--cols-1 {
        --button-bar__buttons--width: auto;
    }

    .grid.grid--1 .extra-panel .button-bar--cols-1.ButtonBarField [class*=Button] {
        min-width: var(--buttons--width--min);
    }

}

.extra-panel .article__content:nth-child(1) {
    margin-top: 0.1rem;
}

/* Banner */

.banner__wrapper .banner__text__title.title.title--banner {
    line-height: 1.5;
}

/* Modules/Footer */

.footer {
    height: 9rem;
    color: var(--color--white);
    background-color: var(--color--brand);
    align-content: center;
}

.footer__wrapper {
    padding-top: 0;
    padding-bottom: 0;
}

.footer .footer__wrapper .footer__content {
    justify-content: center;
}

.footer .footer__wrapper .footer__content .footer__links__item {
    color: var(--color--white);
    font-weight: 400;
    text-decoration-color: var(--color--white);
}

.footer .footer__links__divider {
    color: var(--color--white);
}

/*
    Modules/Menu
*/

.menu--visible .menu__item:hover > .menu__link {
    background-color: transparent;
}

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

.menu--visible .submenu__item[aria-current="page"] .submenu__text {
    color: var(--color--grey--darkest);
}

.menu__list.menu__list--separator-left {
    border-left-color: var(--color--white);
}

@media (min-width: 1050px) {
    .menu--visible .menu__item:hover.menu__item::after {
      content: "";
      position: absolute;
      width: 100%;
      height: .3rem;
      background-color: var(--color--white);
      top: 6.65rem;
    }
}

.menu--visible .menu__link[aria-haspopup="true"][aria-expanded="true"] {
    background-color: transparent;
}

/*
    Modules/Tables
*/

.table__wrap .table {
    border-collapse: collapse;
}

@media (min-width: 1024px) {
    .table__wrap .table tr,
    .table__wrap .table th,
    .table__wrap .table td {
        border: solid 0.1rem var(--color--grey--dark);
    }
}

.table--default thead tr th {
    background-color: var(--color--brand--sub-1);
    color: var(--color--white);
}

.table--default thead tr th:hover * {
    color: var(--color--white);
}

.table tr .link {
    font-weight: normal;
}

.table--default.table--people tbody tr>:first-child,
.table--default.table--people thead tr th:first-child {
    padding-left: 1.2rem;
}

.table--cards.table--people tbody tr td:nth-child(2) {
    padding-top: var(--spacer--s);
}

.table--cards.table--people tbody tr>:first-child,
.table--cards.table--people tbody tr td:nth-child(2) {
    padding-left: 1.6rem;
}

.table--default.table--fixed-column.table--fixed-column--first tbody tr>:first-child:before {
    outline: .1rem solid var(--color--grey--dark);
}

.section__header__tabs .tabs__list__item {
    text-transform: none;
}

.banner__text__subtitle {
    text-transform: initial;
    padding-bottom: var(--spacer--m);
    font-size: var(--font--size--01);
    font-weight: normal;
}

@media (min-width: 1024px) {
    .table--fixed__header thead {
        z-index: 2;
        position: relative;
        background-color: var(--color--black);
        position: sticky;
        top: 0;
    }

    .body--list__page .table__wrap {
        overflow-y: auto;
    }

    .body--list__page .table--jobs th.location {
        min-width: 20rem;
    }

    .body--list__page .table--jobs tr th:first-child {
        min-width: 17rem;
    }

    .body--list__page .table--people th.job__name {
        min-width: 27.5rem;
    }
}

@media (max-width: 1024px) {
    .table__wrap:has(.table--cards) {
        border: none;
    }
}

.article--detail--table .job--id {
    max-width: 7.5rem;
}

/* Linked people and linked jobs tables in detail pages */

.article--detail--table {
    margin-top: var(--spacer--l);
}

.section.js_views .article:last-child:not(.article--collapsible) {
    border-bottom: .1rem solid var(--dividers--border--color);
    padding-bottom: var(--spacer--l);
}

@media (min-width: 1024px) {
    .grid--column--desktop.grid--2--sidebar {
        flex-wrap: wrap;
    }

    .grid--column--desktop.grid--2--sidebar>.grid__item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/*
    Modules/Header
*/

/* Media query to target only mobile */
@media all and (max-width:1024px) {
    :root {
        --header--height--mobile: 5.6rem;
    }

    .header .header__wrapper {
        min-height: var(--header--height--mobile);
        height: var(--header--height--mobile);
    }

    .header .toggle {
        max-height:var(--header--height--mobile);
        min-height: var(--header--height--mobile);
    }

    .logo.logo--header {
        height: var(--header--height--mobile);
    }

    .body--header-fixed-on-scroll .body__content {
        padding-top: var(--header--height--mobile);
    }

    .menu--toggleable .toggle--menu:before {
        top: var(--header--height--mobile);
    }

    html[menu-type=toggleable][menu-panelFrom=right][menu-panelEffect=over] .menu__panel {
        top: var(--header--height--mobile);
        background-color: var(--color--white);
    }

    .menu__panel .menu__item[aria-current="page"] .menu__link {
        color: var(--color--grey--darkest);
    }

    .menu__panel {
        --toggle--font--color: var(--color--brand);
    }

    .menu__panel .menu__link[aria-expanded="true"] .menu__text,
    .menu__panel .menu__link .menu__text {
        color: var(--color--brand);
    }

    .submenu__link {
        color: var(--color--brand);
        background-color: transparent;
    }

    .submenu__item[aria-current="page"] .submenu__link,
    .submenu__item[aria-current="page"] .submenu__text {
        color: var(--color--grey--darkest);
        background-color: transparent;
    }

    .toggle.toggle--search.toggle--search .toggle__icon {
        color: var(--color--brand);
    }

    .toggle.toggle--search.toggle--search {
        background-color: transparent;
    }

    .toggle.toggle--search.toggle--search[aria-expanded="true"] {
        background-color: var(--color--grey--light);
    }
}

/*
    PAGETYPES/Dashboard: Wrapper (Override/complement)
*/

.body--dashboard .main__wrapper {
    padding-top: var(--spacer--l);
}

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

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .section--dashboard .section__header {
        flex-wrap: wrap;
    }

    .section--dashboard .section__header__text__title__welcome {
        display: block;
        font-size: 1.8rem;
        font-weight: 400;
    }

    .section--dashboard .section__header__text__title__user {
        display: block;
    }

    .section--dashboard .section__header__actions {
        margin-top: var(--spacer--m);
        width: 100%;
    }

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

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

    .section--dashboard .section__content--report {
        margin-right: calc(-1 * var(--grid--laterals));
        margin-left: calc(-1 * var(--grid--laterals));
        width: auto;
        background-color: var(--color--grey--lighter);
        padding-top: var(--spacer--l);
        padding-right: var(--grid--laterals);
        padding-bottom: var(--spacer--l);
        padding-left: var(--grid--laterals);
    }

    .section--dashboard .section__content + .section__content--stats {
        margin-top: calc(-1 * var(--spacer--l));
        margin-right: calc(-1 * var(--grid--laterals));
        margin-bottom: calc(-1 * var(--main--padding--bottom));
        margin-left: calc(-1 * var(--grid--laterals));
        width: auto;
        background-color: var(--color--grey--lighter);
        padding-top: var(--spacer--l);
        padding-right: var(--grid--laterals);
        padding-bottom: var(--spacer--l);
        padding-left: var(--grid--laterals);
    }

}

/*
    PAGETYPES/Detail: Section (Override/complement)
*/

.downloadAttachmentsForm .button--tertiary {
    padding-left: 0;
}

.downloadAttachmentsForm .button--tertiary:hover {
    padding-left: .1rem;
}

@media all and (min-width: 1024px) {
    .body--detail .grid__item.grid__item--main {
        max-width: 72%;
    }
    
    .body--detail .grid.grid--1 .grid__item.grid__item--main {
        max-width: 100%;
    }

    .body--detail .grid.grid--2 .grid__item.grid__item--main {
        max-width: 50%;
    }

    .body--detail .grid--2--sidebar--aside-right {
        justify-content: space-between;
    }

    .grid--column--desktop.grid--2--sidebar>.grid__item--main {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .grid--column--desktop .article--view-more--aside {
        background-color: var(--color--grey--lighter);
        padding: var(--spacer--l);
    }
}

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

    .section--dashboard .grid--3 > .grid__item {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .section--dashboard .section__content--stats .grid > .grid__item {
        flex: 0 0 100%;
        max-width: 100%;
    }

}

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .section--dashboard .section__header + .section__content {
        margin-top: var(--spacer--l);
    }

}

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

}

/*
    PAGETYPES/Login: Layout/Colors (Override/complement)
*/

.body--login .article__header {
    background-color: var(--color--brand);
}

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

/*
    UTILITIES/XXX
*/


/* Tabs */

.select2-container.select2-container--default .select2-dropdown {
    z-index: 3;
}