/* ==========================================================================
   LIBRARY THEME (Version: 22.4)
   --------------------------------------------------------------------------
   * README

   * STRUCTURE
      : Spacing
      : Sizing
      : Grid system
      : Content widths

   * ELEMENTS
      : Typography
         : Titles
         : Default
         : Labels
         : Descriptions
      : Colors palette
      : Border radius
      : Border color
      : Thumbnails
      : Toggles
      : Dividers
      : Logo
      : Fields
      : Buttons
         : Primary
         : Secondary
         : Cancel
         : Tertiary
         : Registration/application
            : Customizables
         : Share

   * COMPONENTS
      : Nav
      : Mobile menu
      : Tables
      : Form item structures
         : fieldSpec
      : Boxes

   * MODULES
      : Header
      : Banner
      : Main
      : Footer

   * PAGETYPES
      : Blocking login
   ========================================================================== */

/* README
   --------------------------------------------------------------------------
   We manage from here the varabilized properties in the library for each element,
   component, module or pagetype. So these are the easily customizable parts for
   us, Studio sholud bear this in mind in our behalf. Any further styling, or
   overrides, should be placed in the Specifics stylesheet. You can use these
   variables wherever you want - or you can create new ones if it serves you.
   --------------------------------------------------------------------------
   We are trying a desktop-first approach, with tablet and mobile redefinitions
   if needed. This may be reconsidered in the future, depending on how it works.
   --------------------------------------------------------------------------
   Bear in mind many of these variables may be used in more than one place.
   -------------------------------------------------------------------------- */

/* STRUCTURE: Spacing
   --------------------------------------------------------------------------
   We use these variables for thoughtful margins and paddings. These are not
   meant to be edited; you can use them -as they are or combined with calc()-
   for any spacing you need to set.
   -------------------------------------------------------------------------- */

:root {
    --spacing--basis: .4rem;

        --spacer--xxs: calc(var(--spacing--basis) * .5);
        --spacer--xs: calc(var(--spacing--basis) * 1);
        --spacer--s: calc(var(--spacing--basis) * 2);
        --spacer--s2: calc(var(--spacing--basis) * 3); /* 1.2rem +doc+ */
        --spacer--m: calc(var(--spacing--basis) * 4); /* 1.6rem +doc+ */
        --spacer--l: calc(var(--spacing--basis) * 6); /* 2.4rem +doc+ */
        --spacer--xl: calc(var(--spacing--basis) * 8); /* 3.2rem +doc+ */
        --spacer--xxl: calc(var(--spacing--basis) * 10); /* 4.0rem +doc+ */
        --spacer--xxxl: calc(var(--spacing--basis) * 12); /* 4.8rem +doc+ */
}

/* STRUCTURE: Sizing
   --------------------------------------------------------------------------
   We use this variable to calc() widths and heights for things that are kind
   of grided. We don't have sub-variables like we do for spacings, as each use
   tends to be unique. We may discard this approach if it results impractical.
   -------------------------------------------------------------------------- */

:root {
    --sizing--basis: .4rem;
        /* ↳ if needed, change this one - all sizings using it will adjust proportionally */
}

/* STRUCTURE: Grid system
   --------------------------------------------------------------------------
   Check these values carefully with the mockup's grid. We use them to calc()
   some layouts below.
   -------------------------------------------------------------------------- */

:root {
    --grid--laterals: var(--spacer--xl);
        /* ↳ safe space between the mockup grid and the viewport sides - may or may not equal the column's gap */
        /* ↳ measurement really available only in mobile and tablet mockups - we assume the tablet value for desktop as well */
    --grid--width: 120.8rem;
    --grid--columns--amount: 16;
    --grid--columns--gap: var(--spacer--l);
    --grid--columns--1: calc((var(--grid--width) - (var(--grid--columns--amount) - 1) * var(--grid--columns--gap)) / var(--grid--columns--amount));
        /* ↳ beware we could hardcode this value straight from the mockup, but we calculate it instead, to keep it dynamic through other variables. */
}

/* Media query to target only tablet */
@media all and (min-width:751px) and (max-width:1024px) {
    :root {
        --grid--width: 70.6rem;
        --grid--columns--amount: 10;
    }

}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    :root {
        --grid--laterals: var(--spacer--m);
        --grid--width: 34.3rem;
        --grid--columns--amount: 4;
        --grid--columns--gap: var(--spacer--m);
    }

}

/* STRUCTURE: Content widths
   --------------------------------------------------------------------------
   Check these values carefully with the mockup measurements. Beware we could
   hardcode this values straight from the mockup, but we calculate them instead,
   to keep them dynamic through other variables.
   -------------------------------------------------------------------------- */

:root {
    --content--w--full: var(--grid--width);
        /* ↳ 16/16 mockup columns + gaps between */
        /* ↳ the site content's full width */
    --content--w--reduce: calc(.90 * var(--grid--columns--1) * var(--grid--columns--amount) + ((.90 * var(--grid--columns--amount)) - 1) * var(--grid--columns--gap));
    --content--w--narrow: calc(.75 * var(--grid--columns--1) * var(--grid--columns--amount) + ((.75 * var(--grid--columns--amount)) - 1) * var(--grid--columns--gap));
        /* ↳ 12/16 mockup columns + gaps between */
        /* ↳ to limit the site's content to a centered 75% of the available space */
    --content--w--narrower: calc(.5 * var(--grid--columns--1) * var(--grid--columns--amount) + ((.5 * var(--grid--columns--amount)) - 1) * var(--grid--columns--gap));
        /* ↳ 08/16 mockup columns + gaps between */
        /* ↳ to limit the site's content to a centered 50% of the available space */
    --content--w--narrowest: calc(.25 * var(--grid--columns--1) * var(--grid--columns--amount) + ((.25 * var(--grid--columns--amount)) - 1) * var(--grid--columns--gap));
        /* ↳ 04/16 mockup columns + gaps between */
        /* ↳ to limit the site's content to a centered 25% of the available space */
    --content--w--sidebar: calc(.27 * var(--grid--columns--1) * var(--grid--columns--amount) + ((.27 * var(--grid--columns--amount)) - 1) * var(--grid--columns--gap));
        /* ↳ 04/16 mockup columns + gaps between */
        /* ↳ to limit the sidebar grid column to a 25% of the available space */
    --content--w--subtabs: calc(.1875 * var(--grid--columns--1) * var(--grid--columns--amount) + ((.1875 * var(--grid--columns--amount)) - 1) * var(--grid--columns--gap));
        /* ↳ 03/16 mockup columns + gaps between */
        /* ↳ to limit the subtabs grid column to a 18.75% of the available space */
    --content--w--filters: calc(.1875 * var(--grid--columns--1) * var(--grid--columns--amount) + ((.1875 * var(--grid--columns--amount)) - 1) * var(--grid--columns--gap));
        /* ↳ 03/16 mockup columns + gaps between */
        /* ↳ to limit the filters grid column to a 18.75% of the available space */
}

/* Media query to target only tablet */
@media all and (min-width:751px) and (max-width:1024px) {
    :root {
        --content--w--narrow: var(--grid--width);
            /* ↳ the site content's width (ej: 10/10 columns + gaps between) */
        --content--w--narrower: calc(.8 * var(--grid--columns--1) * var(--grid--columns--amount) + ((.8 * var(--grid--columns--amount)) - 1) * var(--grid--columns--gap));
            /* ↳ 80% the site content's width (ej: 08/10 columns + gaps between) */
        --content--w--narrowest: calc(.5 * var(--grid--columns--1) * var(--grid--columns--amount) + ((.5 * var(--grid--columns--amount)) - 1) * var(--grid--columns--gap));
            /* ↳ 50% the site content's width (ej: 05/10 columns + gaps between) */
    }

}

/* ELEMENTS: Typography: Default
   --------------------------------------------------------------------------
   Check these values carefully with the mockup measurements.
   -------------------------------------------------------------------------- */

:root {
    --font: 'OpenSans';
       /* ↳ at the moment only system fonts from the font-family fallback are at use - set a custom one from here for everything in the site */
    --font--alt: 'OpenSans';
       /* ↳ if needed, set a value for this one - to begin, it will change the font for titles and buttons */
    --font--weight--bold: 700;
       /* ↳ depending on the font, the "bold" may be either the 500 or the 700 weight - change it everywhere from here */

    --font--size: 1.6rem;
       /* ↳ the .body font-size that almost everything inherits */
    --font--size--00: 1.4rem;
    --font--size--01: 1.6rem;
    --font--size--02: 1.8rem;
    --font--size--03: 2rem;
    --font--size--04: 2.2rem;
    --font--size--05: 2.4rem;
    --font--size--06: 2.6rem;
    --font--size--07: 2.8rem;
    --font--size--08: 3rem;
    --font--size--09: 3.2rem;
    --font--size--10: 3.6rem;
       /* ↳ font-sizes for Titles and in stylesheet #7 for font helper classes */
    --font--size--bigger: 120%;
       /* ↳ font-size for bigger texts */
    --font--size--smaller: 80%;
       /* ↳ font-size for smaller texts, used in the <small> tag */
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    :root{
        --font--size--04: 2rem;
        --font--size--05: 2.2rem;
        --font--size--06: 2.4rem;
        --font--size--07: 2.6rem;
        --font--size--08: 2.8rem;
        --font--size--09: 3rem;
        --font--size--10: 2.4rem;
    }
}

/* ELEMENTS: Typography: Titles
   --------------------------------------------------------------------------
   Check these values carefully with the mockup measurements.
   -------------------------------------------------------------------------- */
:root {
    --title--font: var(--font--alt);
    --title--font--size: var(--font--size);
    --title--font--weight: var(--font--weight--bold);
}

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

.title--01 {
    --title--font--size: var(--font--size--01);
}

.title--02 {
    --title--font--size: var(--font--size--02);
}

.title--03 {
    --title--font--size: var(--font--size--03);
}

.title--04 {
    --title--font--size: var(--font--size--04);
}

.title--05 {
    --title--font--size: var(--font--size--05);
}

.title--06 {
    --title--font--size: var(--font--size--06);
}

.title--07 {
    --title--font--size: var(--font--size--07);
}

.title--08 {
    --title--font--size: var(--font--size--08);
}

.title--09 {
    --title--font--size: var(--font--size--09);
}

.title--10 {
    --title--font--size: var(--font--size--10);
}

.title--banner {
    --title--font--size: var(--font--size--08);
}

.banner--scrolling .title--banner {
    --title--font--size: var(--font--size--07);
}

.title--tabs {
    --title--font--size: var(--font--size--04);
}

.Separator > legend {
    --title--font--size: var(--font--size--07);
}

.article--details.regular-fields-label--title .article__content__view__field__label,
.article--details .regular-field-label--title .article__content__view__field__label {
    --title--font--size: var(--font--size--07);
}

/* ELEMENTS: Typography: Labels
   --------------------------------------------------------------------------
   Check these values carefully with the mockup measurements.
   -------------------------------------------------------------------------- */

:root {
    --labels--font--size: 1.4rem;
    --labels--font--weight: var(--font--weight--bold);
    --labels--font--color: inherit;
}

/* ELEMENTS: Typography: Descriptions
   --------------------------------------------------------------------------
   Check these values carefully with the mockup measurements.
   -------------------------------------------------------------------------- */

:root {
    --descriptions--font--size: 1.4rem;
}

/* ELEMENTS: Colors palette
   --------------------------------------------------------------------------
   Check these values carefully with the mockup measurements.
   -------------------------------------------------------------------------- */

:root {
    --color--brand: #666666;
        --color--brand--sub-1: #E8E8E8;
        --color--brand--sub-2: #F9F9F9;
        --color--brand--sub-3: #E4F4EE;
        --color--brand--sub-4: #0d8390;
        --color--brand--sub-5: #64c5b4;
        --color--brand--sub-6: #005587;

        --color--white: #FFFFFF;
        --color--black: #000000;
        --color--gray: #cccccc;
        --color--gray-dark: #333333;

    --color--background: #FFFFFF;
    --color--font: #333333;
    --color--clickeable: #1063BA;
    --color--error: #DA3535;
    --color--shadow: rgba(102,102,102, .3);

    --color--borders: #cccccc;

    --color--disabled: #A5A5A5;
        --color--disabled--sub-1: #E8E8E8;
        --color--disabled--sub-2: #F9F9F9;

    --color--matching--strong: #005587;
    --color--matching--great: #0c6d72;
    --color--matching--good: #65c5b4;

}

.header {
    --color--background: #000000;
    --color--font: #ffffff;
    --color--clickeable: #ffffff;
}

.banner {
    --color--background: #FFFFFF;
    --color--font: #000000;
    --color--clickeable: #1063BA;
}

.main {
    --color--background: #FFFFFF;
    --color--font: #000000;
    --color--clickeable: #005587;
}

.footer {
    --color--background: #000000;
    --color--font: #333333;
    --color--clickeable: #ffffff;
}

/* ELEMENTS: Border radius
   --------------------------------------------------------------------------
   We define a default here, and then use it as the value in component/module
   specific border-radius variables.
   -------------------------------------------------------------------------- */

:root {
    --border--radius--default: calc(var(--sizing--basis) * 1);
    --border--radius--boxes: calc(var(--sizing--basis) * 3);
}

/* ELEMENTS: Border color
   --------------------------------------------------------------------------
   We define a default here, and then use it as the value in component/module
   specific border-color variables.
   -------------------------------------------------------------------------- */

:root {
    --border--color--default: var(--color--borders);
}

/* ELEMENTS: Thumbnails
   --------------------------------------------------------------------------
   We define a default here, and then use it as the value in component/module
   specific thumbnail-size variables.
   -------------------------------------------------------------------------- */

:root {
    --thumbnail--w--default: calc(var(--sizing--basis) * 8) /* 3.2rem +doc+ */
}

/* ELEMENTS: Toggles
   --------------------------------------------------------------------------
   We define a default here, and then use it as the value in component/module
   specific toggle-size variables.
   -------------------------------------------------------------------------- */

:root {
    --toggle--border--radius: 0;
    --toggle--border--width: 0;
    --toggle--border--color: transparent;
    --toggle--width: calc(var(--sizing--basis) * 13); /* 5.2rem +doc+ */
    --toggle--height: var(--toggle--width);
    --toggle--background--color: transparent;
    --toggle--font--color: var(--color--clickeable);
}

/* ELEMENTS: Toggles: Search
   -------------------------------------------------------------------------- */

.form--search .toggle--search {
    --toggle--border--radius: var(--buttons--border--radius) var(--buttons--border--radius) 0 0;
}

.form--search .toggle--search:hover,
.form--search .toggle--search:focus,
.form--search.form--open .toggle--search {
    --toggle--background--color: var(--color--brand--sub-1);
}

/* ELEMENTS: Toggles: Result
   -------------------------------------------------------------------------- */

.results--default .toggle--result {
    --toggle--border--radius: var(--buttons--border--radius);
}

.results--default .toggle--result:hover,
.results--default .toggle--result:focus {
    --toggle--background--color: var(--color--buttons--sub-2);
}

/* ELEMENTS: Dividers
   -------------------------------------------------------------------------- */

:root {
    --dividers--border--color: var(--border--color--default);
        /* ↳ we use the default border-color variable, you can change that here for this element only */
}

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

:root {
    --logo--width: 18.2rem;
    --logo--height: 3.4rem;
    --logo--background--position: left center;
    --logo--background--size: contain;
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    :root {
        --logo--width: 14.7rem;
        --logo--height: 2.8rem;
    }
}

.footer {
     --logo--width: calc(var(--sizing--basis) * 9); /* 3.6rem */
     --logo--height: calc(var(--sizing--basis) * 9); /* 3.6rem */
}

.logo--login {
    --logo--width: 16.2rem;
    --logo--height: calc(var(--sizing--basis) * 9); /* 3.6rem */
}

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

:root {
    --fields--outline--width: 0;
    --fields--outline--color: #FFFFFF;
    --fields--border--radius: var(--border--radius--default);
    --fields--border--width: .1rem;
    --fields--border--color: #cccccc;
    --fields--background--color: #FFFFFF;
    --fields--height: calc(var(--sizing--basis) * 10); /* 4rem or 40px +doc+ */
    --fields--padding--v: var(--spacer--xs);
    --fields--padding--h: var(--spacer--s2);
    --fields--area: 18.4rem;
    --fields--font: var(--font);
    --fields--font--size: 1.6rem;
    --fields--font--color: #333333;
    --fields--placeholder--color: #666666;
    --fields--icon--width: 3.2rem;
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    :root {
        --fields--height: calc(var(--sizing--basis) * 11); /* 4.4rem or 44px +doc+ */
    }

    .title--banner {
        --title--font--size: var(--font--size--04);
    }

}

.form input:focus,
.form select:focus,
.form textarea:focus,
.select2-container--focus,
.select2-container--open {
    --fields--outline--width: .2rem;
    --fields--border--width: .2rem;
    --fields--border--color: #005587;
}

.form input:disabled,
.form select:disabled,
.form textarea:disabled {
    --fields--border--color: var(--color--disabled--sub-2);
    --fields--background--color: var(--color--disabled--sub-2);
    --fields--font--color: var(--color--disabled);
    --fields--placeholder--color: var(--color--disabled);
}

/* ELEMENTS: Buttons
   -------------------------------------------------------------------------- */

:root {
    --color--buttons: #005587;
        --color--buttons--sub-1: #007cb0;
        --color--buttons--sub-2: #d1e6c8;
        --color--buttons--sub-3: #D1E6C8;
        --color--buttons--sub-4: #CEDCEE;

    --buttons--outline--width: 0;
    --buttons--outline--color: #FFFFFF;
    --buttons--border--radius: var(--border--radius--default);
    --buttons--border--width: .1rem;
    --buttons--border--color: #005587;
    --buttons--background--color: #005587;
    --buttons--width--min: 12rem;
    --buttons--height: calc(var(--sizing--basis) * 10); /* 4rem or 40px +doc+ */
    --buttons--padding--v: var(--spacer--s);
    --buttons--padding--h: var(--spacer--m);
    --buttons--font: var(--font--alt);
    --buttons--font--size: 1.4rem;
    --buttons--font--color: #FFFFFF;
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    :root {
        --buttons--height: calc(var(--sizing--basis) * 11); /* 4.4rem or 44px +doc+ */
        --buttons--font--size: 1.4rem;
    }

}

/* ELEMENTS: Buttons: Primary
   -------------------------------------------------------------------------- */

.button--primary,
.saveButton,
.submitButton,
.nextButton,
.gotoButton,
.redirectUrlButton,
.formNextButton {
    --buttons--border--color: var(--color--buttons);
    --buttons--background--color: var(--color--buttons);
    --buttons--font--color: #FFFFFF;
}

.button--primary:hover,
.saveButton:hover,
.submitButton:hover,
.nextButton:hover,
.gotoButton:hover,
.redirectUrlButton:hover,
.formNextButton:hover {
    --buttons--border--color: var(--color--buttons--sub-1);
    --buttons--background--color: var(--color--buttons--sub-1);
    --buttons--font--color: #FFFFFF;
}

.button--primary:focus,
.button--primary:active,
.saveButton:focus,
.saveButton:active,
.submitButton:focus,
.submitButton:active,
.nextButton:focus,
.nextButton:active,
.gotoButton:focus,
.gotoButton:active,
.redirectUrlButton:focus,
.redirectUrlButton:active,
.formNextButton:focus,
.formNextButton:active {
    --buttons--border--color: var(--color--buttons--sub-1);
    --buttons--background--color: var(--color--buttons--sub-1);
    --buttons--font--color: #FFFFFF;
}

.button--primary.button--disabled,
.button--primary:disabled,
.saveButton:disabled,
.submitButton:disabled,
.nextButton:disabled,
.gotoButton:disabled,
.redirectUrlButton:disabled,
.formNextButton:disabled {
    --buttons--border--color: var(--color--disabled--sub-1);
    --buttons--background--color: var(--color--disabled--sub-1);
    --buttons--font--color: var(--color--disabled);
}

/* ELEMENTS: Buttons: Secondary
   -------------------------------------------------------------------------- */

.button--secondary,
.partialSaveButton,
.previousButton,
.homeButton,
.clearButton,
.formPreviousButton {
    --buttons--border--color: var(--color--buttons);
    --buttons--background--color: #FFFFFF;
    --buttons--font--color: var(--color--buttons);
}

.button--secondary:hover,
.partialSaveButton:hover,
.previousButton:hover,
.homeButton:hover,
.clearButton:hover,
.formPreviousButton:hover {
    --buttons--border--color: var(--color--buttons);
    --buttons--background--color: var(--color--buttons);
    --buttons--font--color: #FFFFFF;
}

.button--secondary:focus,
.button--secondary:active,
.partialSaveButton:focus,
.partialSaveButton:active,
.previousButton:focus,
.previousButton:active,
.homeButton:focus,
.homeButton:active,
.clearButton:focus,
.clearButton:active,
.formPreviousButton:focus,
.formPreviousButton:active {
    --buttons--border--color: var(--color--buttons);
    --buttons--background--color: var(--color--buttons);
    --buttons--font--color: #FFFFFF;
}

.button--secondary.button--disabled,
.button--secondary:disabled,
.partialSaveButton:disabled,
.previousButton:disabled,
.homeButton:disabled,
.clearButton:disabled,
.formPreviousButton:disabled {
    --buttons--border--color: var(--color--disabled--sub-1);
    --buttons--background--color: var(--color--disabled--sub-1);
    --buttons--font--color: var(--color--disabled);
}

/* ELEMENTS: Buttons: Cancel
   -------------------------------------------------------------------------- */

.button--cancel,
.cancelButton {
    --buttons--border--color: var(--color--buttons);
    --buttons--background--color: #FFFFFF;
    --buttons--font--color: var(--color--buttons);
}

.button--cancel:hover,
.cancelButton:hover {
    --buttons--border--color: var(--color--buttons);
    --buttons--background--color: var(--color--buttons--sub-2);
    --buttons--font--color: var(--color--buttons);
}

.button--cancel:focus,
.button--cancel:active,
.cancelButton:focus,
.cancelButton:active {
    --buttons--border--color: var(--color--buttons);
    --buttons--background--color: var(--color--buttons--sub-4);
    --buttons--font--color: var(--color--buttons);
}

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

/* ELEMENTS: Buttons: Tertiary
   -------------------------------------------------------------------------- */

.button--tertiary {
    --buttons--border--color: transparent;
    --buttons--width--min: 0;
    --buttons--background--color: #FFFFFF;
    --buttons--font--color: var(--color--buttons);
}

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

.button--tertiary:focus,
.button--tertiary:active {
    --buttons--border--color: var(--color--white);
    --buttons--background--color: transparent;
    --buttons--font--color: var(--color--white);
}

.button--tertiary.button--disabled,
.button--tertiary:disabled {
    --buttons--border--color: transparent;
    --buttons--background--color: transparent;
    --buttons--font--color: var(--color--disabled);
}

/* ELEMENTS: Buttons: Registration/application: Customizables
   -------------------------------------------------------------------------- */

.methodButton--later,
.methodButton--file,
.methodButton--paste,
.methodButton--dropbox {
    --buttons--border--color: var(--color--buttons);
    --buttons--width--min: 18.5rem;
    --buttons--background--color: #FFFFFF;
    --buttons--padding--v: var(--spacer--xxs);
    --buttons--padding--h: var(--spacer--s);
    --buttons--font--color: var(--color--buttons);
}

.methodButton--later:hover,
.methodButton--file:hover,
.methodButton--paste:hover,
.methodButton--dropbox:hover {
    --buttons--border--color: var(--color--buttons);
    --buttons--background--color: var(--color--buttons--sub-2);
    --buttons--font--color: var(--color--buttons);
}

.methodButton--later:focus,
.methodButton--later:active,
.methodButton--file:focus,
.methodButton--file:active,
.methodButton--paste:focus,
.methodButton--paste:active,
.methodButton--dropbox:focus,
.methodButton--dropbox:active {
    --buttons--border--color: var(--color--buttons);
    --buttons--background--color: var(--color--buttons--sub-4);
    --buttons--font--color: var(--color--buttons);
}

/* ELEMENTS: Buttons: Share
   -------------------------------------------------------------------------- */

.button--share {
    --buttons--border--color: transparent;
    --buttons--background--color: transparent;
    --buttons--font--color: var(--color--buttons);
}

.button--share:hover {
    --buttons--border--color: transparent;
    --buttons--background--color: var(--color--buttons--sub-2);
    --buttons--font--color: var(--color--buttons);
}

.button--share:focus,
.button--share:active {
    --buttons--border--color: transparent;
    --buttons--background--color: var(--color--buttons--sub-2);
    --buttons--font--color: var(--color--buttons);
}

.share--popUp--open .button--share {
    --buttons--border--color: var(--color--buttons);
    --buttons--background--color: var(--color--buttons--sub-2);
    --buttons--font--color: var(--color--buttons);
}

/* COMPONENTS: Nav
   -------------------------------------------------------------------------- */

:root {
    --navs--border--radius: var(--border--radius--default);
        /* ↳ we use the default border-radius variable, you can change that here for this element only */
}

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

/* Media query to target mobile and tablet */
@media all and (max-width:1024px) {
    :root {
      --nav--width: 100%;
    }

}

/* COMPONENTS: Tables
   --------------------------------------------------------------------------
   "default tables" be anything that needs to look like one - ej: actual
   tables, datasets in wizards (with a modifier).
   --------------------------------------------------------------------------
   The point is to normalize around and centralize here common properties for
   this kind of overall appearance. Any modification you make here impacts
   through all these components at once.
   -------------------------------------------------------------------------- */

:root {
    --table--border--radius: 0;
        /* ↳ we use the default border-radius variable, you can change that here for this component only */
    --table--border--color: var(--border--color--default);
        /* ↳ we use the default border-color variable, you can change that here for this component only */

    --table__th--height: 5rem;
    --table__th--padding: var(--spacer--s2); /* 1.2rem +doc+ */
        /* ↳ I recommend leaving this alone and just play with the height defined above - if that tends to be enough, we may delete this one */
    --table__th--font--size: 1.4rem;

    --table__td--height: 7rem;
    --table__td--padding: var(--spacer--s2); /* 1.2rem +doc+ */
        /* ↳ I recommend leaving this alone and just play with the height defined above - if that tends to be enough, we may delete this one */
    --table__td--font--size: 1.4rem;

    --table__thumbnail--width: var(--thumbnail--w--default);
        /* ↳ we use the default thumbnail width variable, you can change that here for this component only */

    --table--fixed-column--width: 20rem;
        /* ↳ This is the width of the fixed td when the table is set to show the horizontal scroll and keep the first or last table cell fixed */
}

/* Media query to target mobile and tablet */
@media all and (max-width:1024px) {
    :root {
        --table__th--height: 4.6rem;
        --table__td--height: 4.6rem;
    }

}

/* COMPONENTS: Form item structures: fieldSpec
   --------------------------------------------------------------------------
   Wizards and template forms as well.
   --------------------------------------------------------------------------
   The point is to normalize around and centralize here common properties for
   this kind of overall appearance. Any modification you make here impacts
   through all these components at once.
   -------------------------------------------------------------------------- */

:root {
    --fieldSpec--padding--outers: var(--spacer--m);
        /* ↳ padding for spaces facing the outer borders of the fieldSpec */
    --fieldSpec--padding--inners: var(--spacer--xs);
        /* ↳ slightly small padding for spaces inside the fieldSpec */
}

/* COMPONENTS: Boxes
   --------------------------------------------------------------------------
   "boxes" be anything boxed-like, ej: cards, dashlets, results lists in mobile.
   --------------------------------------------------------------------------
   The point is to normalize around and centralize here common properties for
   this kind of overall appearance. Any modification you make here impacts
   through all these modules at once.
   -------------------------------------------------------------------------- */

:root {
    --boxes--border--radius: var(--border--radius--default);
        /* ↳ we use the default border-radius variable, you can change that here for this component only */
    --boxes--border--color: var(--border--color--default);
        /* ↳ we use the default border-color variable, you can change that here for this component only */

    --boxes__heading--height: calc(var(--sizing--basis) * 19); /* 7.6rem +doc+ */

    --boxes--padding--outers: var(--spacer--m);
        /* ↳ padding for spaces facing the outer borders of the box */
    --boxes--padding--inners: var(--spacer--s2); /* 1.2rem +doc+ */
        /* ↳ slightly small padding for spaces inside the box */

    --boxes__thumbnail--width: calc(var(--thumbnail--w--default) * 1.25); /* 4rem +doc+ */
        /* ↳ slightly bigger than default size for thumbnails in this component only */

}

/* MODULES: Header
   -------------------------------------------------------------------------- */

:root {
    --header--height: 8.2rem;

    --header--padding--top: var(--spacer--s);
    --header--padding--bottom: var(--spacer--s);
        /* ↳ I recommend leaving these alone and just play with the height defined above - if that tends to be enough, we may delete this one */

    --header__thumbnail: calc(var(--thumbnail--w--default) * .75);
        /* ↳ slightly smaller than default size for thumbnails in this component only */
}

/* Media query to target only tablet */
@media all and (min-width:751px) and (max-width:1024px) {
    :root {
        --header--height: 5.5rem;
    }

}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    :root {
        --header--height: 7.6rem;

        --header--padding--top: var(--spacer--xs);
        --header--padding--bottom: var(--spacer--xs);
        /* ↳ I recommend leaving these alone and just play with the height defined above - if that tends to be enough, we may delete this one */
    }

}

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

:root {
    /* --banner--height: 12rem;

    --banner--padding--top: var(--spacer--m);
    --banner--padding--bottom: var(--spacer--m); */
        /* ↳ I recommend leaving these alone and just play with the height defined above - if that tends to be enough, we may delete this one */
/*
    --banner--background--image--position: right;
    --banner--background--image--sizing: contain; */

    /* --banner__thumbnail--width: calc(var(--thumbnail--w--default) * 1.9375); */
        /* ↳ slightly bigger than default size for thumbnails in this component only */

    --banner--height: 20rem;
    --banner--padding--top: var(--spacer--m);
    --banner--padding--bottom: var(--spacer--m);
    --banner--background--color: #000;
    --banner--background--image--position: right calc((100vw - var(--grid--width)) * .5) center;
    --banner--background--image--sizing: auto 20rem;
    --banner--font--color: var(--color--font-alt);
    --banner__thumbnail--width: 6rem;
}

/* Media query to target only tablet */
@media all and (min-width:751px) and (max-width:1024px) {
    :root {
        --banner--height: 9.6rem;
        --banner--background--image--position: top right;
        --banner--background--image--sizing: auto 11rem;
    }

}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    :root {
        --banner--height: 9rem;
        --banner--background--image--position: top right;
        --banner--background--image--sizing: auto 8rem;
    }

}

/* MODULES: Main
   -------------------------------------------------------------------------- */

:root {
    --main--padding--top: var(--spacer--xl);
    --main--padding--bottom: var(--spacer--xl);
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    :root {
        --main--padding--top: var(--spacer--l);
        --main--padding--bottom: var(--spacer--l);
    }

}

/* MODULES: Footer
   -------------------------------------------------------------------------- */

:root {
    --footer--padding--top: var(--spacer--m);
    --footer--padding--bottom: var(--spacer--m);
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    :root {
        --footer--padding--top: var(--spacer--l);
        --footer--padding--bottom: var(--spacer--l);
    }

}

/* PAGETYPES: Blocking login
   -------------------------------------------------------------------------- */

:root {
    --login__body--background--color: transparent;
    --login__body--background--image--position: right bottom;
    --login__body--background--image--sizing: cover;

    --login__box--border--radius: calc(var(--boxes--border--radius) * 2);
        /* ↳ this is a "box" but instead of using the border-radius defined for boxes above, we define a custom value here for this case only */

    --login__box--width: 33.2rem;
    --login__box--padding--outers: var(--spacer--l);
        /* ↳ padding for spaces facing the outer borders of the box */

    --login__box__footer--background--color: var(--color--brand--sub-2);
}

/* Media query to target only tablet */
@media all and (min-width:751px) and (max-width:1024px) {
    :root {
        --login__body--background--image--position: right bottom;
    }

}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    :root {
        --login__body--background--image--position: right bottom;
    }

}