/* ==========================================================================
   SPECIFICS
   --------------------------------------------------------------------------
   * STRUCTURE
      : XXX

   * FONTS

   * ELEMENTS
      : Actions (Override/complement)
      : Fields (Override/complement)
      : Thumbnails
         : FileField (Override/complement)
      : Buttons
         : Iconographics (Override/complement)

   * COMPONENTS
      : Logo  (Override/complement)
      : Button bar (Override/complement)
      : Expired session (Override/complement)
      : Forms (Override/complement)

   * MODULES
      : Header (Override/complement)
      : Banner (Override/complement)
      : Main Content (Override/complement)
      : Footer (Override/complement)

   * PAGETYPES
      : Success (Override/complement)
      : Error (Override/complement)

   * UTILITIES
      : XXX

   ========================================================================== */

/* STRUCTURE: XXX
   -------------------------------------------------------------------------- */

/* FONTS
   -------------------------------------------------------------------------- */

   @font-face {
    font-family: "ProximaNova";
    src:
        url("../fonts/proximanova-light.otf") format("opentype");
    font-weight: 300;
}

@font-face {
    font-family: "ProximaNova";
    src:
        url("../fonts/proximanova-regular.otf") format("opentype");
    font-weight: 400;
}

@font-face {
    font-family: "ProximaNova";
    src:
        url("../fonts/proximanova-bold.otf") format("opentype");
    font-weight: 700;
}

/* ELEMENTS: Actions (Override/complement)
   -------------------------------------------------------------------------- */

.addDatasetRow,
.action--add {
    --action__icon--background--image: url('../images/icon--add.svg');
}

.removeDatasetRow,
.removeFile,
[id*="dropboxRemove_"],
.fileInputCancelButton,
.action--remove {
    --action__icon--background--image: url('../images/icon--remove.svg');
}

/* to de deleted after we migrate to typographic icons (this is here and not in core.css due to a FF bug) */
.action:before,
.addDatasetRow:before,
.removeDatasetRow:before,
.removeFile:before,
[id*="dropboxRemove_"]:before,
.fileInputCancelButton:before {
    mask-image: var(--action__icon--background--image);
    -webkit-mask-image: var(--action__icon--background--image);
}

/* ELEMENTS: Fields (Override/complement)
   -------------------------------------------------------------------------- */

.form select:not([multiple]),
.body--ismobile.body--Safari .form input[type="date"],
.body--ismobile.body--Safari .form input[type="month"] {
    background-image: url('../images/icon--caret--down.svg');
}

.select2-container--default .select2-selection--multiple .select2-search:first-child:after,
.select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image: url('../images/icon--caret--down.svg');
}

.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: url('../images/icon--caret--down--disabled.svg');
}

.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: url('../images/icon--caret--up.svg');
}

.select2-container--default .select2-selection--multiple .select2-selection__clear,
.select2-container--default .select2-selection--single .select2-selection__clear {
    background-image: url('../images/icon--clear.svg');
}

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

.select2-container--default .select2-selection--multiple .select2-selection__choice{
    --color--clickeable: var(--color--red);
}

.AcceptanceCheckboxField .tc_formDescription{
    font-size: var(--font--size--00);
}

.form .tc_formButton{
    text-transform: capitalize;
}

/* ELEMENTS: Thumbnails: FileField (Override/complement)
   -------------------------------------------------------------------------- */

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

/* ELEMENTS: Buttons: Iconographics (Override/complement)
   -------------------------------------------------------------------------- */

.ui-button.ui-dialog-titlebar-close {
    --button__icon--background--image: url({{ img('iconClose', PORTAL_BASE_REAL_URL ~ '/images/close.svg').getUrl() }});
}

/* COMPONENTS: Button bar (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(--button-bar--cols--gap);
    row-gap: var(--button-bar--rows--gap);
    padding-top: var(--spacer--s);
}

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

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

}

/* COMPONENTS: Forms (Override/complement)
   -------------------------------------------------------------------------- */

.AcceptCheckboxFieldContainer{
    display: flex;
    align-items: flex-start;
}

.AcceptCheckboxFieldContainer .tc_formSublabel div{
    display: inline;
}

.AcceptCheckboxFieldContainer input{
    order: -1;
    margin-right: 0.8rem;
}

.button-bar .saveButton:active{
    outline: none;
}

@media all and (max-width: 750px){
    .button-bar .saveButton{
        width: 100%;
    }
}

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

.body--header-fixed-on-scroll .header--scrolling{
    box-shadow: unset;
}

@media all and (max-width: 750px){
    .header{
        height: 8.2rem;
    }

    .header__wrapper{
        height: 100%;
    }
}

/* COMPONENTS: Logo (Override/complement)
   -------------------------------------------------------------------------- */

@media all and (max-width:750px) {
    
    .logo{
        max-width: 20rem;
    }

}

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

.banner__wrapper{
    position: relative;
    border-radius: 1rem;
}

.banner--main .banner__text{
    position: absolute;
    bottom: 0;    
    background-color: var(--color--white);
    padding: 5rem 4rem 0;
    border-radius: 1rem 1rem 0 0;
}

.banner--main .banner__text__title{
    font-weight: var(--font--weight--light);
    text-transform: uppercase;
}

@media all and (min-width: 1355px){
    .banner--main{
        left: var(--grid--laterals);
    }
}

@media all and (min-width: 1025px) and (max-width: 1354px){
    .banner--main{
        left: 0;
    }
}

@media all and (min-width: 1025px){

    .banner--main{
        right: var(--grid--laterals);
        margin-top: 1rem;
    }

    .banner--main .banner__text{
        left: 30%;
        transform: translate(-30%, 0);
        min-width: max-content;
        width: 75%;
    }
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .banner--main{
        margin-top: 2rem;
    }

    .banner--main .banner__text{
        left: 50%;
        transform: translate(-50%, 0);
        width: 90%;
        padding: 4rem 2.4rem 0;
        align-items: flex-end;
        display: flex;
    }

    .banner--main .banner__text__title{
        line-height: 1.2;
    }
}

/* MODULES: Main Content (Override/complement)
   -------------------------------------------------------------------------- */

.section__header__text .section__header__text__title,
.Separator legend{
    font-size: 4.5rem;
    font-weight: var(--font--weight--bold);
}

@media all and (min-width:1025px){
    .main__wrapper{
        padding-top: 6.5rem;
    }
}

@media all and (max-width: 750px){
    
    .main__wrapper{        
        padding-bottom: 4.8rem;
    }
    
    .section__header__text .section__header__text__title,
    .Separator legend{
        font-size: var(--font--size--09);
    }
}

/* MODULES: Footer (Override/complement)
   -------------------------------------------------------------------------- */

.footer{ 
    font-size: 1.4rem; 
    border-top: none;
}

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

.footer__social__item {
    height: 3.5rem;
    max-width: 3.5rem;
}

@media all and (min-width: 751px){
    .footer__wrapper{
        --footer--padding--top: 0;
        --footer--padding--bottom: 0;
    }

    .footer__content{
        height: 10.8rem;
    }
}

@media (max-width: 750px){

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

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

    .footer__rights{
        text-align: center;
    }
}

/* PAGETYPES: Success (Override/complement)
   -------------------------------------------------------------------------- */

.body--success .banner__text.banner__text--success{
    display: none;
}

.body--success .section{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
}

.body--success .section__header{
    display: flex;
    justify-content: center;
}

.body--success .section__header__image{
    margin: 0;
}

.body--success .section__content{
    margin-top: var(--spacer--m);
}

.body--success .avatureThankYouMessage h2{
    font-size: 2.2rem;
}

.body--success .home--link{
    margin: 3.3rem 0;
    text-align: left;
}

.body--success .home--link .link{
    background-image: url(../images/icon-arrow-back.svg);
    background-position: left center;
    background-size: 1.5rem;
    padding-left: 2rem;
}

@media all and (min-width: 1025px){
    .banner--main .banner__text.banner__text--success{
        min-width: unset;
        max-width: 90rem;
    }

    .body--success .section__content{
        width: 100%;
    }

    .body--success .section__content .article{
        display: flex;
        justify-content: center;
    }

    .body--success .section__content .avatureThankYouMessage{
        max-width: 90rem;
        text-align: left;
    }
}

@media all and (max-width: 750px){

    .body--success .banner--main{
        margin-top: 1.5rem;
    }

    .body--success .section__header{
        margin-top: 3.5rem;
    }
}

/* PAGETYPES: Error (Override/complement)
   -------------------------------------------------------------------------- */

.error--page h2{
    font-size: 4.5rem;
    font-weight: var(--font--weight--bold);
    margin-bottom: var(--spacer--m);
    text-align: center;
}

.error--page .errorMessage:not(.WizardFieldError){
    color: var(--color--error);
    padding-top: 0;
    justify-content: center;
    text-align: center;
}

@media all and (max-width: 1024px){
    .error--page h2{
        font-size: var(--font--size--09);
    }
}

/* UTILITIES: XXX
   -------------------------------------------------------------------------- */