/* Version: 2.1.15
 * Source: https://design.elsevier.com/
 */


@charset "UTF-8";
.es-animation {
    --es-animation-appear: 0.3s;
    --es-animation-hover: 0.3s;
    --es-animation-shift: 0.2s;
}

/* The red, green and blue colors are specified as separate values.
 *
 * The advantence of the separate values is that you can use them with
 * an alpha by use the following:
 *
 * color rgba(var(--es-color-warning-rgb), 0.5);
 *
 * Also all the colors are defined already without the rgb and thereby
 * making the following two lines the same.
 *
 * color: rgb(var(--es-color-warning-rgb));
 * color: var(--es-color-warning);
 *
 */
.es-color,
.es-theme-bright-default {
    /* Gray colors */
    --es-color-grey0-rgb: 255, 255, 255;
    /* #FFFFFF */
    --es-color-grey1-rgb: 245, 245, 245;
    /* #F5F5F5 */
    --es-color-grey2-rgb: 235, 235, 235;
    /* #EBEBEB */
    --es-color-grey3-rgb: 220, 220, 220;
    /* #DCDCDC */
    --es-color-grey4-rgb: 185, 185, 185;
    /* #B9B9B9 */
    --es-color-grey5-rgb: 142, 142, 142;
    /* #8E8E8E */
    --es-color-grey6-rgb: 115, 115, 115;
    /* #737373 */
    --es-color-grey7-rgb: 80, 80, 80;
    /* #505050 */
    --es-color-grey8-rgb: 46, 46, 46;
    /* #2E2E2E */
    --es-color-grey9-rgb: 0, 0, 0;
    /* #000000 */
    /* Brand colors */
    --es-color-elsevier-orange-rgb: 233, 113, 28;
    /* #E9711C */
    --es-color-elsevier-blue-rgb: 0, 115, 152;
    /* #007398 */
    --es-color-link-blue-rgb: 12, 125, 187;
    /* #0C7DBB */
    --es-color-elsevier-orange-ondark-rgb: 255, 130, 0;
    /* #FF8200 */
    --es-color-elsevier-blue-ondark-rgb: 68, 198, 244;
    /* #44C6F4 */
    /* Messaging colors */
    --es-color-confirmation-rgb: 41, 166, 27;
    /* #29A61B */
    --es-color-information-rgb: 0, 158, 206;
    /* #009ECE */
    --es-color-warning-rgb: 200, 55, 39;
    /* #C83727 */
    --es-color-confirmation-ondark-rgb: 83, 184, 72;
    /* #53B848 */
    --es-color-information-ondark-rgb: 68, 198, 244;
    /* #44C6F4 */
    --es-color-warning-ondark-rgb: 255, 106, 90;
    /* #FF6A5A */
    /* Color swatches */
    --es-color-base-dark-grey-rgb: 83, 86, 90;
    /* #53565A */
    --es-color-base-white-rgb: 255, 255, 255;
    /* #FFFFFF */
    --es-color-primary-light-blue-rgb: 54, 121, 224;
    /* #3679E0 */
    --es-color-primary-orange-rgb: 255, 108, 0;
    /* #FF6C00 */
    --es-color-primary-elsevier-blue-rgb: 0, 115, 152;
    /* #007398 */
    --es-color-secondary-cool-grey-1-rgb: 220, 220, 221;
    /* #DCDCDD */
    --es-color-secondary-very-pale-blue-rgb: 205, 228, 255;
    /* #CDE4FF */
    --es-color-secondary-very-pale-orange-rgb: 255, 240, 228;
    /* #FFF0E4 */
    --es-color-tertiary-blue1-rgb: 172, 210, 255;
    /* #ACD2FF */
    --es-color-tertiary-blue2-rgb: 54, 121, 224;
    /* #3679E0 */
    --es-color-tertiary-blue3-rgb: 7, 57, 115;
    /* #073973 */
    --es-color-tertiary-green1-rgb: 192, 242, 93;
    /* #C0F25D */
    --es-color-tertiary-green2-rgb: 142, 215, 0;
    /* #8ED700 */
    --es-color-tertiary-green3-rgb: 73, 110, 1;
    /* #496E01 */
    --es-color-tertiary-purple1-rgb: 187, 132, 255;
    /* #BB84FF */
    --es-color-tertiary-purple2-rgb: 102, 28, 202;
    /* #661CCA */
    --es-color-tertiary-purple3-rgb: 60, 18, 118;
    /* #3C1276 */
    --es-color-tertiary-red1-rgb: 254, 183, 183;
    /* #FEB7B7 */
    --es-color-tertiary-red2-rgb: 247, 62, 41;
    /* #F73E29 */
    --es-color-tertiary-red3-rgb: 169, 43, 29;
    /* #A92B1D */
    --es-color-tertiary-yellow1-rgb: 255, 236, 132;
    /* #FFEC84 */
    --es-color-tertiary-yellow2-rgb: 253, 211, 0;
    /* #FDD300 */
    --es-color-tertiary-yellow3-rgb: 151, 101, 0;
    /* #976500 */
    --es-color-a11y-orange-rgb: 235, 101, 0;
}

.es-color,
.es-theme-bright-default {
    /* Gray colors */
    --es-color-grey0: rgb(var(--es-color-grey0-rgb));
    --es-color-grey1: rgb(var(--es-color-grey1-rgb));
    --es-color-grey2: rgb(var(--es-color-grey2-rgb));
    --es-color-grey3: rgb(var(--es-color-grey3-rgb));
    --es-color-grey4: rgb(var(--es-color-grey4-rgb));
    --es-color-grey5: rgb(var(--es-color-grey5-rgb));
    --es-color-grey6: rgb(var(--es-color-grey6-rgb));
    --es-color-grey7: rgb(var(--es-color-grey7-rgb));
    --es-color-grey8: rgb(var(--es-color-grey8-rgb));
    --es-color-grey9: rgb(var(--es-color-grey9-rgb));
    /* Brand colors */
    --es-color-elsevier-orange: rgb(var(--es-color-elsevier-orange-rgb));
    --es-color-elsevier-blue: rgb(var(--es-color-elsevier-blue-rgb));
    --es-color-elsevier-orange-ondark: rgb(
    var(--es-color-elsevier-orange-ondark-rgb)
  );
    --es-color-elsevier-blue-ondark: rgb(
    var(--es-color-elsevier-blue-ondark-rgb)
  );
    /* Messaging colors */
    --es-color-confirmation: rgb(var(--es-color-confirmation-rgb));
    --es-color-information: rgb(var(--es-color-information-rgb));
    --es-color-warning: rgb(var(--es-color-warning-rgb));
    --es-color-confirmation-ondark: rgb(
    var(--es-color-confirmation-ondark-rgb)
  );
    --es-color-information-ondark: rgb(
    var(--es-color-information-ondark-rgb)
  );
    --es-color-warning-ondark: rgb(var(--es-color-warning-ondark-rgb));
    /* Color swatches */
    --es-color-base-dark-grey: rgb(var(--es-color-base-dark-grey-rgb));
    --es-color-base-white: rgb(var(--es-color-base-white-rgb));
    --es-color-primary-light-blue: rgb(
    var(--es-color-primary-light-blue-rgb)
  );
    --es-color-primary-orange: rgb(var(--es-color-primary-orange-rgb));
    --es-color-primary-elsevier-blue: rgb(
    var(--es-color-primary-elsevier-blue-rgb)
  );
    --es-color-secondary-cool-grey-1: rgb(
    var(--es-color-secondary-cool-grey-1-rgb)
  );
    --es-color-secondary-very-pale-blue: rgb(
    var(--es-color-secondary-very-pale-blue-rgb)
  );
    --es-color-secondary-very-pale-orange: rgb(
    var(--es-color-secondary-very-pale-orange-rgb)
  );
    --es-color-tertiary-blue1: rgb(var(--es-color-tertiary-blue1-rgb));
    --es-color-tertiary-blue2: rgb(var(--es-color-tertiary-blue2-rgb));
    --es-color-tertiary-blue3: rgb(var(--es-color-tertiary-blue3-rgb));
    --es-color-tertiary-green1: rgb(var(--es-color-tertiary-green1-rgb));
    --es-color-tertiary-green2: rgb(var(--es-color-tertiary-green2-rgb));
    --es-color-tertiary-green3: rgb(var(--es-color-tertiary-green3-rgb));
    --es-color-tertiary-purple1: rgb(
    var(--es-color-tertiary-purple1-rgb)
  );
    --es-color-tertiary-purple2: rgb(
    var(--es-color-tertiary-purple2-rgb)
  );
    --es-color-tertiary-purple3: rgb(
    var(--es-color-tertiary-purple3-rgb)
  );
    --es-color-tertiary-red1: rgb(var(--es-color-tertiary-red1-rgb));
    --es-color-tertiary-red2: rgb(var(--es-color-tertiary-red2-rgb));
    --es-color-tertiary-red3: rgb(var(--es-color-tertiary-red3-rgb));
    --es-color-tertiary-yellow1: rgb(
    var(--es-color-tertiary-yellow1-rgb)
  );
    --es-color-tertiary-yellow2: rgb(
    var(--es-color-tertiary-yellow2-rgb)
  );
    --es-color-tertiary-yellow3: rgb(
    var(--es-color-tertiary-yellow3-rgb)
  );
    /* Accessible colors */
    --es-color-a11y-orange: rgb(var(--es-color-a11y-orange-rgb));
    --es-color-link-blue: rgb(var(--es-color-link-blue-rgb));
}

.es-color,
.es-theme-bright-default {
    /* Link theme color to the specific color values */
    --es-color-background-rgb: var(--es-color-grey0-rgb);
    --es-color-border-rgb: var(--es-color-grey6-rgb);
    --es-color-disabled-rgb: var(--es-color-grey4-rgb);
    --es-color-error-rgb: var(--es-color-warning-rgb);
    --es-color-focus-rgb: var(--es-color-a11y-orange-rgb);
    --es-color-foreground-rgb: var(--es-color-grey8-rgb);
    --es-color-link-rgb: var(--es-color-link-blue-rgb);
    --es-color-theme1-rgb: var(--es-color-elsevier-blue-rgb);
    --es-color-theme2-rgb: var(--es-color-a11y-orange-rgb);
    /* Theme colors */
    --es-color-background: rgb(var(--es-color-background-rgb));
    --es-color-border: rgb(var(--es-color-border-rgb));
    --es-color-disabled: rgb(var(--es-color-disabled-rgb));
    --es-color-error: rgb(var(--es-color-error-rgb));
    --es-color-focus: rgb(var(--es-color-focus-rgb));
    --es-color-foreground: rgb(var(--es-color-foreground-rgb));
    --es-color-link: rgb(var(--es-color-link-rgb));
    --es-color-theme1: rgb(var(--es-color-theme1-rgb));
    --es-color-theme2: rgb(var(--es-color-theme2-rgb));
}

.es-color,
.es-theme-bright-default {
    background-color: var(--es-color-background);
    color: var(--es-color-foreground);
}

/* typography Nexus sans-serif */
@font-face {
    font-display: swap;
    font-family: 'NexusSans';
    src: url("fonts/NexusSans-Regular.woff2") format("woff2"), url("fonts/NexusSans-Regular.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: 'NexusSans';
    font-weight: bold;
    src: url("fonts/NexusSans-Bold.woff2") format("woff2"), url("fonts/NexusSans-Bold.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: 'NexusSans';
    font-style: italic;
    src: url("fonts/NexusSans-Italic.woff2") format("woff2"), url("fonts/NexusSans-Italic.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: 'NexusSans';
    font-style: italic;
    font-weight: bold;
    src: url("fonts/NexusSans-BoldItalic.woff2") format("woff2"), url("fonts/NexusSans-BoldItalic.woff") format("woff");
}

/* typography Nexus serif */
@font-face {
    font-display: swap;
    font-family: 'NexusSerif';
    src: url("fonts/NexusSerif-Regular.woff2") format("woff2"), url("fonts/NexusSerif-Regular.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: 'NexusSerif';
    font-weight: bold;
    src: url("fonts/NexusSerif-Bold.woff2") format("woff2"), url("fonts/NexusSerif-Bold.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: 'NexusSerif';
    font-style: italic;
    src: url("fonts/NexusSerif-Italic.woff2") format("woff2"), url("fonts/NexusSerif-Italic.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: 'NexusSerif';
    font-style: italic;
    font-weight: bold;
    src: url("fonts/NexusSerif-BoldItalic.woff2") format("woff2"), url("fonts/NexusSerif-BoldItalic.woff") format("woff");
}

/* typography Gulliver */
@font-face {
    font-display: swap;
    font-family: 'Gulliver';
    src: url("fonts/Gulliver-Regular.woff2") format("woff2"), url("fonts/Gulliver-Regular.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: 'Gulliver';
    font-weight: bold;
    src: url("fonts/Gulliver-Bold.woff2") format("woff2"), url("fonts/Gulliver-Bold.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: 'Gulliver';
    font-style: italic;
    src: url("fonts/Gulliver-Italic.woff2") format("woff2"), url("fonts/Gulliver-Italic.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: 'Gulliver';
    font-style: italic;
    font-weight: bold;
    src: url("fonts/Gulliver-BoldItalic.woff2") format("woff2"), url("fonts/Gulliver-BoldItalic.woff") format("woff");
}

/* typography Display sans-serif */
@font-face {
    font-display: swap;
    font-family: 'ElsevierDisplay';
    src: url("fonts/ElsevierDisplay-Light.woff2") format("woff2"), url("fonts/ElsevierDisplay-Light.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: 'ElsevierDisplay';
    font-style: italic;
    src: url("fonts/ElsevierDisplay-LightItalic.woff2") format("woff2"), url("fonts/ElsevierDisplay-LightItalic.woff") format("woff");
}

/* typography Display Condensed sans-serif */
@font-face {
    font-display: swap;
    font-family: 'ElsevierDisplayCondensed';
    font-weight: 400;
    src: url("fonts/ElsevierDisplay-Regular-Condensed.woff2") format("woff2"), url("fonts/ElsevierDisplay-Regular-Condensed.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: 'ElsevierDisplayCondensed';
    font-weight: 700;
    src: url("fonts/ElsevierDisplay-Bold-Condensed.woff2") format("woff2"), url("fonts/ElsevierDisplay-Bold-Condensed.woff") format("woff");
}

.es-typography {
    /* All allowed font-sizes */
    --es-font-size-12: 12px;
    --es-font-size-14: 14px;
    --es-font-size-16: 16px;
    --es-font-size-20: 16px;
    --es-font-size-24: 20px;
    --es-font-size-32: 24px;
    --es-font-size-40: 32px;
    --es-font-size-48: 32px;
    --es-font-size-56: 32px;
    --es-font-size-64: 32px;
    --es-font-sans-serif: Arial, Helvetica,   /**/ Lucida Sans Unicode, Microsoft Sans Serif,   /**/ Segoe UI Symbol, STIXGeneral, Cambria Math,   /**/ Arial Unicode MS, sans-serif;
    --es-font-serif: Georgia, Times New Roman,   /**/ STIXGeneral, Cambria Math, Arial, Helvetica,   /**/ Lucida Sans Unicode, Microsoft Sans Serif,   /**/ Segoe UI Symbol, Arial Unicode MS, serif;
    --es-font-monospace: Monaco, Consolas, Andale Mono,
  /**/ Ubuntu Mono, monospace;
}

@media (min-width: 576px) {
    .es-typography {
        --es-font-size-24: 24px;
        --es-font-size-32: 32px;
        --es-font-size-40: 40px;
        --es-font-size-48: 40px;
        --es-font-size-56: 40px;
        --es-font-size-64: 40px;
    }
}

@media (min-width: 768px) {
    .es-typography {
        --es-font-size-20: 20px;
        --es-font-size-48: 48px;
        --es-font-size-56: 48px;
        --es-font-size-64: 48px;
    }
}

@media (min-width: 992px) {
    .es-typography {
        --es-font-size-56: 56px;
        --es-font-size-64: 56px;
    }
}

@media (min-width: 1200px) {
    .es-typography {
        --es-font-size-64: 64px;
    }
}

.es-html-body {
    bottom: 0;
    margin: 0;
    overflow: hidden auto;
    padding: 0;
}

.es-html-body {
    font-size: var(--es-font-size-20);
    font-style: normal;
    font-weight: normal;
    line-height: var(--es-line-height);
    overflow: visible;
}

.es-html-body,
.es-font-nexus-sans {
    --es-line-height: calc(1em + 8px);
    font-family: NexusSans, var(--es-font-sans-serif);
}

.es-font-nexus-serif {
    --es-line-height: calc(1em + 8px);
    font-family: NexusSerif, var(--es-font-serif);
}

.es-font-gulliver {
    --es-line-height: calc(1em + 16px);
    font-family: Gulliver, var(--es-font-serif);
}

.es-font-elsevier-display {
    --es-line-height: calc(1em + 8px);
    font-family: ElsevierDisplay, NexusSans, var(--es-font-sans-serif);
}

.es-font-elsevier-display-bold-condensed {
    --es-line-height: calc(1em + 8px);
    font-family: ElsevierDisplayCondensed, NexusSans, var(--es-font-sans-serif);
    font-weight: 700;
}

.es-font-elsevier-display-regular-condensed {
    --es-line-height: calc(1em + 8px);
    font-family: ElsevierDisplayCondensed, NexusSans, var(--es-font-sans-serif);
    font-weight: 400;
}

.es-font-sans-serif {
    --es-line-height: calc(1em + 8px);
    font-family: var(--es-font-sans-serif);
}

.es-font-serif {
    --es-line-height: calc(1em + 8px);
    font-family: var(--es-font-serif);
}

.es-font-numeral-paragraph {
    font-variant-numeric: oldstyle-nums proportional-nums;
}

.es-html-body,
.es-font-numeral-default {
    font-variant-numeric: lining-nums proportional-nums;
}

.es-font-numeral-table {
    font-variant-numeric: lining-nums tabular-nums;
}

.es-font-small-caps {
    /* Need the Nexus webfont with SmallCapitals to work */
    font-variant-caps: small-caps;
}

.es-heading-h1,
.es-heading-h2,
.es-heading-h3,
.es-heading-h4,
.es-heading-h5,
.es-heading-h6,
.es-heading-h5-caps,
.es-heading-h6-caps,
.es-intro,
.es-body,
.es-meta,
.es-batch {
    font-style: normal;
    font-weight: normal;
    line-height: var(--es-line-height);
    margin: 0;
}

.es-heading-h2,
.es-heading-h3,
.es-heading-h4,
.es-heading-h5,
.es-heading-h6,
.es-heading-h5-caps,
.es-heading-h6-caps {
    margin: calc(2em - 16px) 0 calc(1em - 8px);
}

.es-heading-h1 + .es-heading-h2,
.es-heading-h2 + .es-heading-h3,
.es-heading-h3 + .es-heading-h4,
.es-heading-h4 + .es-heading-h5,
.es-heading-h5 + .es-heading-h6 {
    margin-top: calc(1em - 8px);
}

.es-heading-h1 {
    font-size: var(--es-font-size-64);
}

.es-heading-h2 {
    font-size: var(--es-font-size-32);
}

.es-heading-h3 {
    font-size: var(--es-font-size-24);
}

.es-heading-h4,
.es-heading-h5,
.es-heading-h5-caps,
.es-heading-h6,
.es-intro {
    font-size: var(--es-font-size-20);
}

.es-heading-h6-caps,
.es-body {
    font-size: var(--es-font-size-16);
}

.es-meta {
    font-size: var(--es-font-size-14);
}

.es-batch {
    font-size: var(--es-font-size-12);
}

.es-heading-h5-caps,
.es-heading-h6-caps {
    background-image: linear-gradient(var(--es-color-theme2), var(--es-color-theme2));
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 32px 4px;
    font-weight: 700;
    padding-bottom: 0.5em;
    text-transform: uppercase;
}

.es-accordion {
    border-bottom: 2px solid var(--es-color-grey3);
}

.es-accordion-heading {
    border-color: var(--es-color-grey3);
    border-style: solid;
    border-width: 2px 0 0;
    font-size: 20px;
    font-weight: normal;
    line-height: calc(1em + 8px);
    margin: 0;
}

.es-accordion-heading > button {
    background-color: transparent;
    border: 0;
    color: inherit;
    display: block;
    font: inherit;
    height: 2em;
    padding: 0;
    position: relative;
    margin: 0;
    width: 100%;
    text-align: left;
}

.es-accordion-heading > button[aria-expanded="true"] {
    margin-bottom: 1em;
}

.es-accordion-heading > button > span {
    border-bottom: 2px solid transparent;
    margin: 0 0 0 2em;
}

.es-accordion-heading > button > span:first-child {
    margin: 0 2em 0 0;
}

.es-accordion-heading > button:hover > span,
.es-accordion-heading > button[aria-expanded="true"] > span {
    border-bottom: 2px solid var(--es-color-theme2);
}

.es-accordion-heading > button > svg {
    box-sizing: border-box;
    color: var(--es-color-theme1);
    fill: currentColor;
    height: 2em;
    left: 0;
    padding: calc(0.5em - 2px) 0;
    position: absolute;
    top: 0;
    width: auto;
}

.es-accordion-heading > button > svg:last-child {
    left: auto;
    right: 0;
}

.es-accordion-heading > button:hover > svg {
    color: var(--es-color-theme2);
}

.es-accordion-heading > button[aria-expanded="true"] > svg {
    transform: scaleY(-1);
}

.es-accordion:last-of-type + * {
    border-color: var(--es-color-grey3);
    border-style: solid;
    border-width: 0 0 2px;
}

.es-accordion-content.is-hidden {
    display: none;
}

/* Alternative button style */
.es-button-alternative {
    -webkit-appearance: none;
    background-color: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    height: 2em;
    line-height: 1;
    margin: 0;
    padding: 0;
}

/* Button sizes, by default size is inherited from the parent */
.es-button-alternative.small {
    font-size: var(--es-font-size-16);
}

.es-button-alternative.medium {
    font-size: var(--es-font-size-20);
}

.es-button-alternative.large {
    font-size: var(--es-font-size-24);
}

.es-button-alternative > span {
    box-shadow: 0 -2px 0 0 transparent inset;
    display: inline-block;
    margin: 0 .5em;
    padding: calc(.45em - 2px) 0 calc(.55em - 2px);
    transition: background-size .048s;
    transition: box-shadow var(--es-animation-hover);
    vertical-align: middle;
}

.es-button-alternative > svg {
    border: 2px solid transparent;
    box-sizing: border-box;
    fill: currentColor;
    height: 2em;
    padding: calc(.5em - 4px);
    vertical-align: middle;
    width: 2em;
    transition: background-color var(--es-animation-hover), border-color var(--es-animation-hover), fill var(--es-animation-hover);
}

/* Primary */
.es-button-alternative.primary > svg {
    background-color: var(--es-color-theme1);
    border-color: var(--es-color-theme1);
    color: var(--es-color-background);
}

/* Secondary */
.es-button-alternative.secondary > svg {
    border-color: var(--es-color-theme1);
}

/* Tertiary */
.es-button-alternative.tertiary > svg {
    border-color: var(--es-color-grey6);
}

/* Focus state for primary, secondary and tertiary */
.es-button-alternative:hover > span {
    box-shadow: 0 -2px 0 0 var(--es-color-theme2) inset;
}

.es-button-alternative:active > svg,
.es-button-alternative:hover > svg {
    background-color: var(--es-color-background);
    border-color: var(--es-color-theme2);
    color: var(--es-color-foreground);
    fill: currentColor;
}

/* Button on dark background */
.es-button-alternative.background {
    background: none;
    color: currentColor;
    outline-color: currentColor;
}

.es-button-alternative.background > svg {
    border-color: currentColor;
}

.es-button-alternative.background:hover > span {
    box-shadow: 0 -2px 0 0 currentColor inset;
}

.es-button-alternative.background:hover > svg {
    border-color: var(--es-color-background);
    background-color: var(--es-color-background);
}

/* Disabled button */
.es-button-alternative[aria-disabled="true"] > span,
.es-button-alternative[aria-disabled="true"] > span:hover,
.es-button-alternative[disabled] > span,
.es-button-alternative[disabled] > span:hover {
    background-color: transparent;
    background-image: none;
    box-shadow: 0 -2px 0 0 transparent inset;
    color: var(--es-color-disabled);
}

.es-button-alternative[aria-disabled="true"] > svg,
.es-button-alternative[aria-disabled="true"] > svg:hover,
.es-button-alternative[disabled] > svg,
.es-button-alternative[disabled] > svg:hover {
    background-color: transparent !important;
    border-color: var(--es-color-disabled) !important;
    fill: var(--es-color-disabled) !important;
}

.es-button-alternative.primary[aria-disabled="true"] > svg,
.es-button-alternative.primary[aria-disabled="true"] > svg:hover,
.es-button-alternative.primary[disabled] > svg,
.es-button-alternative.primary[disabled] > svg:hover {
    background-color: var(--es-color-disabled) !important;
    fill: var(--es-color-background) !important;
}

.es-button-alternative.background[aria-disabled="true"] > span,
.es-button-alternative.background[disabled] > span {
    box-shadow: 0 0 0 0 transparent inset !important;
}

.es-breadcrumb > ol {
    color: var(--es-color-grey6);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--es-font-size-16);
    line-height: var(--es-line-height);
    list-style: none;
    margin: 0;
    padding: 0;
}

.es-breadcrumb > ol > li > a:focus,
.es-breadcrumb > ol > li > a:hover,
.es-breadcrumb > ol > li > a[aria-current=page] {
    color: var(--es-color-foreground);
}

.es-breadcrumb > ol > li {
    padding: 0 8px 0 0;
}

.es-breadcrumb > ol > li:nth-child(n+2) {
    padding: 0 8px 0 16px;
    text-indent: -16px;
}

.es-breadcrumb > ol > li:nth-child(n+2):before {
    color: var(--es-color-foreground);
    content: '>';
    display: inline-block;
    font-size: 75%;
    speak: none;
    text-indent: 0;
    vertical-align: 1px;
    width: 14px;
}

/* Default button style */
.es-button {
    -webkit-appearance: none;
    background-color: var(--es-color-background);
    border: 2px solid transparent;
    box-sizing: border-box;
    color: inherit;
    font: inherit;
    height: 2em;
    line-height: 1;
    margin: 0;
    padding: 0 calc(0.8em - 2px);
    /* 16 - 2px border */
    transition: background-color var(--es-animation-hover), border-color var(--es-animation-hover), color var(--es-animation-hover);
}

a.es-button {
    display: inline-block;
}

/* Button sizes, by default size is inherited from the parent */
.es-button.small {
    font-size: var(--es-font-size-16);
}

.es-button.medium {
    font-size: var(--es-font-size-20);
}

.es-button.large {
    font-size: var(--es-font-size-24);
}

/* Button with icon */
.es-button > span {
    display: inline-block;
    padding: calc(.45em - 2px) 0 calc(.55em - 2px);
    vertical-align: middle;
}

.es-button > svg {
    box-sizing: border-box;
    fill: currentColor;
    height: calc(2em - 4px);
    padding: calc(.5em - 4px);
    vertical-align: middle;
    width: calc(2em - 4px);
    transition: fill var(--es-animation-hover);
}

.es-button > svg:first-child {
    margin: 0 0 0 calc(-0.8em + 2px);
}

.es-button > svg:last-child {
    margin: 0 calc(-0.8em + 2px) 0 0;
}

.es-button > svg:first-child:last-child {
    margin: 0 calc(-0.8em + 2px);
}

/* Primary */
.es-button.primary {
    background-color: var(--es-color-theme1);
    border-color: var(--es-color-theme1);
    color: var(--es-color-background);
}

/* Secondary */
.es-button.secondary {
    border-color: var(--es-color-theme1);
}

/* Tertiary */
.es-button.tertiary {
    border-color: var(--es-color-grey6);
}

/* Quaternary */
.es-button.quaternary {
    background-color: transparent;
    border-color: transparent;
}

/* Focus state for primary, secondary, tertiary and quaternary */
.es-button:active,
.es-button:hover {
    background-color: var(--es-color-background);
    border-color: var(--es-color-theme2);
    color: var(--es-color-foreground);
}

.es-button[aria-pressed="true"] {
    background-color: var(--es-color-theme1);
    border-color: var(--es-color-theme1);
    color: var(--es-color-background);
}

.es-button[aria-pressed="true"] > svg {
    fill: currentColor;
}

/* Button on dark background */
.es-button.background {
    background: none;
    border-color: currentColor;
    color: currentColor;
    outline-color: currentColor;
}

.es-button.background[aria-pressed="true"] > svg,
.es-button.background:hover {
    background-color: var(--es-color-background);
    border-color: var(--es-color-background);
    color: var(--es-color-grey8);
}

/* Disabled button */
.es-button[disabled],
.es-button[disabled]:hover {
    background-color: transparent;
    border-color: var(--es-color-disabled);
    color: var(--es-color-disabled);
}

.es-button[disabled] > svg {
    fill: var(--es-color-disabled);
}

.es-button.primary[disabled],
.es-button.primary[disabled]:hover {
    background-color: var(--es-color-disabled);
    color: var(--es-color-background);
}

.es-button.primary[disabled] > svg {
    fill: var(--es-color-background);
}

/* Checkbox sizes, by default size is inherited from the parent */
.es-check.small,
.es-check-input.small {
    font-size: var(--es-font-size-16);
    line-height: var(--es-line-height);
}

.es-check.medium,
.es-check-input.medium {
    font-size: var(--es-font-size-20);
    line-height: var(--es-line-height);
}

.es-check.large,
.es-check-input.large {
    font-size: var(--es-font-size-24);
    line-height: var(--es-line-height);
}

.es-check-input {
    -webkit-appearance: none;
    background-color: var(--es-color-background);
    border: 2px solid var(--es-color-border);
    box-shadow: 0 0 0 0.15em var(--es-color-background) inset;
    box-sizing: border-box;
    display: inline-block;
    font: inherit;
    height: calc(1em + 4px);
    margin: 0;
    padding: 0;
    position: relative;
    vertical-align: middle;
    width: calc(1em + 4px);
    transition: background-color var(--es-animation-hover), border-color var(--es-animation-hover);
}

.es-check-input:hover {
    border-color: var(--es-color-foreground);
}

.es-check-input:checked {
    background-color: var(--es-color-theme2);
}

label > .es-check-input {
    margin-right: 0.5em;
}

.es-check-input + label {
    margin-left: 0.5em;
    vertical-align: middle;
}

.es-check > span {
    vertical-align: middle;
}

/* For WHCM only, since background is shown in high contrast mode. */
/* It's a bit smaller than the regular thumb, since doesn't center */
/* as nice as the background + box-shadow solution. Doesn't solve */
/* the indeterminate state */
.es-check-input:before {
    border-color: var(--es-color-theme2);
    border-style: none;
    border-width: calc(0.3em);
    content: '';
    display: block;
    height: calc(0.6em);
    left: 0.2em;
    position: relative;
    top: 0.2em;
    width: calc(0.6em);
}

.es-check-input:checked:before {
    border-style: solid;
}

/* Indeterminate checkbox */
.es-check-input:checked,
.es-check-input[type='checkbox']:indeterminate {
    background-color: var(--es-color-theme2);
}

.es-check-input[type='checkbox']:indeterminate:before {
    border-color: white transparent transparent white;
    border-style: solid;
    border-width: calc(0.35em);
    height: calc(0.7em);
    left: 0.15em;
    top: 0.15em;
    width: calc(0.7em);
}

/* Disabled checkbox */
.es-check-input[disabled] {
    border: 2px solid var(--es-color-disabled) !important;
    background-color: var(--es-color-background) !important;
}

.es-check-input[disabled]:before {
    border-color: var(--es-color-disabled) !important;
}

.es-check-input[disabled]:checked,
.es-check-input[disabled][type='checkbox']:indeterminate {
    background-color: var(--es-color-disabled) !important;
}

/* TODO: merge some styling with the popup. They are very similar. */
/* added to the body when dialog is open, stop main document from
 * scrolling in the background. */
body.es-dialog-open {
    overflow: hidden;
}

.es-dialog {
    align-items: center;
    background-color: rgba(var(--es-color-grey6-rgb), 0.85);
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    left: 0;
    overflow: hidden auto;
    padding: 32px 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99;
}

.es-dialog[hidden] {
    display: none;
}

.es-dialog-window {
    background-color: #fff;
    border: 16px solid rgba(var(--es-color-grey3-rgb), 0.85);
    box-shadow: 0 2px 0 0 var(--es-color-theme2) inset;
    box-sizing: border-box;
    max-width: calc(100vw);
    position: relative;
}

.es-dialog.large > .es-dialog-window {
    width: 544px;
}

.es-dialog-content {
    margin: 34px 16px 32px;
}

.es-dialog-focus-trap {
    position: absolute;
}

.es-dialog-header {
    color: var(--es-color-grey7);
    margin: 0 0 24px;
    padding: 0;
}

.es-dialog-header:before {
    /* To keep the header text away from the close icon */
    content: '';
    float: right;
    height: 1em;
    width: 32px;
}

.es-dialog-buttons {
    justify-content: flex-end;
    display: flex;
    flex-wrap: wrap;
    margin: 16px -8px -8px;
}

.es-dialog-buttons .es-button {
    margin: 8px;
}

.es-dialog-buttons.full-width .es-button {
    width: 100%;
}

.es-dialog-close {
    background-color: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    margin: 0;
    padding: 8px 8px 6px;
    position: absolute;
    right: 4px;
    top: 4px;
}

.es-dialog-close > svg {
    border-bottom: 2px solid transparent;
    box-sizing: content-box;
    display: block;
    fill: currentColor;
    height: calc(1em + 4px);
    width: calc(1em + 4px);
}

.es-dialog-close:hover > svg {
    border-bottom: 2px solid var(--es-color-theme2);
}

/* Larger padding, bigger content */
.es-dialog-content.large {
    margin: 50px 32px 48px;
}

.es-dialog-content.large .es-dialog-header {
    text-align: center;
}

.es-dialog-content.large .es-dialog-header:before {
    content: none;
}

.es-dialog-content.large .es-dialog-buttons {
    margin-top: 32px;
}

.es-dialog-content.large + .es-dialog-close {
    top: 12px;
}

.es-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.es-fieldset > legend {
    border: 0;
    margin: 0 0 8px;
    padding: 0;
}

.es-fieldset > ol,
.es-fieldset > ul {
    border: 0;
    font-size: var(--es-font-size-16);
    line-height: var(--es-line-height);
    list-style: none;
    margin: 0;
    padding: 0;
}

.es-fieldset > ol > li,
.es-fieldset > ul > li {
    margin: 4px 0 0;
}

:focus {
    outline-color: var(--es-color-focus);
    outline-offset: var(--es-focus-offset, 1px);
    outline-style: var(--es-focus-style, solid);
    outline-width: var(--es-focus-width, 2px);
}

/* Disable Firefox specific focus ring, we got our own. */
::-moz-focus-inner {
    border: 0;
    outline: 0;
}

/* Don't show focus ring on elements that are */
/* removed from the default navigation flow */
[tabindex="-1"]:focus {
    outline-style: 0;
}

.es-icon-link {
    align-items: center;
    background-color: transparent;
    border-style: none;
    color: inherit;
    display: inline-flex;
    font: inherit;
    padding: 0;
    text-decoration: none;
    transition: color var(--es-animation-hover);
}

.es-icon-link.colored,
.es-icon-link.theme {
    color: var(--es-color-link);
}

.es-icon-link:hover {
    color: inherit;
}

/* Text */
.es-icon-link span {
    border-bottom: .1em solid transparent;
    transition: box-shadow var(--es-animation-hover);
}

.es-icon-link:hover span {
    background-image: none;
    border-bottom: 0.1em solid var(--es-color-theme2);
    color: inherit;
}

/* Icon */
.es-icon-link > svg {
    color: inherit;
    fill: currentColor;
}

.es-icon-link > .icon {
    color: var(--es-color-theme1);
    height: calc(1em + 4px);
    width: auto;
    transition: color var(--es-animation-hover), transform var(--es-animation-hover);
}

.es-icon-link.aligned > .icon {
    width: calc(1em + 4px);
}

.es-icon-link[aria-expanded="true"] > .icon {
    color: var(--es-color-theme2);
    transform: scaleY(-1);
}

.es-icon-link > .icon:first-child {
    margin-right: 0.4em;
}

.es-icon-link > .icon:last-child {
    margin-left: 0.4em;
}

.es-icon-link:hover .icon {
    color: var(--es-color-theme2);
}

/* Disabled, aria-disabled for links and disabled for buttons */
.es-icon-link[aria-disabled="true"] > .icon,
.es-icon-link[aria-disabled="true"] span,
.es-icon-link[aria-disabled="true"],
.es-icon-link[aria-disabled="true"]:hover > .icon,
.es-icon-link[aria-disabled="true"]:hover span,
.es-icon-link[disabled] > .icon,
.es-icon-link[disabled] span,
.es-icon-link[disabled],
.es-icon-link[disabled]:hover > .icon,
.es-icon-link[disabled]:hover span {
    border-bottom-color: transparent;
    color: var(--es-color-grey5);
    cursor: default;
}

/* Styling for the input field without the input box */
.es-input-text {
    display: block;
    position: relative;
    font-size: var(--es-font-size-20);
    line-height: var(--es-line-height);
}

.es-input-text.small {
    font-size: var(--es-font-size-16);
}

.es-input-text.large {
    font-size: var(--es-font-size-24);
}

.es-input-text > input {
    -webkit-appearance: none;
    background-color: transparent;
    border-color: var(--es-color-border);
    border-style: solid;
    border-width: 0 0 2px;
    box-sizing: border-box;
    color: inherit;
    display: block;
    font: inherit;
    height: 3.2em;
    margin: 0;
    padding: 1em 0 0;
    position: relative;
    vertical-align: text-bottom;
    width: 100%;
}

/* Darken border line on focus/hover */
.es-input-text > input:focus,
.es-input-text > input:hover {
    border-color: var(--es-color-foreground);
}

/* Label placement */
.es-input-text > label {
    color: var(--es-color-theme1);
    display: block;
    font-size: var(--es-font-size-16);
    left: 0;
    padding: 0;
    position: absolute;
    top: 0;
    white-space: nowrap;
    z-index: 1;
    transition: font-size var(--es-animation-hover), transform var(--es-animation-hover);
}

.es-input-text.small > label {
    font-size: var(--es-font-size-14);
}

/* Move label to the textarea field when empty (placeholder visible) */
.es-input-text > input:placeholder-shown + label {
    cursor: text;
    font-size: inherit;
    transform: translateY(1.6em);
}

/* But not when input field has focus */
.es-input-text > input:focus + label {
    cursor: default;
    font-size: var(--es-font-size-16);
    transform: translateY(0);
}

.es-input-text.small > input:focus + label {
    font-size: var(--es-font-size-14);
}

/* Error text */
.es-input-text.error > input {
    border-color: var(--es-color-error);
}

.es-input-text > .es-input-text-error {
    color: var(--es-color-error);
    font-size: var(--es-font-size-16);
    line-height: var(--es-line-height);
}

.es-input-text > .es-input-text-error:empty {
    display: none;
}

.es-input-text.small > .es-input-text-error {
    font-size: var(--es-font-size-14);
}

/* Styling for the accessible input field */
.es-input-text-a {
    display: block;
    font-size: 20px;
    line-height: var(--es-line-height);
    padding: 8px;
    position: relative;
    width: 100%;
}

/* Label placement */
.es-input-text-a > label {
    color: var(--es-color-grey8);
    font-size: 14px;
    line-height: calc(1em + 8px);
}

.es-input-text-a > .message {
    font-size: 14px;
    line-height: calc(1em + 8px);
    min-height: calc(1em + 8px);
}

.es-input-text-a > .message.error {
    color: var(--es-color-error);
}

.es-input-text-a > .message.tip {
    color: var(--es-color-grey8);
    font-style: italic;
}

/* Focus & Hover */
.es-input-text-a > input {
    -webkit-appearance: none;
    background-color: var(--es-color-grey0);
    border-color: var(--es-color-grey5) var(--es-color-grey5) var(--es-color-grey8);
    border-style: solid;
    border-width: 1px 1px 2px;
    box-sizing: border-box;
    color: var(--es-color-grey8);
    display: block;
    font: inherit;
    height: 40px;
    padding: 1px 8px 0;
    position: relative;
    vertical-align: text-bottom;
    width: 100%;
}

.es-input-text-a > input[aria-invalid] {
    background: var(--es-color-secondary-very-pale-orange);
    border-color: var(--es-color-error);
    border-width: 2px;
    padding: 0 7px;
}

.es-input-text-a > input:focus,
.es-input-text-a > input:hover {
    background-color: var(--es-color-grey0);
    border-color: var(--es-color-grey8);
    border-width: 2px;
    padding: 0 7px;
}

.es-link {
    background-color: transparent;
    border-color: transparent;
    border-style: solid;
    border-width: 0 0 2px;
    color: inherit;
    font: inherit;
    padding: 0;
    text-decoration: none;
    transition: border-color var(--es-animation-hover), color var(--es-animation-hover);
}

.es-link.bold {
    font-weight: bold;
}

.es-link.theme {
    color: var(--es-color-theme1);
}

.es-link.colored {
    color: var(--es-color-link);
}

.es-link.underline,
.es-link.inline {
    background-image: linear-gradient(currentColor 0, currentColor 100%);
    background-position: 0 1.1em;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    line-height: calc(1em + 8px);
}

.es-link.external:after {
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015%2024%22%3E%3Cpath%20d%3D%22M13.149%2014.39V5.544H4.224V7.34h5.862L1.98%2015.393l1.347%201.32%208.053-8.106v5.782z%22%20fill%3D%22%238E8E8E%22%2F%3E%3C%2Fsvg%3E);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 0.55em;
    content: '';
    display: inline-block;
    height: 1em;
    vertical-align: middle;
    width: 0.7em;
}

/* State: Selected */
.es-link.selected {
    background-image: none;
    border-bottom: 2px solid currentColor;
}

/* State: Hover */
.es-link:hover {
    background-image: none;
    border-bottom: 2px solid var(--es-color-theme2);
    color: inherit;
}

.es-list {
    counter-reset: es-list 0;
    list-style: none;
    padding-left: 32px;
}

.es-list > li {
    position: relative;
}

.es-list > li:nth-last-child(n+2) {
    margin: 0 0 8px;
}

.es-list > li:before {
    color: var(--es-color-theme2);
    counter-increment: es-list;
    position: absolute;
    right: 100%;
}

ol.es-list > li:before {
    content: counter(es-list) ".";
    font-weight: 700;
    padding-right: .25em;
}

ul.es-list > li:before {
    content: '•';
    padding-right: .5em;
}

.es-list.none {
    padding-left: 0;
}

.es-list.none > :before {
    content: none;
}

.es-pagination > ul {
    display: flex;
    padding: 0;
    margin: 0;
    align-items: center;
}

.es-pagination li {
    display: inline-block;
    padding: 0;
    margin: 0 16px 0 0;
}

.es-pagination li:last-child {
    margin-right: 0;
}

.es-pagination li > .es-icon-link {
    display: flex;
}

.es-pagination [aria-current="page"] {
    border-bottom: 2px solid currentColor;
    font-weight: 700;
}

.es-para {
    font-variant-ligatures: common-ligatures;
    font-variant-numeric: oldstyle-nums proportional-nums;
    margin: 0 0 16px;
    max-width: 34em;
}

.es-para sub,
.es-para sup {
    font-size: 70%;
    line-height: 1;
    font-variant-numeric: lining-nums proportional-nums;
}

.es-para.full-width {
    max-width: none;
}

.es-popup {
    background-color: rgba(var(--es-color-grey2-rgb), 0.85);
    border: 1px solid var(--es-color-grey5);
    box-sizing: border-box;
    left: 0;
    max-width: calc(100vw);
    padding: 16px;
    position: fixed;
    top: 0;
    z-index: 99;
}

.es-popup[hidden] {
    display: none;
}

.es-popup.small {
    width: 352px;
}

.es-popup.medium {
    width: 512px;
}

.es-popup.large {
    width: 672px;
}

.es-popup-content {
    background-color: var(--es-color-background);
    padding: 32px 16px;
    position: relative;
}

.es-popup-focus-trap {
    position: absolute;
}

.es-popup-pointer {
    background: left bottom / 16px 16px no-repeat;
    display: block;
    height: 17px;
    position: absolute;
    width: 17px;
}

.es-popup-header {
    margin: 0 0 24px;
    padding: 0;
}

.es-popup-header:before {
    /* To keep the header text away from the close icon */
    content: '';
    float: right;
    height: 1em;
    width: 32px;
}

.es-popup-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 16px -8px -8px;
}

.es-popup-buttons .es-button {
    margin: 8px;
}

.es-popup-buttons.full-width .es-button {
    width: 100%;
}

.es-popup-close {
    background-color: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    margin: 0;
    padding: 8px 8px 6px;
    position: absolute;
    right: 20px;
    top: 20px;
}

.es-popup-close > svg {
    border-bottom: 2px solid transparent;
    box-sizing: content-box;
    display: block;
    fill: currentColor;
    height: calc(1em + 4px);
    width: calc(1em + 4px);
}

.es-popup-close:hover > svg {
    border-bottom: 2px solid var(--es-color-theme2);
}

/* Popup below the activator */
.below.es-popup {
    border-top-color: transparent;
    box-shadow: 7px -9px 0px -7px var(--es-color-theme2);
}

.below.es-popup.pointer-offset {
    box-shadow: 0px 2px 0px 0px var(--es-color-theme2);
}

.below > .es-popup-pointer {
    background-position: left top;
    border-left: 1px solid var(--es-color-grey5);
    left: -1px;
    top: -17px;
    background-image: linear-gradient(225deg, transparent 11px, var(--es-color-theme2) 11px, var(--es-color-theme2) 13px, rgba(var(--es-color-grey2-rgb), 0.85) 13px);
}

/* Popup above the activator */
.above.es-popup {
    border-bottom-color: transparent;
    box-shadow: 7px 9px 0px -7px var(--es-color-theme2);
}

.above.es-popup.pointer-offset {
    box-shadow: 0px 2px 0px 0px var(--es-color-theme2);
}

.above > .es-popup-pointer {
    background-position: left bottom;
    border-left: 1px solid var(--es-color-grey5);
    bottom: -17px;
    left: -1px;
    background-image: linear-gradient(-45deg, transparent 11px, var(--es-color-theme2) 11px, var(--es-color-theme2) 13px, rgba(var(--es-color-grey2-rgb), 0.85) 13px);
}

/* Popup right the activator */
.right.es-popup {
    border-left-color: transparent;
    box-shadow: -9px 7px 0px -7px var(--es-color-theme2);
}

.right.es-popup.pointer-offset {
    box-shadow: -2px 0px 0px 0px var(--es-color-theme2);
}

.right > .es-popup-pointer {
    background-position: top left;
    border-top: 1px solid var(--es-color-grey5);
    left: -17px;
    top: -1px;
    background-image: linear-gradient(45deg, transparent 11px, var(--es-color-theme2) 11px, var(--es-color-theme2) 13px, rgba(var(--es-color-grey2-rgb), 0.85) 13px);
}

/* Popup left the activator */
.left.es-popup {
    border-right-color: transparent;
    box-shadow: 9px 7px 0px -7px var(--es-color-theme2);
}

.left.es-popup.pointer-offset {
    box-shadow: 2px 0px 0px 0px var(--es-color-theme2);
}

.left > .es-popup-pointer {
    background-position: top right;
    border-top: 1px solid var(--es-color-grey5);
    right: -17px;
    top: -1px;
    background-image: linear-gradient(-45deg, transparent 11px, var(--es-color-theme2) 11px, var(--es-color-theme2) 13px, rgba(var(--es-color-grey2-rgb), 0.85) 13px);
}

.es-progress-bar {
    background: var(--es-color-grey1);
    border-radius: 4px;
    border: 0 solid;
    box-shadow: 0 0 0 1px var(--es-color-grey5) inset;
    height: 8px;
    width: 100%;
}

/* Mozilla Firefox */
.es-progress-bar::-moz-progress-bar {
    background: var(--es-color-theme2);
    border-radius: 4px;
    height: 8px;
    transform: translateY(-1px);
}

/* Internet explorer / Edge */
.es-progress-bar::-ms-fill {
    background-color: var(--es-color-theme2);
}

/* Webkit */
.es-progress-bar::-webkit-progress-bar {
    background: transparent;
}

.es-progress-bar::-webkit-progress-value {
    background: var(--es-color-theme2);
    border-radius: 4px;
    box-sizing: content-box;
}

.es-progress-indicator {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    position: relative;
}

.es-progress-indicator:before {
    bottom: 0;
    color: var(--es-color-theme1);
    content: attr(aria-valuenow) "%";
    height: 1em;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}

/* Hide progress percentage when none available */
.es-progress-indicator:not([aria-valuenow]):before {
    display: none;
}

.es-progress-indicator > div {
    border-radius: 50%;
    border-style: solid;
    border-width: 4px;
    display: block;
    height: 48px;
    width: 48px;
    border-color: var(--es-color-grey2) var(--es-color-grey2) var(--es-color-theme2) var(--es-color-theme2);
    /* Max animation time 10 minutus */
    animation: es-progress-indicator-rotate 5s linear 120;
}

/* Stop animation and change color when 100% progress */
.es-progress-indicator[aria-valuenow="100"] > div {
    animation: none;
    border-color: var(--es-color-theme1);
}

/* Small, don't show percentage and reduce size */
.es-progress-indicator.small:before {
    content: none;
}

.es-progress-indicator.small > div {
    border-width: 2px;
    height: 16px;
    width: 16px;
}

@keyframes es-progress-indicator-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.es-check-input[type='radio'],
.es-check-input[type='radio']:before {
    border-radius: 50%;
}

.es-listbox {
    display: block;
    position: relative;
}

.es-listbox > label {
    color: var(--es-color-theme1);
    display: block;
    font-size: var(--es-font-size-16);
    left: 0;
    padding: 0;
    position: relative;
    top: 0;
    white-space: nowrap;
    z-index: 2;
}

.es-listbox > .es-listbox-button,
.es-listbox > select {
    -webkit-appearance: none;
    background-color: transparent;
    border-color: var(--es-color-grey4);
    border-radius: 0;
    border-style: solid;
    border-width: 0 0 2px;
    display: block;
    color: inherit;
    font: inherit;
    height: calc(2em + 4px);
    padding: 0 1.1em 0 0;
    width: 100%;
    position: relative;
    text-align: left;
    z-index: 1;
}

.es-listbox > .es-listbox-button {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.es-listbox > svg {
    bottom: 4px;
    box-sizing: border-box;
    color: var(--es-color-theme1);
    display: block;
    fill: currentColor;
    height: 2em;
    padding: 8px 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: 1;
}

.es-listbox-button[aria-expanded='true'] {
    background-color: var(--es-color-grey2);
    border-bottom: 2px solid var(--es-color-theme2);
    box-shadow: 0 0 0 16px var(--es-color-grey2), -16px -32px 0 0 var(--es-color-grey2), 16px -32px 0 0 var(--es-color-grey2);
}

.es-listbox-button[aria-expanded='true'] + svg {
    color: var(--es-color-theme2);
    transform: scaleY(-1);
}

.es-listbox-popup {
    align-content: stretch;
    box-shadow: 0 0 0 1px var(--es-color-grey5);
    border-color: var(--es-color-grey2);
    border-style: solid;
    border-width: 0 16px 16px;
    display: flex;
    margin: 0;
    min-height: 240px;
    padding-top: 76px;
    position: absolute;
    z-index: 2;
}

.es-listbox-list {
    background-color: #fff;
    flex: 1 1 100%;
    list-style: none;
    margin: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 16px 0;
}

.es-listbox-list > li {
    padding: 4px 16px;
}

.es-listbox-list > li:hover {
    background-color: var(--es-color-grey1);
}

.es-listbox-list > [aria-selected='true'] > span {
    border-bottom: 2px solid var(--es-color-theme2);
}

/* Tertiary styling */
.es-listbox.tertiary > .es-listbox-button,
.es-listbox.tertiary > select {
    padding: 0 2.2em 0 0;
}

.es-listbox.tertiary > svg {
    border-color: var(--es-color-grey4);
    border-radius: 0;
    border-style: solid;
    border-width: 2px;
    bottom: 4px;
    display: block;
    fill: currentColor;
    height: 2em;
    padding: 6px;
    pointer-events: none;
    position: absolute;
    right: 0;
    width: 2em;
    z-index: 1;
}

.tertiary > .es-listbox-button[aria-expanded='true'] + svg {
    border-color: var(--es-color-theme2);
    background-color: var(--es-color-theme2);
    color: #fff;
}

.es-skip-link {
    background-color: var(--es-color-background);
    border: 0;
    clip: rect(0, 0, 0, 0);
    color: var(--es-color-foreground);
    height: 1px;
    left: 6px;
    margin: -1px;
    overflow: hidden;
    padding: 4px;
    position: fixed;
    text-decoration: none;
    top: 5px;
    width: 1px;
    z-index: 1000;
}

.es-skip-link:focus {
    clip: auto;
    height: auto;
    width: auto;
}

/* Container */
.es-slider {
    border: 0;
    font-size: 16px;
    line-height: var(--es-line-height);
    font-variant-numeric: lining-nums tabular-nums;
    margin: 0;
    padding: 0 0 2em;
    position: relative;
    width: 100%;
}

/* Input field */
.es-slider-input {
    display: none;
}

/* Label field */
.es-slider-label {
    font-size: 20px;
    line-height: var(--es-line-height);
}

/* Slider scale labels */
.es-slider-scale {
    display: flex;
    justify-content: space-between;
}

.es-slider-scale-label {
    margin-top: 12px;
    position: relative;
}

.es-slider-scale-label:after {
    background-color: var(--es-color-grey4);
    content: '';
    display: block;
    height: 10px;
    left: 2px;
    position: absolute;
    top: -7px;
    width: 2px;
}

.es-slider-scale-label:last-child:after {
    left: auto;
    right: 2px;
}

/* Slider track */
.es-slider-selected {
    border-radius: 4px;
    border: 4px solid var(--es-color-theme2);
    bottom: 0%;
    display: block;
    left: 0%;
    position: absolute;
    right: 0%;
    top: 0%;
    margin: -1px;
}

.es-slider-track {
    background-color: var(--es-color-grey1);
    border: 1px solid var(--es-color-grey5);
    border-radius: 4px;
    height: 8px;
    position: relative;
    margin: 16px 0 0;
}

.es-slider.label .es-slider-track {
    margin: 40px 0 0;
}

/* Thumb button */
.es-slider-thumb,
.es-slider-thumb:after,
.es-slider-thumb:before {
    display: block;
    font: inherit;
    position: absolute;
}

.es-slider-thumb {
    background-color: var(--es-color-theme2);
    border-radius: 50%;
    border: 3px solid var(--es-color-background);
    height: 18px;
    left: 0;
    padding: 0;
    transform: translate(-9px, -5px);
    width: 18px;
}

.es-slider.label .es-slider-thumb:before {
    content: attr(aria-valuenow);
    left: 6px;
    position: absolute;
    top: -36px;
    transform: translateX(-50%);
}

.es-slider.label .es-slider-thumb.move:before {
    left: 12px;
    transform: translateX(-100%);
}

.es-slider.label .es-slider-thumb + .es-slider-thumb.move:before {
    left: 0px;
    transform: translateX(0%);
}

.es-slider.label .es-slider-thumb:after {
    background-color: var(--es-color-grey4);
    content: '';
    height: 10px;
    left: 5px;
    top: -15px;
    width: 2px;
}

.es-slider-thumb:active,
.es-slider-thumb:hover {
    border-color: var(--es-color-theme2);
    background-color: var(--es-color-background);
}

.es-slider.label .es-slider-thumb:active:after,
.es-slider.label .es-slider-thumb:hover:after {
    height: 7px;
}

/* Thumb label */
.es-slider-thumb-tooltip {
    background-position: -9px -10px, right bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%, 11px 100%;
    bottom: 20px;
    display: none;
    height: 36px;
    padding: 0 16px;
    position: absolute;
    right: 6px;
    bottom: calc(100% + 4px);
    background-image: linear-gradient(0deg, var(--es-color-theme2) 2px, var(--es-color-grey1) 0), linear-gradient(45deg, transparent 8px, var(--es-color-theme2) 0, var(--es-color-theme2) 10px, var(--es-color-grey1) 0);
}

.es-slider-thumb-tooltip.show-right {
    background-position: 9px -10px, left bottom;
    left: 6px;
    right: auto;
    background-image: linear-gradient(0deg, var(--es-color-theme2) 2px, var(--es-color-grey1) 0), linear-gradient(-45deg, transparent 8px, var(--es-color-theme2) 0, var(--es-color-theme2) 10px, var(--es-color-grey1) 0);
}

/* Show tooltip on focus, hover, etc */
.es-slider-thumb:focus .es-slider-thumb-tooltip,
.es-slider-thumb:hover .es-slider-thumb-tooltip,
.es-slider:active .es-slider-thumb-tooltip,
.es-slider:focus-within .es-slider-thumb-tooltip,
.es-slider:hover .es-slider-thumb-tooltip {
    display: block;
}

/* Checkbox sizes, by default size is inherited from the parent */
.es-switch.small,
.es-switch-input.small {
    font-size: var(--es-font-size-16);
    line-height: var(--es-line-height);
}

.es-switch.medium,
.es-switch-input.medium {
    font-size: var(--es-font-size-20);
    line-height: var(--es-line-height);
}

.es-switch.large,
.es-switch-input.large {
    font-size: var(--es-font-size-24);
    line-height: var(--es-line-height);
}

.es-switch-input {
    -webkit-appearance: none;
    background-color: var(--es-color-background);
    border: 2px solid var(--es-color-border);
    box-sizing: border-box;
    display: inline-block;
    font: inherit;
    height: calc(1em + 4px);
    margin: 0;
    padding: 0;
    position: relative;
    vertical-align: middle;
    width: calc(2em + 8px);
    transition: border-color var(--es-animation-hover), box-shadow var(--es-animation-hover);
}

.es-switch-input:hover {
    border-color: var(--es-color-foreground);
}

.es-switch-input:before {
    background-color: var(--es-color-grey4);
    border-radius: 50%;
    border: 4px solid var(--es-color-grey4);
    color: var(--es-color-theme2);
    content: '';
    font-variant-numeric: oldstyle-nums proportional-nums;
    height: 1em;
    line-height: 0.9;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    transform: translateX(-1.1em) scale(0.5);
    width: 1em;
    transition: color var(--es-animation-hover), transform var(--es-animation-hover);
}

.es-switch-input:checked:before {
    background-color: var(--es-color-theme2);
    border: 0.5em solid var(--es-color-theme2);
    color: var(--es-color-background);
    content: '';
    transform: translateX(0%) scale(0.7);
}

.es-switch-input {
    border-radius: calc(0.5em + 2px);
}

label > .es-switch-input {
    margin-right: 0.4em;
}

.es-switch-input + label {
    margin-left: 0.4em;
    vertical-align: middle;
}

.es-switch > span {
    vertical-align: middle;
}

/* Disabled switch */
.es-switch-input[disabled] {
    border-color: var(--es-color-disabled) !important;
    box-shadow: none !important;
}

.es-switch-input[disabled]:before {
    border-color: var(--es-color-disabled) !important;
    background-color: var(--es-color-disabled);
}

.es-switch-input[disabled] + label,
.es-switch-input[disabled] + span {
    color: var(--es-color-grey6) !important;
}

/* Generic tab */
.es-tab-panel > [role="tablist"] > [role="tab"] {
    -webkit-appearance: none;
    background-color: transparent;
    border: 0 solid transparent;
    box-sizing: border-box;
    color: inherit;
    display: inline-block;
    font: inherit;
    height: 2em;
    margin: 0;
    padding: 2px 16px 0;
    transition: box-shadow var(--es-animation-hover);
    z-index: 0;
}

.es-tab-panel > [role="tabpanel"][hidden] {
    display: none;
}

/* Horizontal tabs (default) */
.es-tab-panel > [role="tabpanel"] {
    overflow: auto;
}

.es-tab-panel > [role="tablist"] {
    box-shadow: 0 -1px 0 0 var(--es-color-foreground) inset;
}

/* Focus/Hover/Selected tab state */
.es-tab-panel > [role="tablist"] > [role="tab"]:hover {
    box-shadow: 0 -4px 0 0 var(--es-color-theme2) inset;
}

.es-tab-panel > [role="tablist"] > [aria-selected="true"][role="tab"] {
    box-shadow: 0 -4px 0 0 var(--es-color-foreground) inset;
}

.es-table {
    border-collapse: collapse;
    font-variant-numeric: lining-nums tabular-nums;
    margin-bottom: 1em;
    max-width: 100%;
}

.es-table.full-width {
    width: 100%;
}

.es-table td,
.es-table th {
    font-weight: inherit;
    padding: 2px 4px;
    text-align: left;
}

.es-table > caption {
    background: inherit;
    padding: 1em;
}

/* Only show hover on table body rows */
.es-table > tbody > tr:hover > td,
.es-table > tbody > tr:hover > th,
.es-table > tr:hover > td,
.es-table > tr:hover > th {
    background-color: var(--es-color-grey1);
}

/* Remove padding for the first and last cell */
.es-table td:first-child,
.es-table th:first-child {
    padding-left: 0;
}

.es-table td:last-child,
.es-table th:last-child {
    padding-right: 0;
}

/* All table cell gets a light bottom border */
.es-table td, th {
    border-bottom: 1px solid var(--es-color-grey4);
}

/* The last row in the thead gets dark bottom border */
.es-table thead tr:last-child th {
    border-bottom: 1px solid var(--es-color-foreground);
}

.es-tag {
    background-color: var(--es-color-grey2);
    border-radius: 1.6em;
    border: 2px solid transparent;
    box-sizing: border-box;
    display: inline-block;
    font: inherit;
    height: 2em;
    line-height: calc(2em - 4px);
    max-width: 100%;
    overflow: hidden;
    padding: 0 calc(0.8em - 2px);
    text-overflow: ellipsis;
    transition: background-color .3s, border-color .3s;
    vertical-align: middle;
    white-space: nowrap;
}

/* Tag with icon */
.es-tag svg {
    box-sizing: border-box;
    fill: currentColor;
    height: calc(2em - 4px);
    margin: 0 0.5em 0 calc(-0.3em + 2px);
    padding: calc(0.5em - 4px) 0;
    vertical-align: top;
    width: auto;
    transition: fill var(--es-animation-hover);
}

.es-tag svg:last-child {
    margin: 0 calc(-0.3em + 2px) 0 0.5em;
}

a.es-tag svg,
button.es-tag svg {
    color: var(--es-color-theme1);
}

a.es-tag:hover,
button.es-tag:hover {
    background-color: var(--es-color-grey0);
    border-color: var(--es-color-theme2);
}

a.es-tag:hover svg,
button.es-tag:hover svg {
    color: currentColor;
}

/* Tag sizes */
.es-tag.small {
    font-size: 14px;
}

.es-tag.medium {
    font-size: 16px;
}

.es-tag.large {
    font-size: 20px;
}

/* Tag messaging colors */
.es-tag.confirm {
    background-color: var(--es-color-confirmation-ondark);
    color: black;
}

.es-tag.info {
    background-color: var(--es-color-information-ondark);
    color: black;
}

.es-tag.warning {
    background-color: var(--es-color-warning-ondark);
    color: black;
}

.es-tooltip {
    background-color: var(--es-color-grey1);
    border-color: var(--es-color-grey5) var(--es-color-grey5) transparent;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 2px 0 0 var(--es-color-theme2);
    font-size: var(--es-font-size-16);
    left: 0;
    line-height: var(--es-line-height);
    opacity: 0;
    padding: 4px 8px;
    position: absolute;
    top: 0;
    transition: opacity var(--es-animation-hover);
    z-index: 99;
    /* 100% viewport width - 20px for the scrollbar */
    max-width: calc(100vw - 48px);
}

.es-tooltip:after {
    /* Extra element so pointer can travel to tooltip */
    content: '';
    height: 18px;
    left: 0;
    position: absolute;
    right: 0;
    top: 100%;
}

.es-tooltip.small {
    width: 320px;
}

.es-tooltip.medium {
    width: 480px;
}

.es-tooltip.large {
    width: 640px;
}

.es-tooltip.visible {
    opacity: 1;
}

.es-tooltip[hidden] {
    display: none;
}

.es-tooltip > div {
    background: left bottom / 16px 16px no-repeat;
    border-left: 1px solid var(--es-color-grey5);
    bottom: -17px;
    display: block;
    height: 18px;
    left: -1px;
    position: absolute;
    width: 17px;
    background-image: linear-gradient(-45deg, transparent 11px, var(--es-color-theme2) 11px, var(--es-color-theme2) 13px, var(--es-color-grey1) 13px);
}

/* Popup below the activator */
.es-tooltip.below {
    border-color: transparent var(--es-color-grey5) var(--es-color-grey5);
    border-style: solid;
    box-shadow: 0 -2px 0 0 var(--es-color-theme2);
}

.es-tooltip.below:after {
    bottom: 100%;
    top: auto;
}

.es-tooltip.below > div {
    background: left top / 16px 16px no-repeat;
    bottom: auto;
    top: -17px;
    background-image: linear-gradient(225deg, transparent 11px, var(--es-color-theme2) 11px, var(--es-color-theme2) 13px, var(--es-color-grey1) 13px);
}

/* Flip pointer horizontal */
.es-tooltip.flip > div {
    left: auto;
    right: -1px;
}

.es-footer {
    align-items: stretch;
    border-color: var(--es-color-theme2);
    border-style: solid;
    border-width: 2px 0 0;
    box-sizing: border-box;
    color: rgba(var(--es-color-base-dark-grey-rgb), 1);
    display: flex;
    flex-direction: column;
    font-size: var(--es-font-size-14);
    line-height: var(--es-line-height);
    margin: 32px 0 0;
    padding: 32px 8px;
    position: relative;
    width: 100%;
    z-index: 0;
}

.es-footer-content {
    flex: 1 1 auto;
    margin: 0 8px;
}

.es-footer-links {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.es-footer-links > li {
    display: block;
    margin: 0 0 16px 0;
    white-space: nowrap;
}

.es-footer-nonsolus {
    align-items: flex-start;
    display: flex;
    margin: 0 8px 24px;
}

.es-footer-nonsolus * {
    display: block;
}

.es-footer-relx {
    align-items: flex-start;
    display: flex;
    margin: 24px 8px 0;
}

.es-footer-relx * {
    display: block;
}

@media (min-width: 576px) {
    .es-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
    .es-footer-links {
        flex-direction: row;
    }
    .es-footer-links > li {
        margin: 0 24px 8px 0;
        white-space: nowrap;
    }
}

@media (min-width: 768px) {
    .es-footer {
        flex-direction: row;
    }
    .es-footer-nonsolus {
        margin: 0 16px 0 8px;
    }
    .es-footer-relx {
        margin: 0 8px 0 16px;
    }
}

@media (min-width: 992px) {
    .es-footer {
        padding-left: 24px;
        padding-right: 24px;
    }
    .es-footer-links > li {
        margin-right: 32px;
    }
    .es-footer-nonsolus {
        margin-right: 24px;
    }
    .es-footer-relx {
        margin: 0 8px 0 24px;
    }
}

.es-header {
    background-color: var(--es-color-grey0);
    box-sizing: border-box;
    color: rgba(var(--es-color-base-dark-grey-rgb), 1);
    display: flex;
    flex-wrap: nowrap;
    font-size: 20px;
    justify-content: flex-end;
    line-height: calc(1em + 8px);
    min-height: 48px;
    padding: 8px 8px;
    position: relative;
}

.es-header .round,
.es-header .square {
    align-items: center;
    background-color: rgba(var(--es-color-base-dark-grey-rgb), 1);
    color: white;
    display: flex;
    flex: 0 0 auto;
    height: calc(1em + 20px);
    justify-content: center;
    line-height: 1;
    margin: 0;
    width: calc(1em + 20px);
}

.es-header .round {
    border-radius: 50%;
}

.es-header-icons {
    align-items: center;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.es-header-icons:last-child {
    padding: 0;
}

.es-header-icons-item {
    display: none;
    margin: 0 8px 0 24px;
}

.es-header-icons-item.button {
    margin: 0 8px 0 8px;
}

.es-header-icons-item.svg + .es-header-icons-item.button {
    margin: 0 8px 0 24px;
}

.es-header-icons-mobile {
    display: block;
}

.es-header-icons-button {
    -moz-appearance: none;
    -webkit-appearance: none;
    align-items: center;
    background-color: transparent;
    border: 0;
    color: inherit;
    display: flex;
    font: inherit;
    line-height: inherit;
    margin: 0 -8px;
    padding: 6px 8px;
    transition: background-color var(--es-animation-hover);
    width: auto;
}

.es-header-icons-button svg {
    border-color: transparent;
    border-style: solid;
    border-width: 2px 0;
    box-sizing: content-box;
    display: block;
    fill: currentColor;
    height: calc(1em + 4px);
    transition: border-color var(--es-animation-hover);
    width: auto;
}

.es-header-icons-button:hover > svg {
    border-bottom-color: var(--es-color-theme2);
}

.background .es-header-icons-button {
    align-items: center;
    background-color: var(--es-color-grey7);
    color: white;
    height: calc(1em + 20px);
    justify-content: center;
    line-height: 1;
    width: calc(1em + 20px);
}

.background .es-header-icons-button[aria-expanded="true"],
.background .es-header-icons-button:hover {
    background-color: var(--es-color-theme2);
}

.es-header-icons-button.profile {
    font-size: 16px;
    line-height: var(--es-line-height);
}

.es-header-icons-button.profile span {
    border-color: transparent;
    border-style: solid;
    border-width: 2px 0;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color var(--es-animation-hover);
    white-space: nowrap;
}

.es-header-icons-button.profile .round {
    transition: background-color var(--es-animation-hover);
    margin-left: 8px;
}

.es-header-icons-button.profile:hover span {
    border-bottom-color: var(--es-color-theme2);
}

.es-header-icons-button.profile:hover .round {
    background-color: var(--es-color-theme2);
}

.es-header-links {
    align-items: center;
    display: none;
    flex-wrap: wrap;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 7px 0 5px 0;
    white-space: nowrap;
}

.es-header-icons + .es-header-links {
    padding: 3px 0 9px 0;
}

.es-header-links > li {
    margin: 0 8px 0 24px;
}

.es-header-product {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    min-height: 30px;
    padding: 0 8px;
}

.es-header-product > a {
    align-items: center;
    color: inherit;
    display: flex;
    text-decoration: none;
}

.es-header-product-logo {
    height: 32px;
    width: auto;
    margin-right: 16px;
}

.es-header-product-name {
    border-color: transparent;
    border-style: solid;
    border-width: 6px 0 2px;
    font-size: 18px;
    font-weight: 700;
    line-height: calc(1em + 8px);
    transition: border-color var(--es-animation-hover);
}

.es-header-product-svg {
    max-height: 32px;
    max-width: 100%;
}

@media (max-width: 576px) {
    .es-header-product-svg {
        width: auto;
    }
}

a:hover > .es-header-product-name {
    border-bottom-color: var(--es-color-theme2);
}

.es-header-product-batch {
    display: none !important;
    font-size: 18px;
    margin-left: 1em;
    line-height: var(--es-line-height);
    padding: 8px 0 0;
}

.es-header-side {
    background-color: var(--es-color-grey0);
    bottom: 0;
    display: block;
    max-width: calc(100% - 16px);
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(0%) !important;
    visibility: visible;
    width: 320px;
    z-index: 9;
    transition: transform var(--es-animation-hover), visibility 0s;
}

.es-header-side[hidden] {
    transform: translateX(100%) !important;
    visibility: hidden;
    transition: transform var(--es-animation-hover), visibility var(--es-animation-hover) 0s;
}

.es-header-side:before {
    background-color: rgba(var(--es-color-grey2-rgb), 0.85);
    bottom: 0;
    content: "";
    position: absolute;
    right: 100%;
    top: 0;
    width: 100vw;
}

.es-header-side[hidden]:before {
    content: none;
}

.es-header-side-content {
    bottom: 0;
    left: 0;
    overflow: hidden auto;
    padding: 16px;
    position: absolute;
    right: 0;
    top: 0;
}

.es-header-side-overlay.visible {
    display: block;
}

.es-header-side-close {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 1;
}

@media (min-width: 576px) {
    .es-header {
        flex-wrap: wrap;
        min-height: 80px;
        padding: 10px 16px;
    }
    .es-header-product {
        min-height: 60px;
    }
    .es-header-product-batch {
        display: block !important;
    }
    .es-header-product-logo {
        height: 30px;
        margin-right: 16px;
    }
    .es-header-product-name {
        font-size: 24px;
        font-weight: 700;
    }
    .es-header-product-svg {
        max-height: 48px;
    }
}

@media (min-width: 768px) {
    .es-header-links {
        display: flex;
    }
    .es-header-icons {
        margin: 0 0 0 32px;
    }
    .es-header-icons-item {
        display: block;
    }
    .es-header-icons > li:last-child {
        display: none;
    }
    .es-header-product {
        padding: 0 96px 0 8px;
    }
    .es-header-side {
        display: none;
    }
}

@media (min-width: 992px) {
    .es-header {
        padding-left: 24px;
        padding-right: 24px;
    }
}

.es-header-banner {
    align-items: center;
    display: flex;
    margin-bottom: 8px;
}

.es-header-banner-action {
    font-size: 16px;
    line-height: var(--es-line-height);
}

.es-header-banner-action > a {
    margin-right: 16px;
}

.es-header-banner-icon {
    margin: 0 16px 0 0 !important;
}

.es-header-banner-icon svg {
    fill: currentColor;
}

.es-header-banner-name {
    font-size: 16px;
    line-height: var(--es-line-height);
    margin: 0;
}

.es-header-nav {
    margin: 0 0 32px;
}

.es-header-nav-title {
    color: var(--es-color-grey6);
    font: inherit;
    margin: 0 0 16px;
}

.es-header-nav ul {
    margin: 0;
    padding: 0;
}

.es-header-buttons {
    display: flex;
    margin-top: 24px;
}

.es-header-buttons .es-button + .es-button {
    margin-left: 16px;
}

.es-header-user {
    margin: 0 0 32px;
}

/* Make some space for the close button */
.es-header-user .es-header-banner-name {
    margin-right: 32px;
}

.es-header-user-action .es-link + .es-link {
    margin-right: 16px;
}