/* ==========================================================================
   Interaction Design Foundation
   (CSS Architecture inspired by ITCSS)
   ========================================================================== */
/* SETTINGS */
/* SETTINGS needed to include to all endpoints. ⚠️ They should not contain CSS rules (only simpleVars and mixins!) */
/***********************************************************************************************************************
 * GLOBALS
 *
 * The global settings file contains any project-wide variables.
 * Things that need to be made available to the entire codebase.
 **********************************************************************************************************************/
/* IxDF Image Domain URL (do not wrap the url with any quotes) */
/***********************************************************************************************************************
 * MEDIA QUERY VARIABLES
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
 **********************************************************************************************************************/
/* Intended primarily for screens. Alternatives: print|speech */
/*@custom-media --large-only screen and (min-width: 1025px) and (max-width: 1440px);*/
/*@custom-media --xlarge-up screen and (min-width: 1441px);*/
/*@custom-media --xlarge-only screen and (min-width: 1441px) and (max-width: 1920px);*/
/*@custom-media --xxlarge-up screen and (min-width: 1921px);*/
/* Color Mixins ------------------------------------------------------------------------------------------------------*/
/***********************************************************************************************************************
 * GLOBALS
 *
 * The global settings file contains any project-wide variables.
 * Things that need to be made available to the entire codebase.
 **********************************************************************************************************************/
/* globally accessible CSS custom properties */
:root {
    /* Transition Times */
    --transition-time: 300ms;
    --transition-time-short : 100ms;
    --transition-time-long : 500ms;

    /* Sizes */
    --min-screen-size: 310px;
    --max-text-width-size: 672px;

    /* Default font params */
    --font-size-default: 18px;
    --font-size-mobile-default: 16px;
    --line-height-default: 1.5;

    /* Font families */
    --font-serif: 'Merriweather', georgia, serif;
    --font-sans-serif: 'Source Sans Pro', arial, sans-serif;
    --font-monospace: 'Source Code Pro', monospace;

    /* Font sizes */
    --font-size-peta: 3.04rem;
    --font-size-tera: 2.44rem;
    --font-size-giga: 1.95rem;
    --font-size-mega: 1.56rem;
    --font-size-kilo: 1.25rem;
    --font-size-hecto: 1rem;
    --font-size-centi: .8rem;
    --font-size-milli: .64rem;

    /* Border radius */
    --border-radius-small: 2px;
    --border-radius: 3px;
    --border-radius-medium: 5px;
    --border-radius-large: 8px;

    /** z-index */

    --depth__base: 0;
    /* The base and default depth of page and content */

    --depth__contentComponents: 10;
    /* such as dropdown */

    --depth__stickyComponents: 100;
    /* such as sticky bar, social signal, join bar, etc */

    --depth__contentComponentDialogs: 201;
    /* any component’s dialog such as dropdown’s menu context */

    --depth__headingComponents: 300;
    /* such as header, footer and offcanvas */

    --depth__floatingComponents: 400;
    /* such as cookie signal, help floating bar */

    --depth__pageDialogs: 500;
    /* such as modal dialog */

    --depth__notifications: 600;
    /* such as tooltips and alert notification */

    /** Main bar, notification & links bar */
    --nav-mainbar-height: 72px;
    --notification-height: 38px;
    --links-bar-height: 26px;
}
@media only screen and (min-width: 768px) and (max-width: 1055px) {
:root {
        --nav-mainbar-height: 64px
}
    }
/* Neutral colors */
/* Brand colors */
/***********************************************************************************************************************
 * COLORS
 **********************************************************************************************************************/
:root {
     /* Neutral colors */
    --neutral-01: #fff;
    --neutral-02: #f9f9f9;
    --neutral-03: #ececec;
    --neutral-04: #bcbcbc;
    --neutral-05: #6a6a6a;
    --neutral-06: #2b2b2b;

    /* Brand colors */
    --brand-01: #009cde;
    --brand-02: #0d6fb4;
    --accent-01: #457205;
    --accent-02: #f5851e;
    --accent-03: #d21f18;
    --accent-04: #800080;
    --accent-05: #cf6dc8;

    /* Shadow colors */
    --shadow-color-default: rgba(106, 106, 106, 0.5);
    --shadow-color-brand-01: rgba(0, 123, 171, 0.5);
    --shadow-color-accent-03: rgba(158, 24, 19, 0.5);
    --shadow-color-neutral-04: rgba(188, 188, 188, 0.5);
    --shadow-color-neutral-06: rgba(43, 43, 43, 0.7);

    /* External shadow colors */
    --shadow-color-facebook: rgba(38, 59, 99, 0.5);
    --shadow-color-twitter: rgba(46, 128, 191, 0.5);
    --shadow-color-linkedin: rgba(0, 87, 130, 0.5);

    /* Text colors */
    --text-color: var(--neutral-06);
    --text-color-secondary: var(--neutral-05);
    --text-color-inverted: var(--neutral-01);

    /* Link colors */
    --link-color: var(--brand-02);
    --link-color-visited: var(--accent-04);

    /** Brands Colors */
    --brand-color-facebook: #3b5998;
    --brand-color-instagram: #517fa4;
    --brand-color-linkedin: #007bb6;
    --brand-color-pinterest: #cb2027;
    --brand-color-twitter: #38a1f3;
    --brand-color-buffer-bg: #323b43;
    /* Old colors */
    --color-hover-gray: #f4f4f4;
    --color-light-gray: #ddd;

    /* Overlaycolors */
    --hero-overlay-color: rgba(0, 0, 0, 0.8);
    --hero-overlay-color-small-screen: rgba(0, 0, 0, 0.6);

    /* This used by elements that match background, allows us to change it with background */
    --section-background-color: var(--neutral-02);

    /* Similar to --section-background-color but is used for contrast. Used in things like infoBox */
    --contrast-section-background-color: var(--neutral-03);
}
/* We hav to add this here as color builder is in the wrong place */
/* TODO: Move color builder to utility section where it belongs and then move this class */
.svg-icon {
    fill: currentColor;
}
/*
 * Build text, background and border colors.
 */
/* Create new more user-friendly names */
/* purgecss start ignore */
.background-neutral-01 {
        background-color: var(--neutral-01) !important;
    }
.text-neutral-01 {
        color: var(--neutral-01) !important;
    }
.border-neutral-01 {
        border-color: var(--neutral-01);
    }
.fill-neutral-01 {
        fill: var(--neutral-01);
    }
.background-neutral-02 {
        background-color: var(--neutral-02) !important;
    }
.text-neutral-02 {
        color: var(--neutral-02) !important;
    }
.border-neutral-02 {
        border-color: var(--neutral-02);
    }
.fill-neutral-02 {
        fill: var(--neutral-02);
    }
.background-neutral-03 {
        background-color: var(--neutral-03) !important;
    }
.text-neutral-03 {
        color: var(--neutral-03) !important;
    }
.border-neutral-03 {
        border-color: var(--neutral-03);
    }
.fill-neutral-03 {
        fill: var(--neutral-03);
    }
.background-neutral-04 {
        background-color: var(--neutral-04) !important;
    }
.text-neutral-04 {
        color: var(--neutral-04) !important;
    }
.border-neutral-04 {
        border-color: var(--neutral-04);
    }
.fill-neutral-04 {
        fill: var(--neutral-04);
    }
.background-neutral-05 {
        background-color: var(--neutral-05) !important;
    }
.text-neutral-05 {
        color: var(--neutral-05) !important;
    }
.border-neutral-05 {
        border-color: var(--neutral-05);
    }
.fill-neutral-05 {
        fill: var(--neutral-05);
    }
.background-neutral-06 {
        background-color: var(--neutral-06) !important;
    }
.text-neutral-06 {
        color: var(--neutral-06) !important;
    }
.border-neutral-06 {
        border-color: var(--neutral-06);
    }
.fill-neutral-06 {
        fill: var(--neutral-06);
    }
.background-brand-01 {
        background-color: var(--brand-01) !important;
    }
.text-brand-01 {
        color: var(--brand-01) !important;
    }
.border-brand-01 {
        border-color: var(--brand-01);
    }
.fill-brand-01 {
        fill: var(--brand-01);
    }
.background-brand-02 {
        background-color: var(--brand-02) !important;
    }
.text-brand-02 {
        color: var(--brand-02) !important;
    }
.border-brand-02 {
        border-color: var(--brand-02);
    }
.fill-brand-02 {
        fill: var(--brand-02);
    }
.background-accent-01 {
        background-color: var(--accent-01) !important;
    }
.text-accent-01 {
        color: var(--accent-01) !important;
    }
.border-accent-01 {
        border-color: var(--accent-01);
    }
.fill-accent-01 {
        fill: var(--accent-01);
    }
.background-accent-02 {
        background-color: var(--accent-02) !important;
    }
.text-accent-02 {
        color: var(--accent-02) !important;
    }
.border-accent-02 {
        border-color: var(--accent-02);
    }
.fill-accent-02 {
        fill: var(--accent-02);
    }
.background-accent-03 {
        background-color: var(--accent-03) !important;
    }
.text-accent-03 {
        color: var(--accent-03) !important;
    }
.border-accent-03 {
        border-color: var(--accent-03);
    }
.fill-accent-03 {
        fill: var(--accent-03);
    }
.background-accent-04 {
        background-color: var(--accent-04) !important;
    }
.text-accent-04 {
        color: var(--accent-04) !important;
    }
.border-accent-04 {
        border-color: var(--accent-04);
    }
.fill-accent-04 {
        fill: var(--accent-04);
    }
.background-aceent-05 {
        background-color: var(--accent-05) !important;
    }
.text-aceent-05 {
        color: var(--accent-05) !important;
    }
.border-aceent-05 {
        border-color: var(--accent-05);
    }
.fill-aceent-05 {
        fill: var(--accent-05);
    }
/* purgecss end ignore */
.backgroundMatchingSection {
    background-color: var(--section-background-color);
}
:root {/* Quad */
    --easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    --easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);

    /* Quint */
    --easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
    --easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);

    /* Bounce */
    --easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
    --easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Squatch Stretch */
    --squatchStretch: cubic-bezier(0.07, 0.85, 0.82, 1.14);
}
/* GENERIC */
/***********************************************************************************************************************
 * RESET
 *
 * This is where we put our own reset styles.
 **********************************************************************************************************************/
html {
    box-sizing: border-box;
    min-height: 100%;
    scroll-behavior: smooth;
}
*,
    *::before,
    *::after {
        background-position: center;
        background-repeat: no-repeat;
        box-sizing: inherit;
    }
body {
    background: var(--neutral-02);
    color: var(--text-color);
    font-family: var(--font-sans-serif);
    margin: 0;
    min-width: var(--min-screen-size);
}
/* Remove the tapping delay on clickable elements. */
a,
area,
input,
.input,
label,
select,
summary,
textarea,
[tabindex],
button,
.button,
[type="button"],
[type="reset"],
[type="submit"],
[role='button'] {
    touch-action: manipulation;
}
a:active, input:active, .input:active, optgroup:active, select:active, textarea:active, button:active, .button:active, [type="button"]:active, [type="reset"]:active, [type="submit"]:active, [role='button']:active {
        outline: none;
    }
a:focus,
    a.input--focus,
    input:focus,
    input.input--focus,
    .input:focus,
    .input.input--focus,
    optgroup:focus,
    optgroup.input--focus,
    select:focus,
    select.input--focus,
    textarea:focus,
    textarea.input--focus,
    button:focus,
    button.input--focus,
    .button:focus,
    .button.input--focus,
    [type="button"]:focus,
    [type="button"].input--focus,
    [type="reset"]:focus,
    [type="reset"].input--focus,
    [type="submit"]:focus,
    [type="submit"].input--focus,
    [role='button']:focus,
    [role='button'].input--focus {
        outline-color: var(--brand-01);
    }
a,
label,
select,
button,
.button,
[type="button"],
[type="reset"],
[type="submit"],
[role='button'] {
    -webkit-appearance: none;
            appearance: none;
    background-color: transparent;
    color: inherit;
    cursor: pointer;
}
[type='text'],
[type='password'],
[type='url'],
[type='email'],
textarea {
    -webkit-appearance: textfield;
            appearance: textfield;
}
[type='number'][step]:hover,
[type='number'][min]:hover,
[type='number'][max]:hover
{
    -webkit-appearance: unset;
            appearance: unset;
}
button,
.button,
[type="button"],
[type="reset"],
[type="submit"] {
    border: 0;
    display: inline-block;
    margin: 0;
}
input,
.input,
optgroup,
select,
textarea {
    font: inherit;
    margin: 0;
}
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
th,
td {
    margin: 0;
    padding: 0;
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
    text-transform: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
    display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}
/* =========================================================================
   #SHARED
   ========================================================================== */
/**
 * Shared declarations for certain elements.
 */
/**
 * Always declare margins in the same direction:
 * csswizardry.com/2012/06/single-direction-margin-declarations
 *
 * *Note:* We still don’t use unidirectional margins, which would
 * be very nice to have.
 */
address,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
p,
pre,
dl,
ol,
ul,
hr,
table,
fieldset {
    margin-bottom: 10px;
}
code:not([class*='language-']) {
    background-color: rgb(231, 241, 248);
    border-radius: var(--border-radius-small);
    color: var(--brand-01);
    font-size: 0.9em;
    padding: 3px 6px;
}
/* ELEMENTS */
/***********************************************************************************************************************
 * TYPOGRAPHY
 **********************************************************************************************************************/
:root {
    font-family: var(--font-serif);
    font-size: var(--font-size-default);
    line-height: var(--line-height-default);
}
@media only screen and (max-width: 767px) {
:root {
        font-size: var(--font-size-mobile-default)
}
    }
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga', 'clig', 'pnum', 'kern', "liga", "clig";
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
}
p {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.78;
    margin-bottom: 24px;
    max-width: var(--max-text-width-size);
}
small {
    font-size: .8rem;
    letter-spacing: 0.15px;
    line-height: 1.2;
}
kbd {
    font-size: .8rem;
    font-weight: 500;
}
code,
pre {
    font-size: 0.8rem;
}
.teraTypeFont {
    font-family: var(--font-sans-serif);
    font-size: 2.44rem;
    font-weight: bold;
    letter-spacing: -0.75px;
    line-height: 1.2;
    margin-bottom: 16px;
    margin-top: 64px;
}
.gigaTypeFont {
    font-family: var(--font-sans-serif);
    font-size: 1.95rem;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.2;
    margin-bottom: 16px;
    margin-top: 40px;
}
.megaTypeFont {
    font-family: var(--font-sans-serif);
    font-size: 1.56rem;
    font-weight: bold;
    letter-spacing: -0.25px;
    line-height: 1.2;
    margin-bottom: 16px;
    margin-top: 40px;
}
.kiloTypeFont {
    font-family: var(--font-sans-serif);
    font-size: 1.25rem;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.2;
    margin-bottom: 16px;
    margin-top: 32px;
}
.hectoTypeFont {
    font-family: var(--font-sans-serif);
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.2;
    margin-bottom: 8px;
    margin-top: 24px;
}
.bodyTypeFont {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.78;
    margin-bottom: 24px;
    max-width: var(--max-text-width-size);
}
.centiTypeFont {
    font-family: var(--font-sans-serif);
    font-size: 0.8rem;
    font-weight: normal;
    letter-spacing: 0.15px;
    line-height: 1.2;
    margin-bottom: 4px;
    margin-top: 4px;
}
.milliTypeFont {
    font-family: var(--font-sans-serif);
    font-size: 0.64rem;
    font-weight: normal;
    line-height: 1.2;
}
.UITypeStyle {
    font-family: var(--font-sans-serif);
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 4px;
    margin-top: 4px;
}
.largeQuote {
    color: var(--neutral-05);
    font-family: var(--font-serif);
    font-size: var(--font-size-kilo);
    font-style: italic;
    line-height: 1.78;
}
code,
pre {
    overflow-y: auto;
}
fieldset > legend {
    font-family: var(--font-serif);
}
/***********************************************************************************************************************
 * #HEADINGS
 *
 * Simple default styles for headings 1 through 6. Anything more opinionated
 * than simple font-size changes should likely be applied via classes (see:
 * http://csswizardry.com/2016/02/managing-typography-on-large-apps/).
 **********************************************************************************************************************/
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5 {
    font-family: var(--font-sans-serif);
    font-weight: 700;
    line-height: 1.2;
}
h1 {
    font-size: var(--font-size-tera);
    letter-spacing: -0.75px;
    margin-bottom: 16px;
    margin-top: 64px;
}
h2 {
    font-size: var(--font-size-giga);
    letter-spacing: -0.5px;
    margin-bottom: 16px;
    margin-top: 40px;
}
h3 {
    font-size: var(--font-size-mega);
    letter-spacing: -0.25px;
    margin-bottom: 16px;
    margin-top: 40px;
}
h4 {
    font-size: var(--font-size-kilo);
    margin-bottom: 16px;
    margin-top: 32px;
}
h5 {
    font-size: var(--font-size-default);
    margin-bottom: 8px;
    margin-top: 24px;
}
h6 {
    font-size: var(--font-size-centi);
    margin-bottom: 8px;
    margin-top: 24px;
}
.h1 {
    font-size: var(--font-size-tera);
}
.h2 {
    font-size: var(--font-size-giga);
}
.h3 {
    font-size: var(--font-size-mega);
}
.h4 {
    font-size: var(--font-size-kilo);
}
.h5 {
    font-size: var(--font-size-default);
}
.h6 {
    font-size: var(--font-size-centi);
}
/***********************************************************************************************************************
 * IMAGES
 *
 * 1. Offset `alt` text from surrounding copy.
 * 2. Fluid images for responsive purposes.
 * 3. Setting `vertical-align` removes the whitespace that appears under `img`
 *    elements when they are dropped into a page as-is. Safer alternative to
 *    using `display: block;`.
 **********************************************************************************************************************/
img {
    display: inline-block;
    font-style: italic; /* [1] */
    max-width: 100%; /* [2] */
    position: relative;
    transition: opacity 500ms ease;
    vertical-align: middle; /* [3] */
}
/* Images that will be lazy-loaded */
img[data-src] {
        opacity: 0;
    }
/* Images that have been lazy-loaded */
img[data-src][src] {
        animation: fadeIn 350ms var(--easeOutQuad) forwards 650ms; /* [3] */
    }
/* Images initialized by Lightense library (image zooming library). Disable animations to avoid flickering. */
img[data-src][src].lightense-target {
            animation: none;
            opacity: 1;
        }
figure {
    margin: 0;
}
/***********************************************************************************************************************
 * FORMS
 **********************************************************************************************************************/
/*
optgroup {
    font-weight: 700; !* restore the font weight unset by the previous rule. *!
}
*/
/* Unspecified type */
/*input:not([type])[disabled],
input:not([type])[readonly],
fieldset[disabled] input:not([type]),
    !* Text *!
[type='text'][disabled],
[type='text'][readonly],
fieldset[disabled] [type='text'],
    !* Password *!
[type='password'][disabled],
[type='password'][readonly],
fieldset[disabled] [type='password'],
    !* Date *!
[type='date'][disabled],
[type='date'][readonly],
fieldset[disabled] [type='date'],
    !* Datetime *!
[type='datetime'][disabled],
[type='datetime'][readonly],
fieldset[disabled] [type='datetime'],
[type='datetime-local'][disabled],
[type='datetime-local'][readonly],
fieldset[disabled] [type='datetime-local'],
    !* Month *!
[type='month'][disabled],
[type='month'][readonly],
fieldset[disabled] [type='month'],
    !* Week *!
[type='week'][disabled],
[type='week'][readonly],
fieldset[disabled] [type='week'],
    !* Email *!
[type='email'][disabled],
[type='email'][readonly],
fieldset[disabled] [type='email'],
    !* Number *!
[type='number'][disabled],
[type='number'][readonly],
fieldset[disabled] [type='number'],
    !* Search *!
[type='search'][disabled],
[type='search'][readonly],
fieldset[disabled] [type='search'],
    !* Telephone *!
[type='tel'][disabled],
[type='tel'][readonly],
fieldset[disabled] [type='tel'],
    !* Time *!
[type='time'][disabled],
[type='time'][readonly],
fieldset[disabled] [type='time'],
    !* Url *!
[type='url'][disabled],
[type='url'][readonly],
fieldset[disabled] [type='url'],
    !* Color *!
[type='color'][disabled],
[type='color'][readonly],
fieldset[disabled] [type='color'],
    !* Textarea *!
textarea[disabled],
textarea[readonly],
fieldset[disabled] textarea {
    background-color: var(--color-light-gray);
    cursor: default;
}*/
.input[disabled],
input[disabled],
textarea[disabled],
fieldset[disabled] input,
fieldset[disabled] textarea {
    background-color: var(--color-light-gray);
    cursor: not-allowed;
}
/*
input:not([type]),
[type='text'],
[type='password'],
[type='date'],
[type='datetime'],
[type='datetime-local'],
[type='month'],
[type='week'],
[type='email'],
[type='number'],
[type='search'],
[type='tel'],
[type='time'],
[type='url'],
[type='color'],
textarea
*/
.input:not([type='checkbox']):not([type='radio']),
input:not([type='checkbox']):not([type='radio']),
textarea {
    font-family: var(--font-serif);
    background-color: var(--neutral-01);
    border: solid 1px var(--neutral-05);
    border-radius: var(--border-radius-large);
    box-shadow: inset 0 1px 4px 0 var(--shadow-color-default);
    display: block;
    height: 45px;
    padding: 8px;
    /*transition: border-color 0.15s linear, background 0.15s linear;*/
    width: 100%;
}
.input:not([type='checkbox']):not([type='radio']):disabled, input:not([type='checkbox']):not([type='radio']):disabled, textarea:disabled {
        background-color: var(--neutral-03);
        border-color: var(--neutral-04);
        box-shadow: none;
    }
.input:not([type='checkbox']):not([type='radio'])[type="range"], input:not([type='checkbox']):not([type='radio'])[type="range"], textarea[type="range"] {
        box-shadow: none;
    }
[type='number']::-webkit-inner-spin-button,
    [type='number']::-webkit-outer-spin-button {
        /* Always show the spinner (not hidden when not focused). */
        opacity: 1;
    }
.input__stripe:not([type='checkbox']):not([type='radio']) {
    padding-bottom: 10px;
    padding-top: 10px;
}
/*
Stripe also adds error class and we have 2 icons as a result
 */
.input__stripe.error::before {
    content: none !important;
}
textarea[rows] {
    height: auto;
}
/* Do NOT group these placeholder rules. */
::placeholder {
    color: var(--neutral-04);
}
/***********************************************************************************************************************
 * LINK ELEMENT
 **********************************************************************************************************************/
:root {
    --color-link: var(--brand-02);
    --color-link-hover: #569acb;
}
a {
    -webkit-tap-highlight-color: transparent; /* remove highlight color on mobiles */
    text-decoration: underline;
}
a,
    a:hover,
    a:focus,
    a:active {
        color: var(--color-link);
        text-decoration: underline;
    }
a:hover,
    a:focus {
        color: var(--color-link-hover);
    }
.link {
    background-color: transparent;
    color: var(--color-link);
    display: inline-block;
    line-height: inherit;
    padding: 0; /* for <button> */
    text-decoration: underline;
}
.link::before,
    .link::after {
        display: inline-block; /* makes possible to remove underline for pseudo-elements */
        text-decoration: none;
    }
.link.disabled,
    .link[disabled] {
        cursor: not-allowed;
        opacity: 0.5;
    }
.link,
    .link:hover,
    .link:focus,
    .link:active {
        color: var(--color-link);
        text-decoration: underline;
    }
.link:hover,
    .link:focus {
        color: var(--color-link-hover);
    }
/* Size Variants -----------------------------------------------------------------------------------------------------*/
.link--small {
    font-size: var(--font-size-centi);
}
.link--block {
    display: block;
}
/* Styles Variants (Add, Edit, Delete, etc) --------------------------------------------------------------------------*/
.link--noUnderline,
    .link--noUnderline:hover,
    .link--noUnderline:focus,
    .link--noUnderline:active {
        text-decoration: none;
    }
.link--back,
    .link--back:hover,
    .link--back:focus,
    .link--back:active {
        color: var(--neutral-06);
    }
.link--back:hover {
        color: var(--neutral-05);
    }
.link--toggle.dataToggle__button--expanded svg {
            transform: rotate(180deg);
        }
.link--secondary,
    .link--secondary:hover,
    .link--secondary:focus,
    .link--secondary:active {
        color: var(--neutral-03);
    }
.link--secondary:hover,
    .link--secondary:focus {
        color: var(--neutral-01);
    }
.link--darkBackground {
    color: var(--brand-01);
}
.link--darkBackground:hover,
    .link--darkBackground:focus {
        color: var(--brand-02);
    }
.link--cancel,
    .link--cancel:hover,
    .link--cancel:focus,
    .link--cancel:active {
        color: var(--neutral-05);
    }
.link--cancel:hover,
    .link--cancel:focus {
        color: var(--neutral-06);
    }
.link--animated {
    color: var(--text-color);
    position: relative;
}
.link--animated::before {
        background-color: currentColor;
        bottom: -3px;
        content: '';
        height: 2px;
        left: 0;
        position: absolute;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 250ms var(--squatchStretch), background-color 150ms var(--squatchStretch);
        width: 100%;
    }
.link--animated:hover::before {
            color: var(--color-light-blue);
            transform: scaleX(1);
        }
/*
   #Lists
   ========================================================================== */
dl,
ul {
    padding-left: 24px;
}
ol {
    padding-left: 32px;
}
ol li > ol li {
    list-style-type: lower-alpha;
}
ol li > ol li > ol li {
    list-style-type: lower-roman;
}
ul,
ol,
dl {
    list-style-position: outside;
    margin-bottom: 24px;
}
dl:last-child {
    margin-bottom: 0;
}
.list-none {
    list-style: none;
}
.list {
    font-family: var(--font-serif);
    line-height: 1.78;
}
.list li {
        margin-bottom: 8px;
    }
.summary--noStyle {
    list-style: none;
}
.summary--noStyle::marker,
    .summary--noStyle::-webkit-details-marker {
        display: none;
    }
/***********************************************************************************************************************
 * QUOTES
 **********************************************************************************************************************/
blockquote {
    border-left: 5px solid var(--neutral-05);
    font-family: var(--font-serif);
    line-height: 1.78;
    margin: 24px 0;
    padding-left: 16px;
}
.quote {
    font-family: var(--font-serif);
    font-size: var(--font-size-kilo);
    font-style: italic;
    line-height: 1.78;
}
/***********************************************************************************************************************
 * CHECKBOX
 **********************************************************************************************************************/
input[type='checkbox'] {
    -webkit-appearance: none;
            appearance: none;
    border: 2px solid var(--neutral-05);
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    float: left;
    height: 20px;
    margin-left: 3px;
    margin-right: 7px;
    margin-top: 3px;
    transition: background-color 350ms var(--squatchStretch),
                border-color 350ms var(--squatchStretch);
    width: 20px;
}
input[type='checkbox'] + label {
        font-family: var(--font-serif);
        color: var(--text-color);
        line-height: 1.45;
        margin: 0;
        /*
            overflow makes two important changes:
            1) fixes label positioning with floated checkbox
            2) clears floating for next elements
        */
        overflow: hidden;
    }
input[type='checkbox'] + label ~ .error {
            padding-left: 30px !important;
        }
input[type='checkbox']:checked {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="white" d="M12.925 20.349L6.56 13.985a1 1 0 00-1.414 0L2.86 16.27a1 1 0 000 1.414l9.292 9.292a1 1 0 001.414 0l15.712-15.712a1 1 0 000-1.414l-2.22-2.22a1 1 0 00-1.415 0l-12.72 12.719z"/></svg>') center no-repeat;
        background-color: var(--brand-01);
        background-size: 16px;
        border-color: var(--brand-01);
    }
input[type='checkbox']:disabled {
        background-color: var(--neutral-04);
        border-color: var(--neutral-04);
        pointer-events: none;
    }
input[type='checkbox']:disabled + label {
            color: var(--neutral-05);
            cursor: default;
            pointer-events: none;
        }
input[type='checkbox']:focus {
        border-color: var(--brand-01);
        outline: auto 5px var(--brand-01);
    }
.error input[type='checkbox']:not([aria-invalid="true"]):not(:checked) {
            border-color: var(--accent-03);
        }
input[type='checkbox']:not([aria-invalid="true"]):not(:checked):hover, input[type='checkbox']:not([aria-invalid="true"]):not(:checked):focus {
                border-color: var(--brand-01);
            }
@media only screen and (max-width: 767px) {
input[type='checkbox'] {
        height: 18px;
        margin-top: 2px;
        width: 18px
}

        input[type='checkbox'] ~ .error {
            padding-left: 28px !important;
        }
    }
/***********************************************************************************************************************
 * RADIO
 **********************************************************************************************************************/
input[type="radio"] {
    -webkit-appearance: none;
            appearance: none;
    border: 2px solid var(--neutral-04);
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px var(--neutral-01);
    float: left;
    height: 20px;
    margin-left: 3px;
    margin-right: 7px;
    margin-top: 3px;
    transition: background-color 350ms var(--squatchStretch),
                border-color 350ms var(--squatchStretch);
    width: 20px;
}
input[type="radio"] + label {
        font-family: var(--font-serif);
        color: var(--text-color);
        line-height: 1.45;
        margin: 0;
        /*
            overflow makes two important changes:
            1) fixes label positioning with floated checkbox
            2) clears floating for next elements
        */
        overflow: hidden;
    }
input[type="radio"] + label ~ .error {
            padding-left: 30px !important;
        }
input[type="radio"]:focus {
        outline: auto 5px var(--brand-01);
    }
input[type="radio"]:checked {
        background-color: var(--brand-01);
        border-color: var(--brand-01);
    }
input[type="radio"]:disabled {
        box-shadow: none;
        pointer-events: none;
    }
input[type="radio"]:disabled:checked {
            background-color: var(--neutral-04);
            border-color: var(--neutral-04);
            box-shadow: inset 0 0 0 3px var(--neutral-01);
        }
input[type="radio"]:disabled + label {
            color: var(--neutral-05);
            pointer-events: none;
        }
.error input[type="radio"]:not([aria-invalid="true"]):not(:checked) {
            border-color: var(--accent-03);
        }
input[type="radio"]:not([aria-invalid="true"]):not(:checked):hover, input[type="radio"]:not([aria-invalid="true"]):not(:checked):focus {
                border-color: var(--brand-01);
            }
@media only screen and (max-width: 767px) {
input[type="radio"] {
        height: 18px;
        margin-top: 2px;
        width: 18px
}

        input[type="radio"] ~ .error {
            padding-left: 28px !important;
        }
    }
:root {
    --select-padding: 8px;
    --select-icon-size: 26px;
}
select {
    -webkit-appearance: none;
            appearance: none;
    background-color: var(--neutral-01);
    background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%232b2b2b'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M17.6 19.87l5-6.67A2 2 0 0021 10H11a2 2 0 00-1.6 3.2l5 6.67a2 2 0 003.2 0z'/%3E%3C/svg%3E");
    background-position: calc(100% - var(--select-padding)) 50%;
    background-size: var(--select-icon-size);
    border: solid 1px var(--neutral-05);
    border-radius: var(--border-radius-large);
    font-family: var(--font-serif);
    height: 48px;
    line-height: 1.7;
    padding: var(--select-padding);
    padding-right: calc(var(--select-icon-size) + 2 * (var(--select-padding)));
    width: 100%;
}
@media only screen and (max-width: 767px) {
select {
        --select-icon-size: 24px;
        height: 45px
}
    }
fieldset[disabled] select,
select[disabled] {
    background-color: var(--neutral-04);
    color: var(--neutral-05);
}
select[multiple] {
    height: auto;
}
.error select {
        border-color: var(--accent-03);
        color: var(--accent-03);
    }
.select--large select {
        --select-icon-size: 32px;
        font-size: 22.5px;
        height: 56px;
    }
@media only screen and (max-width: 767px) {
.select--large select {
            --select-icon-size: 28px;
            font-size: 20px;
            height: 52px
    }
        }
dialog {
  position: absolute;
  left: 0; right: 0;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 1em;
  background: white;
  color: black;
  display: block;
}
dialog:not([open]) {
  display: none;
}
dialog + .backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.1);
}
._dialog_overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
}
dialog.fixed {
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
}
:root {
    --dialog-border-color: #666;
    --dialog-border-radius: 0;
    --dialog-button-close-size: 44px;
    --dialog-max-width: 736px;
    --dialog-min-width: 320px;
    --dialog-padding-horizontal: 16px;
    --dialog-padding-vertical: 32px;
}
@media only screen and (min-width: 768px) {
:root {
        --dialog-border-radius: 8px;
        --dialog-button-close-size: 32px;
        --dialog-padding-horizontal: 32px
}
    }
dialog {
    box-shadow: 0 12px 20px rgba(106, 106, 106, 0.1);
    border: solid 1px var(--dialog-border-color);
    border-radius: var(--dialog-border-radius);
    bottom: 0; /* need both top/bottom to fix position in Safari/Firefox */
    box-sizing: border-box;
    max-width: var(--dialog-max-width);
    min-width: var(--dialog-min-width);
    padding: var(--dialog-padding-vertical) var(--dialog-padding-horizontal);
    top: 0;
    z-index: var(--depth__pageDialogs);
}
@media only screen and (min-width: 768px) {
dialog {
        position: fixed;
        width: var(--dialog-max-width)
}
    }
dialog.dialog--small {
        max-width: calc(var(--dialog-max-width) * 0.75);
    }
dialog.dialog--large {
        max-width: calc(var(--dialog-max-width) * 1.25);
    }
dialog[open] {
        animation: fx-show-modal 0.2s ease-in forwards;
    }
form[method="dialog"] fieldset {
        border: 0;
        margin: 0;
        padding: 0;
    }
form[method="dialog"] legend {
        display: block;
        font-weight: bold;
        margin-bottom: 1em;
        white-space: nowrap;
    }
form[method="dialog"] menu {
        margin: 0;
        padding: 0;
    }
dialog::-webkit-backdrop { /* native */
    background-color: rgba(43, 43, 43, 0.6);
}
dialog::backdrop { /* native */
    background-color: rgba(43, 43, 43, 0.6);
}
dialog + .backdrop { /* polyfill */
    background-color: rgba(43, 43, 43, 0.6);
}
.modal__title {
    margin: 0 var(--dialog-button-close-size) 16px 0;
    text-align: left;
}
.modal__body {
    font-family: var(--font-serif);
}
@media only screen and (min-width: 768px) {
.modal__body {
        max-height: 70vh;
        overflow-x: hidden;
        overflow-y: auto
}
    }
.modal__footer .button {
        margin-top: 24px;
    }
@media only screen and (min-width: 768px) {
.modal__footer {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-start
}

        .modal__footer .button {
            margin-left: 24px;
        }
    }
.modal__buttonClose {
    float: right;
    height: var(--dialog-button-close-size);
    padding: 0;
    width: var(--dialog-button-close-size);
}
/* Dialog is visible */
.modal--animationFadeIn[aria-hidden='false'] {
        animation: fx-show-modal-fade-in 0.3s ease-in forwards;
    }
/* Dialog is visible */
.modal--noAnimation[aria-hidden='false'] {
        animation: none;
    }
@keyframes fx-show-modal {
    from {
        transform: scale(0.8);
    }
    to {
        transform: none;
    }
}
@keyframes fx-show-modal-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
video {
    width: 100%;
}
iframe[data-src], video {
    background: #000 url('https://public-media.interaction-design.org/images/idf-logo.svg') center no-repeat;
    background-size: 120px;
}
/* Videos inside RTE */
/* Note: Changing this class name requires to update database as some of RTE content’s might have this. */
.flex-video {
    height: 0;
    margin-bottom: 16px;
    overflow: hidden;

    /**
     * Make the video player ratio 16:9. The value 56.25% is the result of dividing 9/16, which corresponds
     * to the height of the video, the width being 100%.
     * We use padding here because the plugin we use uses an empty div to wrap around the video, and padding is the best
     * way to add dimensions.
     */
    padding-bottom: 56.25% !important;
    padding-top: 0 !important;
    position: relative;
}
.flex-video iframe {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
/* LAYOUT */
/***********************************************************************************************************************
 * LAYOUT
 **********************************************************************************************************************/
.container {
    max-width: 1024px;
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;
}
@media only screen and (min-width: 1056px) {
.container {
        margin-left: auto;
        margin-right: auto;
        padding: 0
}
    }
.content-wrapper {
    flex-grow: 1;
}
/*stylelint-disable*/
/* Inset space for the iPhone X notch in landscape mode */
@supports (padding: max(0)) {
    /* this is a new CSS feature */
    .container,
    .content-wrapper {
        padding-left: env(safe-area-inset-left); /* this is a new CSS feature */
        padding-right: env(safe-area-inset-right); /* this is a new CSS feature */
    }
}
/*stylelint-enable*/
/*
   #Content wrapper
   ========================================================================== */
.box {
    margin: auto 0;
    width: 100%;
}
.centeredSmallContainer {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max-text-width-size);
}
/*
   #Newsletter layout
   ========================================================================== */
.newsletter-page .main {
        overflow: hidden;
    }
.newsletter-page .newsletter-wrapper {
        padding-bottom: 93px;
        padding-top: 50px;
    }
.newsletter-page .newsletter-wrapper > .heading {
            margin-top: 0;
        }
.newsletter-page .footer {
        padding: 0;
    }
.newsletter-page .footer h4,
        .newsletter-page .footer p {
            margin-bottom: 5px;
        }
.alternateBackgroundContainer > section:nth-of-type(even) {
        --section-background-color: var(--neutral-03);
        --contrast-section-background-color: var(--neutral-02);
        background: var(--neutral-03);
    }
/*
Grid system is based on CSS Grids.
Initially grid system is only being used to create columns for 12 col grid.
Class names are based on bootstrap grid
*/
/*
Creates grid columns with passed view port size and column span
Also creates class for centering grid column based content. However this class
can not be used in row class thus can’t be joined with other grid column classes
*/
:root {
    --gridGap: 16px;
}
@media only screen and (min-width: 768px) {
:root {
        --gridGap: 24px
}
    }
@media only screen and (min-width: 1056px) {
:root {
        --gridGap: 32px
}
    }
.pageContainer {
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    min-height: 100vh;
}
/* Container for most of the page content, consists only of columns */
.gridContainer {
    display: grid;
    grid-template-areas: '. content .';
    grid-template-columns: 16px 1fr 16px;
}
@media only screen and (max-width: 767px) {
.gridContainer {
        max-width: 100vw;
        width: 100%
}
    }
@media only screen and (min-width: 1056px) {
.gridContainer {
        grid-template-columns: 1fr 1024px 1fr
}
    }
.gridContent {
    grid-area: content;

    /* Grid content can exceed container in rare cases */
}
/* For reasons unknown to me at the moment, 1fr space means that it can exceed the original container */
@media only screen and (max-width: 1055px) {
.gridContent {
        max-width: calc(100vw - 16px - 16px)
}
    }
.row {
    display: grid;
    grid-gap: var(--gridGap);
    grid-template-columns: repeat(12, 1fr);
}
/* If class is missing for that particular screen size then col will span whole width */
.row > * {
        grid-column: span 12;
    }
/* Create all view port column classes */
/* purgecss start ignore */
.col-sm-1 {
        grid-column: span 1;
    }
.col-centered-sm-1 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 1;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
.col-sm-2 {
        grid-column: span 2;
    }
.col-centered-sm-2 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 2;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
.col-sm-3 {
        grid-column: span 3;
    }
.col-centered-sm-3 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 3;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
.col-sm-4 {
        grid-column: span 4;
    }
.col-centered-sm-4 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 4;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
.col-sm-5 {
        grid-column: span 5;
    }
.col-centered-sm-5 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 5;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
.col-sm-6 {
        grid-column: span 6;
    }
.col-centered-sm-6 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 6;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
.col-sm-7 {
        grid-column: span 7;
    }
.col-centered-sm-7 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 7;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
.col-sm-8 {
        grid-column: span 8;
    }
.col-centered-sm-8 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 8;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
.col-sm-9 {
        grid-column: span 9;
    }
.col-centered-sm-9 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 9;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
.col-sm-10 {
        grid-column: span 10;
    }
.col-centered-sm-10 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 10;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
.col-sm-11 {
        grid-column: span 11;
    }
.col-centered-sm-11 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 11;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
.col-sm-12 {
        grid-column: span 12;
    }
.col-centered-sm-12 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 12;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
@media only screen and (min-width: 768px) {
        .col-md-1 {
        grid-column: span 1;
    }
        .col-centered-md-1 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 1;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 768px) {
        .col-md-2 {
        grid-column: span 2;
    }
        .col-centered-md-2 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 2;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 768px) {
        .col-md-3 {
        grid-column: span 3;
    }
        .col-centered-md-3 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 3;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 768px) {
        .col-md-4 {
        grid-column: span 4;
    }
        .col-centered-md-4 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 4;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 768px) {
        .col-md-5 {
        grid-column: span 5;
    }
        .col-centered-md-5 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 5;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 768px) {
        .col-md-6 {
        grid-column: span 6;
    }
        .col-centered-md-6 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 6;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 768px) {
        .col-md-7 {
        grid-column: span 7;
    }
        .col-centered-md-7 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 7;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 768px) {
        .col-md-8 {
        grid-column: span 8;
    }
        .col-centered-md-8 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 8;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 768px) {
        .col-md-9 {
        grid-column: span 9;
    }
        .col-centered-md-9 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 9;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 768px) {
        .col-md-10 {
        grid-column: span 10;
    }
        .col-centered-md-10 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 10;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 768px) {
        .col-md-11 {
        grid-column: span 11;
    }
        .col-centered-md-11 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 11;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 768px) {
        .col-md-12 {
        grid-column: span 12;
    }
        .col-centered-md-12 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 12;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 1056px) {
        .col-lg-1 {
        grid-column: span 1;
    }
        .col-centered-lg-1 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 1;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 1056px) {
        .col-lg-2 {
        grid-column: span 2;
    }
        .col-centered-lg-2 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 2;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 1056px) {
        .col-lg-3 {
        grid-column: span 3;
    }
        .col-centered-lg-3 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 3;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 1056px) {
        .col-lg-4 {
        grid-column: span 4;
    }
        .col-centered-lg-4 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 4;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 1056px) {
        .col-lg-5 {
        grid-column: span 5;
    }
        .col-centered-lg-5 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 5;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 1056px) {
        .col-lg-6 {
        grid-column: span 6;
    }
        .col-centered-lg-6 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 6;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 1056px) {
        .col-lg-7 {
        grid-column: span 7;
    }
        .col-centered-lg-7 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 7;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 1056px) {
        .col-lg-8 {
        grid-column: span 8;
    }
        .col-centered-lg-8 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 8;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 1056px) {
        .col-lg-9 {
        grid-column: span 9;
    }
        .col-centered-lg-9 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 9;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 1056px) {
        .col-lg-10 {
        grid-column: span 10;
    }
        .col-centered-lg-10 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 10;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 1056px) {
        .col-lg-11 {
        grid-column: span 11;
    }
        .col-centered-lg-11 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 11;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
@media only screen and (min-width: 1056px) {
        .col-lg-12 {
        grid-column: span 12;
    }
        .col-centered-lg-12 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 12;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap));
    }
    }
/* purgecss end ignore */
/* Helper classes */
.zero-grid-row-gap {
    grid-row-gap: 0;
}
.zero-grid-column-gap {
    grid-column-gap: 0;
}
@media only screen and (max-width: 767px) {
.sm\:zero-grid-row-gap{
        grid-row-gap: 0
}
    }
.medium-large-grid-row-gap {
    grid-row-gap: 24px;
}
/* Equal to 3 cols on large grid */
.secondaryContentWidth {
    max-width: 232px;
    min-width: 232px;
    width: 232px;
}
/* MAIN COMPONENTS */
/***********************************************************************************************************************
 * BUTTON
 **********************************************************************************************************************/
/*button,
[type="button"],
[type="reset"],
[type="submit"],*/
.button {
    font-family: var(--font-sans-serif);
    box-shadow: 0 2px 8px rgba(106, 106, 106, 0.4);
    border: solid 1px transparent;
    border-radius: var(--border-radius-large);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
    min-width: 160px;
    padding: 12px 24px;
    text-align: center;
    text-decoration: none; /* when applied to links */
    transition:  box-shadow 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955), transform 0.13s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    vertical-align: middle;
}
/* line different sized buttons up a little nicer */
@media only screen and (max-width: 767px) {
.button {
        display: block;
        width: 100%
}
    }
.button,
    .button:hover,
    .button:focus,
    .button:active {
        color: var(--neutral-01); /* to override style for elements like `a.button` */
        text-decoration: none; /* when applied to links */
    }
.button:hover {
        box-shadow: 0 4px 12px rgba(106, 106, 106, 0.4);
    }
.button:focus,
    .button:active {
        box-shadow: 0 1px 4px rgba(106, 106, 106, 0.5);
    }
.button:active {
        transform: translateY(2px);
    }
/*button,
[type="button"],
[type="reset"],
[type="submit"],*/
.button:disabled {
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
    transition-property: background-color;
}
@keyframes buttonLoading--rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(720deg);
    }
}
.button--loading {
    --loaderSize: 22px;
    border-color: var(--neutral-05);
    box-shadow: none;
    pointer-events: none;
    position: relative;
}
/* Cover buttons content */
.button--loading::before {
        background: var(--neutral-05);
        border-radius: var(--border-radius-large);
        content: '';
        height: calc(100% + 2px);
        left: 0;
        position: absolute;
        top: 0;
        width: calc(100% + 2px);
    }
.button--loading::after {
        animation: buttonLoading--rotation 1.2s linear infinite;
        background: url('https://public-media.interaction-design.org/icons/button-spinner.svg') no-repeat;
        content: '';
        height: var(--loaderSize);
        left: calc(50% - var(--loaderSize) / 2);
        position: absolute;
        top: calc(50% - var(--loaderSize) / 2);
        width: var(--loaderSize);
    }
/*
TODO: The class is used at the moment for selecting buttons for spinner
This is needs to be replaced by data-attribute
 */
.ixdf-spinner {
}
.button--primary {
    background: var(--brand-01);
}
.button--primary:disabled {
        background-color: var(--neutral-03);
        border: solid 1px var(--neutral-04);
        color: var(--neutral-04);
    }
.button--secondary {
    background-color: var(--neutral-05);
}
.button--secondary.button--small {
        display: inline-block;
        width: unset;
    }
.button--secondaryDark {
    background-color: var(--neutral-04);
    color: var(--neutral-06);
}
.button--secondaryDark,
    .button--secondaryDark:hover,
    .button--secondaryDark:active,
    .button--secondaryDark:focus {
        color: var(--neutral-06);
    }
.button--secondaryDark.button--small {
        display: inline-block;
        width: unset;
    }
.button--secondaryDark:disabled {
    background-color: var(--neutral-05);
    border: solid 1px var(--neutral-04);
    color: var(--neutral-04);
}
.button--secondary:disabled {
    background-color: var(--neutral-03);
    border: solid 1px var(--neutral-04);
    color: var(--neutral-04);
}
.button--ghost {
    background-color: transparent;
    border: solid 1px var(--neutral-06);
    box-shadow: none;
    color: var(--neutral-06);
    min-width: unset;
}
.button--ghost:hover,
    .button--ghost:focus {
        background-color: transparent;
        box-shadow: none;
        color: var(--neutral-06);
    }
.button--ghost:active {
        background-color: var(--neutral-03);
        box-shadow: none;
        color: var(--neutral-06);
    }
.button--ghost:disabled {
        background-color: transparent;
        border-color: var(--neutral-04);
        color: var(--neutral-04);
    }
.button--ghostDark {
    background-color: transparent;
    border: solid 1px var(--neutral-03);
    box-shadow: none;
    color: var(--neutral-03);
    min-width: unset;
}
.button--ghostDark:hover {
        box-shadow: none;
    }
.button--ghostDark:active,
    .button--ghostDark:focus {
        background-color: var(--neutral-05);
        border-color: var(--neutral-03);
        box-shadow: none;
    }
.button--ghostDark:disabled {
        background-color: transparent;
        border-color: var(--neutral-05);
        color: var(--neutral-05);
    }
/***********************************************************************************************************************
 * BUTTON’s SIZE VARIATIONS
 **********************************************************************************************************************/
.button--small {
    font-size: var(--font-size-centi);
    min-width: unset;
    padding: 8px 12px;
}
@media only screen and (min-width: 768px) {
.button--large {
        font-size: var(--font-size-mega);
        line-height: 1;
        padding: 16px 32px
}
    }
.button--block {
    display: block;
    width: 100%;
}
.button--inline {
    display: inline-block;
    min-width: unset;
}
@media only screen and (max-width: 767px) {
.button--inlineAtSmall {
        display: inline-block !important;
        width: auto !important
}
    }
/***********************************************************************************************************************
 * BUTTON: LINK-LIKE LOOK
 **********************************************************************************************************************/
.button-link {
    font-family: var(--font-sans-serif);
}
.button-link,
    .button-link:hover {
        background: none;
        display: inline-block;
        line-height: inherit;
        padding: 0;
    }
.button-link:active {
        transform: none;
    }
/***********************************************************************************************************************
 * BUTTON: WITH ARROW
 **********************************************************************************************************************/
.button--withArrow {
    display: inline-flex;
    justify-content: center;
    padding: 12px 16px 12px 24px;
}
.button--withArrow:not(:disabled):hover .button__arrowIcon {
                transform: translateX(4px);
            }
@media only screen and (min-width: 768px) {
        .button--large.button--withArrow {
            padding: 16px 20px 16px 32px;
        }

        .button--large .button__arrowIcon {
            height: 30px;
            width: 30px;
        }
}
.button__arrowIcon {
    height: 20px;
    transition: transform var(--transition-time-short) linear;
    width: 20px;
}
@media only screen and (max-width: 767px) {
.button__arrowIcon {
        height: 18px;
        widows: 18px
}
    }
.button--loading .button__arrowIcon {
        display: none;
    }
/***********************************************************************************************************************
 * BUTTON: SOCIAL BRANDS
 **********************************************************************************************************************/
.button--facebook {
    color: var(--neutral-01);
}
.button--facebook,
    .button--facebook:hover,
    .button--facebook:active,
    .button--facebook:focus {
        background-color: var(--brand-color-facebook);
    }
.button--facebook:hover,
    .button--facebook:active,
    .button--facebook:focus {
        color: rgb(214, 214, 214);
    }
.button--instagram {
    color: var(--neutral-01);
}
.button--instagram,
    .button--instagram:hover,
    .button--instagram:active,
    .button--instagram:focus {
        background-color: var(--brand-color-instagram);
    }
.button--instagram:hover,
    .button--instagram:active,
    .button--instagram:focus {
        color: rgb(214, 214, 214);
    }
.button--twitter {
    color: var(--neutral-01);
}
.button--twitter,
    .button--twitter:hover,
    .button--twitter:active,
    .button--twitter:focus {
        background-color: var(--brand-color-twitter);
    }
.button--twitter:hover,
    .button--twitter:active,
    .button--twitter:focus {
        color: rgb(214, 214, 214);
    }
.button--buffer {
    color: var(--neutral-01);
}
.button--buffer::before {
        background-image: url('https://public-media.interaction-design.org/images/icons/icon-buffer.svg');
        background-size: 14px;
        content: '';
        display: inline-block;
        height: 16px;
        margin-bottom: -2px;
        margin-right: 6px;
        width: 16px;
    }
.button--buffer,
    .button--buffer:hover,
    .button--buffer:active,
    .button--buffer:focus {
        background-color: var(--brand-color-buffer-bg);
    }
.button--buffer:hover,
    .button--buffer:active,
    .button--buffer:focus {
        color: rgb(214, 214, 214);
    }
.button--warning {
    background-color: var(--accent-03);
}
.button--warning,
    .button--warning:hover,
    .button--warning:active,
    .button--warning:focus {
        color: var(--neutral-01);
    }
.button--warning:disabled {
        background-color: var(--neutral-03);
        border: solid 1px var(--neutral-04);
        color: var(--neutral-04);
    }
.button--applePay {
    /* The code supports devices running macOS 10.12 and later, and iOS 10 and later */
    -webkit-appearance: -apple-pay-button;
    height: 44px; /* min-height doesn’t work with apple-pay button */
    -apple-pay-button-style: black;
    -apple-pay-button-type: plain;
    width: 160px;
}
/* min-width doesn’t work with apple-pay button */
@media only screen and (max-width: 767px) {
.button--applePay {
        display: block;
        height: 42px;
        width: 100%
}
    }
.button--googlePay {
    --bg-color: #000;
    background: var(--bg-color) url('https://public-media.interaction-design.org/images/payment/google_pay--dark.svg') no-repeat center center;
    background-origin: content-box;
    background-size: contain;
    min-height: 44px;
    padding: 12px 24px 10px;
}
.footer {
    background: var(--neutral-06);
    color: var(--neutral-03);
    line-height: 1.8;
    position: relative;
    /* footer should be always below content component’s dialog such as dropdown’s menu context */
    z-index: calc(var(--depth__contentComponentDialogs) - 1);
}
.footer a,
    .footer a:hover {
        color: var(--neutral-01);
        text-decoration: underline;
    }
.footer__links {
    background: var(--neutral-06);
    border-top: 1px solid var(--neutral-02);
    font-size: var(--font-size-milli);
    padding: 6px;
}
.footer__links a,
    .footer__links button {
        font-family: var(--font-sans-serif);
        color: inherit;
        text-decoration: none !important;
    }
.footer__links a:hover, .footer__links button:hover {
            opacity: 0.8;
            text-decoration: none !important;
        }
@media only screen and (max-width: 767px) {
.footer__links .footerLinks__list {
            display: block
    }
        }
/* been forced into specifity wars because of how .inlineList has been written */
.footer__links .footerLinks__list > li {
            margin-right: 32px;
        }
@media only screen and (min-width: 768px) and (max-width: 1055px) {
.footer__links .footerLinks__list > li {
                margin-right: 24px
        }
            }
.footer--minimal .footer__links {
        border-top: none;
    }
@media only screen and (max-width: 767px) {
.footerLinks__listItem {
        margin-bottom: 8px
}
    }
.footer__sitemapLinks a {
        text-decoration: none !important;
        /* .linkStrip__link causes width of <a /> to be less than li. In most cases that is fine
        but in this specific case we need to add the padding-left and padding-right to compensate */
        width: calc(100% + 32px);
    }
.footer__sitemapLinks a:active, .footer__sitemapLinks a:focus {
            background-color: var(--neutral-05);
            color: var(--neutral-01);
        }
.footer__separator {
    background: var(--neutral-04);
    height: 1px;
    margin-top: 40px;
    padding: 0 !important;
}
.footer__bottomSpacer {
    margin-bottom: 40px;
}
.footer__inner {
    padding: 24px 0;
}
.footer__logo {
    margin-top: 40px;
    width: 320px;
}
/*
   #Minimal Variation
   ========================================================================== */
.footer--minimal {
    border-top: 1px solid var(--color-light-gray);
    padding-top: 0;
}
@media only screen and (max-width: 767px) {
.connectWithUs__faq {
        margin-bottom: 0
}
    }
@media only screen and (min-width: 768px) {
.connectWithUs__faq {
        margin-top: 24px
}
    }
/* ==========================================================================
   #FORM
   ========================================================================== */
label {
    font-family: var(--font-sans-serif);
    color: var(--neutral-05);
    display: block;
    margin-bottom: 24px;


}
label > input[type='radio'],
    label > input[type='checkbox'],
    label > input[type='file'],
    label > select {
        margin-bottom: 2px;
        vertical-align: middle;
    }
label .note {
        font-weight: 400;
    }
.form {
    position: relative;
}
.form > * {
        margin-bottom: 24px;
    }
.form > *:last-child {
            margin-bottom: 0;
        }
.form--inline {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
}
.form--inline > * {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
        width: auto;
    }
.form--inline > * + * {
            margin-left: 20px;
        }
.form--inline input:not([type]),
    .form--inline input[type='text'],
    .form--inline input[type='password'],
    .form--inline input[type='date'],
    .form--inline input[type='datetime'],
    .form--inline input[type='datetime-local'],
    .form--inline input[type='month'],
    .form--inline input[type='week'],
    .form--inline input[type='email'],
    .form--inline input[type='number'],
    .form--inline input[type='search'],
    .form--inline input[type='tel'],
    .form--inline input[type='time'],
    .form--inline input[type='url'],
    .form--inline input[type='color'],
    .form--inline textarea {
        display: inline-block;
        margin-bottom: 0;
        margin-right: 20px;
        vertical-align: middle;
        width: auto;
    }
.form--inline .form__field {
        width: auto;
    }
.form--inline .form__field .form__microCopy,
        .form--inline .form__field .error {
            left: 0;
            position: absolute;
            width: 100%;
        }
.form--inline .form__field .form__microCopy {
            bottom: -100%;
        }
.form--inline .form__field > .awesomplete {
            width: 100%;
        }
.form--inline .error .form__microCopy {
            display: none;
        }
.form--centered {
    justify-content: center;
}
.form__controls {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 20px 0 0;
    text-align: center;
}
.form__controls > * {
        margin-bottom: 8px;
    }
.form__controls > *:last-child {
            margin-bottom: 0;
        }
.form__controls--inline {
    flex-direction: row;
    flex-wrap: wrap;
}
.form__controls--inline > * {
        margin-bottom: 0;
        margin-right: 8px;
    }
@media only screen and (min-width: 768px) {
.md\:form__controls--inline {
        flex-direction: row;
        flex-wrap: wrap
}

        .md\:form__controls--inline > * {
            margin-bottom: 0;
            margin-right: 8px;
        }
    }
@media only screen and (max-width: 767px) {
        .md\:form__controls--inline .button:not(:last-child) {
            margin-bottom: 20px;
        }
    }
.form__uploadButton {
    font-family: var(--font-serif);
    background-color: var(--color-light-gray);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    color: var(--neutral-06);
    display: inline-block;
    font-size: var(--font-size-centi);
    font-weight: 400;
    padding: 8px 20px;
    text-align: center;
}
.form__uploadButton:hover,
    .form__uploadButton :active {
        background-color: var(--neutral-03);
    }
.form__microCopy {
    color: var(--neutral-05);
    display: block;
    line-height: 1.2;
    margin-top: 4px;
}
.form__field {
    position: relative;
    width: 100%;
}
.form__field > input,
    .form__field > textarea,
    .form__field > .inputGroup {
        margin-bottom: 0;
    }
.form__field > .message {
        bottom: 0;
        left: 0;
        position: absolute;
    }
.form__field label {
        line-height: 1.2;
        margin-bottom: 4px;
    }
.form__field.inline > input,
        .form__field.inline > label {
            display: inline-block;
        }
.form__field.inline > input {
            width: auto;
        }
.form__field--withAutocomplete .awesomplete {
        display: block;
    }
.form__formNote {
    font-family: var(--font-sans-serif);
    color: var(--neutral-05);
    font-size: var(--font-size-centi);
    position: absolute;
    right: 0;
}
/*
#Error visualization (#check)
========================================================================== */
label.error {
    /* special case for payment form, possible maybe optimized */
    color: var(--accent-03);
}
span.error,
small.error {
    font-family: var(--font-sans-serif);
    background-color: transparent;
    color: var(--accent-03);
    display: block;
    line-height: 1.2;

    /* Remove the excess of bottom space when the error message shows up */
    margin-bottom: -8px;

    /* Hide below the label while remaining transitionable */
    /* (display: none doesn’t work for animations) */
    max-height: 0;
    overflow: hidden;
    padding: 0;
    position: absolute; /* Remove from the document flow */
    transform: translateY(-40px);
    transition: transform 250ms var(--squatchStretch);
    z-index: -1;
}
span.error *, small.error * {
        color: var(--accent-03);
    }
.error small.error,
    .error span.error,
    .error ~ small.error,
    .error ~ span.error {
        max-height: none;
        padding-top: 4px;
        position: relative;
        transform: translateY(0);
        z-index: 1;
    }
.error small.error::before, .error span.error::before, .error ~ small.error::before, .error ~ span.error::before {
            background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23d21f18'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M15.628 25.427c-1.146 0-2-.88-2-2.023 0-1.167.854-2.047 2-2.047s2 .88 2 2.047c0 1.143-.854 2.023-2 2.023zm1.664-16.006l-.114 2.927-.47 6.732H14.55l-.472-6.732-.113-2.927h3.327zm11.54 13.892L18.206 5.466A2.975 2.975 0 0015.628 4a2.977 2.977 0 00-2.578 1.466L2.427 23.313a2.967 2.967 0 00-.03 3.017 2.965 2.965 0 002.607 1.518h21.25a2.965 2.965 0 002.606-1.518 2.97 2.97 0 00-.029-3.017z'/%3E%3C/svg%3E") no-repeat center;
            content: '';
            display: inline-block;
            height: 20px;
            margin-right: 4px;
            vertical-align: bottom;
            width: 20px;
        }
@media only screen and (max-width: 767px) {
.error small.error::before, .error span.error::before, .error ~ small.error::before, .error ~ span.error::before {
                height: 18px;
                width: 18px
        }
            }
.error label:not(.button) {
        color: var(--accent-03) !important;
        position: relative;
        z-index: 1;
    }
.error .input,
    .error input {
        margin-bottom: 0;
    }
.error .input,
    .error input:not([type="checkbox"]):not([type="radio"]),
    .error textarea {
        border-color: var(--accent-03);
        z-index: 3;
    }
.error .input:focus, .error input:not([type="checkbox"]):not([type="radio"]):focus, .error textarea:focus {
            border-color: transparent;
        }
.error .input + .form__microCopy, .error input:not([type="checkbox"]):not([type="radio"]) + .form__microCopy, .error textarea + .form__microCopy {
            margin-top: 0;
        }
.error a {
        color: var(--color-link);
    }
.error .error + .form__microCopy {
        display: none;
    }
.error .highlight-on-error {
        color: var(--accent-03);
    }
.error .form__helpText {
        display: none;
    }
.error + .form__helpText {
    display: none;
}
.error--captcha {
    border: var(--accent-03) 1px solid;
}
.form_passwordInput {
    position: relative;
}
.form_passwordInput input {
        padding-right: 50px;
    }
.form_passwordInput input[type="text"] {
        font-family: var(--font-monospace) !important;
    }
.form_passwordInputButton {
    color: var(--brand-02);
    padding: 2px 8px;
    position: absolute;
    right: 0;
    top: 10px;
}
/**
  * Remove the additional :invalid styles in Firefox.
  */
/* purgecss ignore */
:-moz-ui-invalid {
    box-shadow: none;
}
*:target {
    scroll-margin-top: var(--nav-mainbar-height);
}
.navigationHeader {
    font-family: var(--font-sans-serif);
    pointer-events: none;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: calc(var(--depth__headingComponents) + 1);
}
@media only screen and (max-width: 767px) {
.navigationHeader {
        display: none
}
    }
@media print {
.navigationHeader {
        display: none
}
    }
.navigationHeader__primaryNavigationBar {
    background-color: var(--neutral-01);
    box-shadow: 0 8px 16px 0 rgba(106, 106, 106, 0.1);
    height: var(--nav-mainbar-height);
    position: relative;
}
.navigationHeader__primaryNavigationBar--hideContent .primaryNavigationBar {
        display: none;
    }
.primaryNavigationBar {
    align-items: center;
    display: flex;
    height: 100%;
    position: relative;
}
.primaryNavigationBar__navigation {
    margin-left: 24px;
    transition: transform var(--transition-time) var(--easeOutQuint);
}
@media only screen and (min-width: 1056px) {
.navigationHeader--collapsed .primaryNavigationBar__navigation {
            /* Trasnlate left to maintain the same distance with logo on collapse */
            transform: translateX(-30px)
    }
        }
@media only screen and (min-width: 768px) and (max-width: 1055px) {
.primaryNavigationBar__navigation {
        margin-left: 16px
}
    }
.primaryNavigationBar__navigation > ul {
        flex-wrap: nowrap;
        line-height: 1;
        /* outline: 1px solid orchid;*/
        margin: 0;
        pointer-events: all;
        transform-origin: center left;
        transition: transform var(--transition-time) var(--easeOutQuint);
        white-space: nowrap;
    }
.primaryNavigationBar__navigation > ul > li {
            margin: 0;
        }
.primaryNavigationBar__navigation > ul > li:not(:last-of-type) {
            margin-right: 16px;
        }
@media only screen and (min-width: 768px) and (max-width: 1055px) {
.primaryNavigationBar__navigation > ul > li:not(:last-of-type) {
                margin-right: 8px
        }
            }
.primaryNavigationBar__navigation .link {
        color: var(--neutral-06);
        display: block;
    }
.primaryNavigationBar__navigation .link:hover {
            color: var(--brand-02);
        }
.primaryNavigationBar__logo {
    flex-shrink: 0;
    height: 58px;
    pointer-events: all;
    transform-origin: center left;
    transition: transform var(--transition-time) var(--easeOutQuint);
}
@media only screen and (min-width: 768px) and (max-width: 1055px) {
.primaryNavigationBar__logo {
        height: 48px
}
    }
@media only screen and (max-width: 767px) {
.primaryNavigationBar__logo {
        height: 42px
}
    }
@media only screen and (min-width: 1056px) {
.navigationHeader--collapsed .primaryNavigationBar__logo {
            /* Change height from 58px to 48px */
            transform: scale(calc(48 / 58))
    }
        }
.primaryNavigationBar__accountDetails {
    justify-content: flex-end;
    margin-left: auto;
    min-width: 186px;
}
.navigationHeaderLogo__image {
    display: block;
    height: 100%;
    margin-bottom: auto;
    margin-top: auto;
    width: auto;
}
.navigationHeader__secondaryNavigationBar {
    background-color: var(--neutral-06);
    color: var(--neutral-03);
    display: flex;
    flex-direction: column;
    height: var(--links-bar-height);
    justify-content: center;
    overflow: hidden;
    pointer-events: all;
    position: relative;
}
/* Specifity is required */
.navigationHeader__secondaryNavigationBar .navigationHeader__linksList {
        flex-wrap: nowrap;
    }
.navigationHeader__secondaryNavigationBar--attention {
    background-color: var(--accent-02);
}
.navigationHeader__linksList {
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-centi);
    list-style: none;
    white-space: nowrap;
}
@media only screen and (min-width: 768px) and (max-width: 1055px) {
.navigationHeader__linksList {
        font-size: var(--font-size-milli)
}
    }
.navigationHeader__linksList > li {
        margin-bottom: 0;
    }
.navigationHeader__linksList > li:not(:last-of-type) {
            margin-right: 32px;
        }
@media only screen and (min-width: 768px) and (max-width: 1055px) {
.navigationHeader__linksList > li:not(:last-of-type) {
                margin-right: 24px
        }
            }
.navigationHeader__linksList > li > a {
            color: inherit;
            display: block;
            text-decoration: none;
        }
.navigationHeader__linksList > li > a:hover {
                color: var(--neutral-01);
            }
.navigationHeader__link {
    font-size: 0.8rem;
    text-decoration: none;
}
@media only screen and (min-width: 1056px) {
.navigationHeader__link {
        font-size: 1rem
}
    }
.userMenu__toggle {
    align-items: center;
    color: var(--neutral-06) !important;
    display: flex;

    /**
     * Following rule is required to overwrite checkbox element.
     * @see ./resources/pcss/elements/checkbox.pcss
     */
    font-size: var(--font-size-milli) !important;
    height: 100%;
    margin: 0;
    padding-right: 12px;
}
.userMenu__toggle::before {
        display: none !important;
    }
#profileMenuToggle:checked ~ .mobileHeaderMainNav__memberMenu {
    display: block;
}
.btn-offcanvas {
    font-size: var(--font-size-kilo);
    height: 64px;
    width: 64px;
}
.stickySecondaryNavHeaderScrollMargin *:target {
        scroll-margin-top: calc(var(--nav-mainbar-height) + 60px);
    }
.stickySecondaryNavHeader {
    position: sticky;
    top: var(--nav-mainbar-height);
    z-index: var(--depth__headingComponents);
}
@media only screen and (max-width: 767px) {
.stickySecondaryNavHeader {
        top: 64px
}
        .hasCollapsedHeader .stickySecondaryNavHeader {
            position: static;
        }
    }
.mobileHeader {
    box-shadow: 0 8px 16px rgba(106, 106, 106, 0.1);
    left: 0;
    position: sticky;
    top: 0;
    transition: transform var(--transition-time) var(--easeOutQuint);
    width: 100%;
    will-change: transform;
    z-index: calc(var(--depth__headingComponents) + 2);
}
@media only screen and (min-width: 768px) {
.mobileHeader {
        display: none
}
    }
@media print {
.mobileHeader {
        display: none
}
    }
.mobileHeader--collapsed {
    transform: translateY(calc(-100% - 3px));
}
.mobileHeaderMainNav {
    align-items: center;
    background-color: var(--neutral-01);
    display: flex;
    height: 64px;
}
.mobileHeaderMainNav__logo {
    width: 128px;
}
.mobileHeaderMainNav__userMenu {
    display: flex;
    height: 100%;
    margin-left: auto;
    position: relative;
}
.mobileHeaderMainNav__userMenu .button {
        margin-bottom: auto;
        margin-right: 16px;
        margin-top: auto;
        min-width: unset;
    }
.mobileHeaderMainNav__memberMenu {
    box-shadow: 0 8px 16px rgba(106, 106, 106, 0.1);
    background-color: var(--neutral-01);
    border: solid 1px var(--neutral-04);
    border-radius: 8px;
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    right:5px;
    text-align: center;
    top: calc(100%);
    white-space: nowrap;
    width: 100px;
}
.mobileHeaderMainNav__memberMenuItem {
    align-items: center;
    display: flex;
    height: 44px;
    justify-content: center;
    margin-bottom: 0;
    padding: 0;
    position: relative;
    z-index: 2;
}
.mobileHeaderMainNav__memberMenuItem:not(:first-of-type) {
        border-top: 1px solid var(--neutral-04);
    }
.mobileHeaderMainNav__memberMenuItemLinks {
    color: inherit;
    height: 100%;
    justify-content: center;
    padding: 12px 0;
    text-decoration: none;
    width: 100%;
}
.userMenuCaret {
    transition: transform var(--transition-time-short)  linear;
}
#profileMenuToggle:checked ~ .userMenu__toggle .userMenuCaret {
        transform: rotate(180deg);
    }
/* ========================================================================== */
/*   #HEADER COMPONENT */
/*   ========================================================================== */
/*
 * This is the HEADER component.
 * We use many header variations in our platform, so we created a highly reusable
 * component, independent of the HTML semantics, this way you can use an H1 if you
 * need to because of semantic needs, and style it like an H6, or any other.
 */
.heading-group {
    /*
     Not using BEM because it’s an optional parent element used
     in cases where we have a .heading-group__subheading inside it.
    */
    margin-bottom: 45px;
    margin-top: 45px;
}
/*
     Sharing panels next to page titles are visually a part of the
     heading-group but not semantically:
    .heading-group > (.heading-group__subheading) + .sharingPanel
     Using negative margins to counteract heading spacing
    */
.heading-group + .sharingPanel {
        margin-bottom: 45px;
        margin-top: -25px;
    }
.heading {
    font-family: var(--font-sans-serif);
    margin-bottom: 20px;
    position: relative;
}
.heading-group__subheading {
    color: var(--neutral-05);
    font-size: var(--font-size-centi);
    margin-top: 10px;
}
/*
   #Main Variations
   ========================================================================== */
.heading--componentHeading {
    border-bottom: 1px solid var(--color-light-gray);
    font-size: 26px;
    margin-bottom: 20px;
    margin-top: 20px;
}
.heading--bodyHeading {
    margin-bottom: 20px;
    margin-top: 10px;
}
/*
   #Sub Headings
   ========================================================================== */
.heading--subComponentHeading {
    align-items: center;
    display: flex;
    flex-direction: row;
    font-size: 22px;
    justify-content: flex-start;
    margin-bottom: 20px;
    margin-top: 20px;
}
/**
 * Elements with attribute `data-lazyload="DELAY_IN_MS"`
 *
 * Using this attribute may be useful when element is not an image/video/iframe, but any custom HTML element
 * that need to start its CSS animations only after a delay when reaching the viewport.
 *
 * For example, embedded SVG with inner animations.
 */
[data-lazyload] * {
    animation: none !important;
}
/* COMPONENTS */
/* ==========================================================================
   #INLINE LIST
   ========================================================================== */
.inlineList {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}
.inlineList > li,
.inlineList__item {
    margin-right: 16px;
    padding: 0;
}
.inlineList > li:last-of-type, .inlineList__item:last-of-type {
        margin-right: 0;
    }
.inlineList__item--right {
    margin-left: auto;
}
.inlineList--withSeparator li {
        margin-right: 12px;
        padding-right: 12px;
        position: relative;
    }
.inlineList--withSeparator li::after {
            background-color: var(--neutral-04);
            content: '';
            height: 90%;
            position: absolute;
            right: 0;
            top: 2px;
            width: 2px;
        }
.inlineList--withSeparator li:last-of-type {
            padding-right: 0;
        }
.inlineList--withSeparator li:last-of-type::after {
                content: none;
            }
.accountDetails {
    align-items: center;
    display: flex;
    padding: 0 20px;
    pointer-events: all;
}
.accountDetails--offCanvas {
    justify-content: center;
    padding-top: 30px;
}
.accountDetails__inner {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.accountDetails__login.link {
    color: var(--neutral-06);
    font-size: 0.8rem;
    margin-bottom: 2px;
}
@media only screen and (min-width: 1056px) {
.accountDetails__login.link {
        font-size: 1rem
}
    }
.accountDetails__loginList > li {
        margin-bottom: 0;
        margin-right: 20px;
    }
@media only screen and (min-width: 768px) and (max-width: 1055px) {
.accountDetails__loginList > li {
            margin-right: 16px
    }
        }
.accountDetails__image {
    border-radius: 50%;
    color: var(--neutral-05);
    flex-shrink: 0;
    height: 48px;
    overflow: hidden;
    position: relative;
    text-align: center;
    transition: transform var(--transition-time) var(--easeOutQuint);
    width: 48px;
}
@media only screen and (min-width: 1056px) {
.accountDetails__image {
        height: 56px;
        width: 56px
}
    }
.accountDetails__image::after {
        border-radius: 50%;
        content: '';
        left: 0;
        max-height: 100%;
        position: absolute;
        top: 0;
        width: 100%;
    }
.accountDetails__image img {
        height: auto;
        overflow: hidden;
        width: 100%;
    }
@media only screen and (min-width: 1056px) {
.navigationHeader--collapsed .accountDetails__image {
            /* Change height/width from 58px to 48px */
            transform: scale(calc(52 / 56))
    }
        }
.accountDetails__info {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    line-height: 1;
    padding-left: 10px;
}
.accountDetails__name {
    color: var(--neutral-06);
    font-size: var(--font-size-centi);
    line-height: 1.25;
    max-height: 32.5px /* font-size * line-height * num-of-line */;
    max-width: 200px;
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
}
@media only screen and (min-width: 768px) and (max-width: 1055px) {
.accountDetails__name {
        font-size: var(--font-size-milli)
}
    }
.accountDetails__links {
    line-height: 1;
    padding: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1055px) {
.accountDetails__links .link--small {
            font-size: var(--font-size-milli)
    }
        }
/*
   #Right Aligned Variation
   ========================================================================== */
.accountDetails--right {
    padding-right: 0;
}
.accountDetails--right .accountDetails__info {
        align-items: flex-end;
        order: 1;
        padding-left: 0;
        padding-right: 10px;
    }
.accountDetails--right .accountDetails__name {
        text-align: right;
    }
.accountDetails--right .accountDetails__image {
        order: 2;
    }
.accountDetails--right.accountDetails--isGuest {
        min-width: 170px;
    }
@media only screen and (min-width: 1056px) {
.accountDetails--right.accountDetails--isGuest {
            min-width: 310px
    }
        }
.alertMessage {
    animation: slideOutToLeft var(--transition-time) ease-in;
    background-color: var(--neutral-01);
    border: solid 1px var(--neutral-04);
    border-radius: var(--border-radius-large);
    color: var(--text-color);
    display: block;
    margin: 16px 0 16px 0;
    overflow: hidden;
    padding: 8px;
    pointer-events: all;
    position: relative;
}
/* Icon */
.alertMessage::after {
        content: '';
        height: 20px;
        left: 8px;
        position: absolute;
        top: 10px;
        width: 20px;
    }
@media only screen and (max-width: 767px) {
.alertMessage::after {
            height: 18px;
            width: 18px
    }
        }
.alertMessage__text {
    font-family: var(--font-sans-serif);
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 4px;
    margin-top: 4px;
    margin: 0;
}
.alertMessage__title {
    font-family: var(--font-sans-serif);
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.2;
    margin-bottom: 8px;
    margin-top: 24px;
    margin: 0;
}
.alertMessage__subtitle {
    font-family: var(--font-sans-serif);
    font-size: 0.8rem;
    font-weight: normal;
    letter-spacing: 0.15px;
    line-height: 1.2;
    margin-bottom: 4px;
    margin-top: 4px;
}
/* Close button */
.alertMessage__closeButton {
    color: var(--text-color);
    font-size: var(--font-size-mega);
    padding: 0 13px;
    position: absolute;
    right: 4px;
    top: 3px;
}
.alertMessage__closeButton:hover,
    .alertMessage__closeButton:focus {
        color: var(--neutral-05);
    }
/* Icon */
.alertMessage--success::after {
        background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23457205'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M12 25a1 1 0 01-.71-.29l-8-8A1 1 0 014.7 15.3l7.3 7.29 15.29-15.3A1 1 0 0128.7 8.7l-16 16a1 1 0 01-.7.3z'/%3E%3C/svg%3E") no-repeat center;
    }
/* Icon */
.alertMessage--warning::after {
        background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23f5851e'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M25.95 24.68L24 18.84V14a8 8 0 00-7-7.93V5a1 1 0 00-2 0v1.07A8 8 0 008 14v4.84l-1.95 5.84A1 1 0 007 26h6.18a3 3 0 005.63 0H25a1 1 0 00.95-1.32zM10 14a6 6 0 1112 0v4H10v-4zM8.39 24l1.33-4h12.56l1.33 4H8.39z'/%3E%3C/svg%3E") no-repeat center;
    }
/* Icon */
.alertMessage--error::after {
        background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23d21f18'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M15.628 25.427c-1.146 0-2-.88-2-2.023 0-1.167.854-2.047 2-2.047s2 .88 2 2.047c0 1.143-.854 2.023-2 2.023zm1.664-16.006l-.114 2.927-.47 6.732H14.55l-.472-6.732-.113-2.927h3.327zm11.54 13.892L18.206 5.466A2.975 2.975 0 0015.628 4a2.977 2.977 0 00-2.578 1.466L2.427 23.313a2.967 2.967 0 00-.03 3.017 2.965 2.965 0 002.607 1.518h21.25a2.965 2.965 0 002.606-1.518 2.97 2.97 0 00-.029-3.017z'/%3E%3C/svg%3E") no-repeat center;
    }
/* Icon */
.alertMessage--info::after {
        background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%236a6a6a'%3E%3Cg fill-rule='evenodd'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M16 11.6c-1.12 0-1.92-.721-1.92-1.721s.8-1.72 1.92-1.72c1.122 0 1.92.72 1.92 1.72s-.799 1.72-1.92 1.72zm-1.72 12.242h3.44V13.84h-3.44v10.002zM16 3C8.832 3 3 8.832 3 16s5.832 13 13 13 13-5.832 13-13S23.168 3 16 3z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
    }
.alertMessage--closingAnimation {
    /* fade out first, then scale out vertically */
    animation: fadeOut var(--transition-time) ease-out,
        verticalScaleOut calc(var(--transition-time) * 0.3) ease-out calc(var(--transition-time) * 0.7);
}
.alertMessage__fillerDiv {
    height: 0;
    transition: height calc(var(--transition-time) * 0.5) ease-in
}
.alertContainer {
    contain: content;
    overflow: hidden;
}
.alertContainer--page {
    /* We add this padding so that alert-message box-shadow is not cut of by container */
    padding-bottom: 20px;
    pointer-events: none;
    position: fixed;
    top: 64px;
    transform: translateY(0);
    transition: transform var(--transition-time) var(--easeOutQuint);
    width: 100%;
    will-change: opacity;
    z-index: var(--depth__notifications);
}
.alertContainer--page .alertMessage {
        box-shadow: 0 12px 20px rgba(106, 106, 106, 0.1);
        margin-left: auto;
        max-width: 100%;
        padding: 17px 45px;
        width: calc(100% - 40px);
    }
@media only screen and (max-width: 767px) {
.alertContainer--page .alertMessage {
            margin-right: auto
    }
        }
@media only screen and (min-width: 768px) {
.alertContainer--page .alertMessage {
            width: calc(100% * 5 / 12)
    }
        }
@media only screen and (min-width: 1056px) {
.alertContainer--page .alertMessage {
            width: calc(1000px * 1 / 3)
    }
        }
.alertContainer--page .alertMessage::after {
            left: 17px;
            top: 18px;
        }
.alertContainer--page .alertMessage__closeButton {
        top: 12px;
    }
@media only screen and (min-width: 768px) {
.alertContainer--page .alertMessage__closeButton {
            top: 10px
    }
        }
.alertContainer--inline .alertMessage__text {
        margin-left: 24px;
        margin-right: 24px;
    }
.alertContainer--inline .alertMessage--success {
        border: solid 1px var(--accent-01);
        color: var(--accent-01);
    }
.alertContainer--inline .alertMessage--error {
        border: solid 1px var(--accent-03);
        color: var(--accent-03);
    }
@media only screen and (max-width: 767px) {
    body.hasCollapsedHeader .alertContainer--page {
        transform: translateY(-54px);
    }
}
@media only screen and (min-width: 768px) and (max-width: 1055px) {
    .alertContainer--page {
        top: 87px;
    }

    body.hasCollapsedHeader .alertContainer--page {
        transform: translateY(-25px);
    }
}
@media only screen and (min-width: 1056px) {
    .alertContainer--page {
        top: 112px;
    }

    body.hasCollapsedHeader .alertContainer--page {
        transform: translateY(-54px);
    }
}
/*
   #Assistant
   ========================================================================== */
/*
 * Reusable assistant component that includes
 * a message with configured assistant’s picture
 * into the page.
 *
 * Template: src/resources/views/components/assistant.blade.php
 */
.assistant {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}
.assistant img {
        height: auto;
        width: 100%;
    }
.assistant__image {
    flex: 0 0 64px;
    height: 64px;
    width: 64px;
}
@media only screen and (min-width: 768px) {
.assistant__image {
        flex: 0 0 84px;
        height: 84px;
        max-width: 84px
}
    }
.assistant__bubble {
    background-color: var(--neutral-01);
    border: solid 1px var(--neutral-04);
    border-radius: 8px;
    flex: 1 1 auto;
    margin-left: 14px;
    padding: 16px;
    position: relative;
}
.assistant__bubble::before {
        border-color: transparent var(--neutral-04);
        border-style: solid;
        border-width: 8px 8px 8px 0;
        content: '';
        display: block;
        left: -9px;
        position: absolute;
        top: 42%;
        width: 0;
    }
.assistant__bubble::after {
        border-color: transparent var(--neutral-01);
        border-style: solid;
        border-width: 7px 7px 7px 0;
        content: '';
        display: block;
        left: -7px;
        position: absolute;
        top: 43%;
        width: 0;
    }
/* ========================================================================== */
/*   #AUTOCOMPLETE */
/* ========================================================================== */
/**
 * It’s just style extending of the awesomplete lib,
 * Load it using requirejs: 'css!/bower_components/awesomplete/awesomplete.css'.
 *
 * @see https://leaverou.github.io/awesomplete/
 */
.awesomplete > ul mark {
    background: none;
    color: var(--brand-01);
}
.awesomplete > input {
    min-width: 20%;
}
/* Awesomplete wraps the input field with a "div.awesomplete" element, which is styled as an inline block. */
/* This rule is necessary in order to make "form__field" autocomplete inputs be as wide as its parent, as expected. */
.form__field div.awesomplete {
    display: block;
    width: 100%;
}
.breadcrumbs__crumbs {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}
.breadcrumbs__item {
    font-family: var(--font-sans-serif);
    align-items: center;
    color: var(--text-color);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-right: 8px;
    max-width: 100%;
}
.breadcrumbs__item:not(:last-of-type)::after {
        border-bottom: solid 1px var(--neutral-05);
        border-bottom-right-radius: 2px;
        border-right: solid 1px var(--neutral-05);
        content: '';
        height: 10px;
        margin-left: 4px;
        transform: rotate(-45deg);
        width: 10px;
    }
.breadcrumbs__item a {
        color: var(--text-color);
        /* It should be slightly less than li so that arrow can be full size */
        max-width: 95%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
@media only screen and (max-width: 767px) {
.breadcrumbs__item a {
            max-width: 260px
    }
        }
.breadcrumbs__item a:hover,
    .breadcrumbs__item a:focus,
    .breadcrumbs__item a:active {
        color: var(--color-link-hover);
    }
/*
   #Cell
   ========================================================================== */
/* Example: https://zpl.io/ZDRsO */
.cell {
    border: 1px solid var(--neutral-05);
}
@media only screen and (min-width: 768px) {
.cell {
        border-left: none
}
    }
.cell:first-of-type {
        border-bottom-left-radius: 8px;
        border-left: 1px solid var(--neutral-05);
        border-top-left-radius: 8px;
    }
.cell:last-of-type {
        border-bottom-right-radius: 8px;
        border-top-right-radius: 8px;
    }
.cell:hover {
        background-color: var(--color-hover-gray);
    }
/* ==========================================================================
   #Countdown component (Declared independence from Cards on Dec, 2016)
   ========================================================================== */
.countdown {
    font-family: var(--font-sans-serif);
    color: var(--text-color);
    max-width: 180px;
    text-align: center;
}
.countdown .countdown__title {
        border-bottom: 1px solid var(--neutral-04);
        padding: 0 0 4px;
    }
.countdown .clock {
        align-content: flex-start;
        justify-content: flex-start;
        padding-top: 8px;
        text-transform: lowercase;
    }
.countdown .clock .number {
            font-weight: 700;
            line-height: 1;
        }
.countdown .clock .clock-item:not(:first-child) .number {
                border-left: 1px solid var(--neutral-04);
            }
.countdown .clock .unit {
            color: var(--neutral-05);
            font-size: var(--font-size-milli);
        }
.clock-item--fixWidth {
    width: 35px;
}
.countdown--horizontal {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: none;
}
.countdown--horizontal .countdown__title {
        border-bottom: 0;
        flex: 0 0 auto;
        margin: 0 8px 0 0;
        padding: 0;
    }
.countdown--horizontal .countdown__container {
        flex: 1 0 50%;
        width: 160px;
    }
.countdown--horizontal .countdown__container.flexible-countdown {
            width: auto;
        }
/* ==========================================================================
   #COURSES AD
   ========================================================================== */
:root {
    --courseAdImageWidth: 100%;
    --courseAdPadding: 24px;
}
@media only screen and (max-width: 767px) {
:root {
        --courseAdPadding: 16px
}
    }
@media only screen and (min-width: 1056px) {
:root {
        --courseAdImageWidth: 240px
}
    }
.courseAd {
    background-color: var(--neutral-03);
    border-radius: 8px;
    margin-bottom: 24px;
    margin-top: 24px;
    padding: var(--courseAdPadding);
    position: relative;
}
.courseAd__title {
    margin-top: 0;
}
@media only screen and (min-width: 1056px) {
.courseAd__title {
        margin: 0 16px 16px 0;
        max-width: calc(100% - var(--courseAdImageWidth))
}
    }
.rteContent .courseAd__certificateSample, .courseAd__certificateSample {
    box-shadow: 0 2px 8px rgba(106, 106, 106, 0.4);
    max-width: var(--courseAdImageWidth);
}
@media only screen and (min-width: 768px) and (max-width: 1055px) {
.rteContent .courseAd__certificateSample, .courseAd__certificateSample {
        width: 480px
}
    }
@media only screen and (min-width: 1056px) {
.rteContent .courseAd__certificateSample, .courseAd__certificateSample {
        position: absolute;
        right: var(--courseAdPadding);
        top: var(--courseAdPadding)
}
    }
.rteContent .courseAd__items, .courseAd__items {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}
.rteContent .courseAd__items li:not(:last-child), .courseAd__items li:not(:last-child) {
        margin-bottom: 32px;
    }
.rteContent .courseAd__items li:last-child, .courseAd__items li:last-child {
        margin-bottom: 0;
    }
/* Image is absolutely position and first item can collide that’s why limit size */
@media only screen and (min-width: 1056px) {
        .rteContent .courseAd__items li:first-child, .courseAd__items li:first-child {
            max-width: calc(100% - var(--courseAdImageWidth));
        }
    }
.courseAd__closeTime {
    font-style: italic;
}
/* ==========================================================================
   #COURSE CERTIFICATE
   ========================================================================== */
.courseCertificate:hover .overlay {
            display: flex;
        }
.courseCertificate img {
        width: 100%;
    }
.courseCertificate__label {
    font-family: var(--font-serif);
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 0;
    color: var(--neutral-01);
    display: block;
    height: 72px;
    left: 0;
    padding: 8px 16px;
    position: absolute;
    width: 100%;
}
.courseCertificate__overlay {
    font-family: var(--font-serif);
    align-items: center;
    background-color: rgba(188, 188, 188, 0.9);
    color: var(--neutral-05);
    display: none;
    flex-direction: column;
    font-weight: 700;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    width: 100%;
}
.courseCertificate__overlay::before {
        display: none;
    }
.courseCertificate__overlay .overlay-logo {
        height: 112px;
        opacity: 0.6;
    }
.courseCertificate__inner {
    position: relative;
}
/* ==========================================================================
   #FLOATING TOOLBAR
   ========================================================================== */
/*
 * This component appears in all course dashboard and course lesson pages.
 * It is a small blue square floating near the bottom of the page.
 */
.courseFloatingHelpToolbar {
    bottom: 24px;
    position: fixed;
    right: 0;
    transform: translateX(202px);
    width: 252px;
    will-change: transform;
    z-index: calc(var(--depth__floatingComponents) + 1);
}
@media only screen and (max-width: 767px) {
.courseFloatingHelpToolbar {
        bottom: 56px
}
    }
.courseFloatingHelpToolbar.is-open {
        transform: translateX(0) !important;
    }
.courseFloatingHelpToolbar.is-open .courseFloatingHelpToolbar__body {
            animation: animateHelperBody 300ms var(--easeOutQuad) forwards 250ms;
        }
.courseFloatingHelpToolbar.is-closed {
        transform: translateX(202px);
    }
.courseFloatingHelpToolbar.is-closed .courseFloatingHelpToolbar__body {
            animation: animateHelperBodyOut 300ms var(--easeOutQuad) forwards;
        }
.courseFloatingHelpToolbar--interactable {
    transform: translateX(202px);
    transition: transform 350ms var(--easeInOutQuint);
}
@media only screen and (min-width: 768px) {
        .courseFloatingHelpToolbar--interactable:hover,
        .courseFloatingHelpToolbar--interactable:focus {
            transform: translateX(0);
        }
    }
.courseFloatingHelpToolbar--animate-initial {
    transform: translateX(100%);
}
.courseFloatingHelpToolbar--animate-in {
    animation: displayHelpHint 350ms var(--easeInOutBack) forwards 2s;
    transform: translateX(272px);
}
.courseFloatingHelpToolbar--animate-out {
    animation: hideHelpHint 350ms var(--easeInOutBack);
}
.courseFloatingHelpToolbar--left {
    left: 16px;
}
@media only screen and (max-width: 767px) {
.courseFloatingHelpToolbar--left {
        left: auto;
        right: auto
}
    }
.courseFloatingHelpToolbar__name {
    font-size: 21px;
    padding-left: 8px;
}
.courseFloatingHelpToolbar__trigger {
    align-items: center;
    background-color: var(--brand-01);
    display: flex;
    height: 50px;
    min-width: 45px;
    padding: 0 20px 0 16px;
}
.courseFloatingHelpToolbar__trigger,
    .courseFloatingHelpToolbar__trigger:hover,
    .courseFloatingHelpToolbar__trigger:focus,
    .courseFloatingHelpToolbar__trigger:active {
        color: var(--neutral-01);
    }
.courseFloatingHelpToolbar__trigger i {
        font-size: 21px;
    }
.courseFloatingHelpToolbar__body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
.courseFloatingHelpToolbar__items {
    background-color: var(--neutral-01);
    border: 1px solid var(--neutral-03);
    margin: 0;
    padding: 0;
}
.courseFloatingHelpToolbar__items li {
        min-width: 192px;
        position: relative;
    }
.courseFloatingHelpToolbar__items li:hover {
            background-color: var(--neutral-03);
        }
.courseFloatingHelpToolbar__items button {
        line-height: 1;
    }
/*
   #Animations
   ========================================================================== */
@keyframes animateHelperBody {
    0% {
        display: none;
        max-height: 0;
        opacity: 0;
    }

    1% {
        display: block;
        max-height: 0;
        opacity: 0;
    }

    100% {
        max-height: 300px;
        opacity: 1;
    }
}
@keyframes animateHelperBodyOut {
    0% {
        display: block;
        max-height: 300px;
        opacity: 1;
    }

    99% {
        display: block;
        max-height: 0;
        opacity: 0;
    }

    100% {
        display: none;
        max-height: 0;
        opacity: 0;
    }
}
@keyframes displayHelpHint {
    0% {
        opacity: 0;
        transform: translateX(262px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes hideHelpHint {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(202px);
    }
}
/* ========================================================================== */
/*   #Dynamic Form */
/*   ========================================================================== */
/*.dynamicForm {} */
.dynamicForm__rowWrapper:not(:first-child) {
        margin-top: 10px;
    }
.dynamicForm__field {
    animation: animateIn 350ms var(--easeOutBack) forwards;
    padding-bottom: 10px;
}
.dynamicForm__field:not(:last-child) {
        margin-right: 20px;
    }
@keyframes addRow {
    0% {
        max-height: 0;
    }

    99% {
        max-height: 96px;
    }

    100% {
        max-height: none;
    }
}
@keyframes animateIn {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}
.difficulty__widget {
    padding-left: 20px;
    width: 40px;
}
.difficulty__bars {
    background: var(--neutral-03);
    height: 8px;
    position: relative;
    width: 8px;
}
.difficulty__bars::before,
    .difficulty__bars::after {
        background: var(--neutral-03);
        content: '';
        height: 8px;
        position: absolute;
        width: 8px;
    }
.difficulty__bars::before {
        background-color: var(--brand-01);
        border-bottom-left-radius: 50%;
        border-top-left-radius: 50%;
        left: -10px;
    }
.difficulty__bars::after {
        border-bottom-right-radius: 50%;
        border-top-right-radius: 50%;
        right: -10px;
    }
.difficulty--intermediate .difficulty__bars {
        background-color: var(--brand-01);
    }
.difficulty--advanced .difficulty__bars {
        background-color: var(--brand-01);
    }
.difficulty--advanced .difficulty__bars::after {
            background-color: var(--brand-01);
        }
/* ==========================================================================
   #DISTINCTION BADGE
   ========================================================================== */
.badge {
    /* this selector has no rule. */
}
.badge__item {
    /** override margin right */
    margin-right: 8px !important;
}
.badge__item:last-child {
    /** override margin right from badge__item */
    margin-right: 0 !important;
}
.badge__icon {
    height: 24px;
    /** override image svg specificity ([src$=".svg"]) in images.css */
    width: 24px !important;
}
/* ==========================================================================
   #GET WEEKLY INSIGHTS SIDEBAR
   ========================================================================== */
.getWeeklyInsightsSidebar {
    box-shadow: 0 2px 8px rgba(106, 106, 106, 0.4);
    background: var(--neutral-01);
    border-radius: 8px;
    padding: 16px;
}
.getWeeklyInsightsSidebar__header {
    font-size: var(--font-size-hecto);
    font-weight: 700;
    margin: 0;
}
.getWeeklyInsightsSidebar__description {
    color: var(--neutral-05);
    font-size: var(--font-size-centi);
    margin: 8px 0;
}
.getWeeklyInsightsSidebar__form {
    display: flex;
}
.getWeeklyInsightsSidebar__input {
    font-family: var(--font-sans-serif);
    flex: 2 0 80%;
}
.getWeeklyInsightsSidebar__input input {
        font-family: var(--font-sans-serif);
        color: var(--neutral-06);
        font-size: var(--font-size-centi);
        margin: 0;
    }
.getWeeklyInsightsSidebar__button {
    margin-left: -6px;
}
.getWeeklyInsightsSidebar__submit {
    background-color: var(--brand-01);
    border: solid 1px var(--neutral-05);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 8px;
    border-left: none;
    border-top-left-radius: 0;
    border-top-right-radius: 8px;
    color: var(--neutral-01);
    cursor: pointer;
    font-size: var(--font-size-hecto);
    height: 45px;
    min-width: 32px;
    padding: 0;
    width: 46px;
}
/* ==========================================================================
   #HERO
   ========================================================================== */
.hero {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 320px;
    position: relative;
}
.hero-background {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    /* for image that uses `background-image` */
    background-size: cover;
    pointer-events: none;
}
.hero-background::after {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        background-color: #000;
        content: '';
        opacity: 0.5;
    }
.hero-background__imageContainer {
    height: 100%;
    width: 100%;
}
.hero-background__image {
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.hero__title {
    color: var(--neutral-01);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    max-width: 1000px;
    text-align: center;
}
.hero__actions {
    margin: 32px 0 0;
}
@media only screen and (max-width: 767px) {
.hero__actions > .button {
            display: block;
            width: 100%
    }
        }
.hero__inner {
    align-items: center;
    color: var(--neutral-01);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
    padding-bottom: 40px;
    padding-top: 40px;
    position: relative;
    width: 100%;
}
/* This is for pages like bootcamp and homepage
  used on 6 col grid */
.hero__dynamicOverlay {
    position: relative;
}
.hero__dynamicOverlay::before {
        background-blend-mode: multiply;
        background-image: linear-gradient(to right, var(--hero-overlay-color) 0%, transparent 100%);
        content: '';
        /* Height is calculated by adding the padding present in the home page inner container
        if the padding is changed then this height needs to be updated*/
        height: calc(100% + 160px);
        left: 0;
        position: absolute;
        top: -80px;
        width: 100%;
        z-index: 0;
    }
@media only screen and (max-width: 767px) {
.hero__dynamicOverlay::before {
            background: rgba(43, 43, 43, 0.7);
            left: -16px;
            width: 100vw
    }
        }
.hero__dynamicOverlay::after {
        background: var(--hero-overlay-color);
        background-blend-mode: multiply;
        bottom: 0;
        content: '';
        display: block;
        height: calc(100% + 160px);
        position: absolute;
        right: 100%;
        top: -80px;
        width: 50vw;
    }
@media only screen and (max-width: 767px) {
.hero__dynamicOverlay::after {
            content: none
    }
        }
.hero--withDynamicOverlay .hero__inner {
        padding: 80px 0;
    }
.hero--withDynamicOverlay .hero-background::after {
            display: none;
        }
.hero--withDynamicOverlay .hero-background__image {
        object-position: right;
    }
/* ==========================================================================
   #INPUT GROUP
   ========================================================================== */
/*
 * 1. Ensure that the input is always above the *appended* addon button for proper
 *    border colors.
 * 2. Add min width for firefox. Otherwise input will bleed out of flexbox
 * 3. Avoid inputs breaking the input group layout.
 * 4. Add support for inline labels.
 */
.inputGroup {
    display: flex;
    margin-bottom: 10px;
    position: relative;
    width: 100%;
}
.inputGroup > input {
        margin: 0; /* [3] */
        min-width: 50px; /* [2] */
    }
.inputGroup > label {
        margin: 0 10px; /* [4] */
    }
.inputGroup .form__control + .form__control {
            margin-left: -1px;
        }
.inputGroup .form__control > input:focus,
            .inputGroup .form__control > input:active,
            .inputGroup .form__control > select:focus,
            .inputGroup .form__control > select:active {
                z-index: 3;
            }
.inputGroup ~ .error {
        margin-bottom: 10px;
        margin-top: 0;
    }
.inputGroup button,
    .inputGroup .button {
        transition-property: background-color;
    }
.inputGroup button,
        .inputGroup button:active,
        .inputGroup .button,
        .inputGroup .button:active {
            transform: none;
        }
.inputGroup__addon {
    background-color: var(--neutral-03);
    border-radius: var(--border-radius-large);
    color: var(--neutral-05);
    display: flex;
    flex-direction: column;
    height: 45px;
    justify-content: center;
    line-height: 37px;
    margin-bottom: 0;
    padding: 0;
    position: relative;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
/* Use positioned pseudo element to add the borders */
.inputGroup__addon::before {
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: var(--border-radius-large);
        content: '';
        height: 100%;
        left: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
    }
.inputGroup__addon:not(:first-child):not(:last-child) {
        border-radius: 0;
    }
.inputGroup__addon:not(:last-child) {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        margin-right: -1px;
    }
.inputGroup__addon:not(:last-child)::before {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
        }
.inputGroup__addon:not(:last-child) > .button {
            border-radius: var(--border-radius-large) 0 0 var(--border-radius-large);
        }
.inputGroup__addon:not(:first-child) {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }
.inputGroup__addon:not(:first-child)::before {
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
        }
.inputGroup__addon:not(:first-child) > button {
            border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0;
        }
.inputGroup__addon:last-child {
        margin-left: -5px;
    }
.inputGroup__addon > * {
        margin: 0;
    }
.inputGroup__addon > i,
    .inputGroup__addon > span,
    .inputGroup__addon > a:not(.button),
    .inputGroup__addon > button:not(.button) {
        color: var(--neutral-06);
        padding: 0 30px;
        vertical-align: middle;
    }
.inputGroup__addon > button {
        bottom: 0;
        height: 100%;
        min-width: unset;
        top: 0;
    }
.inputGroup__addon input[type='radio'],
    .inputGroup__addon input[type='checkbox'] {
        margin-top: 0;
    }
/* For Selects + Addon */
.form__control + .inputGroup__addon:not(:first-child) {
    border-left: 0;
}
.inputGroup__addon--small > span,
    .inputGroup__addon--small > a:not(.button),
    .inputGroup__addon--small > button:not(.button) {
        padding: 0 10px;
    }
.inputGroup__addon--noBorder::before {
        content: none;
    }
/*
   #Inline Variation
   ========================================================================== */
.inputGroup--inline {
    align-items: center;
    display: inline-flex;
    margin-bottom: 24px;
    padding-right: 24px;
    vertical-align: middle;
    width: auto;
}
.inputGroup--inline > label,
    .inputGroup--inline > input,
    .inputGroup--inline > select,
    .inputGroup--inline > .form__control,
    .inputGroup--inline > .form__field {
        width: auto;
    }
.inputGroup--inline > :last-child {
        margin: 0;
    }
/* #Edge Hack */
@supports (-ms-ime-align: auto) {
    .inputGroup > input {
        flex: 1 1 0;
    }
}
/* ==========================================================================
   #IMAGE
   ========================================================================== */
.image {
    display: block;
}
.image img {
        display: block;
    }
/*
/*   #Size Variations */
/*   ========================================================================== */
.image--icon {
    height: 20px;
    width: 20px;
}
.imageIcon--small {
    height: 16px;
    width: 16px;
}
.image--tiny {
    border: solid 4px transparent; /* use border instead of padding to fix an image re-painting bug in Safari 12 */
    height: 48px;
    width: 48px;
}
.image--small {
    border: solid 6px transparent; /* use border instead of padding to fix an image re-painting bug in Safari 12 */
    height: 64px;
    width: 64px;
}
.image--medium {
    height: 80px;
    width: 80px;
}
.image--large {
    height: 120px;
    width: 120px;
}
.image--svgLarge {
    height: 96px;
    width: auto;
}
.image--companyLogo {
    height: 60px;
    width: 60px;
}
.image--contain {
    object-fit: contain;
    width: auto;
}
/*
/*   #Styles Variations */
/*   ========================================================================== */
.image--round img {
        border-radius: 50%;
    }
img.image--round {
    border-radius: 50%;
}
/*
   #Mixed Variations
   ========================================================================== */
/**
 * Image placeholder
 *
 * eg.
 * <picture class="image__placeholder" style="padding-bottom: 50%">
 *  <img class="image__placeholderImageItem" src="image.png">
 * </picture>
 *
 * padding-bottom is to create preserve space for the image. the value of it
 * is the aspect ratio of the target dimension. Following is the formula:
 *
 * padding-bottom = (image.height / image.width * 100)
 *
 * However due to the respect of image aspect ratio, this can’t be use in imageset
 * that have variation of dimension at different screen breakpoint.
 */
.image__placeholder {
    display: block;
    height: 0;
    position: relative;
}
.image__placeholderImageItem {
    position: absolute;
}
.image__height--auto {
    height: auto;
}
.linkStrip {
    font-family: var(--font-sans-serif);
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}
.linkStrip:last-child {
        margin-bottom: 0;
    }
.linkStrip.disabled {
        background-color: var(--color-light-gray);
        cursor: auto;
        opacity: 0.4;
        transition: opacity 0.6s, background-color 0.6s;
    }
.linkStrip.disabled a {
            cursor: default;
        }
.linkStrip__item {
    align-items: stretch;
    border-bottom: 1px solid var(--neutral-04);
    display: flex;
    margin-bottom: 0;
    padding: 16px;
    transition: background-color 210ms var(--easeInOutQuad);
}
.linkStrip__item:hover,
    .linkStrip__item:active {
        background-color: var(--neutral-01);
    }
/*
   #Animations
   ========================================================================== */
/*
 * 1. Make links inside linkStrip take all the space so we don’t have to add
 *    a click event listener to the linkStrip to make sure we’re always clicking
 *    the link.
 */
.linkStrip__link {
    align-items: center;
    align-self: center;
    display: flex;
    font-weight: 700;
    line-height: 1.25;

    /* [1] */
    margin-bottom: -16px;
    margin-left: -16px;
    margin-right: -16px;
    margin-top: -16px;
    padding-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 16px;
    width: 100%;
}
.linkStrip__link,
    .linkStrip__link:hover,
    .linkStrip__link:focus,
    .linkStrip__link:active {
        color: var(--text-color);
        text-decoration: none;
    }
.linkStrip__link > span {
        width: 100%;
    }
.linkStrip__link .fa,
    .linkStrip__link [class^='icon-'] {
        flex: 0 0 32px;
        line-height: 0.5;
        text-align: left;
    }
.linkStrip__link .fa + span, .linkStrip__link [class^='icon-'] + span {
            flex: 0 0 85%;
            word-wrap: break-word;
        }
/*
   #Full width links
   ========================================================================== */
.linkStrip__item--link {
    padding: 0;
}
.linkStrip__item--link::after {
        content: none;
    }
.linkStrip__item--link .linkStrip__link {
        margin: 0;
        padding: 20px;
    }
.linkStrip__item--link .linkStrip__link svg {
            margin-left: auto;
            transition: transform 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
.linkStrip__item--link .linkStrip__link:hover svg {
                transform: translateX(5px);
            }
/*
   #Style Variations
   ========================================================================== */
.linkStrip--2cols {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.linkStrip--2cols .linkStrip__item {
        width: 100%;
    }
@media only screen and (min-width: 768px) {
.linkStrip--2cols .linkStrip__item {
            width: 48%
    }
        }
/*
   #HACKS
   ========================================================================== */
/* To cover 16 px of padding of link */
.linkStrip__list--fullWidth {
    width: calc(100% + 32px);
}
/* ==========================================================================
   #MEDIA OBJECT
   ========================================================================== */
.media {
    align-items: center;
    display: flex;
}
.media__image {
    flex: 0 0 auto;
}
.media__image--40 {
    flex: 0 0 40px;
    max-width: 40px;
}
.media__image--40 img {
        height: auto;
        width: 40px !important;
    }
.media__image--64 {
    flex: 0 0 64px;
    max-width: 64px;
}
.media__image--64 img {
        height: auto;
        width: 64px !important;
    }
.media__image--80 {
    flex: 0 0 80px;
    max-width: 80px;
}
.media__image--80 img {
        height: auto;
        width: 80px !important;
    }
.media__image--120 {
    flex: 0 0 120px;
    max-width: 120px;
}
.media__image--120 img {
        height: auto;
        width: 120px !important;
    }
.media__image--160 {
    flex: 0 0 160px;
    max-width: 160px;
}
.media__image--160 img {
        height: auto;
        width: 160px !important;
    }
.media__image--smallSquare {
    height: 72px;
    width: 72px;
}
.media__image--smallSquare img {
        width: 72px !important;
    }
.media__image--round {
    border-radius: 50%;
    overflow: hidden;
}
.media__body {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.78;
    margin-bottom: 24px;
    max-width: var(--max-text-width-size);
    flex: 1 1 auto;
    margin: 0;
    padding-left: 16px;
}
.media--vertical {
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.media--vertical .media__image {
        max-width: 100%;
    }
.media--vertical .media__image--120 {
        flex: 0 0 70px;
        max-height: 70px;
    }
.media--vertical .media__image--120 img {
            height: 70px !important;
            width: auto !important;
        }
.media--vertical .media__body {
        padding-left: 0 !important;
        padding-top: 10px;
    }
@media only screen and (max-width: 767px) {
.sm\:media--vertical {
        align-items: center;
        flex-direction: column;
        justify-content: center
}

        .sm\:media--vertical .media__image {
            max-width: 100%;
            width: 100%;
        }

        .sm\:media--vertical .media__image--120 {
            flex: 0 0 70px;
            max-height: 70px;
        }

            .sm\:media--vertical .media__image--120 img {
                height: 70px !important;
                width: auto !important;
            }

        .sm\:media--vertical .media__body {
            padding-left: 0 !important;
            padding-top: 10px;
            width: 100%;
        }
    }
.pageAnnouncements {
    box-shadow: 0 8px 16px 0 rgba(106, 106, 106, 0.1);
}
.pageAnnouncement {
    align-items: center;
    background-color: var(--accent-02);
    margin: 0;
    padding: 8px 0;
    pointer-events: all;
}
.pageAnnouncement a,
    .pageAnnouncement .link {
        color: inherit;
        font-size: inherit;
    }
.pageAnnouncement a:hover, .pageAnnouncement .link:hover {
            opacity: 0.8;
        }
.pageAnnouncement .button--block {
        height: var(--notification-height);
    }
.pageAnnouncement__button {
    height: 20px;
    margin-bottom: auto;
    margin-top: auto;
    padding: 0;
    width: 20px;
}
@media only screen and (max-width: 767px) {
.pageAnnouncement__button {
        height: 18px;
        width: 18px
}
    }
.pagination {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    min-height: 24px;
    padding: 0;
}
.pagination__item {
    font-family: var(--font-sans-serif);
    align-items: center;
    border: 1px solid var(--neutral-05);
    color: var(--text-color);
    cursor: default;
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-hecto);
    height: 44px;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 40px;
}
@media only screen and (min-width: 768px) {
.pagination__item {
        height: 46px;
        width: 46px
}
    }
.pagination__item:first-of-type {
        border-bottom-left-radius: var(--border-radius-large);
        border-top-left-radius: var(--border-radius-large);
    }
.pagination__item:last-of-type {
        border-bottom-right-radius: var(--border-radius-large);
        border-top-right-radius: var(--border-radius-large);
    }
.pagination__item:not(:last-of-type) {
        border-right: none;
    }
.pagination__item:hover,
    .pagination__item:active {
        background-color: var(--brand-01);
    }
.pagination__item[aria-disabled='true'] {
        pointer-events: none;
    }
.pagination__item--active {
    background: var(--brand-01);
    color: var(--neutral-01);
    font-weight: bold;
}
.pagination__item--summary {
    background: var(--brand-01);
    color: var(--neutral-01);
    width: 80px;
}
.pagination__itemLink {
    align-items: center;
    background-color: transparent;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    line-height: inherit;
    padding: 0;
    position: relative;
    text-decoration: none;
    width: 100%;
}
.pagination__itemLink:focus {
        color: var(--text-color);
        text-decoration: none;
    }
.pagination__itemLink:hover,
    .pagination__itemLink:active {
        color: var(--neutral-01);
        text-decoration: none;
    }
.pagination__itemLink::before {
        content: '';
        height: 20px;
        position: absolute;
        width: 20px;
    }
@media only screen and (max-width: 767px) {
.pagination__itemLink::before {
            height: 18px;
            width: 18px
    }
        }
.pagination__itemLink--prev::before {
        background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%232b2b2b'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M21 27a1 1 0 01-.71-.29l-10-10a1 1 0 010-1.41l10-10a1 1 0 011.41 1.41L12.41 16l9.29 9.29A1 1 0 0121 27z'/%3E%3C/svg%3E") no-repeat center;
    }
.pagination__itemLink--next::before {
        background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%232b2b2b'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M11 27a1 1 0 01-.71-1.71l9.3-9.29-9.3-9.29A1 1 0 0111.7 5.3l10 10a1 1 0 010 1.41l-10 10a1 1 0 01-.7.29z'/%3E%3C/svg%3E") no-repeat center;
    }
.pagination__itemLink--first::before {
        background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%232b2b2b'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M17.41 5.3l10 10a1 1 0 010 1.41l-10 10A1 1 0 0116 25.29L25.3 16 16 6.71a1 1 0 011.41-1.41zM6 5.29l10 10a1 1 0 010 1.41l-10 10a1 1 0 11-1.42-1.41L13.87 16 4.58 6.71A1.004 1.004 0 016 5.29z'/%3E%3C/svg%3E") no-repeat center;
    }
.pagination__itemLink--last::before {
        background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%232b2b2b'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M17.41 5.3l10 10a1 1 0 010 1.41l-10 10A1 1 0 0116 25.29L25.3 16 16 6.71a1 1 0 011.41-1.41zM6 5.29l10 10a1 1 0 010 1.41l-10 10a1 1 0 11-1.42-1.41L13.87 16 4.58 6.71A1.004 1.004 0 016 5.29z'/%3E%3C/svg%3E") no-repeat center;
    }
.paginationSimple {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0;
}
.paginationSimple__button {
    width: 136px;
}
@media only screen and (min-width: 768px) {
.paginationSimple__button {
        width: 160px
}
    }
.paginationSimple__button[aria-disabled='true'] {
        pointer-events: none;
    }
.paginationSimple__button--prev:not(:disabled):hover .button__arrowIcon {
                transform: translateX(-4px);
            }
/*
 * 1. To position the hiding button for closable panels.
 * 2. @todo
 *    Temporary fix until removal of headings top margin. Margins should
 *    be set in one direction only, in our case it’s top to bottom, left to right.
 */
.panel {
    margin-bottom: 30px;
    padding: 16px;
    position: relative;
}
/* [1] */
.panel > .heading {
        margin-top: 0; /* [2] */
    }
.panel__inner {
    margin-right: 0;
}
/** @wtf */
.panel__inner:first-of-type > .heading {
        margin-top: 0; /* [2] */
    }
/*
   #Panel Variants
   ========================================================================== */
.panel--sidebar {
    padding: 20px 10px;
}
.panel--sidebar .panel__inner {
        margin-right: -10px;
    }
.panel--sidebar .panel__inner:first-of-type > .heading {
            margin-top: 0;
        }
.panel--minimalFlows {
    width: auto;
}
@media only screen and (min-width: 768px) {
.panel--minimalFlows {
        margin-left: auto;
        margin-right: auto;
        width: 496px
}
    }
/*
   #Table of Contents Panel
   ========================================================================== */
@media only screen and (max-width: 767px) {
.panel--bookChapterToc {
        margin-top: 20px
}
    }
.panel--bookChapterToc summary::before {
            content: 'View';
            font-family: var(--font-sans-serif);
            margin-right: 4px;
        }
.panel--bookChapterToc summary::after {
            background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%232b2b2b'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M16 24a1 1 0 01-.71-.29l-10-10A1 1 0 016.7 12.3l9.3 9.29 9.29-9.29a1 1 0 011.41 1.41l-10 10a1 1 0 01-.7.29z'/%3E%3C/svg%3E") no-repeat center;
            content: '';
            display: inline-block;
            height: 20px;
            margin-left: 4px;
            vertical-align: text-top;
            width: 20px;
        }
.panel--bookChapterToc[open] summary::before {
                content: 'Hide';
            }
.panel--bookChapterToc[open] summary::after {
                background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%232b2b2b'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M26 20a1 1 0 01-.71-.29L16 10.41l-9.29 9.3A1 1 0 015.3 18.3l10-10a1 1 0 011.41 0l10 10A1 1 0 0126 20z'/%3E%3C/svg%3E") no-repeat center;
            }
.productDescriptionWithPrice {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 20px;
}
.productDescriptionWithPrice--total {
    font-weight: bold;
}
.paymentForm__thirdPartyPaymentIcon {
    height: 17px;
    width: 23px;
}
.progressCircular {
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-kilo);
    font-weight: 700;
    height: 64px;
    position: relative;
    width: 64px;
}
.progressCircular::after {
        align-content: center;
        align-self: center;
        color: var(--neutral-06);
        content: attr(data-percentage) '%';
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        left: 0;
        position: absolute;
        text-align: center;
        top: -1px;
        width: 100%;
    }
.progressCircular--small {
    height: 40px;
    width: 40px;
}
.progressCircular__indicatorContainer {
    height: 100%;
    transform: rotate(-90deg);
    width: 100%;
}
.progressCircular__indicatorContainer .progressCircular__filledOutIndicator {
         stroke-dashoffset: 101; /* based on the radius of 16 */
    }
.progressCircular__potentialIndicator {
    stroke: var(--neutral-03);
    stroke-dashoffset: 0;
    stroke-width: 3px;
    transition: stroke-dashoffset 1s linear;
}
.progressCircular__filledOutIndicator {
    stroke: var(--brand-01);
    stroke-dashoffset: 157.14; /* based on the radius of 25 */
    stroke-width: 4px;
    transition: stroke-dashoffset 1s linear;
}
.progressCircular--hidePercentage::after {
        content: none;
    }
.progressCircular--hidePercentage .progressCircular__indicatorContainer {
        margin-bottom: -10px;
    }
.progressCircular--complete .progressCircular__filledOutIndicator {
        stroke: var(--accent-03);
    }
/*
   #SOCIAL CHANNELS
   ========================================================================== */
/*
 * 1. Wrap items to a new line for small screens.
 */
.socialChannels {
    flex-wrap: wrap; /* [1] */
    margin: 40px auto 0;
    max-width: 330px;
}
.socialChannels--noMargin {
    margin: 0;
}
.socialChannel {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.socialChannel a {
        color: var(--neutral-06);
        transition: all 0.3s ease-in-out;
    }
.socialChannel a:hover {
            color: var(--brand-01);
        }
.socialChannel__followers {
    color: var(--neutral-05);
    font-size: var(--font-size-centi);
    text-transform: uppercase;
}
/* ==========================================================================
   #Social Icons
   ========================================================================== */
.socialLinks {
    display: flex;
}
@media only screen and (max-width: 767px) {
.socialLinks {
        flex-wrap: wrap
}
    }
.socialLinks--smallSpacing {
    flex-wrap: wrap;
}
@media only screen and (min-width: 1056px) {
.socialLinks--smallSpacing {
        flex-wrap: nowrap
}
    }
.socialLinks--smallSpacing .socialLinks__item {
        margin: 8px 6px;
    }
.socialLinks__item {
    color: var(--neutral-05);
    display: block;
    margin: auto 12px;
}
@media only screen and (max-width: 767px) {
.socialLinks__item {
        margin: 6px 6px 24px
}
    }
.socialLinks__item:first-child {
        margin-left: 0;
    }
.socialLinks__item:hover {
        color: var(--brand-01);
    }
.socialLinks--white {
    fill: var(--neutral-03);
}
.socialLinks--white .socialLinks__item:hover {
            fill: var(--neutral-01);
        }
/*
   #Social Media (Links)
   ========================================================================== */
.c-socialMedia {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.c-socialMedia__item {
    padding: 0 8px;
}
.c-socialMedia__item a {
        color: var(--neutral-05);
        transition: all 0.3s ease-in-out;
    }
.c-socialMedia__item a:hover {
            color: var(--brand-01);
        }
/**
 *  Example HTML:
 *
 *  <div id="socialSignalsContainer" class="socialSignalsContainer__bottomLeft" aria-live="polite" role="alert" style="left: 1081px;">
 *      <div class="socialSignal" style="display: flex;">
 *          <span class="socialSignal__icon fa fa-map-marker" aria-hidden="true"></span>
 *          <div class="socialSignal__message">New signal</div>
 *          <button type="button" class="socialSignal__closeButton" role="button">×</button>
 *      </div>
 *  </div>
*/
.socialSignal {
    box-shadow: 0 12px 20px rgba(106, 106, 106, 0.1);
    font-family: var(--font-sans-serif);
    align-items: flex-start;
    background-color: var(--neutral-06);
    border-radius: var(--border-radius-large);
    color: var(--neutral-01);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 8px 19px;
    pointer-events: auto; /* the socialSignal itself should be clickable */
    position: relative;
    width: 350px;
}
@media only screen and (max-width: 767px) {
.socialSignal {
        width: 100% !important
}
    }
@media print {
.socialSignal {
        display: none
}
    }
.socialSignal__icon {
    background-color: var(--neutral-01);
    border-radius: 50%;
    color: var(--neutral-05);
    display: block;
    flex: 0 0;
    font-size: var(--font-size-centi);
    margin: 4px 10px 0 0;
    min-height: 20px;
    min-width: 20px;
    padding-top: 2px;
    text-align: center;
}
@media only screen and (max-width: 767px) {
.socialSignal__icon {
        margin-top: 2px
}
    }
.socialSignal__message {
    flex: 10 0;
    margin-right: 10px;
    word-wrap: break-word;
}
.socialSignal__message a,
    .socialSignal__message label {
        color: var(--neutral-01);
    }
.socialSignal__message a:hover {
        color: var(--neutral-04);
        text-decoration: none;
    }
.socialSignal__closeButton {
    color: var(--neutral-04);
    flex: 0 0;
    font-size: var(--font-size-mega);
    line-height: 16px;
    margin-top: 5px;
    padding: 0 0 0 13px;
}
button.socialSignal__closeButton {
    border: 0;
    padding: 0;
}
/*
   #Custom Icons (for Social Signals)
   ========================================================================== */
.icon-ixdf-tree::before {
        background-image: url('https://public-media.interaction-design.org/images/icon-why-join-us-signal.svg');
        background-size: 18px;
        content: '';
        display: block;
        height: 16px;
        width: 20px;
    }
/**
 *  Example HTML:
 *
 *  <div id="socialSignalsContainer" class="socialSignalsContainer__bottomLeft" aria-live="polite" role="alert" style="left: 1081px;">
 *      <div class="socialSignal" style="display: flex;">
 *          <span class="socialSignal__icon fa fa-map-marker"  aria-hidden="true"></span>
 *          <div class="socialSignal__message">New signal</div>
 *          <button type="button" class="socialSignal__closeButton" role="button">×</button>
 *      </div>
 *  </div>
 */
#socialSignalsContainer {
    padding: 0 20px;
    pointer-events: none; /* the container should not be clickable */
    position: fixed;
    width: 100%;
    z-index: var(--depth__stickyComponents);
}
/* Overrides */
#socialSignalsContainer.socialSignalsContainer--bottomCenter > .socialSignal {
            margin-left: auto;
            margin-right: auto;
            width: 100%;
        }
@media only screen and (min-width: 768px) {
#socialSignalsContainer.socialSignalsContainer--bottomCenter > .socialSignal {
                width: 42%
        }
            }
@media only screen and (min-width: 1056px) {
#socialSignalsContainer.socialSignalsContainer--bottomCenter > .socialSignal {
                width: 33%
        }
            }
.socialSignalsContainer--bottomCenter {
    bottom: 0;
}
@media only screen and (max-width: 767px) {
.socialSignalsContainer--bottomCenter {
        left: 0 !important;
        margin: 0
}
    }
:root {
    --spinner-animation-duration: 0.75s;
    --spinner-size: 80px;
    --spinner-ball-size: calc(var(--spinner-size) * 0.15);
    --spinner-bowl-border-width: calc(var(--spinner-ball-size) / 3);
    --spinner-ball-holder-offset: calc(((var(--spinner-size) - var(--spinner-ball-size)) / 2) - var(--spinner-bowl-border-width));
    --spinner-ball-radius: calc(var(--spinner-ball-size) / 2);
}
.spinner {
    height: var(--spinner-size);
    margin: 0 auto;
    position: relative;
    width: var(--spinner-size);
}
.spinner__bowlRing {
    background-image: url('https://public-media.interaction-design.org/images/idf-logo-white-tree.svg');
    background-size: 95%;
    border: var(--spinner-bowl-border-width) solid var(--neutral-02);
    border-radius: var(--spinner-size);
    height: var(--spinner-size);
    position: absolute;
    width: var(--spinner-size);
}
.spinner__ballHolder {
    animation-duration: var(--spinner-animation-duration);
    animation-iteration-count: infinite;
    animation-name: ball_move;
    animation-timing-function: linear;
    height: var(--spinner-size);
    left: var(--spinner-ball-holder-offset);
    position: absolute;
    top: calc(-1 * var(--spinner-bowl-border-width));
    width: var(--spinner-ball-size);
}
.spinner__ball {
    background-color: var(--neutral-02);
    border-radius: var(--spinner-ball-radius);
    height: var(--spinner-ball-size);
    left: 0;
    position: absolute;
    top: calc(-1 * var(--spinner-bowl-border-width));
    width: var(--spinner-ball-size);
}
.spinner__message {
    color: var(--neutral-02);
}
.spinner__message > * {
        color: var(--neutral-02);
    }
@keyframes ball_move {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.spinner__bowlRing--gray {
    border: var(--spinner-bowl-border-width) solid var(--color-light-gray);
}
.spinner__ball--gray {
    background-color: var(--color-light-gray);
}
/* Used in resources/js/modules/spinner.js */
.spinnerContainer {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: calc(var(--depth__pageDialogs) + 99);
}
/*
 * This apply to element that going to show spinner
 */
.spinnerContainer__target {
    position: relative !important;
}
.spinnerContainer--page {
    position: fixed;
    z-index: calc(var(--depth__pageDialogs) + 99);
}
.spinnerContainer__backdrop,
.spinnerContainer__messageContainer {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.spinnerContainer__backdrop {
    background-color: rgba(0, 0, 0, .6);
}
/* ========================================================================== */
/*   #SRC */
/*   ========================================================================== */
code.src,
pre.src {
    background-color: var(--color-light-gray);
    border-radius: 5px;
    display: block;
    font-size: var(--font-size-centi);
    margin: 16px 0;
    overflow-y: auto;
    padding: 16px;
}
:root {
    --stepsNumberDiameter: 32px;
    --stepsMarginWithIndex: 16px;
    --stepsLineHeight: 27px;
}
@media only screen and (max-width: 767px) {
:root {
        --stepsNumberDiameter: 24px;
        --stepsMarginWithIndex: 8px;
        --stepsLineHeight: 20px
}
    }
.steps {
    counter-reset: my-list-counter;
    font-family: var(--font-sans-serif);
    list-style: none;
    margin: 0;
    padding: 0;
}
.steps__item {
    counter-increment: my-list-counter;
    margin-bottom: 0;
    padding-bottom: 32px;
    position: relative;
}
.steps__item:not(:last-child)::after {
            border-left: solid 2px var(--neutral-06);
            content: '';
            height: calc(100% - var(--stepsNumberDiameter));
            left: calc(var(--stepsNumberDiameter) / 2);
            position: absolute;
            top: var(--stepsNumberDiameter);
        }
.steps__item:last-child {
        padding-bottom: 0;
    }
.steps__headingLine {
    display: flex;
}
/* The custom index generated by us */
.steps__headingLine::before {
        border: solid 2px var(--neutral-06);
        border-radius: 50%;
        content: counter(my-list-counter);
        display: inline-block;
        font-size: 1.25rem;
        font-weight: bold;
        height: var(--stepsNumberDiameter);
        line-height: var(--stepsLineHeight);
        margin-right: var(--stepsMarginWithIndex);
        min-width: var(--stepsNumberDiameter);
        text-align: center;
    }
.steps__heading {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: var(--stepsLineHeight);
    margin: 0;
    margin-bottom: 16px;
}
.stepsItem--disabled {
    cursor: default;
    opacity: 0.4;
    pointer-events: none;
}
.stepsItem__content {
    margin-left: calc(var(--stepsMarginWithIndex) + var(--stepsNumberDiameter));
}
/* hide all immediate children except with the class stepPart--visible */
.stepsItem__content--disabled :not(.stepPart--visible) {
    display: none;
}
/* ==========================================================================
   #STICKY BOX (BOTTOM)
   ========================================================================== */
.stickyToBottom {
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    will-change: opacity; /* To move element to a new layer for performance reasons */
}
.stickyToBottom__container {
    display: flex;
    justify-content: center;
    padding: 16px;
    text-align: center;
}
@media only screen and (max-width: 767px) {
.stickyToBottom__container {
        flex-direction: column;
        padding: 8px 16px
}
    }
.stickyToBottom__text {
    font-family: var(--font-serif);
    margin: auto 0;
}
@media only screen and (max-width: 767px) {
.stickyToBottom__text {
        margin-bottom: 8px
}
    }
.stickyToBottom__buttonContainer {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: center;
}
.stickyToBottom__button {
    margin-left: 24px;
    width: unset;
}
@media only screen and (max-width: 767px) {
.stickyToBottom__button {
        margin-left: 8px;
        padding: 12px
}
    }
/* ==========================================================================
   #TEXT ITEM
   ========================================================================== */
/*
 * @todo - Rework, some elements are not necessary.
 *
 * This component consists of lines of text, which can
 * be main text or complementary text. It’s main purpose
 * is to be used inside lists that have one main text and
 * a subtext, both in different styles.
 */
.textItem {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.textItem__main {
    line-height: 1.25;
}
.textItem__main + .textItem__complementary {
        margin-top: 4px;
    }
.textItem__main--heading {
    font-size: var(--font-size-default);
    font-weight: 700;
    line-height: 1.35;
}
.textItem__complementary {
    font-family: var(--font-sans-serif);
    font-size: 0.8rem;
    font-weight: normal;
    letter-spacing: 0.15px;
    line-height: 1.2;
    margin-bottom: 4px;
    margin-top: 4px;
    color: var(--neutral-05);
    margin: 0;
}
.dataToggle__content {
    height: 0;
    overflow: hidden;
    position: relative;
}
.dataToggle__defaultLabel {
    align-items: center;
    display: inline-flex;
}
.dataToggle__expandedLabel {
    display: none;
}
.dataToggle__button--expanded .dataToggle__expandedLabel {
        align-items: center;
        display: inline-flex;
    }
.dataToggle__button--expanded .dataToggle__defaultLabel {
        display: none;
    }
.dataToggle__gradient {
    display: block;
    position: relative;
    text-align: center;
    top: 8px;
    width: 100%;
}
.dataToggle__gradient::before {
        background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
        content: '';
        height: 64px;
        left: 0;
        position: absolute;
        top: -64px;
        width: 100%;
        z-index: 1;
    }
.dataToggle__gradient.expanded::before {
            content: none;
        }
.dataToggle__gradient--darkBackground::before {
        background-image: linear-gradient(to bottom, rgba(236, 236, 236, 0), var(--neutral-03));
    }
.dataToggleTransitionClass {
    overflow: hidden;
    transition: height var(--transition-time) ease-out;
}
/* ==========================================================================
   #TOOLTIP (CSS ONLY)
   ========================================================================== */
/* @todo - Refactor to ONLY use data-tip="Tooltip text." */
[data-tip] {
    --tooltip-size: 5px;
    --tooltip-width: 240px;
    position: relative;
}
[data-tip]:not(.no-cursor).has-tip {
            border-bottom: none;
            font-weight: 700;
        }
@media only screen and (max-width: 767px) {
        [data-tip]:not(.open)::before {
            content: none !important;
        }

        [data-tip]:not(.open):not(.dataTip__showInResponsive)::after {
            content: none !important;
        }
    }
[data-tip]::after {
        font-family: var(--font-sans-serif);
        background-color: var(--neutral-06);
        border-radius: var(--border-radius-large);
        bottom: 100%;
        color: var(--neutral-01);
        font-size: var(--font-size-centi);
        font-weight: 400;
        left: -10px;
        line-height: 1.2;
        margin-bottom: calc(2 * var(--tooltip-size));
        opacity: 0;
        padding: 4px 8px;
        position: absolute;
        text-transform: none;
        transform-origin: bottom center;
        white-space: normal;
        width: var(--tooltip-width);
    }
[data-tip]::before {
        border: var(--tooltip-size) solid transparent;
        border-bottom-width: 0;
        border-top-color: var(--neutral-06);
        left: 50%;
        margin-left:calc(-1 * var(--tooltip-size));
        margin-top: calc(-2 * var(--tooltip-size));
        opacity: 0;
        position: absolute;
        text-transform: none;
        top: 0;
        transform-origin: top center;
    }
[data-tip].open::before,
    [data-tip]:hover::before,
    [data-tip]:active::before {
        animation: animateTooltip 125ms var(--easeOutQuint) forwards 50ms;
        content: '';
        z-index: calc(var(--depth__contentComponents) + 99); /* highest depth on any other component */
    }
[data-tip].open::after,
    [data-tip]:hover::after,
    [data-tip]:active::after {
        animation: animateTooltip 125ms var(--easeOutQuint) forwards 50ms;
        content: attr(data-title);
        text-align: left;
        z-index: calc(var(--depth__notifications) + 99); /* highest depth on any other component */
    }
[data-tip].tip-small::after {
            left: calc(50% - 24px);
            max-width: var(--tooltip-width);
            white-space: nowrap;
            width: auto;
        }
[data-tip].tip-wide::after {
            --tooltip-width: 320px;
        }
/*
       #Bottom tip
       ========================================================================== */
[data-tip].tip-bottom::after {
            bottom: auto;
            margin-bottom: 0;
            margin-top: calc(2 * var(--tooltip-size));
            top: 100%;
            transform-origin: top center;
        }
[data-tip].tip-bottom::before {
            border-bottom-color: var(--neutral-06);
            border-bottom-width: var(--tooltip-size);
            border-top-width: 0;
            bottom: 0;
            margin-bottom: calc(-2 * var(--tooltip-size));
            margin-top: 0;
            top: auto;
            transform-origin: bottom center;
        }
/*
       #Collision support
       ========================================================================== */
[data-tip].tip-rtl.tip-bottom::after {
                transform-origin: top right;
            }
[data-tip].tip-rtl::after {
            left: auto;
            margin-left: 0;
            right: -10px;
            transform-origin: bottom right;
        }
[data-tip].tip-center::after {
            left: 50%;
            margin-left: -115px;
        }
[data-tip].tip-left::before {
            left: 8px;
        }
@keyframes animateTooltip {
    from {
        opacity: 0;
        transform: scale(0.3);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* ========================================================================== */
/*   #WRAPPER BLOCK - Layout Component */
/*   ========================================================================== */
/*
 * ---------- This is deprecated and should not be used moving forward --------------
 *
 * This component aims to reduce the time to spend organizing and styling
 * wrapper elements for different layouts. It aims to provide a wide range
 * of predetermined layouts that will adapt to (and be independent of)
 * any children.
 */
.wrapper {
    align-content: stretch;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 0;
}
/**
 * @todo - Replace for a regular wrapper or alternative component.
 */
.wrapper--list {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media only screen and (min-width: 768px) {
.wrapper--list {
        display: flex
}

        .wrapper--list > li {
            padding-right: 16px;
            width: 50%;
        }
    }
.horizontalLine {
    background-color: var(--neutral-05);
    /* support HTMLHREelement (or <hr>) */
    border: 0;
    height: 1px;
    margin: 24px 0;
}
.horizontalLine > span {
        background-color: var(--neutral-01);
        border: 1px solid var(--neutral-05);
        padding: 0 2px;
        position: relative;
        top: -12px;
    }
.horizontalLine:last-child {
        display: none;
    }
.horizontalLine--white {
    background-color: var(--neutral-02);
}
.horizontalLine--white > span {
        border-color: var(--neutral-02);
    }
.horizontalLine--light {
    background-color: var(--neutral-04);
}
.horizontalLine--light > span {
        border-color: var(--neutral-04);
    }
.horizontalLine--small {
    margin: 24px auto;
    width: 80px;
}
.horizontalLine--medium {
    margin: 24px auto;
    width: 140px;
}
/*
 * @todo Refactor, use variatin and remove panel dependency
 */
/* Inside panels, be as wide as parent */
.panel .horizontalLine:not(.with-padding) {
        margin-left: -20px;
        margin-right: -20px;
    }
.cookieNotice {
    transform: translateX(calc(50vw - 50%));
    transition: transform 350ms var(--easeInOutQuint);
    width: 300px;
}
@media only screen and (min-width: 768px) {
.cookieNotice {
        transform: translateX(0);
        width: 370px
}
    }
.cookieNotice[aria-expanded="true"] {
        transform: translateX(-89%);
        transition-delay: 3s;
    }
.cookieNotice[aria-expanded="false"] {
        transform: translateX(-89%);
        transition-delay: 1s;
    }
.cookieNotice:hover,
    .cookieNotice:focus {
        transform: translateX(calc(50vw - 50%));
        transition-delay: 0s;
    }
@media only screen and (min-width: 768px) {
.cookieNotice:hover,
    .cookieNotice:focus {
            transform: translateX(0)
    }
        }
.cookieNotice[aria-hidden="true"] {
        animation: fadeOut var(--transition-time) ease-out;
        pointer-events: none;
    }
.cookieNotice__signal {
    align-items: center;
    background-color: var(--neutral-06);
    border-radius: var(--border-radius-large);
    box-shadow: 0 0 6px 1px rgba(152, 152, 152, 0.7);
    color: var(--neutral-01);
    display: inline-flex;
    font-size: 16px;
    letter-spacing: normal;
    line-height: 1.2;
    padding: 8px 16px;
}
@media only screen and (max-width: 767px) {
.cookieNotice__signal {
        width: 100% !important
}
    }
@media print {
.cookieNotice__signal {
        display: none
}
    }
.cookieNotice__body {
    width: 222px;
}
@media only screen and (max-width: 767px) {
.cookieNotice__body {
        margin-right: 4px;
        width: initial
}
    }
.cookieNotice__agreeButton {
    min-width: auto;
    white-space: nowrap;
}
@media only screen and (max-width: 767px) {
.cookieNotice__agreeButton {
        width: unset
}
    }
.cookieNotice__icon {
    margin: auto 0 auto 8px;
}
.arrowPointingMessage {
    display: flex;
    flex-direction: row;
    transition-duration: var(--transition-time);
    transition-property: transform, opacity;
    transition-timing-function: ease;
}
.arrowPointingMessage__message {
    margin-left: 10px;
    margin-top: 25px;
}
.profileImageEditor {
    display: table;
    margin-left: auto;
    margin-right: auto;
}
.profileImageEditor .cropper-modal.cropper-modal {
        background-color: var(--neutral-01);
        opacity: .8;
    }
.profileImageEditor .cropper-view-box.cropper-view-box {
        border-radius: 50%;
        outline: 0;
    }
.profileEditorFooter {
    margin: 0 auto;
    text-align: center;
    width: 90%;
}
.brokenCertificate {
    height: 180px;
    margin: 0 auto;
    position: relative;
    width: 250px;
}
@media only screen and (min-width: 768px) {
.brokenCertificate {
        height: 288px;
        width: 400px
}
    }
.brokenCertificate__torned {
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
}
.brokenCertificate__torned--left {
    transform: rotate(2deg);
    transform-origin: top left;
}
.brokenCertificate__torned--right {
    transform: rotate(-2deg);
    transform-origin: top right;
}
@media only screen and (min-width: 768px) {
.brokenCertificate__torned--right {
        left: 3px
}
    }
/* stylelint-disable color-no-invalid-hex */
.brokenCertificate__image--left {
    -webkit-clip-path: url(#brokenCertificate__leftTornedPath--small);
            clip-path: url(#brokenCertificate__leftTornedPath--small);
}
@media only screen and (min-width: 768px) {
.brokenCertificate__image--left {
        -webkit-clip-path: url(#brokenCertificate__leftTornedPath--medium);
                clip-path: url(#brokenCertificate__leftTornedPath--medium)
}
    }
.brokenCertificate__image--right {
    -webkit-clip-path: url(#brokenCertificate__rightTornedPath--small);
            clip-path: url(#brokenCertificate__rightTornedPath--small);
}
@media only screen and (min-width: 768px) {
.brokenCertificate__image--right {
        -webkit-clip-path: url(#brokenCertificate__rightTornedPath--medium);
                clip-path: url(#brokenCertificate__rightTornedPath--medium)
}
    }
/* ========================================================================== */
/*   #Copy Button */
/*   ========================================================================== */
.copyButton {
    transition: background-color var(--transition-time) ease-out;
}
.copyButton.is-copied {
        background-color: var(--neutral-03);
        color: var(--neutral-06);
    }
.link--copy,
    .link--copy:hover,
    .link--copy:focus,
    .link--copy:active {
        color: var(--neutral-05);
    }
.link--copy:hover {
        color: var(--neutral-04);
    }
.link--copy.is-copied {
        background-color: transparent !important;
    }
.link--copy.is-copied,
        .link--copy.is-copied:hover,
        .link--copy.is-copied:focus,
        .link--copy.is-copied:active {
            color: var(--accent-01);
        }
@keyframes pulseCopied {
    0% {
        transform: scale(0);
    }

    40% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}
.collapsibleText {
    display: inline;
}
.collapsibleText__toggleButton {
    display: inline;
    padding: 0;
}
.collapsibleText__toggleButton .collapsibleText__toggleLabel--expand {
        display: inline;
    }
.collapsibleText__toggleButton .collapsibleText__toggleLabel--collapse {
        display: none;
    }
.collapsibleText__toggleButton--expanded .collapsibleText__toggleLabel--expand {
        display: none;
    }
.collapsibleText__toggleButton--expanded .collapsibleText__toggleLabel--collapse {
        display: inline;
    }
.collapsibleText__content--expanded {
    display: inline !important;
}
.collapsibleText__content {
    display: none;
}
:root {
    --collapsibleOverflowTextZindex: 0;
}
.collapsibleOverflowText__text {
    overflow: hidden;
    position: relative;
    z-index: var(--collapsibleOverflowTextZindex);
}
.collapsibleOverflowText__button {
    color: var(--link-color);
}
.collapsibleOverflowText__overlay::after {
        background-image: linear-gradient(to bottom, rgba(236, 236, 236, 0), var(--section-background-color));
        bottom: 0;
        content: '';
        height: 64px;
        left: 0;
        position: absolute;
        width: 100%;
        z-index: calc(var(--collapsibleOverflowTextZindex) + 1);
    }
.collapsibleOverflowText__overlay--dark::after {
        background-image: linear-gradient(to bottom, rgba(236, 236, 236, 0), var(--neutral-03));
    }
.collapsibleOverflowText__overlay--darkest::after {
        background-image: linear-gradient(to bottom, rgba(43, 43, 43, 0), var(--neutral-06));
    }
.collapsibleOverflowText--transition {
    transition: height var(--transition-time) ease-out;
}
.collapsibleOverflowText__chevron {
    transform: transform var(--transition-time) ease-out;
}
.collapsibleOverflowText__ButtonText--expanded {
    display: none;
}
.collapsibleOverflowText--expanded .collapsibleOverflowText__chevron {
        transform: rotate(180deg);
    }
.collapsibleOverflowText--expanded .collapsibleOverflowText__ButtonText--collapsed {
        display: none;
    }
.collapsibleOverflowText--expanded .collapsibleOverflowText__ButtonText--expanded {
        display: initial;
    }
.focusOnTheMainPageContainer {
    margin: 0 auto;
    max-width: 660px;
}
/* -======================- */
/* Other elements           */
/* -======================- */
.checkboxWithHint {
}
.checkboxWithHint__message {
    pointer-events: none;
    transition-duration: var(--transition-time);
    transition-property: opacity, transform, max-height;
    transition-timing-function: ease-out;
}
.checkboxWithHint__checkbox:checked ~ .checkboxWithHint__message {
        display: none;
        opacity: 0;
        transform: translateY(-1.2em);
    }
.checkboxWithHint__checkbox:not(:checked) ~ .checkboxWithHint__message {
        opacity: 1;
        transform: translateY(0);
    }
.tagsWidget {}
.tagsWidget__taglist-item {
    font-size: var(--font-size-hecto);
    margin-bottom: 10px;
}
.tagsWidget__taglist-item:not(:last-child) {
    margin-right: 5px;
}
.eventListItem {
    border-bottom: solid 1px var(--neutral-04);
    padding: 16px 0 16px 16px;
}
.eventListItemHeading {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 5px;
}
.eventListItem__date,
.eventListItem__place {
    color: var(--neutral-05);
    fill: var(--neutral-05);
    font-size: var(--font-size-centi);
}
.eventLisItemDot {
    margin: 0 2px;
}
.scheduleBar__wrapper {
    min-height: 71px;
    position: relative;
    z-index: var(--depth__stickyComponents);
}
/* applied by JS when the bar becomes invisible after page scrolling */
.scheduleBar__wrapper.detached .scheduleBar {
            box-shadow: 0 8px 16px rgba(106, 106, 106, 0.1);
            animation: fx-show-schedule-bar .2s ease-in forwards;
            bottom: 0;
            left: 0;
            position: fixed;
            width: 100%;
        }
@media only screen and (max-width: 767px) {

            .scheduleBar__wrapper.detached .scheduleBar__time,

            .scheduleBar__wrapper.detached .scheduleBar__timeText {
                display: block;
            }

            .scheduleBar__wrapper.detached .button {
                flex-shrink: 0;
                min-width: unset;
                padding: 12px;
                width: unset;
            }

        }
@keyframes fx-show-schedule-bar {
            from {
                transform: translateY(100%);
            }
            to {
                transform: none;
            }
        }
@media only screen and (max-width: 767px) {
            .scheduleBar__wrapper:not(.detached) .scheduleBar__inner {
                flex-direction: column;
            }

            .scheduleBar__wrapper:not(.detached) .scheduleBar__inner > * {
                margin-bottom: 20px;
            }
        }
/* applied by JS when already detached bar hides to get its place on the page */
.scheduleBar__wrapper.reverted .scheduleBar {
            animation: fx-revert-schedule-bar .1s ease-out forwards;
        }
@keyframes fx-revert-schedule-bar {
            from {
                transform: none;
            }
            to {
                transform: translateY(100%);
            }
        }
.scheduleBar__inner {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
}
.scheduleBar__timeText {
    display: none;
}
.scheduleBar__price {
    display: flex;
    flex-grow: 1;
    justify-content: space-evenly;
}
.genericList__listItem {
    font-family: var(--font-sans-serif);
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.2;
    margin-bottom: 8px;
    margin-top: 24px;
    border-bottom: 1px solid var(--neutral-04);
    color: var(--neutral-06);
    margin: 0;
    padding: 16px;
}
.genericList__listItem--link:hover {
        background-color: var(--neutral-01);
    }
.genericList__listItem--link>.linkStrip__link {
        width: calc(100% + 32px);
    }
.genericList__listItem--onDarkBackground > .genericList__listItem {
    border-bottom-color: var(--neutral-05);
}
.genericList__listItem--onDarkBackground > .genericList__listItem:hover {
        background-color: var(--neutral-05);
    }
.rankedItem {
    align-items: center;
    border-bottom: 1px solid var(--neutral-04);
    color: var(--neutral-06);
    display: flex;
    font-size: 1rem;
    font-weight: bold;
    padding: 16px;
}
.rankedItem--link:hover {
        background-color: var(--neutral-01);
    }
.rankedItem--noBorder {
    border-bottom: none;
}
.rankedItem__rank {
    font-size: 1.25rem;
    margin-right: 16px;
    min-width: 12px;
    text-align: right;
}
.rankedItem__content {
    display: flex;
    flex-grow: 2;
}
.rankedItem__titles {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.rankedItem__title {
    margin: 0;
}
.rankedItem__subtitle {
    color: var(--neutral-05);
    font-size: 0.8rem;
    font-weight: normal;
    margin-top: 2px;
}
.rankedItem__imageContainer {
    min-width: 72px;
}
.rankedItem__image {
    height: 64px;
    margin-right: 8px;
    width: 64px;
}
.rankedItemBreak {
    color: var(--neutral-05);
    font-size: 20px;
    font-weight: bold;
    margin: 8px 0;
    text-align: center;
}
:root {
    --todo-number-diameter: 32px;
    --todo-margin-with-index: 16px;
    --todo-line-height: 27px;
    --todo-icon-height: 24px;
}
@media only screen and (max-width: 767px) {
:root {
        --todo-number-diameter: 24px;
        --todo-margin-with-index: 8px;
        --todo-line-height: 20px;
        --todo-icon-height: 16px
}
    }
.todo {
    color: var(--neutral-06);
    counter-reset: my-list-counter;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.todo__listItem {
    display: flex;
    margin-bottom: 24px;
    padding: 0;
    position: relative;
}
.todo__listItem::before {
        border: solid 2px var(--neutral-06);
        border-radius: 50%;
        content: counter(my-list-counter);
        display: inline-block;
        font-size: 1.25rem;
        font-weight: bold;
        height: var(--todo-number-diameter);
        line-height: var(--todo-line-height);
        margin-right: var(--todo-margin-with-index);
        min-width: var(--todo-number-diameter);
        text-align: center;
    }
.todo__listItem--incomplete {
    counter-increment: my-list-counter;
}
.todo__listItem--complete {
    /* we use order to arrange done items at the end */
    order: 2;
}
.todo__listItem--complete::before {
        background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23457205'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M12 26a2 2 0 01-1.41-.59l-8-8a2 2 0 012.82-2.82L12 21.17 26.59 6.59a2 2 0 012.82 2.82l-16 16A2 2 0 0112 26z'/%3E%3C/svg%3E") no-repeat center;
        background-size: var(--todo-icon-height);
        border-color: var(--accent-01);
        content: '';
    }
.todoListItem__title {
    font-size: 1rem;
    margin: 0;
}
.todoListItem__subtitle {
    color: var(--neutral-05);
    font-size: 0.8rem;
    margin-top: 4px;
}
.todoListItem__doneText {
    color: var(--accent-01);
    font-family: var(--font-sans-serif);
    margin: 0;
}
.accordionList__item {
    border-bottom: 1px solid var(--neutral-04);
    padding: 0;
}
.accordionItem__titleContent {
    cursor: pointer;
    display: flex;
    padding: 16px;
}
.accordionItem__title {
    flex-grow: 2;
}
details[aria-expanded='true'] .accordionItem__chevron {
        transform: rotate(180deg);
    }
.accordionItem__chevron {
    flex-shrink: 0;
    height: 20px;
    transition: transform var(--transition-time) ease-out;
    width: 20px;
}
@media only screen and (max-width: 767px) {
.accordionItem__chevron {
        height: 18px;
        width: 18px
}
    }
.accordionItem__content {
    background-color: var(--contrast-section-background-color);
    padding: 16px;
}
.tableContainer {
    /* Used this logic for adding box-shadow: https://stackoverflow.com/questions/50654217/adding-horizontal-scrolling-shadows-effect */
    background-attachment: local, local, scroll, scroll;
    background-color: var(--section-background-color);
    background-image: linear-gradient(to right, var(--section-background-color), var(--section-background-color)), linear-gradient(to right, var(--section-background-color), var(--section-background-color)), linear-gradient(to right, rgba(0, 0, 20, .50), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 20, .50), rgba(255, 255, 255, 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
    overflow-x: auto;
}
.baseTable--fullWidth {
    width: 100%;
}
.baseTable {
    font-family: var(--font-sans-serif);
    background-color: transparent;
    border: none;
    border-collapse: collapse;
    margin: 0;
}
.baseTable__body--alignTop {
    vertical-align: top;
}
.baseTable__headingRow {
    border-bottom: solid 1px var(--neutral-04);
}
.baseTable__headingColumn {
    padding: 0 0 4px 16px;
    text-align: left;
}
.baseTable__row {
    border-bottom: solid 1px var(--neutral-04);
}
.baseTable__column {
    font-family: var(--font-serif);
    padding: 16px;
}
.tableRecord__row {
    border-bottom: solid 1px var(--neutral-04);
    padding: 16px;
}
/* stylelint-disable order/properties-alphabetical-order */
.tabs {
    --underlineHeight: 4px;
    font-family: var(--font-sans-serif);
    /* overflowShadow start */
    background-attachment: local, local, scroll, scroll;
    background-color: var(--section-background-color);
    /* These values are for a neutral-2 background */
    background-image:
        /* Shadows */ linear-gradient(to right, var(--section-background-color), var(--section-background-color)),
    linear-gradient(to right, var(--section-background-color), var(--section-background-color)),
        /* Shadow covers */ linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)),
    linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 25px 100%, 25px 100%, 15px 100%, 15px 100%;
    /* overflowShadow end */
    align-items: stretch;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    list-style: none;
    margin-bottom: 0;
    margin-left: 0;
    overflow-x: auto;
    padding-left: 0;
}
@media only screen and (max-width: 1055px) {
.tabs {
        grid-column: 1/4;
        max-width: 100%
}
    }
.tabs__item {
    margin-bottom: 0;
    padding: 0;
    font-size: 1rem;
    white-space: nowrap;
}
@media only screen and (min-width: 768px) {
.tabs__item {
        margin-bottom: 0
}
    }
.tabs__item--active .tabs__itemLink {
        border-bottom: solid 4px var(--brand-02);
        color: var(--brand-02);
        font-weight: 700;
    }
.tabs__itemLink {
    background-color: transparent;
    border-bottom: solid 4px transparent;
    color: var(--text-color);
    display: inline-block;
    height: 100%;
    margin-right: 1px;
    padding: 16px 12px calc(16px - var(--underlineHeight)) 12px;
    text-decoration: none;
}
.tabs__itemLink:active,
    .tabs__itemLink:focus,
    .tabs__itemLink:hover {
        border-bottom: solid var(--underlineHeight) var(--brand-02);
        color: var(--text-color);
        text-decoration: none;
    }
.tabs__itemLink:active {
        outline: none;
    }
/*
     * A hack to make tabs not shifting on switching them
     * @see https://stackoverflow.com/a/26476082/4343530
     */
.tabs__itemLink::before {
        display: block;
        content: attr(title);
        font-weight: bold;
        height: 0;
        overflow: hidden;
        visibility: hidden;
    }
@media only screen and (min-width: 768px) {
.tabs--pageSticky {
        background: var(--neutral-02);
        position: sticky;
        top: 54px; /* the height of sticky top navigation bar */
        z-index: calc(var(--depth__headingComponents) - 1)
}
    }
.tabs__contentGroup {
    margin-bottom: 24px;
    width: 100%;
}
.tabs__singleTabContent {
    display: none;
}
.tabs__singleTabContent--active {
    display: block;
    float: none;
    padding: 15px 0;
    width: 100%;
}
.textLink--light {
    color: var(--brand-02);
}
.textLink--light:visited {
        color: var(--accent-04);
    }
.textLink--dark {
    color: var(--brand-01);
}
.textLink--dark:visited {
        color: var(--accent-05);
    }
.templateWidget {
    border: solid 1px var(--neutral-04);
    border-radius: 8px;
}
.tagsInput {
    align-items: center;
    background-color: var(--neutral-01);
    border: solid 1px var(--neutral-05);
    border-radius: var(--border-radius-large);
    box-shadow: inset 0 1px 4px 0 var(--shadow-color-default);
    cursor: text;
    display: flex;
    flex-wrap: wrap;
    line-height: 1em;
    min-height: 37px;
    padding: 5px 5px 0;
    width: 100%;
}
/* We have to overwrite styles for input so we are ignoring BEM here */
.tagsInput input[type="text"] {
        background-color: transparent;
        border: none;
        box-shadow: none;
        flex: 2 0;
        height: 24px;
        margin: 0;
        max-width: 100%;
        outline: none;
        overflow: hidden;
        padding: 0;
    }
.tagsInput__tag {
    background-color: var(--neutral-05);
    border-radius: var(--border-radius-large);
    color: var(--neutral-01);
    display: inline-flex;
    font-weight: 700;
    margin-bottom: 5px;
    margin-right: 5px;
    padding: 5px 4px 5px 12px;
}
.tagsInput__deleteButton {
    font-size: 30px;
    line-height: 18px;
    margin: 0 0 0 5px;
    overflow: hidden;
    padding: 0;
}
.tagsInput__deleteButton::after {
        content: '\00d7';
        padding: 0 2px;
    }
date-picker {
    --datepicker-color-border: var(--shadow-color-default);
    --datepicker-color-hover: rgba(106, 106, 106, 0.1);
    --datepicker-color-graytext: var(--neutral-04);
    --datepicker-color-selected: var(--brand-02);
    --datepicker-color-background: var(--neutral-01);
    --datepicker-border-radius: var(--border-radius-large);
    --datepicker-day-width: 48px;
    --datepicker-day-height: 48px;
    --datepicker-font-size: 18px;
    font-family: var(--font-sans-serif);
    font-size: 18px;
    line-height: 1.5;
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
date-picker {
        --datepicker-size: 100%;
        font-size: 16px;
        line-height: 2
}
    }
date-picker input {
        background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%232b2b2b'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M26 7h-5V6a1 1 0 00-2 0v1h-6V6a1 1 0 00-2 0v1H6a1 1 0 00-1 1v16a3 3 0 003 3h16a3 3 0 003-3V8a1 1 0 00-1-1zM7 9h4v1a1 1 0 002 0V9h6v1a1 1 0 002 0V9h4v5H7V9zm18 15a1 1 0 01-1 1H8a1 1 0 01-1-1v-8h18v8z'/%3E%3C/svg%3E");
        background-origin: content-box;
        background-position: right center;
        background-repeat: no-repeat;
        background-size: 24px;
        box-sizing: border-box;
        cursor: default !important;
    }
date-picker::part(left-btn) {
        background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%232b2b2b'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M21 27a1 1 0 01-.71-.29l-10-10a1 1 0 010-1.41l10-10a1 1 0 011.41 1.41L12.41 16l9.29 9.29A1 1 0 0121 27z'/%3E%3C/svg%3E");
        background-size: 24px;
        transition: transform 75ms ease-in;
    }
date-picker::part(left-btn):active {
            transform: translateX(-2px);
        }
@media (hover: hover) {
            date-picker::part(left-btn):hover {
                transform: scale(1.4);
            }
        }
date-picker::part(right-btn) {
        background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%232b2b2b'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M11 27a1 1 0 01-.71-1.71l9.3-9.29-9.3-9.29A1 1 0 0111.7 5.3l10 10a1 1 0 010 1.41l-10 10a1 1 0 01-.7.29z'/%3E%3C/svg%3E");
        background-size: 24px;
        transition: transform 75ms ease-in;
    }
date-picker::part(right-btn):active {
            transform: translateX(2px);
        }
@media (hover: hover) {
            date-picker::part(right-btn):hover {
                transform: scale(1.4);
            }
        }
/* ========================================================================== */
/* RTE content: wrapper for the HTML content, generated by RTE                */
/* ========================================================================== */
rt-content,
.rteContent {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.78;
    margin-bottom: 24px;
    max-width: var(--max-text-width-size);
    max-width: 100%;
}
/* Aligment needs to be middle for links to be aligned in copyrights */
rt-content small a, .rteContent small a {
        vertical-align: middle;
    }
rt-content ul,
    rt-content ol,
    .rteContent ul,
    .rteContent ol {
        font-family: var(--font-serif);
        line-height: 1.78;
    }
rt-content ul, .rteContent ul {
        list-style-type: disc;
    }
rt-content li, .rteContent li {
        margin-bottom: 8px;
        /* Some editor add paragraph to list items, we need set margin-bottom to 0 in that case */
    }
/* This should be removed if editor is not adding pargraph to li */
rt-content li p:last-child, .rteContent li p:last-child {
            margin-bottom: 0;
        }
/*
     * Heading top spacing to follow design spec
     * @see https://zpl.io/VQ05MJA
     */
rt-content .rteContent__isolatedBlock h1:not(:first-child),
        rt-content .rteContent__isolatedBlock h2:not(:first-child),
        rt-content .rteContent__isolatedBlock h3:not(:first-child),
        rt-content .rteContent__isolatedBlock h4:not(:first-child),
        rt-content .rteContent__isolatedBlock h5:not(:first-child),
        rt-content .rteContent__isolatedBlock h6:not(:first-child),
        .rteContent .rteContent__isolatedBlock h1:not(:first-child),
        .rteContent .rteContent__isolatedBlock h2:not(:first-child),
        .rteContent .rteContent__isolatedBlock h3:not(:first-child),
        .rteContent .rteContent__isolatedBlock h4:not(:first-child),
        .rteContent .rteContent__isolatedBlock h5:not(:first-child),
        .rteContent .rteContent__isolatedBlock h6:not(:first-child) {
            margin-top: 0;
        }
rt-content .rteContent__isolatedBlock h4:not(:first-child),
        rt-content .rteContent__isolatedBlock h5:not(:first-child),
        rt-content .rteContent__isolatedBlock h6:not(:first-child),
        .rteContent .rteContent__isolatedBlock h4:not(:first-child),
        .rteContent .rteContent__isolatedBlock h5:not(:first-child),
        .rteContent .rteContent__isolatedBlock h6:not(:first-child) {
            font-weight: normal;
        }
rt-content table, .rteContent table {
    font-family: var(--font-sans-serif);
    background-color: transparent;
    border: none;
    border-collapse: collapse;
    margin: 0;
}
rt-content table p, .rteContent table p {
            margin: 0;
}
rt-content thead tr, .rteContent thead tr {
    border-bottom: solid 1px var(--neutral-04);
    border-bottom: 1px solid var(--rte-placeholder-color);
}
rt-content tbody tr, .rteContent tbody tr {
    border-bottom: solid 1px var(--neutral-04);
    border-bottom: 1px solid var(--rte-placeholder-color);
}
rt-content th, .rteContent th {
    padding: 0 0 4px 16px;
    text-align: left;
}
@media only screen and (max-width: 1055px) {
rt-content th, .rteContent th {
            white-space: nowrap;
    }
}
rt-content td, .rteContent td {
    font-family: var(--font-serif);
    border: 1px solid var(--rte-placeholder-color);
    padding: 16px;
}
@media only screen and (max-width: 1055px) {
rt-content td, .rteContent td {
            white-space: nowrap;
    }
}
rt-content .button, .rteContent .button {
        background: var(--brand-01);
    }
rt-content figure, .rteContent figure {
        margin-bottom: 24px;
    }
/*
     * Images that has width and height defined will have no max width.
     * @see /resources/pcss/elements/images.pcss
     */
.rteContent--imageFit img[width],
    .rteContent--imageFit img[height] {
        max-width: 100%;
    }
.rteContent--imageFit .rteContent__isolatedBlock img[width],
        .rteContent--imageFit .rteContent__isolatedBlock img[height] {
            max-width: none;
        }
.rteContent--bodyLineHeight {
    line-height: 1.78;
}
.rteContent--bodyFullWidth p {
        max-width: 100%;
    }
:root {
    --rte-active-color: var(--neutral-03);
    --rte-background-color: var(--neutral-01);
    --rte-border-color: var(--neutral-05);
    --rte-hover-color: var(--color-light-gray);
    --rte-placeholder-color: var(--neutral-04);
    --rte-padding: calc(var(--rte-toolbar-border-radius) * 1.5);
    --rte-toolbar-border-radius: var(--border-radius-large);
    --rte-toolbar-icon-size: 20px;
    --rte-toolbar-item-margin: calc(var(--rte-toolbar-border-radius) / 2);
    --rte-toolbar-item-radius: 4px;
    --rte-toolbar-item-size: 32px;
    --rte-toolbar-padding: 6px;
    --rte-toolbar-shadow-color: var(--shadow-color-default);
}
rt-editor {
    background: var(--rte-background-color);
    border: 1px solid var(--rte-border-color);
    border-radius: var(--rte-toolbar-border-radius);
    box-shadow: inset 0 1px 4px 0 var(--rte-toolbar-shadow-color);
    display: block;
    position: relative;
}
rt-editor::before {
        font-family: var(--font-serif);
        font-size: 1rem;
        font-weight: normal;
        line-height: 1.78;
        margin-bottom: 24px;
        max-width: var(--max-text-width-size);
        margin: var(--rte-padding);
    }
rt-editor .rt-editor__textarea {
        border: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        visibility: hidden;
    }
rt-editor[aria-busy="false"]::before {
            content: none;
        }
rt-editor[aria-busy="false"] .rt-editor__textarea {
            visibility: visible;
        }
rt-editor.error {
        border-color: var(--accent-03);
    }
rt-content {
    display: block;
    margin: var(--rte-padding);
    margin-bottom: 0;
    max-width: var(--max-text-width-size);
}
rt-content[aria-readonly="true"] {
        visibility: hidden;
    }
/* placeholder-like style rules */
rt-editor::before,
rt-content::before {
    color: var(--rte-placeholder-color);
    content: attr(placeholder);
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.rt-editor__textarea {
    background-color: var(--neutral-06);
    bottom: 0;
    box-shadow: none;
    box-sizing: border-box;
    color: var(--neutral-04);
    display: block;
    font-family: monospace;
    font-size: var(--font-size-centi);
    margin: 0;
    outline: 0;
    padding: 0 var(--border-radius-large);
    position: absolute;
    resize: none;
    top: calc(var(--rte-toolbar-item-size) + 2 * var(--rte-toolbar-padding));
    width: 100%;
}
rt-widget {
    display: block;
    outline: 1px dashed;
    white-space: normal;
}
.videoTranscript .videoTranscript__summaryOpenText {
        display: none;
    }
.videoTranscript[open] .videoTranscript__summaryIcon {
            transform: rotate(-180deg);
        }
.videoTranscript[open] .videoTranscript__summaryOpenText {
            display: inline;
        }
.videoTranscript[open] .videoTranscript__summaryClosedText {
            display: none;
        }
.videoTranscript__summary {
    cursor: pointer;
    list-style: none;
}
.videoTranscript__summary::marker, .videoTranscript__summary::-webkit-details-marker {
        display: none;
    }
.videoTranscript__summaryIcon {
    transition: transform linear var(--transition-time);
}
.videoTranscript__details {
    max-height: 400px;
    overflow-y: auto;
}
.videoTranscript__transcriptTime {
    flex-basis: 80px;
}
@media only screen and (max-width: 767px) {
.videoTranscript__transcriptTime {
        flex-basis: 60px
}
    }
/* Cards */
:root {
    --color-card-bg: #fff;
    --color-card-title: #fff;
    --color-card-text: var(--text-color-secondary);
    --color-card-text-accent: var(--text-color);
    --color-card-separator: var(--neutral-04);
    --card-radius: var(--border-radius-large);
    --card-header-height: 210px;
    --card-footer-height: 52px;
    --card-transition-timing: 0.2s ease-out;
}
@media only screen and (max-width: 767px) {
.card-wrapper {
        margin: 0 16px 16px
}
    }
@media only screen and (max-width: 767px) {
.card-wrapper:last-child {
            margin-bottom: 0
    }
        }
.card {
    box-shadow: 0 2px 8px rgba(106, 106, 106, 0.4);
    font-family: var(--font-sans-serif);
    background: var(--color-card-bg);
    border: none;
    border-radius: var(--card-radius);
    color: var(--color-card-text);
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
    overflow: hidden;
    padding-top: var(--card-header-height);
    position: relative;
    text-decoration: none;
    transition: box-shadow var(--card-transition-timing);
    width: 100%;
}
/* Hover works only in case the card is a <a> tag */
a.card:hover,
    a.card:focus,
    a.card:active {
        box-shadow: 0 4px 12px rgba(106, 106, 106, 0.4);
        color: var(--color-card-text);
        text-decoration: none;
    }
/* Logo pic */
a.card:hover .card__header::before, a.card:focus .card__header::before, a.card:active .card__header::before {
            height: 52px;
            opacity: 1;
        }
a.card:hover .cardFooter__icon, a.card:focus .cardFooter__icon, a.card:active .cardFooter__icon {
            transform: translateX(4px);
            visibility: visible;
            width: unset;
        }
/* Animated Image, if not disabled */
a.card:hover:not(.card--noImageExpansion) .card__header, a.card:focus:not(.card--noImageExpansion) .card__header, a.card:active:not(.card--noImageExpansion) .card__header {
                height: calc(100% - var(--card-footer-height));
            }
a.card:hover:not(.card--noImageExpansion) .card__contents, a.card:focus:not(.card--noImageExpansion) .card__contents, a.card:active:not(.card--noImageExpansion) .card__contents {
                transform: translateY(15px);
            }
a.card:focus,
    a.card:active {
        box-shadow: 0 1px 4px rgba(106, 106, 106, 0.5);
        transform: translateY(2px);
    }
@media only screen and (min-width: 768px) {
        .card--large .card__title {
            font-size: var(--font-size-mega);
        }
    }
.card__header {
    contain: strict;
    height: var(--card-header-height);
    overflow: hidden;
    padding: 15px;
    position: absolute;
    top: 0;
    transition: all var(--card-transition-timing);
    width: 100%;
    z-index: 1;
}
/* Logo pic */
.card__header::before {
        background: url('https://public-media.interaction-design.org/images/idf-logo-full-white.png') no-repeat;
        background-size: auto 52px;
        content: '';
        display: block;
        height: 0;
        opacity: 0;
        position: relative;
        transition: all var(--card-transition-timing);
        width: 100%;
        z-index: 2;
    }
.card__header .card__picture {
        contain: strict;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
/* Overlay */
.card__header .card__picture::after {
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            background: linear-gradient(to bottom, rgb(43, 43, 43), rgba(43, 43, 43, 0.2));
            content: '';
            mix-blend-mode: multiply;
        }
.card__title {
    color: var(--color-card-title);
    font-size: var(--font-size-kilo);
    margin: 0;
    padding: 0;
    position: relative;
    text-shadow: 0 1px 4px rgba(43, 43, 43, 0.7);
    z-index: 1;
}
.card__contents {
    flex-grow: 1;
    padding: 8px 16px 16px;
    transition: all var(--card-transition-timing);
    z-index: 0;
}
.card__contents .card__copy {
        font-size: var(--font-size-centi);
        margin: 0 0 16px;
    }
.card__contents .card__copy:last-child {
            margin: 0;
        }
.card__contents .card__copy--commaSeparated > span:not(:last-child)::after {
            content: ',';
        }
.card__contents .card__description {
        font-family: var(--font-sans-serif);
        font-size: var(--font-size-hecto);
        min-height: 42px;
    }
.card__footer {
    bottom: 0;
    height: var(--card-footer-height);
    width: 100%;
}
.card__footer .button {
        border-radius: 0;
        height: 100%;
        padding: 12px;
        width: 100%;
    }
a.card .card__footer .button {
            /*
             * In case when the card is a link element (not div) disable buttons in its footer,
             * because the primary action is a click on the whole card.
             */
            pointer-events: none;
        }
.card__footer .button:disabled {
        border: none; /* do not paint borders for inner button to prevent roundness lag for disabled state */
    }
.cardFooter__button {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cardFooter__buttonText {
    align-items: flex-end;
    display: flex;
    justify-content: center;
}
.cardFooter__icon {
    transform: translateX(0);
    transition: width var(--card-transition-timing), transform var(--card-transition-timing);
    visibility: hidden;
    width: 0;
}
.card__actions {
    border-bottom-left-radius: var(--card-radius);
    border-bottom-right-radius: var(--card-radius);
    border-top: solid 1px var(--color-card-separator);
    flex-grow: 0;
    overflow: hidden;
    padding: 4px 0;
}
.card__actions .button-card {
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        color: var(--color-card-text-accent);
        display: block;
        fill: var(--color-card-text-accent);
        font-weight: normal;
        outline: none;
        padding: 8px 16px;
        text-align: left;
        transition: padding 0.1s;
        width: 100%;
    }
.card__actions .button-card:hover,
        .card__actions .button-card:focus,
        .card__actions .button-card:active {
            background: var(--brand-02);
            color: var(--neutral-01);
            fill: var(--neutral-01);
        }
.card__actions .button-card:active {
            box-shadow: inset 0 1px 4px 0 var(--shadow-color-default);
            padding: 10px 18px 6px;
            transform: none;
        }
.card__actions .button-card--delete {
        color: var(--accent-03);
        fill: var(--accent-03);
    }
.card__actions .button-card--delete:hover,
        .card__actions .button-card--delete:focus,
        .card__actions .button-card--delete:active {
            background: var(--accent-03);
            color: var(--neutral-01);
            fill: var(--neutral-01);
        }
.card__actions .button-card--noAction {
        cursor: default;
    }
.card__actions .button-card--noAction:hover,
        .card__actions .button-card--noAction:focus,
        .card__actions .button-card--noAction:active {
            background: initial;
            color: initial;
        }
.card__actions .button-card--noAction:active {
            box-shadow: initial;
            padding: initial;
            transform: none;
        }
.card--member {
    overflow: visible; /* tooltips within the card should be visible outside card bounds */
    padding: 0;
    position: static;
}
/* in case of having a non-static position the card will overlap tooltips from neighbor cards */
.card--member .card__contents {
        display: flex;
        flex-direction: column;
        padding: 16px;
    }
.card--member .card--member__description {
        font-size: 1rem;
        /* card.pcss has higher specifity rule for last item in card__contents */
        margin-top: 16px !important;
    }
.card--member .badge {
        margin: auto auto 0 0;
    }
.cardPerson__image {
    margin-right: 8px;
    width: 64px;
}
.card--member__specialty {
    color: var(--color-card-text-accent);
    margin: 0;
}
.card--course.card--disabled .countdown {
            /* Use visibility instad of display to keep the layout unchanged */
            visibility: hidden;
        }
.card__bookingProgress {
    position: relative;
}
/* COURSE BOOKING PROGRESS */
/* ------------------------------------------------------------------------------------------------------------------ */
.card__bookingProgressValue {
    color: var(--text-color);
    font-weight: bold;
    position: absolute;
    text-align: center;
    top: 15px;
    width: 100%;
}
.card__bookingProgressValue::after {
        content: attr(data-percentage) '%';
    }
.card__bookingProgressUnit {
    font-size: var(--font-size-milli);
    position: absolute;
    text-align: center;
    top: 35px;
    width: 100%;
}
/* COURSE LEARNING PROGRESS */
/* ------------------------------------------------------------------------------------------------------------------ */
.card--course__progress {
    color: var(--text-color);
}
.card--course__progressBar {
    background-color: var(--neutral-03);
    border-radius: 1px;
    contain: strict;
    height: 4px;
    margin-top: 4px;
    overflow: hidden;
    width: 100%;
}
.card--course__progressLine {
    background-color: var(--brand-01);
    border-radius: 1px;
    height: 4px;
    width: 0;
}
.card--course__contentTitle {
    color: var(--text-color);
    font-size: var(--font-size--hecto);
    margin: 0 0 4px 0;
}
.card--courseCompleted {
    padding-top: 0;

}
.card--courseCompleted .card__header {
        contain: none;
        height: auto;
        padding: 4px;
        padding-bottom: 0;
        position: static;
    }
/* Logo */
.card--courseCompleted .card__header::before {
            /* Logo doesn’t exist for this type of card */
            content: none;
        }
a.card--courseCompleted:hover .card__header {
            height: auto; /* no header animation for this type of card*/
        }
a.card--courseCompleted:hover .card__contents {
            transform: none;
        }
.card--courseCompleted .card__title {
        color: var(--color-card-text-accent);
        margin: 10px 12px 0;
        text-shadow: none;
    }
.card--courseCompleted .card__picture {
        contain: none;
        position: static;
    }
.card--courseCompleted .card__picture::after {
            content: none;
        }
.card--courseCompleted .card__picture img {
            height: initial;
            object-fit: initial;
        }
.card__title--extraMargin .card__title {
        margin: 10px 12px 16px;
    }
.card__header .card__picture--book {
        background: var(--neutral-06);
        text-align: center;
    }
.cardBootcampCohort__banner {
    bottom: 0;
    font-size: 0.8rem;
    left: 0;
    line-height: var(--line-height-default);
    position: absolute;
    width: 100%;
}
.cardBootcampCohort__countDownContainer {
    min-width: 100px;
}
/* Profile Cards */
.profileCard {
    width: 100%;
}
@media only screen and (max-width: 767px) {
.profileCard {
        align-items: flex-start
}
    }
.profileCard__mediaImage {
    flex: 0 0 120px;
    width: 120px;
}
.profileCard__mediaImage img {
        height: auto;
        width: 100%;
    }
@media only screen and (min-width: 1056px) {
.profileCard__mediaImage {
        flex: 0 0 160px;
        width: 160px
}
    }
.profileCard__place > span:not(:first-child):not(:last-child)::after {
        content: ',';
    }
/* VENDORS */
.typed-cursor {
    animation: typedjsBlink 0.7s infinite;
    opacity: 1;
}
@keyframes typedjsBlink {
    50% {
        opacity: 0;
    }
}
/* SHARED STYLES */
/*stylelint-disable*/
.featureTable {
    --table-column-width: 232px;
    font-family: var(--font-sans-serif);
    margin: 0;
}
.featureTable h3 {
        display: block;
        font-weight: 500;
        margin-bottom: 32px;
        text-align: center;
    }
.featureTable table {
        background: transparent;
        border: none;
        border-collapse: collapse;
        margin-bottom: 0;
    }
.featureTable table tr {
            border-bottom: solid 1px var(--neutral-04);
        }
.featureTable table thead {
            background: transparent;
            font-size: var(--font-size-kilo);

        }
.featureTable table thead th {
                max-width: var(--table-column-width);
                min-width: var(--table-column-width);
                padding: 0;
                width: var(--table-column-width);
                transition: width 300ms ease-out, max-width 300ms ease-out, min-width 300ms ease-out;
            }
.featureTable table thead th.disabled .columnHeader .button {
                            color: var(--neutral-01);
                            pointer-events: none;
                        }
.featureTable table thead th .button {
                    font-size: var(--font-size-default);
                    margin-top: 16px;
                }
.featureTable table thead [aria-hidden='true'] {
                --table-column-width: 0;
                overflow: hidden;
            }
.featureTable table thead [aria-hidden='true'] .columnHeader {
                    padding: 0;
                }
.featureTable table thead th:first-child {
                padding: 16px;
                vertical-align: bottom;
            }
.featureTable table .columnHeader {
            font-family: var(--font-sans-serif);
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 40px;
        }
@media only screen and (min-width: 768px) {
.featureTable table .columnHeader {
                height: 182px;
                padding: 16px
        }
            }
.featureTable table .columnHeader form {
                text-align: center;
                width: 100%;
            }
.featureTable table .columnHeader .price {
                width: 100%;
            }
.featureTable table .columnHeader .price .period {
                    color: var(--neutral-05);
                    font-size: var(--font-size-centi);
                    font-weight: 400;
                    text-align: center;
                    text-transform: none;
                }
.featureTable table .columnHeader .featureTable__priceNumber {
                font-size: var(--font-size-mega);
                text-align: center;
            }
.featureTable table .columnHeader .featureTable__priceNumber--long {
                font-size: var(--font-size-kilo);
            }
.featureTable table .columnHeader .discount,
            .featureTable table .columnHeader .referrer {
                color: var(--neutral-05);
                font-size: var(--font-size-centi);
                font-style: italic;
                font-weight: 500;
            }
.featureTable table .columnHeader .discount {
                margin-top: 8px;
            }
.featureTable table .columnHeader .cta {
                max-width: 100%;
                min-width: unset;
            }
@media only screen and (min-width: 768px) {
.featureTable table .columnHeader--referred {
                height: 201px
        }
            }
.featureTable table .columnHeader__membershipPlan {
            font-family: var(--font-sans-serif);
            font-size: 1.25rem;
            font-weight: bold;
            letter-spacing: 0;
            line-height: 1.2;
            margin-bottom: 16px;
            margin-top: 32px;
            align-items: center;
            display: flex;
            flex-direction: column;
            height: auto;
            justify-content: flex-end;
            margin: 0;
            text-align: center;
            width: 100%;
        }
@media only screen and (max-width: 767px) {
.featureTable table .columnHeader__membershipPlan {
                margin: 0
        }
            }
@media only screen and (max-width: 1055px) {
.featureTable table.table--columnAdded {
                --table-column-width: 20%
        }

                .featureTable table.table--columnAdded .columnHeader__membershipPlan {
                    height: 48px;
                }
            }
.featureTable table .highlightedColumn {
            box-shadow: 0 8px 16px rgba(106, 106, 106, 0.1);
            background: var(--neutral-01);
        }
.featureTable table tbody {
            background: transparent;
        }
.featureTable table tbody td {
                padding: 16px;
                text-align: center;
            }
@media only screen and (max-width: 767px) {
.featureTable table tbody td {
                    padding: 16px 0
            }
                }
@media only screen and (min-width: 768px) {
                    .featureTable table tbody td:first-child {
                        width: 320px;
                    }
                }
.featureTable table tbody td.disabled .check {
                        border-left: solid thick rgb(252, 252, 252);
                        border-right: solid thick rgb(252, 252, 252);
                    }
.featureTable table tbody td .check,
                .featureTable table tbody td .description {
                    align-items: center;
                    display: flex;
                    height: 100%;
                    line-height: 1.2;
                    min-height: 24px;
                }
@media only screen and (min-width: 768px) {
.featureTable table tbody td .check,
                .featureTable table tbody td .description {
                        flex-direction: row;
                        justify-content: space-between
                }
                    }
.featureTable table tbody td .description {
                    text-align: left;
                }
.featureTable table tbody td .check {
                    color: var(--brand-01);
                    justify-content: center;
                }
.featureTable table tbody .featureTable__columnText {
                white-space: nowrap;
                word-break: normal;
                overflow: hidden;
                transition: width 300ms ease-out;
            }
@media only screen and (min-width: 1056px) {
.featureTable table tbody .featureTable__columnText {
                    width: 200px
            }
                }
.featureTable table tbody [aria-hidden='true'] {
                padding: 0;
            }
.featureTable table tbody [aria-hidden='true'] .check {
                    display: none;
                }
.featureTable table tbody [aria-hidden='true'] .featureTable__columnText {
                    width: 0;
                }
.featureTable table tbody .comparison-virtual-label {
                padding-left: 16px;
            }
.featureTable table tbody .comparison-virtual-data {
                padding-right: 16px;
                padding-left: 16px;
            }
@media only screen and (min-width: 1056px) {
.featureTable--change.featureTable table {
                --table-column-width: 340px
        }
            }
.featureTable--change.featureTable table.table--columnAdded {
                --table-column-width: 25%;
            }
@media only screen and (min-width: 1056px) {
.featureTable--change.featureTable table.table--columnAdded {
                    --table-column-width: 256px
            }
                }
.featureTable .options {
        align-items: stretch;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
@media only screen and (min-width: 768px) {
.featureTable .options {
            flex-direction: row;
            margin-left: 16px
    }
        }
/* @todo Find a better way w/o manipulating button component */
@media only screen and (max-width: 767px) {
.featureTable .options .button {
                margin-bottom: 16px
        }
            }
@media only screen and (min-width: 768px) {
.featureTable .options .button {
                margin-right: 16px
        }
            }
.comparison-virtual {
    width: 100%;
}
@media only screen and (max-width: 767px) {
.featureTable__tableContainer {
        width: 100%
}

        .featureTable__tableContainer table:not(:last-child) {
            margin-bottom: 24px;
        }
    }
.featureTable__content {
    display: flex;
    flex-direction: row;
}
@media only screen and (max-width: 767px) {
            .featureTable__content table [data-comparison-table] {
                display: none;
            }
        }
/* For AB testing */
.featureTable__testimonialsStatic {
    display: flex;
    flex-direction: column;
    margin-top: 186px;
    margin-left: 32px;
    justify-content: space-between;
    flex: 1 0 232px;
}
.featureTable__testimonials {
    align-items: stretch;
    background-color: transparent;
    display: none;
    flex: 1 1 20%;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: 32px;
    margin-top: 125px;
    min-width: 232px;
}
@media only screen and (min-width: 768px) {
.featureTable__testimonials {
        display: flex
}
    }
.featureTable__testimonials > * {
        margin-bottom: 40px;
    }
.featureTable__testimonials .media__image img {
            height: 45px;
            max-width: 100px;
            width: auto;
        }
.featureTable__testimonials .media__body {
        padding-top: 5px;
    }
.featureModal__content {
    line-height: 1.8;
    padding: 0;
}
.featureModal__content .footnote {
    }
.featureModal__content .auto-height {
        height: auto !important;
    }
.featureTable__testimonialImage {
    width: 80px;
}
.featureModal__certificate {
    max-width: 100%;
    width: 480px;
}
.featureModal__bookCover {
    height: 144px;
    object-fit: cover;
}
.fieldset {
    border: none;
    margin: 0;
    padding: 0;
}
/*
/*   #Information Box */
/*   ========================================================================== */
.infoBox {
    background-color: var(--contrast-section-background-color);
    border-radius: var(--border-radius-large);
    padding: 16px;
}
/*
   #Join IxDF Sticky Bar
   ========================================================================== */
.joinBar {
    align-items: center;
    background-color: var(--neutral-06);
    box-shadow: 0 -1px 5px 0 rgba(255, 255, 255, 1);
    color: var(--neutral-01);
    display: flex;
    flex-direction: row;
    justify-content: center;
    transition: all 0.5s ease-in-out;
}
@media only screen and (min-width: 768px) {
.joinBar {
        padding-bottom: 8px;
        padding-top: 8px
}
    }
.joinBar__item {
    margin: 0 16px;
}
@media only screen and (min-width: 1056px) {
        .joinBar__item:last-child {
            margin-right: 0;
        }

        .joinBar__item:first-child {
            margin-left: 0;
        }
    }
.joinBar__button {
    opacity: 1;
    transition: opacity 230ms linear;
}
@media only screen and (max-width: 767px) {
.joinBar__button.cta {
            border-radius: 0;
            margin: 0;
            padding: 20px 0;
            transform: none;
            transition: none;
            width: 45%
    }

            .joinBar__button.cta::before {
                content: none;
            }
        }
@media only screen and (min-width: 768px) {
.joinBar__button.cta {
            margin-right: 0
    }
        }
.joinBar__button.cta::after {
            content: attr(data-message);
        }
@media only screen and (min-width: 768px) {
.joinBar__button.cta::after {
                content: attr(data-message-medium)
        }
            }
.joinBar__button.contact {
        display: none;
    }
@media only screen and (min-width: 768px) {
.joinBar__button.contact {
            display: block
    }
        }
.joinBar__message {
    padding: 8px 0;
    width: 60%;
}
@media only screen and (min-width: 768px) {
.joinBar__message {
        width: auto
}
    }
.offCanvasWrapper {
    bottom: 0;
    contain: strict;
    left: 0;
    overflow: auto;
    position: fixed;
    top: 64px;
    width: 100%;
    z-index: calc(var(--depth__headingComponents) + 1);
}
.offCanvasWrapper:not(.menu-open) {
        pointer-events: none;
    }
.offCanvasWrapper:not(.menu-open)::before {
            opacity: 0;
        }
.offCanvasWrapper:not(.menu-open) .offCanvasMenu {
            transform: translateY(-100%);
            visibility: hidden;
        }
@media only screen and (min-width: 768px) {
.offCanvasWrapper {
        display: none
}
    }
.offCanvasMenu {
    font-family: var(--font-sans-serif);
    background-color: var(--neutral-06);
    color: var(--neutral-01);
    left: 0;
    min-height: 100%;
    min-width: 320px; /* to prevent word break, happen in profile info, in small screen */
    padding: 16px;
    position: absolute;
    top: 0;
    transition: transform 370ms var(--easeOutQuint), visibility 370ms var(--easeOutQuint);
    width: 100vw;
}
.offCanvasMenu__list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}
.offCanvasMenu__list .navigationHeader__listItem {
        border-bottom: solid 1px var(--neutral-05);
        margin-bottom: 0;
        padding: 0;
    }
.offCanvasMenu__list .navigationHeader__link {
        color: var(--neutral-01);
        display: block;
        font-size: 16px;
        line-height: 1.2;
        padding: 16px 0;
    }
.offCanvasMenu__list--links {
    font-size: var(--font-size-centi);
    margin: 24px 0;
}
.offCanvasMenu__list--links .inlineList__item:not(:last-of-type) {
            margin: 0 0 16px;
        }
.offCanvasMenu__list--links a {
        color: inherit;
        text-decoration: none;
    }
.offCanvas__loginButton {
    margin-top: 24px;
    text-align: center;
}
.profile__contentContainer {
    margin-bottom: 64px;
    margin-top: 64px;
}
@media only screen and (max-width: 767px) {
.profile__contentContainer {
        flex-direction: column;
        margin-top: 24px
}
    }
.profile__distinctionBadge {
    color: var(--text-color);
    margin-top: 24px;
    text-decoration: none;
}
.profile__rightColumn {
    margin-left: 32px;
}
@media only screen and (max-width: 767px) {
.profile__rightColumn {
        margin-left: 0;
        margin-top: 32px;
        max-width: 100%;
        width: 100%
}
    }
.profile__badgeIcon {
    margin: auto 8px auto 0;
    max-width: 154px;
    width: 154px;
}
.profilePublic__stickyFooter {
    flex-direction: row;
}
@media only screen and (max-width: 767px) {
.profilePublic__footerText {
        text-align: left
}
    }
@media only screen and (max-width: 767px) {
.profilePublic__footerButton {
        min-width: unset
}
    }
.profileEdit__accountInfoInput {
    margin-right: 16px;
    max-width: 320px;
}
@media only screen and (max-width: 767px) {
.profileEdit__accountImage {
        flex: 0 0 120px;
        max-width: 120px
}

        .profileEdit__accountImage img {
            height: auto;
            width: 120px !important;
        }
    }
.profileEdit__phoneField {
    margin-right: 32px;
    width: 232px;
}
@media only screen and (max-width: 767px) {
.profileEdit__phoneField {
        width: 100%
}
        .profileEdit__phoneField:not(:last-child) {
            margin: 0 0 20px 0;
        }
    }
@media only screen and (max-width: 767px) {
.profileEdit__inputButton {
        margin-top: 8px
}
    }
@media only screen and (min-width: 768px) {
.profilePassword__gridColumn {
        grid-column: 4 / span 6
}
    }
@media only screen and (max-width: 767px) {
.profileCancel__thumbnailContainer {
        flex-direction: column
}

        .profileCancel__thumbnailContainer .media__body {
            padding-left: 0;
        }
    }
.profileCancel__thumbnailBackground {
    background: var(--neutral-01);
    display: flex;
    height: 120px;
    justify-content: center;
    width: 120px;
}
@media only screen and (max-width: 767px) {
.profileCancel__thumbnailBackground {
        margin-bottom: 8px
}
    }
.profileCancel__thumbnailBackground img {
        display: block;
        width: 95px !important;
    }
@media only screen and (min-width: 1056px) {
.profileChangeEmail__gridColumn {
        grid-column: 4 / span 6
}
    }
@media only screen and (min-width: 768px) and (max-width: 1055px) {
.profileChangeEmail__gridColumn {
        grid-column: 3 / span 8
}
    }
/*
   #Roadblock (Basic)
   ========================================================================== */
@media only screen and (max-width: 767px) {
.roadblock__productImage {
        width: 50%
}
    }
/* UTILITIES */
/*
   #Animations
   ========================================================================== */
/*
   #Keyframes declaration
   ========================================================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translate3d(0, 0, 0);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.1);
    }
    80% {
        opacity: 1;
        transform: scale(0.89);
    }
    100% {
        opacity: 1;
        transform: scale(1) translate3d(0, 0, 0);
    }
}
@keyframes verticalScaleOut {
    to {
        height: 0;
        margin-bottom: 0;
        margin-top: 0;
        padding-bottom: 0;
        padding-top: 0;
    }
}
@keyframes slideInFromTop {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}
@keyframes slideOutToBottom {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(100%);
    }
}
@keyframes slideOutToLeft {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}
@keyframes slideOutToRight {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}
/* ========================================================================== */
/*   #ALIGNMENT UTILITIES */
/*   ========================================================================== */
.block-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.center-contents {
    text-align: center;
}
.center-contents > * {
        margin-left: auto;
        margin-right: auto;
    }
.text-center {
    text-align: center;
}
@media only screen and (min-width: 768px) {
.md\:text-center {
        text-align: center
}
    }
.text-left {
    text-align: left;
}
@media only screen and (max-width: 767px) {
.sm\:text-left {
        text-align: left
}
    }
.text-right {
    text-align: right;
}
.align-vertical-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.align-top {
    vertical-align: top;
}
.align-middle {
    vertical-align: middle;
}
@media only screen and (max-width: 767px) {
.sm\:block {
        display: block
}
    }
/* ========================================================================== */
/*   #Flexbox UTILITIES */
/*   ========================================================================== */
.flex-col {
    flex-direction: column;
}
@media only screen and (max-width: 767px) {
.sm\:flex-col {
        flex-direction: column
}
    }
.items-center {
    align-items: center;
}
.items-stretch {
    align-items: stretch;
}
.items-start {
    align-items: flex-start;
}
.flex-1 {
    flex: 1 1 0;
}
.flex-auto {
    flex: 1 1 auto;
}
.not-flexible {
    flex: 0 0 auto;
}
.self-start {
    align-self: flex-start;
}
.self-end {
    align-self: flex-end;
}
.self-center {
    align-self: center;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-no-wrap {
    flex-wrap: nowrap;
}
.flex-grow {
    flex-grow: 1;
}
.flex-shrink-0 {
    flex-shrink: 0;
}
.justify-start {
    justify-content: flex-start;
}
.justify-center {
    justify-content: center;
}
.justify-end {
    justify-content: flex-end;
}
.justify-between {
    justify-content: space-between;
}
.justify-around {
    justify-content: space-around;
}
@media only screen and (max-width: 767px) {
.sm\:justify-center {
        justify-content: center
}

        .sm\:justify-center > * {
            margin: 0 10px 20px;
        }

            .sm\:justify-center > *:last-child {
                margin-bottom: 0;
            }
    }
@media only screen and (max-width: 767px) {
.sm\:center {
        align-items: center;
        justify-content: center;
        text-align: center
}
    }
/* ==========================================================================
   #BORDER UTILITIES
   ========================================================================== */
.radius-regular {
    border-radius: var(--border-radius);
}
.radius-small {
    border-radius: var(--border-radius-small);
}
.radius-medium {
    border-radius: var(--border-radius-medium);
}
.radius-large {
    border-radius: var(--border-radius-large);
}
.radius-round {
    border-radius: 50%;
}
picture.radius-round {
    overflow: hidden;
}
/*
   #Switch ON/OFF Borders
   ========================================================================== */
.border-all {
    border-style: solid;
    border-width: 1px;
}
.border-top {
    border-top-style: solid;
    border-top-width: 1px;
}
.border-bottom {
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.border-none {
    border: none;
}
.elevation-tropo {
    box-shadow: 0 1px 4px rgba(106, 106, 106, 0.5);
}
.elevation-strato {
    box-shadow: 0 2px 8px rgba(106, 106, 106, 0.4);
}
.elevation-meso {
    box-shadow: 0 4px 12px rgba(106, 106, 106, 0.4);
}
.elevation-thermo {
    box-shadow: 0 8px 16px rgba(106, 106, 106, 0.1);
}
.elevation-exo {
    box-shadow: 0 12px 20px rgba(106, 106, 106, 0.1);
}
.inline-block {
    display: inline-block;
}
.block {
    display: block;
}
.inline {
    display: inline;
}
.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
/* ==========================================================================
   #SPACING VARIABLES
   ========================================================================== */
/*
   #MARGINS
   ========================================================================== */
.m-none {
    margin: 0 !important;
}
.m-tiny {
    margin: 4px !important;
}
.m-small {
    margin: 8px !important;
}
.m-medium {
    margin: 16px !important;
}
.m-medium-large {
    margin: 16px !important;
}
.m-large {
    margin: 32px !important;
}
.m-large-huge {
    margin: 40px !important;
}
.m-huge {
    margin: 50px !important;
}
.m-giant {
    margin: 64px !important;
}
.mt-none {
    margin-top: 0 !important;
}
.mt-tiny {
    margin-top: 4px !important;
}
.mt-small {
    margin-top: 8px !important;
}
.mt-medium {
    margin-top: 16px !important;
}
.mt-medium-large {
    margin-top: 24px !important;
}
.mt-large {
    margin-top: 32px !important;
}
.mt-large-huge {
    margin-top: 40px !important;
}
.mt-huge {
    margin-top: 50px !important;
}
.mt-giant {
    margin-top: 64px !important;
}
.mb-none {
    margin-bottom: 0 !important;
}
@media only screen and (max-width: 767px) {
.sm\:mb-none {
        margin-bottom: 0 !important
}
    }
.mb-tiny {
    margin-bottom: 4px !important;
}
.mb-small {
    margin-bottom: 8px !important;
}
.mb-medium {
    margin-bottom: 16px !important;
}
.mb-medium-large {
    margin-bottom: 24px !important;
}
.mb-large {
    margin-bottom: 32px !important;
}
.mb-large-huge {
    margin-bottom: 40px !important;
}
.mb-huge {
    margin-bottom: 50px !important;
}
.mb-giant {
    margin-bottom: 64px !important;
}
.ml-none {
    margin-left: 0 !important;
}
.ml-tiny {
    margin-left: 4px !important;
}
.ml-small {
    margin-left: 8px !important;
}
.ml-medium {
    margin-left: 16px !important;
}
.ml-medium-large {
    margin-left: 24px !important;
}
.ml-large {
    margin-left: 32px !important;
}
.ml-large-huge {
    margin-left: 40px !important;
}
.ml-huge {
    margin-left: 50px !important;
}
.ml-giant {
    margin-left: 64px !important;
}
.mr-none {
    margin-right: 0 !important;
}
.mr-tiny {
    margin-right: 4px !important;
}
.mr-small {
    margin-right: 8px !important;
}
.mr-medium {
    margin-right: 16px !important;
}
.mr-medium-large {
    margin-right: 24px !important;
}
.mr-large {
    margin-right: 32px !important;
}
.mr-large-huge {
    margin-right: 40px !important;
}
.mr-huge {
    margin-right: 50px !important;
}
.mr-giant {
    margin-right: 64px !important;
}
/*
   #PADDING - .in-*
   ========================================================================== */
.p-none {
    padding: 0 !important;
}
@media only screen and (max-width: 767px) {
.sm\:p-none {
        padding: 0 !important
}
    }
.p-tiny {
    padding: 4px !important;
}
@media only screen and (max-width: 767px) {
.sm\:p-tiny {
        padding: 4px !important
}
    }
.p-small {
    padding: 8px !important;
}
.p-medium {
    padding: 16px !important;
}
.p-medium-large {
    padding: 16px !important;
}
.p-large {
    padding: 32px !important;
}
.p-large-huge {
    padding: 40px !important;
}
.p-huge {
    padding: 50px !important;
}
.p-giant {
    padding: 64px !important;
}
.pt-none {
    padding-top: 0 !important;
}
.pt-tiny {
    padding-top: 4px !important;
}
.pt-small {
    padding-top: 8px !important;
}
.pt-medium {
    padding-top: 16px !important;
}
.pt-medium-large {
    padding-top: 24px !important;
}
.pt-large {
    padding-top: 32px !important;
}
.pt-large-huge {
    padding-top: 40px !important;
}
.pt-huge {
    padding-top: 50px !important;
}
.pt-giant {
    padding-top: 64px !important;
}
.pb-none {
    padding-bottom: 0 !important;
}
.pb-tiny {
    padding-bottom: 4px !important;
}
.pb-small {
    padding-bottom: 8px !important;
}
.pb-medium {
    padding-bottom: 16px !important;
}
.pb-medium-large {
    padding-bottom: 24px !important;
}
.pb-large {
    padding-bottom: 32px !important;
}
.pb-large-huge {
    padding-bottom: 40px !important;
}
.pb-huge {
    padding-bottom: 50px !important;
}
.pb-giant {
    padding-bottom: 64px !important;
}
.pl-none {
    padding-left: 0 !important;
}
.pl-tiny {
    padding-left: 4px !important;
}
.pl-small {
    padding-left: 8px !important;
}
.pl-medium {
    padding-left: 16px !important;
}
.pl-medium-large {
    padding-left: 24px !important;
}
.pl-large {
    padding-left: 32px !important;
}
.pl-large-huge {
    padding-left: 40px !important;
}
.pl-huge {
    padding-left: 50px !important;
}
.pl-giant {
    padding-left: 64px !important;
}
.pr-none {
    padding-right: 0 !important;
}
.pr-tiny {
    padding-right: 4px !important;
}
.pr-small {
    padding-right: 8px !important;
}
.pr-medium {
    padding-right: 16px !important;
}
.pr-medium-large {
    padding-right: 24px !important;
}
.pr-large {
    padding-right: 32px !important;
}
.pr-large-huge {
    padding-right: 40px !important;
}
.pr-huge {
    padding-right: 50px !important;
}
.pr-giant {
    padding-right: 64px !important;
}
/**
* Spacing in between elements
* Example:
* <ul class="inlineList inBetweenMargin__horizontal--medium">
*   <li>Item 1</li>
*   <li>Item 2</li>
*   ...
* </ul>
*/
.inBetweenMargin__vertical--medium > *:not(:last-child) {
        margin-bottom: 16px !important;
    }
.inBetweenMargin__vertical--medium > *:last-child {
        margin-bottom: 0 !important;
    }
/* ========================================================================== */
/*   #TEXT UTILITIES */
/*   ========================================================================== */
/* Multi-line truncate for supported browsers */
@supports (-webkit-line-clamp: 2) {
    .truncate,
    .truncate-1,
    .truncate-2,
    .truncate-3,
    .truncate-4,
    .truncate-6,
    .truncate-8 {
        /* autoprefixer: off */
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
    }

    .truncate,
    .truncate-1 {
        -webkit-line-clamp: 1;
    }
    .truncate-2 {
        -webkit-line-clamp: 2;
    }
    .truncate-3 {
        -webkit-line-clamp: 3;
    }
    .truncate-4 {
        -webkit-line-clamp: 4;
    }
    .truncate-6 {
        -webkit-line-clamp: 6;
    }
    .truncate-8 {
        -webkit-line-clamp: 8;
    }
}
/* Multi-line truncate for FF (and any other without -webkit-line-clamp support) */
@supports not (-webkit-line-clamp: 2) {
    .truncate,
    .truncate-1,
    .truncate-2,
    .truncate-3,
    .truncate-4,
    .truncate-6,
    .truncate-8 {
        --line-height: 1.35em;
        overflow: hidden;
        position: relative;
    }

        .truncate::after, .truncate-1::after, .truncate-2::after, .truncate-3::after, .truncate-4::after, .truncate-6::after, .truncate-8::after {
            background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%);
            bottom: 0;
            content: '\00A0'; /* non-breaking space */
            max-width: 100px;
            position: absolute;
            right: 0;
            width: 70%;
        }

    /*
        Fade-in effect for small amount of lines 2 & 3 is not enabled.
        Otherwise it looks weird when the text shouldn’t be truncated, but fade in anyway.
        For now, let’s wait for a native CSS implementation of `line-clamp` property.
     */
    .truncate-4 {
        max-height: calc(var(--line-height) * 4);
    }
    .truncate-6 {
        max-height: calc(var(--line-height) * 6);
    }
    .truncate-8 {
        max-height: calc(var(--line-height) * 8);
    }
}
/* Font sizes utilities */
.text-small {
    font-size: var(--font-size-centi);
}
/* Font Families utilities */
.text-sans-serif {
    font-family: var(--font-sans-serif);
}
.text-serif {
    font-family: var(--font-serif);
}
.text-monospace {
    font-family: var(--font-monospace);
}
.font-bold {
    font-weight: 700;
}
.font-normal {
    font-weight: normal;
}
.no-underline {
    text-decoration: none;
}
.underline {
    text-decoration: underline;
}
.line-through {
    text-decoration: line-through;
}
.italic {
    font-style: italic;
}
.upppercase {
    text-transform: uppercase;
}
.capitalize {
    text-transform: capitalize;
}
/*
 * @see https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container
 *
 * 1. These are technically the same, but use both.
 * 2. Adds a hyphen where the word breaks, if supported
 *    (No Blink).
 */
.break-words {
    -webkit-hyphens: auto;
            hyphens: auto; /* [2] */
    overflow-wrap: break-word; /* [1] */
    white-space: inherit;
    word-wrap: break-word; /* [1] */
}
.break-all {
    word-break: break-all;
}
.whitespace-no-wrap {
    white-space: nowrap;
}
.whitespace-normal {
    white-space: normal;
}
.text-force-full-width p {
        max-width: 100% !important;
    }
/* @deprecated */
.text-color-secondary {
    color: var(--neutral-05);
}
.h-auto {
    height: auto;
}
.h-full {
    height: 100%;
}
.max-h-full {
    max-height: 100%
}
.max-w-full {
    max-width: 100%;
}
.w-full {
    width: 100%;
}
/* ========================================================================== */
/*   #POSITIONING UTILITIES */
/*   ========================================================================== */
.static {
    position: static;
}
.relative {
    position: relative;
}
.absolute {
    position: absolute;
}
.fixed {
    position: fixed;
}
.sticky {
    position: sticky;
}
/*
   #HIDING UTILITIES
   ========================================================================== */
.overflow-hidden {
    overflow: hidden;
}
.hidden {
    display: none !important;
}
@supports (grid-gap: 0) {
    /* Chrome66+, Firefox52+, Safari10.1+, @see https://developer.mozilla.org/en-US/docs/Web/CSS/gap#Support_in_Grid_layout */
    .hidden-on-supported-browsers {
        display: none;
    }
}
.invisible {
    visibility: hidden !important;
}
@media only screen and (max-width: 767px) {
.sm\:hide {
        display: none
}
    }
@media only screen and (min-width: 768px) {
.sm\:show {
        display: none
}
    }
@media only screen and (min-width: 768px) and (max-width: 1055px) {
.md\:hide {
        display: none
}
    }
@media only screen and (max-width: 767px) {
.md\:show {
        display: none
}
    }
@media only screen and (min-width: 1056px) {
.md\:show {
        display: none
}
    }
@media only screen and (min-width: 768px) and (max-width: 1055px) {
        .md\:hideLastChild > :last-child {
            display: none;
        }
    }
@media only screen and (min-width: 1056px) {
.lg\:hide {
        display: none
}
    }
@media print {
.hide-print {
        display: none
}
    }
/*
   #Screen reader-specific classes
   ========================================================================== */
.visually-hidden {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(100%) !important;
            clip-path: inset(100%) !important;
    contain: strict !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}
[hidden] {
    display: none !important;
}
.pointer-events-auto {
    pointer-events: auto;
}
.scroll-margin-top {
    scroll-margin-top: var(--nav-mainbar-height);
}
.cursor-pointer {
    cursor: pointer;
}
.object-contain {
    object-fit: contain;
}
.object-cover {
    object-fit: cover;
}
.object-fill {
    object-fit: fill;
}
/* Shame File */
/* ========================================================================== */
/*   #SHAME FILE */
/*  ========================================================================== */
/*
 * This is the main file where we should put nasty CSS that we don’t know where
 * else to put. However, it should only be added here temporarily, and be reviewed
 * or refactored soon as possible.
 */
.body-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
@media print {
.body-wrap {
        min-height: initial
}
    }
/*
   #Styles from app.css
   ========================================================================== */
a.disabled {
    pointer-events: none !important;
}
a.disabled.button {
    background-color: var(--neutral-03) !important;
    color: var(--neutral-05) !important;
}
/*
   #HEADINGS
   ========================================================================== */
.securityCodeInfo h2,
    .securityCodeInfo h4 {
        /* #Check for removal */
        display: block;
        text-transform: capitalize;
    }
.securityCodeInfo__imageContainer {
    margin: 48px 0;
}
@media only screen and (min-width: 768px) {
.securityCodeInfo__image {
        max-width: 45%
}
    }
a.footnote {
    color: var(--neutral-06);
    display: block;
    font-size: 0.75em;
    margin-bottom: 28px;
    margin-top: 28px;
}
a.footnote:hover {
        color: var(--brand-01);
    }
a.footnote span {
        text-decoration: underline;
    }
.img-caption {
    font-size: var(--font-size-milli);
}
code[class*='language-'],
pre[class*='language-'] {
    font-size: var(--font-size-centi);
    overflow-y: scroll;
}
/*
   #From `static-links`
   ========================================================================== */
header nav.small .inlineList {
            display: none;
        }
/*
   #Flexbox fix
   ========================================================================== */
/*
 * When a flex container is using justify-content: space-between and
 * flex-wrap: wrap, the items on the last row will be centered instead
 * of left aligned. This fix will make those items left-align.
 */
/*
   #FROM LISTS
   ========================================================================== */
[data-navigate] {
    cursor: pointer;
}
[data-navigate]:hover {
        background-color: var(--neutral-03);
    }
/*
   #Design requirements
   ========================================================================== */
.background-neutral-03 .steps__item::before {
    background-color: var(--color-light-gray);
}
/* Needs to hide resize icon for textarea */
.u-no-resize {
    resize: none;
}
.landing-section:not(.pt-none) {
        padding-top: 64px !important;
    }
.landing-section:not(.pb-none) {
        padding-bottom: 64px !important;
    }
.landing-section > :first-child:not(.row) {
            margin-top: 0 !important;
        }
.landing-section > :first-child .heading:first-child {
            margin-top: 0 !important;
        }
.landing-section > :last-child {
        margin-bottom: 0 !important;
    }
.hide-last-bottom-border > :last-child {
        border-bottom: 0;
    }
.hide-last-bottom-border > :last-child a {
            border-bottom: 0;
        }
/*
    Use CSS hack to target Safari and fix CSS rule height:fit-content
    that adds extra space at the bottom of dialog
 */
@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: .001dpcm) {
    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
        dialog {
            display: table;
        }
    }
}