/* ==========================================================================
    LAYOUTS
    -------------------------------------------------------------------------
    Section (Override/complement)

    ELEMENTS
    -------------------------------------------------------------------------
    XXX

    COMPONENTS
    -------------------------------------------------------------------------
    XXX

    WIDGETS
    -------------------------------------------------------------------------
    Forms (Override/complement)
        : Boxed (New)

    MODULES
    -------------------------------------------------------------------------
    XXX

    PAGETYPES
    -------------------------------------------------------------------------
    XXX

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

/*
    LAYOUTS/Section (Override/complement)
*/

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

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

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

/*
    ELEMENTS/XXX
*/

/*
    COMPONENTS/XXX
*/

/*
    WIDGETS/Forms (Override/complement)
*/

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

/* Media query to target mobile and tablet */
@media all and (max-width:1024px) {
    .Separator > legend {
        font-size: 2.1rem;
    }
}

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .Separator > legend {
        font-size: 2.4rem;
    }
}

/*
    WIDGETS/Forms: Boxed (New)
*/

.form--boxed {
    box-shadow: 0 .4rem 1.6rem 0 var(--color--shadow);
    border-color: var(--color--grey--light);
    background-color: var(--color--white);
}

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

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .form--boxed {
        padding: var(--spacer--xl);
    }
}

/*
    ELEMENTS/Links
*/

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

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

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

.gotoButton {
    --buttons--border--color: var(--color--buttons);
    --buttons--background--color: var(--color--white);
    --buttons--font--color: var(--color--buttons);
}

.gotoButton:hover {
    --buttons--border--color: var(--color--buttons);
    --buttons--background--color: var(--color--white);
    --buttons--font--color: var(--color--buttons);
}

.gotoButton:focus,
.gotoButton:active {
    --buttons--outline--width: .2rem;
    --buttons--border--color: var(--color--black);
    --buttons--border--width: .2rem;
    --buttons--background--color: var(--color--buttons--sub-4);
    --buttons--font--color: var(--color--buttons);
}

.gotoButton.button--disabled,
.gotoButton:disabled {
    --buttons--border--color: var(--color--disabled--sub-1);
    --buttons--background--color: var(--color--disabled--sub-1);
    --buttons--font--color: var(--color--disabled);
}

/*
    MODULES/Header (Override/complement)
*/

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

.menu__link:after {
    font-size: var(--font--size--small);
    font-weight: var(--font--weight--bold);
    padding-top: 0.3rem;
}

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

/*
    PAGETYPES/Login
*/

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

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

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

/*
    MODULES/Footer
*/

.footer {
    border: 0;
}

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

/*
    COMPONENTS/Agents/Create
*/

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

/*
    COMPONENTS/Error/Success
*/

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

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

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

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

/*
    Calendar
*/

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a:not(.ui-state-active):after,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today span:not(.ui-state-active):after {
    border-color: var(--color--blue);
}

.datepicker-skin-scheduling .ui-datepicker th,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-calendar th,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
    font-size: var(--schedulerWidget__calendar__day--font--size);
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-calendar th span {
    background-color: var(--color--grey--light2);
}

.SchedulingField .schedulerWidget .results .availability,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-calendar th span {
    border-bottom: 0.1rem solid var(--color--grey--500);
}

.datepicker-skin-scheduling .ui-datepicker th,
.datepicker-skin-scheduling td .ui-state-default,
.SchedulingField .tc_formField .results .availability,
.SchedulingField .schedulerWidget .results .availability,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-calendar th,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-calendar th span,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-header .ui-datepicker-title,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-calendar td .ui-state-default,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable.ui-state-disabled,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable.ui-state-disabled span,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month.ui-datepicker-unselectable {
    color: var(--color--grey--darker);
}

.datepicker-skin-scheduling td .ui-state-default,
.SchedulingField .tc_formField .results .availability,
.SchedulingField .schedulerWidget .results .availability,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-calendar td .ui-state-default {
    font-size: var(--font--size--small);
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-calendar td.selectable-day a {
    text-decoration: none;
}

.SchedulingField .tc_formField .results .resultsList .resultItem:hover,
.SchedulingField .schedulerWidget .results .resultsList .resultItem:hover,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-calendar td.selectable-day a.ui-state-hover:not(a.ui-state-active) {
    background-color: var(--color--light--red);
}

.SchedulingField .tc_formField .results .resultsList .resultItem,
.SchedulingField .schedulerWidget .results .resultsList .resultItem {
    border-bottom-color: var(--color--grey--light2);
}

.SchedulingField .tc_formField .results .resultsList .resultItem:hover,
.SchedulingField .schedulerWidget .results .resultsList .resultItem:hover {
    color: inherit;
}

.SchedulingField .tc_formField .results .resultsList .resultItem .time,
.SchedulingField .schedulerWidget .results .resultsList .resultItem .time,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a:not(.ui-state-active),
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today span:not(.ui-state-active),
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a[aria-disabled=true],
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a[aria-disabled=true].ui-state-hover,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a[aria-disabled=true].ui-state-active {
    font-weight: var(--font--weight--regular);
}

.SchedulingField .tc_formField .results .noResults,
.SchedulingField .tc_formField .results .resultsList,
.SchedulingField .schedulerWidget .results .noResults,
.SchedulingField .schedulerWidget .results .resultsList {
    scrollbar-width: thin;
    scrollbar-color: var(--color--grey--500) var(--color--scrollbar);
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .SchedulingField .tc_formField .results .resultsList .resultItem.selected,
    .SchedulingField .schedulerWidget .results .resultsList .resultItem.selected {
        color: var(--color--white);
        background-color: var(--color--brand);
    }
}

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