@layer reset { *, :before, :after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #efefef } :before, :after { --content: "" } html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-feature-settings: normal; font-variation-settings: normal } body { margin: 0; line-height: inherit } hr { height: 0; color: inherit; border-top-width: 1px } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit } a { color: inherit; text-decoration: inherit } b, strong { font-weight: bolder } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; font-size: 1em } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sub { bottom: -.25em } sup { top: -.5em } table { text-indent: 0; border-color: inherit; border-collapse: collapse } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; -webkit-font-kerning: inherit; font-kerning: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0 } button, select { text-transform: none } button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; background-color: transparent; background-image: none } :-moz-focusring { outline: auto } :-moz-ui-invalid { box-shadow: none } progress { vertical-align: baseline } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto } [type=search] { -webkit-appearance: textfield; outline-offset: -2px } ::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } summary { display: list-item } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0 } fieldset { margin: 0; padding: 0 } legend { padding: 0 } ol, ul, menu { list-style: none; margin: 0; padding: 0 } textarea { resize: vertical } input::placeholder, textarea::placeholder { opacity: 1; color: #ccc } button, [role=button] { cursor: pointer } :disabled { cursor: default } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle } img, video { max-width: 100%; height: auto } [hidden] { display: none } [type=text], [type=email], [type=url], [type=password], [type=number], [type=date], [type=datetime-local], [type=month], [type=search], [type=tel], [type=time], [type=week], [multiple], textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none } input::placeholder, textarea::placeholder { color: #b4b4b4; opacity: 1 } ::-webkit-datetime-edit-fields-wrapper { padding: 0 } ::-webkit-date-and-time-value { min-height: 1.5em } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-top: 0; padding-bottom: 0 } select { -webkit-print-color-adjust: exact; print-color-adjust: exact } [multiple] { -webkit-print-color-adjust: unset; print-color-adjust: unset } [type=checkbox], [type=radio] { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; display: inline-block; vertical-align: middle; background-origin: border-box; -webkit-user-select: none; user-select: none; flex-shrink: 0; height: 1rem; width: 1rem } [type=checkbox] { border-radius: 0 } [type=radio] { border-radius: 100% } [type=file] { background: unset; border-color: inherit; border-width: 0; border-radius: 0; padding: 0; font-size: unset; line-height: inherit } } @layer base { @font-face { font-family: Gantari; font-style: normal; font-weight: 200 800; src: url(/assets/fonts/Gantari/Gantari-VariableFont_wght.ttf) format("truetype") } @font-face { font-family: Gantari; font-style: italic; font-weight: 200 800; src: url(../font/Gantari-Italic-VariableFont_wght.ttf) format("truetype") } @font-face { font-family: DNV Display; font-weight: 300; src: url(../font/DNVDisplay-Light-Web.woff2) format("woff2"), url(../font/DNVDisplay-Light-Web.woff) format("woff") } @font-face { font-family: DNV Display; font-weight: 400; src: url(../font/DNVDisplay-Regular-Web.woff2) format("woff2"), url(../font/DNVDisplay-Regular-Web.woff) format("woff") } @font-face { font-family: DNV Display; font-weight: 500; src: url(../font/DNVDisplay-Medium-Web.woff2) format("woff2"), url(../font/DNVDisplay-Medium-Web.woff) format("woff") } @font-face { font-family: "Font Awesome 6 Pro Subset"; font-weight: 300; src: url(../font/fa-light-300.woff2) format("woff2"), url(../font/fa-light-300.ttf) format("truetype") } @font-face { font-family: "Font Awesome 6 Pro Fullset"; font-weight: 300; src: url(../font/fa-light-3001.woff2) format("woff2"), url(../font/fa-light-3001.ttf) format("truetype") } @font-face { font-family: "Font Awesome 6 Brands Subset"; font-weight: 400; src: url(../font/fa-brands-400.woff2) format("woff2"), url(../font/fa-brands-400.ttf) format("truetype") } @font-face { font-family: "Font Awesome 6 Brands Fullset"; font-weight: 400; src: url(../font/fa-brands-4001.woff2) format("woff2"), url(../font/fa-brands-4001.ttf) format("truetype") } @font-face { font-family: "Font Awesome 6 Pro Solid Subset"; font-weight: 900; src: url(../font/fa-solid-900.woff2) format("woff2"), url(../font/fa-solid-900.ttf) format("truetype") } @font-face { font-family: illustrations; src: url(../font/illustrations.eot); src: url(../font/illustrations.eot) format("embedded-opentype"), url(../font/illustrations.woff2) format("woff2"), url(../font/illustrations.woff) format("woff"), url(../font/illustrations.ttf) format("truetype"), url(../font/illustrations.svg) format("svg"); font-weight: 400; font-style: normal } @font-face { font-family: dnvgl; font-weight: 400; font-style: normal; src: url(../font/icomoon.eot) format("embedded-opentype"), url(../font/icomoon.woff2) format("woff2"), url(../font/icomoon.woff) format("woff"), url(../font/icomoon.ttf) format("truetype"), url(../font/icomoon.svg) format("svg") } @font-face { font-family: VideoJS; src: url(data:application/font-woff;charset=utf-8;base64,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) format("woff"); font-weight: 400; font-style: normal } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .sr-only { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important } .sr-only-focusable:active, .sr-only-focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto } .heading-with-line { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; text-transform: uppercase } .heading-with-line:after { content: ""; flex: 1; height: 1px; width: 100%; background-color: var(--theme-border-light) } :root { --color-dark-blue: #0f204b; --color-sea-blue: #003591; --color-sky-blue: #99d9f0; --color-digi-green: #91ffb4; --color-white: #ffffff; --color-black: #1a1a19; --color-border-sandstone: #cccbc9; --color-border-sandstone-30: #4f4d4a; --color-energy-red-95: #fde8e9; --color-land-green: #409c35; --color-land-green-30: #2f7227; --color-land-green-95: #edf9ec; --color-sunflower-50: #ffe900; --color-sunflower-95: #fffde5; --color-cyan-40: #007fad; --color-cyan-50: #33c8ff; --color-cyan-95: #e5f8ff; --color-bg-sandstone-95: #f3f2f2; --color-bg-earth: #f2e6d5; --color-cyan: #009fda; --color-energy-red: #eb2a34; --color-land-green: #3f9c35; --color-sunflower: #fff377; --color-lavender: #a1aae6; --color-teracotta: #b56700; --color-eucalyptus: #15c2bb; --color-pine: #2b6173; --color-land-green-20: #1f4c1a; --color-sunflower-20: #665d00; --color-lavender-30: #202c79; --color-warm-grey: #988f86; --color-earth: #f2e6d5; --color-sandstone: #cccbc9; --color-cyber-dark-blue: #0b2e7a; --color-cyber-sea-blue: #305dbe; --color-cyber-sky-blue: #95d0e6; --color-cyber-accent: #ffac5e; --color-cyber-bg-light: #f0f5ff; --color-cyber-lavender: #949dd7; --color-cyber-border-dark: #97b8ff; --color-cyber-black: #000000; --deprecated-sky: rgb(231, 244, 249); --deprecated-color-black: #000000; --deprecated-color-border-gray: #b4b4b4; --deprecated-color-green-light: #65b33a; --deprecated-color-green-dark: #36842d; --deprecated-color-green: #46aa1e; --deprecated-color-validation-red: #c4262e; --deprecated-color-blue-darkest: #364566; --deprecated-color-blue-darker: #3c4a6f; --deprecated-color-blue-dark: #1468a0; --deprecated-color-blue-darken-20: #007fae; --deprecated-color-blue: #009fda; --deprecated-color-blue-10: #019fdb; --deprecated-color-blue-20: #01afed; --deprecated-color-blue-40: #33b2e1; --deprecated-color-blue-50: #4cbbe5; --deprecated-color-blue-60: #66c5e9; --deprecated-color-blue-70: #8cd3ef; --deprecated-color-blue-80: #a1d9f7; --deprecated-color-blue-90: #b3e3f4; --deprecated-color-gray-dark: #0a0a0a; --deprecated-color-gray-dark-10: #373737; --deprecated-color-gray-dark-20: #333333; --deprecated-color-gray-dark-30: #505050; --deprecated-color-gray-dark-40: #666666; --deprecated-color-gray-dark-50: #787571; --deprecated-color-gray-dark-60: #787878; --deprecated-color-gray-dark-70: #848484; --deprecated-color-gray-dark-80: #979797; --deprecated-color-gray-dark-90: #999999; --deprecated-color-gray: #bfbfbf; --deprecated-color-gray-10: #cccccc; --deprecated-color-gray-20: #ccecf8; --deprecated-color-gray-30: #d8d8d8; --deprecated-color-gray-40: #e5e5e5; --deprecated-color-gray-50: #e6e6e1; --deprecated-color-gray-60: #e8e8e8; --deprecated-color-gray-70: #ececec; --deprecated-color-gray-90: #f2f2f2 } :root { --font-weight--thin: 200; --font-weight--light: 300; --font-weight--regular: 350; --font-weight--medium: 450; --font-weight--demi: 549; --font-weight--bold: 700; --font-decorative: "DNV Display", Helvetica, Arial, sans-serif; --font-body: "Gantari", Helvetica, Arial, system-ui, sans-serif; --font-icons: "Font Awesome 6 Pro Subset", "Font Awesome 6 Pro Fullset", sans-serif; --font-brands: "Font Awesome 6 Brands Subset", "Font Awesome 6 Brands Fullset", sans-serif; --font-illustrations: illustrations, sans-serif; --font-icons--solid: "Font Awesome 6 Pro Solid Subset", sans-serif; --letter-spacing: .05em; --font-size--xxsmall: .8125rem; --font-size--xsmall: .875rem; --font-size--small: 1rem; --font-size--base: 1.125rem; --font-size--medium: 1.375rem; --font-size--large: 1.25rem; --font-size--xlarge: 1.75rem; --font-size--xxlarge: 2.25rem; --font-size--xxxlarge: 2.625rem; --line-height--xxsmall: 1.125rem; --line-height--xsmall: 1.5rem; --line-height--small: 1.375rem; --line-height--base: 1.625rem; --line-height--medium: 2rem; --line-height--large: 1.75rem; --line-height--xlarge: 2.375rem; --line-height--xxlarge: 3rem; --line-height--xxxlarge: 3.25rem } @media only screen and (min-width: 1024px) { :root { --font-size--xxsmall: .8125rem; --font-size--xsmall: .875rem; --font-size--small: 1rem; --font-size--base: 1.125rem; --font-size--medium: 1.5rem; --font-size--large: 1.75rem; --font-size--xlarge: 2.25rem; --font-size--xxlarge: 3rem; --font-size--xxxlarge: 4rem; --line-height--xxsmall: 1.125rem; --line-height--xsmall: 1.5rem; --line-height--small: 1.375rem; --line-height--base: 1.625rem; --line-height--medium: 2rem; --line-height--large: 2.375rem; --line-height--xlarge: 3.375rem; --line-height--xxlarge: 3.875rem; --line-height--xxxlarge: 4.625rem } } html:lang(zh), html:lang(ko), html:lang(ja), html:lang(tw) { --font-weight--thin: 200; --font-weight--light: 300; --font-weight--regular: 400; --font-weight--medium: 500; --font-weight--demi: 600; --font-weight--bold: 700 } :root { --easeInOutQuart: cubic-bezier(.77, 0, .175, 1); --easeInOutQuad: cubic-bezier(.455, .03, .515, .955); --easeOutQuart: cubic-bezier(.165, .84, .44, 1); --easeInQuart: cubic-bezier(.895, .03, .685, .22); --easeOutCirc: cubic-bezier(.075, .82, .165, 1); --ease: var(--easeInOutQuart) } html { scroll-behavior: smooth } html, body { font-size: var(--font-size--small); background: var(--theme-neutral-light) } body { font-family: var(--font-body); color: var(--theme-text); -webkit-font-kerning: none; font-kerning: none } #onetrust-consent-sdk *, #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy * { font-weight: var(--font-weight--regular) } #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy td { font-size: var(--font-size--base) !important } #epi-quickNavigator { top: auto !important; bottom: 0 !important; border-radius: 4px 4px 0 0 !important } #epi-quickNavigator a { display: flex !important; align-items: center } #epi-quickNavigator-menu { bottom: 100%; margin: 0 } ol, ul { padding: 0 0 0 2.5em } .ordered-list, ol { list-style: decimal } dl, ol, ul { margin: 1.24rem 0 } .unordered-list, ul { list-style-type: disc } .listitem, li { margin-bottom: .4rem } .icon-dnvgl { font-family: dnvgl; font-style: normal } .icon-alert:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-arrow-back:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-arrow-back2:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-arrow-down:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-arrow-right:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-bell:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-binoculars:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-biomass:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-branch:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-briefcase:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-butterfly:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-calender:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-car:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-channels:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-chart:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-checkmark:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-checkbox-unchecked:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-checkbox-checked:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-cocktail:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-coffee:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-compliance:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-contact:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-courses:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-customer-portal:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-cycle:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-default:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-delete:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-diploma:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-dollar:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-download:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-documents:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-expand:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-exploding-danger-hazard:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-facebook:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-factory:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-favourite:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-favourite-add:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-files:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-food-beverage:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-gps:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-globe:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-heart:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-heartbeat:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-helmet:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-helpdesk:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-idea:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-info:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-innovation-research:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-kpi-performance:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-laboratory:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-leaf:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-letter:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-left:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-lifejacket:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-link:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-link-arrow:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-linkedin:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-list:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-lock:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-lunch:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-man:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-meal:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-menu:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-menu2:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-minus:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-mobile:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-money:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-navigate:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-navigation-left:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-navigation-right:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-navigation-down:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-navigation-top:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-new:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-newsletter:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-newslist:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-oilrig:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-oilrig-structure:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-organisation:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-pdf:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-phone:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-pictures:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-pie-chart:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-pin:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-pipelines:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-plane:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-play:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-plus:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-polarbear:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-powerlines:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-pressrelease:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-preview:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-print:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-publications:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-radiobutton-checked:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-radiobutton-unchecked:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-rfq:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-right:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-search:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-service:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-servicefinder:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-settings:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-share:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-ship:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-smartgrid:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-solarpanels:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-speechbubble:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-speechbubbles:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-stamp:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-storage-tanks:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-subscribe:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-target:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-tools:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-tree:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-train:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-transformator:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-truck:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-twitter:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-update-software:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-unlock:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-user:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-utility:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-utility-electrical:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-quote:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-venue:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-view:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-video:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-water-management:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-windmills:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-woman:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-world:before { content: ""; position: relative; top: .125em; margin-right: 6px } .icon-worldmap:before { content: ""; position: relative; top: .125em; margin-right: 6px } .button, .FormSubmitButton.FormSubmitButton { --_color: var(--button-color, var(--theme-primary)); --_color-hover: var(--button-color-hover, var(--theme-neutral-dark)); --_background: var(--button-background, var(--theme-accent)); --_border: var(--button-border, var(--_background, transparent)); --_border-hover: var(--button-border-hover, var(--_background-hover, transparent)); --_icon-size: var(--button-icon-size, 1em); --_padding: var(--button-padding, .75rem 1.5rem); --_gap-size: var(--gap-size, .5rem); display: inline-flex; align-items: center; justify-content: space-between; gap: var(--_gap-size); font-weight: var(--font-weight--medium); color: var(--_color); background-color: var(--_background); border: 1px solid var(--_border); padding: var(--_padding); margin-bottom: .5rem; text-transform: uppercase; transition: background-color .1s ease-in-out } .button:hover, .FormSubmitButton:hover, .button:focus-visible, .FormSubmitButton:focus-visible { color: var(--_color-hover); border-color: var(--_border-hover, color-mix(in srgb, var(--_background) 90%, black)); background-color: var(--_background-hover, color-mix(in srgb, var(--_background) 90%, black)); --_icon-offset: .3125rem } .button:disabled, .FormSubmitButton:disabled { opacity: .7; cursor: not-allowed } .button--as-default-link:after, .button:is(a):not(:has(>.button__icon)):after, .FormSubmitButton:is(a):not(:has(>.button__icon)):after { font-family: var(--font-icons); content: ""; font-size: .75em; transform: translate(var(--_icon-offset)); transition: transform .1s ease-in-out } .button__icon { font-size: var(--_icon-size) } .button--icon-left { flex-direction: row-reverse } .button--primary { --button-background-hover: color-mix(in srgb, var(--_background) 90%, black); --button-border: var(--button-background-hover) } .button--secondary { --button-color: var(--theme-secondary); --button-color-hover: var(--theme-secondary); --button-background: transparent; --button-background-hover: var(--theme-tertiary); --button-border: var(--theme-info); --button-border-hover: var(--theme-info) } .button--secondary--on-dark, .u-bg--dark-blue .button--secondary { --button-background-hover: var(--theme-tertiary); --button-border-hover: var(--theme-info); --button-color: var(--theme-tertiary); --button-color-hover: var(--theme-neutral-light) } .button--tertiary { --button-color: var(--theme-secondary); --button-color-hover: var(--theme-secondary); --button-background: transparent; --button-background-hover: color-mix(in srgb, var(--theme-neutral-light) 90%, black) } .button--tertiary--on-dark, .u-bg--dark-blue .button--tertiary { --button-color: var(--theme-tertiary); --button-color-hover: var(--theme-neutral-light); --button-background-hover: color-mix(in srgb, var(--theme-primary) 90%, black) } .button--inverted, .FormSubmitButton.FormSubmitButton { --button-color: var(--theme-neutral-light); --button-color-hover: var(--theme-neutral-light); --button-background: var(--theme-primary) } .button--inverted--on-dark, .u-bg--dark-blue .button--inverted, .u-bg--dark-blue .FormSubmitButton.FormSubmitButton { --button-color: var(--theme-neutral-light); --button-background: var(--theme-info); --button-background-hover: var(--theme-neutral-light); --button-color-hover: var(--theme-info) } .button--large { --button-padding: 1rem 1.5rem; --round-padding: 1.5rem; --_icon-size: 1.5rem; --gap-size: 1rem; font-size: var(--font-size--medium); line-height: var(--line-height--medium) } .button--small { --button-padding: .5rem 1rem; --round-padding: .5rem; --_icon-size: .75rem; --gap-size: .5rem; font-size: var(--font-size--xxsmall); line-height: var(--line-height--xxsmall) } .button--lowercase { text-transform: none } .button--block { display: flex; width: 100% } .button--round { padding: var(--round-padding, 1rem); border-radius: 50%; justify-content: center } .button--round i { text-align: center; width: var(--_icon-size, 1em); height: var(--_icon-size, 1em) } .button--square { padding: var(--round-padding, 1rem); justify-content: center } .button--square i { text-align: center; width: var(--_icon-size, 1em); height: var(--_icon-size, 1em) } .button--loading:not(:has(>.button__icon)):after { font-family: var(--font-icons); content: ""; animation: fa-spin 2s infinite linear } .button--disabled, .button[disabled], [disabled].FormSubmitButton, .button[aria-disabled=true], [aria-disabled=true].FormSubmitButton { cursor: not-allowed; opacity: .5; pointer-events: none } .button-group { display: flex; flex-wrap: wrap; margin-block: 1rem 1.5rem; gap: .5rem; padding-left: 0 } .button-group li { list-style-type: none } .button-group+.button-group { margin-top: 2rem } .button-group--center { justify-content: center } .button-group--tight { flex-wrap: nowrap; gap: 0 } .button-group--tight .button:not(:last-child), .button-group--tight .FormSubmitButton:not(:last-child) { border-right: 0 } .button-group--service-menu .button, .button-group--service-menu .FormSubmitButton.FormSubmitButton { position: relative; overflow: hidden; --button-background-hover: transparent } .button-group--service-menu .button:after, .button-group--service-menu .FormSubmitButton:after { content: ""; display: block; position: absolute; height: 4px; background-color: var(--color-dark-blue); left: 0; right: 100%; bottom: 0 } .button-group--service-menu .button:hover:after, .button-group--service-menu .FormSubmitButton:hover:after { right: 0; transition: right .3s ease-out } .link { color: var(--theme-link-override, var(--theme-link)); -webkit-text-decoration-color: var(--theme-link-underline-override, var(--theme-link-override, var(--theme-link))); text-decoration-color: var(--theme-link-underline-override, var(--theme-link-override, var(--theme-link))); display: inline-flex; align-items: center; gap: .5rem; transition: all .1s ease-in-out; -webkit-text-decoration-line: underline; text-decoration-line: underline; text-underline-offset: 5px } .link:hover { text-underline-offset: 2px } .link:visited { color: var(--theme-link-override, var(--theme-link)) } .link:hover { color: var(--theme-link-hover-override, var(--theme-link-hover)); -webkit-text-decoration-color: var(--theme-link-override, var(--theme-link)); text-decoration-color: var(--theme-link-override, var(--theme-link)) } .link:active, .link:active span { text-decoration: none } .link--subtle { --theme-link-override: var(--theme-tertiary); text-decoration: none } .link--on-dark { --theme-link-override: var(--theme-accent); --theme-link-hover-override: var(--theme-success-light) } .link--inline { display: inline } .link--chevron { text-decoration: none } .link--chevron span { -webkit-text-decoration-line: underline; text-decoration-line: underline } .link--chevron:after { text-decoration: none; font-family: var(--font-icons); content: ""; display: inline-block; font-size: .75em; transform: translate(var(--icon-offset, 0)); transition: transform .3s ease-in-out } .link--chevron:hover { --icon-offset: 5px } .link--chevron-left { flex-direction: row-reverse } .link--chevron-left span { text-decoration: none } .link--chevron-left:hover { color: var(--theme-accent); --icon-offset: 0 } .link--chevron-double:after { font-family: var(--font-icons); content: "" } ::selection { color: var(--theme-neutral-light); background-color: var(--deprecated-color-blue) } h1:empty, h2:empty, h3:empty, h4:empty, h5:empty, h6:empty { display: none } h1, .h1 { font-size: var(--font-size--xlarge); line-height: var(--line-height--xlarge); color: var(--theme-heading-override, var(--theme-text-override, var(--theme-primary))); font-weight: var(--font-weight--medium); margin-block: 1rem } .layout--large h1, .layout--medium h1, .layout--large .h1, .layout--medium .h1 { font-size: var(--font-size--xxlarge); line-height: var(--line-height--xxlarge) } .layout--large h1, .layout--large .h1 { font-family: var(--font-decorative); -webkit-font-kerning: auto; font-kerning: auto } h2, .h2 { font-size: var(--font-size--xlarge); line-height: var(--line-height--xlarge); color: var(--theme-heading-override, var(--theme-text-override, var(--theme-primary))); font-weight: var(--font-weight--medium) } h3, .h3 { font-size: var(--font-size--medium); line-height: var(--line-height--medium); color: var(--theme-heading-override, var(--theme-text-override, var(--theme-border-dark))); font-weight: var(--font-weight--demi); -webkit-margin-after: 1rem; margin-block-end: 1rem } h4, .h4 { font-size: var(--font-size--base); line-height: var(--line-height--base); color: var(--theme-heading-override, var(--theme-text-override, var(--theme-primary))); font-weight: var(--font-weight--demi) } h5, .h5, h6, .h6 { font-size: var(--font-size--base); line-height: var(--line-height--base); color: var(--theme-heading-override, var(--theme-text-override, var(--theme-text))); text-transform: uppercase } p { font-size: var(--font-size--base); line-height: var(--line-height--base); --space: 1rem; color: var(--theme-text-override, var(--theme-text)); font-weight: var(--font-weight--regular); /* max-width: 72ch */ } .layout__aside p { font-size: var(--font-size--small); line-height: var(--line-height--small) } ul, ol { font-weight: var(--font-weight--regular) } ul:not([class]), ol:not([class]) { font-size: var(--font-size--base); line-height: var(--line-height--base); color: var(--theme-text-override, var(--theme-text)) } ul:not([class]) { padding-left: 0; list-style-type: none } ul:not([class]) li { position: relative; padding-left: 1.5rem } ul:not([class]) li:before { content: "—"; position: absolute; left: 0 } hr { margin: 2.5rem auto; border: 0; border-top: 1px solid var(--theme-border-dark) } strong { font-weight: var(--font-weight--demi) } img[style*="float: left"] { margin-right: 1rem } img[style*="float: right"] { margin-left: 1rem } blockquote { font-size: var(--font-size--medium); line-height: var(--line-height--medium); background-color: var(--theme-neutral-light); margin: 2rem 0; padding: 1rem } .decorative { font-size: var(--font-size--xxxlarge); line-height: var(--line-height--xxxlarge); color: var(--theme-text-override, var(--theme-text)); font-family: var(--font-decorative); font-weight: var(--font-weight--regular); -webkit-font-kerning: auto; font-kerning: auto } .intro { display: block; font-size: var(--font-size--medium); line-height: var(--line-height--medium); color: var(--theme-text-override, var(--theme-secondary)); margin-block: .5rem 1.5rem } p a:not([class]), li:not([class]) a:not([class]) { color: var(--theme-link-override, var(--theme-link)); -webkit-text-decoration-color: var(--theme-link-underline-override, var(--theme-link-override, var(--theme-link))); text-decoration-color: var(--theme-link-underline-override, var(--theme-link-override, var(--theme-link))); transition: all .1s ease-in-out; -webkit-text-decoration-line: underline; text-decoration-line: underline; text-underline-offset: 5px } p a:not([class]):hover, li:not([class]) a:not([class]):hover { text-underline-offset: 2px } p a:not([class]):visited, li:not([class]) a:not([class]):visited { color: var(--theme-link-override, var(--theme-link)) } p a:not([class]):hover, li:not([class]) a:not([class]):hover { color: var(--theme-link-hover-override, var(--theme-link-hover)); -webkit-text-decoration-color: var(--theme-link-override, var(--theme-link)); text-decoration-color: var(--theme-link-override, var(--theme-link)) } p a:not([class]):active, li:not([class]) a:not([class]):active { text-decoration: none } p a:not([class]):active span, li:not([class]) a:not([class]):active span { text-decoration: none } .image { display: inline-grid; width: auto; text-align: center; margin-bottom: 1rem; max-width: 100% } @media only screen and (min-width: 768px) { .image { display: grid; max-width: 250px; margin-bottom: 1.75rem } } .image.full-width-image { width: 100%; max-width: 100% } @media only screen and (min-width: 768px) { .image:has(.align-left) { float: left; margin-right: 1.75rem } } .image:has(.align-left) img { margin: 0; width: 100% } .image:has(.align-center) { max-width: 100%; justify-content: center } @media only screen and (min-width: 768px) { .image:has(.align-right) { float: right; margin-left: 1.75rem } } .image:has(.align-right) img { margin: 0; width: 100% } .image.align-left { max-width: 100%; margin: 0 } @media only screen and (min-width: 768px) { .image.align-left { margin: 0; max-width: 250px; float: left; margin-right: 1.75rem } } .image.align-center { max-width: 250px; margin: auto; max-width: 100%; max-height: -webkit-fit-content; max-height: fit-content } .image.align-right { max-width: 100%; margin: 0 } @media only screen and (min-width: 768px) { .image.align-right { margin: 0; max-width: 250px; float: right; margin-left: 1.75rem } } .image figcaption { font-size: var(--font-size--xsmall); line-height: var(--line-height--xsmall); border-bottom-width: 1px; border-style: solid; border-color: var(--deprecated-color-border-gray); padding-top: .75rem; padding-bottom: 10px; color: var(--deprecated-color-gray-dark-50); font-weight: var(--font-weight--medium) } .storybook { --_guide-background: var(--theme-error); --_guide-text: hsl(33, 100%, 24%); container-type: inline-size } .storybook .space-item { background-color: var(--_guide-background); height: var(--current-size); width: var(--current-size) } .storybook .space { display: flex; align-items: center; gap: var(--current-size); padding: 1rem; font-size: .75rem; min-height: 3rem; border-bottom: 1px solid var(--theme-tertiary) } .storybook .spaces { margin-bottom: 4rem } .storybook .listgrid { --space-h: 2rem } @media only screen and (min-width: 768px) { .show-space .storybook .listgrid__item:not(:first-child) { position: relative } .show-space .storybook .listgrid__item:not(:first-child):before { display: flex; align-items: center; justify-content: center; position: absolute; color: var(--_guide-text); font-size: var(--font-size--xxsmall); line-height: var(--line-height--xxsmall); text-align: center; font-weight: var(--font-weight--regular); background: var(--_guide-background); right: 100%; top: 0; width: var(--space-h); height: 100%; content: "32" } } .storybook .space-example { border: 1px solid var(--theme-border-light); position: relative; --_spaceY: 1.5rem; --_spaceX: 1rem } .storybook .space-example:before { content: "24"; display: none } .storybook .space-example:after { content: "16"; display: none } @container item (width > 300px) { .storybook .space-example { --_spaceY: 2.5rem; --_spaceX: 1.5rem } .storybook .space-example:before { content: "40" } .storybook .space-example:after { content: "24" } } @container item (width > 630px) { .storybook .space-example { --_spaceY: 4rem; --_spaceX: 3rem } .storybook .space-example:before { content: "64" } .storybook .space-example:after { content: "48" } } .storybook .space-example h4 { margin-bottom: 1.5rem; --space: 1.5rem } .storybook .space-example h4:before { content: "24"; display: none } .storybook .space-example h4:empty { background: var(--theme-background-light); width: 50%; height: 26px; border-radius: 13px } .storybook .space-example h3 { margin-bottom: 1rem; --space: 1rem } .storybook .space-example h3:before { content: "16"; display: none } .storybook .space-example p { margin-bottom: 2.5rem; --space: 2.5rem } .storybook .space-example p:before { content: "40"; display: none } @container item (width < 300px) { .storybook .space-example p { font-size: var(--font-size--small); line-height: var(--line-height--small) } } .storybook .space-example p:empty { background: var(--theme-background-light); height: 26px; border-radius: 13px } .show-space .storybook .space-example { outline: 1px dotted var(--_guide-text) } .show-space .storybook .space-example:before, .show-space .storybook .space-example:after { display: flex; align-items: center; justify-content: center; position: absolute; color: var(--_guide-text); font-size: var(--font-size--xsmall); line-height: var(--line-height--xsmall); text-align: center; font-weight: var(--font-weight--regular); background: var(--_guide-background) } .show-space .storybook .space-example:before { width: var(--_spaceY); height: var(--_spaceY); top: 0 } .show-space .storybook .space-example:after { width: var(--_spaceX); height: var(--_spaceX); left: 0; top: var(--_spaceY) } .show-space .storybook .space-example>* { outline: 1px dotted var(--_guide-text); position: relative } .show-space .storybook .space-example>*:before { display: flex; align-items: center; justify-content: center; position: absolute; color: var(--_guide-text); font-size: var(--font-size--xsmall); line-height: var(--line-height--xsmall); font-weight: var(--font-weight--regular); background: var(--_guide-background); width: var(--space); height: var(--space); text-align: center; top: 100% } .storybook .space-example .button-container { display: flex; flex-wrap: wrap; gap: .5rem } .storybook .colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; font-size: .8rem; list-style-type: none; padding: 0 } .storybook .colors li { display: flex; flex-direction: column; align-items: center; border: 1px solid rgba(0, 0, 0, .1); padding: .25rem; border-radius: .25rem; box-shadow: 0 5px 10px -5px #0000001a } .storybook .colors div { width: 100%; height: 100px; border: 1px solid transparent; border-radius: .125rem } .storybook .colors span { padding: .5rem } .storybook.links>div { padding: 1rem; margin-block: 1rem } .storybook.links>div p { max-width: 300px; margin-block: 1rem } .storybook-footer { list-style-type: none; padding-left: 0 } .storybook-footer li { padding: 0 .5rem; margin-bottom: 0 } .storybook.bps .bp { border: 1px solid var(--theme-border-light); border-style: var(--_border-style, dashed); margin-bottom: .5rem; --space: .5rem; padding: 1.5rem 1rem; text-transform: lowercase; width: 100%; margin-inline: auto; display: flex; justify-content: space-between; font-weight: var(--font-weight--demi); container-type: inline-size; max-width: var(--_width); background-color: var(--_bg-color, transparent) } .storybook.bps .bp-2xs { --_width: 375px } @container (width > 376px) { .storybook.bps .bp-2xs { --_bg-color: var(--theme-background-light); --_border-style: solid } } .storybook.bps .bp-xs { --_width: 414px } @container (width > 414px) { .storybook.bps .bp-xs { --_bg-color: var(--theme-background-light); --_border-style: solid } } .storybook.bps .bp-sm { --_width: 480px } @container (width > 480px) { .storybook.bps .bp-sm { --_bg-color: var(--theme-background-light); --_border-style: solid } } .storybook.bps .bp-md { --_width: 768px } @container (width > 768px) { .storybook.bps .bp-md { --_bg-color: var(--theme-background-light); --_border-style: solid } } .storybook.bps .bp-lg { --_width: 1024px } @container (width > 1024px) { .storybook.bps .bp-lg { --_bg-color: var(--theme-background-light); --_border-style: solid } } .storybook.bps .bp-xl { --_width: 1288px } @container (width > 1288px) { .storybook.bps .bp-xl { --_bg-color: var(--theme-background-light); --_border-style: solid } } .storybook.bps .bp-2xl { --_width: 1440px } @container (width > 1440px) { .storybook.bps .bp-2xl { --_bg-color: var(--theme-background-light); --_border-style: solid } } .storybook.bps .bp-3xl { --_width: 1920px } @container (width > 1920px) { .storybook.bps .bp-3xl { --_bg-color: var(--theme-background-light); --_border-style: solid } } .storybook code, .storybook pre { display: block; background-color: var(--theme-background-light); font-size: var(--font-size--xsmall); line-height: var(--line-height--xsmall); padding: 1.5rem 1rem; margin-bottom: 1rem; --space: 1rem } .storybook-icons { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) } .storybook-icon { display: flex; flex-direction: column; gap: .5rem; align-items: center; justify-content: space-between; border: 1px solid rgba(0, 0, 0, .1); padding: .25rem; border-radius: .25rem; box-shadow: 0 5px 10px -5px #0000001a; font-size: var(--font-size--xsmall); line-height: var(--line-height--xsmall) } .storybook-icon .fal, .storybook-icon .fab { font-size: var(--font-size--xlarge); line-height: var(--line-height--xlarge); padding: .5rem; display: block; text-align: center; width: 100%; background: var(--theme-background-light) } .storybook .colhead { border-bottom: 3px solid var(--theme-accent); text-align: center; padding: .5rem; background-color: var(--theme-primary); color: var(--theme-neutral-light); --_helperColor: var(--theme-accent) } .storybook .colhead-bleed, .storybook .colhead-breakout { background: var(--theme-background-light); color: var(--theme-text); --_helperColor: var(--theme-background-light) } .storybook .colhead-stick { position: -webkit-sticky; position: sticky; top: 0 } @media screen and (max-width: 1023px) { .storybook .colhead-stick { display: none } } .storybook .colhead-page { border-width: 0 1px; border-style: solid; border-color: var(--theme-accent) } @media only screen and (min-width: 1024px) { .storybook .colhead-page { grid-column: page } } @media screen and (max-width: 1023px) { .storybook .colhead-page { display: none } } .storybook.show-grid .colhead { position: relative } .storybook.show-grid .colhead:before { content: ""; background-color: color-mix(in srgb, var(--_helperColor) 10%, white); border-color: var(--_helperColor); border-width: 0 1px; border-style: solid; width: 100%; height: 100vh; position: absolute; left: 0; top: 100%; z-index: -1 } .storybook.show-grid .skeleton { background: #0000001a; color: transparent; border-radius: .5rem } .storybook.show-grid .skeleton:is(div) { min-height: 4rem } .storybook.show-grid .skeleton:is(p, span) { min-height: 2rem } .storybook .skeleton--image { background: #0000001a; color: transparent; border-radius: .5rem; aspect-ratio: 16/5 } .storybook .skeleton--image-teaser { aspect-ratio: 16/9 } @media only screen and (min-width: 1024px) { .storybook.listgrid { grid-column: page } } .teaser-suggestion { position: relative; height: 100%; container-type: inline-size; --theme-heading-override: var(--theme-secondary) } .teaser-suggestion__content { padding: 1rem 1.5rem; container-type: inline-size } @container item (width < 300px) { .teaser-suggestion p { font-size: var(--font-size--small); line-height: var(--line-height--small) } } @container (width > 600px) { .teaser-suggestion .teaser-suggestion__picture { height: 100% } .teaser-suggestion .teaser-suggestion__img { height: 100%; object-fit: cover } } @container (width > 600px) { .teaser-suggestion { display: grid; grid-template-columns: 1fr 2fr } } .teaser-suggestion__tag { color: var(--theme-text-override); font-weight: var(--font-weight--medium) } .teaser-suggestion__footer { position: relative } .teaser-suggestion__footer p { font-size: var(--font-size--xsmall); line-height: var(--line-height--xsmall) } .teaser-suggestion__link:before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .fa, .fal, .fas, .far, .fab { font-family: var(--font-icons); font-weight: var(--fa-style, 300) } .fa, .fa-classic, .fa-sharp, .fas, .fa-solid, .far, .fal, .fa-light, .fab, .fa-brands { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: var(--fa-display, inline-block); font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto } .fab, .fa-brands { font-family: var(--font-brands) } .fa-add:before { content: "" } .fa-align-left:before { content: "" } .fa-angle-double-right:before { content: "" } .fa-angle-right:before { content: "" } .fa-angles-right:before { content: "" } .fa-arrow-down:before { content: "" } .fa-arrow-left:before { content: "" } .fa-arrow-right:before { content: "" } .fa-arrow-up:before { content: "" } .fa-arrow-up-right-from-square:before { content: "" } .fa-arrow-alt-right:before { content: "" } .fa-arrow-down-to-line:before { content: "" } .fa-arrow-right-to-bracket:before { content: "" } .fa-arrow-to-bottom:before { content: "" } .fa-arrows-maximize:before { content: "" } .fa-book:before { content: "" } .fa-calendar:before { content: "" } .fa-calendar-alt:before { content: "" } .fa-calendar-days:before { content: "" } .fa-caret-right:before { content: "" } .fa-check-square:before { content: "" } .fa-chevron-circle-down:before { content: "" } .fa-chevron-circle-left:before { content: "" } .fa-chevron-circle-right:before { content: "" } .fa-chevron-circle-up:before { content: "" } .fa-chevron-double-right:before { content: "" } .fa-chevron-down:before { content: "" } .fa-chevron-left:before { content: "" } .fa-chevron-right:before { content: "" } .fa-chevron-up:before { content: "" } .fa-chevrons-right:before { content: "" } .fa-circle:before { content: "" } .fa-circle-check:before { content: "" } .fa-circle-chevron-down:before { content: "" } .fa-circle-chevron-left:before { content: "" } .fa-circle-chevron-right:before { content: "" } .fa-circle-chevron-up:before { content: "" } .fa-circle-info:before { content: "" } .fa-circle-pause:before { content: "" } .fa-circle-play:before { content: "" } .fa-clock:before { content: "" } .fa-clock-four:before { content: "" } .fa-clone:before { content: "" } .fa-close:before { content: "" } .fa-coffee:before { content: "" } .fa-compress-alt:before { content: "" } .fa-credit-card:before { content: "" } .fa-down-left-and-up-right-to-center:before { content: "" } .fa-envelope:before { content: "" } .fa-expand-arrows:before { content: "" } .fa-external-link-alt:before { content: "" } .fa-eye:before { content: "" } .fa-file:before { content: "" } .fa-fork-knife:before { content: "" } .fa-globe:before { content: "" } .fa-info-circle:before { content: "" } .fa-location-dot:before { content: "" } .fa-magnifying-glass:before { content: "" } .fa-mail-forward:before { content: "" } .fa-map-marker-alt:before { content: "" } .fa-minus-square:before { content: "" } .fa-mug-saucer:before { content: "" } .fa-multiply:before { content: "" } .fa-newspaper:before { content: "" } .fa-pause-circle:before { content: "" } .fa-phone-alt:before { content: "" } .fa-phone-flip:before { content: "" } .fa-play:before { content: "" } .fa-play-circle:before { content: "" } .fa-plus:before { content: "" } .fa-print:before { content: "" } .fa-quote-right:before { content: "" } .fa-quote-right-alt:before { content: "" } .fa-remove:before { content: "" } .fa-right:before { content: "" } .fa-rotate-right:before { content: "" } .fa-search:before { content: "" } .fa-share:before { content: "" } .fa-sign-in:before { content: "" } .fa-spinner:before { content: "" } .fa-square:before { content: "" } .fa-square-check:before { content: "" } .fa-square-minus:before { content: "" } .fa-star:before { content: "" } .fa-times:before { content: "" } .fa-up-right-from-square:before { content: "" } .fa-user:before { content: "" } .fa-utensils-alt:before { content: "" } .fa-xmark:before { content: "" } .fa-facebook-f:before { content: "" } .fa-linkedin-in:before { content: "" } .fa-twitter:before { content: "" } .fa-weibo:before { content: "" } .fa-weixin:before { content: "" } .fa-square-x-twitter:before { content: "" } .fa-x-twitter:before { content: "" } .fa-spin { animation-name: fa-spin; animation-delay: var(--fa-animation-delay, 0s); animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 2s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, linear) } .fa-spin-reverse { --fa-animation-direction: reverse } .fa-pulse, .fa-spin-pulse { animation-name: fa-spin; animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 1s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, steps(8)) } @media (prefers-reduced-motion: reduce) { .fa-beat, .fa-bounce, .fa-fade, .fa-beat-fade, .fa-flip, .fa-pulse, .fa-shake, .fa-spin, .fa-spin-pulse { animation-delay: -1ms; animation-duration: 1ms; animation-iteration-count: 1; transition-delay: 0s; transition-duration: 0s } } @keyframes fa-spin { 0% { transform: rotate(0) } to { transform: rotate(360deg) } } @keyframes rotate { to { transform: rotate(1turn) } } .video-button { position: relative; --_btn-bg: rgba(0, 0, 0, .5) } .video-button:hover { --_btn-bg: var(--theme-primary) } .video-button:after { content: ""; font-family: var(--font-icons); content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--_btn-bg); border-radius: 50%; width: 3.75rem; height: 3.75rem; display: flex; justify-content: center; align-items: center; color: var(--theme-neutral-light); font-size: var(--font-size--large); line-height: var(--line-height--large); transition: background-color .2s ease-in-out } } @layer layouts { body { overflow-x: hidden } .container { width: 100%; margin-inline: auto; padding-inline: 1rem; overflow: hidden; max-width: 1288px } @media only screen and (min-width: 768px) { .container { overflow: visible } } @media (min-width: 414px) { .container .container { padding-right: 2rem; padding-left: 2rem } } @media (min-width: 768px) { .container { padding-right: 3.875rem; padding-left: 3.875rem } } @media (min-width: 1024px) { .container { padding-right: 3.25rem; padding-left: 3.25rem } } @media (min-width: 1440px) { .container { padding-right: 0; padding-left: 0 } } .main-content { background-color: var(--theme-neutral-light); position: relative } .layout { --gapSize: 1rem; --layout-max-width: calc(1288px + (var(--gapSize) * 5)); grid-auto-flow: dense; gap: 1rem var(--gapSize); padding-inline: 1rem } @media only screen and (min-width: 1024px) { .layout { display: grid; padding-inline: 0; grid-template-columns: [bleed-start] max((100dvw - var(--layout-max-width)) / 3, 1rem) [breakout-start] max((100dvw - var(--layout-max-width)) / 6, 0px) [page-start main-start form-start] repeat(8, 1fr) [main-end] 1fr [aside-start] repeat(3, 1fr) [aside-end page-end form-end] max((100dvw - var(--layout-max-width)) / 6, 0px) [breakout-end] max((100dvw - var(--layout-max-width)) / 3, 1rem) [bleed-end] } } @media only screen and (min-width: 1288px) { .layout { padding-inline: 0; grid-template-columns: [bleed-start] max((100dvw - var(--layout-max-width)) / 3, 1rem) [breakout-start] max((100dvw - var(--layout-max-width)) / 6, 0px) [page-start] 1fr [main-start form-start] repeat(7, 1fr) [main-end] 1fr [aside-start] repeat(3, 1fr) [aside-end page-end form-end] max((100dvw - var(--layout-max-width)) / 6, 0px) [breakout-end] max((100dvw - var(--layout-max-width)) / 3, 1rem) [bleed-end] } } @media only screen and (min-width: 1024px) { .layout--reverse-columns { grid-template-columns: [bleed-start] max((100vw - var(--layout-max-width)) / 3, 1rem) [breakout-start] max((100vw - var(--layout-max-width)) / 6, 0px) [aside-start page-start form-start] repeat(3, 1fr) [aside-end] 1fr [main-start] repeat(8, 1fr) [main-end page-end form-end] max((100vw - var(--layout-max-width)) / 6, 0px) [breakout-end] max((100vw - var(--layout-max-width)) / 3, 1rem) [bleed-end] } } @media screen and (max-width: 1023px) { .layout--reverse-order-on-mobile { gap: 0 } } .layout--wide-page { --layout-max-width: calc(1440px + 6rem) } .layout--no-padding { padding-inline: 0 } @media only screen and (min-width: 1024px) { .layout--center-page { padding-inline: 0; grid-template-columns: [bleed-start] max((100vw - var(--layout-max-width)) / 3, 0px) [breakout-start] max((100vw - var(--layout-max-width)) / 6, 0px) [page-start main-start form-start] repeat(12, 1fr) [main-end page-end form-end] max((100vw - var(--layout-max-width)) / 6, 0px) [breakout-end] max((100vw - var(--layout-max-width)) / 3, 0px) [bleed-end] } } .layout__aside, .layout__main { container-type: inline-size } @media only screen and (min-width: 1024px) { .layout__header { grid-column: main } } @media only screen and (min-width: 1024px) { .layout--medium .layout__header { grid-column: bleed; display: grid; grid-template-columns: subgrid; grid-row: span 3 } } .layout--large .layout__header { display: grid; grid-template-columns: subgrid; grid-template-rows: repeat(4, auto) } @media only screen and (min-width: 1024px) { .layout--large .layout__header { grid-column: bleed } } @media screen and (max-width: 1023px) { .layout--large .layout__header { display: grid; grid-template-columns: 2rem 1fr 2rem; margin-inline: -1rem } } @media only screen and (min-width: 1024px) { .layout__header--page { grid-column: page } } @media only screen and (min-width: 1024px) { .layout__header-content { grid-column: main } } @media only screen and (min-width: 1024px) { .layout--medium .layout__header-content { grid-column: main; margin-block: 1rem } } .layout--large .layout__header-content { z-index: 1; grid-row: 2/4 } @media only screen and (min-width: 1024px) { .layout--large .layout__header-content { grid-column: main } } @media screen and (max-width: 1023px) { .layout--large .layout__header-content { grid-row: 2; grid-column: 2/-2; z-index: 1 } } .layout--large .layout__breadcrumbs+.layout__header-content { grid-row: 2/5 } @media only screen and (min-width: 1024px) { .layout__aside { grid-column: aside; grid-row: span 3; -webkit-padding-before: 1rem; padding-block-start: 1rem } } @media screen and (max-width: 1023px) { .layout--reverse-order-on-mobile .layout__aside { grid-row: 2 } } @media only screen and (min-width: 1024px) { .layout--reverse-order-on-mobile .layout__aside { grid-row: span 3 } } @media screen and (max-width: 1023px) { .layout--reverse-order-on-mobile:not(:has(>.layout__header)) .layout__aside { grid-row: 1 } } @media only screen and (min-width: 1024px) { .layout--reverse-columns .layout__aside { grid-row: initial } } @media only screen and (min-width: 1024px) { .layout__breadcrumbs { grid-column: main-start/page-end } } .layout--large .layout__breadcrumbs { grid-row: 1; z-index: 1 } @media screen and (max-width: 1023px) { .layout--large .layout__breadcrumbs { grid-row: 1; grid-column: 2/-2; z-index: 1 } } .layout--large .layout__breadcrumbs .layout__header-content { grid-row: 2/5 } @media only screen and (min-width: 1024px) { .layout__main { grid-column: main; -webkit-padding-before: 1rem; padding-block-start: 1rem } } @media only screen and (min-width: 1024px) { .layout__page { grid-column: page } } .layout__form { container-type: inline-size } @media only screen and (min-width: 1024px) { .layout__form { grid-column: form } } @media only screen and (min-width: 1024px) { .layout__breakout { grid-column: breakout } } @media only screen and (min-width: 1024px) { .layout__bleed { grid-column: bleed } } @media only screen and (min-width: 1024px) { .layout__blocks { grid-column: bleed; display: grid; grid-template-columns: subgrid } .layout__blocks>* { grid-column: bleed } } .layout__media { position: relative } .layout__media:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(var(--theme-primary), black); opacity: var(--image-opacity, 0); mix-blend-mode: multiply; pointer-events: none } @media only screen and (min-width: 1024px) { .layout--medium .layout__media { grid-column: breakout; grid-row: 3 } } .layout--large .layout__media { grid-column: bleed; grid-row: 1/-1 } @media screen and (max-width: 1023px) { .layout--large .layout__media { grid-column: 1/-1 } } .layout__media:has(.hero-carousel) { grid-column: bleed } @media screen and (max-width: 1023px) { .layout--large .layout__video { height: 100% } } .layout-wrapper { padding-bottom: 3rem } .layout .media-as-background { width: 100%; height: 100%; max-height: 37.5rem; background-size: cover; background-position: center } @media only screen and (min-width: 768px) { .layout .media-as-background { aspect-ratio: 16/9 } } :root { --listgrid-gap: 1rem } .listgrid { display: grid; column-gap: var(--listgrid-gap-column, var(--listgrid-gap)); row-gap: var(--listgrid-gap-row, var(--listgrid-gap)); grid-auto-flow: dense; grid-template-columns: repeat(var(--column-count, 1), 1fr); padding: 0; list-style: none; -webkit-padding-after: var(--listgrid-gap); padding-block-end: var(--listgrid-gap); overflow: hidden } .listgrid:has(.teaser) { --listgrid-gap-column: 3rem; --listgrid-gap-row: 3rem } .listgrid:has(.content-tile) { --listgrid-gap-column: 3rem; --listgrid-gap-row: 0 } @media only screen and (min-width: 768px) { .listgrid { --column-count: 2 } } @media only screen and (min-width: 1024px) { .listgrid { --column-count: 4 } .listgrid--auto:has(.listgrid__item:nth-child(4n):last-child) { --column-count: 4 } .listgrid--auto:has(.listgrid__item:nth-child(3n):last-child) { --column-count: 3 } .listgrid--auto:has(.listgrid__item:nth-child(2):last-child) { --column-count: 2 } .listgrid--auto:has(.listgrid__item:only-child) { --column-count: 1 } .listgrid--auto:has(.listgrid__item:nth-child(5n):last-child) { --column-count: 6 } .listgrid--auto:has(.listgrid__item:nth-child(5n):last-child) .listgrid__item { grid-column: span 2 } .listgrid--auto:has(.listgrid__item:nth-child(5n):last-child) .listgrid__item:nth-child(5n-4), .listgrid--auto:has(.listgrid__item:nth-child(5n):last-child) .listgrid__item:nth-child(5n-3) { grid-column: span 3 } .listgrid--auto:has(.listgrid__item:nth-child(8):last-child) { --column-count: 6 } .listgrid--auto:has(.listgrid__item:nth-child(8):last-child) .listgrid__item { grid-column: span 2 } .listgrid--auto:has(.listgrid__item:nth-child(8):last-child) .listgrid__item:nth-child(8n-7), .listgrid--auto:has(.listgrid__item:nth-child(8):last-child) .listgrid__item:nth-child(8n-6) { grid-column: span 3 } .listgrid--auto:has(.listgrid__item:nth-child(7):last-child) { --column-count: 6 } .listgrid--auto:has(.listgrid__item:nth-child(7):last-child) .listgrid__item { grid-column: span 2 } .listgrid--auto:has(.listgrid__item:nth-child(7):last-child) .listgrid__item:nth-child(7n-6), .listgrid--auto:has(.listgrid__item:nth-child(7):last-child) .listgrid__item:nth-child(7n-5) { grid-column: span 3 } .listgrid--one { --column-count: 1 } .listgrid--two, .listgrid--large { --column-count: 2 } .listgrid--three, .listgrid--medium { --column-count: 3 } .listgrid--four, .listgrid--small { --column-count: 4 } } .listgrid--teasers { --column-count: 1; margin-bottom: 3rem } @media only screen and (min-width: 768px) { .listgrid--teasers { --column-count: 2 } } @media only screen and (min-width: 1024px) { .listgrid--teasers { --column-count: 3 } } @media only screen and (min-width: 1440px) { .listgrid--teasers { --column-count: 4 } } .listgrid--separators { --listgrid-gap: 3rem } .listgrid--separators .listgrid__item:not(:last-of-type):after { content: ""; position: absolute; top: 0; bottom: 0; border-right: 1px solid var(--theme-background-light); right: calc(var(--listgrid-gap-column, var(--listgrid-gap)) / -2); display: none } @media only screen and (min-width: 768px) { .listgrid--separators .listgrid__item:not(:last-of-type):after { display: block } } @media only screen and (min-width: 768px) { .listgrid--separators .listgrid__item:nth-child(2n):after { content: none } } @media only screen and (min-width: 1024px) { .listgrid--separators .listgrid__item:nth-child(2n):after { content: "" } .listgrid--separators .listgrid__item:nth-child(3n):after { content: none } } @media only screen and (min-width: 1440px) { .listgrid--separators .listgrid__item:nth-child(3n):after { content: "" } .listgrid--separators .listgrid__item:nth-child(4n):after { content: none } } .listgrid--hug { margin-block: 0 } .listgrid__item { position: relative; container-type: inline-size; container-name: item; margin: 0 } .listgrid__item--highlight { grid-column: span 2 } .publication-details { position: relative } .publication-details .publications-preview__poster:is(img), .publication-details .publications-preview__poster img { width: 90%; height: auto; align-self: flex-start; box-shadow: 0 2px 4px #00000080; margin-bottom: 1rem; border-radius: .125rem; max-width: 20rem } @keyframes rotate { to { transform: rotate(1turn) } } .error-page__heading { font-weight: var(--font-weight--demi); font-size: var(--font-size--xlarge); line-height: var(--line-height--xlarge); margin: 22px 0 20px } .error-page .introduction { color: var(--theme-primary); padding: 0 20px; margin: 0 0 30px; font-size: var(--font-size--base); line-height: var(--line-height--base) } @media only screen and (min-width: 1024px) { .error-page .introduction { max-width: 66%; padding: 0 } } .error-page .introduction a { color: var(--theme-secondary); -webkit-text-decoration-line: underline; text-decoration-line: underline } .error-page .introduction a:hover { margin: 0 0 30px } .error-page__header { display: flex; position: fixed; top: 0; left: 0; padding-left: 1rem; background-color: #fff; justify-content: space-between; width: 100%; border-bottom-width: 1px; border-color: #9ca3af } .error-page__content { overflow: hidden; position: relative; background-color: #fff } @media only screen and (min-width: 1024px) { .error-page__content { overflow: visible } } @media only screen and (min-width: 1024px) { .error-page__container { padding-top: 2.5rem } } } @layer components { .u-pad, .u-pad--sm { padding: 1.5rem 1rem } .u-pad--md { padding: 2.5rem 1.5rem } .u-pad--lg { padding: 4rem 3rem } .u-pad--auto { padding: 1.5rem 1rem } @container (width > 300px) { .u-pad--auto { padding: 2.5rem 1.5rem } } @container (width > 630px) { .u-pad--auto { padding: 4rem 3rem } } .u-pad--block-sm { padding-block: 1.5rem } .u-pad--block-md { padding-block: 2.5rem } .u-pad--block-lg { padding-block: 4rem } .u-pad--inline-sm { padding-inline: 1rem } .u-pad--inline-md { padding-inline: 1.5rem } .u-pad--inline-lg { padding-inline: 3rem } .u-trailer { margin-bottom: 1rem; --space: 1rem } .u-trailer--sm { margin-bottom: .5rem; --space: .5rem } .u-trailer--md { margin-bottom: 2rem; --space: 2rem } .u-trailer--lg { margin-bottom: 3rem; --space: 3rem } .u-leader { margin-top: 1rem } .u-leader--sm { margin-top: .5rem } .u-leader--md { margin-top: 2rem } .u-leader--lg { margin-top: 3rem } .u-bg--dark-blue, .u-bg--primary { background-color: var(--theme-primary); --theme-heading-override: var(--theme-accent); --theme-text-override: white; --theme-link-override: var(--theme-accent); --theme-link-hover-override: var(--theme-success-light) } .u-bg--white, .u-bg--neutral-light { background-color: var(--theme-neutral-light); --theme-heading-override: var(--theme-primary); --theme-text-override: var(--theme-primary); --theme-link-override: var(--theme-link); --theme-link-hover-override: var(--theme-link-hover) } .u-bg--sky-blue, .u-bg--tertiary { background-color: var(--theme-tertiary); --theme-heading-override: var(--theme-primary); --theme-text-override: var(--theme-primary); --theme-link-override: var(--theme-link); --theme-link-hover-override: var(--theme-link-hover) } .u-bg--sandstone, .u-bg--background-light { background-color: var(--theme-background-light); --theme-heading-override: var(--theme-primary); --theme-text-override: var(--theme-primary); --theme-link-override: var(--theme-link); --theme-link-hover-override: var(--theme-link-hover) } .u-bg--earth, .u-bg--background-dark { background-color: var(--theme-background-dark); --theme-heading-override: var(--theme-primary); --theme-text-override: var(--theme-primary); --theme-link-override: var(--theme-link); --theme-link-hover-override: var(--theme-link-hover) } .u-heading-color--dark-blue, .u-heading-color--primary { --theme-heading-override: var(--theme-primary) } .u-heading-color--white, .u-heading-color--neutral-light { --theme-heading-override: var(--theme-neutral-light) } .u-heading-color--sky-blue, .u-heading-color--tertiary { --theme-heading-override: var(--theme-tertiary) } .u-heading-color--cyan, .u-heading-color--info { --theme-heading-override: var(--theme-info) } .u-heading-color--green, .u-heading-color--success-dark { --theme-heading-override: var(--theme-success-dark) } .u-text-color--dark-blue, .u-text-color--primary { --theme-text-override: var(--theme-primary) } .u-text-color--white, .u-text-color--neutral-light { --theme-text-override: var(--theme-neutral-light) } .u-text-color--sky-blue, .u-text-color--tertiary { --theme-text-override: var(--theme-tertiary) } .u-text-color--cyan, .u-text-color--info { --theme-text-override: var(--theme-info) } .u-text-color--green, .u-text-color--success-dark { --theme-text-override: var(--theme-success-dark) } .u-text--uppercase { position: relative; font-size: var(--font-size--xxsmall); line-height: var(--line-height--xxsmall); font-weight: var(--font-weight--demi); color: var(--theme-text-override, var(--theme-primary)); text-transform: uppercase } .u-align--center { text-align: center } .u-align--right { text-align: right } .u-hidden { display: none } .video { width: 100% } .video-wrapper { display: table; position: relative; width: 100% } .video-wrapper .video-control { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; text-align: center; height: 100% } .video-wrapper .video-control .control-icon { position: relative; top: 50%; transform: translateY(-50%) } .video-wrapper .fa-pause-circle { opacity: .05 } .playpause i { color: #000; opacity: .4; text-align: center; font-size: 8.75rem } @media screen and (max-width: 767px) { .playpause i { font-size: 4.375rem } } .banner-block { margin-left: auto; margin-right: auto; margin-bottom: 2rem; width: 100%; max-width: 1288px } .banner-block__media { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; margin-top: 35px } @media only screen and (min-width: 480px) { .banner-block__media { margin-top: 3rem } } .layout .banner-block__media { margin-top: 0; height: 100% } @media only screen and (min-width: 480px) { .layout .banner-block__media { margin-top: 0 } } .banner-block__media button:not([class*=vjs]) { height: 100px; width: 100px; position: absolute; top: 40%; left: 50%; z-index: 10; transform: translate(-50%, -50%) } @media only screen and (min-width: 768px) { .banner-block__media button:not([class*=vjs]) { height: 120px; width: 120px; top: 45% } } .banner-block__media button:not([class*=vjs]):before { font-family: var(--font-icons); content: ""; font-size: 1.5rem; color: var(--theme-primary); border-radius: 50%; background-color: #fffc; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; padding-left: .5rem } @media only screen and (min-width: 768px) { .banner-block__media button:not([class*=vjs]):before { font-size: 3rem } } @media only screen and (min-width: 1920px) { .banner-block__media button:not([class*=vjs]):before { padding-left: 1rem } } .banner-block__media-content, .banner-block img { width: 100%; height: 100%; object-fit: cover } .banner-block figcaption { padding: .75rem 1rem } @media only screen and (min-width: 1288px) { .banner-block figcaption { padding-left: 0; padding-right: 0 } } .layout .banner-block { max-width: 100%; margin-bottom: 0; height: 100% } .layout--large .banner-block { max-width: none } @media only screen and (min-width: 1288px) { .layout--large .banner-block { max-height: 50vh } } table { width: 100%; border-spacing: 0; border-collapse: collapse; margin-top: 1rem; margin-bottom: 1rem } .article table { display: table } .article table td { padding: var(--cell-padding, 8px) } .article table thead { background: var(--deprecated-color-gray-90); color: var(--theme-primary); text-align: left } table tbody { width: 100% } table tbody tr td { color: var(--theme-text); vertical-align: top } table tbody tr td>* { margin-top: 0 } .news-detail__body table, .layout__main table { border: 1px solid var(--theme-border-light); max-width: 100%; overflow: scroll; display: block } @media only screen and (min-width: 768px) { .news-detail__body table, .layout__main table { display: table } } .news-detail__body table tbody tr, .layout__main table tbody tr { border-bottom: 1px solid var(--theme-border-light) } .code-component iframe { margin-left: 0 !important; width: 100%; padding-top: space(3); padding-bottom: space(3) } .ValidationFail>input, .ValidationFail>textarea, .ValidationFail>select, .validation-error>input, .validation-error>textarea, .validation-error>select { --theme-focus-ring: var(--theme-error); --input-border: var(--theme-focus-ring) } .form { padding: 1.5rem 1rem; background: var(--theme-background-light); border: 1px solid var(--theme-border-light); color: var(--theme-text); position: relative; display: flex; flex-direction: column } @container (width > 300px) { .form { padding: 2.5rem 1.5rem } } @container (width > 630px) { .form { padding: 4rem 3rem } } .form-block--sm .form { padding: 1.5rem 1rem } .form--title-inside { padding-top: 1.5rem } .form__caption { padding-top: .5rem; width: 100% } .form__sub-title { font-size: var(--font-size--large); line-height: var(--line-height--large); border-top: 6px solid var(--theme-border-light); margin-top: 1.5rem; margin-bottom: 2rem; padding-top: 2rem; width: 100%; color: var(--theme-success); font-weight: var(--font-weight--medium) } .form__fieldset { display: flex; flex-flow: row wrap; justify-content: space-between } .form__fieldset~.form__fieldset { margin-top: 20px } .form__submit-wrapper { text-align: right } .form__select-field-wrapper { position: relative; width: 100% } .form__select-field-wrapper select { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 60px } .form__select-field-wrapper:after { font-family: var(--font-icons); content: ""; position: absolute; right: 1px; top: 1px; height: 42px; width: 42px; line-height: 42px; text-align: center; color: var(--theme-primary); background: var(--theme-border-light); pointer-events: none } .form__field { width: 100%; display: flex; align-content: flex-start; flex-flow: row wrap; margin-bottom: 1rem } .form__field--right { display: flex; justify-content: flex-end } .form__field--full-width>div:not([class]) { width: 100% !important; max-width: none } @media only screen and (min-width: 768px) { .form__field--full-width>div:not([class]) { max-width: 50% } } @media only screen and (min-width: 768px) { .form__field--third { width: calc(50% - 17px) } } .form__field .validation-error:not(:last-child) .field-validation-error { display: none !important } .form label { margin-bottom: .5rem; --space: .5rem; font-size: var(--font-size--base); line-height: var(--line-height--base); color: var(--theme-primary); font-weight: var(--font-weight--medium) } .form input[type=email], .form input[type=number], .form input[type=text], .form textarea { border: 1px solid var(--input-border, var(--theme-border-light)); background: var(--theme-neutral-light); line-height: 42px; height: 42px; padding: 0 1rem; color: var(--theme-primary); width: 100%; margin: 0; border-radius: 0; transition: border-color .3s ease-in-out } .form input[type=email]:hover, .form input[type=number]:hover, .form input[type=text]:hover, .form textarea:hover { --input-border: var(--theme-primary) } .form input[type=email]:focus, .form input[type=number]:focus, .form input[type=text]:focus, .form textarea:focus { --input-border: var(--theme-focus-ring); outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 0 var(--theme-neutral-light), 0 0 0 1px var(--input-border, var(--theme-tertiary)) } .form input[type=email].valid, .form input[type=number].valid, .form input[type=text].valid, .form textarea.valid { --input-border: var(--theme-success) } .form select { border: 1px solid var(--input-border, var(--theme-border-light)); background: var(--theme-neutral-light); line-height: 44px; height: 44px; padding: 0 1rem; color: var(--theme-primary); width: 100%; margin: 0; border-radius: 0; transition: border-color .3s ease-in-out } .form select:hover { --input-border: var(--theme-primary) } .form select:focus { --input-border: var(--theme-focus-ring); outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 0 var(--theme-neutral-light), 0 0 0 1px var(--input-border, var(--theme-tertiary)) } .form select.valid { --input-border: var(--theme-success) } .form textarea { height: 200px; resize: vertical; display: block } .form p { font-size: var(--font-size--small); line-height: var(--line-height--small); color: var(--theme-text); margin: 0; max-width: none } .form small { font-size: var(--font-size--small); line-height: var(--line-height--small); color: var(--theme-border-dark); margin-left: .5rem } .form input[type=radio], .form input[type=checkbox] { padding: 0; box-sizing: border-box; opacity: 0; position: absolute; height: 0px; width: 0px; cursor: pointer } .form input[type=radio]:focus-visible+label:before, .form input[type=checkbox]:focus-visible+label:before { outline-style: solid; outline-width: 2px; outline-color: var(--theme-secondary) } .form input[type=radio]+label, .form input[type=checkbox]+label { position: relative; width: 100%; border-style: none; padding-left: 2rem; font-weight: var(--font-weight--medium); display: inline-block; cursor: pointer } .form input[type=radio]+label:before, .form input[type=checkbox]+label:before { color: var(--theme-primary); font-size: var(--font-size--base); line-height: var(--line-height--base); position: absolute; left: 0; top: -.125rem; display: inline-block } .form input[type=radio]~.form__caption, .form input[type=checkbox]~.form__caption { margin-left: 2.5rem } .form input[type=radio]+label:before { font-family: var(--font-icons); content: "" } .form input[type=radio]:checked+label:before { font-family: var(--font-icons); content: "" } .form input[type=checkbox]+label:before { font-family: var(--font-icons); content: "" } .form input[type=checkbox]:checked+label:before { font-family: var(--font-icons); content: "" } .form--with-errors .field-validation-error { display: none } .form--with-errors .validation-error .field-validation-error { display: block; width: 100%; color: var(--theme-error); padding: .5rem 0 } .form .indetext { overflow: hidden; height: 0; white-space: nowrap; text-indent: 100% } .EPiServerForms:not(:last-child) { margin-bottom: 2.5rem; --space: 2.5rem } .EPiServerForms .FormStep { margin-bottom: 0; width: 100%; justify-content: space-between } .EPiServerForms .FormStep+.EPiServerForms .FormStep { margin-top: 2rem } .Form__Title { font-weight: var(--font-weight--regular) } .Form__Title--content.Form__Title--content.Form__Title--content.Form__Title--content.Form__Title--content { font-size: var(--font-size--xlarge); line-height: var(--line-height--xlarge); margin-bottom: 2rem; --space: 2rem; text-transform: none } .Form__Title--uppercase { text-transform: uppercase } .EPiServerForms>.Form__Title { font-size: var(--font-size--medium); line-height: var(--line-height--medium); margin-bottom: 1rem; --space: 1rem; text-transform: none } .Form__Description--content.Form__Description--content.Form__Description--content { font-size: var(--font-size--base); line-height: var(--line-height--base); margin-bottom: 2.5rem; --space: 2.5rem } .Form__Description+.form__fieldset { margin-top: 0 } .Form__Description+.form__fieldset .form__sub-title { margin-top: 0 } .Form__Element { width: 100%; margin-bottom: 20px; display: flex; align-content: flex-start; flex-flow: row wrap } @media only screen and (min-width: 768px) { .Form__Element { margin-bottom: 2rem; --space: 2rem; width: calc(50% - 17px) } .Form__Element.FormAddressElement, .Form__Element.FormTextbox--Textarea, .Form__Element.FormDateTimeRange, .Form__Element.FormChoice, .Form__Element.FormRecaptcha { width: 100% } } .Form__Element__ValidationError.Form__Element__ValidationError.Form__Element__ValidationError { display: none; width: 100%; color: var(--theme-error); position: relative; padding: .5rem 0 } .ValidationFail .Form__Element__ValidationError.Form__Element__ValidationError.Form__Element__ValidationError { display: block } .Form__Element.ValidationRequired .Form__Element__Caption small, .Form__Element.ValidationRequired .Form__Element__Caption:after { display: none } .FormChoice fieldset { width: 100% } .FormChoice fieldset>div+div { margin-top: 1rem } .FormChoice .Form__Element__Caption { font-weight: var(--font-weight--medium); font-size: var(--font-size--medium); border-top: 6px solid var(--theme-border-light); color: var(--theme-success); padding-top: 42px; margin-top: 20px; margin-bottom: 42px; width: 100% } .FormChoice__Label--disabled-radio.FormChoice__Label--disabled-radio { margin-bottom: .5rem; --space: .5rem; font-size: var(--font-size--base); line-height: var(--line-height--base); color: var(--theme-primary); position: relative; width: 100%; border-style: none; padding-left: 2rem; font-weight: var(--font-weight--medium); opacity: .3 } .FormChoice__Label--disabled-radio.FormChoice__Label--disabled-radio:before { font-family: var(--font-icons); content: "" } .FormChoice__Label--disabled-radio.FormChoice__Label--disabled-radio:before { font-size: var(--font-size--base); line-height: var(--line-height--base); color: var(--theme-primary); position: absolute; left: 0; top: -.125rem; display: inline-block } .FormSubmitButton.FormSubmitButton { margin-left: auto; margin-bottom: 0; width: auto } .FormSelection { display: flex; flex-direction: column } .FormSelection label { order: 1 } .FormSelection .select-input-wrapper { position: relative; width: 100%; order: 2 } .FormSelection .select-input-wrapper select { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 60px } .FormSelection .select-input-wrapper:after { font-family: var(--font-icons); content: ""; position: absolute; right: 1px; top: 1px; height: 42px; width: 42px; line-height: 42px; text-align: center; color: var(--theme-primary); background: var(--theme-border-light); pointer-events: none } .FormSelection .Form__Element__ValidationError { order: 3 } .FormParagraphText { margin-bottom: 2rem; --space: 2rem } .FormParagraphText p { max-width: initial; margin: 0; font-size: var(--font-size--small); line-height: var(--line-height--small) } .FormParagraphText hr { width: 100%; display: block; border-top: 6px solid var(--theme-border-light); margin: 1.5rem 0 2rem } .FormParagraphText div { width: 100% } @media only screen and (min-width: 768px) { .FormParagraphText { width: 100% } } .EPiServerForms .FormChoice .FormChoice__Input:focus+.FormChoice__Label { border: none } @keyframes rotate { to { transform: rotate(1turn) } } .license-agreement { padding: 40px 0 0; max-width: 90%; height: 90%; max-height: 90%; background: transparent; overflow: hidden; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .07)) drop-shadow(0 2px 2px rgba(0, 0, 0, .06)) } .license-agreement[open] { display: flex } .license-agreement::backdrop { background-color: #ffffffe6; opacity: 1 } @media only screen and (min-width: 768px) { .license-agreement { max-width: 80%; height: 80%; max-height: 80% } } @media only screen and (min-width: 1024px) { .license-agreement { height: 950px; max-height: calc(100% - 142px) } } .license-agreement__close { position: absolute; top: 0; right: 0; width: 40px; height: 40px } .license-agreement__content { background: var(--theme-neutral-light); position: relative } .license-agreement__layout { display: grid; grid-template-rows: auto 1fr auto; max-height: 100% } .license-agreement__body { padding: .5rem 1rem; grid-row: 2; overflow: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(#fff 30%, #fff0) center top, linear-gradient(#fff0, #fff 70%) center bottom, radial-gradient(farthest-side at 50% 0, #0003, #0000) center top, radial-gradient(farthest-side at 50% 100%, #0003, #0000) center bottom; background-repeat: no-repeat; background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px; background-attachment: local, local, scroll, scroll } .license-agreement__body h1 { font-size: var(--font-size--xlarge); margin: .62em 0 } .license-agreement__body h2 { font-size: var(--font-size--large); margin: .82667em 0 } .license-agreement__body h3 { font-size: var(--font-size--medium); margin: 1.05983em 0 } .license-agreement__body h4 { font-size: var(--font-size--base); margin: 1.24em 0 } .license-agreement__body h5 { font-size: var(--font-size--small); margin: 1.49398em 0 } .license-agreement__body h6 { font-size: var(--font-size--xsmall); margin: 1.85075em 0 } .license-agreement__body h1, .license-agreement__body h2, .license-agreement__body h3, .license-agreement__body h4, .license-agreement__body h5, .license-agreement__body h6 { font-weight: var(--font-weight--demi) } .license-agreement__body p { margin-bottom: 1.24rem } .license-agreement__header { padding: .5rem 1rem; grid-row: 1 } .license-agreement__footer { grid-row: 3; padding: .5rem 1rem; text-align: center } .license-agreement__title { -webkit-margin-after: 0; margin-block-end: 0 } .license-agreement__label { text-align: left; opacity: .5 } .license-agreement__label.active { opacity: 1 } .license-agreement__toggle.license-agreement__toggle { transition: all .1s ease-in-out; -webkit-text-decoration-line: underline; text-decoration-line: underline; text-underline-offset: 5px; font-size: var(--font-size--small); line-height: var(--line-height--small); -webkit-text-decoration-color: var(--theme-link-underline-override, var(--theme-link-override, var(--theme-link))); text-decoration-color: var(--theme-link-underline-override, var(--theme-link-override, var(--theme-link))); color: var(--theme-link); margin: 0 } .license-agreement__toggle.license-agreement__toggle:hover { text-underline-offset: 2px } .license-agreement__toggle.license-agreement__toggle:hover { color: var(--theme-link-hover) } }