/* ==========================================================================
   SPECIFICS
   --------------------------------------------------------------------------
   * INVERTING CLICKABLE COLORS (commented and ready to use)
      : Nav

   * ELEMENTS
      : Logo (Override/complement)
      : Fields (Override/complement)
      : Actions (Override/complement)

   * COMPONENTS
      : Mobile menu (Override/complement)
      : Form item types
         : FileField/FileSchemaField (Override/complement)
      : Button bar (Override/complement)
      : Expired session (Override/complement)

   * MODULES
      : Banner (Override/complement)

    * SPECIFICS
        : Header
        : Banner
        : Footer
        : Grid
        : Aside
        : Buttons
        : Forms
        : Titles
        : Content
   ========================================================================== */


/* INVERTING CLICKABLE COLORS: Nav
   -------------------------------------------------------------------------- */

/*
.nav__item:not(.nav__item--active) .nav__item__link,
.nav__item:not(.nav__item--active) .nav__item__link:link,
.nav__item:not(.nav__item--active) .nav__item__link:visited {
    color: inherit;
}

.nav__item:not(.nav__item--active) .nav__item__link:hover {
    color: var(--color--clickeable);
}

.nav__item--active .nav__item__link,
.nav__item--active .nav__item__link:link,
.nav__item--active .nav__item__link:visited,
.nav__item--active .nav__item__link:hover,
.nav__item--active .nav__item__link:focus,
.nav__item--active .nav__item__link:active {
    color: var(--color--clickeable);
}

.subnav__item:not(.subnav__item--active) .subnav__item__link,
.subnav__item:not(.subnav__item--active) .subnav__item__link:link,
.subnav__item:not(.subnav__item--active) .subnav__item__link:visited,
.portalLanguages__item:not(.portalLanguages__item--selected) .portalLanguages__link,
.portalLanguages__item:not(.portalLanguages__item--selected) .portalLanguages__link:link,
.portalLanguages__item:not(.portalLanguages__item--selected) .portalLanguages__link:visited {
    color: inherit;
}

.subnav__item--active .subnav__item__link,
.subnav__item--active .subnav__item__link:link,
.subnav__item--active .subnav__item__link:visited,
.subnav__item--active .subnav__item__link:hover,
.subnav__item--active .subnav__item__link:focus,
.subnav__item--active .subnav__item__link:active,
.portalLanguages__item--selected .portalLanguages__link,
.portalLanguages__item--selected .portalLanguages__link:link,
.portalLanguages__item--selected .portalLanguages__link:visited,
.portalLanguages__item--selected .portalLanguages__link:hover,
.portalLanguages__item--selected .portalLanguages__link:focus,
.portalLanguages__item--selected .portalLanguages__link:active {
    color: var(--color--clickeable);
}

+TBD+
*/


/* ELEMENTS: Logo
   -------------------------------------------------------------------------- */

.logo--header {
    background-image: url('../images/logo--default.png');
}


/* ELEMENTS: Fields
   -------------------------------------------------------------------------- */

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


/* COMPONENTS: Actions
   -------------------------------------------------------------------------- */

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


/* COMPONENTS: Mobile menu
   -------------------------------------------------------------------------- */

a[class*="__trigger"] {
    background-image: url('../images/icon--menu.svg');
}


/* COMPONENTS: Form item types: FileField/FileSchemaField
   -------------------------------------------------------------------------- */

div[class*="fieldSpec"].FileField div[id*="fileInputContainer_"] .photoInputPreviewWrapper .photoInputPreviewContainer.photoPreviewUnselected {
    background-image: url('../images/icon--user.svg');
}


/* COMPONENTS: Button bar (Override/complement)
   -------------------------------------------------------------------------- */

/* portal gave us the .button-bar class but missed the <div class="button-bar__wrap"></div> within it - while we ask for it, we need to patch a little */
.form .button-bar {
    display: flex;
    margin-bottom: calc(-1 * var(--spacer--m));
}


/* COMPONENTS: Expired session
   -------------------------------------------------------------------------- */

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


/* MODULES: Banner
   -------------------------------------------------------------------------- */

/* .banner--main {
     background-image: url('../images/banner--main--desktop.svg'); 
     height: 41rem; 
} */

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

}*/

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

} */




/* SPECIFICS
   -------------------------------------------------------------------------- */


/* SPECIFICS: Header
   -------------------------------------------------------------------------- */

.nav__item:not(.nav__item--active) .nav__item__link,
.nav__item:not(.nav__item--active) .nav__item__link:link,
.nav__item:not(.nav__item--active) .nav__item__link:visited{
    font-weight: 400;
    color: var( --color--brand--sub-3);
}

/* SPECIFICS: Banner
   -------------------------------------------------------------------------- */

.banner--main{
    width: calc(var(--grid--laterals) + var(--content--w--full) + var(--grid--laterals));
}

@media (max-width: 1024px){
    .banner--main{
        width: 100%;
    }
}

/* SPECIFICS: Footer
   -------------------------------------------------------------------------- */
.footer {
    border: 0;
    width: calc(var(--grid--laterals) + var(--content--w--full) + var(--grid--laterals));
}
.footer__content{
    flex-direction: column;
}
.footer__links,
.footer__rights,
.footer__social {
    margin: 1rem 0;
}
.footer__links__item {
    font-weight: 400;
    font-size: 1.4rem;
}
.footer__rights {
    font-size: 1.1rem;
}
.footer__social__item {
    height: 2.4rem;
    max-width: 2.4rem;
}
.footer__social__item__icon {
    border-radius: 1rem;
}

 @media (max-width: 1024px) {
    .footer{
        width: 100%;
    }
} 
@media (max-width: 750px) {
    .footer__links{
        flex-direction: column;
    }
}


/* SPECIFICS: Grid
   -------------------------------------------------------------------------- */

.main__wrapper{
    padding: 0;
}

.main__wrapper .grid{
    margin: 0;
    width: 100%;
    justify-content: space-between;
}

.main__wrapper .grid .grid__item:not(.grid-aside){
    padding-right: var(--grid--laterals);
    padding-left: var(--grid--laterals);
}
.main__wrapper .grid>.grid__item{
    flex: 0 0 calc(100% - var(--aside--width));
    padding-left: 0;
    padding-top: var(--spacer--xxl);
}
.main__wrapper .grid__item + .grid__item{
    padding-left: var(--spacer--xxl);
}
@media (max-width: 750px){
    .main__wrapper .grid>.grid__item{
        flex: 0 0 calc(100%);
    }
}


/* SPECIFICS: Aside
   -------------------------------------------------------------------------- */

:root{
    --aside--width: 45rem;
}

@media (max-width: 750px){
    :root{
        --aside--width: 100%;
    }
}
.main__wrapper .grid > .grid__item.grid-aside {
    min-width: var(--aside--width);
    padding-top: 0;
}
.grid-aside .section__content{
    background-color: var(--color--brand--sub-3);
    padding: var(--spacer--xxxl) var(--spacer--l) var(--spacer--xxl);
    height: 100%;
}

@media (max-width: 750px){
    .main__wrapper .grid__item + .grid__item{
        padding-left: 0;
    }
}


/* SPECIFICS: Buttons
   -------------------------------------------------------------------------- */

.button,
.form [class$=Button],
.Section--no-toggle-separator.Section--collapsible--top .toggle{
    font-weight: 500;
    color: var(--color--brand--sub-1);
    font-size: 1.6rem;
    background-color: #f0f0f0;
    border: none;
    border-radius: 8rem;
    padding: 0 var(--spacer--xl) 0 var(--spacer--xl);
    min-height: 4rem;
    font-family: var(--font);
}

/* SPECIFICS: Forms
   -------------------------------------------------------------------------- */

.datasetfieldSpec textarea,
.datasetfieldSpec .MultipleSelectFormField{
    max-height: 10rem;
}
.grid-aside .section__content label,
.grid-aside .section__content a,
.grid-aside .section__content .description,
.grid-aside .section__content legend,
.grid-aside .section__content div[class*=fieldSpec] div[class*=description] a,
.grid-aside .section__content .labelRequiredIcon {
    color: #FFFFFF;
}
.grid-aside .section__content label{
    font-size: 1.8rem;
    font-weight: 400;
    margin-top: 2.5rem;
}
.grid-aside .section__content .removeDatasetRow,
.grid-aside .section__content .addDatasetRow{
    background-image: none;
    padding: 0;
    text-transform: unset;
    font-weight: 400;
    margin-top: -1rem;
    display: block;
    font-size: 1.5rem;
}
.multipleDatasetWrapper div[id*=multipleDatasetEntry_]{
    background-color: transparent;
    width: 100%;
    margin: 0;
    padding: 0;
}
.AcceptCheckboxField {
    padding-left: 0;
}
.AcceptCheckboxField .description+div{
    position: relative;
    padding-left: 2rem;
}

.Section--no-toggle-separator .no-toggle-separator {
    padding-right: 0;
}

.Section--no-toggle-separator legend {
    font-weight: 400;
    font-size: 1.8rem;
}
.Section--no-toggle-separator .Section__toggle{
    position: relative;
    justify-content: start;
}
.Section--no-toggle-separator.Section--collapsible--top .toggle__text{
    display: block;
}
.Section--no-toggle-separator.Section--collapsible--top .toggle__icon{
    display: none;
}

/* SPECIFICS: Titles
   -------------------------------------------------------------------------- */

.title.main-title {
    font-weight: 400;
    color: var(--color--brand);
    font-size: 3rem;
    line-height: normal;
    margin-bottom: 5rem;
}


/* SPECIFICS: Content
   -------------------------------------------------------------------------- */

.section__content h2 {
    font-size: 2.2rem;
    margin-bottom: 2rem;
    line-height: 3.6rem;
    color: var(--color--brand);
}
.section__content p {
    padding-bottom: 2.5rem;
}
.embed-container {
    margin: 2.5rem 0;
    min-height: 45rem;
}

/* SPECIFICS: Cookie Banner: Hide Settings Button 
   -------------------------------------------------------------------------- */

.cookiesButtonSettingsIcon {
    display: none;
}

/* SPECIFICS: Cookie Banner: Links States 
   -------------------------------------------------------------------------- */

.link--cookies {
    color: #2099c0;
}

/* SPECIFICS: Footer - Cookie Banner: Links States
   -------------------------------------------------------------------------- */
.footer__links__item.footer__links__item--button {
    background: transparent;
    font-family: var(--font);
    font-size: 1.4rem;
    font-weight: 400;
    border: none;
    padding: 0;
    margin: 0;
    border-bottom-width: .1rem;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    transition: all .3s ease;
}

.footer__links__item.footer__links__item--button:hover {
    border-bottom-color: inherit;
    cursor: pointer;
}