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

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

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

   * MODULES
      : Banner (Override/complement)
   
   * PAGETYPES
      : XXX
   
   * UTILITIES
      : XXX

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

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

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

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

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

.removeDatasetRow {
    background-image: url('../images/icon--remove.svg');
}

.removeDatasetRow:hover {
    background-image: url('../images/icon--remove--hover.svg');
}

.removeFile {
    background-image: url('../images/icon--remove.svg');
}

.removeFile:hover {
    background-image: url('../images/icon--remove--hover.svg');
}

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

.[id*="dropboxRemove_"]:hover {
    background-image: url('../images/icon--remove--hover.svg');
}

.fileInputCancelButton {
    background-image: url('../images/icon--remove.svg');
}

.fileInputCancelButton:hover {
    background-image: url('../images/icon--remove--hover.svg');
}

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

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

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

/* 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: Expired session (Override/complement)
   -------------------------------------------------------------------------- */

.ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick {
    background-image: url('../images/close.svg');
}

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

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

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

}

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

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

.title {
    font-family: Helvetica;
    font-size: 2.6rem;
    color: #000;
}

.paragraph {
    font-family: Helvetica;
    font-size: 1.6rem;
    color: #333;
}

.greyButtonBar .saveButton {
    height: 4rem;
    width: 14rem;
}

/* FOOTER
   -------------------------------------------------------------------------- */
.footer__content--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    --grid--columns--gap: var(--spacer--xl);
    gap: var(--grid--columns--gap);
}

.footer__content--grid .button-bar a {
    width: auto;
}

@media (max-width: 750px) {
    .footer__content--grid {
        grid-template-columns: 1fr;
    }

    .greyButtonBar .saveButton {
        width: 100%;
    }

    .greyButtonBar .saveButton {
        width: 100%;
    }
}

.footer__grid__item--separator {
    --color--borders: var(--color--brand--sub-2);
    --separator-pad: var(--spacer--l);
}

.footer__social__item {
    height: 2.4rem;
    max-width: 2.4rem;
}
.footer__grid__item.footer__links--portal .link:not(:last-child) {
    margin-right: var(--spacer--m);
}

@media all and (min-width: 769px) {
    .footer__wrapper {
        --footer--padding--top: var(--spacer--xl);
        --footer--padding--bottom: var(--spacer--xl);
    }

    .footer__grid__item.footer__links--global {
        justify-self: start;
        align-content: end;
    }

    .footer__grid__item.footer__links--global .list__item+.list__item {
        margin-top: var(--spacer--m);
    }

    .footer__grid__item.footer__links--portal {
        justify-content: end;
        align-content: end;
        text-align: right;
    }

    .footer__social__item:hover {
        opacity: .7;
    }

    .footer__grid__item.footer__social {
        justify-self: end;
    }

    .footer__grid__item.footer__rights__copy {
        grid-column: 1 / -1;
    }
}

@media all and (max-width: 768px) {
    .footer__links {
        justify-content: flex-start;
    }
}

.footer__wrapper {
    font-size: 1.6rem;
}

@media (max-width: 1024px) {
    .footer__wrapper {
        font-size: 1.4rem;
    }
}

.footer .button--icon {
    background-color: #f7f7f7;
    color: #1b1534;
    margin-bottom: 0;
    width: 20rem;
    height: 5.7rem;
    border-radius: 2.85rem;
    float: none;
    font-size: 1.8rem;
    position: relative;
}

.footer {
    grid-area: footer;
}

.footer .button-bar a {
    white-space: nowrap;
    overflow: hidden;
    width: auto;
}

.footer__links__item.link {
    font-weight: normal;
}

.button-bar:not([class*=col]) .button:not(.button--medium):not(.button--small),
.button-bar:not([class*=col]) button,
.button-bar:not([class*=col]) input[type=submit] {
    min-width: 16rem;
}

.button--icon::before {
    content: '';
    display: inline-block;
    margin-right: 1rem;
    width: 2rem;
    height: 2rem;
    background-size: contain;
    background-position: center;
}

.button--icon::after {
    content: '';
    position: absolute;
    border: 0.2rem solid transparent;
    width: 0;
    height: 0;
    opacity: 0;
    border-radius: var(--buttons--border--radius);
    transition: all .5s;
    background-color: var(--color--font);
}

.button--icon:hover::after {
    border: 0.2rem solid var(--color--font);
    width: calc(100% - 0.6rem);
    height: 5.1rem;
    opacity: 1;
    background-color: transparent;
}

.button--icon-contact::before {
    background-image: url(../images/icon--mail.svg);
}

.footer .button-bar a {
    white-space: nowrap;
}

.button--icon {
    --buttons--height: 5.7rem;
    --buttons--border--radius: 2.85rem;
    font-size: var(--text--8);
}

[class*="--separator"] {
    border-top-width: .1rem;
    border-top-style: solid;
    border-top-color: var(--color--borders);
    padding-top: var(--separator-pad);
    margin-top: var(--separator-mrg);
}

.footer__grid__item.footer__rights__copy.footer__grid__item--separator p:first-of-type {
    padding-bottom: 2rem;
}