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

    ELEMENTS
    -------------------------------------------------------------------------
    Fields (Imitation of theme.tpt)
    External
      : Thumbnails (Imitation of theme.tpt)
    Dialog session
    Labels

    COMPONENTS
    -------------------------------------------------------------------------
    Bars
      : Buttons (Override/complement)
    Buttons

    WIDGETS
    -------------------------------------------------------------------------
    Dialog session (Override/components)

    MODULES
    -------------------------------------------------------------------------
    Banner
      : Main (Imitation of theme.tpt)
    Footer

    PAGETYPES
    -------------------------------------------------------------------------
    Resend Verification Email

    UTILITIES
    -------------------------------------------------------------------------
    Overrides (to match TBC styling)
========================================================================== */

/*
    LAYOUTS/XXX
*/

/*
    ELEMENTS/Customer Fonts
*/

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy-bold-webfont.woff2') format('woff2'),
         url('../fonts/gilroy-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy-regular-webfont.woff2') format('woff2'),
         url('../fonts/gilroy-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

/*
    ELEMENTS/External: Thumbnails (Imitation of theme.tpt)
*/

.FileField .photoPreviewUnselected:before {
    background-image: url('../images/icon--user.svg');
}

/* 
    ELEMENTS/Dialog session
*/

.ui-dialog button.ui-button.ui-dialog-titlebar-close .ui-button-icon {
    --button__icon--width: 1.26rem;
    --button__icon--height: 1.26rem;

    display: block;
}

/* 
    ELEMENTS/Labels
*/

.tc_formLabel {
    font-family: var(--t-gs--font--family--emphasis);
    
}


/*
    ELEMENTS/Fields (Imitation of theme.tpt)
*/

:root {
    --t-tc--fields__icon--caret--down: url('../images/icon--caret--down.svg');
    --t-tc--fields__icon--caret--down--disabled: url('../images/icon--caret--disabled.svg');
    --t-tc--fields__icon--caret--up: url('../images/icon--caret--up.svg');
    --t-tc--fields__icon--icon--clear: url('../images/icon--caret--clear.svg');
}

.form select:not([multiple]),
.body--ismobile.body--Safari .form input[type="date"],
.body--ismobile.body--Safari .form input[type="month"],
.select2-container--default .select2-selection--multiple .select2-search:first-child:after,
.select2-container--default .select2-selection--single .select2-selection__arrow,
.TimeInput {
    background-image: var(--t-tc--fields__icon--caret--down);
}

.form select:not([multiple]):disabled,
.body--ismobile.body--Safari .form input[type="date"]:disabled,
.body--ismobile.body--Safari .form input[type="month"]:disabled {
    background-image: var(--t-tc--fields__icon--caret--disabled);
}

.select2-container--default.select2-container--open .select2-selection--multiple .select2-search:first-child:after,
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
    background-image: var(--t-tc--fields__icon--caret--up);
}

.select2-container--default .select2-selection--multiple .select2-selection__clear,
.select2-container--default .select2-selection--single .select2-selection__clear {
    background-image: var(--t-tc--fields__icon--caret--clear);
}

/*
    COMPONENTS/Bars: Buttons (Override/complement)
*/

/* the Button bar in theme wizards (the one with has that random .greyButtonBar class) is missing the <div class="button-bar__wrap"></div> within it - while we ask for it, we need to patch a little */
.button-bar.greyButtonBar {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--t-tc--button-bar--cols--gap);
    row-gap: var(--t-tc--button-bar--rows--gap);
    padding-block-start: var(--t-gs--space--s);
}

.button-bar.greyButtonBar > * {
    flex-basis: var(--t-tc--button-bar__buttons--width);
}

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .body--Safari .button-bar.greyButtonBar > * + * {
        margin-inline-start: var(--t-tc--button-bar--cols--gap);
    }

}

/* 
    COMPONENTS/Buttons (Override/complement)
*/

:where(button),
.button {

    &:focus {
        --t-tc--focus--outline--style: dotted;
        --t-tc--focus--outline--color: var(--t-gs--swatch--neutral--000);
    }

    &:focus-visible {
        --t-tc--focus-visible--outline--style: solid;
        --t-tc--focus-visible--outline--color: var(--t-gs--swatch--neutral--000);
        --t-tc--focus-visible--outline--width: var(--t-gs--border--width--m);
    }
}

/*
    COMPONENTS/Fields (Override/complement)
*/

:where(input, select, textarea) {

    &:focus {
        --t-tc--focus--outline--style: solid;
        --t-tc--focus--outline--color: var(--t-gs--swatch--neutral--000);
        --t-tc--focus--outline--width: var(--t-gs--border--width--m);
        --t-tc--fields--border--color: var(--t-gs--swatch--neutral--transparent);
    }
    
    &:focus-visible {
        --t-tc--focus-visible--outline--style: solid;
        --t-tc--focus-visible--outline--color: var(--t-gs--swatch--neutral--000);
        --t-tc--focus-visible--outline--width: var(--t-gs--border--width--m);
        --t-tc--fields--border--color: var(--t-gs--swatch--neutral--transparent);
    }
}

.select2-container--default.select2-container--focus .select2-selection--multiple, 
.select2-container--default.select2-container--open .select2-selection--multiple, 
.select2-container--default.select2-container--focus .select2-selection--single, 
.select2-container--default.select2-container--open .select2-selection--single {
    --t-tc--fields--border--width: var(--t-gs--border--width--m);
    border: unset;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    font-size: var(--t-gs--font--size--03);
    border-radius: var(--t-gs--border--radius--s);
    padding-block: var(--t-gs--space--xs);
    padding-inline: var(--t-gs--space--s);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    font-weight: var(--t-gs--font--weight--regular);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(236, 236, 236, 1);
    color: var(--t-tc--swatch--neutral--000);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(230, 230, 230, 1);
}

/*
    WIDGETS/Dialog session (Override/components)
*/

.session-dialog .session-button:focus {
    outline-width: var(--t-tc--focus--outline--width);
    outline-style: var(--t-tc--focus--outline--style);
    outline-color: var(--t-tc--focus--outline--color);
    outline-offset: 0;
}

.session-dialog .session-button:focus-visible {
    --t-tc--focus-visible--outline--width: var(--t-gs--border--width--m);
    --t-tc--focus-visible--outline--style: solid;
    --t-tc--focus-visible--outline--color: var(--t-gs--swatch--neutral--000);

    outline-width: var(--t-tc--focus-visible--outline--width);
    outline-style: var(--t-tc--focus-visible--outline--style);
    outline-color: var(--t-tc--focus-visible--outline--color);
}

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

.banner--main {
    background-image: url('../images/banner--desktop.png');
}

/* Media query to target only tablet */
@media all and (min-width:751px) and (max-width:1024px) {
    .banner--main {
        background-image: url('../images/banner--tablet.png');
    }

}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .banner--main {
        background-image: url('../images/banner--mobile.png');
    }

}

/* Media query to target only large desktop */
@media all and (min-width:1441px) {
    .banner--main {
        background-image: url('../images/banner--large-desktop.png');
    }

}

/* 
    MODULES/Footer
*/

.footer {
    border-block-start: var(--t-gs--border--width--0);
}

.footer__content,
.footer__links .link {
    font-size: var(--t-gs--font--size--03);
}

.footer__links .link {
    font-weight: var(--t-gs--font--weight--regular);
    color: var(--t-gs--color--text--default);

    &:hover {
        text-decoration-color: var(--t-gs--swatch--neutral--transparent);
        color: var(--t-gs--color--text--default);
    }

    &:active,
    &:focus {
        text-decoration-color: var(--t-gs--swatch--link);
        color: var(--t-gs--swatch--link);
        outline: .1rem dotted var(--t-gs--swatch--link);
    }

    &:focus-visible {
        text-decoration-color: var(--t-gs--swatch--neutral--transparent);
        outline: .1rem dotted var(--t-gs--swatch--link);
        color: var(--t-gs--swatch--link);
    }
        
}

.footer__links .link:hover {
    text-decoration-color: var(--t-gs--swatch--neutral--transparent);
    color: var(--t-gs--color--text--default);
}

.footer__social__item {
    block-size: auto;
    max-inline-size: fit-content;
}

.footer__social__item+.footer__social__item {
    margin-inline-start: var(--t-gs--space--m2);
}

/*
    PAGETYPES/Resend Verification Email
*/

.form--resendVerificationEmail p {
    padding-bottom: var(--t-gs--space--s);
}

.form--resendVerificationEmail .topSpace {
    margin-top: var(--t-gs--space--m);
}

.form--resendVerificationEmail button[type="submit"] {
    --t-tc--buttons--background--color: var(--t-gs--color--fill--primary);
    --t-tc--buttons--border--color: var(--t-gs--color--border--on--fill--primary);
    --t-tc--buttons--font--color: var(--t-gs--color--text--on--fill--primary);

    margin: unset;
    border-radius: var(--t-tc--buttons--border--radius);
    border-width: var(--t-tc--buttons--border--width);
    border-style: solid;
    border-color: var(--t-tc--buttons--border--color);
    block-size: auto;
    inline-size: auto;
    min-block-size: var(--t-tc--buttons--height);
    background-color: var(--t-tc--buttons--background--color);
    background-image: unset;
    font-family: var(--t-tc--buttons--font--family);
    font-size: var(--t-tc--buttons--font--size);
    line-height: calc(var(--t-tc--buttons--height) - (var(--t-tc--buttons--padding--v) * 2));
    font-weight: var(--t-gs--font--weight--bold);
    text-transform: initial;
    text-align: center;
    vertical-align: baseline;
    color: var(--t-tc--buttons--font--color);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    padding-block-start: calc(var(--t-tc--buttons--padding--v) - var(--t-tc--buttons--border--width));
    padding-block-end: calc(var(--t-tc--buttons--padding--v) - var(--t-tc--buttons--border--width));
    padding-inline-start: calc(var(--t-tc--buttons--padding--h) - var(--t-tc--buttons--border--width));
    padding-inline-end: calc(var(--t-tc--buttons--padding--h) - var(--t-tc--buttons--border--width));
    font-style: normal;
    text-decoration: none;
    display: inline-flex;

    &:hover,
    &:active {
        --t-tc--buttons--border--color: var(--t-gs--color--border--on--fill--primary--hover);
        --t-tc--buttons--background--color: var(--t-gs--color--fill--primary--hover);
        --t-tc--buttons--font--color: var(--t-gs--color--text--on--fill--primary--hover);
    }
}

/*
    UTILITIES/Overrides (to match TBC styling)
*/

/* General */
[tabindex]:not([data-legacycontrol],
[tabindex="-1"],
[data-globalfocusindicator="inner"],
[data-globalfocusindicator="none"]):focus-visible {
    box-shadow: unset;
}

[tabindex][data-globalfocusindicator="inner"]:not([tabindex="-1"]):focus-visible {
    box-shadow: unset;
}

/* Container */
.FormCompletionRequestBlockContainer {
    inline-size: initial;
    padding: initial;
}

.FormCompletionRequestBlockContent {
    border: initial;
    padding: initial;
    background-color: initial;
}

/* Form Header */
.form_PLUG_FormView_Header .HeaderBorderLineBottom {
    border-block-start: initial;
    margin-block-start: initial;
    margin-block-end: initial;
}

.form .FormCompletionRequestFormTitle {
    margin-block-end: var(--t-gs--space--0);
    font-weight: var(--t-tc--labels--font--weight);
}

/* Field labels */
.schema_field_location_LocationInput_Title,
.locationui_CountryStateEditor_Title,
.country_PLUG_Selector_label{
    margin: var(--t-gs--space--0);
}

/* Field descriptions */
.form_PLUG_FormView_Header .description,
.schema_field_MultipleDatasetEntryInput .FormField .FieldBorderDescription,
.schema_field_MultipleDatasetEntryInput .description,
.FieldBorderDescription {
    margin: initial;
    color: initial;
}

/* Fields */
:where([data-legacycontrol]) {
    font-family: var(--t-tc--fields--font--family);
    font-size: var(--t-tc--fields--font--size);
    color: var(--t-tc--fields--font--color);
}

/* Select */
.uicore_advancedselect_AdvancedSelect_Content {
    padding: var(--t-gs--space--0);
}

.uicore_advancedselect_BaseAdvancedSelect_AdvancedSelectDownArrow:hover .uicore_advancedselect_BaseAdvancedSelect_AdvancedSelectDownArrowImage {
    block-size: inherit;
}

.AdvancedSelect, .source_PLUG_EditorAdvancedSelect {
    display: block;
    border-width: inherit;
    inline-size: auto;
    font-size: initial;
}

.AdvancedSelect .TIN_input_live_DownArrow_Image {
    background-image: var(--t-tc--fields__icon--caret--down);
    background-position: right calc(-1 * var(--t-tc--fields--border--width)) center;
}

.TIN_input_live_DownArrow:hover .TIN_input_live_DownArrow_Image {
    background-position: right calc(-1 * var(--t-tc--fields--border--width)) center;
}

/* Radiobutton and Checkbox */
.ICO_components_input_CheckboxList .checkboxList .labeledCheckbox .TIN_display_Label,
.ICO_components_input_RadioButtonList .ICO_components_input_RadioButtonGroup_RadioButtonGroupLabel {
    font-weight: initial;
}

.ICO_components_input_CheckboxList .checkboxList .TIN_display_Button {
    font-family: inherit;
    font-size: var(--t-gs--font--size--default);
}

.ICO_components_input_CheckboxList .checkboxList .TIN_display_Button:focus {
    box-shadow: inset 0 0 0 0.2rem var(--t-gs--color--text--link), 0 0 0 0.2rem var(--t-gs--color--surface--overlay--light);
}

.checkboxList .labeledCheckbox {
    margin-block-end: var(--t-gs--space--0);
}

.RadioButtonList .RadioButton {
    align-items: center;
}

/* Date Picker */

.TIN_input_date_Picker {
    font-size: 1.2rem;    
}

/* Input Date */
.TIN_input_date_Input {
    inline-size: auto;
    display: block;
}

.TIN_input_date_Input .InputIcon {
    inset-inline-end: 1rem;
    inset-block-start: 0.5rem;
}

.TIN_input_date_BottomToolbar_SingleButton .TIN_input_date_BottomToolbar_Button {
    display: initial;
}

/* Input File */
.ICO_harp_upload_Attacher,
.ICO_harp_upload_Attacher_InputWrapper,
.ICO_harp_upload_Attacher_Input {
    display:block
}

.schema_field_file_FileAttacher_warningContainer {
    margin-block-start: var(--t-gs--space--0);
}

/* Input Textarea */
.FieldBorder .MultiLineText textarea {
    inline-size: 100%;
}

/* Input Numeric */
.schema_input_NumericWithDisplayFormat {
    position: relative
}

/* Input Currency */
.schema_field_input_Currency_Currency {
    position: relative;
}

.schema_field_input_Currency_Currency > label {
    position: absolute;
    inset-block-start: 1rem;
}

/* Input Percent */
.schema_field_input_Number_PercentLabel {
    position: absolute;
    inset-block-start: 1rem;
}

.form .schema_input_NumericWithDisplayFormat input:has(+ .schema_field_input_Number_PercentLabel:not(.schema_field_input_Number_percentInvisible)) {
    float: inline-end;
    inline-size: calc(100% - var(--t-gs--space--l));
    text-align: left;
}

.schema_input_NumericWithDisplayFormat:has(.schema_field_input_Number_PercentLabel:not(.schema_field_input_Number_percentInvisible)):before,
.schema_input_NumericWithDisplayFormat:has(.schema_field_input_Number_PercentLabel:not(.schema_field_input_Number_percentInvisible)):after {
    content: ""; /* Line 1/3 for a clearfix workaround for when we can't access the HTML to add a .clearfix class */
    display: table; /* Line 2/3 for a clearfix workaround for when we can't access the HTML to add a .clearfix class */
}

.schema_input_NumericWithDisplayFormat:has(.schema_field_input_Number_PercentLabel:not(.schema_field_input_Number_percentInvisible)):after {
    clear: both; /* Line 3/3 for a clearfix workaround for when we can't access the HTML to add a .clearfix class */
}

/* Input Encrypted */
.schema_viewer_Encrypted_Icon {
    position: absolute;
    inset-inline-end: 0.7rem;
    inset-block-start: 1rem;
}

/* Input Range */
.schema_PLUG_input_rangeslider_Range_inlineContainer {
    display: block;
}

.schema_PLUG_input_rangeslider_Range_percentLabel {
    padding-block-start: 1rem
}

/* Input Custom */
.LiveSearch:hover,
.TIN_input_WrappedSelect_NotMultiple:hover,
.TIN_input_WrappedSelect_NotMultiple:focus,
.htmleditor_EditorWithToolbar_EditorWithToolbar.htmleditor_EditorWithToolbar_EditorWithToolbarFocused {
    border-width: var(--t-tc--fields--border--width);
    border-style: solid;
    border-color: var(--t-tc--fields--border--color);
}

.uicore_advancedselect_MultipleSelect .AdvancedSelectInput,
.uicore_advancedselect_AdvancedSelect .AdvancedSelectInput {
    --t-tc--fields--padding--v: var(--t-gs--space--s);
    --t-tc--fields--padding--h: .6rem;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    position: static;
    block-size: 100%;
    padding-block-start: calc(var(--t-tc--fields--padding--v) - var(--t-tc--fields--border--width));
    padding-inline-end: calc(var(--t-tc--fields--padding--h) - var(--t-tc--fields--border--width) + var(--t-tc--fields__icon--width));
    padding-block-end: calc(var(--t-tc--fields--padding--v) - var(--t-tc--fields--border--width));
    padding-inline-start: calc(var(--t-tc--fields--padding--h) - var(--t-tc--fields--border--width));
    line-height: calc(var(--t-tc--fields--height) - (var(--t-tc--fields--padding--v) * 2));
    color: inherit
}

.AdvancedSelect:hover .AdvancedSelectInput {
    border-width: var(--t-tc--fields--border--width);
    border-style: solid;
    border-color: var(--t-tc--fields--border--color);
}

.AdvancedSelectValueContainer {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
}

.uicore_advancedselect_SelectedItem {
    margin: unset;
}

.AdvancedSelectInput .AdvancedSelectInputElement,
.AdvancedSelectInput .AdvancedSelectInputElement:focus {
    display: inline-block;
    margin-block-start: var(--t-gs--space--0);
    max-inline-size: 100%;
    block-size: calc(var(--t-tc--fields--height) - (var(--t-tc--fields--padding--v) * 2));
    padding-block: 0 !important;
    padding-inline: var(--t-tc--fields--padding--h) !important;
    font-family: inherit;
    font-size: inherit;
    line-height: calc(var(--t-tc--fields--height) - (var(--t-tc--fields--padding--v) * 2));
    font-weight: inherit;
    font-style: inherit;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: unset;
}

.LiveSearchInput {
    display: block;
    margin-block-start: var(--t-gs--space--0);
    max-inline-size: 100%;
    block-size: calc(var(--t-tc--fields--height) - (var(--t-tc--fields--padding--v) * 2));
    padding-block: var(--t-gs--space--0);
    padding-inline: var(--t-gs--space--0);
    font-family: inherit;
    font-size: inherit;
    line-height: calc(var(--t-tc--fields--height) - (var(--t-tc--fields--padding--v) * 2));
    font-weight: inherit;
    font-style: inherit;
    color: inherit;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: unset;
}

.FormCompletionRequestBlockContent input {
    background-color: unset;
}

/* Button Clear */
.schema_PLUG_input_rangeslider_Range_buttonClear {
    padding-block-start: 1rem;
    padding-block-end: 1rem;
}

/* Country State Table */
.locationui_CountryStateEditor_CountryStateTable {
    inline-size: 100%;
}

.locationui_CountryStateEditor .country_PLUG_Selector {
    margin-block-end: initial;
}

.schema_field_location_SubFieldInput_Row {
    margin-block-start: var(--t-tc--fieldSpec--padding--outers);
}

/* Table Add another */
.FormField .schema_field_MultipleDatasetEntryInput .RowEditorRow > td,
.FormField .schema_field_MultipleDatasetEntryInput,
.FormField .schema_field_MultipleDatasetEntryInput .RowEditorTable {
    border: initial;
}

.FormField .schema_field_MultipleDatasetEntryInput .RowEditorChildContainer {
    padding: var(--t-gs--space--0);
}

.FormField .schema_field_MultipleDatasetEntryInput:has(tbody:empty) {
    padding-block: var(--t-gs--space--xs);
}

/* Button Add another */
.FormField .schema_field_MultipleDatasetEntryInput .RowEditorAddAnotherLink {
    position: relative;
    padding-inline-start: 3rem;
}

.FormField .schema_field_MultipleDatasetEntryInput .RowEditorAddAnotherLink::before {
    inset-block-start: 1rem;
    inset-inline-start: 0.5rem;
}

/* Error Message */
.TIN_form_FormField_errorMsg {
    color: inherit;
    display: block;
    font-style: inherit;
}
.errorMsgRight, .errorMsgBottom {
    background-image: none;
    background-repeat: initial;
    background-size: initial;
    padding-inline-start: initial;
    line-height: inherit;
}

/* Text Center */
.text-center {
    text-align: center;
}