mp-design-system 2.0.17 → 2.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/build/fonts/Inter-Bold.woff +0 -0
- package/dist/build/fonts/Inter-Bold.woff2 +0 -0
- package/dist/build/fonts/Inter-Regular.woff +0 -0
- package/dist/build/fonts/Inter-Regular.woff2 +0 -0
- package/dist/build/fonts/Inter-SemiBold.woff +0 -0
- package/dist/build/fonts/Inter-SemiBold.woff2 +0 -0
- package/dist/build/scss/main.css +1 -1
- package/dist/build/scss/mp-brand.css +1 -1
- package/dist/build/scss/mp-mystore.css +1 -1
- package/dist/build/scss/mp-support.css +1 -1
- package/dist/build/scss/mp-www.css +1 -1
- package/dist/build/scss/mp-www2.css +1 -1
- package/package.json +1 -1
@@ -1 +1 @@
|
|
1
|
-
@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap";:root{--mp-website: "brand.malvernpanalytical.com"}.u-breakout{left:50%;left:calc(50% + var(--scrollbarWidth) / 2.0001);position:relative;transform:translate(-50vw);width:100vw;width:calc(100vw - var(--scrollbarWidth));padding-left:safe-space(0);padding-right:safe-space(0)}.u-cutoff{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--gutter)),calc(100% - var(--gutter)) 100%,0 100%)}.u-cutoff--top-right{clip-path:polygon(0 0,calc(100% - var(--gutter)) 0,100% var(--gutter),100% 100%,0 100%)}.u-cutoff--top-left{clip-path:polygon(0 var(--gutter),var(--gutter) 0,100% 0,100% 100%,0 100%)}.u-cutoff--bottom-left{clip-path:polygon(0 0,100% 0,100% 100%,var(--gutter) 100%,0 calc(100% - var(--gutter)))}.u-cutoff--m{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--space-m)),calc(100% - var(--space-m)) 100%,0 100%)}.u-cutoff--xl{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--space-xl)),calc(100% - var(--space-xl)) 100%,0 100%)}:root{--fluid-min-width: 320;--fluid-max-width: 1332;--fluid-screen: 100vw;--fluid-bp: calc( (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)) )}@media screen and (min-width: 1332px){:root{--fluid-screen: calc(var(--fluid-max-width) * 1px)}}:root{--f--2-min: 12.64;--f--2-max: 12.5;--step--2: calc( ((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) * var(--fluid-bp) );--f--1-min: 14.22;--f--1-max: 15;--step--1: calc( ((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) * var(--fluid-bp) );--f-0-min: 16;--f-0-max: 18;--step-0: calc( ((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp) );--f-1-min: 18;--f-1-max: 21.6;--step-1: calc( ((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp) );--f-2-min: 20.25;--f-2-max: 25.92;--step-2: calc( ((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp) );--f-3-min: 22.78;--f-3-max: 31.1;--step-3: calc( ((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp) );--f-4-min: 25.63;--f-4-max: 37.32;--step-4: calc( ((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp) );--f-5-min: 28.83;--f-5-max: 44.79;--step-5: calc( ((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) * var(--fluid-bp) );--f-6-min: 32.44;--f-6-max: 53.75;--step-6: calc( ((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min)) * var(--fluid-bp) );--f-7-min: 36.49;--f-7-max: 64.5;--step-7: calc( ((var(--f-7-min) / 16) * 1rem) + (var(--f-7-max) - var(--f-7-min)) * var(--fluid-bp) );--f-8-min: 41.05;--f-8-max: 77.4;--step-8: calc( ((var(--f-8-min) / 16) * 1rem) + (var(--f-8-max) - var(--f-8-min)) * var(--fluid-bp) );--f-9-min: 46.18;--f-9-max: 92.88;--step-9: calc( ((var(--f-9-min) / 16) * 1rem) + (var(--f-9-max) - var(--f-9-min)) * var(--fluid-bp) );--f-10-min: 51.96;--f-10-max: 111.45;--step-10: calc( ((var(--f-10-min) / 16) * 1rem) + (var(--f-10-max) - var(--f-10-min)) * var(--fluid-bp) )}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:../fonts/inter-regular.woff2 format("woff2"),../fonts/inter-regular.woff format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:../fonts/inter-semibold.woff2 format("woff2"),../fonts/inter-semibold.woff format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:../fonts/inter-bold.woff2 format("woff2"),../fonts/inter-bold.woff format("woff")}:root{--wrapper: 78.75rem}:root{--max-screen: 83.25;--fc-screen: 100vw;--fc-bp: calc((var(--fc-screen) - 20em) / (var(--max-screen) - 20));--fc-base: 18;--fc-3xs: 4.5;--space-3xs: calc(var(--fc-3xs) / 16 * 1rem);--fc-2xs: 9;--space-2xs: calc(var(--fc-2xs) / 16 * 1rem);--fc-xs: 13.5;--space-xs: calc(var(--fc-xs) / 16 * 1rem);--fc-s: 18;--space-s: calc(var(--fc-s) / 16 * 1rem);--fc-m: 27;--space-m: calc(var(--fc-m) / 16 * 1rem);--fc-l: 36;--space-l: calc(var(--fc-l) / 16 * 1rem);--fc-xl: 54;--space-xl: calc(var(--fc-xl) / 16 * 1rem);--fc-2xl: 72;--space-2xl: calc(var(--fc-2xl) / 16 * 1rem);--fc-3xl: 108;--space-3xl: calc(var(--fc-3xl) / 16 * 1rem);--fc-4xl: 144;--space-4xl: calc(var(--fc-4xl) / 16 * 1rem);--space--3xs: calc( ((var(--fc-) / 16) * 1rem) + (var(--fc-3xs) - var(--fc-)) * var(--fluid-bp) );--space-3xs-2xs: calc( ((var(--fc-3xs) / 16) * 1rem) + (var(--fc-2xs) - var(--fc-3xs)) * var(--fluid-bp) );--space-2xs-xs: calc( ((var(--fc-2xs) / 16) * 1rem) + (var(--fc-xs) - var(--fc-2xs)) * var(--fluid-bp) );--space-xs-s: calc( ((var(--fc-xs) / 16) * 1rem) + (var(--fc-s) - var(--fc-xs)) * var(--fluid-bp) );--space-m-l: calc( ((var(--fc-m) / 16) * 1rem) + (var(--fc-l) - var(--fc-m)) * var(--fluid-bp) );--space-l-xl: calc( ((var(--fc-l) / 16) * 1rem) + (var(--fc-xl) - var(--fc-l)) * var(--fluid-bp) );--space-xl-2xl: calc( ((var(--fc-xl) / 16) * 1rem) + (var(--fc-2xl) - var(--fc-xl)) * var(--fluid-bp) );--space-2xl-3xl: calc( ((var(--fc-2xl) / 16) * 1rem) + (var(--fc-3xl) - var(--fc-2xl)) * var(--fluid-bp) );--space-3xl-4xl: calc( ((var(--fc-3xl) / 16) * 1rem) + (var(--fc-4xl) - var(--fc-3xl)) * var(--fluid-bp) );--space-s-l: calc( ((var(--fc-s) / 16) * 1rem) + (var(--fc-l) - var(--fc-s)) * var(--fluid-bp) );--space-s-m: calc( ((var(--fc-s) / 16) * 1rem) + (var(--fc-m) - var(--fc-s)) * var(--fluid-bp) );--space-xs-l: calc( ((var(--fc-xs) / 16) * 1rem) + (var(--fc-l) - var(--fc-xs)) * var(--fluid-bp) );--space-m-xl: calc( ((var(--fc-m) / 16) * 1rem) + (var(--fc-xl) - var(--fc-m)) * var(--fluid-bp) );--space-l-2xl: calc( ((var(--fc-l) / 16) * 1rem) + (var(--fc-2xl) - var(--fc-l)) * var(--fluid-bp) );--space-s-xl: calc( ((var(--fc-s) / 16) * 1rem) + (var(--fc-xl) - var(--fc-s)) * var(--fluid-bp) );--space-l-3xl: calc( ((var(--fc-l) / 16) * 1rem) + (var(--fc-3xl) - var(--fc-l)) * var(--fluid-bp) );--space-xl-3xl: calc( ((var(--fc-xl) / 16) * 1rem) + (var(--fc-3xl) - var(--fc-xl)) * var(--fluid-bp) );--space-l-4xl: calc( ((var(--fc-l) / 16) * 1rem) + (var(--fc-4xl) - var(--fc-l)) * var(--fluid-bp) );--space-3xs-m: calc( ((var(--fc-3xs) / 16) * 1rem) + (var(--fc-m) - var(--fc-3xs)) * var(--fluid-bp) );--gutter: var(--space-s-l)}@media screen and (min-width: 75em){:root{--fc-screen: calc(var(--max-screen) * 1rem)}}:root{--color-petrol-step--2: #002126;--color-petrol-step--1: #003039;--color-petrol-step-0: #005461;--color-petrol-step-1: #3d7b87;--color-petrol-step-2: #bfd3d6;--color-petrol-step-3: #ebf1f2;--color-blue-step--1: #00758c;--color-blue-step-0: #00a2c2;--color-blue-step-1: #47bcd3;--color-blue-step-2: #c2e9f0;--color-blue-step-3: #ebf8fa;--color-green-step--1: #0e7a0e;--color-green-step-0: #13aa13;--color-green-step-1: #55c255;--color-green-step-2: #c6ebc6;--color-green-step-3: #ecf8ec;--color-red-step--1: #9b0042;--color-red-step-0: #ce0058;--color-red-step-1: #dc4787;--color-red-step-2: #f3c2d7;--color-red-step-3: #fbebf2;--color-utility-blue-step--1: #004e7e;--color-utility-blue-step-0: #006daf;--color-utility-blue-step-1: #4796c5;--color-utility-blue-step-2: #c2dcec;--color-utility-blue-step-3: #ebf3f9;--color-utility-orange-step--1: #ae7809;--color-utility-orange-step-0: #f2a60d;--color-utility-orange-step-1: #f6bf51;--color-utility-orange-step-2: #fceac5;--color-utility-orange-step-3: #fef8ec;--color-grey--50: #666666;--color-grey-step--2: #0a0a0a;--color-grey-step--1: #1c1c1c;--color-grey-step-0: #333333;--color-grey-step-1: #959595;--color-grey-step-2: #cecece;--color-grey-step-3: #efefef;--color-white-step-0: #fff}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{--wrapper: 78.75rem;--column: calc(var(--wrapper) / 12);--column-1: calc(var(--column) * 1);--column-2: calc(var(--column) * 2);--column-3: calc(var(--column) * 3);--column-4: calc(var(--column) * 4);--column-5: calc(var(--column) * 5);--column-6: calc(var(--column) * 6);--column-7: calc(var(--column) * 7);--column-8: calc(var(--column) * 8);--column-9: calc(var(--column) * 9);--column-10: calc(var(--column) * 10);--column-11: calc(var(--column) * 11);--column-12: calc(var(--column) * 12)}*,*:before,*:after{box-sizing:border-box}body{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;min-height:100vh;margin:0}html{scroll-behavior:smooth}blockquote,pre,ol,ul,figure{padding:0;margin:0}img{max-width:100%;display:block;height:auto;border:none}article,aside,figure,footer,header,main,nav{display:block}iframe{border:none}body{font:400 1.125rem/1.2 Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;letter-spacing:-.01em;font-size:18px;font-size:var(--step-0);color:#333}h1,h2,h3,h4,h5,h6,p,ul,ol,dl{margin:0}ul,ol,p{line-height:1.2}a{text-decoration:none}a,a:hover{cursor:pointer;color:inherit}.mp ol,.mp ul{list-style:none}cite,address{font-style:normal}[type=submit],[type=button],button{border-radius:0;background:transparent;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;cursor:pointer;border:none;color:inherit;font:inherit}label{cursor:pointer}fieldset{border:0;padding:.01em 0 0}@media (prefers-reduced-motion: reduce){*{-webkit-animation:none!important;animation:none!important;transition:none!important;scroll-behavior:auto!important}}code[class*=language-],pre[class*=language-]{text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;color:#3d7b87;background:#ebf1f2;font-family:Source Code Pro,monospace;font-size:1rem;line-height:1.5em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.c-alert code[class*=language-],.c-alert pre[class*=language-]{background:transparent}code[class*=language-]::-moz-selection,pre[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection,pre[class*=language-] ::-moz-selection{background:#cceae7;color:#263238}code[class*=language-]::selection,pre[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-] ::selection{background:#cceae7;color:#263238}:not(pre)>code[class*=language-]{white-space:normal;border-radius:.2em;padding:.1em}pre[class*=language-]{overflow:auto;position:relative;padding:18px;padding:var(--space-s)}.language-css>code,.language-sass>code,.language-scss>code{color:#f2a60d}[class*=language-] .namespace{opacity:.7}.token.atrule{color:#3d7b87}.token.attr-name{color:#00a2c2}.token.attr-value,.token.attribute{color:#13aa13}.token.boolean{color:#ce0058}.token.builtin,.token.cdata,.token.char,.token.class{color:#00a2c2}.token.class-name{color:#6182b8}.token.comment{color:#aabfc9}.token.constant{color:#3d7b87}.token.deleted{color:#ce0058}.token.doctype{color:#aabfc9}.token.entity{color:#ce0058}.token.function{color:#3d7b87}.token.hexcode{color:#f2a60d}.token.id,.token.important{color:#3d7b87;font-weight:700}.token.inserted{color:#00a2c2}.token.keyword{color:#3d7b87}.token.number{color:#f2a60d}.token.operator{color:#00a2c2}.token.prolog{color:#aabfc9}.token.property{color:#00a2c2}.token.pseudo-class,.token.pseudo-element{color:#13aa13}.token.punctuation,.token.regex{color:#00a2c2}.token.selector{color:#ce0058}.token.string{color:#13aa13}.token.symbol{color:#3d7b87}.token.tag{color:#005461}.token.unit{color:#f2a60d}.token.url,.token.variable{color:#ce0058}.u-hr,.c-library hr,.o-prose hr{margin:0 0 27px;border:none;padding-bottom:27px;padding-bottom:var(--space-m-xl);margin-bottom:var(--space-m-xl);border-bottom:1px solid #bfd3d6}.u-border-top{border-top:1px solid #bfd3d6}.u-border-bottom{border-bottom:1px solid #bfd3d6}.u-border{border:1px solid #bfd3d6}.o-grid{display:flex;flex-wrap:wrap;justify-content:stretch;margin-bottom:-18px;margin-bottom:calc(-1 * var(--gutter));width:100%}.o-grid--float:after{content:" ";display:table;clear:both}.o-grid--between{justify-content:space-between}.o-grid--no-height-match{align-items:start}.o-grid>*{margin-bottom:18px;margin-bottom:var(--gutter);width:100%}@media (min-width: 40em){.o-grid--of-two>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--gutter) / 2 - .1px)}.o-grid--of-two>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-two>*:nth-child(odd){margin-left:0}.o-grid--of-two.o-grid--s>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--space-s) / 2 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-two.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-two.o-grid--s>*:nth-child(odd){margin-left:0}}.o-grid--of-two-switch{justify-content:space-between}@media (min-width: 40em){.o-grid--of-two-switch>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--gutter) / 2 - .1px)}.o-grid--of-two-switch>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-two-switch>*:nth-child(odd){margin-left:0}.o-grid--of-two-switch.o-grid--s>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--space-s) / 2 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-two-switch.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-two-switch.o-grid--s>*:nth-child(odd){margin-left:0}.o-grid--of-two-switch>:nth-child(2n+2){margin-left:0}}@media (min-width: 55em){.o-grid--of-two-late>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--gutter) / 2 - .1px)}.o-grid--of-two-late>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-two-late>*:nth-child(odd){margin-left:0}.o-grid--of-two-late.o-grid--s>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--space-s) / 2 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-two-late.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-two-late.o-grid--s>*:nth-child(odd){margin-left:0}}@media (min-width: 22.4em){.o-grid--of-two-early>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--gutter) / 2 - .1px)}.o-grid--of-two-early>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-two-early>*:nth-child(odd){margin-left:0}.o-grid--of-two-early.o-grid--s>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--space-s) / 2 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-two-early.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-two-early.o-grid--s>*:nth-child(odd){margin-left:0}}@media (min-width: 38em) and (max-width: 54.9375em){.o-grid--of-three>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--gutter) / 2 - .1px)}.o-grid--of-three>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three>*:nth-child(odd){margin-left:0}.o-grid--of-three.o-grid--s>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--space-s) / 2 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-three.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-three.o-grid--s>*:nth-child(odd){margin-left:0}}@media (min-width: 55em){.o-grid--of-three>*{width:calc(33.3333333333% - 12px - .1px);width:calc(33.3333333333% - 2 * var(--gutter) / 3 - .1px)}.o-grid--of-three>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three>*:nth-child(3n+1){margin-left:0}.o-grid--of-three.o-grid--s>*{width:calc(33.3333333333% - 12px - .1px);width:calc(33.3333333333% - 2 * var(--space-s) / 3 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-three.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-three.o-grid--s>*:nth-child(3n+1){margin-left:0}}@media (min-width: 38em) and (max-width: 67.9375em){.o-grid--of-three-late>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--gutter) / 2 - .1px)}.o-grid--of-three-late>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three-late>*:nth-child(odd){margin-left:0}.o-grid--of-three-late.o-grid--s>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--space-s) / 2 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-three-late.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-three-late.o-grid--s>*:nth-child(odd){margin-left:0}}@media (min-width: 68em){.o-grid--of-three-late>*{width:calc(33.3333333333% - 12px - .1px);width:calc(33.3333333333% - 2 * var(--gutter) / 3 - .1px)}.o-grid--of-three-late>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three-late>*:nth-child(3n+1){margin-left:0}.o-grid--of-three-late.o-grid--s>*{width:calc(33.3333333333% - 12px - .1px);width:calc(33.3333333333% - 2 * var(--space-s) / 3 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-three-late.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-three-late.o-grid--s>*:nth-child(3n+1){margin-left:0}}@media (min-width: 22.4em) and (max-width: 54.9375em){.o-grid--of-three-early>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--gutter) / 2 - .1px)}.o-grid--of-three-early>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three-early>*:nth-child(odd){margin-left:0}.o-grid--of-three-early.o-grid--s>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--space-s) / 2 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-three-early.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-three-early.o-grid--s>*:nth-child(odd){margin-left:0}}@media (min-width: 55em){.o-grid--of-three-early>*{width:calc(33.3333333333% - 12px - .1px);width:calc(33.3333333333% - 2 * var(--gutter) / 3 - .1px)}.o-grid--of-three-early>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three-early>*:nth-child(3n+1){margin-left:0}.o-grid--of-three-early.o-grid--s>*{width:calc(33.3333333333% - 12px - .1px);width:calc(33.3333333333% - 2 * var(--space-s) / 3 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-three-early.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-three-early.o-grid--s>*:nth-child(3n+1){margin-left:0}}@media (min-width: 38em) and (max-width: 59.9375em){.o-grid--of-four>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--gutter) / 2 - .1px)}.o-grid--of-four>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-four>*:nth-child(odd){margin-left:0}.o-grid--of-four.o-grid--s>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--space-s) / 2 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-four.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-four.o-grid--s>*:nth-child(odd){margin-left:0}}@media (min-width: 60em){.o-grid--of-four>*{width:calc(25% - 13.6px);width:calc(25% - 3 * var(--gutter) / 4 - .1px)}.o-grid--of-four>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-four>*:nth-child(4n+1){margin-left:0}.o-grid--of-four.o-grid--s>*{width:calc(25% - 13.6px);width:calc(25% - 3 * var(--space-s) / 4 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-four.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-four.o-grid--s>*:nth-child(4n+1){margin-left:0}}@media (min-width: 22.4em) and (max-width: 59.9375em){.o-grid--of-four-early>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--gutter) / 2 - .1px)}.o-grid--of-four-early>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-four-early>*:nth-child(odd){margin-left:0}.o-grid--of-four-early.o-grid--s>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--space-s) / 2 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-four-early.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-four-early.o-grid--s>*:nth-child(odd){margin-left:0}}@media (min-width: 60em){.o-grid--of-four-early>*{width:calc(25% - 13.6px);width:calc(25% - 3 * var(--gutter) / 4 - .1px)}.o-grid--of-four-early>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-four-early>*:nth-child(4n+1){margin-left:0}.o-grid--of-four-early.o-grid--s>*{width:calc(25% - 13.6px);width:calc(25% - 3 * var(--space-s) / 4 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-four-early.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-four-early.o-grid--s>*:nth-child(4n+1){margin-left:0}}@media (min-width: 22.4em) and (max-width: 64.9375em){.o-grid--of-five>*{width:calc(33.3333333333% - 12px - .1px);width:calc(33.3333333333% - 2 * var(--gutter) / 3 - .1px)}.o-grid--of-five>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-five>*:nth-child(3n+1){margin-left:0}.o-grid--of-five.o-grid--s>*{width:calc(33.3333333333% - 12px - .1px);width:calc(33.3333333333% - 2 * var(--space-s) / 3 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-five.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-five.o-grid--s>*:nth-child(3n+1){margin-left:0}}@media (min-width: 65em){.o-grid--of-five>*{width:calc(20% - 14.5px);width:calc(20% - 4 * var(--gutter) / 5 - .1px)}.o-grid--of-five>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-five>*:nth-child(5n+1){margin-left:0}.o-grid--of-five.o-grid--s>*{width:calc(20% - 14.5px);width:calc(20% - 4 * var(--space-s) / 5 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-five.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-five.o-grid--s>*:nth-child(5n+1){margin-left:0}}@media (max-width: 54.9375em){.o-grid--swipeable{left:50%;left:calc(50% + var(--scrollbarWidth) / 2.0001);position:relative;transform:translate(-50vw);width:100vw;width:calc(100vw - var(--scrollbarWidth));padding-left:var(--gutter);padding-right:var(--gutter);flex-wrap:nowrap;overflow-x:scroll;scroll-snap-type:x mandatory;scroll-padding:var(--gutter);-webkit-overflow-scrolling:touch}.o-grid--swipeable>*{flex:0 0 auto;max-width:23em;min-width:300px;width:calc(85vw - var(--gutter) * 2.333);scroll-snap-align:start;scroll-snap-stop:always}.o-grid--swipeable>*+*{margin-left:var(--gutter)!important}}@media (max-width: 55em){.o-grid--float:not([class*=switch])>:nth-child(odd),.o-grid--float[class*=switch]>:nth-child(2n+2),.o-grid--float:not([class*=switch])>:nth-child(2n+2),.o-grid--float[class*=switch]>:nth-child(odd){position:static}}@media (min-width: 55em){.o-grid--4\/7>:nth-child(2n+2),.o-grid--4\/7-switch>:nth-child(2n+2){width:57.1428571429%}.o-grid--9\/3>:nth-child(odd),.o-grid--8\/3>:nth-child(odd),.o-grid--8\/4>:nth-child(odd),.o-grid--3\/9>:nth-child(2n+2),.o-grid--3\/8>:nth-child(2n+2),.o-grid--4\/8>:nth-child(2n+2),.o-grid--9\/3-switch>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(2n+2),.o-grid--8\/4-switch>:nth-child(2n+2),.o-grid--3\/9-switch>:nth-child(odd),.o-grid--3\/8-switch>:nth-child(odd),.o-grid--4\/8-switch>:nth-child(odd){width:65.7142857143%}.o-grid--9\/3>:nth-child(2n+2),.o-grid--8\/3>:nth-child(2n+2),.o-grid--8\/4>:nth-child(2n+2),.o-grid--3\/9>:nth-child(odd),.o-grid--3\/8>:nth-child(odd),.o-grid--4\/8>:nth-child(odd),.o-grid--4\/7>:nth-child(odd),.o-grid--9\/3-switch>:nth-child(odd),.o-grid--8\/3-switch>:nth-child(odd),.o-grid--8\/4-switch>:nth-child(odd),.o-grid--3\/9-switch>:nth-child(2n+2),.o-grid--3\/8-switch>:nth-child(2n+2),.o-grid--4\/8-switch>:nth-child(2n+2),.o-grid--4\/7-switch>:nth-child(odd){width:31.4285714286%}.o-grid--3\/9>:nth-child(2n+2),.o-grid--3\/8>:nth-child(2n+2),.o-grid--4\/8>:nth-child(2n+2),.o-grid--9\/3>:nth-child(2n+2),.o-grid--8\/3>:nth-child(2n+2),.o-grid--8\/4>:nth-child(2n+2),.o-grid--9\/3-switch>:nth-child(odd),.o-grid--8\/3-switch>:nth-child(odd),.o-grid--8\/4-switch>:nth-child(odd),.o-grid--3\/9-switch>:nth-child(odd),.o-grid--3\/8-switch>:nth-child(odd),.o-grid--4\/8-switch>:nth-child(odd){margin-left:2.8571428571%;margin-right:0}.o-grid--8\/3>:nth-child(odd),.o-grid--3\/8>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(2n+2),.o-grid--3\/8-switch>:nth-child(odd){max-width:828px}.o-grid[class*=switch]>:nth-child(odd){order:1}.o-grid--layout{margin-bottom:0}.o-grid--layout>:nth-last-child(1),.o-grid--layout>:nth-last-child(2){margin-bottom:0}.o-grid--push{justify-content:space-between}.o-grid--pull{justify-content:flex-start}.o-grid--float{display:block}.o-grid--float:not([class*=switch])>:nth-child(odd),.o-grid--float[class*=switch]>:nth-child(2n+2){float:left}.o-grid--float:not([class*=switch])>:nth-child(2n+2),.o-grid--float[class*=switch]>:nth-child(odd){float:right}}@media (min-width: 70em){.o-grid--9\/3>:nth-child(odd),.o-grid--8\/3>:nth-child(odd),.o-grid--3\/9>:nth-child(2n+2),.o-grid--3\/8>:nth-child(2n+2),.o-grid--9\/3-switch>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(2n+2),.o-grid--3\/9-switch>:nth-child(odd),.o-grid--3\/8-switch>:nth-child(odd){width:74.2857142857%}.o-grid--9\/3>:nth-child(2n+2),.o-grid--8\/3>:nth-child(2n+2),.o-grid--3\/9>:nth-child(odd),.o-grid--3\/8>:nth-child(odd),.o-grid--9\/3-switch>:nth-child(odd),.o-grid--8\/3-switch>:nth-child(odd),.o-grid--3\/9-switch>:nth-child(2n+2),.o-grid--3\/8-switch>:nth-child(2n+2){width:22.8571428571%}}.c-library{display:grid;min-height:100vh;grid-template-rows:auto 1fr auto}.c-library--components{grid-template-rows:auto 1fr}.c-library__header{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:9px;padding:var(--space-2xs);flex-direction:column;align-items:flex-start;background:#005461;color:#fff;font-weight:700}@media only screen and (min-width: 650px){.c-library__header{letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2);flex-direction:row;align-items:center}}@media only screen and (min-width: 1000px){.c-library__header{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:18px;padding:var(--space-s) var(--space-s-l)}}.c-library__header img{filter:saturate(0) brightness(10)}.c-library__header .c-library-page-active{position:relative}.c-library__header .c-library-page-active:after{content:"";position:absolute;left:0;width:100%;bottom:-6px;border-bottom:1px solid}.c-library--home .c-library__hero{color:#fff;background:linear-gradient(#005461,transparent),linear-gradient(45deg,#00a2c2,#005461)}.c-library__body{display:grid;grid-template-rows:auto auto}@media only screen and (min-width: 600px){.c-library__body{grid-template-columns:10em 1fr}}@media only screen and (min-width: 800px){.c-library__body{grid-template-columns:17em 1fr}}.c-library__sidebar{letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2);border-right:1px solid #ebf1f2;grid-row:-1;scroll-behavior:none}@media only screen and (min-width: 600px){.c-library__sidebar{grid-row:auto;overflow-y:auto;max-height:calc(100vh - 1px);margin-bottom:1px}}@media only screen and (min-width: 800px){.c-library__sidebar{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1)}}.c-library__sidebar>*{padding:18px;padding:var(--space-s-l) var(--space-s) var(--space-s-l) var(--space-s-l)}.c-library__sidebar li{position:relative}.c-library__sidebar li a{color:#006daf}.c-library__sidebar li a:hover{text-decoration:underline;color:#006daf}.c-library__sidebar li+li{margin-top:13.5px;margin-top:var(--space-xs)}.c-library__sidebar ul ul{padding:13.5px;padding:var(--space-xs);padding-bottom:0}.c-library__sidebar ul ul li+li{margin-top:9px;margin-top:var(--space-2xs)}.c-library__skip-link{padding:13.5px;padding:var(--space-xs)}@media only screen and (min-width: 600px){.c-library__skip-link{display:none}}.c-library__logo{display:flex;align-items:center;justify-content:center;max-width:15%;min-width:100px}@media only screen and (min-width: 650px){.c-library__logo{justify-content:flex-start}}.c-library__logo-name{padding-left:13.5px;padding-left:var(--space-xs-s);margin-left:13.5px;margin-left:var(--space-xs-s);border-left:1px solid #3d7b87;white-space:nowrap}.c-library__logo-name span{display:block}.c-library__logo-name span:nth-last-child(3),.c-library__logo-name span:nth-last-child(1){text-transform:uppercase;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);letter-spacing:.08em;color:#bfd3d6}.c-library__logo-name span:nth-last-child(2){color:#fff;letter-spacing:-.03em;font-size:37.32px;font-size:var(--step-4)}.has-js .c-library__sidebar ul>li>ul{display:none}.has-js .c-library__sidebar ul>.c-library-accordion-open>ul{display:block}.c-library .c-library-accordion-open>.c-library-accordion__toggle{transform:rotate(180deg)}.c-library .c-library-accordion__toggle{color:#006daf;line-height:1;font-size:1rem;position:absolute;right:0;top:0;display:flex;align-items:center;justify-content:center;padding:.25rem}.c-library-menu-active{font-weight:700;position:relative}.c-library-menu-active:before{content:"▸ ";position:absolute;left:-17px;top:0}.c-library-stretch{display:flex;flex-direction:column;flex:1}.c-library__main{overflow-y:auto}.c-library__frame{position:relative;width:100%}.c-library__frame-links{position:absolute;right:0;top:calc(-1 * (var(--space-m) + var(--space-s)));z-index:1}.c-library__frame-links a,.c-library__frame-links button{border-radius:0 0 .25em .25em;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:.25em .666em;background:#bfd3d6;color:#959595}.c-library__frame-links a:hover,.c-library__frame-links button:hover{color:#333}.c-library__frame-background{border-radius:0 0 0 .25em;top:0}.c-library__frame-wrap{--width: "";height:100%;overflow:hidden;position:relative;resize:both;max-width:100%}.c-library__frame-wrap:after{background:#ebf1f2;bottom:0;color:#3d7b87;counter-reset:width var(--width);content:counter(width);letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2);mix-blend-mode:multiply;padding:.5ch 1ch;position:absolute;right:0}.c-library__frame iframe{--negative-padding: calc(var(--space-m) * -1);height:100%;width:100%;width:calc(100% - var(--negative-padding) * 2);left:var(--negative-padding);top:var(--negative-padding);position:relative;transition:padding .3s cubic-bezier(.22,.61,.36,1),background-color .3s cubic-bezier(.22,.61,.36,1)}.c-library-code{font-family:Source Code Pro}.c-library-pre{overflow-x:auto;background:#ebf1f2;padding:18px;padding:var(--space-s);font-family:Source Code Pro;line-height:1.4}.c-library-pre--bordered{border-bottom:1px solid #bfd3d6}.c-library-version{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);color:#959595}.c-library-status{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:.25em .666em;border-radius:.25em;background:#bfd3d6;color:#959595}.c-library-status--ready{background:#13aa13;color:#fff}.c-library-status--in-production,.c-library-status--development,.c-library-status--placeholder{background:#f2a60d;color:#fff}.c-library-status--deprecated{background:#ce0058;color:#fff}.c-library__swatch-grid{display:grid;gap:0 1em;grid-auto-rows:minmax(4em,auto);margin-bottom:var(--space-m)}@media only screen and (min-width: 680px){.c-library__swatch-grid{gap:0;grid-template-columns:repeat(5,auto);grid-template-rows:5em auto}}.c-library__swatch-grid--has-labels{grid-auto-flow:row}@media only screen and (min-width: 40em){.c-library__swatch-grid--has-labels{grid-template-columns:minmax(15%,15em) auto;grid-template-rows:auto}}@media only screen and (min-width: 1000px){.c-library__swatch-grid--has-labels{grid-auto-flow:column;grid-template-columns:repeat(5,1fr);grid-template-rows:5em auto}}.c-library__swatches,.c-library__swatch-labels{display:grid;grid-template-columns:repeat(auto-fit,165px)}.c-library__swatch{display:flex}.c-library__swatch>*{justify-content:center;font-weight:700;margin:auto}.c-library__swatches>*{height:0;padding-bottom:50%;position:relative}.c-library__swatches>*>*{display:flex;justify-content:center;align-items:center;padding:.5rem;font-weight:700;text-align:center;position:absolute;height:100%;width:100%;left:0;top:0}.c-library__swatch-grid table{letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2)}.c-library__swatch-grid table td,.c-library__swatch-grid table th{padding:9px 0 9px 4.5px;padding:var(--space-2xs) 0 var(--space-2xs) var(--space-3xs)}.c-library__swatch-grid table th{width:3em}.c-library__swatch-grid table td{font-family:monospace}.c-library__image-row{display:flex;max-width:100%}.c-library__image-row img{flex:1 1 auto;margin:0 2% 0 0;object-fit:contain;width:6%}.c-library__image-row img:last-child{margin-right:0}.c-library__space{display:block}.c-library__space span{background:linear-gradient(45deg,#fff3,#fff0),#ce005880;height:0;padding-bottom:100%;position:relative;display:block}.c-library__space code{position:absolute;line-height:1;left:100%;top:50%;margin-left:18px;margin-left:var(--space-s);white-space:nowrap;transform:translateY(-50%)}.c-library-grid{background:#00758c;padding:3rem 1rem;display:flex;justify-content:center;align-items:center;color:#fff;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1)}.c-library-grid--alt{background:#3d7b87;padding:2rem 1rem}.c-library-grid--alt:before{content:" ";display:block}.c-library-grid--first{background:#005461;padding:2rem 1rem}.c-library-grid--first:before{content:"First on mobile"}.c-library-copy{position:relative}.c-library-copy__trigger{position:absolute;background:#bfd3d6;bottom:0;right:0;font-weight:700;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:4.5px 9px;padding:var(--space-3xs) var(--space-2xs);letter-spacing:.02em}.c-library-copy__trigger:hover{color:#ce0058}.c-library__typo__sidebar{width:14.2857142857%}.c-library__typo__sidebar span{display:block}.c-library__typo__sidebar .x2{margin-top:4.25em;border:1px solid #333333;border-width:1px 0;height:2em;line-height:2em}.c-library__typo__main{width:82.8571428571%}.c-library__semi{font-weight:600}.c-library__photo-grid{display:grid;gap:2px;grid-template-columns:1fr;margin-top:54px;margin-top:var(--space-xl)}@media only screen and (min-width: 880px){.c-library__photo-grid{grid-auto-flow:dense;grid-auto-rows:auto}.c-library__photo-grid img{height:100%;width:100%;object-fit:cover}.c-library__photo-grid div{grid-column:1/3;grid-row:1/2;display:flex}.c-library__photo-grid div h2{margin:auto var(--space-s)}.c-library__photo-grid.grid-1{grid-template-columns:40% 20% 40%;grid-template-rows:var(--space-2xl) 400px 400px}.c-library__photo-grid.grid-1 img:nth-child(2){grid-row:2/3;grid-column:1/3}.c-library__photo-grid.grid-1 img:nth-child(3){grid-column:3/4;grid-row:1/3}.c-library__photo-grid.grid-1 img:nth-child(5){grid-column:2/4}.c-library__photo-grid.grid-2{grid-template-columns:50% 50%;grid-template-rows:var(--space-2xl) 300px 300px}.c-library__photo-grid.grid-2 div{grid-column:1/2}.c-library__photo-grid.grid-2 img:nth-child(2){grid-row:2/4}.c-library__photo-grid.grid-2 img:nth-child(3){grid-row:1/3}}.c-library__illustration-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--gutter)}.c-library__illustration-grid :nth-child(odd):nth-last-child(5){grid-column:1/-1}.c-library .c-alert ul li{list-style:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="20" viewBox="0 0 10 20"><circle cx="5" cy="14" r="3.5" fill="%2313AA13" fill-rule="evenodd"/></svg>') outside;margin-left:1em;padding-left:.5rem}.c-library .c-alert ul li h3,.c-library .c-alert ul li h4{line-height:1.6;font-size:1em;color:#13aa13}@media only screen and (max-width: 1050px){.c-library__logo-name span:nth-last-child(3),.c-library__logo-name span:nth-last-child(1){letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2)}.c-library__logo-name span:nth-last-child(2){letter-spacing:-.02em;font-size:21.6px;font-size:var(--step-1)}.c-library__header nav li:last-child{display:none}}@media only screen and (min-width: 650px) and (max-width: 700px),screen and (max-width: 450px){.c-library__header nav .u-row{gap:9px;gap:var(--space-2xs);letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2)}}@media only screen and (max-width: 650px){.c-library__header nav a{padding:9px 0;padding:var(--space-2xs) 0;display:block}.c-library__header .c-library-page-active:after{bottom:4.5px;bottom:var(--space-3xs)}}.u-resize{overflow:hidden;resize:both}
|
1
|
+
@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap";:root{--mp-website: "brand.malvernpanalytical.com"}.u-breakout{left:50%;left:calc(50% + var(--scrollbarWidth) / 2.0001);position:relative;transform:translate(-50vw);width:100vw;width:calc(100vw - var(--scrollbarWidth));padding-left:safe-space(0);padding-right:safe-space(0)}.u-cutoff{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--gutter)),calc(100% - var(--gutter)) 100%,0 100%)}.u-cutoff--top-right{clip-path:polygon(0 0,calc(100% - var(--gutter)) 0,100% var(--gutter),100% 100%,0 100%)}.u-cutoff--top-left{clip-path:polygon(0 var(--gutter),var(--gutter) 0,100% 0,100% 100%,0 100%)}.u-cutoff--bottom-left{clip-path:polygon(0 0,100% 0,100% 100%,var(--gutter) 100%,0 calc(100% - var(--gutter)))}.u-cutoff--m{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--space-m)),calc(100% - var(--space-m)) 100%,0 100%)}.u-cutoff--xl{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--space-xl)),calc(100% - var(--space-xl)) 100%,0 100%)}:root{--fluid-min-width: 320;--fluid-max-width: 1332;--fluid-screen: 100vw;--fluid-bp: calc( (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)) )}@media screen and (min-width: 1332px){:root{--fluid-screen: calc(var(--fluid-max-width) * 1px)}}:root{--f--2-min: 12.64;--f--2-max: 12.5;--step--2: calc( ((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) * var(--fluid-bp) );--f--1-min: 14.22;--f--1-max: 15;--step--1: calc( ((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) * var(--fluid-bp) );--f-0-min: 16;--f-0-max: 18;--step-0: calc( ((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp) );--f-1-min: 18;--f-1-max: 21.6;--step-1: calc( ((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp) );--f-2-min: 20.25;--f-2-max: 25.92;--step-2: calc( ((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp) );--f-3-min: 22.78;--f-3-max: 31.1;--step-3: calc( ((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp) );--f-4-min: 25.63;--f-4-max: 37.32;--step-4: calc( ((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp) );--f-5-min: 28.83;--f-5-max: 44.79;--step-5: calc( ((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) * var(--fluid-bp) );--f-6-min: 32.44;--f-6-max: 53.75;--step-6: calc( ((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min)) * var(--fluid-bp) );--f-7-min: 36.49;--f-7-max: 64.5;--step-7: calc( ((var(--f-7-min) / 16) * 1rem) + (var(--f-7-max) - var(--f-7-min)) * var(--fluid-bp) );--f-8-min: 41.05;--f-8-max: 77.4;--step-8: calc( ((var(--f-8-min) / 16) * 1rem) + (var(--f-8-max) - var(--f-8-min)) * var(--fluid-bp) );--f-9-min: 46.18;--f-9-max: 92.88;--step-9: calc( ((var(--f-9-min) / 16) * 1rem) + (var(--f-9-max) - var(--f-9-min)) * var(--fluid-bp) );--f-10-min: 51.96;--f-10-max: 111.45;--step-10: calc( ((var(--f-10-min) / 16) * 1rem) + (var(--f-10-max) - var(--f-10-min)) * var(--fluid-bp) )}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/build/fonts/Inter-Regular.woff2) format("woff2"),url(/build/fonts/Inter-Regular.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/build/fonts/Inter-SemiBold.woff2) format("woff2"),url(/build/fonts/Inter-SemiBold.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/build/fonts/Inter-Bold.woff2) format("woff2"),url(/build/fonts/Inter-Bold.woff) format("woff")}:root{--wrapper: 78.75rem}:root{--max-screen: 83.25;--fc-screen: 100vw;--fc-bp: calc((var(--fc-screen) - 20em) / (var(--max-screen) - 20));--fc-base: 18;--fc-3xs: 4.5;--space-3xs: calc(var(--fc-3xs) / 16 * 1rem);--fc-2xs: 9;--space-2xs: calc(var(--fc-2xs) / 16 * 1rem);--fc-xs: 13.5;--space-xs: calc(var(--fc-xs) / 16 * 1rem);--fc-s: 18;--space-s: calc(var(--fc-s) / 16 * 1rem);--fc-m: 27;--space-m: calc(var(--fc-m) / 16 * 1rem);--fc-l: 36;--space-l: calc(var(--fc-l) / 16 * 1rem);--fc-xl: 54;--space-xl: calc(var(--fc-xl) / 16 * 1rem);--fc-2xl: 72;--space-2xl: calc(var(--fc-2xl) / 16 * 1rem);--fc-3xl: 108;--space-3xl: calc(var(--fc-3xl) / 16 * 1rem);--fc-4xl: 144;--space-4xl: calc(var(--fc-4xl) / 16 * 1rem);--space--3xs: calc( ((var(--fc-) / 16) * 1rem) + (var(--fc-3xs) - var(--fc-)) * var(--fluid-bp) );--space-3xs-2xs: calc( ((var(--fc-3xs) / 16) * 1rem) + (var(--fc-2xs) - var(--fc-3xs)) * var(--fluid-bp) );--space-2xs-xs: calc( ((var(--fc-2xs) / 16) * 1rem) + (var(--fc-xs) - var(--fc-2xs)) * var(--fluid-bp) );--space-xs-s: calc( ((var(--fc-xs) / 16) * 1rem) + (var(--fc-s) - var(--fc-xs)) * var(--fluid-bp) );--space-m-l: calc( ((var(--fc-m) / 16) * 1rem) + (var(--fc-l) - var(--fc-m)) * var(--fluid-bp) );--space-l-xl: calc( ((var(--fc-l) / 16) * 1rem) + (var(--fc-xl) - var(--fc-l)) * var(--fluid-bp) );--space-xl-2xl: calc( ((var(--fc-xl) / 16) * 1rem) + (var(--fc-2xl) - var(--fc-xl)) * var(--fluid-bp) );--space-2xl-3xl: calc( ((var(--fc-2xl) / 16) * 1rem) + (var(--fc-3xl) - var(--fc-2xl)) * var(--fluid-bp) );--space-3xl-4xl: calc( ((var(--fc-3xl) / 16) * 1rem) + (var(--fc-4xl) - var(--fc-3xl)) * var(--fluid-bp) );--space-s-l: calc( ((var(--fc-s) / 16) * 1rem) + (var(--fc-l) - var(--fc-s)) * var(--fluid-bp) );--space-s-m: calc( ((var(--fc-s) / 16) * 1rem) + (var(--fc-m) - var(--fc-s)) * var(--fluid-bp) );--space-xs-l: calc( ((var(--fc-xs) / 16) * 1rem) + (var(--fc-l) - var(--fc-xs)) * var(--fluid-bp) );--space-m-xl: calc( ((var(--fc-m) / 16) * 1rem) + (var(--fc-xl) - var(--fc-m)) * var(--fluid-bp) );--space-l-2xl: calc( ((var(--fc-l) / 16) * 1rem) + (var(--fc-2xl) - var(--fc-l)) * var(--fluid-bp) );--space-s-xl: calc( ((var(--fc-s) / 16) * 1rem) + (var(--fc-xl) - var(--fc-s)) * var(--fluid-bp) );--space-l-3xl: calc( ((var(--fc-l) / 16) * 1rem) + (var(--fc-3xl) - var(--fc-l)) * var(--fluid-bp) );--space-xl-3xl: calc( ((var(--fc-xl) / 16) * 1rem) + (var(--fc-3xl) - var(--fc-xl)) * var(--fluid-bp) );--space-l-4xl: calc( ((var(--fc-l) / 16) * 1rem) + (var(--fc-4xl) - var(--fc-l)) * var(--fluid-bp) );--space-3xs-m: calc( ((var(--fc-3xs) / 16) * 1rem) + (var(--fc-m) - var(--fc-3xs)) * var(--fluid-bp) );--gutter: var(--space-s-l)}@media screen and (min-width: 75em){:root{--fc-screen: calc(var(--max-screen) * 1rem)}}:root{--color-petrol-step--2: #002126;--color-petrol-step--1: #003039;--color-petrol-step-0: #005461;--color-petrol-step-1: #3d7b87;--color-petrol-step-2: #bfd3d6;--color-petrol-step-3: #ebf1f2;--color-blue-step--1: #00758c;--color-blue-step-0: #00a2c2;--color-blue-step-1: #47bcd3;--color-blue-step-2: #c2e9f0;--color-blue-step-3: #ebf8fa;--color-green-step--1: #0e7a0e;--color-green-step-0: #13aa13;--color-green-step-1: #55c255;--color-green-step-2: #c6ebc6;--color-green-step-3: #ecf8ec;--color-red-step--1: #9b0042;--color-red-step-0: #ce0058;--color-red-step-1: #dc4787;--color-red-step-2: #f3c2d7;--color-red-step-3: #fbebf2;--color-utility-blue-step--1: #004e7e;--color-utility-blue-step-0: #006daf;--color-utility-blue-step-1: #4796c5;--color-utility-blue-step-2: #c2dcec;--color-utility-blue-step-3: #ebf3f9;--color-utility-orange-step--1: #ae7809;--color-utility-orange-step-0: #f2a60d;--color-utility-orange-step-1: #f6bf51;--color-utility-orange-step-2: #fceac5;--color-utility-orange-step-3: #fef8ec;--color-grey--50: #666666;--color-grey-step--2: #0a0a0a;--color-grey-step--1: #1c1c1c;--color-grey-step-0: #333333;--color-grey-step-1: #959595;--color-grey-step-2: #cecece;--color-grey-step-3: #efefef;--color-white-step-0: #fff}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{--wrapper: 78.75rem;--column: calc(var(--wrapper) / 12);--column-1: calc(var(--column) * 1);--column-2: calc(var(--column) * 2);--column-3: calc(var(--column) * 3);--column-4: calc(var(--column) * 4);--column-5: calc(var(--column) * 5);--column-6: calc(var(--column) * 6);--column-7: calc(var(--column) * 7);--column-8: calc(var(--column) * 8);--column-9: calc(var(--column) * 9);--column-10: calc(var(--column) * 10);--column-11: calc(var(--column) * 11);--column-12: calc(var(--column) * 12)}*,*:before,*:after{box-sizing:border-box}body{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;min-height:100vh;margin:0}html{scroll-behavior:smooth}blockquote,pre,ol,ul,figure{padding:0;margin:0}img{max-width:100%;display:block;height:auto;border:none}article,aside,figure,footer,header,main,nav{display:block}iframe{border:none}body{font:400 1.125rem/1.2 Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;letter-spacing:-.01em;font-size:18px;font-size:var(--step-0);color:#333}h1,h2,h3,h4,h5,h6,p,ul,ol,dl{margin:0}ul,ol,p{line-height:1.2}a{text-decoration:none}a,a:hover{cursor:pointer;color:inherit}.mp ol,.mp ul{list-style:none}cite,address{font-style:normal}[type=submit],[type=button],button{border-radius:0;background:transparent;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;cursor:pointer;border:none;color:inherit;font:inherit}label{cursor:pointer}fieldset{border:0;padding:.01em 0 0}@media (prefers-reduced-motion: reduce){*{-webkit-animation:none!important;animation:none!important;transition:none!important;scroll-behavior:auto!important}}code[class*=language-],pre[class*=language-]{text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;color:#3d7b87;background:#ebf1f2;font-family:Source Code Pro,monospace;font-size:1rem;line-height:1.5em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.c-alert code[class*=language-],.c-alert pre[class*=language-]{background:transparent}code[class*=language-]::-moz-selection,pre[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection,pre[class*=language-] ::-moz-selection{background:#cceae7;color:#263238}code[class*=language-]::selection,pre[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-] ::selection{background:#cceae7;color:#263238}:not(pre)>code[class*=language-]{white-space:normal;border-radius:.2em;padding:.1em}pre[class*=language-]{overflow:auto;position:relative;padding:18px;padding:var(--space-s)}.language-css>code,.language-sass>code,.language-scss>code{color:#f2a60d}[class*=language-] .namespace{opacity:.7}.token.atrule{color:#3d7b87}.token.attr-name{color:#00a2c2}.token.attr-value,.token.attribute{color:#13aa13}.token.boolean{color:#ce0058}.token.builtin,.token.cdata,.token.char,.token.class{color:#00a2c2}.token.class-name{color:#6182b8}.token.comment{color:#aabfc9}.token.constant{color:#3d7b87}.token.deleted{color:#ce0058}.token.doctype{color:#aabfc9}.token.entity{color:#ce0058}.token.function{color:#3d7b87}.token.hexcode{color:#f2a60d}.token.id,.token.important{color:#3d7b87;font-weight:700}.token.inserted{color:#00a2c2}.token.keyword{color:#3d7b87}.token.number{color:#f2a60d}.token.operator{color:#00a2c2}.token.prolog{color:#aabfc9}.token.property{color:#00a2c2}.token.pseudo-class,.token.pseudo-element{color:#13aa13}.token.punctuation,.token.regex{color:#00a2c2}.token.selector{color:#ce0058}.token.string{color:#13aa13}.token.symbol{color:#3d7b87}.token.tag{color:#005461}.token.unit{color:#f2a60d}.token.url,.token.variable{color:#ce0058}.u-hr,.c-library hr,.o-prose hr{margin:0 0 27px;border:none;padding-bottom:27px;padding-bottom:var(--space-m-xl);margin-bottom:var(--space-m-xl);border-bottom:1px solid #bfd3d6}.u-border-top{border-top:1px solid #bfd3d6}.u-border-bottom{border-bottom:1px solid #bfd3d6}.u-border{border:1px solid #bfd3d6}.o-grid{display:flex;flex-wrap:wrap;justify-content:stretch;margin-bottom:-18px;margin-bottom:calc(-1 * var(--gutter));width:100%}.o-grid--float:after{content:" ";display:table;clear:both}.o-grid--between{justify-content:space-between}.o-grid--no-height-match{align-items:start}.o-grid>*{margin-bottom:18px;margin-bottom:var(--gutter);width:100%}@media (min-width: 40em){.o-grid--of-two>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--gutter) / 2 - .1px)}.o-grid--of-two>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-two>*:nth-child(odd){margin-left:0}.o-grid--of-two.o-grid--s>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--space-s) / 2 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-two.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-two.o-grid--s>*:nth-child(odd){margin-left:0}}.o-grid--of-two-switch{justify-content:space-between}@media (min-width: 40em){.o-grid--of-two-switch>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--gutter) / 2 - .1px)}.o-grid--of-two-switch>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-two-switch>*:nth-child(odd){margin-left:0}.o-grid--of-two-switch.o-grid--s>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--space-s) / 2 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-two-switch.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-two-switch.o-grid--s>*:nth-child(odd){margin-left:0}.o-grid--of-two-switch>:nth-child(2n+2){margin-left:0}}@media (min-width: 55em){.o-grid--of-two-late>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--gutter) / 2 - .1px)}.o-grid--of-two-late>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-two-late>*:nth-child(odd){margin-left:0}.o-grid--of-two-late.o-grid--s>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--space-s) / 2 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-two-late.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-two-late.o-grid--s>*:nth-child(odd){margin-left:0}}@media (min-width: 22.4em){.o-grid--of-two-early>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--gutter) / 2 - .1px)}.o-grid--of-two-early>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-two-early>*:nth-child(odd){margin-left:0}.o-grid--of-two-early.o-grid--s>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--space-s) / 2 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-two-early.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-two-early.o-grid--s>*:nth-child(odd){margin-left:0}}@media (min-width: 38em) and (max-width: 54.9375em){.o-grid--of-three>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--gutter) / 2 - .1px)}.o-grid--of-three>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three>*:nth-child(odd){margin-left:0}.o-grid--of-three.o-grid--s>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--space-s) / 2 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-three.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-three.o-grid--s>*:nth-child(odd){margin-left:0}}@media (min-width: 55em){.o-grid--of-three>*{width:calc(33.3333333333% - 12px - .1px);width:calc(33.3333333333% - 2 * var(--gutter) / 3 - .1px)}.o-grid--of-three>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three>*:nth-child(3n+1){margin-left:0}.o-grid--of-three.o-grid--s>*{width:calc(33.3333333333% - 12px - .1px);width:calc(33.3333333333% - 2 * var(--space-s) / 3 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-three.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-three.o-grid--s>*:nth-child(3n+1){margin-left:0}}@media (min-width: 38em) and (max-width: 67.9375em){.o-grid--of-three-late>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--gutter) / 2 - .1px)}.o-grid--of-three-late>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three-late>*:nth-child(odd){margin-left:0}.o-grid--of-three-late.o-grid--s>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--space-s) / 2 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-three-late.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-three-late.o-grid--s>*:nth-child(odd){margin-left:0}}@media (min-width: 68em){.o-grid--of-three-late>*{width:calc(33.3333333333% - 12px - .1px);width:calc(33.3333333333% - 2 * var(--gutter) / 3 - .1px)}.o-grid--of-three-late>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three-late>*:nth-child(3n+1){margin-left:0}.o-grid--of-three-late.o-grid--s>*{width:calc(33.3333333333% - 12px - .1px);width:calc(33.3333333333% - 2 * var(--space-s) / 3 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-three-late.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-three-late.o-grid--s>*:nth-child(3n+1){margin-left:0}}@media (min-width: 22.4em) and (max-width: 54.9375em){.o-grid--of-three-early>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--gutter) / 2 - .1px)}.o-grid--of-three-early>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three-early>*:nth-child(odd){margin-left:0}.o-grid--of-three-early.o-grid--s>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--space-s) / 2 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-three-early.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-three-early.o-grid--s>*:nth-child(odd){margin-left:0}}@media (min-width: 55em){.o-grid--of-three-early>*{width:calc(33.3333333333% - 12px - .1px);width:calc(33.3333333333% - 2 * var(--gutter) / 3 - .1px)}.o-grid--of-three-early>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three-early>*:nth-child(3n+1){margin-left:0}.o-grid--of-three-early.o-grid--s>*{width:calc(33.3333333333% - 12px - .1px);width:calc(33.3333333333% - 2 * var(--space-s) / 3 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-three-early.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-three-early.o-grid--s>*:nth-child(3n+1){margin-left:0}}@media (min-width: 38em) and (max-width: 59.9375em){.o-grid--of-four>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--gutter) / 2 - .1px)}.o-grid--of-four>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-four>*:nth-child(odd){margin-left:0}.o-grid--of-four.o-grid--s>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--space-s) / 2 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-four.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-four.o-grid--s>*:nth-child(odd){margin-left:0}}@media (min-width: 60em){.o-grid--of-four>*{width:calc(25% - 13.6px);width:calc(25% - 3 * var(--gutter) / 4 - .1px)}.o-grid--of-four>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-four>*:nth-child(4n+1){margin-left:0}.o-grid--of-four.o-grid--s>*{width:calc(25% - 13.6px);width:calc(25% - 3 * var(--space-s) / 4 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-four.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-four.o-grid--s>*:nth-child(4n+1){margin-left:0}}@media (min-width: 22.4em) and (max-width: 59.9375em){.o-grid--of-four-early>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--gutter) / 2 - .1px)}.o-grid--of-four-early>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-four-early>*:nth-child(odd){margin-left:0}.o-grid--of-four-early.o-grid--s>*{width:calc(50% - 9.1px);width:calc(50% - 1 * var(--space-s) / 2 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-four-early.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-four-early.o-grid--s>*:nth-child(odd){margin-left:0}}@media (min-width: 60em){.o-grid--of-four-early>*{width:calc(25% - 13.6px);width:calc(25% - 3 * var(--gutter) / 4 - .1px)}.o-grid--of-four-early>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-four-early>*:nth-child(4n+1){margin-left:0}.o-grid--of-four-early.o-grid--s>*{width:calc(25% - 13.6px);width:calc(25% - 3 * var(--space-s) / 4 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-four-early.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-four-early.o-grid--s>*:nth-child(4n+1){margin-left:0}}@media (min-width: 22.4em) and (max-width: 64.9375em){.o-grid--of-five>*{width:calc(33.3333333333% - 12px - .1px);width:calc(33.3333333333% - 2 * var(--gutter) / 3 - .1px)}.o-grid--of-five>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-five>*:nth-child(3n+1){margin-left:0}.o-grid--of-five.o-grid--s>*{width:calc(33.3333333333% - 12px - .1px);width:calc(33.3333333333% - 2 * var(--space-s) / 3 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-five.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-five.o-grid--s>*:nth-child(3n+1){margin-left:0}}@media (min-width: 65em){.o-grid--of-five>*{width:calc(20% - 14.5px);width:calc(20% - 4 * var(--gutter) / 5 - .1px)}.o-grid--of-five>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-five>*:nth-child(5n+1){margin-left:0}.o-grid--of-five.o-grid--s>*{width:calc(20% - 14.5px);width:calc(20% - 4 * var(--space-s) / 5 - .1px);margin-bottom:18px;margin-bottom:var(--space-s)}.o-grid--of-five.o-grid--s>*+*{margin-left:18px;margin-left:var(--space-s)}.o-grid--of-five.o-grid--s>*:nth-child(5n+1){margin-left:0}}@media (max-width: 54.9375em){.o-grid--swipeable{left:50%;left:calc(50% + var(--scrollbarWidth) / 2.0001);position:relative;transform:translate(-50vw);width:100vw;width:calc(100vw - var(--scrollbarWidth));padding-left:var(--gutter);padding-right:var(--gutter);flex-wrap:nowrap;overflow-x:scroll;scroll-snap-type:x mandatory;scroll-padding:var(--gutter);-webkit-overflow-scrolling:touch}.o-grid--swipeable>*{flex:0 0 auto;max-width:23em;min-width:300px;width:calc(85vw - var(--gutter) * 2.333);scroll-snap-align:start;scroll-snap-stop:always}.o-grid--swipeable>*+*{margin-left:var(--gutter)!important}}@media (max-width: 55em){.o-grid--float:not([class*=switch])>:nth-child(odd),.o-grid--float[class*=switch]>:nth-child(2n+2),.o-grid--float:not([class*=switch])>:nth-child(2n+2),.o-grid--float[class*=switch]>:nth-child(odd){position:static}}@media (min-width: 55em){.o-grid--4\/7>:nth-child(2n+2),.o-grid--4\/7-switch>:nth-child(2n+2){width:57.1428571429%}.o-grid--9\/3>:nth-child(odd),.o-grid--8\/3>:nth-child(odd),.o-grid--8\/4>:nth-child(odd),.o-grid--3\/9>:nth-child(2n+2),.o-grid--3\/8>:nth-child(2n+2),.o-grid--4\/8>:nth-child(2n+2),.o-grid--9\/3-switch>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(2n+2),.o-grid--8\/4-switch>:nth-child(2n+2),.o-grid--3\/9-switch>:nth-child(odd),.o-grid--3\/8-switch>:nth-child(odd),.o-grid--4\/8-switch>:nth-child(odd){width:65.7142857143%}.o-grid--9\/3>:nth-child(2n+2),.o-grid--8\/3>:nth-child(2n+2),.o-grid--8\/4>:nth-child(2n+2),.o-grid--3\/9>:nth-child(odd),.o-grid--3\/8>:nth-child(odd),.o-grid--4\/8>:nth-child(odd),.o-grid--4\/7>:nth-child(odd),.o-grid--9\/3-switch>:nth-child(odd),.o-grid--8\/3-switch>:nth-child(odd),.o-grid--8\/4-switch>:nth-child(odd),.o-grid--3\/9-switch>:nth-child(2n+2),.o-grid--3\/8-switch>:nth-child(2n+2),.o-grid--4\/8-switch>:nth-child(2n+2),.o-grid--4\/7-switch>:nth-child(odd){width:31.4285714286%}.o-grid--3\/9>:nth-child(2n+2),.o-grid--3\/8>:nth-child(2n+2),.o-grid--4\/8>:nth-child(2n+2),.o-grid--9\/3>:nth-child(2n+2),.o-grid--8\/3>:nth-child(2n+2),.o-grid--8\/4>:nth-child(2n+2),.o-grid--9\/3-switch>:nth-child(odd),.o-grid--8\/3-switch>:nth-child(odd),.o-grid--8\/4-switch>:nth-child(odd),.o-grid--3\/9-switch>:nth-child(odd),.o-grid--3\/8-switch>:nth-child(odd),.o-grid--4\/8-switch>:nth-child(odd){margin-left:2.8571428571%;margin-right:0}.o-grid--8\/3>:nth-child(odd),.o-grid--3\/8>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(2n+2),.o-grid--3\/8-switch>:nth-child(odd){max-width:828px}.o-grid[class*=switch]>:nth-child(odd){order:1}.o-grid--layout{margin-bottom:0}.o-grid--layout>:nth-last-child(1),.o-grid--layout>:nth-last-child(2){margin-bottom:0}.o-grid--push{justify-content:space-between}.o-grid--pull{justify-content:flex-start}.o-grid--float{display:block}.o-grid--float:not([class*=switch])>:nth-child(odd),.o-grid--float[class*=switch]>:nth-child(2n+2){float:left}.o-grid--float:not([class*=switch])>:nth-child(2n+2),.o-grid--float[class*=switch]>:nth-child(odd){float:right}}@media (min-width: 70em){.o-grid--9\/3>:nth-child(odd),.o-grid--8\/3>:nth-child(odd),.o-grid--3\/9>:nth-child(2n+2),.o-grid--3\/8>:nth-child(2n+2),.o-grid--9\/3-switch>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(2n+2),.o-grid--3\/9-switch>:nth-child(odd),.o-grid--3\/8-switch>:nth-child(odd){width:74.2857142857%}.o-grid--9\/3>:nth-child(2n+2),.o-grid--8\/3>:nth-child(2n+2),.o-grid--3\/9>:nth-child(odd),.o-grid--3\/8>:nth-child(odd),.o-grid--9\/3-switch>:nth-child(odd),.o-grid--8\/3-switch>:nth-child(odd),.o-grid--3\/9-switch>:nth-child(2n+2),.o-grid--3\/8-switch>:nth-child(2n+2){width:22.8571428571%}}.c-library{display:grid;min-height:100vh;grid-template-rows:auto 1fr auto}.c-library--components{grid-template-rows:auto 1fr}.c-library__header{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:9px;padding:var(--space-2xs);flex-direction:column;align-items:flex-start;background:#005461;color:#fff;font-weight:700}@media only screen and (min-width: 650px){.c-library__header{letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2);flex-direction:row;align-items:center}}@media only screen and (min-width: 1000px){.c-library__header{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:18px;padding:var(--space-s) var(--space-s-l)}}.c-library__header img{filter:saturate(0) brightness(10)}.c-library__header .c-library-page-active{position:relative}.c-library__header .c-library-page-active:after{content:"";position:absolute;left:0;width:100%;bottom:-6px;border-bottom:1px solid}.c-library--home .c-library__hero{color:#fff;background:linear-gradient(#005461,transparent),linear-gradient(45deg,#00a2c2,#005461)}.c-library__body{display:grid;grid-template-rows:auto auto}@media only screen and (min-width: 600px){.c-library__body{grid-template-columns:10em 1fr}}@media only screen and (min-width: 800px){.c-library__body{grid-template-columns:17em 1fr}}.c-library__sidebar{letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2);border-right:1px solid #ebf1f2;grid-row:-1;scroll-behavior:none}@media only screen and (min-width: 600px){.c-library__sidebar{grid-row:auto;overflow-y:auto;max-height:calc(100vh - 1px);margin-bottom:1px}}@media only screen and (min-width: 800px){.c-library__sidebar{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1)}}.c-library__sidebar>*{padding:18px;padding:var(--space-s-l) var(--space-s) var(--space-s-l) var(--space-s-l)}.c-library__sidebar li{position:relative}.c-library__sidebar li a{color:#006daf}.c-library__sidebar li a:hover{text-decoration:underline;color:#006daf}.c-library__sidebar li+li{margin-top:13.5px;margin-top:var(--space-xs)}.c-library__sidebar ul ul{padding:13.5px;padding:var(--space-xs);padding-bottom:0}.c-library__sidebar ul ul li+li{margin-top:9px;margin-top:var(--space-2xs)}.c-library__skip-link{padding:13.5px;padding:var(--space-xs)}@media only screen and (min-width: 600px){.c-library__skip-link{display:none}}.c-library__logo{display:flex;align-items:center;justify-content:center;max-width:15%;min-width:100px}@media only screen and (min-width: 650px){.c-library__logo{justify-content:flex-start}}.c-library__logo-name{padding-left:13.5px;padding-left:var(--space-xs-s);margin-left:13.5px;margin-left:var(--space-xs-s);border-left:1px solid #3d7b87;white-space:nowrap}.c-library__logo-name span{display:block}.c-library__logo-name span:nth-last-child(3),.c-library__logo-name span:nth-last-child(1){text-transform:uppercase;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);letter-spacing:.08em;color:#bfd3d6}.c-library__logo-name span:nth-last-child(2){color:#fff;letter-spacing:-.03em;font-size:37.32px;font-size:var(--step-4)}.has-js .c-library__sidebar ul>li>ul{display:none}.has-js .c-library__sidebar ul>.c-library-accordion-open>ul{display:block}.c-library .c-library-accordion-open>.c-library-accordion__toggle{transform:rotate(180deg)}.c-library .c-library-accordion__toggle{color:#006daf;line-height:1;font-size:1rem;position:absolute;right:0;top:0;display:flex;align-items:center;justify-content:center;padding:.25rem}.c-library-menu-active{font-weight:700;position:relative}.c-library-menu-active:before{content:"▸ ";position:absolute;left:-17px;top:0}.c-library-stretch{display:flex;flex-direction:column;flex:1}.c-library__main{overflow-y:auto}.c-library__frame{position:relative;width:100%}.c-library__frame-links{position:absolute;right:0;top:calc(-1 * (var(--space-m) + var(--space-s)));z-index:1}.c-library__frame-links a,.c-library__frame-links button{border-radius:0 0 .25em .25em;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:.25em .666em;background:#bfd3d6;color:#959595}.c-library__frame-links a:hover,.c-library__frame-links button:hover{color:#333}.c-library__frame-background{border-radius:0 0 0 .25em;top:0}.c-library__frame-wrap{--width: "";height:100%;overflow:hidden;position:relative;resize:both;max-width:100%}.c-library__frame-wrap:after{background:#ebf1f2;bottom:0;color:#3d7b87;counter-reset:width var(--width);content:counter(width);letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2);mix-blend-mode:multiply;padding:.5ch 1ch;position:absolute;right:0}.c-library__frame iframe{--negative-padding: calc(var(--space-m) * -1);height:100%;width:100%;width:calc(100% - var(--negative-padding) * 2);left:var(--negative-padding);top:var(--negative-padding);position:relative;transition:padding .3s cubic-bezier(.22,.61,.36,1),background-color .3s cubic-bezier(.22,.61,.36,1)}.c-library-code{font-family:Source Code Pro}.c-library-pre{overflow-x:auto;background:#ebf1f2;padding:18px;padding:var(--space-s);font-family:Source Code Pro;line-height:1.4}.c-library-pre--bordered{border-bottom:1px solid #bfd3d6}.c-library-version{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);color:#959595}.c-library-status{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:.25em .666em;border-radius:.25em;background:#bfd3d6;color:#959595}.c-library-status--ready{background:#13aa13;color:#fff}.c-library-status--in-production,.c-library-status--development,.c-library-status--placeholder{background:#f2a60d;color:#fff}.c-library-status--deprecated{background:#ce0058;color:#fff}.c-library__swatch-grid{display:grid;gap:0 1em;grid-auto-rows:minmax(4em,auto);margin-bottom:var(--space-m)}@media only screen and (min-width: 680px){.c-library__swatch-grid{gap:0;grid-template-columns:repeat(5,auto);grid-template-rows:5em auto}}.c-library__swatch-grid--has-labels{grid-auto-flow:row}@media only screen and (min-width: 40em){.c-library__swatch-grid--has-labels{grid-template-columns:minmax(15%,15em) auto;grid-template-rows:auto}}@media only screen and (min-width: 1000px){.c-library__swatch-grid--has-labels{grid-auto-flow:column;grid-template-columns:repeat(5,1fr);grid-template-rows:5em auto}}.c-library__swatches,.c-library__swatch-labels{display:grid;grid-template-columns:repeat(auto-fit,165px)}.c-library__swatch{display:flex}.c-library__swatch>*{justify-content:center;font-weight:700;margin:auto}.c-library__swatches>*{height:0;padding-bottom:50%;position:relative}.c-library__swatches>*>*{display:flex;justify-content:center;align-items:center;padding:.5rem;font-weight:700;text-align:center;position:absolute;height:100%;width:100%;left:0;top:0}.c-library__swatch-grid table{letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2)}.c-library__swatch-grid table td,.c-library__swatch-grid table th{padding:9px 0 9px 4.5px;padding:var(--space-2xs) 0 var(--space-2xs) var(--space-3xs)}.c-library__swatch-grid table th{width:3em}.c-library__swatch-grid table td{font-family:monospace}.c-library__image-row{display:flex;max-width:100%}.c-library__image-row img{flex:1 1 auto;margin:0 2% 0 0;object-fit:contain;width:6%}.c-library__image-row img:last-child{margin-right:0}.c-library__space{display:block}.c-library__space span{background:linear-gradient(45deg,#fff3,#fff0),#ce005880;height:0;padding-bottom:100%;position:relative;display:block}.c-library__space code{position:absolute;line-height:1;left:100%;top:50%;margin-left:18px;margin-left:var(--space-s);white-space:nowrap;transform:translateY(-50%)}.c-library-grid{background:#00758c;padding:3rem 1rem;display:flex;justify-content:center;align-items:center;color:#fff;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1)}.c-library-grid--alt{background:#3d7b87;padding:2rem 1rem}.c-library-grid--alt:before{content:" ";display:block}.c-library-grid--first{background:#005461;padding:2rem 1rem}.c-library-grid--first:before{content:"First on mobile"}.c-library-copy{position:relative}.c-library-copy__trigger{position:absolute;background:#bfd3d6;bottom:0;right:0;font-weight:700;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:4.5px 9px;padding:var(--space-3xs) var(--space-2xs);letter-spacing:.02em}.c-library-copy__trigger:hover{color:#ce0058}.c-library__typo__sidebar{width:14.2857142857%}.c-library__typo__sidebar span{display:block}.c-library__typo__sidebar .x2{margin-top:4.25em;border:1px solid #333333;border-width:1px 0;height:2em;line-height:2em}.c-library__typo__main{width:82.8571428571%}.c-library__semi{font-weight:600}.c-library__photo-grid{display:grid;gap:2px;grid-template-columns:1fr;margin-top:54px;margin-top:var(--space-xl)}@media only screen and (min-width: 880px){.c-library__photo-grid{grid-auto-flow:dense;grid-auto-rows:auto}.c-library__photo-grid img{height:100%;width:100%;object-fit:cover}.c-library__photo-grid div{grid-column:1/3;grid-row:1/2;display:flex}.c-library__photo-grid div h2{margin:auto var(--space-s)}.c-library__photo-grid.grid-1{grid-template-columns:40% 20% 40%;grid-template-rows:var(--space-2xl) 400px 400px}.c-library__photo-grid.grid-1 img:nth-child(2){grid-row:2/3;grid-column:1/3}.c-library__photo-grid.grid-1 img:nth-child(3){grid-column:3/4;grid-row:1/3}.c-library__photo-grid.grid-1 img:nth-child(5){grid-column:2/4}.c-library__photo-grid.grid-2{grid-template-columns:50% 50%;grid-template-rows:var(--space-2xl) 300px 300px}.c-library__photo-grid.grid-2 div{grid-column:1/2}.c-library__photo-grid.grid-2 img:nth-child(2){grid-row:2/4}.c-library__photo-grid.grid-2 img:nth-child(3){grid-row:1/3}}.c-library__illustration-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--gutter)}.c-library__illustration-grid :nth-child(odd):nth-last-child(5){grid-column:1/-1}.c-library .c-alert ul li{list-style:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="20" viewBox="0 0 10 20"><circle cx="5" cy="14" r="3.5" fill="%2313AA13" fill-rule="evenodd"/></svg>') outside;margin-left:1em;padding-left:.5rem}.c-library .c-alert ul li h3,.c-library .c-alert ul li h4{line-height:1.6;font-size:1em;color:#13aa13}@media only screen and (max-width: 1050px){.c-library__logo-name span:nth-last-child(3),.c-library__logo-name span:nth-last-child(1){letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2)}.c-library__logo-name span:nth-last-child(2){letter-spacing:-.02em;font-size:21.6px;font-size:var(--step-1)}.c-library__header nav li:last-child{display:none}}@media only screen and (min-width: 650px) and (max-width: 700px),screen and (max-width: 450px){.c-library__header nav .u-row{gap:9px;gap:var(--space-2xs);letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2)}}@media only screen and (max-width: 650px){.c-library__header nav a{padding:9px 0;padding:var(--space-2xs) 0;display:block}.c-library__header .c-library-page-active:after{bottom:4.5px;bottom:var(--space-3xs)}}.u-resize{overflow:hidden;resize:both}
|