@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
1,653 lines (1,599 loc) • 47.5 kB
CSS
@charset "UTF-8";
/**
* Carnegie UI Theme
*
*/
/*
* CSS Properties Carnegie
*
*/
.eufemia-theme__carnegie,
:root {
--ca-font-family-heading: 'ArizonaFlare', var(--font-family-default);
--ca-color-ocean-green: #00343e;
--ca-color-burgundy-red: #5c0022;
--ca-color-noir-green: #001114;
--ca-color-sea-green: #007272;
--ca-color-noir-red: #24000d;
--ca-color-sober-red: #8e4049;
--ca-color-classic-beige: #f6eae4;
--ca-color-pale-green: #ccf0e7;
--ca-color-pale-red: #ffdedb;
}
/*
* Typography
*
* The font-family properties are defined in the properties.scss file, like:
* --font-family-default:
*
*/
/*
* Typography
*
* The font-family properties are defined in the properties.scss file, like:
* --font-family-default:
*
*/
.dnb-typo-regular {
font-family: var(--font-family-default);
font-weight: normal;
font-style: normal;
}
.dnb-typo-medium {
font-family: var(--font-family-default);
font-weight: var(--font-weight-medium);
font-style: normal;
}
.dnb-typo-bold {
font-family: var(--font-family-default);
font-weight: var(--font-weight-bold);
font-style: normal;
}
.dnb-typo-mono-regular {
font-family: var(--font-family-monospace);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: DNB;
src: url("../../../assets/fonts/dnb/DNB-Regular.woff2") format("woff2"), url("../../../assets/fonts/dnb/DNB-Regular.woff") format("woff"), url("../../../assets/fonts/dnb/DNB-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: DNB;
src: url("../../../assets/fonts/dnb/DNB-Medium.woff2") format("woff2"), url("../../../assets/fonts/dnb/DNB-Medium.woff") format("woff"), url("../../../assets/fonts/dnb/DNB-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: DNB;
src: url("../../../assets/fonts/dnb/DNB-Bold.woff2") format("woff2"), url("../../../assets/fonts/dnb/DNB-Bold.woff") format("woff"), url("../../../assets/fonts/dnb/DNB-Bold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: DNBMono;
src: url("../../../assets/fonts/dnb/DNBMono-Regular.woff2") format("woff2"), url("../../../assets/fonts/dnb/DNBMono-Regular.woff") format("woff"), url("../../../assets/fonts/dnb/DNBMono-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: fallback;
}
.dnb-typo-regular {
font-family: var(--font-family-default);
font-weight: normal;
font-style: normal;
}
.dnb-typo-medium {
font-family: var(--font-family-default);
font-weight: var(--font-weight-medium);
font-style: normal;
}
.dnb-typo-bold {
font-family: var(--font-family-default);
font-weight: var(--font-weight-bold);
font-style: normal;
}
@font-face {
font-family: ArizonaFlare;
src: url("../../../assets/fonts/carnegie/ArizonaFlare-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: ArizonaFlare;
src: url("../../../assets/fonts/carnegie/ArizonaFlare-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: ArizonaFlare;
src: url("../../../assets/fonts/carnegie/ArizonaFlare-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: fallback;
}
/**
* ATTENTION: This file is auto generated by using "themeFactory".
* But you still can change the content of this file on the very top.
*/
/**
* ATTENTION: This file is auto generated by using "styleFactory".
* Do not change the content!
*
*/
/*
* Utilities
*/
/*
* Core Styles
* Mainly only the margins are defined in here
*
*/
/*
* Core Styles
* Mainly only the margins are defined in here
*
*/
.dnb-blockquote {
--blockquote-padding-top: 2rem;
--blockquote-padding-left: 1.5rem;
--blockquote-padding-bottom: 3rem;
--blockquote-quote-size: 3rem;
--blockquote-quote-padding: 6rem;
--blockquote-cite-style: italic;
display: inline-block;
width: auto;
}
.dnb-blockquote:not([class*=space__top]) {
margin-top: 0;
}
.dnb-blockquote:not([class*=space__bottom]) {
margin-bottom: 0;
}
.dnb-blockquote:not([class*=space__left]) {
margin-left: 0;
}
.dnb-blockquote:not([class*=space__right]) {
margin-right: 0;
}
.dnb-blockquote {
padding: 1.5rem;
font-size: var(--font-size-small);
line-height: var(--line-height-small);
border-radius: 1rem;
position: relative;
}
.dnb-blockquote::before {
content: "";
position: absolute;
top: var(--blockquote-padding-top);
left: var(--blockquote-padding-left);
width: var(--blockquote-quote-size);
height: var(--blockquote-quote-size);
background-size: cover;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0ibm9uZSI+ICA8cGF0aCBmaWxsPSIjQTVFMUQyIiBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0zNy41IDI3LjVhOSA5IDAgMSAwIDAtMTggOSA5IDAgMCAwIDAgMTh6Ii8+ICA8cGF0aCBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik00Ni41IDE4LjVhMjEgMjEgMCAwIDEtMjEgMjEiLz4gIDxwYXRoIGZpbGw9IiNBNUUxRDIiIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTEzLjUgMjcuNWE5IDkgMCAxIDAgMC0xOCA5IDkgMCAwIDAgMCAxOHoiLz4gIDxwYXRoIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTIyLjUgMTguNWEyMSAyMSAwIDAgMS0yMSAyMSIvPjwvc3ZnPg==");
}
.dnb-blockquote, .dnb-blockquote.dnb-blockquote--left {
padding-left: var(--blockquote-quote-padding);
padding-top: var(--blockquote-padding-top);
padding-bottom: var(--blockquote-padding-bottom);
}
.dnb-blockquote.dnb-blockquote--top {
padding-left: var(--blockquote-padding-left);
padding-top: var(--blockquote-quote-padding);
padding-bottom: var(--blockquote-padding-bottom);
}
.dnb-blockquote.dnb-blockquote--no-background {
background-color: transparent;
}
.dnb-blockquote .dnb-cite,
.dnb-blockquote .dnb-figcaption,
.dnb-blockquote cite,
.dnb-blockquote footer,
.dnb-blockquote figcaption {
display: block;
margin-top: 1rem;
font-weight: var(--font-weight-medium);
line-height: var(--line-height-basis);
font-style: var(--blockquote-cite-style);
}
.dnb-blockquote .dnb-cite::before,
.dnb-blockquote .dnb-figcaption::before,
.dnb-blockquote cite::before,
.dnb-blockquote footer::before,
.dnb-blockquote figcaption::before {
content: "—";
display: inline-block;
padding-right: 0.5rem;
}
.dnb-spacing .dnb-blockquote h1, .dnb-spacing .dnb-blockquote h2, .dnb-spacing .dnb-blockquote h3, .dnb-spacing .dnb-blockquote .dnb-h--xx-large, .dnb-spacing .dnb-blockquote .dnb-h--large, .dnb-spacing .dnb-blockquote .dnb-h--medium, .dnb-spacing .dnb-blockquote .dnb-lead {
margin: 0;
}
.dnb-blockquote .dnb-anchor {
font-size: inherit;
}
.dnb-blockquote .dnb-code {
color: var(--color-black-80);
}
.dnb-spacing .dnb-blockquote:not([class*=dnb-space__top]) {
margin-top: 0;
}
.dnb-spacing .dnb-blockquote:not([class*=dnb-space__bottom]) {
margin-bottom: 1.5rem;
}
.dnb-spacing .dnb-blockquote p:last-child {
margin-bottom: 0;
}
/*
* Core Styles
* Mainly only the margins are defined in here
*
*/
/*
* Code / Pre
*
*/
/*
* Core Styles
* Mainly only the margins are defined in here
*
*/
/*
* Utilities
*/
.dnb-code {
display: inline-block;
}
del .dnb-code {
-webkit-text-decoration: line-through;
text-decoration: line-through;
}
.dnb-code:not([class*=dnb-space]) {
margin: calc(-0.25em / 0.875) 0;
}
.dnb-code {
padding: calc(0.25em / 0.875);
font-size: 0.875em;
text-decoration: inherit;
line-height: calc(var(--line-height-xx-small--em) / 0.875);
color: inherit;
border-radius: 0.1875em;
}
.dnb-code .dnb-anchor {
font-size: inherit;
}
.dnb-pre {
display: block;
overflow: auto;
}
.dnb-pre:not([class*=space__top]) {
margin-top: 0;
}
.dnb-pre:not([class*=space__bottom]) {
margin-bottom: 0;
}
.dnb-pre:not([class*=space__left]) {
margin-left: 0;
}
.dnb-pre:not([class*=space__right]) {
margin-right: 0;
}
.dnb-pre {
padding: 1rem;
border-radius: 0.5rem;
white-space: pre;
vertical-align: baseline;
outline: none;
text-shadow: none;
-webkit-hyphens: none;
hyphens: none;
word-wrap: normal;
word-break: normal;
text-align: left;
word-spacing: normal;
tab-size: 2;
font-size: inherit;
font-family: var(--font-family-monospace);
}
.dnb-pre pre {
padding: 1rem;
}
.dnb-pre .dnb-spacing pre:not([class*=dnb-space__top]) {
margin-top: 0;
}
.dnb-pre .dnb-spacing pre:not([class*=dnb-space__bottom]) {
margin-bottom: 1.5rem;
}
.dnb-spacing .dnb-pre:not([class*=dnb-space__top]) {
margin-top: 0;
}
.dnb-spacing .dnb-pre:not([class*=dnb-space__bottom]) {
margin-bottom: 1.5rem;
}
.dnb-skeleton > .dnb-code {
background-color: transparent;
}
/*
* Core Styles
* Mainly only the margins are defined in here
*
*/
/*
* Hr tag / line
*
*/
/*
* Core Styles
* Mainly only the margins are defined in here
*
*/
.dnb-hr {
position: relative;
padding: 0;
width: 100%;
height: 0;
display: flow-root;
}
.dnb-hr:not([class*=space__top]) {
margin-top: 0;
}
.dnb-hr:not([class*=space__bottom]) {
margin-bottom: 0;
}
.dnb-hr:not([class*=space__left]) {
margin-left: 0;
}
.dnb-hr:not([class*=space__right]) {
margin-right: 0;
}
.dnb-hr {
border: 0;
}
.dnb-hr::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
height: var(--thickness);
background-color: var(--hr-color, grey);
border-radius: calc(var(--thickness) / 2);
}
.dnb-hr--dashed::after {
background-image: linear-gradient(to right, var(--hr-color, grey) 50%, transparent 0%);
background-size: 0.5rem 0.0625rem;
background-repeat: repeat-x;
background-color: transparent;
}
.dnb-hr--breakout::after {
left: -100vw;
box-shadow: 100vw 0 0 0 var(--hr-color, grey);
border-radius: 0;
}
.dnb-hr {
--thickness: calc(var(--hr-thickness, 0.0625rem) + var(--modifier, 0px));
}
.dnb-hr--light {
--hr-thickness: 0.5px;
}
.dnb-hr--medium {
--hr-thickness: 1.5px;
}
.dnb-spacing .dnb-hr:not([class*=dnb-space__top]) {
margin-top: 0;
}
.dnb-spacing .dnb-hr:not([class*=dnb-space__bottom]) {
margin-bottom: 1.5rem;
}
/*
* Image
*
*/
.dnb-img {
display: inline-flex;
flex-direction: column;
}
.dnb-img:not([class*=space__top]) {
margin-top: 0;
}
.dnb-img:not([class*=space__bottom]) {
margin-bottom: 0;
}
.dnb-img:not([class*=space__left]) {
margin-left: 0;
}
.dnb-img:not([class*=space__right]) {
margin-right: 0;
}
.dnb-img {
padding: 0;
text-align: center;
align-items: center;
}
.dnb-img img,
.dnb-img figcaption {
font-size: var(--font-size-basis);
}
.dnb-img img {
position: relative;
z-index: 2;
box-sizing: content-box;
max-width: 100%;
border-style: none;
border-radius: inherit;
}
.dnb-img img[alt]::after {
content: attr(alt);
position: absolute;
z-index: 3;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: inherit;
}
.dnb-img figcaption {
margin-top: 0.5rem;
}
/*
* Label
*
*/
.dnb-label {
cursor: pointer;
overflow-wrap: break-word;
}
.dnb-label[disabled] {
cursor: not-allowed;
}
/*
* Core Styles
* Mainly only the margins are defined in here
*
*/
/*
* Lists
*
*/
/*
* Core Styles
* Mainly only the margins are defined in here
*
*/
/*
* Lists
*
*/
/*
* Utilities
*/
/*
* Utilities
*/
.dnb-ul:not([class*=space__top]) {
margin-top: 0;
}
.dnb-ul:not([class*=space__bottom]) {
margin-bottom: 0;
}
.dnb-ul:not([class*=space__left]) {
margin-left: 0;
}
.dnb-ul:not([class*=space__right]) {
margin-right: 0;
}
.dnb-ul {
padding: 0;
}
.dnb-ul:not([class*=dnb-space__left]) {
padding-left: 2rem;
}
.dnb-ul {
font-size: var(--font-size-basis);
line-height: var(--line-height-basis);
}
.dnb-ul ul, .dnb-ul ol {
margin-top: 0;
margin-bottom: 1.5rem;
padding-left: 2rem;
}
.dnb-ul li, .dnb-ul--outside li {
position: relative;
}
.dnb-ul li::before, .dnb-ul--outside li::before {
position: absolute;
left: -10rem;
width: 10rem;
padding-right: 0.25rem;
text-align: right;
}
.dnb-ul--inside li::before {
position: relative;
left: 0;
width: auto;
padding-right: 0;
text-align: initial;
}
.dnb-ul .dnb-anchor {
font-size: inherit;
}
.dnb-ul li {
display: list-item;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.dnb-ol:not([class*=space__top]) {
margin-top: 0;
}
.dnb-ol:not([class*=space__bottom]) {
margin-bottom: 0;
}
.dnb-ol:not([class*=space__left]) {
margin-left: 0;
}
.dnb-ol:not([class*=space__right]) {
margin-right: 0;
}
.dnb-ol {
padding: 0;
}
.dnb-ol:not([class*=dnb-space__left]) {
padding-left: 2rem;
}
.dnb-ol {
font-size: var(--font-size-basis);
line-height: var(--line-height-basis);
}
.dnb-ol ul, .dnb-ol ol {
margin-top: 0;
margin-bottom: 1.5rem;
padding-left: 2rem;
}
.dnb-ol li, .dnb-ol--outside li {
position: relative;
}
.dnb-ol li::before, .dnb-ol--outside li::before {
position: absolute;
left: -10rem;
width: 10rem;
padding-right: 0.25rem;
text-align: right;
}
.dnb-ol--inside li::before {
position: relative;
left: 0;
width: auto;
padding-right: 0;
text-align: initial;
}
.dnb-ol .dnb-anchor {
font-size: inherit;
}
.dnb-ol li {
display: list-item;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.dnb-ol ul, .dnb-ol ol {
margin-top: 0;
margin-bottom: 1.5rem;
padding-left: 2rem;
}
.dnb-ol li, .dnb-ol--outside li {
position: relative;
}
.dnb-ol li::before, .dnb-ol--outside li::before {
position: absolute;
left: -10rem;
width: 10rem;
padding-right: 0.25rem;
text-align: right;
}
.dnb-ol--inside li::before {
position: relative;
left: 0;
width: auto;
padding-right: 0;
text-align: initial;
}
.dnb-ol .dnb-anchor {
font-size: inherit;
}
.dnb-ol > li {
list-style-type: decimal;
}
.dnb-ol--nested, .dnb-ol--nested ol {
counter-reset: item;
}
.dnb-ol--nested li {
display: block;
}
.dnb-ol--nested li::before {
content: counters(item, ".") ". ";
counter-increment: item;
}
.dnb-ol--nested li li::before {
content: counters(item, ".") " ";
counter-increment: item;
}
.dnb-ol[type] li {
display: list-item;
list-style-type: inherit;
}
.dnb-ol[type] li::before, .dnb-ol[type] li li::before {
content: none;
}
.dnb-dl {
--column-gap: 1rem;
--row-gap: 0.5rem;
}
.dnb-dl:not([class*=dnb-space__top]) {
margin-top: 0;
}
.dnb-dl:not([class*=dnb-space__bottom]) {
margin-bottom: 0;
}
.dnb-dl {
padding: 0;
font-size: var(--font-size-basis);
line-height: var(--line-height-basis);
}
.dnb-dl dt {
padding: 0;
font-weight: var(--font-weight-medium);
}
.dnb-dl dd ~ dt {
margin-top: var(--row-gap);
}
.dnb-dl dt:not(:first-of-type) {
margin-top: calc(var(--row-gap) + 1rem);
}
.dnb-dl dd {
padding: 0;
margin: 0.5rem 0 1rem;
}
.dnb-dl > dd > dl, .dnb-dl:not([class*=dnb-space]) > dd > dl {
margin-top: calc(var(--row-gap) + 0.5rem);
margin-left: 2rem;
}
@media screen and (min-width: 40.00625em) {
.dnb-dl__layout--horizontal {
--dt-max-width: 40%;
--dd-max-width: calc(60% - 1rem);
display: flex;
flex-wrap: wrap;
max-width: var(--prose-max-width);
width: 100%;
}
.dnb-dl__layout--horizontal dt {
margin-top: 0;
margin-right: calc(var(--column-gap) - 0.5rem);
max-width: var(--dt-max-width);
}
.dnb-dl__layout--horizontal dd {
width: var(--dd-max-width);
align-self: end;
}
.dnb-dl__layout--horizontal dt:not(:first-of-type), .dnb-dl__layout--horizontal dd, .dnb-dl__layout--horizontal dd ~ dt:not(:first-of-type) {
margin-top: var(--row-gap);
margin-bottom: 0;
}
.dnb-dl__layout--horizontal dt:not(:first-of-type):first-of-type, .dnb-dl__layout--horizontal dd:first-of-type, .dnb-dl__layout--horizontal dd ~ dt:not(:first-of-type):first-of-type {
margin-top: 0;
}
.dnb-dl dd.dnb-dl__item {
visibility: hidden;
-webkit-user-select: none;
user-select: none;
flex-basis: 100%;
height: 0;
margin: 0;
}
.dnb-dl:not(.dnb-dl__layout--horizontal) dd.dnb-dl__item {
display: none;
}
.dnb-dl__layout--grid {
--dt-max-width: 15ch;
--dd-max-width: 40ch;
display: grid;
grid-template-columns: -webkit-max-content 1fr;
grid-template-columns: max-content 1fr;
column-gap: var(--column-gap);
row-gap: var(--row-gap);
/* stylelint-disable */
}
.dnb-dl__layout--grid dt {
max-width: var(--dt-max-width);
}
.dnb-dl__layout--grid dt:not(:first-of-type) {
margin-top: 0;
}
.dnb-dl__layout--grid dd {
max-width: var(--dd-max-width);
align-self: end;
}
.dnb-dl__layout--grid dt, .dnb-dl__layout--grid dd, .dnb-dl__layout--grid dd ~ dt {
margin: 0;
}
.dnb-dl__layout--grid {
/* stylelint-enable */
}
}
.dnb-spacing .dnb-ul:not([class*=dnb-space__top]),
.dnb-spacing .dnb-ol:not([class*=dnb-space__top]) {
margin-top: 0;
}
.dnb-spacing .dnb-ul:not([class*=dnb-space__bottom]),
.dnb-spacing .dnb-ol:not([class*=dnb-space__bottom]) {
margin-bottom: 1.5rem;
}
.dnb-spacing .dnb-ul > li,
.dnb-spacing .dnb-ol > li {
margin-top: 1rem;
margin-bottom: 1rem;
/* stylelint-disable-next-line */
}
.dnb-spacing .dnb-ul > li > p,
.dnb-spacing .dnb-ol > li > p {
margin-top: 1rem;
}
.dnb-spacing .dnb-ul li > ul, .dnb-spacing .dnb-ul:not([class*=dnb-space]) li > ul, .dnb-spacing .dnb-ul li > ol, .dnb-spacing .dnb-ul:not([class*=dnb-space]) li > ol,
.dnb-spacing .dnb-ol li > ul,
.dnb-spacing .dnb-ol:not([class*=dnb-space]) li > ul,
.dnb-spacing .dnb-ol li > ol,
.dnb-spacing .dnb-ol:not([class*=dnb-space]) li > ol {
margin-top: -0.5rem;
}
.dnb-spacing .dnb-dl:not([class*=dnb-space__top]) {
margin-top: 0;
}
.dnb-spacing .dnb-dl:not([class*=dnb-space__bottom]) {
margin-bottom: 1.5rem;
}
.dnb-unstyled-list {
list-style-type: none;
}
.dnb-unstyled-list:not([class*=space__top]) {
margin-top: 0;
}
.dnb-unstyled-list:not([class*=space__bottom]) {
margin-bottom: 0;
}
.dnb-unstyled-list:not([class*=space__left]) {
margin-left: 0;
}
.dnb-unstyled-list:not([class*=space__right]) {
margin-right: 0;
}
.dnb-unstyled-list:not([class*=dnb-space__left]) {
padding-left: 0;
}
.dnb-unstyled-list > li {
list-style-type: none;
}
.dnb-unstyled-list > li::before {
content: none;
}
.dnb-unstyled-list > dl,
.dnb-unstyled-list > dd {
margin-left: 0;
}
/*
* Core Styles
* Mainly only the margins are defined in here
*
*/
/*
* Typography
*
*/
/*
* Core Styles
* Mainly only the margins are defined in here
*
*/
.dnb-lead, .dnb-h--xx-large, .dnb-h--x-large, .dnb-h--large, .dnb-h--medium, .dnb-h--basis, .dnb-h--small, .dnb-h--x-small, .dnb-core-style .dnb-lead, .dnb-core-style .dnb-h--xx-large, .dnb-core-style .dnb-h--x-large, .dnb-core-style .dnb-h--large, .dnb-core-style .dnb-h--medium, .dnb-core-style .dnb-h--basis, .dnb-core-style .dnb-h--small, .dnb-core-style .dnb-h--x-small, h1, h2, h3, h4, h5, h6, p, b, small, strong, .dnb-p, .dnb-small, .dnb-table, sub, sup {
--typography-h-default-font-weight: var(--font-weight-medium);
--typography-h-xx-large-font-size: var(--font-size-xx-large);
--typography-h-xx-large-line-height: var(--line-height-xx-large);
--typography-h-xx-large-small-font-size: var(--font-size-x-large);
--typography-h-xx-large-small-line-height: var(--line-height-x-large);
--typography-h-xx-large-weight: var(--font-weight-medium);
--typography-h-x-large-font-size: var(--font-size-x-large);
--typography-h-x-large-line-height: var(--line-height-x-large);
--typography-h-x-large-small-font-size: var(--font-size-large);
--typography-h-x-large-small-line-height: var(--line-height-large);
--typography-h-x-large-weight: var(--font-weight-medium);
--typography-h-large-font-size: var(--font-size-large);
--typography-h-large-line-height: var(--line-height-large);
--typography-h-large-small-font-size: var(--font-size-medium);
--typography-h-large-small-line-height: var(--line-height-medium);
--typography-h-large-weight: var(--font-weight-medium);
--typography-lead-font-size: var(--font-size-lead);
--typography-lead-line-height: var(--line-height-lead);
--typography-lead-small-font-size: var(--font-size-lead);
--typography-lead-small-line-height: var(--line-height-lead);
--typography-lead-weight: var(--font-weight-medium);
--typography-h-medium-font-size: var(--font-size-medium);
--typography-h-medium-line-height: var(--line-height-medium);
--typography-h-medium-small-font-size: var(--font-size-basis);
--typography-h-medium-small-line-height: var(--line-height-basis);
--typography-h-medium-weight: var(--font-weight-medium);
--typography-h-basis-font-size: var(--font-size-basis);
--typography-h-basis-line-height: var(--line-height-basis);
--typography-h-basis-small-font-size: var(--font-size-small);
--typography-h-basis-small-line-height: var(--line-height-small);
--typography-h-basis-weight: var(--font-weight-medium);
--typography-h-basis-font-family: var(--font-family-default);
--typography-h-small-font-size: var(--font-size-small);
--typography-h-small-line-height: var(--line-height-small);
--typography-h-small-small-font-size: var(--font-size-x-small);
--typography-h-small-small-line-height: var(--line-height-x-small);
--typography-h-small-weight: var(--font-weight-medium);
--typography-h-small-font-family: var(--font-family-default);
--typography-h-x-small-font-size: var(--font-size-x-small);
--typography-h-x-small-line-height: var(--line-height-x-small);
--typography-h-x-small-weight: var(--font-weight-medium);
--typography-h-x-small-font-family: var(--font-family-default);
}
.dnb-lead,
.dnb-h--xx-large,
.dnb-h--x-large,
.dnb-h--large,
.dnb-h--medium,
.dnb-h--basis,
.dnb-h--small,
.dnb-h--x-small,
.dnb-core-style .dnb-lead,
.dnb-core-style .dnb-h--xx-large,
.dnb-core-style .dnb-h--x-large,
.dnb-core-style .dnb-h--large,
.dnb-core-style .dnb-h--medium,
.dnb-core-style .dnb-h--basis,
.dnb-core-style .dnb-h--small,
.dnb-core-style .dnb-h--x-small {
padding: 0;
}
.dnb-lead:not([class*=space__top]),
.dnb-h--xx-large:not([class*=space__top]),
.dnb-h--x-large:not([class*=space__top]),
.dnb-h--large:not([class*=space__top]),
.dnb-h--medium:not([class*=space__top]),
.dnb-h--basis:not([class*=space__top]),
.dnb-h--small:not([class*=space__top]),
.dnb-h--x-small:not([class*=space__top]),
.dnb-core-style .dnb-lead:not([class*=space__top]),
.dnb-core-style .dnb-h--xx-large:not([class*=space__top]),
.dnb-core-style .dnb-h--x-large:not([class*=space__top]),
.dnb-core-style .dnb-h--large:not([class*=space__top]),
.dnb-core-style .dnb-h--medium:not([class*=space__top]),
.dnb-core-style .dnb-h--basis:not([class*=space__top]),
.dnb-core-style .dnb-h--small:not([class*=space__top]),
.dnb-core-style .dnb-h--x-small:not([class*=space__top]) {
margin-top: 0;
}
.dnb-lead:not([class*=space__bottom]),
.dnb-h--xx-large:not([class*=space__bottom]),
.dnb-h--x-large:not([class*=space__bottom]),
.dnb-h--large:not([class*=space__bottom]),
.dnb-h--medium:not([class*=space__bottom]),
.dnb-h--basis:not([class*=space__bottom]),
.dnb-h--small:not([class*=space__bottom]),
.dnb-h--x-small:not([class*=space__bottom]),
.dnb-core-style .dnb-lead:not([class*=space__bottom]),
.dnb-core-style .dnb-h--xx-large:not([class*=space__bottom]),
.dnb-core-style .dnb-h--x-large:not([class*=space__bottom]),
.dnb-core-style .dnb-h--large:not([class*=space__bottom]),
.dnb-core-style .dnb-h--medium:not([class*=space__bottom]),
.dnb-core-style .dnb-h--basis:not([class*=space__bottom]),
.dnb-core-style .dnb-h--small:not([class*=space__bottom]),
.dnb-core-style .dnb-h--x-small:not([class*=space__bottom]) {
margin-bottom: 0;
}
.dnb-lead:not([class*=space__left]),
.dnb-h--xx-large:not([class*=space__left]),
.dnb-h--x-large:not([class*=space__left]),
.dnb-h--large:not([class*=space__left]),
.dnb-h--medium:not([class*=space__left]),
.dnb-h--basis:not([class*=space__left]),
.dnb-h--small:not([class*=space__left]),
.dnb-h--x-small:not([class*=space__left]),
.dnb-core-style .dnb-lead:not([class*=space__left]),
.dnb-core-style .dnb-h--xx-large:not([class*=space__left]),
.dnb-core-style .dnb-h--x-large:not([class*=space__left]),
.dnb-core-style .dnb-h--large:not([class*=space__left]),
.dnb-core-style .dnb-h--medium:not([class*=space__left]),
.dnb-core-style .dnb-h--basis:not([class*=space__left]),
.dnb-core-style .dnb-h--small:not([class*=space__left]),
.dnb-core-style .dnb-h--x-small:not([class*=space__left]) {
margin-left: 0;
}
.dnb-lead:not([class*=space__right]),
.dnb-h--xx-large:not([class*=space__right]),
.dnb-h--x-large:not([class*=space__right]),
.dnb-h--large:not([class*=space__right]),
.dnb-h--medium:not([class*=space__right]),
.dnb-h--basis:not([class*=space__right]),
.dnb-h--small:not([class*=space__right]),
.dnb-h--x-small:not([class*=space__right]),
.dnb-core-style .dnb-lead:not([class*=space__right]),
.dnb-core-style .dnb-h--xx-large:not([class*=space__right]),
.dnb-core-style .dnb-h--x-large:not([class*=space__right]),
.dnb-core-style .dnb-h--large:not([class*=space__right]),
.dnb-core-style .dnb-h--medium:not([class*=space__right]),
.dnb-core-style .dnb-h--basis:not([class*=space__right]),
.dnb-core-style .dnb-h--small:not([class*=space__right]),
.dnb-core-style .dnb-h--x-small:not([class*=space__right]) {
margin-right: 0;
}
.dnb-lead,
.dnb-h--xx-large,
.dnb-h--x-large,
.dnb-h--large,
.dnb-h--medium,
.dnb-h--basis,
.dnb-h--small,
.dnb-h--x-small,
.dnb-core-style .dnb-lead,
.dnb-core-style .dnb-h--xx-large,
.dnb-core-style .dnb-h--x-large,
.dnb-core-style .dnb-h--large,
.dnb-core-style .dnb-h--medium,
.dnb-core-style .dnb-h--basis,
.dnb-core-style .dnb-h--small,
.dnb-core-style .dnb-h--x-small {
font-family: var(--font-family-heading);
}
.dnb-lead .dnb-icon--default,
.dnb-h--xx-large .dnb-icon--default,
.dnb-h--x-large .dnb-icon--default,
.dnb-h--large .dnb-icon--default,
.dnb-h--medium .dnb-icon--default,
.dnb-h--basis .dnb-icon--default,
.dnb-h--small .dnb-icon--default,
.dnb-h--x-small .dnb-icon--default,
.dnb-core-style .dnb-lead .dnb-icon--default,
.dnb-core-style .dnb-h--xx-large .dnb-icon--default,
.dnb-core-style .dnb-h--x-large .dnb-icon--default,
.dnb-core-style .dnb-h--large .dnb-icon--default,
.dnb-core-style .dnb-h--medium .dnb-icon--default,
.dnb-core-style .dnb-h--basis .dnb-icon--default,
.dnb-core-style .dnb-h--small .dnb-icon--default,
.dnb-core-style .dnb-h--x-small .dnb-icon--default {
font-size: 1em;
}
.dnb-lead .dnb-icon--medium,
.dnb-h--xx-large .dnb-icon--medium,
.dnb-h--x-large .dnb-icon--medium,
.dnb-h--large .dnb-icon--medium,
.dnb-h--medium .dnb-icon--medium,
.dnb-h--basis .dnb-icon--medium,
.dnb-h--small .dnb-icon--medium,
.dnb-h--x-small .dnb-icon--medium,
.dnb-core-style .dnb-lead .dnb-icon--medium,
.dnb-core-style .dnb-h--xx-large .dnb-icon--medium,
.dnb-core-style .dnb-h--x-large .dnb-icon--medium,
.dnb-core-style .dnb-h--large .dnb-icon--medium,
.dnb-core-style .dnb-h--medium .dnb-icon--medium,
.dnb-core-style .dnb-h--basis .dnb-icon--medium,
.dnb-core-style .dnb-h--small .dnb-icon--medium,
.dnb-core-style .dnb-h--x-small .dnb-icon--medium {
font-size: 1.5em;
}
.dnb-lead a,
.dnb-lead .dnb-anchor,
.dnb-h--xx-large a,
.dnb-h--xx-large .dnb-anchor,
.dnb-h--x-large a,
.dnb-h--x-large .dnb-anchor,
.dnb-h--large a,
.dnb-h--large .dnb-anchor,
.dnb-h--medium a,
.dnb-h--medium .dnb-anchor,
.dnb-h--basis a,
.dnb-h--basis .dnb-anchor,
.dnb-h--small a,
.dnb-h--small .dnb-anchor,
.dnb-h--x-small a,
.dnb-h--x-small .dnb-anchor,
.dnb-core-style .dnb-lead a,
.dnb-core-style .dnb-lead .dnb-anchor,
.dnb-core-style .dnb-h--xx-large a,
.dnb-core-style .dnb-h--xx-large .dnb-anchor,
.dnb-core-style .dnb-h--x-large a,
.dnb-core-style .dnb-h--x-large .dnb-anchor,
.dnb-core-style .dnb-h--large a,
.dnb-core-style .dnb-h--large .dnb-anchor,
.dnb-core-style .dnb-h--medium a,
.dnb-core-style .dnb-h--medium .dnb-anchor,
.dnb-core-style .dnb-h--basis a,
.dnb-core-style .dnb-h--basis .dnb-anchor,
.dnb-core-style .dnb-h--small a,
.dnb-core-style .dnb-h--small .dnb-anchor,
.dnb-core-style .dnb-h--x-small a,
.dnb-core-style .dnb-h--x-small .dnb-anchor {
padding-top: 0;
padding-bottom: 0.03125rem;
}
.dnb-small {
font-size: var(--font-size-small);
}
sup,
sub {
font-size: 0.777777em;
line-height: 0.5em;
}
.dnb-p {
font-size: var(--font-size-basis);
}
.dnb-p:not([class*=space__top]) {
margin-top: 0;
}
.dnb-p:not([class*=space__bottom]) {
margin-bottom: 0;
}
.dnb-p {
padding: 0;
}
.dnb-p--lead {
font-size: var(--typography-lead-font-size);
line-height: var(--typography-lead-line-height);
font-weight: var(--typography-lead-weight);
}
.dnb-p--lead > small {
font-size: var(--typography-lead-small-font-size);
line-height: var(--typography-lead-small-line-height);
}
.dnb-p b,
.dnb-p strong {
font-weight: var(--font-weight-medium);
}
.dnb-p--medium {
font-weight: var(--font-weight-medium);
}
.dnb-p--bold {
font-weight: var(--font-weight-bold);
}
.dnb-p__size--xx-large {
font-size: var(--font-size-xx-large);
line-height: var(--line-height-xx-large);
}
.dnb-p__size--x-large {
font-size: var(--font-size-x-large);
line-height: var(--line-height-x-large);
}
.dnb-p__size--large {
font-size: var(--font-size-large);
line-height: var(--line-height-large);
}
.dnb-p__size--basis {
font-size: var(--font-size-basis);
line-height: var(--line-height-basis);
}
.dnb-p__size--medium {
font-size: var(--font-size-medium);
line-height: var(--line-height-medium);
}
.dnb-p--small, .dnb-p__size--small {
font-size: var(--font-size-small);
line-height: var(--line-height-small);
}
.dnb-p--x-small, .dnb-p__size--x-small {
font-size: var(--font-size-x-small);
line-height: var(--line-height-x-small);
}
.dnb-p > small {
font-size: var(--font-size-small);
line-height: var(--line-height-small);
}
.dnb-p > cite {
font-weight: var(--font-weight-medium);
line-height: var(--line-height-basis);
font-style: italic;
}
/*
* Typography
* Universal set of helper classes that do not have a specific element.
* The class ".dnb-t" does nothing, only it's modifiers ".dnb-t__[***]" do.
*/
.dnb-t__size--xx-large {
font-size: var(--font-size-xx-large);
}
.dnb-t__size--x-large {
font-size: var(--font-size-x-large);
}
.dnb-t__size--large {
font-size: var(--font-size-large);
}
.dnb-t__size--medium {
font-size: var(--font-size-medium);
}
.dnb-t__size--basis {
font-size: var(--font-size-basis);
}
.dnb-t__size--small {
font-size: var(--font-size-small);
}
.dnb-t__size--x-small {
font-size: var(--font-size-x-small);
}
.dnb-t__line-height--xx-large {
line-height: var(--line-height-xx-large);
}
.dnb-t__line-height--x-large {
line-height: var(--line-height-x-large);
}
.dnb-t__line-height--large {
line-height: var(--line-height-large);
}
.dnb-t__line-height--medium {
line-height: var(--line-height-medium);
}
.dnb-t__line-height--basis {
line-height: var(--line-height-basis);
}
.dnb-t__line-height--small {
line-height: var(--line-height-small);
}
.dnb-t__line-height--x-small {
line-height: var(--line-height-x-small);
}
.dnb-t__weight--regular {
font-weight: var(--font-weight-regular);
}
.dnb-t__weight--medium {
font-weight: var(--font-weight-medium);
}
.dnb-t__weight--bold {
font-weight: var(--font-weight-bold);
}
.dnb-t__align--center {
text-align: center;
}
.dnb-t__align--left {
text-align: left;
}
.dnb-t__align--right {
text-align: right;
}
.dnb-t__family--default {
font-family: var(--font-family-default);
}
.dnb-t__family--heading {
font-family: var(--font-family-heading);
}
.dnb-t__family--monospace {
font-family: var(--font-family-monospace);
}
.dnb-t__decoration--underline {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.dnb-t__slant--italic {
font-style: italic;
}
.dnb-table b,
.dnb-table strong {
font-weight: var(--font-weight-medium);
}
.dnb-h--xx-large {
font-size: var(--typography-h-xx-large-font-size);
line-height: var(--typography-h-xx-large-line-height);
font-weight: var(--typography-h-xx-large-weight);
}
.dnb-h--xx-large > small {
font-size: var(--typography-h-xx-large-small-font-size);
line-height: var(--typography-h-xx-large-small-line-height);
}
.dnb-h--xx-large > small {
display: block;
}
.dnb-h--x-large {
font-size: var(--typography-h-x-large-font-size);
line-height: var(--typography-h-x-large-line-height);
font-weight: var(--typography-h-x-large-weight);
}
.dnb-h--x-large > small {
font-size: var(--typography-h-x-large-small-font-size);
line-height: var(--typography-h-x-large-small-line-height);
}
.dnb-h--x-large > small {
display: block;
}
.dnb-h--large {
font-size: var(--typography-h-large-font-size);
line-height: var(--typography-h-large-line-height);
font-weight: var(--typography-h-large-weight);
}
.dnb-h--large > small {
font-size: var(--typography-h-large-small-font-size);
line-height: var(--typography-h-large-small-line-height);
}
.dnb-lead {
font-size: var(--typography-lead-font-size);
line-height: var(--typography-lead-line-height);
font-weight: var(--typography-lead-weight);
}
.dnb-lead > small {
font-size: var(--typography-lead-small-font-size);
line-height: var(--typography-lead-small-line-height);
}
.dnb-h--medium {
font-size: var(--typography-h-medium-font-size);
line-height: var(--typography-h-medium-line-height);
font-weight: var(--typography-h-medium-weight);
}
.dnb-h--medium > small {
font-size: var(--typography-h-medium-small-font-size);
line-height: var(--typography-h-medium-small-line-height);
}
.dnb-h--basis {
font-size: var(--typography-h-basis-font-size);
line-height: var(--typography-h-basis-line-height);
font-weight: var(--typography-h-basis-weight);
}
.dnb-h--basis > small {
font-size: var(--typography-h-basis-small-font-size);
line-height: var(--typography-h-basis-small-line-height);
}
.dnb-h--basis {
font-family: var(--typography-h-basis-font-family);
}
.dnb-h--small {
font-size: var(--typography-h-small-font-size);
line-height: var(--typography-h-small-line-height);
font-weight: var(--typography-h-small-weight);
}
.dnb-h--small > small {
font-size: var(--typography-h-small-small-font-size);
line-height: var(--typography-h-small-small-line-height);
}
.dnb-h--small {
font-family: var(--typography-h-small-font-family);
}
.dnb-h--x-small {
font-size: var(--typography-h-x-small-font-size);
line-height: var(--typography-h-x-small-line-height);
font-weight: var(--typography-h-x-small-weight);
}
.dnb-h--x-small {
font-family: var(--typography-h-x-small-font-family);
}
.dnb-spacing .dnb-h--xx-large:not([class*=space__top]), .dnb-core-style .dnb-spacing .dnb-h--xx-large:not([class*=space__top]) {
margin-top: 3rem;
}
.dnb-spacing .dnb-h--xx-large:not([class*=space__bottom]), .dnb-core-style .dnb-spacing .dnb-h--xx-large:not([class*=space__bottom]) {
margin-bottom: 2.5rem;
}
.dnb-spacing .dnb-h--x-large:not([class*=space__top]), .dnb-core-style .dnb-spacing .dnb-h--x-large:not([class*=space__top]) {
margin-top: 3rem;
}
.dnb-spacing .dnb-h--x-large:not([class*=space__bottom]), .dnb-core-style .dnb-spacing .dnb-h--x-large:not([class*=space__bottom]) {
margin-bottom: 1rem;
}
.dnb-spacing .dnb-h--large:not([class*=space__top]), .dnb-core-style .dnb-spacing .dnb-h--large:not([class*=space__top]) {
margin-top: 3rem;
}
.dnb-spacing .dnb-h--large:not([class*=space__bottom]), .dnb-core-style .dnb-spacing .dnb-h--large:not([class*=space__bottom]) {
margin-bottom: 1rem;
}
.dnb-spacing .dnb-lead:not([class*=space__top]),
.dnb-spacing .dnb-h--medium:not([class*=space__top]),
.dnb-spacing .dnb-h--basis:not([class*=space__top]),
.dnb-spacing .dnb-h--small:not([class*=space__top]),
.dnb-spacing .dnb-h--x-small:not([class*=space__top]), .dnb-core-style .dnb-spacing .dnb-lead:not([class*=space__top]), .dnb-core-style .dnb-spacing .dnb-h--medium:not([class*=space__top]), .dnb-core-style .dnb-spacing .dnb-h--basis:not([class*=space__top]), .dnb-core-style .dnb-spacing .dnb-h--small:not([class*=space__top]), .dnb-core-style .dnb-spacing .dnb-h--x-small:not([class*=space__top]) {
margin-top: 2rem;
}
.dnb-spacing .dnb-lead:not([class*=space__bottom]),
.dnb-spacing .dnb-h--medium:not([class*=space__bottom]),
.dnb-spacing .dnb-h--basis:not([class*=space__bottom]),
.dnb-spacing .dnb-h--small:not([class*=space__bottom]),
.dnb-spacing .dnb-h--x-small:not([class*=space__bottom]), .dnb-core-style .dnb-spacing .dnb-lead:not([class*=space__bottom]), .dnb-core-style .dnb-spacing .dnb-h--medium:not([class*=space__bottom]), .dnb-core-style .dnb-spacing .dnb-h--basis:not([class*=space__bottom]), .dnb-core-style .dnb-spacing .dnb-h--small:not([class*=space__bottom]), .dnb-core-style .dnb-spacing .dnb-h--x-small:not([class*=space__bottom]) {
margin-bottom: 1rem;
}
.dnb-spacing .dnb-p:not([class*=dnb-space__top]), .dnb-core-style .dnb-spacing .dnb-p:not([class*=dnb-space__top]) {
margin-top: 0;
}
.dnb-spacing .dnb-p:not([class*=dnb-space__bottom]), .dnb-core-style .dnb-spacing .dnb-p:not([class*=dnb-space__bottom]) {
margin-bottom: 1.5rem;
}
/**
* NB: The content below is auto generated by the "themeFactory".
* You may want to update it by running "yarn build" locally.
*/
/*
* Anchor mixins
*
*/
/*
* Utilities
*/
.dnb-blockquote {
color: var(--color-mint-green);
background-color: var(--color-ocean-green);
}
.dnb-blockquote.dnb-blockquote--no-background {
color: var(--theme-color-black-80, currentColor);
}
.dnb-blockquote.dnb-blockquote--no-background::before {
filter: grayscale(1) brightness(24%);
}
.dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor,
.dnb-blockquote:not(.dnb-blockquote--no-background) a {
color: var(--color-white);
}
.dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)),
.dnb-blockquote:not(.dnb-blockquote--no-background) a:hover:where(:not(.dnb-anchor--no-hover)) {
color: var(--anchor-color--contrast);
box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
}
.dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:hover:not(.dnb-anchor--no-hover),
.dnb-blockquote:not(.dnb-blockquote--no-background) a:hover:not(.dnb-anchor--no-hover) {
/* stylelint-disable-next-line scss/operator-no-unspaced */
}
@supports not (selector(*:where(*))) {
.dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:hover:not(.dnb-anchor--no-hover),
.dnb-blockquote:not(.dnb-blockquote--no-background) a:hover:not(.dnb-anchor--no-hover) {
color: var(--anchor-color--contrast);
box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
}
}
.dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:active,
.dnb-blockquote:not(.dnb-blockquote--no-background) a:active {
color: var(--color-white);
background-color: transparent;
box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 transparent, var(--anchor-background-gutter-right, 0.125rem) 0 0 0 transparent;
}
.dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:focus-visible,
.dnb-blockquote:not(.dnb-blockquote--no-background) a:focus-visible {
color: var(--color-white);
background-color: transparent;
outline: none;
--border-color: var(--color-white);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.dnb-blockquote:not(.dnb-blockquote--no-background) h1,
.dnb-blockquote:not(.dnb-blockquote--no-background) h2,
.dnb-blockquote:not(.dnb-blockquote--no-background) h3,
.dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-h--xx-large,
.dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-h--large,
.dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-h--medium,
.dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-lead {
color: var(--color-mint-green);
}
.dnb-code {
background-color: var(--color-mint-green-25);
box-shadow: inset 0 0 0 0.0625rem var(--color-mint-green-50);
}
.dnb-pre {
color: var(--color-mint-green-12);
background-color: #222;
}
.dnb-pre.dnb-pre--focus {
--border-color: var(--color-sea-green);
--border-width: 0.25rem;
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.dnb-hr {
--hr-color: var(--color-black-8);
}
.dnb-img[alt]::after {
color: var(--color-black-80);
background-color: var(--color-black-8);
}
.dnb-img__img--error {
color: var(--color-black-80);
background-color: var(--color-black-8);
}
.dnb-label {
color: var(--color-black-80);
}
.dnb-ul {
color: var(--theme-color-black-80, currentColor);
}
.dnb-ol {
color: var(--theme-color-black-80, currentColor);
}
.dnb-dl {
color: var(--theme-color-black-80, currentColor);
}
/*
* Blockquote
*
*/
/*
* Core Styles
* Mainly only the margins are defined in here
*
*/
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--theme-color-black-80, currentColor);
}
.dnb-lead,
.dnb-h--xx-large,
.dnb-h--x-large,
.dnb-h--large,
.dnb-h--medium,
.dnb-h--basis,
.dnb-h--small,
.dnb-h--x-small,
.dnb-core-style .dnb-lead,
.dnb-core-style .dnb-h--xx-large,
.dnb-core-style .dnb-h--x-large,
.dnb-core-style .dnb-h--large,
.dnb-core-style .dnb-h--medium,
.dnb-core-style .dnb-h--basis,
.dnb-core-style .dnb-h--small,
.dnb-core-style .dnb-h--x-small {
color: var(--theme-color-black-80, currentColor);
}
.dnb-lead, .dnb-h--xx-large, .dnb-h--x-large, .dnb-h--large, .dnb-h--medium, .dnb-h--basis, .dnb-h--small, .dnb-h--x-small, .dnb-core-style .dnb-lead, .dnb-core-style .dnb-h--xx-large, .dnb-core-style .dnb-h--x-large, .dnb-core-style .dnb-h--large, .dnb-core-style .dnb-h--medium, .dnb-core-style .dnb-h--basis, .dnb-core-style .dnb-h--small, .dnb-core-style .dnb-h--x-small, h1, h2, h3, h4, h5, h6, p, b, small, strong, .dnb-p, .dnb-small, .dnb-table, sub, sup {
--typography-h-xx-large-small-line-height: var(--line-height-large);
--typography-h-x-large-line-height: var(--line-height-large);
--typography-h-x-large-small-font-size: var(--font-size-x-large);
--typography-h-large-line-height: var(--line-height-medium);
--typography-h-large-small-line-height: calc(
var(--line-height-medium) - 0.125rem
);
--typography-lead-small-font-size: var(--font-size-basis);
--typography-lead-small-line-height: var(--line-height-basis);
--typography-h-medium-line-height: var(--line-height-lead);
--typography-h-small-small-line-height: var(--line-height-small);
}
.dnb-p {
color: var(--theme-color-black-80, currentColor);
}
/*
* Global rules, a place to put rules, overrides and customizations that don't fit elsewhere.
*/
/**
* Carnegie UI Theme
* Overrides css variables from the ui theme
*/
/*
* CSS Properties Ui
*
*/
:root {
--font-family-default: 'DNB', sans-serif;
--font-family-heading: var(--font-family-default);
--font-family-monospace: 'DNBMono', 'Menlo', 'Consolas', 'Roboto Mono',
'Ubuntu Monospace', 'Noto Mono', 'Oxygen Mono', 'Liberation Mono',
monospace;
--font-weight-default: normal;
--font-weight-basis: normal;
--font-weight-regular: normal;
--font-weight-medium: 500;
--font-weight-bold: 600;
--font-size-x-small: 0.875rem;
--font-size-small: 1rem;
--font-size-basis: 1.125rem;
--font-size-basis--em: 1em;
--font-size-lead: var(--font-size-medium);
--font-size-medium: 1.25rem;
--font-size-large: 1.625rem;
--font-size-x-large: 2.125rem;
--font-size-xx-large: 3rem;
--line-height-xx-small--em: 1em;
--line-height-x-small: 1.125rem;
--line-height-small: 1.25rem;
--line-height-basis: 1.5rem;
--line-height-basis--em: 1.333em;
--line-height-lead: 1.5rem;
--line-height-medium: 2rem;
--line-height-large: 2.5rem;
--line-height-x-large: 3.5rem;
--line-height-xx-large: var(--line-height-x-large);
--color-mint-green-50: #d2f0e9;
--color-mint-green-25: #e9f8f4;
--color-mint-green-12: #f4fbf9;
--color-sea-green-30: #b3d5d5;
--color-accent-yellow-30: #feebc1;
--color-signal-orange: #ff5400;
--color-fire-red: #dc2a2a;
--color-success-green: #007b5e;
--color-fire-red-8: #fdeeee;
--color-black: #000;
--color-black-80: #333;
--color-black-55: #737373;
--color-black-20: #ccc;
--color-black-8: #ebebeb;
--color-black-3: #f8f8f8;
--color-white: #fff;
--color-black-border: #cdcdcd;
--color-black-background: #fafafa;
--color-sea-green: #007272;
--color-mint-green: #a5e1d2;
--color-summer-green: #28b482;
--color-emerald-green: #14555a;
--color-ocean-green: #00343e;
--color-accent-yellow: #fdbb31;
--color-indigo: #23195a;
--color-violet: #6e2382;
--color-sky-blue: #4bbed2;
--color-lavender: #f2f2f5;
--color-sand-yellow: #fbf6ec;
--color-pistachio: #f2f4ec;
--color-mint-green-alt: #ebfffa;
--color-indigo-medium: #6e6491;
--color-indigo-light: #b9afc8;
--color-violet-medium: #a06eaf;
--color-violet-light: #cfb9d7;
--color-sky-blue-medium: #87d2e1;
--color-sky-blue-light: #c3ebf0;
--spacing-xx-small: 0.25rem;
--spacing-x-small: 0.5rem;
--spacing-small: 1rem;
--spacing-medium: 1.5rem;
--spacing-large: 2rem;
--spacing-x-large: 3rem;
--spacing-xx-large: 3.5rem;
--layout-small: 40em;
--layout-medium: 60em;
--layout-large: 72em;
--layout-x-large: 80em;
--layout-xx-large: 90em;
--shadow-default: 0 8px 16px rgb(51 51 51 / 8%);
--shadow-default-x: 0;
--shadow-default-y: 8px;
--shadow-default-blur-radius: 16px;
--shadow-default-color: rgb(51 51 51 / 8%);
--shadow-sharp: 0 1px 6px rgb(0 0 0 / 16%);
--shadow-sharp-x: 0;
--shadow-sharp-y: 1px;
--shadow-sharp-blur-radius: 6px;
--shadow-sharp-color: rgb(0 0 0 / 16%);
--easing-default: cubic-bezier(0.42, 0, 0, 1);
--prose-max-width: 60ch;
--internal-color-background-selected-subtle: #e4eed7;
}
.eufemia-theme__carnegie,
:root {
--font-family-heading: var(--ca-font-family-heading);
--color-sea-green: var(--ca-color-ocean-green);
}
/*
* Global rules, a place to put rules, overrides and customizations that don't fit elsewhere.
*/
:root {
--focus-ring-width: 0.125rem;
--focus-ring-color: var(--color-emerald-green);
--scrollbar-track-width: 0.5rem;
--scrollbar-thumb-width: 0.5rem;
--scrollbar-track-color: var(--color-black-8);
--scrollbar-thumb-color: var(--color-sea-green);
--scrollbar-thumb-hover-color: var(--color-emerald-green);
--skip-link-color: var(--color-sea-green);
--skip-link-color--hover: var(--color-sea-green);
--skip-link-color--active: var(--color-white);
--skip-link-background: var(--color-white);
--skip-link-background--hover: var(--color-mint-green-50);
--skip-link-background--active: var(--color-emerald-green);
}
.dnb-selection::selection,
.dnb-selection ::selection,
[class^=dnb-]::selection,
[class^=dnb-] ::selection {
background-color: var(--color-mint-green, #a5e1d2);
color: var(--color-black, #000);
text-shadow: none;
}