@charset "UTF-8";
@import url("");
/*
----------------------------------------
****************************************
                GENERAL
----------------------------------------
****************************************
*/
/*
SCAFFOLDING
*/
/*
BRAND
*/
/*
ALIGNMENT
/*

/*---SECTION CONTENT ALIGNMENT---*/
/*
----------------------------------------
****************************************
            TYPOGRAPHY
----------------------------------------
****************************************
*/
/*
........................................
            FONT-FAMILY 
........................................
*/
/*
........................................
            FONT-SIZE
........................................
*/
/*---—BASE---—*/
/*---—HEADING—---*/
/*
[1] used to calculate heading font size
[2] calculate heading font sizes
*/
/*
........................................
            FONT WEIGHT
........................................
*/
/*---—BASE---—*/
/*---—HEADING—---*/
/*
........................................
            LINE-HEIGHT
........................................
*/
/*---—BASE---—*/
/*---—HEADING—---*/
/*
........................................
            LETTER-SPACING
........................................
*/
/*---—BASE---—*/
/*---—HEADING—---*/
/*
........................................
            HEADING-COLORS
........................................
*/
/*
----------------------------------------
****************************************
            BUTTON
----------------------------------------
****************************************
*/
/*
........................................
            BUTTON-BASE
........................................
*/
/*---PADDING---—*/
/*---WIDTH AND HEIGHT---—*/
/*---MARGIN---—*/
/*
........................................
            BUTTON-LAYOUT
........................................
*/
/*
........................................
            BUTTONS PROPERTIES
........................................
*/
/*---default---—*/
/*---default button background properties--*/
/*---default button label properties---—*/
/*---hover---—*/
/*
[1] decrease the default background color by 10%
*/
/*---hover button background properties---—*/
/*---hover button label properties---—*/
/*---secondary---—*/
/*---secondary button background properties---—*/
/*---secondary button label properties---—*/
/*---secondary button hover---—*/
/*---text button---—*/
/*---text button hover---—*/
/*---tertiary---—*/
/*---tertiary icon---—*/
/*---tertiary hover---—*/
/*---back button---—*/
/*---back button icon---—*/
/*---back button hover---—*/
/*
----------------------------------------
****************************************
            LIST
----------------------------------------
****************************************
*/
/*
........................................
            LIST BOX
........................................
*/
/*
........................................
            LIST ROW
........................................
*/
/*---pseudo classes---—*/
/*
    [1] decrease background color (B) HSB by 1% (brightness)
*/
/*---hover---—*/
/*---selected---—*/
/*
    [1] ddecrease background color (B) HSB by .5%
*/
/*
........................................
    LIST ITEM - general
........................................
*/
/*
........................................
    LIST ITEM - brand
........................................
*/
/*
........................................
    LIST ITEM - icon and images
........................................
*/
/*
........................................
    LIST ITEM - PILL
........................................
*/
/*
----------------------------------------
****************************************
            TEXT FIELD
----------------------------------------
****************************************
*/
/*---label---—*/
/*--hint/placeholder---—*/
/*--error status---—*/
/*--error status text---—*/
/*
........................................
    TEXT FIELD - PSEUDO CLASSES
........................................
*/
/*
........................................
   SPINNER
........................................
*/
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
/*!
* J.P. Morgan Mobility Payments Systems GmbH. SmartPay Generic Design Stylesheet
* @version v1.0
* @link https://docs.jpmmps.com/
* @author J.P. Morgan Mobility Payments Systems GmbH.
* Copyright ©2024 J.P. Morgan Mobility Payments Systems GmbH.. All rights reserved.
 */
/**
  * Spacings are required settings for all brands (XXSMALL - XXLARGE).
  * - Required to have all scales available in all brands (multibrand & one-markup-approach).
  * - Used for generating of spacing utilities.
  */
/* ------------------------------------*\
     #SCOPED STYLES
 \*------------------------------------ */
/**
  * In order to encapsulate JPMMPS components from the regular styled parts of
  * Non-JPMMPS pages that use JPMMPS components, we must reset styles.

/**
  * Resets all applied styles to its initial values.
  */
.jpmmps,
.jpmmps::before,
.jpmmps::after,
.jpmmps *,
.jpmmps *::before,
.jpmmps *::after {
  all: initial;
}

/**
  * Resets all applied styles to browser/user defaults.
  */
.jpmmps-html,
.jpmmps-html::before,
.jpmmps-html::after,
.jpmmps-html *,
.jpmmps-html *::before,
.jpmmps-html *::after {
  all: revert;
}

/**
  * Patch the iframe `[frameborder="0"]` attribute from being overruled by `all: revert;`.
  */
.jpmmps [frameborder="0"] {
  border: 0;
}

/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
 Document
 ========
 */
/**
 Use a better box model (opinionated).
 */
.jpmmps *,
.jpmmps ::before,
.jpmmps ::after {
  box-sizing: border-box;
}

/**
 Use a more readable tab size (opinionated).
 */
.jpmmps .jpmmps-html {
  tab-size: 4;
}

/**
 1. Correct the line height in all browsers.
 2. Prevent adjustments of font size after orientation changes in iOS.
 */
.jpmmps .jpmmps-html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/*
 Sections
 ========
 */
/**
 Remove the margin in all browsers.
 &
 Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
 */
.jpmmps .jpmmps-body {
  margin: 0;
  background-color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  height: 100%;
}

/*
 Text-level semantics
 ====================
 */
/**
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
.jpmmps abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/**
 Add the correct font weight in Edge and Safari.
 */
.jpmmps b,
.jpmmps strong {
  font-weight: 700;
}

/**
 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
 2. Correct the odd 'em' font sizing in all browsers.
 */
.jpmmps code,
.jpmmps kbd,
.jpmmps samp,
.jpmmps pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
    monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 Add the correct font size in all browsers.
 */
.jpmmps small {
  font-size: 80%;
}

/**
 Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
 */
.jpmmps sub,
.jpmmps sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.jpmmps sub {
  bottom: -0.25em;
}

.jpmmps sup {
  top: -0.5em;
}

/*
 Tabular data
 ============
 */
/**
 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
 */
.jpmmps table {
  border-collapse: collapse;
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
}

/*
 Forms
 =====
 */
/**
 1. Change the font styles in all browsers.
 2. Remove the margin in Firefox and Safari.
 */
.jpmmps button,
.jpmmps input,
.jpmmps optgroup,
.jpmmps select,
.jpmmps 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 and Firefox.
 1. Remove the inheritance of text transform in Firefox.
 */
.jpmmps button,
.jpmmps select {
  /* 1 */
  text-transform: none;
}

/**
 Correct the inability to style clickable types in iOS and Safari.
 */
.jpmmps button,
.jpmmps [type="button"],
.jpmmps [type="reset"],
.jpmmps [type="submit"] {
  -webkit-appearance: button;
}

/**
 Remove the inner border and padding in Firefox.
 */
.jpmmps ::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 Restore the focus styles unset by the previous rule.
 */
.jpmmps :-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 Remove the additional ':invalid' styles in Firefox.
 See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
 */
.jpmmps :-moz-ui-invalid {
  box-shadow: none;
}

/**
 Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
 */
.jpmmps legend {
  padding: 0;
}

/**
 Add the correct vertical alignment in Chrome and Firefox.
 */
.jpmmps progress {
  vertical-align: baseline;
}

/**
 Correct the cursor style of increment and decrement buttons in Safari.
 */
.jpmmps ::-webkit-inner-spin-button,
.jpmmps ::-webkit-outer-spin-button {
  height: auto;
}

/**
 1. Correct the odd appearance in Chrome and Safari.
 2. Correct the outline style in Safari.
 */
.jpmmps [type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 Remove the inner padding in Chrome and Safari on macOS.
 */
.jpmmps ::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Change font properties to 'inherit' in Safari.
 */
.jpmmps ::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
 Interactive
 ===========
 */
/*
 Add the correct display in Chrome and Safari.
 */
.jpmmps summary {
  display: list-item;
}

/* ------------------------------------*\
     #BOX-SIZING
 \*------------------------------------ */
/**
  * More sensible default box-sizing:
  * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
  * We are overriding modern-normalize's opinionated box-sizing rules.
  */
.jpmmps .jpmmps-html {
  box-sizing: border-box;
}

.jpmmps *,
.jpmmps *::before,
.jpmmps *::after {
  box-sizing: border-box;
}

/* ------------------------------------*\
     #RESET
 \*------------------------------------ */
/**
  * Besides using normalize.css, it is often advantageous to remove all margins
  * from certain elements.
  */
.jpmmps .jpmmps-body,
.jpmmps h1,
.jpmmps h2,
.jpmmps h3,
.jpmmps h4,
.jpmmps h5,
.jpmmps h6,
.jpmmps p,
.jpmmps blockquote,
.jpmmps pre,
.jpmmps dl,
.jpmmps dd,
.jpmmps ol,
.jpmmps ul,
.jpmmps form,
.jpmmps fieldset,
.jpmmps legend,
.jpmmps figure,
.jpmmps table,
.jpmmps th,
.jpmmps td,
.jpmmps caption,
.jpmmps hr {
  margin: 0;
  padding: 0;
}

/**
  * Some browsers have weird default styles for the <fieldset> element.
  * E.g. Chrome has `min-width: -webkit-min-content;` as default style. We
  * definitely don't want that, so we explicitly set it to `auto` here.
  */
.jpmmps fieldset {
  min-width: auto;
}

/* ------------------------------------*\
     #SHARED
 \*------------------------------------ */
/**
  * Where `margin-bottom` is concerned, this value will be the same as the
  * `$GLOBAL-LINE-HEIGHT`. This allows us to keep a consistent vertical rhythm.
  *
  * https://csswizardry.com/2012/06/single-direction-margin-declarations
  */
.jpmmps ul,
.jpmmps ol,
.jpmmps dl,
.jpmmps blockquote,
.jpmmps p,
.jpmmps address,
.jpmmps hr,
.jpmmps table,
.jpmmps pre {
  margin-bottom: 24px;
}

/* ------------------------------------*\
     #FONT-FACE
 \*------------------------------------ */
@font-face {
  font-family: "open-sans";
  src: url("../fonts/fonts/open-sans-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "open-sans";
  src: url("../fonts/fonts/open-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Amplitude";
  src: url("../fonts/fonts/Amplitude-Light.otf") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Amplitude";
  src: url("../fonts/fonts/Amplitude-LightItalic.otf") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Amplitude";
  src: url("../fonts/fonts/Amplitude-Regular.otf") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Amplitude";
  src: url("../fonts/fonts/Amplitude-RegularItalic.otf") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Amplitude";
  src: url("../fonts/fonts/Amplitude-Medium.otf") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Amplitude";
  src: url("../fonts/fonts/Amplitude-MediumItalic.otf") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Amplitude";
  src: url("../fonts/fonts/Amplitude-Bold.ttf") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Amplitude";
  src: url("../fonts/fonts/AmplitudeTF-BoldItalic.otf") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "jpmmps-generic";
  src: url("../fonts/icon-fonts/jpmmps-generic.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
/* ------------------------------------*\
     #FORMS
 \*------------------------------------ */
/**
  * [1] Remove user agent border style.
  * [2] Remove native search styles as they can not be customized and
  *     visually conflicts with the rest of inputs.
  */
.jpmmps fieldset {
  border: 0;
  /* [1] */
}

.jpmmps input[type="search"]::-webkit-search-decoration,
.jpmmps input[type="search"]::-webkit-search-cancel-button,
.jpmmps input[type="search"]::-webkit-search-results-button,
.jpmmps input[type="search"]::-webkit-search-results-decoration {
  display: none;
  /* [2] */
}

/* ------------------------------------*\
     #IMAGES
 \*------------------------------------ */
/**
  * All our images are fluid, thus all getting `max-width: 100%`.
  * Never ever set `width` and `height` attributes in HTML on `<img>` elements!
  *
  * [1] Fluid images for responsive purposes.
  * [2] Setting `vertical-align` removes the whitespace that appears under `img`
  *     elements when they are dropped into a page as-is. This is a afer
  *     alternative to using `display: block;` for the `<img>`.
  * [3] Visually offset `alt` text from surrounding copy (useful if the image may
  *     not load properly).
  */
.jpmmps img {
  max-width: 100%;
  /* [1] */
  font-style: italic;
  /* [3] */
  vertical-align: middle;
  /* [2] */
}

/* ------------------------------------*\
     #LISTS
 \*------------------------------------ */
/**
  * [1] Align the bullets/numbers of lists horizontally with sourrounding content.
  * [2] Remove extra vertical spacing when nesting lists.
  */
.jpmmps ul,
.jpmmps ol {
  margin-left: 24px;
  /* [1] */
}

.jpmmps li > ul,
.jpmmps li > ol {
  margin-bottom: 0;
  /* [2] */
}

/* ------------------------------------*\
     #SMALL
 \*------------------------------------ */
/**
  * Smallprint text.
  */
.jpmmps small {
  font-size: calc(0.8125 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
}

/* ------------------------------------*\
     #HEADINGS
 \*------------------------------------ */
.jpmmps h1 {
  font-size: 33.6px;
}
@media (min-width: 721px) {
  .jpmmps h1 {
    font-size: 33.6px;
  }
}
.jpmmps h2 {
  font-size: 33.6px;
}
@media (min-width: 721px) {
  .jpmmps h2 {
    font-size: 33.6px;
  }
}
.jpmmps h3 {
  font-size: 33.6px;
}
@media (min-width: 721px) {
  .jpmmps h3 {
    font-size: 33.6px;
  }
}
.jpmmps h4 {
  font-size: 33.6px;
}
@media (min-width: 721px) {
  .jpmmps h4 {
    font-size: 33.6px;
  }
}
.jpmmps h5 {
  font-size: 28px;
  text-transform: none;
}
@media (min-width: 721px) {
  .jpmmps h5 {
    font-size: 36px;
  }
}
.jpmmps h6 {
  font-size: 36px;
}
@media (min-width: 721px) {
  .jpmmps h6 {
    font-size: 36px;
  }
}
.jpmmps h1,
.jpmmps h2,
.jpmmps h3,
.jpmmps h4,
.jpmmps h5,
.jpmmps h6 {
  margin-bottom: 24px;
  font-weight: bold;
  line-height: initial;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0;
  color: #000000;
}
.jpmmps [data-theme="brand"] h1,
.jpmmps [data-theme="brand"] h2,
.jpmmps [data-theme="brand"] h3,
.jpmmps [data-theme="brand"] h4,
.jpmmps [data-theme="brand"] h5,
.jpmmps [data-theme="brand"] h6 {
  color: #161616;
}

/* ------------------------------------*\
     #PAGE
 \*------------------------------------ */
/**
  * High-, page-level styling.
  *
  * [3] Set the default `font-size` and `line-height` for the entire project,
  *     sourced from our base variables. The `font-size` is calculated to exist
  *     in ems, the `line-height` is calculated to exist unitlessly.
  *     navigating between pages that do/do not have enough content to produce
  *     scrollbars naturally.
  * [4] Assign our base `font-family` for the whole site.
  *     We have to inherit `font-family` on `body` to override modern-normalize’s default
  *     system `font-family`. See https://github.com/sindresorhus/modern-normalize/issues/3
  * [5] Set our sites background color globally.
  * [6] Set our base text color globally.
  * [7] Progressively enhanced smooth scrolling.
  *     See https://developer.mozilla.org/de/docs/Web/CSS/scroll-behavior
  */
.jpmmps .jpmmps-html {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  /* [4] */
  background-color: #ffffff;
  /* [5] */
  color: #161616;
  /* [6] */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  /* [7] */
  font-size: 16px;
  /* [3] */
  line-height: 24px;
  /* [3] */
}

@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  .jpmmps .jpmmps-html {
    --transition-duration-reduced-motion: 0;
    scroll-behavior: auto;
  }
}
/**
  * Assign the base font-size to the page.
  */
.jpmmps .jpmmps-body {
  font-size: calc(1 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  font-family: inherit;
  color: #161616;
  /* [4] */
}

/* ------------------------------------*\
     #ELEMENTS
 \*------------------------------------ */
.jpmmps button {
  cursor: pointer;
}

/* ------------------------------------*\
     #LABEL
 \*------------------------------------ */
/**
  * Native <label> HTML element.
  */
.jpmmps label {
  display: inline-block;
  margin-bottom: 8px;
  color: #161616;
}

/* ------------------------------------*\
     #LISTS (SETTINGS)
 \*------------------------------------ */
/* ------------------------------------*\
     #LISTS
 \*------------------------------------ */
/**
  * [1] Second level lists have a smaller spacing on top and
  *     a normal one at the bottom.
  * [2] Third level lists have a smaller spacing on top and
  *     at the bottom.
  * [3] Offset by one character to align container with 2 digit index
  *     and prevent cut-off.
  *     This depends on the font, font-size and global-spacing, so a flag is used
  *     to selectively set it per brand.
  */
.jpmmps ul li,
.jpmmps ol li {
  margin-bottom: 16px;
}

.jpmmps ul li > ul,
.jpmmps ul li > ol,
.jpmmps ol li > ul,
.jpmmps ol li > ol {
  margin-top: 8px;
  /* [1] */
  margin-bottom: 16px;
  /* [1] */
}

.jpmmps ul li > ul li,
.jpmmps ul li > ol li,
.jpmmps ol li > ul li,
.jpmmps ol li > ol li {
  margin-bottom: 0;
}

.jpmmps ul li > ul li > ul,
.jpmmps ul li > ol li > ul,
.jpmmps ol li > ul li > ul,
.jpmmps ol li > ol li > ul {
  margin-bottom: 8px;
  /* [2] */
}

.jpmmps ol {
  margin-left: calc(24px + 1ch);
  /* [3] */
}

/* ------------------------------------*\
     #HR
 \*------------------------------------ */
.jpmmps hr {
  display: block;
  width: 100%;
  height: 1px;
  margin-right: auto;
  margin-bottom: 32px;
  margin-left: auto;
  border: 0;
  background-color: #161616;
}
.jpmmps [data-theme="alternative"] hr {
  background-color: #161616;
}

/* ------------------------------------*\
     #ANCHOR
 \*------------------------------------ */
/**
  * [1] Exclude `.c-btn` because buttons should always have the same behavior in
  *     all states regardless of the element. `where()`is used to not increase
  *     the specificity.
  */
.jpmmps a:where(:not(.c-btn)) {
  text-decoration: underline;
  color: #161616;
  cursor: pointer;
}
.jpmmps a:where(:not(.c-btn)):hover {
  color: #61656e;
  border-bottom-color: currentColor;
}
.jpmmps a:where(:not(.c-btn)):focus {
  color: currentColor;
  border-bottom-color: currentColor;
}
.jpmmps a:where(:not(.c-btn)):active {
  /* [2] */
}

/* ------------------------------------*\
     #STRONG (`<strong>`)
 \*------------------------------------ */
/**
  * [1] Set/Overwrite weight that is set by `normalize.css`
  */
.jpmmps strong {
  font-weight: 700;
  /* [1] */
}

/* ------------------------------------*\
     #LAYOUT
 \*------------------------------------ */
/**
  * The layout system uses `display: inline-block` to create an extremely
  * powerful, flexible alternative to the traditional grid system. Combine the
  * layout items with the widths-classes found in
  * `10-utilities/_utilities.widths.scss`.
  *
  * [1a] These properties accept a responsive map (responsive-property).
  */
/* [1a] */
/* [1a] */
/**
  * [1] Allows us to use the layout object on any type of element.
  * [2] We need to defensively reset any box-model properties.
  * [3] Use the negative margin trick for multi-row grids:
  *     https://csswizardry.com/2011/08/building-better-grid-systems/
  * [4] Workaround for the HTML-comments trick to remove any whitespace between
  *     items in the markup.
  * [4a] Redefine a font-size to compensate [4].
  * [5] Required in order to combine fluid widths with fixed gutters.
  * [6] Allows us to manipulate grids vertically, with text-level properties, etc.
  * [7] Default item alignment is top.
  * [8] By default, all layout items are full-width.
  * [9] Gutters provided by left padding:
  *     https://csswizardry.com/2011/08/building-better-grid-systems/
  * [10] Define a default vertical spacing between layout items. Use `margin-top`
  *      instead of `margin-bottom`, so if a `margin-bottom` is set on the
  *      `.o-layout` container, the margins do not collapse.
  * [11] If we use `.o-layout--flush`, we do not not want vertical spacing, too.
  * [12] When the equal-height and the center variants are combined,
  *      `text-align: center` isn't enough to center the items.
  * [13] Use alignment via flexbox when both equal-height and right modifiers
  *      are used.
  * [14] Use Flexbox to adjust adjacent items to the same height.
  * [15] Hide vertical and horizontal dividers outside of `.o-layout`.
  * [16] Use vertical divider spacing between items.
  * [17] Equalize the bottom margin of `.o-layout`.
  *      Specificity has to be increased by prefix the selector with `:root:root`
  *      to overrule overly specific rules of other components.
  * [18] Use horizontal divider spacing between items.
  * [19] Remove bottom margin of last layout item child.
  * [20] Add shared declarations for vertical and horizontal dividers.
  * [21] Use `::before` for vertical dividers.
  * [22] Position vertical dividers.
  * [23] Center vertical dividers if divider width is an odd value (1, 3, 5, …).
  *      The divider position will be adjusted to the nearest full pixel
  *      in order to avoid half pixel values and anti-aliasing
  *      (depending on the screen resolution).
  * [24] Center vertical dividers if divider width is an even value (2, 4, 6, …).
  * [25] Use `::after` for horizontal dividers.
  * [26] Position horizontal dividers.
  * [27] Center horizontal dividers if divider width is an odd value (1, 3, 5, …).
  *      The divider position will be adjusted to the nearest full pixel
  *      in order to avoid half pixel values and anti-aliasing
  *      (depending on the screen resolution).
  * [28] Center horizontal dividers if divider width is an even value (2, 4, 6, …).
  * [29] On equal-height layouts the flex-item child elements are not taking up the
  *      entire width due to the `display: flex` on the flex-items.
  *      To fix this we have to make them grow as wide as their flex-item parent.
  * [30] The compensation for vertical gaps from [10] can result in overlapping
  *      elements above the layout-object, resulting in blocked interaction
  *      (click, text-selection, etc.). Disable interaction via `pointer-events`
  *      on layout and...
  * [31] ...Restore interaction on content.
  * [32] Prevent too wide content in equal height layout items from affecting the
  *      maximum width of its layout item container.
  * [33] Set vertical offset for the divider line.
  */
.jpmmps .o-layout {
  display: block;
  /* [1] */
  margin: 0;
  /* [2] */
  padding: 0;
  /* [2] */
  font-size: 0;
  /* [4] */
  text-align: left;
  list-style: none;
  /* [1] */
  pointer-events: none;
  /* [30] */
  /* stylelint-disable order/order */
  margin-top: -24px;
  /* [10] */
  margin-left: -24px;
  /* [3] */
  /* stylelint-enable order/order */
}
.jpmmps .o-layout > .o-layout__item {
  margin-top: 24px;
  /* [10] */
}
.jpmmps .o-layout.o-layout--equal-height.o-layout--right {
  justify-content: flex-end;
  /* [13] */
}
.jpmmps .o-layout__item {
  font-size: calc(1 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  /* [4a] */
  padding-left: 24px;
  /* [9] */
  box-sizing: border-box;
  /* [5] */
  display: inline-block;
  /* [6] */
  width: 100%;
  /* [8] */
  vertical-align: top;
  /* [7] */
  pointer-events: auto;
  /* [31] */
}

/**
  * Layout modifier to fill up the layout system from the center.
  */
.jpmmps {
  /**
  * Layout modifier to fill up the layout system from the right hand side.
  */
  /**
  * Layout modifier to eliminate the spacing between the layout items.
  */
}
.jpmmps .o-layout--center {
  text-align: center;
}
.jpmmps .o-layout--center.o-layout--equal-height {
  justify-content: center;
  /* [12] */
}
.jpmmps .o-layout--center > .o-layout__item {
  text-align: right;
}
.jpmmps .o-layout--right {
  text-align: right;
}
.jpmmps .o-layout--right > .o-layout__item {
  text-align: right;
}
.jpmmps .o-layout--flush {
  margin-left: 0;
  margin-top: 0;
  /* [11] */
}
.jpmmps .o-layout--flush > .o-layout__item {
  padding-left: 0;
  margin-top: 0;
  /* [11] */
}

.jpmmps {
  /**
   * Layout modifier to add horizontal and vertical divider lines
   * between layout items.
   */
}
.jpmmps .o-layout--divider {
  display: flex;
  /* [14] */
  flex-wrap: wrap;
  /* [14] */
  overflow: hidden;
  /* [15] */
  margin-top: -24px;
  /* [16] */
  margin-left: -48px;
  /* [18] */
  background-color: #161616;
}
.jpmmps .o-layout--divider.o-layout--divider {
  margin-bottom: -24px;
  /* [17] */
}
.jpmmps .o-layout--divider > .o-layout__item {
  position: relative;
  margin-top: 24px;
  /* [16] */
  padding-left: 48px;
  /* [18] */
  padding-bottom: 24px;
  /* [16] */
}
.jpmmps .o-layout--divider > .o-layout__item > *:last-child {
  margin-bottom: 0;
  /* [19] */
}
.jpmmps .o-layout--divider > .o-layout__item::before,
.jpmmps .o-layout--divider > .o-layout__item::after {
  content: "";
  /* [20] */
  position: absolute;
  /* [20] */
  border-width: 1px;
  /* [20] */
  border-color: inherit;
  /* [20] */
}
.jpmmps .o-layout--divider > .o-layout__item::before {
  /* [21] */
  top: -24px;
  /* [22] */
  left: 48px;
  /* [22] */
  right: 0;
  /* [22] */
  border-top-style: solid;
  transform: translateY(-0.5px);
  /* [24] */
  margin-top: -1px;
  /* [33] */
}
.jpmmps .o-layout--divider > .o-layout__item::after {
  /* [25] */
  top: 0;
  /* [26] */
  bottom: 24px;
  /* [26] */
  right: -24px;
  /* [26] */
  border-left-style: solid;
  transform: translateX(0.5px);
  /* [28] */
}

/* ------------------------------------*\
     #PAGE-WRAP
 \*------------------------------------ */
/**
  * [1] Add page wrap widths as CSS custom property so that it can be used in
  *     calculations (e.g. for the Float grid).
  * [2] Add variants, e.g. `.o-page-wrap--small`.
  */
.jpmmps .jpmmps-html {
  --page-wrap-width: 1280px;
  /* [1] */
}
.jpmmps .o-page-wrap {
  max-width: 1344px;
  padding-left: 32px;
  padding-right: 32px;
  --page-wrap: 32px;
  margin-right: auto;
  margin-left: auto;
  /* [2] */
}
@media (max-width: 960px) {
  .jpmmps .o-page-wrap {
    max-width: 1312px;
    padding-left: 16px;
    padding-right: 16px;
    --page-wrap: 16px;
  }
}
@media (max-width: 720px) {
  .jpmmps .o-page-wrap {
    max-width: 1312px;
    padding-left: 16px;
    padding-right: 16px;
    --page-wrap: 16px;
  }
}
@media (max-width: 480px) {
  .jpmmps .o-page-wrap {
    max-width: 1312px;
    padding-left: 16px;
    padding-right: 16px;
    --page-wrap: 16px;
  }
}
.jpmmps .o-page-wrap--medium {
  max-width: 1344px;
}
@media (max-width: 960px) {
  .jpmmps .o-page-wrap--medium {
    max-width: 1312px;
  }
}
@media (max-width: 720px) {
  .jpmmps .o-page-wrap--medium {
    max-width: 1312px;
  }
}
@media (max-width: 480px) {
  .jpmmps .o-page-wrap--medium {
    max-width: 1312px;
  }
}
.jpmmps .o-page-wrap--small {
  max-width: 1130.6666666667px;
}
@media (max-width: 960px) {
  .jpmmps .o-page-wrap--small {
    max-width: 1098.6666666667px;
  }
}
@media (max-width: 720px) {
  .jpmmps .o-page-wrap--small {
    max-width: 1098.6666666667px;
  }
}
@media (max-width: 480px) {
  .jpmmps .o-page-wrap--small {
    max-width: 1098.6666666667px;
  }
}
.jpmmps .o-page-wrap--xsmall {
  max-width: 917.3333333333px;
}
@media (max-width: 960px) {
  .jpmmps .o-page-wrap--xsmall {
    max-width: 885.3333333333px;
  }
}
@media (max-width: 720px) {
  .jpmmps .o-page-wrap--xsmall {
    max-width: 885.3333333333px;
  }
}
@media (max-width: 480px) {
  .jpmmps .o-page-wrap--xsmall {
    max-width: 885.3333333333px;
  }
}
.jpmmps .o-page-wrap--xxsmall {
  max-width: 704px;
}

/* ------------------------------------*\
     #MAIN-CONTAINER
 \*------------------------------------ */
/**
  * [1] Enable the footer to be positioned at the bottom of the viewport
  *     if the content is not as high as the remaining space.
 */
.jpmmps .o-root {
  display: flex;
  /* [1] */
  flex-direction: column;
  /* [1] */
  min-height: 100vh;
  /* [1] */
}

/* ------------------------------------*\
     #MAIN-WRAPPER
 \*------------------------------------ */
/**
  * [1] Stretch the content of the main selector to push
  *     down the footer, when the content is too shallow.
 */
.jpmmps .o-main {
  flex-grow: 1;
  /* [1] */
  flex-shrink: 1;
  /* [1] */
  flex-basis: auto;
  /* [1] */
}

/* ------------------------------------*\
     #CONTENT-SECTION
 \*------------------------------------ */
/**
  * An object wrapping the content of entire sections to ensure a consistent
  * spacing around the sections content.
  */
.jpmmps .o-content-section {
  text-align: left;
}
.jpmmps .o-content-section .u-text-fs-1 {
  color: #000000;
  line-height: 26px;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* stylelint-enable selector-max-specificity, selector-max-id, itcss/no-at-important */
/* ------------------------------------*\
     #ICONS
 \*------------------------------------ */
/**
  * [1] In case the icon is an `<a>` element, this gives us an easy way of
  *     eliminating an underline appearing in IE11. In case you actually want
  *     any text-decoration, you can override the `$icon-text-decoration`
  *     variable.
  */
.jpmmps .c-icon {
  display: inline-block;
  font-family: "jpmmps-generic" !important;
  /* [1] */
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  font-variant: normal;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  padding: 0;
  border: 0;
  background-color: transparent;
  font-size: calc(2.25 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  text-decoration: none;
  /* [1] */
  color: currentColor;
}

.jpmmps .c-icon:focus {
  outline: 0;
}

.jpmmps .c-icon::before {
  /* stylelint-disable order/order */
  --transition-property: all;
  --transition-duration: var(--transition-duration-reduced-motion, 250ms);
  --transition-timing-function: ease;
  --transition-delay: 0;
  transition-property: var(--transition-property);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-delay: var(--transition-delay);
  content: var(--jpmmps-icon);
  display: inline-block;
}

/**
  * Generate fallback-icons.
  * Use key as name and value as icon content.
  */
/**
  * Generate icon definitions for default and optional complexities.
  */
.jpmmps .c-icon--\[plus\],
.jpmmps .c-icon--\[semantic-zoom-in\],
.jpmmps .c-icon--\[semantic-upload\],
.jpmmps .c-icon--\[semantic-plus\],
.jpmmps .c-icon--\[semantic-add\] {
  --jpmmps-icon: "\f1ca";
}

.jpmmps .c-icon--\[checkmark\],
.jpmmps .c-icon--\[semantic-success\],
.jpmmps .c-icon--\[semantic-checkmark\] {
  --jpmmps-icon: "\f138";
}

.jpmmps .c-icon--\[chevron-left\],
.jpmmps .c-icon--\[back\],
.jpmmps .c-icon--\[semantic-back\] {
  --jpmmps-icon: "\f13c";
}

/**
 * Generate sizing modifiers.
 */
.jpmmps .c-icon--xxsmall {
  font-size: calc(1 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
}

.jpmmps .c-icon--xsmall {
  font-size: calc(1 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
}

.jpmmps .c-icon--small {
  font-size: calc(1.5 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
}

.jpmmps .c-icon--large {
  font-size: calc(3.375 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
}

.jpmmps .c-icon--xlarge {
  font-size: calc(3.375 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
}

.jpmmps .c-icon--xxlarge {
  font-size: calc(3.375 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
}

/* ------------------------------------*\
     #HEADER
 \*------------------------------------ */
/**
  * [1] Use `auto` instead of `0` in case there are other fixed elements above
  *     the header component (e.g. notifications).
  * [2] Only output a background-color if a color is defined. This way, if you
  *     dont want any background on the header (i.e. transparent), no CSS is
  *     generated.
  * [3] Variant to force a `position: static`. Useful if your default header
  *     is absolute or sticky, but you also need a variant that provides a
  *     static header that sits in the normal flow of the page.
  * [4] Only apply a spacing-bottom if its not absolute or fixed positioned.
  * [5] Make sure that all elements of the header are aligned to the outer edges.
  * [6] If the default spacing-bottom for the static header alters on small
  *     screen, assign it for that specific media-query.
  * [7] Position `.c-header__nav` after `.c-header__notification-center` in
  *     small viewports.
  * [8] Make sure that the header always spans all its children.
  * [9] Stretch the log to full height by making the container a flexbox container.
  * [10] Center the sub brand logo vertically in the header.
  * [11] Push the sub brand logo to left.
  * [12] Adjust the spacing between the sub brand logo and the logo in small
  *      viewports to avoid horizontal scrolling.
  * [13] Apply a safe-space to the sub-brand logo on the right-hand side if it is
  *      not the last element and only for larger viewports.
  */
.jpmmps .c-header__wrapper {
  position: relative;
  z-index: 2000;
}
.jpmmps .c-header {
  width: -moz-fit-content;
  width: fit-content;
  height: 100px;
  min-width: 100%;
  margin-bottom: 0;
  background-color: #ffffff;
  border-bottom: 1px solid #187085;
}
.jpmmps .c-header.c-header--static {
  position: static;
  margin-bottom: 0;
}
.jpmmps .c-header__content-wrapper {
  max-width: 1344px;
  padding-left: 32px;
  padding-right: 32px;
  --page-wrap: 32px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
}
.jpmmps .c-header__logo {
  margin-right: 16px;
}
.jpmmps .c-header__sub-brand-logo {
  display: none;
}
.jpmmps .c-header__nav {
  display: flex;
}
.jpmmps .c-header__notification-center {
  position: relative;
  height: 100%;
}

@media (max-width: 720px) {
  .jpmmps .c-header {
    height: 60px;
  }
  .jpmmps .c-header__content-wrapper {
    max-width: 1312px;
    padding-left: 16px;
    padding-right: 16px;
    --page-wrap: 16px;
    height: 60px;
  }
  .jpmmps .c-header__nav {
    order: 1;
    /*[7]*/
  }
}
@media (max-width: 960px) {
  .jpmmps .c-header__content-wrapper {
    max-width: 1312px;
    padding-left: 16px;
    padding-right: 16px;
    --page-wrap: 16px;
  }
}
@media (max-width: 480px) {
  .jpmmps .c-header__content-wrapper {
    max-width: 1312px;
    padding-left: 16px;
    padding-right: 16px;
    --page-wrap: 16px;
  }
}
@media (min-width: 721px) {
  .jpmmps .c-header__nav {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
  }
}
/* ------------------------------------*\
     #FOOTER
 \*------------------------------------ */
.jpmmps .c-footer {
  background-color: #61656e;
  color: #ffffff;
}
.jpmmps .c-footer__module.c-footer__module--breadcrumb {
  background-color: #61656e;
}
.jpmmps .c-footer-meta-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  padding-bottom: 10px;
  padding-top: 1rem;
}
.jpmmps .c-footer__module--meta-nav:first-child .c-footer-meta-bar {
  padding-top: 32px;
}
.jpmmps .c-footer__module--meta-nav:last-child .c-footer-meta-bar {
  padding-bottom: 32px;
}
.jpmmps .c-footer__module--meta-nav:last-child:only-child .c-footer-meta-bar {
  padding-bottom: 32px;
}
.jpmmps
  .c-footer__module--breadcrumb
  + .c-footer__module--meta-nav
  .c-footer-meta-bar {
  margin-top: 32px;
  padding-top: 0;
}
.jpmmps .c-footer-meta-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  padding-bottom: 24px;
}
.jpmmps .c-footer-meta-nav li {
  display: block;
  margin-bottom: 0;
}
.jpmmps .c-footer-meta-nav__link {
  font-size: calc(1 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  line-height: 1.5;
  display: block;
  text-decoration: none;
  color: #ffffff;
}
.jpmmps .c-footer-meta-nav__link:hover {
  color: #ffffff;
}
.jpmmps .c-footer-meta-nav__link:focus {
  color: #ffffff;
}
.jpmmps .c-footer-meta-nav__link:active {
  color: #ffffff;
}
.jpmmps .c-footer-footnotes {
  font-size: calc(0.8125 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  padding-top: 0;
  padding-bottom: 32px;
  border-top: none;
  color: #afb5ab;
}
.jpmmps .c-footer-footnotes a {
  color: inherit;
}
.jpmmps .c-footer-footnotes a:hover {
  color: inherit;
}
.jpmmps .c-footer-footnotes a:focus {
  color: inherit;
}
.jpmmps .c-footer-footnotes a:active {
  color: inherit;
}

@media (max-width: 720px) {
  .jpmmps .c-footer-meta-bar > * {
    flex-basis: 100%;
  }
  .jpmmps .c-footer-meta-nav {
    flex-direction: column;
  }
}
@media (min-width: 721px) {
  .jpmmps .c-footer-meta-nav__item:not(:last-child) {
    margin-right: 16px;
  }
}
/**
  * [1] Adjust spacing for meta nav items only on small viewports.
**/
.jpmmps .c-footer__module--meta-nav:only-child {
  border-top: 8px solid #61656e;
  /* [1] */
}

@media (max-width: 720px) {
  .jpmmps .c-footer-meta-nav__item:not(:last-child) {
    margin-bottom: 8px;
    margin-right: 0;
  }
}
/* ------------------------------------*\
    #LINK
\*------------------------------------ */
#text-back-button .c--link__effect {
  color: #000000;
  font-size: 16px;
  text-decoration-line: none;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  text-transform: uppercase;
}
#text-back-button:hover .c--link__effect {
  color: #000000;
}

#back_to_methods_selection i {
  color: #161616 !important;
  font-size: 19.2px !important;
  text-transform: uppercase;
}
#back_to_methods_selection:hover i {
  color: #161616 !important;
}

.jpmmps .c-link {
  padding: 0;
  border: 0;
  background-color: transparent;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  color: #000000 !important;
  text-transform: uppercase;
}
.jpmmps .c-link:hover {
  color: #000000;
}
.jpmmps .c-link:focus {
  outline: 0;
}
.jpmmps .c-link.back-to-stored {
  justify-content: left;
}
.jpmmps .c-link.back-to-stored:hover .c--link--effect {
  color: #000000;
}
.jpmmps .c-link.back-to-stored:hover .c-link__icon {
  color: #161616;
}
.jpmmps .c-link.back-to-stored .c-link__body {
  color: #000000;
  font-size: 16px;
  text-decoration-line: none;
  text-transform: initial;
  font-weight: bold;
  width: 100%;
  text-align: center;
}
.jpmmps .c-link.back-to-stored .c-link__icon {
  color: #161616 !important;
  font-size: 19.2px !important;
  text-transform: uppercase;
}
.jpmmps .c-link:hover .c-link__body {
  color: #000000 !important;
  text-decoration-line: none;
}
.jpmmps .c-link:hover .c-link__icon {
  color: #161616 !important;
}
.jpmmps .c-link__icon {
  line-height: 1;
  margin-right: 16px;
  color: #161616 !important;
  font-size: 19.2px !important;
  text-transform: uppercase;
}
.jpmmps .c-link__icon:hover {
  color: #494949 !important;
}
.jpmmps .c-link.c-link--reversed .c-link__icon {
  order: 10;
  margin-right: 0;
  margin-left: 16px;
}
.jpmmps .c-link__body {
  align-self: center;
  font-weight: 400;
  text-transform: none;
}

/* ------------------------------------*\
    #BUTTONS
\*------------------------------------ */
/**
 * [1] `inline-flex` is a good method to center elements vertically inside of
 *     the button.
 * [2] Center text, and text to icon horizontally and vertically inside of the
 *     button.
 * [3] Make the cursor behaviour the same for `<button>` and `<a>` elements.
 * [4] `<a>` elements are left aligned by default. Override this to match
 *     `<button>` and `<a>` elements.
 * [5] Text left, icon right.
 * [6] Icon left, text right.
 * [8] Fix for iOS bug, where the button text is not centered. Just
 *     occurs in iOS 10 or lower (every browser), for the full-width button and
 *     only, if it's a `<button>` element.
  * [11] Although this declaration is in an if-condition that only matches for
 *      fixed height buttons, it is still a sensible idea to assign a
 *      min-height rather than a fixed height, so the button grows if the text
 *      does not fit vertically.
 * [15] Align the content left for link buttons. This only has an effect if
 *      the button is larger than its content, e.g. when combining a
 *      `.c-btn--link` with `.c-btn--full`.
 * [17] Also apply focus styles when an element is focused that is a child
 *      of a shared parent element. This is needed for buttons in the
 *      upload component (`.c-upload`).
 * [19] Without a transparent border the link will "jump" on hover.
 * [20] Raise the specificity to prevent leaks from `.c-btn--secondary` in a theme context.
 */
.jpmmps .c-btn {
  --button-height: 48px;
  height: 48px;
  width: 100% !important;
  --button-padding-horizontal: 32px;
  --button-padding-vertical: 0;
  margin: 5px 0px;
  /* [10] */
  --button-icon-size: 16px;
  --button-text-icon-spacing: 8px;
  /* stylelint-disable-line length-zero-no-unit */
  font-size: 16px;
  /* stylelint-disable order/order */
  --transition-property: all;
  --transition-duration: var(--transition-duration-reduced-motion, 250ms);
  --transition-timing-function: ease;
  --transition-delay: 0;
  transition-property: var(--transition-property);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-delay: var(--transition-delay);
  display: inline-flex;
  /* [1] */
  align-items: center;
  /* [2] */
  justify-content: center;
  /* [2] */
  flex-direction: var(--button-flex-direction, row);
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  border-color: #ffffff;
  border-radius: 16px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: bold;
  text-decoration: none;
  text-transform: none;
  line-height: 24px;
  text-align: center;
  /* [4] */
  vertical-align: middle;
  background-color: #ffdc00;
  color: #000000;
  box-shadow: none;
  cursor: pointer;
  /* [3] */
  min-height: 48px;
  border-width: 0;
  /* [11] */
  --button-border-color: #ffffff;
  --button-background: #ffdc00;
  --button-text-color: #000000;
  --button-box-shadow: none;
  --button-border-width: 0;
  border-width: 0;
}
.jpmmps .c-btn:hover.c-btn--link.c-btn--small.u-mt {
  background-color: #e6e6e6 !important;
}
.jpmmps .c-btn:hover .c-btntext {
  color: #000000 !important;
}
.jpmmps .c-btn:hover.c-btntext {
  color: #000000 !important;
}
.jpmmps .c-btn:hover .c-btn__text {
  text-decoration-line: none;
}
.jpmmps .c-btn:hover,
.jpmmps .c-btn:focus {
  /* [17] */
  border-color: 0;
  border-width: 0;
  background: #f0cf00;
  box-shadow: none;
  outline: none;
}
.jpmmps .c-btn .c-btntext {
  color: #000000;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
}
.jpmmps .c-btn[disabled],
.jpmmps .c-btn.is-disabled {
  border-color: var(--button-primary-border-color-disabled);
  background: var(--button-primary-background-disabled, #afb5ab);
  color: var(--button-primary-text-color-disabled, #3e4547);
  box-shadow: var(--button-primary-box-shadow-disabled);
}
.jpmmps .c-btn[disabled]:hover,
.jpmmps .c-btn[disabled]:focus {
  border-color: var(--button-primary-border-color-disabled-hover);
  background: var(--button-primary-background-disabled-hover);
  color: var(--button-primary-text-color-disabled-hover);
  box-shadow: var(--button-primary-box-shadow-disabled-hover);
}
.jpmmps .c-btn.is-disabled:hover,
.jpmmps .c-btn.is-disabled:focus {
  border-color: var(--button-primary-border-color-disabled-hover);
  background: var(--button-primary-background-disabled-hover);
  color: var(--button-primary-text-color-disabled-hover);
  box-shadow: var(--button-primary-box-shadow-disabled-hover);
}
.jpmmps .c-btn.c-btn--link {
  justify-content: center !important;
  background-color: transparent;
  /* [15] */
}
.jpmmps .c-btn.c-btn--link .c-btn__text,
.jpmmps .c-btn.c-btn--link .c-btn__icon {
  color: #009900;
}
.jpmmps .c-btn.c-btn--link:hover,
.jpmmps .c-btn.c-btn--link:focus {
  background: none;
  box-shadow: none;
}
.jpmmps .c-btn.c-btn--link:hover .c-btn__icon,
.jpmmps .c-btn.c-btn--link:focus .c-btn__icon {
  color: #ffffff !important;
}
.jpmmps .c-btn.c-btn--link .c-btn__icon {
  background-color: #009900;
  border-radius: 50%;
  color: #ffffff;
}
.jpmmps .c-btn.c-btn--link[disabled] .c-btn__text,
.jpmmps .c-btn.c-btn--link.is-disabled .c-btn__text,
.jpmmps .c-btn.c-btn--link[disabled] .c-btn__icon,
.jpmmps .c-btn.c-btn--link.is-disabled .c-btn__icon {
  color: #61656e;
}
.jpmmps .c-btn.c-btn--secondary {
  border-color: #000000;
  background: transparent;
  box-shadow: none;
  border-width: 1px;
  border-radius: 16px;
  border-style: solid;
  width: 100% !important;
  margin-left: auto;
}
.jpmmps .c-btn.c-btn--secondary .c-btn__text {
  color: #000000;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-transform: none;
}
.jpmmps .c-btn.c-btn--secondary:hover,
.jpmmps .c-btn.c-btn--secondary:focus {
  /* [17] */
  background-color: #f0cf00;
  color: #000000;
}
.jpmmps .c-btn.c-btn--secondary:hover .c-btn__text,
.jpmmps .c-btn.c-btn--secondary:focus .c-btn__text {
  color: #000000;
}
.jpmmps .c-btn.c-btn--secondary[disabled],
.jpmmps .c-btn.c-btn--secondary.is-disabled {
  --button-border-color: var(--button-secondary-border-color-disabled);
  --button-background: var(--button-secondary-background-disabled, #afb5ab);
  --button-text-color: var(--button-secondary-text-color-disabled, #3e4547);
  --button-box-shadow: var(--button-secondary-box-shadow-disabled, none);
}
.jpmmps .c-btn.c-btn--secondary[disabled]:hover,
.jpmmps .c-btn.c-btn--secondary[disabled]:focus {
  --button-border-color: var(--button-secondary-border-color-disabled-hover);
  --button-background: var(--button-secondary-background-disabled-hover);
  --button-text-color: var(--button-secondary-text-color-disabled-hover);
  --button-box-shadow: var(--button-secondary-box-shadow-disabled-hover);
}
.jpmmps .c-btn.c-btn--secondary.is-disabled:hover,
.jpmmps .c-btn.c-btn--secondary.is-disabled:focus {
  --button-border-color: var(--button-secondary-border-color-disabled-hover);
  --button-background: var(--button-secondary-background-disabled-hover);
  --button-text-color: var(--button-secondary-text-color-disabled-hover);
  --button-box-shadow: var(--button-secondary-box-shadow-disabled-hover);
}
.jpmmps .c-btn.c-btn--secondary.c-btn--link {
  justify-content: center;
  /* [15] */
}
.jpmmps .c-btn.c-btn--secondary.c-btn--link:hover,
.jpmmps .c-btn.c-btn--secondary.c-btn--link:focus {
  background: none;
  box-shadow: none;
}
.jpmmps .c-btn.c-btn--action {
  --button-border-color: var(--button-action-border-color);
  --button-background: var(--button-action-background, $brand-muted);
  --button-text-color: var(--button-action-text-color, #ffffff);
  --button-box-shadow: var(--button-action-box-shadow, 0 0 0 1px #ffffff);
  --button-padding-horizontal: calc(var(--button-height) / 2);
  border-width: var(--button-border-width);
}
.jpmmps .c-btn.c-btn--action:hover,
.jpmmps .c-btn.c-btn--action:focus {
  /* [17] */
  --button-border-color: var(--button-action-border-color-hover);
  --button-background: var(
    --button-action-background-hover,
    $brand-primary-color
  );
  --button-text-color: var(--button-action-text-color-hover, #ffffff);
  --button-box-shadow: var(--button-action-box-shadow-hover);
  outline: none;
}
.jpmmps label:focus-within .c-btn.c-btn--action {
  /* [17] */
  --button-border-color: var(--button-action-border-color-hover);
  --button-background: var(
    --button-action-background-hover,
    $brand-primary-color
  );
  --button-text-color: var(--button-action-text-color-hover, #ffffff);
  --button-box-shadow: var(--button-action-box-shadow-hover);
  outline: none;
}
.jpmmps .c-btn.c-btn--action[disabled],
.jpmmps .c-btn.c-btn--action.is-disabled {
  --button-border-color: var(--button-action-border-color-disabled);
  --button-background: var(
    --button-action-background-disabled,
    $brand-primary-color
  );
  --button-text-color: var(--button-action-text-color-disabled, $brand-muted);
  --button-box-shadow: var(--button-action-box-shadow-disabled);
}
.jpmmps .c-btn.c-btn--action[disabled]:hover,
.jpmmps .c-btn.c-btn--action[disabled]:focus {
  --button-border-color: var(--button-action-border-color-disabled-hover);
  --button-background: var(--button-action-background-disabled-hover);
  --button-text-color: var(--button-action-text-color-disabled-hover);
  --button-box-shadow: var(--button-action-box-shadow-disabled-hover);
}
.jpmmps .c-btn.c-btn--action.is-disabled:hover,
.jpmmps .c-btn.c-btn--action.is-disabled:focus {
  --button-border-color: var(--button-action-border-color-disabled-hover);
  --button-background: var(--button-action-background-disabled-hover);
  --button-text-color: var(--button-action-text-color-disabled-hover);
  --button-box-shadow: var(--button-action-box-shadow-disabled-hover);
}
.jpmmps [data-theme="brand"] .c-btn {
  --button-border-color: var(--button-primary-border-color);
  --button-background: var(--button-primary-background, #ffffff);
  --button-text-color: var(--button-primary-text-color, #1a1a1a);
  --button-box-shadow: var(--button-primary-box-shadow);
  --button-border-width: 0px;
  border-width: var(--button-border-width);
}
.jpmmps [data-theme="brand"] .c-btn:hover,
.jpmmps [data-theme="brand"] .c-btn:focus {
  /* [17] */
  --button-border-color: var(--button-primary-border-color-hover);
  --button-background: var(
    --button-primary-background-hover,
    $brand-primary-color
  );
  --button-text-color: var(--button-primary-text-color-hover, #ffffff);
  --button-box-shadow: var(--button-primary-box-shadow-hover);
  outline: none;
}
.jpmmps label:focus-within [data-theme="brand"] .c-btn {
  /* [17] */
  --button-border-color: var(--button-primary-border-color-hover);
  --button-background: var(
    --button-primary-background-hover,
    $brand-primary-color
  );
  --button-text-color: var(--button-primary-text-color-hover, #ffffff);
  --button-box-shadow: var(--button-primary-box-shadow-hover);
  outline: none;
}
.jpmmps [data-theme="brand"] .c-btn[disabled],
.jpmmps [data-theme="brand"] .c-btn.is-disabled {
  --button-border-color: var(--button-primary-border-color-disabled);
  --button-background: var(--button-primary-background-disabled, $brand-muted);
  --button-text-color: var(--button-primary-text-color-disabled, #3e4547);
  --button-box-shadow: var(--button-primary-box-shadow-disabled);
}
.jpmmps [data-theme="brand"] .c-btn[disabled]:hover,
.jpmmps [data-theme="brand"] .c-btn[disabled]:focus {
  --button-border-color: var(--button-primary-border-color-disabled-hover);
  --button-background: var(--button-primary-background-disabled-hover);
  --button-text-color: var(--button-primary-text-color-disabled-hover);
  --button-box-shadow: var(--button-primary-box-shadow-disabled-hover);
}
.jpmmps [data-theme="brand"] .c-btn.is-disabled:hover,
.jpmmps [data-theme="brand"] .c-btn.is-disabled:focus {
  --button-border-color: var(--button-primary-border-color-disabled-hover);
  --button-background: var(--button-primary-background-disabled-hover);
  --button-text-color: var(--button-primary-text-color-disabled-hover);
  --button-box-shadow: var(--button-primary-box-shadow-disabled-hover);
}
.jpmmps [data-theme="brand"] .c-btn.c-btn--link {
  justify-content: flex-start;
  /* [15] */
}
.jpmmps [data-theme="brand"] .c-btn.c-btn--link:hover,
.jpmmps [data-theme="brand"] .c-btn.c-btn--link:focus {
  background: none;
  box-shadow: none;
}
.jpmmps [data-theme="brand"] .c-btn.c-btn--link .c-btn__text,
.jpmmps [data-theme="brand"] .c-btn.c-btn--link .c-btn__icon {
  color: #ffffff;
}
.jpmmps [data-theme="brand"] .c-btn.c-btn--link[disabled] .c-btn__text,
.jpmmps [data-theme="brand"] .c-btn.c-btn--link.is-disabled .c-btn__text,
.jpmmps [data-theme="brand"] .c-btn.c-btn--link[disabled] .c-btn__icon,
.jpmmps [data-theme="brand"] .c-btn.c-btn--link.is-disabled .c-btn__icon {
  color: #61656e;
}
.jpmmps [data-theme="brand"] .c-btn.c-btn--secondary {
  --button-border-color: $btn-secondary-border-color;
  --button-background: var(--button-secondary-background, #1a1a1a);
  --button-text-color: var(--button-secondary-text-color, #ffffff);
  --button-box-shadow: $btn-secondary-box-shadow;
  --button-border-width: 0;
  border-width: var(--button-border-width);
}
.jpmmps [data-theme="brand"] .c-btn.c-btn--secondary:hover,
.jpmmps [data-theme="brand"] .c-btn.c-btn--secondary:focus {
  /* [17] */
  --button-border-color: var(--button-secondary-border-color-hover);
  --button-background: var(--button-secondary-background-hover);
  --button-text-color: var(--button-secondary-text-color-hover);
  --button-box-shadow: var(
    --button-secondary-box-shadow-hover,
    inset 0 0 0 2px currentColor
  );
  outline: none;
}
.jpmmps label:focus-within [data-theme="brand"] .c-btn.c-btn--secondary {
  /* [17] */
  --button-border-color: var(--button-secondary-border-color-hover);
  --button-background: var(--button-secondary-background-hover);
  --button-text-color: var(--button-secondary-text-color-hover);
  --button-box-shadow: var(
    --button-secondary-box-shadow-hover,
    inset 0 0 0 2px currentColor
  );
  outline: none;
}
.jpmmps [data-theme="brand"] .c-btn.c-btn--secondary[disabled],
.jpmmps [data-theme="brand"] .c-btn.c-btn--secondary.is-disabled {
  --button-border-color: var(--button-secondary-border-color-disabled);
  --button-background: var(--button-secondary-background-disabled, #afb5ab);
  --button-text-color: var(--button-secondary-text-color-disabled, #3e4547);
  --button-box-shadow: var(--button-secondary-box-shadow-disabled, none);
}
.jpmmps [data-theme="brand"] .c-btn.c-btn--secondary[disabled]:hover,
.jpmmps [data-theme="brand"] .c-btn.c-btn--secondary[disabled]:focus {
  --button-border-color: var(--button-secondary-border-color-disabled-hover);
  --button-background: var(--button-secondary-background-disabled-hover);
  --button-text-color: var(--button-secondary-text-color-disabled-hover);
  --button-box-shadow: var(--button-secondary-box-shadow-disabled-hover);
}
.jpmmps [data-theme="brand"] .c-btn.c-btn--secondary.is-disabled:hover,
.jpmmps [data-theme="brand"] .c-btn.c-btn--secondary.is-disabled:focus {
  --button-border-color: var(--button-secondary-border-color-disabled-hover);
  --button-background: var(--button-secondary-background-disabled-hover);
  --button-text-color: var(--button-secondary-text-color-disabled-hover);
  --button-box-shadow: var(--button-secondary-box-shadow-disabled-hover);
}
.jpmmps [data-theme="brand"] .c-btn.c-btn--secondary.c-btn--link {
  justify-content: flex-start;
  /* [15] */
}
.jpmmps [data-theme="brand"] .c-btn.c-btn--secondary.c-btn--link:hover,
.jpmmps [data-theme="brand"] .c-btn.c-btn--secondary.c-btn--link:focus {
  background: none;
  box-shadow: none;
}
.jpmmps [data-theme="brand"] .c-btn.c-btn--secondary.c-btn--link .c-btn__text,
.jpmmps [data-theme="brand"] .c-btn.c-btn--secondary.c-btn--link .c-btn__icon {
  color: #ffffff;
}
.jpmmps [data-theme="brand"] .c-btn.c-btn--action {
  --button-border-color: var(--button-action-border-color);
  --button-background: var(--button-action-background, #3e4547);
  --button-text-color: var(--button-action-text-color, #ffffff);
  --button-box-shadow: var(--button-action-box-shadow, 0 0 0 1px #ffffff);
  --button-padding-horizontal: calc(var(--button-height) / 2);
  border-width: var(--button-border-width);
}
.jpmmps [data-theme="brand"] .c-btn.c-btn--action:hover,
.jpmmps [data-theme="brand"] .c-btn.c-btn--action:focus {
  /* [17] */
  --button-border-color: var(--button-action-border-color-hover);
  --button-background: var(--button-action-background-hover, #187085);
  --button-text-color: var(--button-action-text-color-hover, #ffffff);
  --button-box-shadow: var(--button-action-box-shadow-hover);
  outline: none;
}
.jpmmps [data-theme="brand"] .c-btn.c-btn--action[disabled],
.jpmmps [data-theme="brand"] .c-btn.c-btn--action.is-disabled {
  --button-border-color: var(--button-action-border-color-disabled);
  --button-background: var(--button-action-background-disabled, #afb5ab);
  --button-text-color: var(--button-action-text-color-disabled, #3e4547);
  --button-box-shadow: var(--button-action-box-shadow-disabled);
}
.jpmmps [data-theme="brand"] .c-btn.c-btn--action[disabled]:hover,
.jpmmps [data-theme="brand"] .c-btn.c-btn--action[disabled]:focus {
  --button-border-color: var(--button-action-border-color-disabled-hover);
  --button-background: var(--button-action-background-disabled-hover);
  --button-text-color: var(--button-action-text-color-disabled-hover);
  --button-box-shadow: var(--button-action-box-shadow-disabled-hover);
}
.jpmmps [data-theme="brand"] .c-btn.c-btn--action.is-disabled:hover,
.jpmmps [data-theme="brand"] .c-btn.c-btn--action.is-disabled:focus {
  --button-border-color: var(--button-action-border-color-disabled-hover);
  --button-background: var(--button-action-background-disabled-hover);
  --button-text-color: var(--button-action-text-color-disabled-hover);
  --button-box-shadow: var(--button-action-box-shadow-disabled-hover);
}
.jpmmps .c-btn[disabled],
.jpmmps .c-btn.is-disabled {
  pointer-events: none;
  cursor: default;
}
.jpmmps .c-btn.c-btn--full {
  width: 100%;
  color: #000000;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
}
.jpmmps .c-btn.c-btn--link.c-btn--link.c-btn--link {
  /* [20] */
  min-height: auto;
  background-color: transparent;
  width: 100% !important;
  /* [13] */
  color: #161616;
  padding: 0px 32px !important;
  height: 48px !important;
  margin: 5px auto !important;
  box-shadow: none !important;
  text-transform: uppercase;
  border: none !important;
  box-shadow: none;
}
.jpmmps .c-btn__text:not(:last-child) {
  margin-right: var(--button-text-icon-spacing);
}
.jpmmps .c-btn__text:last-child:not(:only-child) {
  margin-left: var(--button-text-icon-spacing);
}
.jpmmps .c-btn.c-btn--full .c-btn__text {
  display: block;
  /* [8] */
  margin-right: auto;
  /* [8] */
  margin-left: auto;
  /* [8] */
}
.jpmmps .c-btn.c-btn--link .c-btn__text {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  text-transform: none;
}

/* ------------------------------------*\
     #PAYPAL BUTTON
 \*------------------------------------ */
.paypal-button {
  text-align: center;
  --button-padding-horizontal: 32px;
  --button-padding-vertical: 0;
  margin: 5px 0px;
}

/* ------------------------------------*\
     #SECTION-HEADINGS
 \*------------------------------------ */
/**
  * [1] Reset margin bottom for text and manage it over
  *     `$section-headings-spacing-bottom` on `.c-section-heading`.
  */
.jpmmps .c-section-heading {
  margin-bottom: 32px;
}
.jpmmps .c-section-heading.c-section-heading--center {
  text-align: center;
}
.jpmmps .c-section-heading.c-section-heading--center .c-section-heading__title {
  justify-content: center;
}
.jpmmps .c-section-heading.c-section-heading--small {
  margin-bottom: 24px;
}
.jpmmps .c-section-heading.c-section-heading--small-spacing {
  margin-bottom: 24px;
}
.jpmmps .c-section-heading__icon {
  font-size: calc(2.25 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  line-height: 1;
  margin-right: 16px;
  color: #1a1a1a;
}
.jpmmps .c-section-heading__title {
  font-size: calc(1.625 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  line-height: 1.2;
  margin-bottom: 0;
  font-weight: 700;
  color: #1a1a1a;
}
.jpmmps .c-section-heading--primary .c-section-heading__title {
  font-size: calc(2.125 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  line-height: 1.2;
  margin-bottom: 24px;
  padding-bottom: 24px;
}
.jpmmps .c-section-heading--subtitle .c-section-heading__title {
  margin-bottom: 24px;
}
.jpmmps .c-section-heading__subtitle {
  font-size: calc(1 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  margin-bottom: 0;
  /* [1] */
  color: #1a1a1a;
}

@media (min-width: 721px) {
  .jpmmps .c-section-heading__title {
    font-size: calc(1.875 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
    line-height: 1.2;
  }
  .jpmmps .c-section-heading--primary .c-section-heading__title {
    font-size: calc(3 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
    line-height: 1.2;
  }
}
/* ------------------------------------*\
    #INPUT-TEXT
\*------------------------------------ */
/**
 * [1] Allow us to style box model properties.
 * [2] Line different sized inputs up a little nicer.
 * [3] Only change border for non-background addons.
 * [4] If the input has rounded borders, the fake line's `width` must have the
 *     same value as the `border-radius` to totally cover the border. The
 *     input's border must be replaced by a border attached to the fake line.
 * [5] Set minimum width for addon to have equal size
 *     up to a certain amount of content.
 * [6] Reset default label spacing.
 * [7] Border-depends on the position of symbol.
 * [8] Control position of addon via CSS - not markup order.
 * [9] Set input height (minus vertical borders).
 * [10] Reset default button-style.
 * [11] Chrome needs a reset appearance, otherwise it sets a default
 *      border-radius, in case it's a `<select>`.
 * [12] Textareas must not get a fixed height and a corresponding line-height...
 * [13] ...but instead get a custom padding-top and -bottom to offset the text
 *      content from the top edge of the textarea.
 * [14] Defensively reset border-radius.
 * [15] Create complete border-radius when there is no `.c-input__addon`.
 * [16] Perfectly align the icon inside of `.c-input__addon`.
 * [17] When the input is a `<select>`, the addon is taken out of the documents
 *      flow, so the border-radius needs to be set explicitly here.
 * [18] Since the the icon is laying on top of the select, a click on the arrow
 *      has to be ignored and looped through to the select itself.
 * [19] If it's a `<select>`, don't let long select input text overflow the
 *      dropdown arrow.
 * [20] Vertical center the icon.
 * [21] Firefox won't hide its dotted outline on focus on select elements. This
 *      fixes it. Be aware: Although it works, it's still a hack!
 * [22] Reset styles of input and `.c-input__addon` for readonly state to
 *      prevent focus styles from being used here.
 * [23] Reset styles of input and `.c-input__addon` for disabled state to
 *      prevent default styles from being used here
 * [24] Prevent IE 11 and Edge from showing a browser default cross icon to clear
 *      the text input.
 * [25] Fixes Firefox issue. Firefox grows the input when an input addon is
 *      present. `min-width: 0` fixes that issue. (https://github.com/philipwalton/flexbugs/tree/38fdbe408e2ae6dcf32bff1e29db41c6ab964f55#flexbug-1)
 * [26] When the dropdown icon is hidden at disabled state, stack the select
 *      above the dropdown. This is done as there is no way
 *      (due to missing parent selector) to select the icon (pseudo element on parent)
 *      when the select is disabled.
 * [27] Inherit the color assigned to `.c-input__addon` instead of applying the
 *      default icon color.
 * [28] Explicitly override the border width if text inputs only have a
 *      `border-bottom`. Due to a lack of specificity, the border has to be
 *      reset for the reversed modifier explicitly.
 * [29] Check if textareas should be included in the border-bottom-only
 *      styling and modify the selector accordingly.
 * [30] Add horizontal padding to textareas if they don’t have
 *      border-bottom-only styling.
 * [31] The fake line to cover the border between input and addon is not needed
 *      in JPMMPS-Audi, because there is not border to cover.
 * [32] Required to display the border color correct on iOS.
 * [33] Enable flex wrap to allow positioning of the character counter below
 *      textareas.
 * [34] Fix positioning of (non-textarea) input fields (with addon) because
 *      of [33].
 * [35] Stretch the counter to full width to ensure it will be displayed below
 *      textarea.
 * [35] Hide counter for disabled and read-only input fields.
 * [37] Styles for the counter alert state.
 * [38] Requires state-class to be applied to input wrapper (`.c-input`)
 *      instead of actual input. This derives on how state classes are
 *      set on other types of inputs.
 *      But due to the limited styling possibilities of native select,
 *      this is a workaround and can be seen as "progressive enhancement".
 * [39] Conditionally show state icon. Depending on brand e.g. the state-icon
 *      for invalid (error) inputs do not have a state-icon but an error message.
 * [40] Overwrite default `transition-property: all` only when `$input-border-width-focus`
 *      is larger than `$input-border-width` to avoid choppy animations due
 *      `border-width` transitions.
 * [41] Use the same transition for all direct children (e.g. `.c-input__addon`)
 * [42] Align color and font-weight settings according to Combobox styles
 *      as progressive enhancement, which is currently not supported by all
 *      browsers, see also: https://caniuse.com/css-has).
 * [43] Ensure correct option text color (for browsers that support setting
 *      option colors via CSS), prevent inheritance from `<select>`.
 */
.jpmmps .c-input {
  /* stylelint-disable order/order */
  --transition-property: all;
  --transition-duration: var(--transition-duration-reduced-motion, 250ms);
  --transition-timing-function: ease;
  --transition-delay: 0;
  transition-property: var(--transition-property);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-delay: var(--transition-delay);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  /* [33] */
}
.jpmmps .c-input > * {
  transition: inherit;
  /* [41] */
}
.jpmmps .c-input.c-input--select {
  /* [38] */
}
.jpmmps .c-input.c-input--select::after {
  display: inline-block;
  font-family: "jpmmps-generic" !important;
  /* [1] */
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  font-variant: normal;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: calc(1.5 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  content: "\f139";
  position: absolute;
  top: 50%;
  /* [20] */
  right: 16px;
  transform: translateY(-50%);
  /* [20] */
  border: 0;
  color: #1a1a1a;
  pointer-events: none;
  /* [18] */
}
.jpmmps .c-input.c-input--select.is-disabled::after {
  color: rgba(26, 26, 26, 0.5);
}
.jpmmps .c-input.c-input--select .c-input__input {
  /* stylelint-disable selector-max-specificity */
  /* stylelint-enable */
}
.jpmmps .c-input.c-input--select .c-input__input:has(:disabled:checked) {
  font-weight: 400;
  /* [42] */
  color: #afb5ab;
  /* [42] */
}
.jpmmps .c-input.c-input--select .c-input__input:-moz-focusring {
  color: transparent;
  /* [21] */
  text-shadow: 0 0 0 #1a1a1a;
  /* [21] */
}
.jpmmps .c-input.c-input--select .c-input__input::-ms-expand {
  display: none;
  /* [26] */
}
.jpmmps .c-input.c-input--select option {
  color: #1a1a1a;
  /* [43] */
}
.jpmmps .c-input.c-input--select option:disabled {
  color: rgba(26, 26, 26, 0.5);
}
.jpmmps .c-input .c-icon {
  font-size: calc(1.5 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  line-height: 1;
  vertical-align: middle;
}
.jpmmps .c-input__input {
  flex-grow: 1;
  /* [34] */
  flex-shrink: 1;
  /* [34] */
  flex-basis: 0;
  /* [34] */
  width: 100%;
  min-width: 0;
  /* [25] */
  padding: 0 16px;
  border: 1px solid #495651;
  border-radius: 0;
  /* [14] */
  font-weight: 400;
  background: #ffffff;
  color: #1a1a1a;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  /* [11] */
}
.jpmmps .c-input__input:not(textarea) {
  font-size: calc(1 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  line-height: 48px;
  /* [12] */
  height: 48px;
  /* [12] */
}
.jpmmps textarea.c-input__input {
  font-size: calc(1 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  line-height: 24px;
  flex-basis: auto;
  /* [34] */
  padding-top: 16px;
  /* [13] */
  padding-bottom: 16px;
  /* [13] */
}
.jpmmps select.c-input__input {
  border-top-right-radius: 0;
  /* [17] */
  border-bottom-right-radius: 0;
  /* [17] */
}
.jpmmps .c-input--select .c-input__input {
  padding-right: 56px;
  /* [19] */
}
.jpmmps .c-input--reversed .c-input__input {
  border-right: 1px solid #495651;
  border-left: 0;
  /* [7] */
}
.jpmmps .c-input__input::placeholder {
  font-weight: 400;
  opacity: 1;
}
.jpmmps .c-input__input::-ms-clear {
  display: none;
  /* [24] */
}
.jpmmps .c-input__input:hover {
  border-color: #187085;
}
.jpmmps .c-input__input:hover ~ .c-input__addon {
  border-color: #187085;
  /* [3] */
}
.jpmmps .c-input__input:focus,
.jpmmps .c-input__input:focus-visible {
  border-color: #187085;
  outline: none;
}
.jpmmps .c-input__input:focus ~ .c-input__addon,
.jpmmps .c-input__input:focus-visible ~ .c-input__addon {
  border-color: #187085;
}
.jpmmps .c-input__input.is-disabled,
.jpmmps .c-input__input[disabled] {
  border-color: #afb5ab;
  background-color: #f2f2f2;
  color: #afb5ab;
  pointer-events: none;
  cursor: default;
  -webkit-text-fill-color: #afb5ab;
  opacity: 1;
  /* [32] */
}
.jpmmps .c-input__input.is-disabled ~ .c-input__addon,
.jpmmps .c-input__input[disabled] ~ .c-input__addon {
  border-color: #afb5ab !important;
  /* [23] */
  /* stylelint-disable-line itcss/no-at-important */
  background-color: #f2f2f2;
  /* [23] */
  color: rgba(26, 26, 26, 0.5);
  /* [23] */
  pointer-events: none;
  cursor: default;
  /* stylelint-disable-next-line selector-max-class */
}
.jpmmps
  .c-input__input.is-disabled
  ~ .c-input__addon:not(.c-input__addon--no-background),
.jpmmps
  .c-input__input[disabled]
  ~ .c-input__addon:not(.c-input__addon--no-background) {
  background-color: #afb5ab;
  /* [23] */
  color: rgba(26, 26, 26, 0.5);
  /* [23] */
}
.jpmmps
  .c-input__input.is-disabled
  ~ .c-input__addon.c-input__addon--no-background,
.jpmmps
  .c-input__input[disabled]
  ~ .c-input__addon.c-input__addon--no-background {
  color: rgba(26, 26, 26, 0.5);
}
.jpmmps .c-input__input.is-readonly,
.jpmmps .c-input__input[readonly] {
  border-color: #afb5ab;
  background-color: #ffffff;
  color: #1a1a1a;
  pointer-events: none;
  cursor: default;
  -webkit-text-fill-color: #1a1a1a;
}
.jpmmps .c-input__input.is-readonly ~ .c-input__addon,
.jpmmps .c-input__input[readonly] ~ .c-input__addon {
  border-color: #afb5ab;
  /* [22] */
  background-color: #ffffff;
  /* [22] */
  color: #1a1a1a;
  /* [22] */
  pointer-events: none;
  cursor: default;
}
.jpmmps
  .c-input__input.is-readonly
  ~ .c-input__addon:not(.c-input__addon--no-background),
.jpmmps
  .c-input__input[readonly]
  ~ .c-input__addon:not(.c-input__addon--no-background) {
  background-color: #afb5ab;
  /* [22] */
}
.jpmmps .c-input__input.is-readonly:focus,
.jpmmps .c-input__input[readonly]:focus,
.jpmmps .c-input__input.is-readonly:focus ~ .c-input__addon,
.jpmmps .c-input__input[readonly]:focus ~ .c-input__addon {
  border-color: #afb5ab;
  /* [22] */
}
.jpmmps .c-input__input.is-error {
  border-color: #ba2525 !important;
  color: #1a1a1a;
}
.jpmmps .c-input__input.is-error ~ .c-input__addon,
.jpmmps .c-input__input.is-error ~ .c-input__state-icon {
  border-color: #ba2525;
  color: #1a1a1a;
  /* stylelint-disable-next-line selector-max-class */
}
.jpmmps
  .c-input__input.is-error
  ~ .c-input__addon.c-input__addon--no-background,
.jpmmps
  .c-input__input.is-error
  ~ .c-input__state-icon.c-input__addon--no-background {
  color: #ba2525;
}
.jpmmps .c-input__input.is-error:focus ~ .c-input__addon,
.jpmmps .c-input__input.is-error:focus ~ .c-input__state-icon {
  border-color: #ba2525;
}
.jpmmps .c-input__input.is-error:hover {
  border-color: #ba2525;
}
.jpmmps .c-input__input.is-error:hover ~ .c-input__addon,
.jpmmps .c-input__input.is-error:hover ~ .c-input__state-icon {
  border-color: #ba2525;
}
.jpmmps .c-input__input.is-success {
  border-color: #00783c !important;
  color: #1a1a1a;
}
.jpmmps .c-input__input.is-success ~ .c-input__addon,
.jpmmps .c-input__input.is-success ~ .c-input__state-icon {
  border-color: #00783c;
  color: #1a1a1a;
  /* stylelint-disable-next-line selector-max-class */
}
.jpmmps
  .c-input__input.is-success
  ~ .c-input__addon.c-input__addon--no-background,
.jpmmps
  .c-input__input.is-success
  ~ .c-input__state-icon.c-input__addon--no-background {
  color: #00783c;
}
.jpmmps .c-input__input.is-success:focus ~ .c-input__addon,
.jpmmps .c-input__input.is-success:focus ~ .c-input__state-icon {
  border-color: #00783c;
}
.jpmmps .c-input__input.is-success:hover {
  border-color: #00783c;
}
.jpmmps .c-input__input.is-success:hover ~ .c-input__addon,
.jpmmps .c-input__input.is-success:hover ~ .c-input__state-icon {
  border-color: #00783c;
}
.jpmmps .c-input__addon {
  font-size: calc(1 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  line-height: 1;
  position: relative;
  display: flex;
  /* [16] */
  align-items: center;
  /* [16] */
  justify-content: center;
  /* [16] */
  order: 5;
  /* [8] */
  margin-bottom: 0;
  /* [6] */
  padding-right: 16px;
  padding-left: 16px;
  border: 1px solid #495651;
  /* [7] */
  border-left: 0;
  /* [7] */
  text-align: center;
  background-color: #f2f2f2;
  color: #1a1a1a;
  /**
  * Modify fake line to cover up border between input and addon
  * when `.c-input--reversed` modifier is used.
  */
}
.jpmmps .c-input__addon:not(.c-input__addon--no-background) {
  min-width: 42px;
  /* [5] */
}
.jpmmps .c-input__addon .c-icon {
  color: inherit;
  /* [27] */
}
.jpmmps .c-input--reversed .c-input__addon {
  order: -5;
  /* [8] */
  border: 1px solid #495651;
  /* [7] */
  border-right: 0;
  /* [7] */
}
.jpmmps .c-input--reversed .c-input__addon::before {
  right: auto;
  left: 100%;
}
.jpmmps button.c-input__addon {
  padding-top: 0;
  /* [10] */
  padding-bottom: 0;
  /* [10] */
  -webkit-appearance: none;
  appearance: none;
  /* [10] */
  cursor: pointer;
}
.jpmmps button.c-input__addon:focus {
  outline: 0;
  /* [10] */
}
.jpmmps .c-input__addon--no-background {
  position: relative;
  background-color: #ffffff;
  color: #1a1a1a;
}
.jpmmps .c-input__state-icon {
  display: inline-block;
  font-family: "jpmmps-generic" !important;
  /* [1] */
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  /* [9] */
  font-size: calc(1.5 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  line-height: 46px;
  position: relative;
  padding-right: 16px;
  padding-left: 16px;
  border: 1px solid #495651;
  background: #ffffff;
  /* stylelint-disable-next-line order/order */
  /**
  * Modify fake line to cover up the ROUNDED border between input and state icon.
  */
}
.jpmmps .c-input--reversed .c-input__state-icon,
.jpmmps .c-input__state-icon:last-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.jpmmps .c-input__input.is-error ~ .c-input__state-icon {
  border-color: #ba2525;
  color: #ba2525;
}
.jpmmps .c-input__input.is-error ~ .c-input__state-icon::after {
  content: "\f169";
}
.jpmmps .c-input__input.is-success ~ .c-input__state-icon {
  border-color: #00783c;
  color: #00783c;
}
.jpmmps .c-input__input.is-success ~ .c-input__state-icon::after {
  content: "\f135";
}
.jpmmps .c-input__input ~ .c-input__counter {
  margin-top: 2px;
}
.jpmmps .c-input__input.is-disabled + .c-input__counter,
.jpmmps .c-input__input[disabled] + .c-input__counter,
.jpmmps .c-input__input.is-readonly + .c-input__counter,
.jpmmps .c-input__input[readonly] + .c-input__counter {
  display: none;
  /* [35] */
}
.jpmmps .c-input__counter--alert {
  /* [37] */
  color: #ba2525;
}

/* ------------------------------------*\
    #INPUT-TEXT inside popups
\*------------------------------------ */
/*
****
Popup to pay at saved payments
***
*/
.wpwl-form {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.wpwl-registration {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: row;
}

.wpwl-group-registration {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
}
.wpwl-group-registration.wpwl-selected {
  margin: 14px 0px;
  border-color: #ced2d9 !important;
  border-style: solid !important;
  border-width: 1px !important;
}

.wpwl-wrapper-registration-details {
  display: flex;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  color: #161616;
  font-size: 16px;
  white-space: nowrap;
}

.wpwl-control {
  background-color: #ffffff;
  border-radius: 16px !important;
  font-family: "Open Sans", "Arial", sans-serif !important;
  height: 45px !important;
  padding: 0 10px;
  border: none;
  border: 1px solid #161616;
}
.wpwl-control:focus {
  border: 2px solid #161616;
}

.c-error-message {
  color: #61656e;
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  font-family: "Open Sans", "Arial", sans-serif !important;
}

.wpwl-hint {
  color: #61656e;
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  font-family: "Open Sans", "Arial", sans-serif !important;
}

::-webkit-input-placeholder {
  color: #61656e !important;
  font-size: 16px !important;
  font-family: "Open Sans", "Arial", sans-serif !important;
}

.IFRAME_STYLE_1 {
  background-color: transparent !important;
}

.wpwl-has-error {
  color: #161616 !important;
  background-color: #fedcd9 !important;
  border-color: #e32b16 !important;
  font-family: "Open Sans", "Arial", sans-serif !important;
}
.wpwl-has-error:hover {
  background-color: #fdc3bd !important;
}
.wpwl-has-error:focus {
  background-color: #fdc3bd !important;
}

.wpwl-label {
  color: #161616;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 400;
}

/* -------------------*/
/* -------------------*/
.wpwl-button {
  --button-height: 48px;
  height: 48px;
  width: 100% !important;
  --button-padding-horizontal: 32px;
  --button-padding-vertical: 0;
  margin: 5px 0px;
  /* [10] */
  --button-icon-size: 16px;
  --button-text-icon-spacing: 8px;
  /* stylelint-disable-line length-zero-no-unit */
  font-size: 16px;
  /* stylelint-disable order/order */
  --transition-property: all;
  --transition-duration: var(--transition-duration-reduced-motion, 250ms);
  --transition-timing-function: ease;
  --transition-delay: 0;
  transition-property: var(--transition-property);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-delay: var(--transition-delay);
  display: inline-flex;
  /* [1] */
  align-items: center;
  /* [2] */
  justify-content: center;
  /* [2] */
  flex-direction: var(--button-flex-direction, row);
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  border-color: #ffffff;
  border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  text-decoration: none;
  text-transform: none;
  line-height: 24px;
  text-align: center;
  /* [4] */
  vertical-align: middle;
  background-color: #ffdc00;
  color: #000000;
  box-shadow: none;
  cursor: pointer;
  /* [3] */
  min-height: 48px;
  border-width: 0;
  /* [11] */
  --button-border-color: #ffffff;
  --button-background: #ffdc00;
  --button-text-color: #000000;
  --button-box-shadow: none;
  --button-border-width: 0;
  border-width: 0;
  text-transform: uppercase;
}
.wpwl-button:hover.c-btn--link.c-btn--small.u-mt {
  background-color: #e6e6e6 !important;
}
.wpwl-button:hover .c-btntext {
  color: #000000 !important;
}
.wpwl-button:hover.c-btntext {
  color: #000000 !important;
}
.wpwl-button:hover .c-btn__text {
  text-decoration-line: none;
}
.wpwl-button:hover,
.wpwl-button:focus {
  /* [17] */
  border-color: 0;
  border-width: 0;
  background: #f0cf00;
  box-shadow: none;
  outline: none;
}

/* ------------------------------------*\
    #ERROR-MESSAGE
\*------------------------------------ */
.jpmmps .c-error-message {
  color: #61656e;
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  font-family: "Open Sans", "Arial", sans-serif !important;
}
.jpmmps .c-error-message:empty {
  display: none;
}
.jpmmps .c-error-message:-moz-only-whitespace {
  display: none;
}
.jpmmps .c-error-message a {
  color: currentColor;
}

/* ------------------------------------*\
    #FOOTNOTES
\*------------------------------------ */
/**
 * [1] Define * as default content.
 * [3] Show data-bullet instead of default character, if attribute
 *     data-footnote-bullet is given.
 * [4] Overwrite default `<li>` margin.
 */
.jpmmps .c-footnotes {
  font-size: calc(0.8125 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
  padding-left: 16px;
  counter-reset: footnotes-raised-counter;
  color: #1a1a1a;
}
.jpmmps .c-footnotes li {
  display: block;
  margin-bottom: 0;
}
.jpmmps .c-footnotes__item,
.jpmmps .c-footnotes li {
  position: relative;
  margin-bottom: 0;
  /* [4] */
}
.jpmmps .c-footnotes__item::before,
.jpmmps .c-footnotes li::before {
  /* [1] */
  content: "*";
  position: absolute;
  left: -16px;
  font-size: 0.8em;
}
.jpmmps ol.c-footnotes .c-footnotes__item::before,
.jpmmps ol.c-footnotes > li::before {
  content: counter(footnotes-raised-counter);
  font-size: 0.8em;
  counter-increment: footnotes-raised-counter;
}
.jpmmps ul.c-footnotes {
  /* [3] */
}
.jpmmps ul.c-footnotes .c-footnotes__item[data-footnote-bullet]::before,
.jpmmps ul.c-footnotes > li[data-footnote-bullet]::before {
  content: attr(data-footnote-bullet);
}

/* ------------------------------------*\
   #TABLES (Settings)
\*------------------------------------ */
/* ------------------------------------*\
    #TABLES
\*------------------------------------ */
/* stylelint-disable-line length-zero-no-unit */
/* stylelint-disable-line length-zero-no-unit */
/*
 * [1] Use pseudo elements for horizontal table cell borders (`::before` for the
 *     top border and `::after` for the bottom border) to allow visual spacing
 *     between columns without the side effects that you have with
 *     `border-spacing`.
 * [2] Tables are always full-width by default.
 * [3] Set all columns to an equal width for the fixed width table variant.
 * [4] To make sure the styling of first row is correct when not using `<thead>`
 *     element, as well as when `<thead>` is correctly used.
 * [5] Provide a simple responsive table mechanism by just enabling horizontal
 *     scrolling below a specific breakpoint.
 * [6] Let the auto-width table be wide/narrow as it is.
 * [7] Auto tables are not full-width.
 * [8] Ensure that table is centered.
 * [9] Each column can be as wide as their content.
 * [10] Remove default spacing bottom.
 * [11] Make sure to add a bottom spacing if there is some content following
 *      the table.
 * [12] Styles for sortables in the table header.
 * [14] Keep icon and text combination inline in the data control table.
 * [15] Overwrite the border and spacing settings for buttons.
 * [16] Apply the highlight variant style to certain columns.
 * [17] Wrap text and possible inline elements in `<span>` because of parent's
 *      flex setting. Left empty here for documentation and prospective usage.
 * [18] Table modifier for wide and narrow variants.
 * [19] Collapse cell borders to eliminate visible space between cell borders.
 * [20] Set overflow to `visible` to allow sticky positioning in the first
 *      place.
 * [21] Cover the following rows with the cells of the head row.
 *      `z-index` should be larger than the `z-index` of the disabled rows
 *      overlay ([55]).
 * [22] Cover the following columns with the cells of the first column.
 * [23] Cover the following columns with the first `thead` cell if the table has
 *      sticky a head row and a sticky first column.
 * [24] For zebra style tables inherit the background color of the table row.
 * [25] Do not render a left border on any first children in the top-most rows.
 * [26] Enables borders styles for merged cells.
 * [27] Unused, for prospective future usage and avoid BEM errors.
 * [28] Flex helper to align multiple content inside a cell.
 * [29] Provide the required minimum height for each cell.
 * [30] Cell icon colors differ across brands in color and need scoping in
 *      `thead` and `tbody`.
 * [31] Increase specificity because of high `.c-button` specificity.
 * [32] Ascending and descending sort icons.
 * [33] Increase specificity and exclude `.c-info-icon` and `.c-badge__icon`
 *      from table icon styling.
 * [34] Avoid borders being cutoff if table gets scrollable.
 * [35] Disable all pointer-events to prevent hover-styles for table cell and
 *      row elements only.
 * [36] Re-enable all pointer-events for all table elements that are not
 *      affected via [35].
 * [37] Responsive variant: Increase specificity to be able to override
 *      `min-width` that is being used for the more simple responsive overscroll
 *      effect.
 * [38] Responsive variant: reset `min-width`.
 * [39] Responsive variant: Set all table elements to `display: block`. Note
 *      that the roles of the individual elements must be restored with
 *      aria-roles attributes for accessibility reasons.
 * [40] Responsive variant: Hide `thead` in an accessible way so that users can
 *      still access all content in it with assistive technologies.
 * [41] Responsive variant: Reset some `th`/`td` styles.
 * [42] Responsive variant: Hide bottom border of the last cell in a `tr`.
 * [43] Responsive variant: `[data-columnheader]` is used to repeat the column
 *      header before each cell as pseudo element.
 * [44] Responsive variant: Display the value of `[data-columnheader]` before
 *      each cell as a pseudo element.
 * [45] Responsive variant: Set position to `static` to reset absolute
 *      positioning that is needed for horizontal borders in larger viewports.
 *      See [1].
 * [46] Responsive variant: Enable hyphenation for column headers before each
 *      cell, as there often is not enough width for longer words, especially
 *      in small viewports.
 * [47] Responsive variant: If a background color is set for the responsive
 *      column header, the header should be displayed over the entire row height.
 * [48] Responsive variant: Use CSS grid in modern browsers to layout the
 *      column header and cells side by side.
 * [49] Responsive variant: Disable background color change on hover.
 * [50] Responsive variant: To make sure that really only the first `th` in a
 *      row is used as row header, we use the `:first-child` pseudo class.
 * [51] Responsive variant: Add spacing and border between `tr`s.
 * [52] Inherit `color` so that the color of the root element is not used in
 *      scoped JPMMPS styles.
 * [53] Optional height for table head.
 * [54] Optionally all styles for pseudo element can be reset via `all: unset`.
 * [55] Add overlay via pseudo element for disabled rows and cells.
 * [56] Make sure the overlay aligns with table borders and column spacings.
 * [57] Add background color with opacity via pseudo element for disabled
 *      rows and cells.
 * [58] Spacing when overlay is used for `is-disabled` or `[aria-disabled]=true`
 *      and `$table-column-spacing` is set.
 * [59] Position the sticky head row or first column to `-1px` (top/left) to
 *      recognize its sticky state via Intersection Observer.
 * [60] Gradients to make a sticky head row or first column stand out.
 * [61] `.has-sticky-head` is set via JS when the head row is sticky.
 * [62] `.has-sticky-column` is set via JS when the first column is sticky.
 * [63] By using CSS custom properties for some properties, we can set and use
 *      these properties more easily in certain contexts.
 *      For example, in sticky row and column states.
 * [64] Fade the shadow in and out smoothly via opacity transition.
 * [65] For brands that have `$table-thead-border-top-width` we can’t set a
 *      shadow for a sticky column in `thead` because `::before` is already
 *      used for the top border.
 */
.jpmmps {
  /**
  .c-table--narrow {
      /* [18] */
}
.jpmmps
  .c-table-wrapper
  .c-icon.c-icon.c-icon:not(.c-info-icon):not(.c-badge__icon) {
  /* [33] */
  /* stylelint-disable-line selector-max-class, selector-max-specificity */
  font-size: 13px;
  line-height: 1;
  padding: 4px;
}
.jpmmps .c-table-wrapper:not(:last-child) {
  margin-bottom: 24px;
  /* [11] */
}
.jpmmps .c-table-wrapper.c-table-wrapper--auto {
  width: auto;
  /* [6] */
}
.jpmmps .c-table-wrapper th,
.jpmmps .c-table-wrapper td {
  position: relative;
  /* [1] */
  padding: 8px 16px;
  font-size: 16px;
  line-height: 1.2;
  text-align: left;
  /* [1] */
}
.jpmmps .c-table-wrapper th::before,
.jpmmps .c-table-wrapper th::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
}
.jpmmps .c-table-wrapper td::before,
.jpmmps .c-table-wrapper td::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
}
.jpmmps .c-table-wrapper th::before,
.jpmmps .c-table-wrapper td::before {
  top: 0;
}
.jpmmps .c-table-wrapper th::after,
.jpmmps .c-table-wrapper td::after {
  bottom: 0;
}
.jpmmps .c-table-wrapper th {
  vertical-align: middle;
  color: var(--table-cell-color, #000000);
}
.jpmmps .c-table-wrapper th .c-icon:not(.c-info-icon)::before {
  color: #1a1a1a;
  /* [30] */
}
.jpmmps .c-table-wrapper td {
  height: 32px;
  /* [29] */
  vertical-align: middle;
  color: var(--table-cell-color, #000000);
}
.jpmmps .c-table-wrapper table {
  width: 100%;
  /* [2] */
  margin-bottom: 0;
  /* [19] */
  color: inherit;
  border-style: solid;
  border-width: 1px;
  border-color: #ced2d9;
  margin: 14px 0px;
}
.jpmmps .c-table-wrapper table .c-tag {
  background-color: #d8d8dc;
  border-width: 0px;
  border-color: transparent;
  border-style: solid;
  border-radius: 100px;
  padding: 2px 8px;
  color: #000000;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}
.jpmmps .c-table-wrapper table .c-tag__label {
  font-weight: 400;
  font-size: 12px;
}
.jpmmps .c-table-wrapper table .icons-cell .smartpay-card-icons {
  display: flex;
  gap: 4px;
  width: 75px;
  flex-wrap: wrap;
}
.jpmmps .c-table-wrapper table .icon-cell img {
  min-width: 35px;
}
.jpmmps .c-table-wrapper table .checkmark-cell {
  min-width: 50px;
}
.jpmmps .c-table-wrapper table .empty-stored-payments.c-list-ui {
  padding: 0 20px;
}
.jpmmps .c-table-wrapper table .name-cell .u-text-brand {
  color: #161616 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 28.8px;
  letter-spacing: 0;
}
.jpmmps .c-table-wrapper table i.u-text-brand {
  font-size: 20.8px !important;
  color: #000000 !important;
}
.jpmmps .c-table-wrapper table .name-cell .u-text-muted {
  font-size: 16px !important;
  font-weight: 400;
  line-height: 28.8px;
  letter-spacing: 0;
}
.jpmmps .c-table-wrapper--auto table {
  width: auto;
  /* [7] */
  margin-right: auto;
  /* [8] */
  margin-left: auto;
  /* [8] */
  table-layout: auto;
  /* [9] */
}
.jpmmps .c-table-wrapper * {
  line-height: 28.8px;
  font-weight: 400;
}
.jpmmps .c-table-wrapper table {
  border-collapse: collapse;
  border-color: #ced2d9 !important;
  border-style: solid !important;
  margin: 14px 0px;
  border-width: 1px !important;
}
.jpmmps .c-table-wrapper table .u-text-brand {
  text-align: left;
  color: #161616 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 28.8px;
  letter-spacing: 0;
}
.jpmmps .c-table-wrapper table caption {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
.jpmmps .c-table-wrapper table :not(thead) + tbody tr:first-child th,
.jpmmps .c-table-wrapper table :not(thead) + tbody tr:first-child td {
  vertical-align: middle;
  color: #000000;
}
.jpmmps .c-table-wrapper table thead th,
.jpmmps .c-table-wrapper table thead td {
  vertical-align: middle;
  color: #000000;
}
.jpmmps .c-table-wrapper table :not(thead) + tbody tr:first-child th,
.jpmmps .c-table-wrapper table thead th {
  font-weight: 700;
}
.jpmmps .c-table-wrapper table tbody th,
.jpmmps .c-table-wrapper table tbody td {
  /* stylelint-disable order/order */
  --transition-property: background-color, color, opacity;
  --transition-duration: var(--transition-duration-reduced-motion, 250ms);
  --transition-timing-function: ease;
  --transition-delay: 0;
  transition-property: var(--transition-property);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-delay: var(--transition-delay);
  background-color: var(--table-cell-background-color);
  padding: 10px;
  color: #161616 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  text-align: left;
}
.jpmmps .c-table-wrapper table tbody th::after,
.jpmmps .c-table-wrapper table tbody td::after {
  border-bottom: 1px solid #ced2d9;
}
.jpmmps .c-table-wrapper table tbody > tr:last-child td::after {
  border-bottom: none !important;
}
.jpmmps .c-table-wrapper table tbody tr {
  height: 80px;
}
.jpmmps .c-table-wrapper table tbody tr:hover {
  background-color: #e6e6e6;
  /* [63] */
}
.jpmmps .c-table-wrapper table tbody tr.is-selected {
  background-color: #fefefe;
  /* [63] */
}
.jpmmps .c-table-wrapper table tbody tr.is-selected th::after,
.jpmmps .c-table-wrapper table tbody tr.is-selected td::after {
  border-color: #ced2d9;
}
.jpmmps .c-table-wrapper table tbody tr.is-selected:hover {
  background-color: #e6e6e6;
  /* [63] */
}
.jpmmps .c-table-wrapper table tbody tr.is-success {
  --table-cell-color: #00783c;
  /* [63] */
}
.jpmmps .c-table-wrapper table tbody tr.is-success th::after,
.jpmmps .c-table-wrapper table tbody tr.is-success td::after {
  border-width: 1px;
  border-color: #ced2d9;
}
.jpmmps .c-table-wrapper table tbody tr.is-success:hover {
  --table-cell-color: #00783c;
  /* [63] */
}
.jpmmps .c-table-wrapper table tbody tr.is-error {
  --table-cell-color: #ba2525;
  /* [63] */
}
.jpmmps .c-table-wrapper table tbody tr.is-error th::after,
.jpmmps .c-table-wrapper table tbody tr.is-error td::after {
  border-width: 1px;
  border-color: #ced2d9;
}
.jpmmps .c-table-wrapper table tbody tr.is-disabled th::after,
.jpmmps .c-table-wrapper table tbody tr.is-disabled td::after {
  border-width: 1px;
  border-color: #ced2d9;
}
.jpmmps .c-table-wrapper table tbody [aria-disabled="true"] th::after,
.jpmmps .c-table-wrapper table tbody [aria-disabled="true"] td::after {
  border-width: 1px;
  border-color: #ced2d9;
}
.jpmmps .c-table-wrapper table tbody tr.is-disabled.is-selected th::after,
.jpmmps .c-table-wrapper table tbody tr.is-disabled.is-selected td::after {
  border-width: 1px;
  border-color: #ced2d9;
}
.jpmmps
  .c-table-wrapper
  table
  tbody
  [aria-disabled="true"].is-selected
  th::after,
.jpmmps
  .c-table-wrapper
  table
  tbody
  [aria-disabled="true"].is-selected
  td::after {
  border-width: 1px;
  border-color: #ced2d9;
}
.jpmmps .c-table-wrapper table tbody tr th.is-success,
.jpmmps .c-table-wrapper table tbody tr td.is-success {
  color: #00783c;
}
.jpmmps .c-table-wrapper table tbody tr th.is-success::after,
.jpmmps .c-table-wrapper table tbody tr td.is-success::after {
  border-width: 1px;
  border-color: #ced2d9;
}
.jpmmps .c-table-wrapper table tbody tr th.is-error,
.jpmmps .c-table-wrapper table tbody tr td.is-error {
  color: #ba2525;
}
.jpmmps .c-table-wrapper table tbody tr th.is-error::after,
.jpmmps .c-table-wrapper table tbody tr td.is-error::after {
  border-width: 1px;
  border-color: #ced2d9;
}
.jpmmps .c-table-wrapper table tbody tr th.is-disabled::after,
.jpmmps .c-table-wrapper table tbody tr [aria-disabled="true"]::after,
.jpmmps .c-table-wrapper table tbody tr td.is-disabled::after,
.jpmmps .c-table-wrapper table tbody tr [aria-disabled="true"]::after {
  border-width: 1px;
  border-color: #ced2d9;
}
.jpmmps .c-table-wrapper table tbody tr:hover th.is-success,
.jpmmps .c-table-wrapper table tbody tr:hover td.is-success {
  color: #00783c;
}
.jpmmps .c-table-wrapper table tbody tr.is-selected th.is-disabled::after,
.jpmmps
  .c-table-wrapper
  table
  tbody
  tr.is-selected
  [aria-disabled="true"]::after,
.jpmmps .c-table-wrapper table tbody tr.is-selected td.is-disabled::after,
.jpmmps
  .c-table-wrapper
  table
  tbody
  tr.is-selected
  [aria-disabled="true"]::after {
  border-color: #ced2d9;
}
.jpmmps .c-table-wrapper table tbody tr.is-disabled,
.jpmmps .c-table-wrapper table tbody tr[aria-disabled="true"] {
  pointer-events: none;
}
.jpmmps .c-table-wrapper table tbody th.is-disabled,
.jpmmps .c-table-wrapper table tbody th[aria-disabled="true"] {
  pointer-events: none;
}
.jpmmps .c-table-wrapper table tbody td.is-disabled,
.jpmmps .c-table-wrapper table tbody td[aria-disabled="true"] {
  pointer-events: none;
}
.jpmmps .c-table-wrapper table tbody th {
  font-weight: 700;
}
.jpmmps .c-table-wrapper table tbody > tr:first-child {
  border-left: none;
  /* [25] */
}
.jpmmps .c-table-wrapper table tfoot th {
  font-weight: 700;
}
.jpmmps .c-table-wrapper tr:where([aria-disabled="true"], .is-disabled),
.jpmmps .c-table-wrapper td:where([aria-disabled="true"], .is-disabled) {
  position: relative;
}
.jpmmps .c-table-wrapper tr:where([aria-disabled="true"], .is-disabled)::after,
.jpmmps .c-table-wrapper td:where([aria-disabled="true"], .is-disabled)::after {
  content: "";
  /* [55] */
  position: absolute;
  /* [55] */
  z-index: 10;
  /* [55] */
  top: 0;
  /* [56] */
  bottom: 0;
  /* [56] */
  left: 0;
  /* [56] */
  right: 0;
  /* [56] */
  background-color: #ffffff;
  /* [57] */
  opacity: 0.6;
  /* [57] */
  pointer-events: none;
}
.jpmmps th,
.jpmmps td {
  padding: 4px 16px;
  font-size: 13px;
}

.c-table--wide {
  /* [18] */
}
.c-table--wide th,
.c-table--wide td {
  padding: 10px 16px;
  font-size: 16px;
}

.c-table__layout--fixed,
.c-table--layout-fixed {
  /* [3] */
}

.c-table__layout--fixed table,
.c-table--layout-fixed table {
  table-layout: fixed;
}

.c-table__btn {
  /* [15] */
  margin: 0;
  padding: 0;
  border: 0 !important;
  box-shadow: none;
  border-radius: 0 !important;
}
.c-table__btn:hover,
.c-table__btn:focus,
.c-table__btn:active {
  margin: 0;
  padding: 0;
  border: 0 !important;
  box-shadow: none;
  border-radius: 0 !important;
}

.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort {
  /* [31] */
  --button-flex-direction: row-reverse;
  justify-content: flex-end;
  min-height: 0;
  border: none;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
  background: none;
  /* 35 */
  color: inherit;
}
.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort:hover,
.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort:focus,
.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort:active {
  justify-content: flex-end;
  min-height: 0;
  border: none;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
  background: none;
  /* 35 */
  color: inherit;
}
.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort
  .c-btn__icon,
.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort:hover
  .c-btn__icon,
.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort:focus
  .c-btn__icon,
.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort:active
  .c-btn__icon {
  font-size: calc(1.5 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  line-height: 1;
}
.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort
  .c-btn__icon::before,
.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort:hover
  .c-btn__icon::before,
.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort:focus
  .c-btn__icon::before,
.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort:active
  .c-btn__icon::before {
  display: inline-block;
  font-family: "jpmmps-generic" !important;
  /* [1] */
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  font-variant: normal;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  vertical-align: bottom;
  color: #1a1a1a;
}
.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort
  .c-btn__icon::before,
.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort[data-sort-order="asc"]
  .c-btn__icon::before {
  content: "\f13f";
}
.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort[data-sort-order="desc"] {
  /* [32] */
}
.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort.c-table__btn-sort[data-sort-order="desc"]
  .c-btn__icon::before {
  content: "\f139";
}

.c-table__cell__icon {
  font-size: calc(1.5 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  line-height: 1;
  margin-right: 8px;
}

.c-table__cell-align {
  /* [28] */
  display: flex;
  flex-direction: row;
  align-items: center;
}

/*
    * Each table variant has its own min-height.
    */
.c-table--narrow td {
  height: 24px;
  /* [29] */
}

.c-table--wide td {
  height: 64px;
  /* [29] */
}

.c-table--no-hover td {
  pointer-events: none !important;
  /* [35] */
}
.c-table--no-hover td td,
.c-table--no-hover td th,
.c-table--no-hover td tr {
  pointer-events: none !important;
  /* [35] */
}
.c-table--no-hover th {
  pointer-events: none !important;
  /* [35] */
}
.c-table--no-hover th td,
.c-table--no-hover th th,
.c-table--no-hover th tr {
  pointer-events: none !important;
  /* [35] */
}
.c-table--no-hover tr {
  pointer-events: none !important;
  /* [35] */
}
.c-table--no-hover tr td,
.c-table--no-hover tr th,
.c-table--no-hover tr tr {
  pointer-events: none !important;
  /* [35] */
}
.c-table--no-hover td > *:not(td):not(th):not(tr),
.c-table--no-hover th > *:not(td):not(th):not(tr),
.c-table--no-hover tr > *:not(td):not(th):not(tr) {
  pointer-events: all !important;
  /* [36] */
}

/**
   * Individual table cells can be highlighted via the
   * `.c-table--highlight` class.
  */
.c-table--highlight tr > :nth-child(n + 3):not(th) {
  /* [16] */
  background-color: #f2f2f2;
}

[data-theme="alternative"] .c-table--highlight tr > :nth-child(n + 3):not(th) {
  background-color: #ffffff;
}

.c-table--highlight tr > :nth-child(n + 3):not(th):not(:last-child) {
  border-right: 16px solid #ffffff;
}

[data-theme="alternative"]
  .c-table--highlight
  tr
  > :nth-child(n + 3):not(th):not(:last-child) {
  border-right: 16px solid #f2f2f2;
}

/**
   * Table with color scheme
   */
.c-table--colored tbody tr:nth-of-type(odd) {
  --table-cell-background-color: #f2f2f2;
  background-color: #f2f2f2;
}
.c-table--colored tbody tr:nth-of-type(even) {
  --table-cell-background-color: #ffffff;
  background-color: #ffffff;
}

/**
   * Table with border scheme and joined cells and rows
   */
.c-table--bordered {
  border-spacing: 16px 0;
}
.c-table--bordered td {
  padding-top: 8px;
  padding-right: 16px;
  padding-bottom: 8px;
  padding-left: 16px;
}
.c-table--bordered td + td {
  border-bottom: 1px solid #ced2d9;
}
.c-table--bordered th + td {
  border-bottom: 1px solid #ced2d9;
}

/**
  * Table with sticky head row
  */
.c-table--sticky-head {
  overflow: visible;
  /* [20] */
}
.c-table--sticky-head thead {
  position: relative;
  z-index: 20;
  /* [21] */
}
.c-table--sticky-head thead tr > * {
  /* stylelint-disable-line selector-max-combinators, selector-max-compound-selectors */
  position: sticky;
  top: calc(var(--jpmmps-sticky-offset, 0px) - 1px);
  /* [59] */
  background-color: #ffffff;
  /* [21] */
}

[data-theme="alternative"] .c-table--sticky-head thead tr > * {
  background-color: #f2f2f2;
}

.c-table--sticky-head thead tr::after {
  /* [60] */
  /* stylelint-disable order/order */
  --transition-property: opacity;
  --transition-duration: var(--transition-duration-reduced-motion, 500ms);
  --transition-timing-function: ease;
  --transition-delay: 0;
  transition-property: var(--transition-property);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-delay: var(--transition-delay);
  /* [64] */
  content: "";
  position: absolute;
  top: calc(100% + 0px);
  right: 0;
  left: 0;
  height: 20px;
  opacity: 0;
  /* [64] */
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0)
  );
}
.c-table--sticky-head.has-sticky-head {
  /* [61] */
}
.c-table--sticky-head.has-sticky-head thead tr {
  position: sticky;
  z-index: 100;
  top: calc(var(--jpmmps-sticky-offset, 0px) - 1px);
  /* stylelint-disable-line scale-unlimited/declaration-strict-value */
}
.c-table--sticky-head.has-sticky-head thead tr::after {
  opacity: 1;
  /* [64] */
}

.c-table--sticky-column {
  overflow: visible;
  /* [20] */
  /**
  * Table with sticky first column
  */
}
.c-table--sticky-column tr > :first-child::before {
  /* [65] */
  /* stylelint-disable order/order */
  --transition-property: opacity;
  --transition-duration: var(--transition-duration-reduced-motion, 500ms);
  --transition-timing-function: ease;
  --transition-delay: 0;
  transition-property: var(--transition-property);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-delay: var(--transition-delay);
  /* [64] */
  content: "";
  position: absolute;
  top: 0;
  left: calc(100% + 0px);
  bottom: 0;
  width: 20px;
  opacity: 0;
  /* [64] */
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0)
  );
  /* [60] */
}
.c-table--sticky-column.has-sticky-column {
  /* [62] */
}
.c-table--sticky-column.has-sticky-column tr > :first-child {
  background-color: var(--table-cell-background-color, #ffffff);
  /* [22] */
  color: var(--table-cell-color);
}

[data-theme="alternative"]
  .c-table--sticky-column.has-sticky-column
  tr
  > :first-child {
  background-color: #f2f2f2;
}

.c-table--sticky-column.has-sticky-column tr > :first-child::before {
  opacity: 1;
  /* [64] */
}
.c-table--sticky-column tr > :first-child {
  position: sticky;
  z-index: 1;
  /* [22] */
  left: -1px;
  /* [59] */
  /* stylelint-disable-line scale-unlimited/declaration-strict-value */
}
.c-table--sticky-column thead tr > :first-child {
  /* stylelint-disable-line selector-max-combinators, selector-max-compound-selectors */
  z-index: 2;
  /* [23] */
}
.c-table--sticky-column.c-table--colored:not(.has-sticky-column) tbody {
  /* stylelint-disable selector-max-specificity */
  /* stylelint-enable selector-max-specificity */
}
.c-table--sticky-column.c-table--colored:not(.has-sticky-column)
  tbody
  th:first-child,
.c-table--sticky-column.c-table--colored:not(.has-sticky-column)
  tbody
  td:first-child {
  background-color: inherit;
  /* [24] */
}

@media (max-width: 960px) {
  .jpmmps
    .c-table-wrapper:not(.c-table-wrapper--no-scroll):not(
      [class*="c-table--sticky"]
    ) {
    overflow-x: auto;
    /* [5] */
  }
  .jpmmps
    .c-table-wrapper:not(.c-table-wrapper--no-scroll):not(
      [class*="c-table--sticky"]
    )
    table {
    margin-left: 0px;
    min-width: 0 !important;
    /* [34] */
  }
}
@media (max-width: 960px) {
  .jpmmps .c-table-wrapper--auto table {
    margin-left: 0;
  }
}
/* ------------------------------------*\
   #CARD
\*------------------------------------ */
/**
 * [1] Fill horizontal space of parent.
 */
.jpmmps .c-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  /* [1] */
  border: 1px solid #61656e;
  text-align: left;
  background-color: #ffffff;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
}
.jpmmps .c-card > * {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
  /* [1] */
}
.jpmmps .c-card > *:first-child {
  padding-top: 24px;
}
.jpmmps .c-card > *:last-child {
  padding-bottom: 24px;
}
.jpmmps .c-card > *:not(.c-card__icon):not(.c-price-box) {
  width: 100%;
}
.jpmmps .c-card__icon {
  display: block;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 54px;
}
.jpmmps .c-card__icon .c-icon {
  font-size: calc(3.375 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  line-height: 1;
  color: #1a1a1a;
}

/* ------------------------------------*\
    #LIST-UI
\*------------------------------------ */
/**
 * [1] Vertically center counter with first line of text.
 *     Offset to compensate misalignment caused by `baseline`.
 * [2] Pseudo-element for the numbering of the ordered variant.
 * [3] Ensure alignment of numbers independent of number width.
 */
.jpmmps .c-list-ui {
  margin: 0;
  padding: 0;
  list-style: none;
}
.jpmmps .c-list-ui li {
  display: block;
  margin-bottom: 0;
  text-align: left !important;
}
.jpmmps .c-list-ui--ordered {
  counter-reset: section;
}
.jpmmps .c-list-ui__item {
  font-size: calc(1 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  padding: 24px 0;
}
.jpmmps .c-list-ui--ordered .c-list-ui__item {
  display: flex;
  /* [1] */
  align-items: baseline;
  /* [1] */
}
.jpmmps .c-list-ui--ordered .c-list-ui__item::before {
  /* [2] */
  font-size: calc(1.25 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  line-height: 1;
  margin-right: 24px;
  content: counter(section, decimal-leading-zero);
  counter-increment: section;
  transform: translateY(0.2ex);
  /* [1] */
  font-variant-numeric: tabular-nums;
  /* [3] */
}

@media (min-width: 721px) {
  .jpmmps .c-list-ui--ordered .c-list-ui__item::before {
    font-size: calc(1.375 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
    line-height: 1;
  }
}
/* ------------------------------------*\
     #TAG
 \*------------------------------------ */
.jpmmps .c-tag {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  border-width: 1px;
  border-color: #000000;
  border-style: solid;
  border-radius: 20px;
  padding: 4px 8px;
  color: #161616;
}
.jpmmps .c-tag--info {
  border-color: #187085;
  background-color: #187085;
  color: #ffffff;
}
.jpmmps .c-tag--success {
  border-color: #00783c;
  background-color: #00783c;
  color: #ffffff;
}
.jpmmps .c-tag--warning {
  border-color: #efc938;
  background-color: #efc938;
  color: #1a1a1a;
}
.jpmmps .c-tag--error {
  border-color: #ba2525;
  background-color: #ba2525;
  color: #ffffff;
}
.jpmmps .c-tag--positive {
  border-color: #00783c;
  background-color: #00783c;
  color: #ffffff;
}
.jpmmps .c-tag--negative {
  border-color: #ba2525;
  background-color: #ba2525;
  color: #ffffff;
}
.jpmmps .c-tag__label {
  display: block;
  min-height: 16px;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px !important;
}
.jpmmps .c-tag__label * {
  line-height: 16px !important;
  letter-spacing: 0;
}

/* ------------------------------------*\
     #LOGO
 \*------------------------------------ */
/**
 * [1] In addition to the logo in the HTML we have to assign the logo via CSS
 *     as a background image fallback for the former version without
 *     `img` or `picture` elements in the markup.
 * [2] To hide the fallback background image when the logo image is placed as
 *     `img` or `picture` in the HTML, an additional modifier class is necessary.
 *     To ensure compatibility with JPMMPS's multibrand development mode,
 *     the background image must not be removed, but must be pushed out of
 *     the container with 'background-position`. 
 * [3] Just apply a different logo for the background image fallback,
 *     if the small screen variant differs from the large screen variant.
 * [4] Defensively reset any transition, e.g. when `.c-logo` is on an `<a>`
 *     element, that is carrying any transition.
 * [5] Convert `.c-logo__image` to a block-level element to remove unwanted
 *     spacing around the image.
 */
.jpmmps .c-logo {
  display: block;
  width: 63px;
  height: 63px;
  background-image: url("../img/logo-placeholder.svg");
  /* [1] */
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  transition: none;
  /* [4] */
}
.jpmmps .c-logo--has-image {
  background-position: 999px;
  /* [2] */
  background-repeat: no-repeat;
  /* [2] */
}
.jpmmps .c-logo__image {
  display: block;
  /* [5] */
  max-height: 100%;
}

@media (max-width: 720px) {
  .jpmmps .c-logo {
    width: 40px;
    height: 40px;
  }
}
/**
 * [1] Overwrite default to make sure these logos can be wide as they are. No
       need to set images width for responsive positioning like for vehicle
       logos in VW6.
 * [2] Loop through the map to generate the different modifiers and add their
       specific logos as background-image.
 * [3] We need to extend the two configurable logo sizes for Generic.
 * [4] If width is already set to avoid potential image distortions.
 * [5] Set a responsive logo width to correctly display the default logo as
 *     background image.
 */
.jpmmps .c-logo {
  width: 63px;
  display: inline-block;
  /* [1] */
}
.jpmmps .c-logo__image {
  height: 63px;
  width: auto;
  /* [4] */
}

@media (max-width: 720px) {
  .jpmmps .c-logo {
    width: 40px;
  }
}
@media (max-width: 720px) {
  .jpmmps .c-logo__image {
    height: 40px;
  }
}
/* ------------------------------------*\
    #SPINNER
\*------------------------------------ */
/**
 * [1] Magic number that places the ‘corner’ dots/stripe correctly to form a
 *     perfect circle. If someone can come up with the correct formula of
 *     calculating this properly...you're a freak! But it’ll be nice,
 *     nonetheless.
 * [2] Use an `inset` box shadow, so that the outer border (this box-shadow one)
 *     and the overlaying inner border of the pseudo element are matching
 *     exactly.
 * [3] Set transition to fade in/out the spinner when it is shown/hidden
 *     dynamically.
 * [4] Take up the size from the parent (`.c-spinner__loader`).
 * [5] Create a Pac-Man shape by omitting the bottom border color.
 * [6] Place the spinner of the full-page, text and section variant precisely
 *     in the center of the backdrop.
 * [7] Remove margins from any element inside the text container.
 */
.jpmmps .c-spinner.c-spinner--full-page,
.jpmmps .c-spinner.c-spinner--section,
.jpmmps .c-spinner.c-spinner--text {
  position: relative;
}
.jpmmps .c-spinner.c-spinner--full-page::before,
.jpmmps .c-spinner.c-spinner--section::before,
.jpmmps .c-spinner.c-spinner--text::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.6);
  /* stylelint-disable order/order */
  --transition-property: all;
  --transition-duration: var(--transition-duration-reduced-motion, 250ms);
  --transition-timing-function: ease;
  --transition-delay: 0;
  transition-property: var(--transition-property);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-delay: var(--transition-delay);
  content: "";
  z-index: 4999;
  opacity: 0;
  visibility: hidden;
}
.jpmmps .c-spinner.c-spinner--full-page[aria-busy="true"]::before,
.jpmmps .c-spinner.c-spinner--section[aria-busy="true"]::before,
.jpmmps .c-spinner.c-spinner--text[aria-busy="true"]::before {
  opacity: 1;
  visibility: visible;
}
.jpmmps .c-spinner.c-spinner--full-page::before,
.jpmmps .c-spinner.c-spinner--text::before {
  position: fixed;
}
.jpmmps .c-spinner.c-spinner--center {
  display: flex;
  justify-content: center;
}
.jpmmps .c-spinner.c-spinner--text {
  text-align: center;
}
.jpmmps .c-spinner__loader {
  /* stylelint-disable order/order */
  --transition-property: all;
  --transition-duration: var(--transition-duration-reduced-motion, 250ms);
  --transition-timing-function: ease;
  --transition-delay: 0;
  transition-property: var(--transition-property);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-delay: var(--transition-delay);
  /* [3] */
  position: relative;
  z-index: 5000;
  display: none;
  width: 60px;
  height: 60px;
}
.jpmmps .c-spinner__loader::before {
  content: "";
  position: absolute;
  /* [4] */
  top: 0;
  /* [4] */
  left: 0;
  /* [4] */
  display: block;
  width: 60px;
  /* [4] */
  height: 60px;
  /* [4] */
  border-radius: 50%;
  box-shadow: 0 0 0 3px #f2f2f2 inset;
  /* [2] */
}
.jpmmps .c-spinner--small .c-spinner__loader::before {
  width: 40px;
  height: 40px;
  box-shadow: 0 0 0 2px #f2f2f2 inset;
  /* [2] */
}
.jpmmps .c-spinner__loader::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 60px;
  height: 60px;
  border: 3px solid #161616;
  border-radius: 50%;
  animation-name: jpmmps-spinner-circle-animation;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  border-bottom-color: transparent;
  /* [5] */
}
.jpmmps .c-spinner--small .c-spinner__loader::after {
  width: 40px;
  height: 40px;
  border-width: 2px;
}
.jpmmps .c-spinner[aria-busy="true"] .c-spinner__loader {
  display: block;
}
.jpmmps .c-spinner--small .c-spinner__loader {
  width: 40px;
  height: 40px;
}
.jpmmps .c-spinner--section .c-spinner__loader {
  position: absolute;
  top: 50%;
  /* [6] */
  left: 50%;
  /* [6] */
  transform: translate(-50%, -50%);
  /* [6] */
}
.jpmmps .c-spinner--full-page:not(.c-spinner--text) .c-spinner__loader {
  position: absolute;
  top: 50%;
  /* [6] */
  left: 50%;
  /* [6] */
  transform: translate(-50%, -50%);
  /* [6] */
  position: fixed;
}
.jpmmps .c-spinner--text .c-spinner__loader {
  margin-right: auto;
  margin-left: auto;
}
.jpmmps .c-spinner__content {
  width: 33.3333333333%;
  position: fixed;
  z-index: 5000;
  top: 50%;
  /* [6] */
  left: 50%;
  /* [6] */
  display: none;
  padding: 24px;
  transform: translate(-50%, -50%);
  /* [6] */
  background-color: #ffffff;
  box-shadow: none;
}
.jpmmps .c-spinner[aria-busy="true"] .c-spinner__content {
  display: block;
}
.jpmmps .c-spinner__text {
  font-size: calc(1 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  display: inline-block;
  padding-top: 16px;
  padding-right: 24px;
  padding-left: 24px;
  color: #1a1a1a;
}
.jpmmps .c-spinner__text * {
  margin: 0;
  /* [7] */
}
.jpmmps .c-spinner__element {
  display: none;
}

@media (max-width: 1280px) {
  .jpmmps .c-spinner__content {
    width: 50%;
  }
}
@media (max-width: 960px) {
  .jpmmps .c-spinner__content {
    width: 66.6666666667%;
  }
}
@media (max-width: 720px) {
  .jpmmps .c-spinner__content {
    width: calc(100vw - 64px);
  }
}
@keyframes jpmmps-spinner-circle-animation {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}
@keyframes jpmmps-spinner-dots-animation {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
@keyframes jpmmps-spinner-stripe-animation {
  0% {
    background-color: #495651;
  }
  12.5% {
    background-color: #1a1a1a;
  }
  25% {
    background-color: #495651;
  }
}
/* ------------------------------------*\
    #INFO-ICON
\*------------------------------------ */
/**
 * [1] Vertically align icon, if needed.
 * [2] Reduce the height of Info Icon by removing the padding
 *     inherited from the `icon-variant` mixin.
 * [3] Ensure other components are not affected by the Info Icon.
 * [4] Horizontal spacing.
 * [5] Additional styles for brands that need a CSS border.
 * [6] Fix clipping by slightly offsetting (Safari).
 */
.jpmmps .c-info-icon {
  font-size: calc(1.5 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  color: #187085;
  position: relative;
  /* [3] */
  margin-top: -100px;
  /* [3] */
  /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  margin-bottom: -100px;
  /* [3] */
  /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  /* [4] */
  padding: 0.03em;
  /* [6] */
  /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  line-height: 1;
  /* [3] */
  vertical-align: middle;
  /* [1] */
}
.jpmmps .c-info-icon::after {
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #1a1a1a;
}
.jpmmps [data-theme="alternative"] .c-info-icon {
  font-size: calc(1.5 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  color: #1a1a1a;
}
.jpmmps [data-theme="alternative"] .c-info-icon::after {
  border-radius: 50%;
  padding: 6px;
}
.jpmmps .c-info-icon::before {
  padding: 0;
  /* [2] */
  line-height: 1;
}

/* ------------------------------------*\
    #HERO-TEASER
\*------------------------------------ */
/**
 * [1]  Reference for the `.c-hero-teaser__image`.
 * [2]  Prepare for worst case: If the text content does not fit the hero-teaser
 *      container, at least cut off its overflow.
 * [3]  Provide anchor point modifiers for the hero-teaser image.
 * [4]  By default, when the image is cropped inside the hero-teaser
 *      container, crop it from the dead center.
 * [5]  Always fill the entire hero-teaser container with the image.
 * [6]  Override standard behaviour, so the image can bleed out over the
 *      viewport edges.
 * [7]  The hero image should not reserve any height, if `.c-hero-teaser--auto`,
        since the content controls the height in this case.
 * [8]  Set position to `relative` so it reserves the necessary height.
 * [9]  Provide the correct spacing between the page-head (i.e. logo) and the
 *      hero-teaser content.
 * [10] Position content on top of image.
 * [11] Reset default spacing.
 * [12] Since the content defines the height of the hero image for
 *      `.c-hero-teaser--auto` and `c-hero-teaser--layer`, centering the content
 *      does not make sense.
 * [13] Provide fallback for existing br tags between title_row spans.
 * [14] If activated (by default), align content horizontally with global
 *      page wrap.
 * [15] Fixes a vertical offset when `$hero-teaser-content-default-margin-bottom` is set.
 *      The `margin-bottom` of the last child of `.c-hero-teaser__heading` creates
 *      an extra space and thus is reset here.
 * [16] Set optional max width and center hero teaser horizontally.
 * [17] Set inverted variant button styles.
 * [18] Stretch the media element to the whole viewport width.
 * [19] Place the background-video controls on top of the hero teaser
 *      media and position it accordingly.
 * [20] Disable pointer events for the content element so that the video controls
 *      can receive events but enable it for content heading and content button children.
 * [21] Make sure the image does not stretch in relation to the hero teaser layer when
 *      expanding in variant `c-hero-teaser--layer`.
 * [22] Position the content in the variant `c-hero-teaser--layer` below the hero
 *      image on small screens.
 * [23] The variant `c-hero-teaser--layer` needs relative positioning in order to
 *      push the content downwards when expanding.
 * [24] The layer should always `$hero-teaser-layer-width`,  unless a different
 *      width is specified via `[data-hero-teaser-layer-size]` for larger viewports.
 * [25] Make sure that the layer never exceeds the width of the hero teaser.
 * [26] Add spacing between header and layer content.
 * [27] Ensure that the image height does not exceed the outer wrapper.
 * [28] Ensure that the layer content is set within the page-wrap.
 * [29] Add variable to set flex-alignment.
 * [30] Add space between layer and previous element (e.g. `.c-hero-teaser__heading`).
 * [31] Remove bottom margin from last layer child element (e.g. `<p>`).
 */
.jpmmps .c-hero-teaser {
  position: relative;
  /* [1] */
  overflow: hidden;
  /* [2] */
}
.jpmmps .c-hero-teaser.c-hero-teaser--layer {
  min-height: 700px;
  /* [27] */
}
.jpmmps .c-hero-teaser__background-video {
  position: relative;
  z-index: 700;
  width: 100%;
  /* [18] */
}
.jpmmps .c-hero-teaser__background-video video {
  object-fit: cover;
  height: 700px;
  width: 100%;
  /* [18] */
}
.jpmmps .c-hero-teaser__background-video-control {
  position: absolute;
  /* [19] */
}
.jpmmps .c-hero-teaser__background-video-control:not(.is-paused) {
  --play-button-icon: "";
}
.jpmmps .c-hero-teaser__background-video-control.is-paused {
  --play-button-icon: "";
}
.jpmmps .c-hero-teaser__image {
  object-fit: cover;
  /* [3] [4] */
  height: 700px;
  position: relative;
  z-index: 700;
  width: 100%;
  min-width: 100%;
  /* [5] */
  max-width: none;
  /* [6] */
}
.jpmmps .c-hero-teaser--shallow .c-hero-teaser__image {
  height: 540px;
}
.jpmmps .c-hero-teaser--auto .c-hero-teaser__image {
  height: 100%;
  /* [6] */
}
.jpmmps .c-hero-teaser--layer .c-hero-teaser__image {
  position: absolute;
  /* [21] */
}
.jpmmps .c-hero-teaser--top-center .c-hero-teaser__image {
  object-fit: cover;
  object-position: top center;
}
.jpmmps .c-hero-teaser--top-left .c-hero-teaser__image {
  object-fit: cover;
  object-position: top left;
}
.jpmmps .c-hero-teaser--top-right .c-hero-teaser__image {
  object-fit: cover;
  object-position: top right;
}
.jpmmps .c-hero-teaser--center-left .c-hero-teaser__image {
  object-fit: cover;
  object-position: center left;
}
.jpmmps .c-hero-teaser--center-right .c-hero-teaser__image {
  object-fit: cover;
  object-position: center right;
}
.jpmmps .c-hero-teaser--bottom-center .c-hero-teaser__image {
  object-fit: cover;
  object-position: bottom center;
}
.jpmmps .c-hero-teaser--bottom-left .c-hero-teaser__image {
  object-fit: cover;
  object-position: bottom left;
}
.jpmmps .c-hero-teaser--bottom-right .c-hero-teaser__image {
  object-fit: cover;
  object-position: bottom right;
}
.jpmmps .c-hero-teaser__play-button.c-hero-teaser__play-button--video {
  position: absolute;
  z-index: 800;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 160px;
}
.jpmmps .c-hero-teaser__content {
  padding-top: 95px;
  padding-bottom: 32px;
  position: absolute;
  /* [10] */
  z-index: 900;
}
.jpmmps
  .c-hero-teaser:not(.c-hero-teaser--auto):not(.c-hero-teaser--layer)
  .c-hero-teaser__content {
  /* [12] */
}
.jpmmps .c-hero-teaser--auto .c-hero-teaser__content {
  position: relative;
}
.jpmmps .c-hero-teaser--layer .c-hero-teaser__content {
  min-height: 700px;
  /* [27] */
  position: relative;
  /* [23] */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* [29] */
}
.jpmmps .c-hero-teaser--video .c-hero-teaser__content {
  pointer-events: none;
  /* [20] */
  /* stylelint-disable selector-max-combinators, selector-max-compound-selectors */
}
.jpmmps .c-hero-teaser--video .c-hero-teaser__content .c-hero-teaser__heading *,
.jpmmps .c-hero-teaser--video .c-hero-teaser__content .c-hero-teaser__button * {
  pointer-events: all;
  /* [20] */
}
.jpmmps .c-hero-teaser__content-inner {
  max-width: 1344px;
  padding-left: 32px;
  padding-right: 32px;
  --page-wrap: 32px;
  margin-right: auto;
  margin-left: auto;
  /* [14] */
}
.jpmmps .c-hero-teaser--layer .c-hero-teaser__content-inner {
  width: 100%;
  /* [28] */
}
.jpmmps .c-hero-teaser__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
}
.jpmmps .c-hero-teaser__heading h1,
.jpmmps .c-hero-teaser__heading h2,
.jpmmps .c-hero-teaser__heading h3,
.jpmmps .c-hero-teaser__heading h4,
.jpmmps .c-hero-teaser__heading h5,
.jpmmps .c-hero-teaser__heading h6,
.jpmmps .c-hero-teaser__heading p {
  /* [11] */
  margin-bottom: 0;
}
.jpmmps .c-hero-teaser__title > * {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.jpmmps .c-hero-teaser__title-row + br {
  display: none;
  /* [13] */
}
.jpmmps .c-hero-teaser__layer {
  width: var(--hero-teaser-layer-width, 100%);
  /* [24] */
  max-width: 100%;
  /* [25] */
  padding: 24px;
  border: 1px solid #697677;
  background-color: rgba(255, 255, 255, 0.9);
}
.jpmmps * + .c-hero-teaser__layer {
  margin-top: 24px;
  /* [30] */
}
.jpmmps .c-hero-teaser__layer {
  padding-left: 24px;
  padding-right: 24px;
}
.jpmmps .c-hero-teaser__layer > :last-child {
  margin-bottom: 0;
  /* [31] */
}
.jpmmps .c-hero-teaser__title-row {
  font-size: calc(2.125 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  font-weight: 700;
}
.jpmmps .c-hero-teaser__pretitle,
.jpmmps .c-hero-teaser__subtitle {
  font-size: calc(1.25 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
}
.jpmmps .c-hero-teaser__text {
  font-size: calc(1 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
}
.jpmmps .c-hero-teaser__button {
  margin-top: 24px;
}
.jpmmps .c-hero-teaser__guiding-line {
  position: absolute;
  z-index: 901;
  right: 0;
  bottom: 0;
  left: 0;
}

@media (max-width: 720px) {
  .jpmmps .c-hero-teaser.c-hero-teaser--layer {
    min-height: 540px;
  }
}
@media (max-width: 480px) {
  .jpmmps .c-hero-teaser.c-hero-teaser--layer {
    min-height: 320px;
  }
}
@media (max-width: 720px) {
  .jpmmps .c-hero-teaser__background-video video {
    height: 540px;
  }
}
@media (max-width: 480px) {
  .jpmmps .c-hero-teaser__background-video video {
    height: 320px;
  }
}
@media (max-width: 480px) {
  .jpmmps .c-hero-teaser__background-video-control {
    bottom: 50%;
    /* [19] */
    right: 50%;
    /* [19] */
    transform: translate3d(50%, 50%, 0);
  }
  .jpmmps .c-hero-teaser__background-video-control:not(.is-paused) {
    visibility: hidden;
  }
}
@media (min-width: 481px) {
  .jpmmps .c-hero-teaser__background-video-control {
    bottom: 24px;
    /* [19] */
    right: 24px;
    /* [19] */
  }
}
@media (max-width: 720px) {
  .jpmmps .c-hero-teaser__image {
    height: 540px;
  }
}
@media (max-width: 480px) {
  .jpmmps .c-hero-teaser__image {
    height: 320px;
  }
}
@media (max-width: 720px) {
  .jpmmps .c-hero-teaser--shallow .c-hero-teaser__image {
    height: 480px;
  }
}
@media (max-width: 480px) {
  .jpmmps .c-hero-teaser--shallow .c-hero-teaser__image {
    height: 280px;
  }
}
@media (min-width: 481px) {
  .jpmmps .c-hero-teaser--auto .c-hero-teaser__image {
    position: absolute;
    /* [7] */
  }
}
@media (max-width: 479px) {
  .jpmmps .c-hero-teaser--layer .c-hero-teaser__image {
    position: relative;
    /* [22] */
  }
}
@media (min-width: 481px) {
  .jpmmps .c-hero-teaser__play-button.c-hero-teaser__play-button--video {
    display: none;
  }
}
@media (max-width: 480px) {
  .jpmmps .c-hero-teaser__play-button.c-hero-teaser__play-button--modal {
    display: none;
  }
}
@media (max-width: 480px) {
  .jpmmps .c-hero-teaser__content {
    padding-top: 0;
    padding-bottom: 16px;
  }
}
@media (max-width: 480px) {
  .jpmmps .c-hero-teaser__content {
    position: relative;
    /* [8] */
    margin-top: 24px;
  }
}
@media (min-width: 481px) {
  .jpmmps
    .c-hero-teaser:not(.c-hero-teaser--auto):not(.c-hero-teaser--layer)
    .c-hero-teaser__content {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
@media (max-width: 720px) {
  .jpmmps .c-hero-teaser--layer .c-hero-teaser__content {
    min-height: 540px;
  }
}
@media (max-width: 480px) {
  .jpmmps .c-hero-teaser--layer .c-hero-teaser__content {
    min-height: 320px;
  }
}
@media (max-width: 960px) {
  .jpmmps .c-hero-teaser__content-inner {
    max-width: 1312px;
    padding-left: 16px;
    padding-right: 16px;
    --page-wrap: 16px;
  }
}
@media (max-width: 720px) {
  .jpmmps .c-hero-teaser__content-inner {
    max-width: 1312px;
    padding-left: 16px;
    padding-right: 16px;
    --page-wrap: 16px;
  }
}
@media (max-width: 480px) {
  .jpmmps .c-hero-teaser__content-inner {
    max-width: 1312px;
    padding-left: 16px;
    padding-right: 16px;
    --page-wrap: 16px;
  }
}
@media (min-width: 960px) {
  .jpmmps .c-hero-teaser__layer[data-hero-teaser-layer-size="small"],
  .jpmmps .c-hero-teaser__layer.c-hero-teaser-layer--small {
    --hero-teaser-layer-width: 460px;
    /* [24] */
  }
}
@media (min-width: 960px) {
  .jpmmps .c-hero-teaser__layer[data-hero-teaser-layer-size="medium"],
  .jpmmps .c-hero-teaser__layer.c-hero-teaser-layer--medium {
    --hero-teaser-layer-width: 720px;
    /* [24] */
  }
}
@media (min-width: 960px) {
  .jpmmps .c-hero-teaser__layer[data-hero-teaser-layer-size="large"],
  .jpmmps .c-hero-teaser__layer.c-hero-teaser-layer--large {
    --hero-teaser-layer-width: 960px;
    /* [24] */
  }
}
@media (min-width: 960px) {
  .jpmmps .c-hero-teaser__layer[data-hero-teaser-layer-size="xlarge"],
  .jpmmps .c-hero-teaser__layer.c-hero-teaser-layer--xlarge {
    --hero-teaser-layer-width: 1280px;
    /* [24] */
  }
}
@media (min-width: 721px) {
  .jpmmps .c-hero-teaser__title-row {
    font-size: calc(3 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  }
}
@media (min-width: 721px) {
  .jpmmps .c-hero-teaser__pretitle {
    font-size: calc(1.375 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  }
}
@media (min-width: 721px) {
  .jpmmps .c-hero-teaser__subtitle {
    font-size: calc(1.375 * 16 / var(--jpmmps-root-font-size, 16) * 1rem);
  }
}
@media (min-width: 481px) {
  .jpmmps .c-hero-teaser--inverted {
    /* [17] */
  }
  .jpmmps .c-hero-teaser--inverted .c-hero-teaser__content {
    color: #ffffff;
  }
  .jpmmps .c-hero-teaser--inverted .c-btn {
    background-color: #ffffff;
    color: #1a1a1a;
  }
  .jpmmps .c-hero-teaser--inverted .c-btn:hover,
  .jpmmps .c-hero-teaser--inverted .c-btn:focus {
    background-color: #187085;
    color: #ffffff;
  }
  .jpmmps .c-hero-teaser--inverted .c-btn:active {
    background-color: #ffffff;
    color: #1a1a1a;
  }
  .jpmmps .c-hero-teaser--inverted .c-btn--link:hover {
    border-color: transparent;
    border-bottom: 1px solid #1a1a1a;
    background-color: transparent;
  }
}
@keyframes jpmmps-animateheight2 {
  0% {
    max-height: 100vh;
  }
  100% {
    max-height: 0;
  }
}
@keyframes jpmmps-animateheight3 {
  0% {
    max-height: 0;
  }
  100% {
    max-height: 100vh;
  }
}
/* [1] */
@supports not selector(:has(.support)) {
  .jpmmps .c-section-nav__section .c-table--sticky-head {
    --jpmmps-sticky-offset: 64px;
  }
}
/* ------------------------------------*\
    #BUTTONS (Scopes)
\*------------------------------------ */
/*
 * [1] Set the button width to 100% on media teaser breakpoint.
 * [2] The vertical media teaser's button is always 100% width.
 * [3] Overwrite the disabled styles as they are handled by the overlay.
 */
.jpmmps .c-back-to-top .c-btn {
  --button-flex-direction: row;
}
.jpmmps .c-table-wrapper [aria-disabled="true"] .c-btn .c-btn__text.c-btn__text,
.jpmmps
  .c-table-wrapper
  [aria-disabled="true"]
  .c-btn
  .c-btn__icon.c-btn__icon {
  color: #1a1a1a;
  /* [3] */
}
.jpmmps .c-table-wrapper .is-disabled .c-btn .c-btn__text.c-btn__text,
.jpmmps .c-table-wrapper .is-disabled .c-btn .c-btn__icon.c-btn__icon {
  color: #1a1a1a;
  /* [3] */
}

@media (max-width: 720px) {
  .jpmmps .c-media-teaser .c-media-teaser__footer .c-btn {
    width: 100%;
    /* [1] */
  }
}
/* ------------------------------------*\
    #HEADER (Scopes)
\*------------------------------------ */
/**
 * [1] Fallback for old markup (context-bar nested in header-nav) for positioning.
 */
@media (min-width: 721px) {
  .jpmmps .c-header__content-wrapper .c-header__logo:not(:last-child),
  .jpmmps .c-header__content-wrapper .c-header__nav:not(:last-child) {
    margin-right: 32px;
  }
}
@media (max-width: 720px) {
  .jpmmps .c-header__content-wrapper .c-header__nav {
    margin-left: 16px;
  }
  .jpmmps .c-header__content-wrapper .c-header__nav > .c-context-bar {
    order: -1;
    /* [3] */
    margin-right: 16px;
  }
}
/* ------------------------------------*\
    #TABLES (Scopes)
\*------------------------------------ */
/**
 * [1] Vertically align with text
 */
.jpmmps .c-table-wrapper th .c-badge__icon::before,
.jpmmps .c-table-wrapper td .c-badge__icon::before {
  color: inherit;
}
.jpmmps .c-table-wrapper th .c-status-message,
.jpmmps .c-table-wrapper td .c-status-message {
  align-items: baseline;
  /* [2] */
}

/* ------------------------------------*\
      #CARDS (Scopes)
  \*------------------------------------ */
/**
   * [1] Add vertical spacing between form fields.
   */
.jpmmps .c-card__body .c-form-field + .c-form-field {
  margin-top: 24px;
  /* [1] */
}

.jpmmps .c-form-field.c-form-field--inline .c-form-field__box {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

/* ------------------------------------*\
    #FOOTER (Scopes)
\*------------------------------------ */
/**
* [1] Overwrite default dark color.
*/
.jpmmps .c-footer .c-footnotes {
  color: #afb5ab;
}
.jpmmps .c-footer .c-breadcrumb__link,
.jpmmps .c-footer .c-breadcrumb__item.c-breadcrumb__item::after {
  color: #ffffff;
  /* [1] */
}

/* ------------------------------------*\
     #BLOCK
 \*------------------------------------ */
/**
  * Utility class to make an element `display: block;`.
  */
.jpmmps .u-block {
  display: block !important;
}

/* ------------------------------------*\
    #FLOAT
\*------------------------------------ */
/**
 * Helper classes to float elements either left, right or none.
 */
.jpmmps .u-float-left {
  float: left !important;
}
.jpmmps .u-float-right {
  float: right;
}
.jpmmps .u-float-none {
  float: none !important;
}

.jpmmps .o-layout__item .u-float-right {
  width: 100%;
}

@media (max-width: 1920px) {
  .jpmmps .u-float-left\@xxl {
    float: left !important;
  }
  .jpmmps .u-float-right\@xxl {
    float: right !important;
  }
  .jpmmps .u-float-none\@xxl {
    float: none !important;
  }
}
@media (min-width: 1921px) {
  .jpmmps .u-float-left\@xxl-up {
    float: left !important;
  }
  .jpmmps .u-float-right\@xxl-up {
    float: right !important;
  }
  .jpmmps .u-float-none\@xxl-up {
    float: none !important;
  }
}
@media (max-width: 1600px) {
  .jpmmps .u-float-left\@xl {
    float: left !important;
  }
  .jpmmps .u-float-right\@xl {
    float: right !important;
  }
  .jpmmps .u-float-none\@xl {
    float: none !important;
  }
}
@media (min-width: 1601px) {
  .jpmmps .u-float-left\@xl-up {
    float: left !important;
  }
  .jpmmps .u-float-right\@xl-up {
    float: right !important;
  }
  .jpmmps .u-float-none\@xl-up {
    float: none !important;
  }
}
@media (max-width: 1280px) {
  .jpmmps .u-float-left\@l {
    float: left !important;
  }
  .jpmmps .u-float-right\@l {
    float: right !important;
  }
  .jpmmps .u-float-none\@l {
    float: none !important;
  }
}
@media (min-width: 1281px) {
  .jpmmps .u-float-left\@l-up {
    float: left !important;
  }
  .jpmmps .u-float-right\@l-up {
    float: right !important;
  }
  .jpmmps .u-float-none\@l-up {
    float: none !important;
  }
}
@media (max-width: 960px) {
  .jpmmps .u-float-left\@m {
    float: left !important;
  }
  .jpmmps .u-float-right\@m {
    float: right !important;
  }
  .jpmmps .u-float-none\@m {
    float: none !important;
  }
}
@media (min-width: 961px) {
  .jpmmps .u-float-left\@m-up {
    float: left !important;
  }
  .jpmmps .u-float-right\@m-up {
    float: right !important;
  }
  .jpmmps .u-float-none\@m-up {
    float: none !important;
  }
}
@media (max-width: 720px) {
  .jpmmps .u-float-left\@s {
    float: left !important;
  }
  .jpmmps .u-float-right\@s {
    float: right !important;
  }
  .jpmmps .u-float-none\@s {
    float: none !important;
  }
}
@media (min-width: 721px) {
  .jpmmps .u-float-left\@s-up {
    float: left !important;
  }
  .jpmmps .u-float-right\@s-up {
    float: right !important;
  }
  .jpmmps .u-float-none\@s-up {
    float: none !important;
  }
}
@media (max-width: 480px) {
  .jpmmps .u-float-left\@xs {
    float: left !important;
  }
  .jpmmps .u-float-right\@xs {
    float: right !important;
  }
  .jpmmps .u-float-none\@xs {
    float: none !important;
  }
}
@media (min-width: 481px) {
  .jpmmps .u-float-left\@xs-up {
    float: left !important;
  }
  .jpmmps .u-float-right\@xs-up {
    float: right !important;
  }
  .jpmmps .u-float-none\@xs-up {
    float: none !important;
  }
}
/* ------------------------------------*\
     #HIDE
 \*------------------------------------ */
/**
  * Hide helper classes to hide elements on certain veiwports.
  */
.jpmmps .u-hide {
  display: none !important;
}

/**
 * Breakpoints specific hide classes.
 */
@media (max-width: 1920px) {
  .jpmmps .u-hide\@xxl {
    display: none !important;
  }
}
@media (min-width: 1921px) {
  .jpmmps .u-hide\@xxl-up {
    display: none !important;
  }
}
@media (max-width: 1600px) {
  .jpmmps .u-hide\@xl {
    display: none !important;
  }
}
@media (min-width: 1601px) {
  .jpmmps .u-hide\@xl-up {
    display: none !important;
  }
}
@media (max-width: 1280px) {
  .jpmmps .u-hide\@l {
    display: none !important;
  }
}
@media (min-width: 1281px) {
  .jpmmps .u-hide\@l-up {
    display: none !important;
  }
}
@media (max-width: 960px) {
  .jpmmps .u-hide\@m {
    display: none !important;
  }
}
@media (min-width: 961px) {
  .jpmmps .u-hide\@m-up {
    display: none !important;
  }
}
@media (max-width: 720px) {
  .jpmmps .u-hide\@s {
    display: none !important;
  }
}
@media (min-width: 721px) {
  .jpmmps .u-hide\@s-up {
    display: none !important;
  }
}
@media (max-width: 480px) {
  .jpmmps .u-hide\@xs {
    display: none !important;
  }
}
@media (min-width: 481px) {
  .jpmmps .u-hide\@xs-up {
    display: none !important;
  }
}
/* ------------------------------------*\
     #OFFSETS
 \*------------------------------------ */
/**
  * A series of offset helper classes that you can use to push and pull items in
  * a grid. Classes take a fraction-like format (e.g. `.u-push-2/3`).
  */
/* ------------------------------------*\
     #ROUND
 \*------------------------------------ */
/**
  * A utility class to make elements ‘round’.
  */
.jpmmps .u-round {
  border-radius: 50%;
}

/* ------------------------------------*\
     #TEXT-ALIGN
 \*------------------------------------ */
/**
  * Helper classes to align elements either left, right or center.
  */
.jpmmps .u-m-xxsmall {
  margin: 4px !important;
}
.jpmmps .u-m-xsmall {
  margin: 8px !important;
}
.jpmmps .u-m-small {
  margin: 16px !important;
}
.jpmmps .u-m {
  margin: 24px !important;
}
.jpmmps .u-m-large {
  margin: 32px !important;
}
.jpmmps .u-m-xlarge {
  margin: 64px !important;
}
.jpmmps .u-m-none {
  margin: 0 !important;
}
.jpmmps .u-mt-xxsmall {
  margin-top: 4px !important;
}
.jpmmps .u-mt-xsmall {
  margin-top: 8px !important;
}
.jpmmps .u-mt-small {
  margin-top: 16px !important;
}
.jpmmps .u-mt {
  margin-top: 24px !important;
}
.jpmmps .u-mt-large {
  margin-top: 32px !important;
}
.jpmmps .u-mt-xlarge {
  margin-top: 64px !important;
}
.jpmmps .u-mt-none {
  margin-top: 0 !important;
}
.jpmmps .u-mr-xxsmall {
  margin-right: 4px !important;
}
.jpmmps .u-mr-xsmall {
  margin-right: 8px !important;
}
.jpmmps .u-mr-small {
  margin-right: 16px !important;
}
.jpmmps .u-mr {
  margin-right: 0px !important;
}
.jpmmps .u-mr-large {
  margin-right: 32px !important;
}
.jpmmps .u-mr-xlarge {
  margin-right: 64px !important;
}
.jpmmps .u-mr-none {
  margin-right: 0 !important;
}
.jpmmps .u-mb-xxsmall {
  margin-bottom: 4px !important;
}
.jpmmps .u-mb-xsmall {
  margin-bottom: 8px !important;
}
.jpmmps .u-mb-small {
  margin-bottom: 16px !important;
}
.jpmmps .u-mb {
  margin-bottom: 32px !important;
}
.jpmmps .u-mb-large {
  margin-bottom: 32px !important;
}
.jpmmps .u-mb-xlarge {
  margin-bottom: 64px !important;
}
.jpmmps .u-mb-none {
  margin-bottom: 8px !important;
}
.jpmmps .u-ml-xxsmall {
  margin-left: 4px !important;
}
.jpmmps .u-ml-xsmall {
  margin-left: 8px !important;
}
.jpmmps .u-ml-small {
  margin-left: 16px !important;
}
.jpmmps .u-ml {
  margin-left: 24px !important;
}
.jpmmps .u-ml-large {
  margin-left: 32px !important;
}
.jpmmps .u-ml-xlarge {
  margin-left: 64px !important;
}
.jpmmps .u-ml-none {
  margin-left: 0 !important;
}
.jpmmps .u-mh-xxsmall {
  margin-left: 4px !important;
  margin-right: 4px !important;
}
.jpmmps .u-mh-xsmall {
  margin-left: 8px !important;
  margin-right: 8px !important;
}
.jpmmps .u-mh-small {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
.jpmmps .u-mh {
  margin-left: 24px !important;
  margin-right: 24px !important;
}
.jpmmps .u-mh-large {
  margin-left: 32px !important;
  margin-right: 32px !important;
}
.jpmmps .u-mh-xlarge {
  margin-left: 64px !important;
  margin-right: 64px !important;
}
.jpmmps .u-mh-none {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.jpmmps .u-mv-xxsmall {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
.jpmmps .u-mv-xsmall {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
.jpmmps .u-mv-small {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}
.jpmmps .u-mv {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}
.jpmmps .u-mv-large {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}
.jpmmps .u-mv-xlarge {
  margin-top: 64px !important;
  margin-bottom: 64px !important;
}
.jpmmps .u-mv-none {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.jpmmps .u-p-xxsmall {
  padding: 4px !important;
}
.jpmmps .u-p-xsmall {
  padding: 8px !important;
}
.jpmmps .u-p-small {
  padding: 16px !important;
}
.jpmmps .u-p {
  padding: 24px !important;
}
.jpmmps .u-p-large {
  padding: 32px !important;
}
.jpmmps .u-p-xlarge {
  padding: 64px !important;
}
.jpmmps .u-p-none {
  padding: 0 !important;
}
.jpmmps .u-pt-xxsmall {
  padding-top: 4px !important;
}
.jpmmps .u-pt-xsmall {
  padding-top: 8px !important;
}
.jpmmps .u-pt-small {
  padding-top: 16px !important;
}
.jpmmps .u-pt {
  padding-top: 24px !important;
}
.jpmmps .u-pt-large {
  padding-top: 32px !important;
}
.jpmmps .u-pt-xlarge {
  padding-top: 64px !important;
}
.jpmmps .u-pt-none {
  padding-top: 0 !important;
}
.jpmmps .u-pr-xxsmall {
  padding-right: 4px !important;
}
.jpmmps .u-pr-xsmall {
  padding-right: 8px !important;
}
.jpmmps .u-pr-small {
  padding-right: 16px !important;
}
.jpmmps .u-pr {
  padding-right: 24px !important;
}
.jpmmps .u-pr-large {
  padding-right: 32px !important;
}
.jpmmps .u-pr-xlarge {
  padding-right: 64px !important;
}
.jpmmps .u-pr-none {
  padding-right: 0 !important;
}
.jpmmps .u-pb-xxsmall {
  padding-bottom: 4px !important;
}
.jpmmps .u-pb-xsmall {
  padding-bottom: 8px !important;
}
.jpmmps .u-pb-small {
  padding-bottom: 16px !important;
}
.jpmmps .u-pb {
  padding-bottom: 24px !important;
  display: flex;
}
.jpmmps .u-pb-large {
  padding-bottom: 32px !important;
}
.jpmmps .u-pb-xlarge {
  padding-bottom: 64px !important;
}
.jpmmps .u-pb-none {
  padding-bottom: 0 !important;
}
.jpmmps .u-pl-xxsmall {
  padding-left: 4px !important;
}
.jpmmps .u-pl-xsmall {
  padding-left: 8px !important;
}
.jpmmps .u-pl-small {
  padding-left: 16px !important;
}
.jpmmps .u-pl {
  padding-left: 24px !important;
}
.jpmmps .u-pl-large {
  padding-left: 32px !important;
}
.jpmmps .u-pl-xlarge {
  padding-left: 64px !important;
}
.jpmmps .u-pl-none {
  padding-left: 0 !important;
}
.jpmmps .u-ph-xxsmall {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.jpmmps .u-ph-xsmall {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.jpmmps .u-ph-small {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.jpmmps .u-ph {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.jpmmps .u-ph-large {
  padding-left: 32px !important;
  padding-right: 32px !important;
}
.jpmmps .u-ph-xlarge {
  padding-left: 64px !important;
  padding-right: 64px !important;
}
.jpmmps .u-ph-none {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.jpmmps .u-pv-xxsmall {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.jpmmps .u-pv-xsmall {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.jpmmps .u-pv-small {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
.jpmmps .u-pv {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
.jpmmps .u-pv-large {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
.jpmmps .u-pv-xlarge {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
.jpmmps .u-pv-none {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.jpmmps .u-text-left {
  text-align: left !important;
}
.jpmmps .u-text-right {
  text-align: right !important;
}
.jpmmps .u-text-right.c-link.remove.u-text-right {
  text-decoration: none !important;
  color: #161616 !important;
  text-transform: uppercase;
}
.jpmmps .u-text-right.c-link.remove.u-text-right:hover {
  text-decoration: none !important;
}
.jpmmps .u-text-right .c-link__effect {
  text-decoration: none !important;
  color: #161616 !important;
}
.jpmmps .u-text-right .c-link__effect:hover {
  text-decoration: none !important;
}
.jpmmps .u-text-center {
  text-align: center !important;
}

@media (max-width: 1920px) {
  .jpmmps .u-m-xxsmall\@xxl {
    margin: 4px !important;
  }
  .jpmmps .u-m-xsmall\@xxl {
    margin: 8px !important;
  }
  .jpmmps .u-m-small\@xxl {
    margin: 16px !important;
  }
  .jpmmps .u-m\@xxl {
    margin: 24px !important;
  }
  .jpmmps .u-m-large\@xxl {
    margin: 32px !important;
  }
  .jpmmps .u-m-xlarge\@xxl {
    margin: 64px !important;
  }
  .jpmmps .u-m-none\@xxl {
    margin: 0 !important;
  }
  .jpmmps .u-mt-xxsmall\@xxl {
    margin-top: 4px !important;
  }
  .jpmmps .u-mt-xsmall\@xxl {
    margin-top: 8px !important;
  }
  .jpmmps .u-mt-small\@xxl {
    margin-top: 16px !important;
  }
  .jpmmps .u-mt\@xxl {
    margin-top: 24px !important;
  }
  .jpmmps .u-mt-large\@xxl {
    margin-top: 32px !important;
  }
  .jpmmps .u-mt-xlarge\@xxl {
    margin-top: 64px !important;
  }
  .jpmmps .u-mt-none\@xxl {
    margin-top: 0 !important;
  }
  .jpmmps .u-mr-xxsmall\@xxl {
    margin-right: 4px !important;
  }
  .jpmmps .u-mr-xsmall\@xxl {
    margin-right: 8px !important;
  }
  .jpmmps .u-mr-small\@xxl {
    margin-right: 16px !important;
  }
  .jpmmps .u-mr\@xxl {
    margin-right: 24px !important;
  }
  .jpmmps .u-mr-large\@xxl {
    margin-right: 32px !important;
  }
  .jpmmps .u-mr-xlarge\@xxl {
    margin-right: 64px !important;
  }
  .jpmmps .u-mr-none\@xxl {
    margin-right: 0 !important;
  }
  .jpmmps .u-mb-xxsmall\@xxl {
    margin-bottom: 4px !important;
  }
  .jpmmps .u-mb-xsmall\@xxl {
    margin-bottom: 8px !important;
  }
  .jpmmps .u-mb-small\@xxl {
    margin-bottom: 16px !important;
  }
  .jpmmps .u-mb\@xxl {
    margin-bottom: 24px !important;
  }
  .jpmmps .u-mb-large\@xxl {
    margin-bottom: 32px !important;
  }
  .jpmmps .u-mb-xlarge\@xxl {
    margin-bottom: 64px !important;
  }
  .jpmmps .u-mb-none\@xxl {
    margin-bottom: 0 !important;
  }
  .jpmmps .u-ml-xxsmall\@xxl {
    margin-left: 4px !important;
  }
  .jpmmps .u-ml-xsmall\@xxl {
    margin-left: 8px !important;
  }
  .jpmmps .u-ml-small\@xxl {
    margin-left: 16px !important;
  }
  .jpmmps .u-ml\@xxl {
    margin-left: 24px !important;
  }
  .jpmmps .u-ml-large\@xxl {
    margin-left: 32px !important;
  }
  .jpmmps .u-ml-xlarge\@xxl {
    margin-left: 64px !important;
  }
  .jpmmps .u-ml-none\@xxl {
    margin-left: 0 !important;
  }
  .jpmmps .u-mh-xxsmall\@xxl {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .jpmmps .u-mh-xsmall\@xxl {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .jpmmps .u-mh-small\@xxl {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .jpmmps .u-mh\@xxl {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  .jpmmps .u-mh-large\@xxl {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }
  .jpmmps .u-mh-xlarge\@xxl {
    margin-left: 64px !important;
    margin-right: 64px !important;
  }
  .jpmmps .u-mh-none\@xxl {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .jpmmps .u-mv-xxsmall\@xxl {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .jpmmps .u-mv-xsmall\@xxl {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .jpmmps .u-mv-small\@xxl {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .jpmmps .u-mv\@xxl {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .jpmmps .u-mv-large\@xxl {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .jpmmps .u-mv-xlarge\@xxl {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
  }
  .jpmmps .u-mv-none\@xxl {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .jpmmps .u-p-xxsmall\@xxl {
    padding: 4px !important;
  }
  .jpmmps .u-p-xsmall\@xxl {
    padding: 8px !important;
  }
  .jpmmps .u-p-small\@xxl {
    padding: 16px !important;
  }
  .jpmmps .u-p\@xxl {
    padding: 24px !important;
  }
  .jpmmps .u-p-large\@xxl {
    padding: 32px !important;
  }
  .jpmmps .u-p-xlarge\@xxl {
    padding: 64px !important;
  }
  .jpmmps .u-p-none\@xxl {
    padding: 0 !important;
  }
  .jpmmps .u-pt-xxsmall\@xxl {
    padding-top: 4px !important;
  }
  .jpmmps .u-pt-xsmall\@xxl {
    padding-top: 8px !important;
  }
  .jpmmps .u-pt-small\@xxl {
    padding-top: 16px !important;
  }
  .jpmmps .u-pt\@xxl {
    padding-top: 24px !important;
  }
  .jpmmps .u-pt-large\@xxl {
    padding-top: 32px !important;
  }
  .jpmmps .u-pt-xlarge\@xxl {
    padding-top: 64px !important;
  }
  .jpmmps .u-pt-none\@xxl {
    padding-top: 0 !important;
  }
  .jpmmps .u-pr-xxsmall\@xxl {
    padding-right: 4px !important;
  }
  .jpmmps .u-pr-xsmall\@xxl {
    padding-right: 8px !important;
  }
  .jpmmps .u-pr-small\@xxl {
    padding-right: 16px !important;
  }
  .jpmmps .u-pr\@xxl {
    padding-right: 24px !important;
  }
  .jpmmps .u-pr-large\@xxl {
    padding-right: 32px !important;
  }
  .jpmmps .u-pr-xlarge\@xxl {
    padding-right: 64px !important;
  }
  .jpmmps .u-pr-none\@xxl {
    padding-right: 0 !important;
  }
  .jpmmps .u-pb-xxsmall\@xxl {
    padding-bottom: 4px !important;
  }
  .jpmmps .u-pb-xsmall\@xxl {
    padding-bottom: 8px !important;
  }
  .jpmmps .u-pb-small\@xxl {
    padding-bottom: 16px !important;
  }
  .jpmmps .u-pb\@xxl {
    padding-bottom: 24px !important;
  }
  .jpmmps .u-pb-large\@xxl {
    padding-bottom: 32px !important;
  }
  .jpmmps .u-pb-xlarge\@xxl {
    padding-bottom: 64px !important;
  }
  .jpmmps .u-pb-none\@xxl {
    padding-bottom: 0 !important;
  }
  .jpmmps .u-pl-xxsmall\@xxl {
    padding-left: 4px !important;
  }
  .jpmmps .u-pl-xsmall\@xxl {
    padding-left: 8px !important;
  }
  .jpmmps .u-pl-small\@xxl {
    padding-left: 16px !important;
  }
  .jpmmps .u-pl\@xxl {
    padding-left: 24px !important;
  }
  .jpmmps .u-pl-large\@xxl {
    padding-left: 32px !important;
  }
  .jpmmps .u-pl-xlarge\@xxl {
    padding-left: 64px !important;
  }
  .jpmmps .u-pl-none\@xxl {
    padding-left: 0 !important;
  }
  .jpmmps .u-ph-xxsmall\@xxl {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .jpmmps .u-ph-xsmall\@xxl {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .jpmmps .u-ph-small\@xxl {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .jpmmps .u-ph\@xxl {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .jpmmps .u-ph-large\@xxl {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .jpmmps .u-ph-xlarge\@xxl {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .jpmmps .u-ph-none\@xxl {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .jpmmps .u-pv-xxsmall\@xxl {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .jpmmps .u-pv-xsmall\@xxl {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .jpmmps .u-pv-small\@xxl {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .jpmmps .u-pv\@xxl {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .jpmmps .u-pv-large\@xxl {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .jpmmps .u-pv-xlarge\@xxl {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .jpmmps .u-pv-none\@xxl {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .jpmmps .u-text-left\@xxl {
    text-align: left !important;
  }
  .jpmmps .u-text-right\@xxl {
    text-align: right !important;
  }
  .jpmmps .u-text-center\@xxl {
    text-align: center !important;
  }
}
@media (max-width: 1600px) {
  .jpmmps .u-m-xxsmall\@xl {
    margin: 4px !important;
  }
  .jpmmps .u-m-xsmall\@xl {
    margin: 8px !important;
  }
  .jpmmps .u-m-small\@xl {
    margin: 16px !important;
  }
  .jpmmps .u-m\@xl {
    margin: 24px !important;
  }
  .jpmmps .u-m-large\@xl {
    margin: 32px !important;
  }
  .jpmmps .u-m-xlarge\@xl {
    margin: 64px !important;
  }
  .jpmmps .u-m-none\@xl {
    margin: 0 !important;
  }
  .jpmmps .u-mt-xxsmall\@xl {
    margin-top: 4px !important;
  }
  .jpmmps .u-mt-xsmall\@xl {
    margin-top: 8px !important;
  }
  .jpmmps .u-mt-small\@xl {
    margin-top: 16px !important;
  }
  .jpmmps .u-mt\@xl {
    margin-top: 24px !important;
  }
  .jpmmps .u-mt-large\@xl {
    margin-top: 32px !important;
  }
  .jpmmps .u-mt-xlarge\@xl {
    margin-top: 64px !important;
  }
  .jpmmps .u-mt-none\@xl {
    margin-top: 0 !important;
  }
  .jpmmps .u-mr-xxsmall\@xl {
    margin-right: 4px !important;
  }
  .jpmmps .u-mr-xsmall\@xl {
    margin-right: 8px !important;
  }
  .jpmmps .u-mr-small\@xl {
    margin-right: 16px !important;
  }
  .jpmmps .u-mr\@xl {
    margin-right: 24px !important;
  }
  .jpmmps .u-mr-large\@xl {
    margin-right: 32px !important;
  }
  .jpmmps .u-mr-xlarge\@xl {
    margin-right: 64px !important;
  }
  .jpmmps .u-mr-none\@xl {
    margin-right: 0 !important;
  }
  .jpmmps .u-mb-xxsmall\@xl {
    margin-bottom: 4px !important;
  }
  .jpmmps .u-mb-xsmall\@xl {
    margin-bottom: 8px !important;
  }
  .jpmmps .u-mb-small\@xl {
    margin-bottom: 16px !important;
  }
  .jpmmps .u-mb\@xl {
    margin-bottom: 24px !important;
  }
  .jpmmps .u-mb-large\@xl {
    margin-bottom: 32px !important;
  }
  .jpmmps .u-mb-xlarge\@xl {
    margin-bottom: 64px !important;
  }
  .jpmmps .u-mb-none\@xl {
    margin-bottom: 0 !important;
  }
  .jpmmps .u-ml-xxsmall\@xl {
    margin-left: 4px !important;
  }
  .jpmmps .u-ml-xsmall\@xl {
    margin-left: 8px !important;
  }
  .jpmmps .u-ml-small\@xl {
    margin-left: 16px !important;
  }
  .jpmmps .u-ml\@xl {
    margin-left: 24px !important;
  }
  .jpmmps .u-ml-large\@xl {
    margin-left: 32px !important;
  }
  .jpmmps .u-ml-xlarge\@xl {
    margin-left: 64px !important;
  }
  .jpmmps .u-ml-none\@xl {
    margin-left: 0 !important;
  }
  .jpmmps .u-mh-xxsmall\@xl {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .jpmmps .u-mh-xsmall\@xl {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .jpmmps .u-mh-small\@xl {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .jpmmps .u-mh\@xl {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  .jpmmps .u-mh-large\@xl {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }
  .jpmmps .u-mh-xlarge\@xl {
    margin-left: 64px !important;
    margin-right: 64px !important;
  }
  .jpmmps .u-mh-none\@xl {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .jpmmps .u-mv-xxsmall\@xl {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .jpmmps .u-mv-xsmall\@xl {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .jpmmps .u-mv-small\@xl {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .jpmmps .u-mv\@xl {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .jpmmps .u-mv-large\@xl {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .jpmmps .u-mv-xlarge\@xl {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
  }
  .jpmmps .u-mv-none\@xl {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .jpmmps .u-p-xxsmall\@xl {
    padding: 4px !important;
  }
  .jpmmps .u-p-xsmall\@xl {
    padding: 8px !important;
  }
  .jpmmps .u-p-small\@xl {
    padding: 16px !important;
  }
  .jpmmps .u-p\@xl {
    padding: 24px !important;
  }
  .jpmmps .u-p-large\@xl {
    padding: 32px !important;
  }
  .jpmmps .u-p-xlarge\@xl {
    padding: 64px !important;
  }
  .jpmmps .u-p-none\@xl {
    padding: 0 !important;
  }
  .jpmmps .u-pt-xxsmall\@xl {
    padding-top: 4px !important;
  }
  .jpmmps .u-pt-xsmall\@xl {
    padding-top: 8px !important;
  }
  .jpmmps .u-pt-small\@xl {
    padding-top: 16px !important;
  }
  .jpmmps .u-pt\@xl {
    padding-top: 24px !important;
  }
  .jpmmps .u-pt-large\@xl {
    padding-top: 32px !important;
  }
  .jpmmps .u-pt-xlarge\@xl {
    padding-top: 64px !important;
  }
  .jpmmps .u-pt-none\@xl {
    padding-top: 0 !important;
  }
  .jpmmps .u-pr-xxsmall\@xl {
    padding-right: 4px !important;
  }
  .jpmmps .u-pr-xsmall\@xl {
    padding-right: 8px !important;
  }
  .jpmmps .u-pr-small\@xl {
    padding-right: 16px !important;
  }
  .jpmmps .u-pr\@xl {
    padding-right: 24px !important;
  }
  .jpmmps .u-pr-large\@xl {
    padding-right: 32px !important;
  }
  .jpmmps .u-pr-xlarge\@xl {
    padding-right: 64px !important;
  }
  .jpmmps .u-pr-none\@xl {
    padding-right: 0 !important;
  }
  .jpmmps .u-pb-xxsmall\@xl {
    padding-bottom: 4px !important;
  }
  .jpmmps .u-pb-xsmall\@xl {
    padding-bottom: 8px !important;
  }
  .jpmmps .u-pb-small\@xl {
    padding-bottom: 16px !important;
  }
  .jpmmps .u-pb\@xl {
    padding-bottom: 24px !important;
  }
  .jpmmps .u-pb-large\@xl {
    padding-bottom: 32px !important;
  }
  .jpmmps .u-pb-xlarge\@xl {
    padding-bottom: 64px !important;
  }
  .jpmmps .u-pb-none\@xl {
    padding-bottom: 0 !important;
  }
  .jpmmps .u-pl-xxsmall\@xl {
    padding-left: 4px !important;
  }
  .jpmmps .u-pl-xsmall\@xl {
    padding-left: 8px !important;
  }
  .jpmmps .u-pl-small\@xl {
    padding-left: 16px !important;
  }
  .jpmmps .u-pl\@xl {
    padding-left: 24px !important;
  }
  .jpmmps .u-pl-large\@xl {
    padding-left: 32px !important;
  }
  .jpmmps .u-pl-xlarge\@xl {
    padding-left: 64px !important;
  }
  .jpmmps .u-pl-none\@xl {
    padding-left: 0 !important;
  }
  .jpmmps .u-ph-xxsmall\@xl {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .jpmmps .u-ph-xsmall\@xl {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .jpmmps .u-ph-small\@xl {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .jpmmps .u-ph\@xl {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .jpmmps .u-ph-large\@xl {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .jpmmps .u-ph-xlarge\@xl {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .jpmmps .u-ph-none\@xl {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .jpmmps .u-pv-xxsmall\@xl {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .jpmmps .u-pv-xsmall\@xl {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .jpmmps .u-pv-small\@xl {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .jpmmps .u-pv\@xl {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .jpmmps .u-pv-large\@xl {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .jpmmps .u-pv-xlarge\@xl {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .jpmmps .u-pv-none\@xl {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .jpmmps .u-text-left\@xl {
    text-align: left !important;
  }
  .jpmmps .u-text-right\@xl {
    text-align: right !important;
  }
  .jpmmps .u-text-center\@xl {
    text-align: center !important;
  }
}
@media (max-width: 1280px) {
  .jpmmps .u-m-xxsmall\@l {
    margin: 4px !important;
  }
  .jpmmps .u-m-xsmall\@l {
    margin: 8px !important;
  }
  .jpmmps .u-m-small\@l {
    margin: 16px !important;
  }
  .jpmmps .u-m\@l {
    margin: 24px !important;
  }
  .jpmmps .u-m-large\@l {
    margin: 32px !important;
  }
  .jpmmps .u-m-xlarge\@l {
    margin: 64px !important;
  }
  .jpmmps .u-m-none\@l {
    margin: 0 !important;
  }
  .jpmmps .u-mt-xxsmall\@l {
    margin-top: 4px !important;
  }
  .jpmmps .u-mt-xsmall\@l {
    margin-top: 8px !important;
  }
  .jpmmps .u-mt-small\@l {
    margin-top: 16px !important;
  }
  .jpmmps .u-mt\@l {
    margin-top: 24px !important;
  }
  .jpmmps .u-mt-large\@l {
    margin-top: 32px !important;
  }
  .jpmmps .u-mt-xlarge\@l {
    margin-top: 64px !important;
  }
  .jpmmps .u-mt-none\@l {
    margin-top: 0 !important;
  }
  .jpmmps .u-mr-xxsmall\@l {
    margin-right: 4px !important;
  }
  .jpmmps .u-mr-xsmall\@l {
    margin-right: 8px !important;
  }
  .jpmmps .u-mr-small\@l {
    margin-right: 16px !important;
  }
  .jpmmps .u-mr\@l {
    margin-right: 24px !important;
  }
  .jpmmps .u-mr-large\@l {
    margin-right: 32px !important;
  }
  .jpmmps .u-mr-xlarge\@l {
    margin-right: 64px !important;
  }
  .jpmmps .u-mr-none\@l {
    margin-right: 0 !important;
  }
  .jpmmps .u-mb-xxsmall\@l {
    margin-bottom: 4px !important;
  }
  .jpmmps .u-mb-xsmall\@l {
    margin-bottom: 8px !important;
  }
  .jpmmps .u-mb-small\@l {
    margin-bottom: 16px !important;
  }
  .jpmmps .u-mb\@l {
    margin-bottom: 24px !important;
  }
  .jpmmps .u-mb-large\@l {
    margin-bottom: 32px !important;
  }
  .jpmmps .u-mb-xlarge\@l {
    margin-bottom: 64px !important;
  }
  .jpmmps .u-mb-none\@l {
    margin-bottom: 0 !important;
  }
  .jpmmps .u-ml-xxsmall\@l {
    margin-left: 4px !important;
  }
  .jpmmps .u-ml-xsmall\@l {
    margin-left: 8px !important;
  }
  .jpmmps .u-ml-small\@l {
    margin-left: 16px !important;
  }
  .jpmmps .u-ml\@l {
    margin-left: 24px !important;
  }
  .jpmmps .u-ml-large\@l {
    margin-left: 32px !important;
  }
  .jpmmps .u-ml-xlarge\@l {
    margin-left: 64px !important;
  }
  .jpmmps .u-ml-none\@l {
    margin-left: 0 !important;
  }
  .jpmmps .u-mh-xxsmall\@l {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .jpmmps .u-mh-xsmall\@l {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .jpmmps .u-mh-small\@l {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .jpmmps .u-mh\@l {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  .jpmmps .u-mh-large\@l {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }
  .jpmmps .u-mh-xlarge\@l {
    margin-left: 64px !important;
    margin-right: 64px !important;
  }
  .jpmmps .u-mh-none\@l {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .jpmmps .u-mv-xxsmall\@l {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .jpmmps .u-mv-xsmall\@l {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .jpmmps .u-mv-small\@l {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .jpmmps .u-mv\@l {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .jpmmps .u-mv-large\@l {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .jpmmps .u-mv-xlarge\@l {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
  }
  .jpmmps .u-mv-none\@l {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .jpmmps .u-p-xxsmall\@l {
    padding: 4px !important;
  }
  .jpmmps .u-p-xsmall\@l {
    padding: 8px !important;
  }
  .jpmmps .u-p-small\@l {
    padding: 16px !important;
  }
  .jpmmps .u-p\@l {
    padding: 24px !important;
  }
  .jpmmps .u-p-large\@l {
    padding: 32px !important;
  }
  .jpmmps .u-p-xlarge\@l {
    padding: 64px !important;
  }
  .jpmmps .u-p-none\@l {
    padding: 0 !important;
  }
  .jpmmps .u-pt-xxsmall\@l {
    padding-top: 4px !important;
  }
  .jpmmps .u-pt-xsmall\@l {
    padding-top: 8px !important;
  }
  .jpmmps .u-pt-small\@l {
    padding-top: 16px !important;
  }
  .jpmmps .u-pt\@l {
    padding-top: 24px !important;
  }
  .jpmmps .u-pt-large\@l {
    padding-top: 32px !important;
  }
  .jpmmps .u-pt-xlarge\@l {
    padding-top: 64px !important;
  }
  .jpmmps .u-pt-none\@l {
    padding-top: 0 !important;
  }
  .jpmmps .u-pr-xxsmall\@l {
    padding-right: 4px !important;
  }
  .jpmmps .u-pr-xsmall\@l {
    padding-right: 8px !important;
  }
  .jpmmps .u-pr-small\@l {
    padding-right: 16px !important;
  }
  .jpmmps .u-pr\@l {
    padding-right: 24px !important;
  }
  .jpmmps .u-pr-large\@l {
    padding-right: 32px !important;
  }
  .jpmmps .u-pr-xlarge\@l {
    padding-right: 64px !important;
  }
  .jpmmps .u-pr-none\@l {
    padding-right: 0 !important;
  }
  .jpmmps .u-pb-xxsmall\@l {
    padding-bottom: 4px !important;
  }
  .jpmmps .u-pb-xsmall\@l {
    padding-bottom: 8px !important;
  }
  .jpmmps .u-pb-small\@l {
    padding-bottom: 16px !important;
  }
  .jpmmps .u-pb\@l {
    padding-bottom: 24px !important;
  }
  .jpmmps .u-pb-large\@l {
    padding-bottom: 32px !important;
  }
  .jpmmps .u-pb-xlarge\@l {
    padding-bottom: 64px !important;
  }
  .jpmmps .u-pb-none\@l {
    padding-bottom: 0 !important;
  }
  .jpmmps .u-pl-xxsmall\@l {
    padding-left: 4px !important;
  }
  .jpmmps .u-pl-xsmall\@l {
    padding-left: 8px !important;
  }
  .jpmmps .u-pl-small\@l {
    padding-left: 16px !important;
  }
  .jpmmps .u-pl\@l {
    padding-left: 24px !important;
  }
  .jpmmps .u-pl-large\@l {
    padding-left: 32px !important;
  }
  .jpmmps .u-pl-xlarge\@l {
    padding-left: 64px !important;
  }
  .jpmmps .u-pl-none\@l {
    padding-left: 0 !important;
  }
  .jpmmps .u-ph-xxsmall\@l {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .jpmmps .u-ph-xsmall\@l {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .jpmmps .u-ph-small\@l {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .jpmmps .u-ph\@l {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .jpmmps .u-ph-large\@l {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .jpmmps .u-ph-xlarge\@l {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .jpmmps .u-ph-none\@l {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .jpmmps .u-pv-xxsmall\@l {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .jpmmps .u-pv-xsmall\@l {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .jpmmps .u-pv-small\@l {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .jpmmps .u-pv\@l {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .jpmmps .u-pv-large\@l {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .jpmmps .u-pv-xlarge\@l {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .jpmmps .u-pv-none\@l {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .jpmmps .u-text-left\@l {
    text-align: left !important;
  }
  .jpmmps .u-text-right\@l {
    text-align: right !important;
  }
  .jpmmps .u-text-center\@l {
    text-align: center !important;
  }
}
@media (max-width: 960px) {
  .jpmmps .u-m-xxsmall\@m {
    margin: 4px !important;
  }
  .jpmmps .u-m-xsmall\@m {
    margin: 8px !important;
  }
  .jpmmps .u-m-small\@m {
    margin: 16px !important;
  }
  .jpmmps .u-m\@m {
    margin: 24px !important;
  }
  .jpmmps .u-m-large\@m {
    margin: 32px !important;
  }
  .jpmmps .u-m-xlarge\@m {
    margin: 64px !important;
  }
  .jpmmps .u-m-none\@m {
    margin: 0 !important;
  }
  .jpmmps .u-mt-xxsmall\@m {
    margin-top: 4px !important;
  }
  .jpmmps .u-mt-xsmall\@m {
    margin-top: 8px !important;
  }
  .jpmmps .u-mt-small\@m {
    margin-top: 16px !important;
  }
  .jpmmps .u-mt\@m {
    margin-top: 24px !important;
  }
  .jpmmps .u-mt-large\@m {
    margin-top: 32px !important;
  }
  .jpmmps .u-mt-xlarge\@m {
    margin-top: 64px !important;
  }
  .jpmmps .u-mt-none\@m {
    margin-top: 0 !important;
  }
  .jpmmps .u-mr-xxsmall\@m {
    margin-right: 4px !important;
  }
  .jpmmps .u-mr-xsmall\@m {
    margin-right: 8px !important;
  }
  .jpmmps .u-mr-small\@m {
    margin-right: 16px !important;
  }
  .jpmmps .u-mr\@m {
    margin-right: 24px !important;
  }
  .jpmmps .u-mr-large\@m {
    margin-right: 32px !important;
  }
  .jpmmps .u-mr-xlarge\@m {
    margin-right: 64px !important;
  }
  .jpmmps .u-mr-none\@m {
    margin-right: 0 !important;
  }
  .jpmmps .u-mb-xxsmall\@m {
    margin-bottom: 4px !important;
  }
  .jpmmps .u-mb-xsmall\@m {
    margin-bottom: 8px !important;
  }
  .jpmmps .u-mb-small\@m {
    margin-bottom: 16px !important;
  }
  .jpmmps .u-mb\@m {
    margin-bottom: 24px !important;
  }
  .jpmmps .u-mb-large\@m {
    margin-bottom: 32px !important;
  }
  .jpmmps .u-mb-xlarge\@m {
    margin-bottom: 64px !important;
  }
  .jpmmps .u-mb-none\@m {
    margin-bottom: 0 !important;
  }
  .jpmmps .u-ml-xxsmall\@m {
    margin-left: 4px !important;
  }
  .jpmmps .u-ml-xsmall\@m {
    margin-left: 8px !important;
  }
  .jpmmps .u-ml-small\@m {
    margin-left: 16px !important;
  }
  .jpmmps .u-ml\@m {
    margin-left: 24px !important;
  }
  .jpmmps .u-ml-large\@m {
    margin-left: 32px !important;
  }
  .jpmmps .u-ml-xlarge\@m {
    margin-left: 64px !important;
  }
  .jpmmps .u-ml-none\@m {
    margin-left: 0 !important;
  }
  .jpmmps .u-mh-xxsmall\@m {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .jpmmps .u-mh-xsmall\@m {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .jpmmps .u-mh-small\@m {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .jpmmps .u-mh\@m {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  .jpmmps .u-mh-large\@m {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }
  .jpmmps .u-mh-xlarge\@m {
    margin-left: 64px !important;
    margin-right: 64px !important;
  }
  .jpmmps .u-mh-none\@m {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .jpmmps .u-mv-xxsmall\@m {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .jpmmps .u-mv-xsmall\@m {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .jpmmps .u-mv-small\@m {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .jpmmps .u-mv\@m {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .jpmmps .u-mv-large\@m {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .jpmmps .u-mv-xlarge\@m {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
  }
  .jpmmps .u-mv-none\@m {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .jpmmps .u-p-xxsmall\@m {
    padding: 4px !important;
  }
  .jpmmps .u-p-xsmall\@m {
    padding: 8px !important;
  }
  .jpmmps .u-p-small\@m {
    padding: 16px !important;
  }
  .jpmmps .u-p\@m {
    padding: 24px !important;
  }
  .jpmmps .u-p-large\@m {
    padding: 32px !important;
  }
  .jpmmps .u-p-xlarge\@m {
    padding: 64px !important;
  }
  .jpmmps .u-p-none\@m {
    padding: 0 !important;
  }
  .jpmmps .u-pt-xxsmall\@m {
    padding-top: 4px !important;
  }
  .jpmmps .u-pt-xsmall\@m {
    padding-top: 8px !important;
  }
  .jpmmps .u-pt-small\@m {
    padding-top: 16px !important;
  }
  .jpmmps .u-pt\@m {
    padding-top: 24px !important;
  }
  .jpmmps .u-pt-large\@m {
    padding-top: 32px !important;
  }
  .jpmmps .u-pt-xlarge\@m {
    padding-top: 64px !important;
  }
  .jpmmps .u-pt-none\@m {
    padding-top: 0 !important;
  }
  .jpmmps .u-pr-xxsmall\@m {
    padding-right: 4px !important;
  }
  .jpmmps .u-pr-xsmall\@m {
    padding-right: 8px !important;
  }
  .jpmmps .u-pr-small\@m {
    padding-right: 16px !important;
  }
  .jpmmps .u-pr\@m {
    padding-right: 24px !important;
  }
  .jpmmps .u-pr-large\@m {
    padding-right: 32px !important;
  }
  .jpmmps .u-pr-xlarge\@m {
    padding-right: 64px !important;
  }
  .jpmmps .u-pr-none\@m {
    padding-right: 0 !important;
  }
  .jpmmps .u-pb-xxsmall\@m {
    padding-bottom: 4px !important;
  }
  .jpmmps .u-pb-xsmall\@m {
    padding-bottom: 8px !important;
  }
  .jpmmps .u-pb-small\@m {
    padding-bottom: 16px !important;
  }
  .jpmmps .u-pb\@m {
    padding-bottom: 24px !important;
  }
  .jpmmps .u-pb-large\@m {
    padding-bottom: 32px !important;
  }
  .jpmmps .u-pb-xlarge\@m {
    padding-bottom: 64px !important;
  }
  .jpmmps .u-pb-none\@m {
    padding-bottom: 0 !important;
  }
  .jpmmps .u-pl-xxsmall\@m {
    padding-left: 4px !important;
  }
  .jpmmps .u-pl-xsmall\@m {
    padding-left: 8px !important;
  }
  .jpmmps .u-pl-small\@m {
    padding-left: 16px !important;
  }
  .jpmmps .u-pl\@m {
    padding-left: 24px !important;
  }
  .jpmmps .u-pl-large\@m {
    padding-left: 32px !important;
  }
  .jpmmps .u-pl-xlarge\@m {
    padding-left: 64px !important;
  }
  .jpmmps .u-pl-none\@m {
    padding-left: 0 !important;
  }
  .jpmmps .u-ph-xxsmall\@m {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .jpmmps .u-ph-xsmall\@m {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .jpmmps .u-ph-small\@m {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .jpmmps .u-ph\@m {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .jpmmps .u-ph-large\@m {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .jpmmps .u-ph-xlarge\@m {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .jpmmps .u-ph-none\@m {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .jpmmps .u-pv-xxsmall\@m {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .jpmmps .u-pv-xsmall\@m {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .jpmmps .u-pv-small\@m {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .jpmmps .u-pv\@m {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .jpmmps .u-pv-large\@m {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .jpmmps .u-pv-xlarge\@m {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .jpmmps .u-pv-none\@m {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .jpmmps .u-text-left\@m {
    text-align: left !important;
  }
  .jpmmps .u-text-right\@m {
    text-align: right !important;
  }
  .jpmmps .u-text-center\@m {
    text-align: center !important;
  }
}
@media (max-width: 720px) {
  .jpmmps .u-m-xxsmall\@s {
    margin: 4px !important;
  }
  .jpmmps .u-m-xsmall\@s {
    margin: 8px !important;
  }
  .jpmmps .u-m-small\@s {
    margin: 16px !important;
  }
  .jpmmps .u-m\@s {
    margin: 24px !important;
  }
  .jpmmps .u-m-large\@s {
    margin: 32px !important;
  }
  .jpmmps .u-m-xlarge\@s {
    margin: 64px !important;
  }
  .jpmmps .u-m-none\@s {
    margin: 0 !important;
  }
  .jpmmps .u-mt-xxsmall\@s {
    margin-top: 4px !important;
  }
  .jpmmps .u-mt-xsmall\@s {
    margin-top: 8px !important;
  }
  .jpmmps .u-mt-small\@s {
    margin-top: 16px !important;
  }
  .jpmmps .u-mt\@s {
    margin-top: 24px !important;
  }
  .jpmmps .u-mt-large\@s {
    margin-top: 32px !important;
  }
  .jpmmps .u-mt-xlarge\@s {
    margin-top: 64px !important;
  }
  .jpmmps .u-mt-none\@s {
    margin-top: 0 !important;
  }
  .jpmmps .u-mr-xxsmall\@s {
    margin-right: 4px !important;
  }
  .jpmmps .u-mr-xsmall\@s {
    margin-right: 8px !important;
  }
  .jpmmps .u-mr-small\@s {
    margin-right: 16px !important;
  }
  .jpmmps .u-mr\@s {
    margin-right: 24px !important;
  }
  .jpmmps .u-mr-large\@s {
    margin-right: 32px !important;
  }
  .jpmmps .u-mr-xlarge\@s {
    margin-right: 64px !important;
  }
  .jpmmps .u-mr-none\@s {
    margin-right: 0 !important;
  }
  .jpmmps .u-mb-xxsmall\@s {
    margin-bottom: 4px !important;
  }
  .jpmmps .u-mb-xsmall\@s {
    margin-bottom: 8px !important;
  }
  .jpmmps .u-mb-small\@s {
    margin-bottom: 16px !important;
  }
  .jpmmps .u-mb\@s {
    margin-bottom: 24px !important;
  }
  .jpmmps .u-mb-large\@s {
    margin-bottom: 32px !important;
  }
  .jpmmps .u-mb-xlarge\@s {
    margin-bottom: 64px !important;
  }
  .jpmmps .u-mb-none\@s {
    margin-bottom: 0 !important;
  }
  .jpmmps .u-ml-xxsmall\@s {
    margin-left: 4px !important;
  }
  .jpmmps .u-ml-xsmall\@s {
    margin-left: 8px !important;
  }
  .jpmmps .u-ml-small\@s {
    margin-left: 16px !important;
  }
  .jpmmps .u-ml\@s {
    margin-left: 24px !important;
  }
  .jpmmps .u-ml-large\@s {
    margin-left: 32px !important;
  }
  .jpmmps .u-ml-xlarge\@s {
    margin-left: 64px !important;
  }
  .jpmmps .u-ml-none\@s {
    margin-left: 0 !important;
  }
  .jpmmps .u-mh-xxsmall\@s {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .jpmmps .u-mh-xsmall\@s {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .jpmmps .u-mh-small\@s {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .jpmmps .u-mh\@s {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  .jpmmps .u-mh-large\@s {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }
  .jpmmps .u-mh-xlarge\@s {
    margin-left: 64px !important;
    margin-right: 64px !important;
  }
  .jpmmps .u-mh-none\@s {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .jpmmps .u-mv-xxsmall\@s {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .jpmmps .u-mv-xsmall\@s {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .jpmmps .u-mv-small\@s {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .jpmmps .u-mv\@s {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .jpmmps .u-mv-large\@s {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .jpmmps .u-mv-xlarge\@s {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
  }
  .jpmmps .u-mv-none\@s {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .jpmmps .u-p-xxsmall\@s {
    padding: 4px !important;
  }
  .jpmmps .u-p-xsmall\@s {
    padding: 8px !important;
  }
  .jpmmps .u-p-small\@s {
    padding: 16px !important;
  }
  .jpmmps .u-p\@s {
    padding: 24px !important;
  }
  .jpmmps .u-p-large\@s {
    padding: 32px !important;
  }
  .jpmmps .u-p-xlarge\@s {
    padding: 64px !important;
  }
  .jpmmps .u-p-none\@s {
    padding: 0 !important;
  }
  .jpmmps .u-pt-xxsmall\@s {
    padding-top: 4px !important;
  }
  .jpmmps .u-pt-xsmall\@s {
    padding-top: 8px !important;
  }
  .jpmmps .u-pt-small\@s {
    padding-top: 16px !important;
  }
  .jpmmps .u-pt\@s {
    padding-top: 24px !important;
  }
  .jpmmps .u-pt-large\@s {
    padding-top: 32px !important;
  }
  .jpmmps .u-pt-xlarge\@s {
    padding-top: 64px !important;
  }
  .jpmmps .u-pt-none\@s {
    padding-top: 0 !important;
  }
  .jpmmps .u-pr-xxsmall\@s {
    padding-right: 4px !important;
  }
  .jpmmps .u-pr-xsmall\@s {
    padding-right: 8px !important;
  }
  .jpmmps .u-pr-small\@s {
    padding-right: 16px !important;
  }
  .jpmmps .u-pr\@s {
    padding-right: 24px !important;
  }
  .jpmmps .u-pr-large\@s {
    padding-right: 32px !important;
  }
  .jpmmps .u-pr-xlarge\@s {
    padding-right: 64px !important;
  }
  .jpmmps .u-pr-none\@s {
    padding-right: 0 !important;
  }
  .jpmmps .u-pb-xxsmall\@s {
    padding-bottom: 4px !important;
  }
  .jpmmps .u-pb-xsmall\@s {
    padding-bottom: 8px !important;
  }
  .jpmmps .u-pb-small\@s {
    padding-bottom: 16px !important;
  }
  .jpmmps .u-pb\@s {
    padding-bottom: 24px !important;
  }
  .jpmmps .u-pb-large\@s {
    padding-bottom: 32px !important;
  }
  .jpmmps .u-pb-xlarge\@s {
    padding-bottom: 64px !important;
  }
  .jpmmps .u-pb-none\@s {
    padding-bottom: 0 !important;
  }
  .jpmmps .u-pl-xxsmall\@s {
    padding-left: 4px !important;
  }
  .jpmmps .u-pl-xsmall\@s {
    padding-left: 8px !important;
  }
  .jpmmps .u-pl-small\@s {
    padding-left: 16px !important;
  }
  .jpmmps .u-pl\@s {
    padding-left: 24px !important;
  }
  .jpmmps .u-pl-large\@s {
    padding-left: 32px !important;
  }
  .jpmmps .u-pl-xlarge\@s {
    padding-left: 64px !important;
  }
  .jpmmps .u-pl-none\@s {
    padding-left: 0 !important;
  }
  .jpmmps .u-ph-xxsmall\@s {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .jpmmps .u-ph-xsmall\@s {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .jpmmps .u-ph-small\@s {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .jpmmps .u-ph\@s {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .jpmmps .u-ph-large\@s {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .jpmmps .u-ph-xlarge\@s {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .jpmmps .u-ph-none\@s {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .jpmmps .u-pv-xxsmall\@s {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .jpmmps .u-pv-xsmall\@s {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .jpmmps .u-pv-small\@s {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .jpmmps .u-pv\@s {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .jpmmps .u-pv-large\@s {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .jpmmps .u-pv-xlarge\@s {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .jpmmps .u-pv-none\@s {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .jpmmps .u-text-left\@s {
    text-align: left !important;
  }
  .jpmmps .u-text-right\@s {
    text-align: right !important;
  }
  .jpmmps .u-text-center\@s {
    text-align: center !important;
  }
}
@media (max-width: 480px) {
  .jpmmps .u-m-xxsmall\@xs {
    margin: 4px !important;
  }
  .jpmmps .u-m-xsmall\@xs {
    margin: 8px !important;
  }
  .jpmmps .u-m-small\@xs {
    margin: 16px !important;
  }
  .jpmmps .u-m\@xs {
    margin: 24px !important;
  }
  .jpmmps .u-m-large\@xs {
    margin: 32px !important;
  }
  .jpmmps .u-m-xlarge\@xs {
    margin: 64px !important;
  }
  .jpmmps .u-m-none\@xs {
    margin: 0 !important;
  }
  .jpmmps .u-mt-xxsmall\@xs {
    margin-top: 4px !important;
  }
  .jpmmps .u-mt-xsmall\@xs {
    margin-top: 8px !important;
  }
  .jpmmps .u-mt-small\@xs {
    margin-top: 16px !important;
  }
  .jpmmps .u-mt\@xs {
    margin-top: 24px !important;
  }
  .jpmmps .u-mt-large\@xs {
    margin-top: 32px !important;
  }
  .jpmmps .u-mt-xlarge\@xs {
    margin-top: 64px !important;
  }
  .jpmmps .u-mt-none\@xs {
    margin-top: 0 !important;
  }
  .jpmmps .u-mr-xxsmall\@xs {
    margin-right: 4px !important;
  }
  .jpmmps .u-mr-xsmall\@xs {
    margin-right: 8px !important;
  }
  .jpmmps .u-mr-small\@xs {
    margin-right: 16px !important;
  }
  .jpmmps .u-mr\@xs {
    margin-right: 24px !important;
  }
  .jpmmps .u-mr-large\@xs {
    margin-right: 32px !important;
  }
  .jpmmps .u-mr-xlarge\@xs {
    margin-right: 64px !important;
  }
  .jpmmps .u-mr-none\@xs {
    margin-right: 0 !important;
  }
  .jpmmps .u-mb-xxsmall\@xs {
    margin-bottom: 4px !important;
  }
  .jpmmps .u-mb-xsmall\@xs {
    margin-bottom: 8px !important;
  }
  .jpmmps .u-mb-small\@xs {
    margin-bottom: 16px !important;
  }
  .jpmmps .u-mb\@xs {
    margin-bottom: 24px !important;
  }
  .jpmmps .u-mb-large\@xs {
    margin-bottom: 32px !important;
  }
  .jpmmps .u-mb-xlarge\@xs {
    margin-bottom: 64px !important;
  }
  .jpmmps .u-mb-none\@xs {
    margin-bottom: 0 !important;
  }
  .jpmmps .u-ml-xxsmall\@xs {
    margin-left: 4px !important;
  }
  .jpmmps .u-ml-xsmall\@xs {
    margin-left: 8px !important;
  }
  .jpmmps .u-ml-small\@xs {
    margin-left: 16px !important;
  }
  .jpmmps .u-ml\@xs {
    margin-left: 24px !important;
  }
  .jpmmps .u-ml-large\@xs {
    margin-left: 32px !important;
  }
  .jpmmps .u-ml-xlarge\@xs {
    margin-left: 64px !important;
  }
  .jpmmps .u-ml-none\@xs {
    margin-left: 0 !important;
  }
  .jpmmps .u-mh-xxsmall\@xs {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .jpmmps .u-mh-xsmall\@xs {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .jpmmps .u-mh-small\@xs {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .jpmmps .u-mh\@xs {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  .jpmmps .u-mh-large\@xs {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }
  .jpmmps .u-mh-xlarge\@xs {
    margin-left: 64px !important;
    margin-right: 64px !important;
  }
  .jpmmps .u-mh-none\@xs {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .jpmmps .u-mv-xxsmall\@xs {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .jpmmps .u-mv-xsmall\@xs {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .jpmmps .u-mv-small\@xs {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .jpmmps .u-mv\@xs {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .jpmmps .u-mv-large\@xs {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .jpmmps .u-mv-xlarge\@xs {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
  }
  .jpmmps .u-mv-none\@xs {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .jpmmps .u-p-xxsmall\@xs {
    padding: 4px !important;
  }
  .jpmmps .u-p-xsmall\@xs {
    padding: 8px !important;
  }
  .jpmmps .u-p-small\@xs {
    padding: 16px !important;
  }
  .jpmmps .u-p\@xs {
    padding: 24px !important;
  }
  .jpmmps .u-p-large\@xs {
    padding: 32px !important;
  }
  .jpmmps .u-p-xlarge\@xs {
    padding: 64px !important;
  }
  .jpmmps .u-p-none\@xs {
    padding: 0 !important;
  }
  .jpmmps .u-pt-xxsmall\@xs {
    padding-top: 4px !important;
  }
  .jpmmps .u-pt-xsmall\@xs {
    padding-top: 8px !important;
  }
  .jpmmps .u-pt-small\@xs {
    padding-top: 16px !important;
  }
  .jpmmps .u-pt\@xs {
    padding-top: 24px !important;
  }
  .jpmmps .u-pt-large\@xs {
    padding-top: 32px !important;
  }
  .jpmmps .u-pt-xlarge\@xs {
    padding-top: 64px !important;
  }
  .jpmmps .u-pt-none\@xs {
    padding-top: 0 !important;
  }
  .jpmmps .u-pr-xxsmall\@xs {
    padding-right: 4px !important;
  }
  .jpmmps .u-pr-xsmall\@xs {
    padding-right: 8px !important;
  }
  .jpmmps .u-pr-small\@xs {
    padding-right: 16px !important;
  }
  .jpmmps .u-pr\@xs {
    padding-right: 24px !important;
  }
  .jpmmps .u-pr-large\@xs {
    padding-right: 32px !important;
  }
  .jpmmps .u-pr-xlarge\@xs {
    padding-right: 64px !important;
  }
  .jpmmps .u-pr-none\@xs {
    padding-right: 0 !important;
  }
  .jpmmps .u-pb-xxsmall\@xs {
    padding-bottom: 4px !important;
  }
  .jpmmps .u-pb-xsmall\@xs {
    padding-bottom: 8px !important;
  }
  .jpmmps .u-pb-small\@xs {
    padding-bottom: 16px !important;
  }
  .jpmmps .u-pb\@xs {
    padding-bottom: 24px !important;
  }
  .jpmmps .u-pb-large\@xs {
    padding-bottom: 32px !important;
  }
  .jpmmps .u-pb-xlarge\@xs {
    padding-bottom: 64px !important;
  }
  .jpmmps .u-pb-none\@xs {
    padding-bottom: 0 !important;
  }
  .jpmmps .u-pl-xxsmall\@xs {
    padding-left: 4px !important;
  }
  .jpmmps .u-pl-xsmall\@xs {
    padding-left: 8px !important;
  }
  .jpmmps .u-pl-small\@xs {
    padding-left: 16px !important;
  }
  .jpmmps .u-pl\@xs {
    padding-left: 24px !important;
  }
  .jpmmps .u-pl-large\@xs {
    padding-left: 32px !important;
  }
  .jpmmps .u-pl-xlarge\@xs {
    padding-left: 64px !important;
  }
  .jpmmps .u-pl-none\@xs {
    padding-left: 0 !important;
  }
  .jpmmps .u-ph-xxsmall\@xs {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .jpmmps .u-ph-xsmall\@xs {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .jpmmps .u-ph-small\@xs {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .jpmmps .u-ph\@xs {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .jpmmps .u-ph-large\@xs {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .jpmmps .u-ph-xlarge\@xs {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .jpmmps .u-ph-none\@xs {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .jpmmps .u-pv-xxsmall\@xs {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .jpmmps .u-pv-xsmall\@xs {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .jpmmps .u-pv-small\@xs {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .jpmmps .u-pv\@xs {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .jpmmps .u-pv-large\@xs {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .jpmmps .u-pv-xlarge\@xs {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .jpmmps .u-pv-none\@xs {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .jpmmps .u-text-left\@xs {
    text-align: left !important;
  }
  .jpmmps .u-text-right\@xs {
    text-align: right !important;
  }
  .jpmmps .u-text-center\@xs {
    text-align: center !important;
  }
}
@media (min-width: 1921px) {
  .jpmmps .u-text-left\@xxl-up {
    text-align: left !important;
  }
  .jpmmps .u-text-right\@xxl-up {
    text-align: right !important;
  }
  .jpmmps .u-text-center\@xxl-up {
    text-align: center !important;
  }
}
@media (min-width: 1601px) {
  .jpmmps .u-text-left\@xl-up {
    text-align: left !important;
  }
  .jpmmps .u-text-right\@xl-up {
    text-align: right !important;
  }
  .jpmmps .u-text-center\@xl-up {
    text-align: center !important;
  }
}
@media (min-width: 1281px) {
  .jpmmps .u-text-left\@l-up {
    text-align: left !important;
  }
  .jpmmps .u-text-right\@l-up {
    text-align: right !important;
  }
  .jpmmps .u-text-center\@l-up {
    text-align: center !important;
  }
}
@media (min-width: 961px) {
  .jpmmps .u-text-left\@m-up {
    text-align: left !important;
  }
  .jpmmps .u-text-right\@m-up {
    text-align: right !important;
  }
  .jpmmps .u-text-center\@m-up {
    text-align: center !important;
  }
}
@media (min-width: 721px) {
  .jpmmps .u-text-left\@s-up {
    text-align: left !important;
  }
  .jpmmps .u-text-right\@s-up {
    text-align: right !important;
  }
  .jpmmps .u-text-center\@s-up {
    text-align: center !important;
  }
}
@media (min-width: 481px) {
  .jpmmps .u-text-left\@xs-up {
    text-align: left !important;
  }
  .jpmmps .u-text-right\@xs-up {
    text-align: right !important;
  }
  .jpmmps .u-text-center\@xs-up {
    text-align: center !important;
  }
}
/* ------------------------------------*\
    #TEXT-TRANSFORM
\*------------------------------------ */
/**
 * The following classes will transform text into
 * uppercased, capitalized or lowercased characters.
 */
.jpmmps .u-text-lowercase {
  text-transform: lowercase !important;
}
.jpmmps .u-text-uppercase {
  text-transform: uppercase !important;
}
.jpmmps .u-text-capitalize {
  text-transform: capitalize !important;
}

/* ------------------------------------*\
    #TEXT-WRAP
\*------------------------------------ */
/**
 * A utility class to enforce text wrapping. With hyphens if possible
 * otherwise with hard word-breaks.
 */
.jpmmps .u-text-wrap {
  word-break: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ------------------------------------*\
    #WHITE-SPACE
 \*------------------------------------ */
.jpmmps .u-ws-nowrap {
  white-space: nowrap !important;
}

/* ------------------------------------*\
     #WIDTHS
 \*------------------------------------ */
/**
  * A series of widths helper classes that you can use to size things like grid
  * systems. Classes take a fraction-like format (e.g. `.u-2/3`).
  */
.jpmmps .u-1\/1 {
  width: 100%;
}
.jpmmps .u-1\/2 {
  width: 50%;
}
.jpmmps .u-2\/2 {
  width: 100%;
}
.jpmmps .u-1\/3 {
  width: 33.3333333333%;
}
.jpmmps .u-2\/3 {
  width: 66.6666666667%;
}
.jpmmps .u-3\/3 {
  width: 100%;
}
.jpmmps .u-1\/4 {
  width: 25%;
}
.jpmmps .u-2\/4 {
  width: 50%;
}
.jpmmps .u-3\/4 {
  width: 75%;
}
.jpmmps .u-4\/4 {
  width: 100%;
}
.jpmmps .u-1\/5 {
  width: 20%;
}
.jpmmps .u-2\/5 {
  width: 40%;
}
.jpmmps .u-3\/5 {
  width: 60%;
}
.jpmmps .u-4\/5 {
  width: 80%;
}
.jpmmps .u-5\/5 {
  width: 100%;
}
.jpmmps .u-1\/6 {
  width: 16.6666666667%;
}
.jpmmps .u-2\/6 {
  width: 33.3333333333%;
}
.jpmmps .u-3\/6 {
  width: 50%;
}
.jpmmps .u-4\/6 {
  width: 66.6666666667%;
}
.jpmmps .u-5\/6 {
  width: 83.3333333333%;
}
.jpmmps .u-6\/6 {
  width: 100%;
}
.jpmmps .u-1\/12 {
  width: 8.3333333333%;
}
.jpmmps .u-2\/12 {
  width: 16.6666666667%;
}
.jpmmps .u-3\/12 {
  width: 25%;
}
.jpmmps .u-4\/12 {
  width: 33.3333333333%;
}
.jpmmps .u-5\/12 {
  width: 41.6666666667%;
}
.jpmmps .u-6\/12 {
  width: 50%;
}
.jpmmps .u-7\/12 {
  width: 58.3333333333%;
}
.jpmmps .u-8\/12 {
  width: 66.6666666667%;
}
.jpmmps .u-9\/12 {
  width: 75%;
}
.jpmmps .u-10\/12 {
  width: 83.3333333333%;
}
.jpmmps .u-11\/12 {
  width: 91.6666666667%;
}
.jpmmps .u-12\/12 {
  width: 100%;
}

@media (max-width: 1920px) {
  .jpmmps .u-1\/1\@xxl {
    width: 100%;
  }
  .jpmmps .u-1\/2\@xxl {
    width: 50%;
  }
  .jpmmps .u-2\/2\@xxl {
    width: 100%;
  }
  .jpmmps .u-1\/3\@xxl {
    width: 33.3333333333%;
  }
  .jpmmps .u-2\/3\@xxl {
    width: 66.6666666667%;
  }
  .jpmmps .u-3\/3\@xxl {
    width: 100%;
  }
  .jpmmps .u-1\/4\@xxl {
    width: 25%;
  }
  .jpmmps .u-2\/4\@xxl {
    width: 50%;
  }
  .jpmmps .u-3\/4\@xxl {
    width: 75%;
  }
  .jpmmps .u-4\/4\@xxl {
    width: 100%;
  }
  .jpmmps .u-1\/5\@xxl {
    width: 20%;
  }
  .jpmmps .u-2\/5\@xxl {
    width: 40%;
  }
  .jpmmps .u-3\/5\@xxl {
    width: 60%;
  }
  .jpmmps .u-4\/5\@xxl {
    width: 80%;
  }
  .jpmmps .u-5\/5\@xxl {
    width: 100%;
  }
  .jpmmps .u-1\/6\@xxl {
    width: 16.6666666667%;
  }
  .jpmmps .u-2\/6\@xxl {
    width: 33.3333333333%;
  }
  .jpmmps .u-3\/6\@xxl {
    width: 50%;
  }
  .jpmmps .u-4\/6\@xxl {
    width: 66.6666666667%;
  }
  .jpmmps .u-5\/6\@xxl {
    width: 83.3333333333%;
  }
  .jpmmps .u-6\/6\@xxl {
    width: 100%;
  }
  .jpmmps .u-1\/12\@xxl {
    width: 8.3333333333%;
  }
  .jpmmps .u-2\/12\@xxl {
    width: 16.6666666667%;
  }
  .jpmmps .u-3\/12\@xxl {
    width: 25%;
  }
  .jpmmps .u-4\/12\@xxl {
    width: 33.3333333333%;
  }
  .jpmmps .u-5\/12\@xxl {
    width: 41.6666666667%;
  }
  .jpmmps .u-6\/12\@xxl {
    width: 50%;
  }
  .jpmmps .u-7\/12\@xxl {
    width: 58.3333333333%;
  }
  .jpmmps .u-8\/12\@xxl {
    width: 66.6666666667%;
  }
  .jpmmps .u-9\/12\@xxl {
    width: 75%;
  }
  .jpmmps .u-10\/12\@xxl {
    width: 83.3333333333%;
  }
  .jpmmps .u-11\/12\@xxl {
    width: 91.6666666667%;
  }
  .jpmmps .u-12\/12\@xxl {
    width: 100%;
  }
}
@media (max-width: 1600px) {
  .jpmmps .u-1\/1\@xl {
    width: 100%;
  }
  .jpmmps .u-1\/2\@xl {
    width: 50%;
  }
  .jpmmps .u-2\/2\@xl {
    width: 100%;
  }
  .jpmmps .u-1\/3\@xl {
    width: 33.3333333333%;
  }
  .jpmmps .u-2\/3\@xl {
    width: 66.6666666667%;
  }
  .jpmmps .u-3\/3\@xl {
    width: 100%;
  }
  .jpmmps .u-1\/4\@xl {
    width: 25%;
  }
  .jpmmps .u-2\/4\@xl {
    width: 50%;
  }
  .jpmmps .u-3\/4\@xl {
    width: 75%;
  }
  .jpmmps .u-4\/4\@xl {
    width: 100%;
  }
  .jpmmps .u-1\/5\@xl {
    width: 20%;
  }
  .jpmmps .u-2\/5\@xl {
    width: 40%;
  }
  .jpmmps .u-3\/5\@xl {
    width: 60%;
  }
  .jpmmps .u-4\/5\@xl {
    width: 80%;
  }
  .jpmmps .u-5\/5\@xl {
    width: 100%;
  }
  .jpmmps .u-1\/6\@xl {
    width: 16.6666666667%;
  }
  .jpmmps .u-2\/6\@xl {
    width: 33.3333333333%;
  }
  .jpmmps .u-3\/6\@xl {
    width: 50%;
  }
  .jpmmps .u-4\/6\@xl {
    width: 66.6666666667%;
  }
  .jpmmps .u-5\/6\@xl {
    width: 83.3333333333%;
  }
  .jpmmps .u-6\/6\@xl {
    width: 100%;
  }
  .jpmmps .u-1\/12\@xl {
    width: 8.3333333333%;
  }
  .jpmmps .u-2\/12\@xl {
    width: 16.6666666667%;
  }
  .jpmmps .u-3\/12\@xl {
    width: 25%;
  }
  .jpmmps .u-4\/12\@xl {
    width: 33.3333333333%;
  }
  .jpmmps .u-5\/12\@xl {
    width: 41.6666666667%;
  }
  .jpmmps .u-6\/12\@xl {
    width: 50%;
  }
  .jpmmps .u-7\/12\@xl {
    width: 58.3333333333%;
  }
  .jpmmps .u-8\/12\@xl {
    width: 66.6666666667%;
  }
  .jpmmps .u-9\/12\@xl {
    width: 75%;
  }
  .jpmmps .u-10\/12\@xl {
    width: 83.3333333333%;
  }
  .jpmmps .u-11\/12\@xl {
    width: 91.6666666667%;
  }
  .jpmmps .u-12\/12\@xl {
    width: 100%;
  }
}
@media (max-width: 1280px) {
  .jpmmps .u-1\/1\@l {
    width: 100%;
  }
  .jpmmps .u-1\/2\@l {
    width: 50%;
  }
  .jpmmps .u-2\/2\@l {
    width: 100%;
  }
  .jpmmps .u-1\/3\@l {
    width: 33.3333333333%;
  }
  .jpmmps .u-2\/3\@l {
    width: 66.6666666667%;
  }
  .jpmmps .u-3\/3\@l {
    width: 100%;
  }
  .jpmmps .u-1\/4\@l {
    width: 25%;
  }
  .jpmmps .u-2\/4\@l {
    width: 50%;
  }
  .jpmmps .u-3\/4\@l {
    width: 75%;
  }
  .jpmmps .u-4\/4\@l {
    width: 100%;
  }
  .jpmmps .u-1\/5\@l {
    width: 20%;
  }
  .jpmmps .u-2\/5\@l {
    width: 40%;
  }
  .jpmmps .u-3\/5\@l {
    width: 60%;
  }
  .jpmmps .u-4\/5\@l {
    width: 80%;
  }
  .jpmmps .u-5\/5\@l {
    width: 100%;
  }
  .jpmmps .u-1\/6\@l {
    width: 16.6666666667%;
  }
  .jpmmps .u-2\/6\@l {
    width: 33.3333333333%;
  }
  .jpmmps .u-3\/6\@l {
    width: 50%;
  }
  .jpmmps .u-4\/6\@l {
    width: 66.6666666667%;
  }
  .jpmmps .u-5\/6\@l {
    width: 83.3333333333%;
  }
  .jpmmps .u-6\/6\@l {
    width: 100%;
  }
  .jpmmps .u-1\/12\@l {
    width: 8.3333333333%;
  }
  .jpmmps .u-2\/12\@l {
    width: 16.6666666667%;
  }
  .jpmmps .u-3\/12\@l {
    width: 25%;
  }
  .jpmmps .u-4\/12\@l {
    width: 33.3333333333%;
  }
  .jpmmps .u-5\/12\@l {
    width: 41.6666666667%;
  }
  .jpmmps .u-6\/12\@l {
    width: 50%;
  }
  .jpmmps .u-7\/12\@l {
    width: 58.3333333333%;
  }
  .jpmmps .u-8\/12\@l {
    width: 66.6666666667%;
  }
  .jpmmps .u-9\/12\@l {
    width: 75%;
  }
  .jpmmps .u-10\/12\@l {
    width: 83.3333333333%;
  }
  .jpmmps .u-11\/12\@l {
    width: 91.6666666667%;
  }
  .jpmmps .u-12\/12\@l {
    width: 100%;
  }
}
@media (max-width: 960px) {
  .jpmmps .u-1\/1\@m {
    width: 100%;
  }
  .jpmmps .u-1\/2\@m {
    width: 50%;
  }
  .jpmmps .u-2\/2\@m {
    width: 100%;
  }
  .jpmmps .u-1\/3\@m {
    width: 33.3333333333%;
  }
  .jpmmps .u-2\/3\@m {
    width: 66.6666666667%;
  }
  .jpmmps .u-3\/3\@m {
    width: 100%;
  }
  .jpmmps .u-1\/4\@m {
    width: 25%;
  }
  .jpmmps .u-2\/4\@m {
    width: 50%;
  }
  .jpmmps .u-3\/4\@m {
    width: 75%;
  }
  .jpmmps .u-4\/4\@m {
    width: 100%;
  }
  .jpmmps .u-1\/5\@m {
    width: 20%;
  }
  .jpmmps .u-2\/5\@m {
    width: 40%;
  }
  .jpmmps .u-3\/5\@m {
    width: 60%;
  }
  .jpmmps .u-4\/5\@m {
    width: 80%;
  }
  .jpmmps .u-5\/5\@m {
    width: 100%;
  }
  .jpmmps .u-1\/6\@m {
    width: 16.6666666667%;
  }
  .jpmmps .u-2\/6\@m {
    width: 33.3333333333%;
  }
  .jpmmps .u-3\/6\@m {
    width: 50%;
  }
  .jpmmps .u-4\/6\@m {
    width: 66.6666666667%;
  }
  .jpmmps .u-5\/6\@m {
    width: 83.3333333333%;
  }
  .jpmmps .u-6\/6\@m {
    width: 100%;
  }
  .jpmmps .u-1\/12\@m {
    width: 8.3333333333%;
  }
  .jpmmps .u-2\/12\@m {
    width: 16.6666666667%;
  }
  .jpmmps .u-3\/12\@m {
    width: 25%;
  }
  .jpmmps .u-4\/12\@m {
    width: 33.3333333333%;
  }
  .jpmmps .u-5\/12\@m {
    width: 41.6666666667%;
  }
  .jpmmps .u-6\/12\@m {
    width: 50%;
  }
  .jpmmps .u-7\/12\@m {
    width: 58.3333333333%;
  }
  .jpmmps .u-8\/12\@m {
    width: 66.6666666667%;
  }
  .jpmmps .u-9\/12\@m {
    width: 75%;
  }
  .jpmmps .u-10\/12\@m {
    width: 83.3333333333%;
  }
  .jpmmps .u-11\/12\@m {
    width: 91.6666666667%;
  }
  .jpmmps .u-12\/12\@m {
    width: 100%;
  }
}
@media (max-width: 720px) {
  .jpmmps .u-1\/1\@s {
    width: 100%;
  }
  .jpmmps .u-1\/2\@s {
    width: 50%;
  }
  .jpmmps .u-2\/2\@s {
    width: 100%;
  }
  .jpmmps .u-1\/3\@s {
    width: 33.3333333333%;
  }
  .jpmmps .u-2\/3\@s {
    width: 66.6666666667%;
  }
  .jpmmps .u-3\/3\@s {
    width: 100%;
  }
  .jpmmps .u-1\/4\@s {
    width: 25%;
  }
  .jpmmps .u-2\/4\@s {
    width: 50%;
  }
  .jpmmps .u-3\/4\@s {
    width: 75%;
  }
  .jpmmps .u-4\/4\@s {
    width: 100%;
  }
  .jpmmps .u-1\/5\@s {
    width: 20%;
  }
  .jpmmps .u-2\/5\@s {
    width: 40%;
  }
  .jpmmps .u-3\/5\@s {
    width: 60%;
  }
  .jpmmps .u-4\/5\@s {
    width: 80%;
  }
  .jpmmps .u-5\/5\@s {
    width: 100%;
  }
  .jpmmps .u-1\/6\@s {
    width: 16.6666666667%;
  }
  .jpmmps .u-2\/6\@s {
    width: 33.3333333333%;
  }
  .jpmmps .u-3\/6\@s {
    width: 50%;
  }
  .jpmmps .u-4\/6\@s {
    width: 66.6666666667%;
  }
  .jpmmps .u-5\/6\@s {
    width: 83.3333333333%;
  }
  .jpmmps .u-6\/6\@s {
    width: 100%;
  }
  .jpmmps .u-1\/12\@s {
    width: 8.3333333333%;
  }
  .jpmmps .u-2\/12\@s {
    width: 16.6666666667%;
  }
  .jpmmps .u-3\/12\@s {
    width: 25%;
  }
  .jpmmps .u-4\/12\@s {
    width: 33.3333333333%;
  }
  .jpmmps .u-5\/12\@s {
    width: 41.6666666667%;
  }
  .jpmmps .u-6\/12\@s {
    width: 50%;
  }
  .jpmmps .u-7\/12\@s {
    width: 58.3333333333%;
  }
  .jpmmps .u-8\/12\@s {
    width: 66.6666666667%;
  }
  .jpmmps .u-9\/12\@s {
    width: 75%;
  }
  .jpmmps .u-10\/12\@s {
    width: 83.3333333333%;
  }
  .jpmmps .u-11\/12\@s {
    width: 91.6666666667%;
  }
  .jpmmps .u-12\/12\@s {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .jpmmps .u-1\/1\@xs {
    width: 100%;
  }
  .jpmmps .u-1\/2\@xs {
    width: 50%;
  }
  .jpmmps .u-2\/2\@xs {
    width: 100%;
  }
  .jpmmps .u-1\/3\@xs {
    width: 33.3333333333%;
  }
  .jpmmps .u-2\/3\@xs {
    width: 66.6666666667%;
  }
  .jpmmps .u-3\/3\@xs {
    width: 100%;
  }
  .jpmmps .u-1\/4\@xs {
    width: 25%;
  }
  .jpmmps .u-2\/4\@xs {
    width: 50%;
  }
  .jpmmps .u-3\/4\@xs {
    width: 75%;
  }
  .jpmmps .u-4\/4\@xs {
    width: 100%;
  }
  .jpmmps .u-1\/5\@xs {
    width: 20%;
  }
  .jpmmps .u-2\/5\@xs {
    width: 40%;
  }
  .jpmmps .u-3\/5\@xs {
    width: 60%;
  }
  .jpmmps .u-4\/5\@xs {
    width: 80%;
  }
  .jpmmps .u-5\/5\@xs {
    width: 100%;
  }
  .jpmmps .u-1\/6\@xs {
    width: 16.6666666667%;
  }
  .jpmmps .u-2\/6\@xs {
    width: 33.3333333333%;
  }
  .jpmmps .u-3\/6\@xs {
    width: 50%;
  }
  .jpmmps .u-4\/6\@xs {
    width: 66.6666666667%;
  }
  .jpmmps .u-5\/6\@xs {
    width: 83.3333333333%;
  }
  .jpmmps .u-6\/6\@xs {
    width: 100%;
  }
  .jpmmps .u-1\/12\@xs {
    width: 8.3333333333%;
  }
  .jpmmps .u-2\/12\@xs {
    width: 16.6666666667%;
  }
  .jpmmps .u-3\/12\@xs {
    width: 25%;
  }
  .jpmmps .u-4\/12\@xs {
    width: 33.3333333333%;
  }
  .jpmmps .u-5\/12\@xs {
    width: 41.6666666667%;
  }
  .jpmmps .u-6\/12\@xs {
    width: 50%;
  }
  .jpmmps .u-7\/12\@xs {
    width: 58.3333333333%;
  }
  .jpmmps .u-8\/12\@xs {
    width: 66.6666666667%;
  }
  .jpmmps .u-9\/12\@xs {
    width: 75%;
  }
  .jpmmps .u-10\/12\@xs {
    width: 83.3333333333%;
  }
  .jpmmps .u-11\/12\@xs {
    width: 91.6666666667%;
  }
  .jpmmps .u-12\/12\@xs {
    width: 100%;
  }
}
/* ------------------------------------*\
     #OVERFLOW-HIDDEN
 \*------------------------------------ */
/**
  * A utility class for clipping the content at the element’s padding box.
  * No scrollbars are provided, and no support for allowing the user to scroll
  * (such as by dragging or using a scroll wheel) is allowed.
  */
.jpmmps .u-overflow-hidden {
  overflow: hidden !important;
}

/* ------------------------------------*\
    #TEXT-COLORS
\*------------------------------------ */
.jpmmps .u-text-base {
  color: #161616 !important;
}
.jpmmps .u-text-muted {
  color: #61656e !important;
}
.jpmmps .u-text-brand {
  color: #000000 !important;
  font-weight: bold;
}

/**
   * Reset specificity for secondary buttons in
   * tables added for button theming.
   * @see https://jira.platform.vwfs.io/browse/jpmmps-6709
   */
.jpmmps .c-table__btn.c-table__btn.c-table__btn {
  background-color: transparent !important;
}

/**
  * Modify icon complexity by setting custom prop (via mixin) for arbitrary icons without changing markup.
 */
.jpmmps .c-icon-list__icon,
.jpmmps .c-link__icon,
.jpmmps .c-btn__icon,
.jpmmps .c-input__addon .c-icon,
.jpmmps .c-badge__icon,
.jpmmps .c-table__cell-align .c-icon {
  --jpmmps-icon-simple: ;
}

/*# sourceMappingURL=jpmmps.css.map */