/* 
Theme Name: dnb basic theme Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Basic child theme for elementor hello theme
Author: dots & boxes
Author URI: https://dotsnboxes.de
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

:root {
    --body-font: 'Satoshi-Variable', system-ui, -apple-system;
    --headline-font: 'Satoshi-Variable', system-ui, -apple-system;
	--icon-font: 'dnb-icons';
    --headline-color: var( --e-global-color-4f22867, #000000 );
    --text-color:  var( --e-global-color-text, #272727 );
    --background-color: #ffffff;
    --primary-color: var( --e-global-color-primary, #AEFF45);
    --secondary-color: var( --e-global-color-secondary, #B0E0FB);
    --accent-color: var( --e-global-color-accent, #AEFF45);
    --light-background: var( --e-global-color-65fff3b, red);
    --dark-background: var( --e-global-color-3b0dec0, #101D22);
    --secondary-accent: var(--e-global-color-d56f133, #FBDBFF);
    --dnb-space-4xs: clamp(0.33rem, calc(-0.04vw + 0.34rem), 0.31rem);
    --dnb-space-3xs: clamp(0.41rem, calc(0.06vw + 0.39rem), 0.44rem);
    --dnb-space-2xs: clamp(0.51rem, calc(0.21vw + 0.45rem), 0.62rem);
    --dnb-space-xs: clamp(0.64rem, calc(0.47vw + 0.5rem), 0.88rem);
    --dnb-space-s: clamp(0.8rem, calc(0.88vw + 0.54rem), 1.24rem);
    --dnb-space-m: clamp(1rem, calc(1.5vw + 0.55rem), 1.75rem);
    --dnb-space-l: clamp(1.25rem, calc(2.45vw + 0.52rem), 2.47rem);
    --dnb-space-xl: clamp(1.56rem, calc(3.87vw + 0.4rem), 3.5rem);
    --dnb-space-2xl: clamp(1.95rem, calc(5.99vw + 0.16rem), 4.95rem);
    --dnb-space-3xl: clamp(2.44rem, calc(9.11vw + -0.29rem), 7rem);
    --dnb-space-4xl: clamp(3.05rem, calc(13.68vw + -1.05rem), 9.89rem);
    --dnb-text-xs: clamp(0.79rem, calc(-0.31vw + 0.88rem), 0.63rem);
    --dnb-text-s: clamp(0.89rem, calc(-0.09vw + 0.92rem), 0.84rem);
    --dnb-text-m: clamp(1rem, calc(0.25vw + 0.93rem), 1.13rem);
    --dnb-text-l: clamp(1.13rem, calc(0.75vw + 0.9rem), 1.5rem);
    --dnb-text-xl: clamp(1.27rem, calc(1.47vw + 0.83rem), 2rem);
    --dnb-text-2xl: clamp(1.42rem, calc(2.48vw + 0.68rem), 2.66rem);
    --dnb-text-3xl: clamp(1.6rem, calc(3.9vw + 0.43rem), 3.55rem);
    --dnb-text-4xl: clamp(1.8rem, calc(5.87vw + 0.04rem), 4.74rem);
    --dnb-radius-xs: clamp(0.25rem, calc(0vw + 0.25rem), 0.25rem);
    --dnb-radius-s: clamp(0.38rem, calc(-0.25vw + 0.57rem), 0.5rem);
    --dnb-radius-m: clamp(0.63rem, calc(-0.25vw + 0.82rem), 0.75rem);
    --dnb-radius-l: clamp(1rem, calc(-0.5vw + 1.4rem), 1.25rem);
    --dnb-radius-xl: clamp(1.63rem, calc(-0.75vw + 2.23rem), 2rem);
    --dnb-radius-full: 999rem;
    --dnb-shadow-xs: 0 1px 2px var(--dnb-shadow-primary);
    --dnb-shadow-s: 0 1.5px 3px var(--dnb-shadow-primary);
    --dnb-shadow-m: 0 2px 6px var(--dnb-shadow-primary);
    --dnb-shadow-l: 0 3px 12px var(--dnb-shadow-primary);
    --dnb-shadow-xl: 0 6px 48px var(--dnb-shadow-primary);
}

body {
    font-size: 1rem;
    font-size: var(--dnb-text-m);
    font-family: var(--body-font), system-ui;
    color: var(--text-color);
    line-height: 1.5;
}
 h1, h2, h3, h4, h5, h6, .headline {
    color: var(--headline-color);
    font-family: var(--headline-font);
    word-break: break-word;
}
/*sections */
.dark-bg{
    background: var(--dark-background);
    --headline-color: #ffffff;
    --text-colot: #ffffff;
}
.highlight {
    background: var(--primary-color);
    --accent-color: var(--secondary-accent);
    
}

/* - Buttons - */
.elementor-button, a.elementor-button, button{
	color: var(--headline-color);
	font-weight: 700;
	font-size: var(--dnb-text-l);
    line-height: 1;
}
.elementor-button:hover, a.elementor-button:hover,  button:hover, .elementor-button:visited, a.elementor-button:visited, button:visited{
	color: var(--headline-color);
}  
.elementor-button:focus, button:focus{
	color:var(--headline-color);
}

/* Fluid Typography */
.text-xs {
    font-size: 0.79rem;
    font-size: var(--dnb-text-xs);
}
.text-s {
    font-size: 0.89rem;
    font-size: var(--dnb-text-s);
}
.text-m {
    font-size: 1rem;
    font-size: var(--dnb-text-m);
}
.text-l {
    font-size: 1.13rem;
    font-size: var(--dnb-text-l);
}
.text-xl {
    font-size: 1.27rem;
    font-size: var(--dnb-text-xl);
}
.text-2xl {
    font-size: 1.42rem;
    font-size: var(--dnb-text-2xl);
}
.text-3xl {
    font-size: 1.6rem;
    font-size: var(--dnb-text-3xl);
}
.text-4xl {
    font-size: 1.8rem;
    font-size: var(--dnb-text-4xl);
}
/* Headings */
H1 {
    font-size: var(--dnb-text-4xl);
    line-height: 1.1;
}
H2 {
    font-size: var(--dnb-text-3xl);
    line-height: 1.2;
}
H3 {
    font-size: var(--dnb-text-2xl);
    line-height: 1.3;
}
H4 {
    font-size: var(--dnb-text-xl);
    line-height: 1.3;
}
H5 {
    font-size: var(--dnb-text-l);
    line-height: 1.3;
}
H6 {
    font-size: var(--dnb-text-m);
    line-height: 1.4;
}
/* Line heights */
.line-height-xs {
    line-height: 1;
}
.line-height-s {
    line-height: 1.2;
}
.line-height-m {
    line-height: 1.5;
}
.line-height-l {
    line-height: 1.8;
}
.line-height-xl {
    line-height: 2;
}
/* Text Modifiers */
.italic {
    font-style: italic;
}
.bold {
    font-weight: bold;
}
.lowercase {
    text-transform: lowercase;
}
.uppercase {
    text-transform: uppercase;
}
.underline {
    -webkit-text-decoration: underline;
    text-decoration: underline;
}
.font-100, .font-100 p, .font-100 span, .font-100 h1, .font-100 h2, .font-100 h3, .font-100 h4, .font-100 h5, .font-100 h6 {
    font-weight: 100;
}
.font-200, .font-200 p, .font-200 span, .font-200 h1, .font-200 h2, .font-200 h3, .font-200 h4, .font-200 h5, .font-200 h6  {
    font-weight: 200;
}
.font-300, .font-300 p, .font-300 span, .font-300 h1, .font-300 h2, .font-300 h3, .font-300 h4, .font-300 h5, .font-300 h6  {
    font-weight: 300;
}
.font-400, .font-400 p, .font-400 span, .font-400 h1, .font-400 h2, .font-400 h3, .font-400 h4, .font-400 h5, .font-400 h6  {
    font-weight: 400;
}
.font-500, .font-500 p, .font-500 span, .font-500 h1, .font-500 h2, .font-500 h3, .font-500 h4, .font-500 h5, .font-500 h6  {
    font-weight: 500;
}
.font-600, .font-100 p, .font-600 span, .font-600 h1, .font-600 h2, .font-600 h3, .font-600 h4, .font-600 h5, .font-600 h6  {
    font-weight: 600;
}
.font-700, .font-700 p, .font-700 span, .font-700 h1, .font-700 h2, .font-700 h3, .font-700 h4, .font-700 h5, .font-700 h6  {
    font-weight: 700;
}
.font-800, .font-800 p, .font-800 span, .font-800 h1, .font-800 h2, .font-800 h3, .font-1ß0 h4, .font-1ß0 h5, .font-1ß0 h6  {
    font-weight: 800;
}
.font-900, .font-900 p, .font-900 span, .font-900 h1, .font-900 h2, .font-900 h3, .font-900 h4, .font-900 h5, .font-900 h6  {
    font-weight: 900;
}
/* Text Alignment */
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
/*  */

/* Fluid Spacing */
.padding-2xs {
    padding: 0.51rem;
    padding: var(--dnb-space-2xs);
}
.padding-xs {
    padding: 0.64rem;
    padding: var(--dnb-space-xs);
}
.padding-s {
    padding: 0.8rem;
    padding: var(--dnb-space-s);
}
.padding-m {
    padding: 1rem;
    padding: var(--dnb-space-m);
}
.padding-l {
    padding: 1.25rem;
    padding: var(--dnb-space-l);
}
.padding-xl {
    padding: 1.56rem;
    padding: var(--dnb-space-xl);
}
.padding-2xl {
    padding: 1.95rem;
    padding: var(--dnb-space-2xl);
}
.padding-3xl {
    padding: 2.44rem;
    padding: var(--dnb-space-3xl);
}
.padding-4xl {
    padding: 3.05rem;
    padding: var(--dnb-space-4xl);
}
.padding-horizontal-2xs {
    padding-left: 0.51rem;
    padding-left: var(--dnb-space-2xs);
    padding-right: 0.51rem;
    padding-right: var(--dnb-space-2xs);
}
.padding-horizontal-xs {
    padding-left: 0.64rem;
    padding-left: var(--dnb-space-xs);
    padding-right: 0.64rem;
    padding-right: var(--dnb-space-xs);
}
.padding-horizontal-s {
    padding-left: 0.8rem;
    padding-left: var(--dnb-space-s);
    padding-right: 0.8rem;
    padding-right: var(--dnb-space-s);
}
.padding-horizontal-m {
    padding-left: 1rem;
    padding-left: var(--dnb-space-m);
    padding-right: 1rem;
    padding-right: var(--dnb-space-m);
}
.padding-horizontal-l {
    padding-left: 1.25rem;
    padding-left: var(--dnb-space-l);
    padding-right: 1.25rem;
    padding-right: var(--dnb-space-l);
}
.padding-horizontal-xl {
    padding-left: 1.56rem;
    padding-left: var(--dnb-space-xl);
    padding-right: 1.56rem;
    padding-right: var(--dnb-space-xl);
}
.padding-horizontal-2xl {
    padding-left: 1.95rem;
    padding-left: var(--dnb-space-2xl);
    padding-right: 1.95rem;
    padding-right: var(--dnb-space-2xl);
}
.padding-horizontal-3xl {
    padding-left: 2.44rem;
    padding-left: var(--dnb-space-3xl);
    padding-right: 2.44rem;
    padding-right: var(--dnb-space-3xl);
}
.padding-horizontal-4xl {
    padding-left: 3.05rem;
    padding-left: var(--dnb-space-4xl);
    padding-right: 3.05rem;
    padding-right: var(--dnb-space-4xl);
}
.padding-vertical-2xs {
    padding-top: 0.51rem;
    padding-top: var(--dnb-space-2xs);
    padding-bottom: 0.51rem;
    padding-bottom: var(--dnb-space-2xs);
}
.padding-vertical-xs {
    padding-top: 0.64rem;
    padding-top: var(--dnb-space-xs);
    padding-bottom: 0.64rem;
    padding-bottom: var(--dnb-space-xs);
}
.padding-vertical-s {
    padding-top: 0.8rem;
    padding-top: var(--dnb-space-s);
    padding-bottom: 0.8rem;
    padding-bottom: var(--dnb-space-s);
}
.padding-vertical-m {
    padding-top: 1rem;
    padding-top: var(--dnb-space-m);
    padding-bottom: 1rem;
    padding-bottom: var(--dnb-space-m);
}
.padding-vertical-l {
    padding-top: 1.25rem;
    padding-top: var(--dnb-space-l);
    padding-bottom: 1.25rem;
    padding-bottom: var(--dnb-space-l);
}
.padding-vertical-xl {
    padding-top: 1.56rem;
    padding-top: var(--dnb-space-xl);
    padding-bottom: 1.56rem;
    padding-bottom: var(--dnb-space-xl);
}
.padding-vertical-2xl {
    padding-top: 1.95rem;
    padding-top: var(--dnb-space-2xl);
    padding-bottom: 1.95rem;
    padding-bottom: var(--dnb-space-2xl);
}
.padding-vertical-3xl {
    padding-top: 2.44rem;
    padding-top: var(--dnb-space-3xl);
    padding-bottom: 2.44rem;
    padding-bottom: var(--dnb-space-3xl);
}
.padding-vertical-4xl {
    padding-top: 3.05rem;
    padding-top: var(--dnb-space-4xl);
    padding-bottom: 3.05rem;
    padding-bottom: var(--dnb-space-4xl);
}
.padding-top-2xs {
    padding-top: 0.51rem;
    padding-top: var(--dnb-space-2xs);
}
.padding-top-xs {
    padding-top: 0.64rem;
    padding-top: var(--dnb-space-xs);
}
.padding-top-s {
    padding-top: 0.8rem;
    padding-top: var(--dnb-space-s);
}
.padding-top-m {
    padding-top: 1rem;
    padding-top: var(--dnb-space-m);
}
.padding-top-l {
    padding-top: 1.25rem;
    padding-top: var(--dnb-space-l);
}
.padding-top-xl {
    padding-top: 1.56rem;
    padding-top: var(--dnb-space-xl);
}
.padding-top-2xl {
    padding-top: 1.95rem;
    padding-top: var(--dnb-space-2xl);
}
.padding-top-3xl {
    padding-top: 2.44rem;
    padding-top: var(--dnb-space-3xl);
}
.padding-top-4xl {
    padding-top: 3.05rem;
    padding-top: var(--dnb-space-4xl);
}
.padding-right-2xs {
    padding-right: 0.51rem;
    padding-right: var(--dnb-space-2xs);
}
.padding-right-xs {
    padding-right: 0.64rem;
    padding-right: var(--dnb-space-xs);
}
.padding-right-s {
    padding-right: 0.8rem;
    padding-right: var(--dnb-space-s);
}
.padding-right-m {
    padding-right: 1rem;
    padding-right: var(--dnb-space-m);
}
.padding-right-l {
    padding-right: 1.25rem;
    padding-right: var(--dnb-space-l);
}
.padding-right-xl {
    padding-right: 1.56rem;
    padding-right: var(--dnb-space-xl);
}
.padding-right-2xl {
    padding-right: 1.95rem;
    padding-right: var(--dnb-space-2xl);
}
.padding-right-3xl {
    padding-right: 2.44rem;
    padding-right: var(--dnb-space-3xl);
}
.padding-right-4xl {
    padding-right: 3.05rem;
    padding-right: var(--dnb-space-4xl);
}
.padding-bottom-2xs {
    padding-bottom: 0.51rem;
    padding-bottom: var(--dnb-space-2xs);
}
.padding-bottom-xs {
    padding-bottom: 0.64rem;
    padding-bottom: var(--dnb-space-xs);
}
.padding-bottom-s {
    padding-bottom: 0.8rem;
    padding-bottom: var(--dnb-space-s);
}
.padding-bottom-m {
    padding-bottom: 1rem;
    padding-bottom: var(--dnb-space-m);
}
.padding-bottom-l {
    padding-bottom: 1.25rem;
    padding-bottom: var(--dnb-space-l);
}
.padding-bottom-xl {
    padding-bottom: 1.56rem;
    padding-bottom: var(--dnb-space-xl);
}
.padding-bottom-2xl {
    padding-bottom: 1.95rem;
    padding-bottom: var(--dnb-space-2xl);
}
.padding-bottom-3xl {
    padding-bottom: 2.44rem;
    padding-bottom: var(--dnb-space-3xl);
}
.padding-bottom-4xl {
    padding-bottom: 3.05rem;
    padding-bottom: var(--dnb-space-4xl);
}
.padding-left-2xs {
    padding-left: 0.51rem;
    padding-left: var(--dnb-space-2xs);
}
.padding-left-xs {
    padding-left: 0.64rem;
    padding-left: var(--dnb-space-xs);
}
.padding-left-s {
    padding-left: 0.8rem;
    padding-left: var(--dnb-space-s);
}
.padding-left-m {
    padding-left: 1rem;
    padding-left: var(--dnb-space-m);
}
.padding-left-l {
    padding-left: 1.25rem;
    padding-left: var(--dnb-space-l);
}
.padding-left-xl {
    padding-left: 1.56rem;
    padding-left: var(--dnb-space-xl);
}
.padding-left-2xl {
    padding-left: 1.95rem;
    padding-left: var(--dnb-space-2xl);
}
.padding-left-3xl {
    padding-left: 2.44rem;
    padding-left: var(--dnb-space-3xl);
}
.padding-left-4xl {
    padding-left: 3.05rem;
    padding-left: var(--dnb-space-4xl);
}
.margin-2xs {
    margin: 0.51rem;
    margin: var(--dnb-space-2xs);
}
.margin-xs {
    margin: 0.64rem;
    margin: var(--dnb-space-xs);
}
.margin-s {
    margin: 0.8rem;
    margin: var(--dnb-space-s);
}
.margin-m {
    margin: 1rem;
    margin: var(--dnb-space-m);
}
.margin-l {
    margin: 1.25rem;
    margin: var(--dnb-space-l);
}
.margin-xl {
    margin: 1.56rem;
    margin: var(--dnb-space-xl);
}
.margin-2xl {
    margin: 1.95rem;
    margin: var(--dnb-space-2xl);
}
.margin-3xl {
    margin: 2.44rem;
    margin: var(--dnb-space-3xl);
}
.margin-4xl {
    margin: 3.05rem;
    margin: var(--dnb-space-4xl);
}
.margin-horizontal-2xs {
    margin-left: 0.51rem;
    margin-left: var(--dnb-space-2xs);
    margin-right: 0.51rem;
    margin-right: var(--dnb-space-2xs);
}
.margin-horizontal-xs {
    margin-left: 0.64rem;
    margin-left: var(--dnb-space-xs);
    margin-right: 0.64rem;
    margin-right: var(--dnb-space-xs);
}
.margin-horizontal-s {
    margin-left: 0.8rem;
    margin-left: var(--dnb-space-s);
    margin-right: 0.8rem;
    margin-right: var(--dnb-space-s);
}
.margin-horizontal-m {
    margin-left: 1rem;
    margin-left: var(--dnb-space-m);
    margin-right: 1rem;
    margin-right: var(--dnb-space-m);
}
.margin-horizontal-l {
    margin-left: 1.25rem;
    margin-left: var(--dnb-space-l);
    margin-right: 1.25rem;
    margin-right: var(--dnb-space-l);
}
.margin-horizontal-xl {
    margin-left: 1.56rem;
    margin-left: var(--dnb-space-xl);
    margin-right: 1.56rem;
    margin-right: var(--dnb-space-xl);
}
.margin-horizontal-2xl {
    margin-left: 1.95rem;
    margin-left: var(--dnb-space-2xl);
    margin-right: 1.95rem;
    margin-right: var(--dnb-space-2xl);
}
.margin-horizontal-3xl {
    margin-left: 2.44rem;
    margin-left: var(--dnb-space-3xl);
    margin-right: 2.44rem;
    margin-right: var(--dnb-space-3xl);
}
.margin-horizontal-4xl {
    margin-left: 3.05rem;
    margin-left: var(--dnb-space-4xl);
    margin-right: 3.05rem;
    margin-right: var(--dnb-space-4xl);
}
.margin-vertical-2xs {
    margin-top: 0.51rem;
    margin-top: var(--dnb-space-2xs);
    margin-bottom: 0.51rem;
    margin-bottom: var(--dnb-space-2xs);
}
.margin-vertical-xs {
    margin-top: 0.64rem;
    margin-top: var(--dnb-space-xs);
    margin-bottom: 0.64rem;
    margin-bottom: var(--dnb-space-xs);
}
.margin-vertical-s {
    margin-top: 0.8rem;
    margin-top: var(--dnb-space-s);
    margin-bottom: 0.8rem;
    margin-bottom: var(--dnb-space-s);
}
.margin-vertical-m {
    margin-top: 1rem;
    margin-top: var(--dnb-space-m);
    margin-bottom: 1rem;
    margin-bottom: var(--dnb-space-m);
}
.margin-vertical-l {
    margin-top: 1.25rem;
    margin-top: var(--dnb-space-l);
    margin-bottom: 1.25rem;
    margin-bottom: var(--dnb-space-l);
}
.margin-vertical-xl {
    margin-top: 1.56rem;
    margin-top: var(--dnb-space-xl);
    margin-bottom: 1.56rem;
    margin-bottom: var(--dnb-space-xl);
}
.margin-vertical-2xl {
    margin-top: 1.95rem;
    margin-top: var(--dnb-space-2xl);
    margin-bottom: 1.95rem;
    margin-bottom: var(--dnb-space-2xl);
}
.margin-vertical-3xl {
    margin-top: 2.44rem;
    margin-top: var(--dnb-space-3xl);
    margin-bottom: 2.44rem;
    margin-bottom: var(--dnb-space-3xl);
}
.margin-vertical-4xl {
    margin-top: 3.05rem;
    margin-top: var(--dnb-space-4xl);
    margin-bottom: 3.05rem;
    margin-bottom: var(--dnb-space-4xl);
}
.margin-top-2xs {
    margin-top: 0.51rem;
    margin-top: var(--dnb-space-2xs);
}
.margin-top-xs {
    margin-top: 0.64rem;
    margin-top: var(--dnb-space-xs);
}
.margin-top-s {
    margin-top: 0.8rem;
    margin-top: var(--dnb-space-s);
}
.margin-top-m {
    margin-top: 1rem;
    margin-top: var(--dnb-space-m);
}
.margin-top-l {
    margin-top: 1.25rem;
    margin-top: var(--dnb-space-l);
}
.margin-top-xl {
    margin-top: 1.56rem;
    margin-top: var(--dnb-space-xl);
}
.margin-top-2xl {
    margin-top: 1.95rem;
    margin-top: var(--dnb-space-2xl);
}
.margin-top-3xl {
    margin-top: 2.44rem;
    margin-top: var(--dnb-space-3xl);
}
.margin-top-4xl {
    margin-top: 3.05rem;
    margin-top: var(--dnb-space-4xl);
}
.margin-right-2xs {
    margin-right: 0.51rem;
    margin-right: var(--dnb-space-2xs);
}
.margin-right-xs {
    margin-right: 0.64rem;
    margin-right: var(--dnb-space-xs);
}
.margin-right-s {
    margin-right: 0.8rem;
    margin-right: var(--dnb-space-s);
}
.margin-right-m {
    margin-right: 1rem;
    margin-right: var(--dnb-space-m);
}
.margin-right-l {
    margin-right: 1.25rem;
    margin-right: var(--dnb-space-l);
}
.margin-right-xl {
    margin-right: 1.56rem;
    margin-right: var(--dnb-space-xl);
}
.margin-right-2xl {
    margin-right: 1.95rem;
    margin-right: var(--dnb-space-2xl);
}
.margin-right-3xl {
    margin-right: 2.44rem;
    margin-right: var(--dnb-space-3xl);
}
.margin-right-4xl {
    margin-right: 3.05rem;
    margin-right: var(--dnb-space-4xl);
}
.margin-bottom-2xs {
    margin-bottom: 0.51rem;
    margin-bottom: var(--dnb-space-2xs);
}
.margin-bottom-xs {
    margin-bottom: 0.64rem;
    margin-bottom: var(--dnb-space-xs);
}
.margin-bottom-s {
    margin-bottom: 0.8rem;
    margin-bottom: var(--dnb-space-s);
}
.margin-bottom-m {
    margin-bottom: 1rem;
    margin-bottom: var(--dnb-space-m);
}
.margin-bottom-l {
    margin-bottom: 1.25rem;
    margin-bottom: var(--dnb-space-l);
}
.margin-bottom-xl {
    margin-bottom: 1.56rem;
    margin-bottom: var(--dnb-space-xl);
}
.margin-bottom-2xl {
    margin-bottom: 1.95rem;
    margin-bottom: var(--dnb-space-2xl);
}
.margin-bottom-3xl {
    margin-bottom: 2.44rem;
    margin-bottom: var(--dnb-space-3xl);
}
.margin-bottom-4xl {
    margin-bottom: 3.05rem;
    margin-bottom: var(--dnb-space-4xl);
}
.margin-left-2xs {
    margin-left: 0.51rem;
    margin-left: var(--dnb-space-2xs);
}
.margin-left-xs {
    margin-left: 0.64rem;
    margin-left: var(--dnb-space-xs);
}
.margin-left-s {
    margin-left: 0.8rem;
    margin-left: var(--dnb-space-s);
}
.margin-left-m {
    margin-left: 1rem;
    margin-left: var(--dnb-space-m);
}
.margin-left-l {
    margin-left: 1.25rem;
    margin-left: var(--dnb-space-l);
}
.margin-left-xl {
    margin-left: 1.56rem;
    margin-left: var(--dnb-space-xl);
}
.margin-left-2xl {
    margin-left: 1.95rem;
    margin-left: var(--dnb-space-2xl);
}
.margin-left-3xl {
    margin-left: 2.44rem;
    margin-left: var(--dnb-space-3xl);
}
.margin-left-4xl {
    margin-left: 3.05rem;
    margin-left: var(--dnb-space-4xl);
}
/* Border Radius */
.radius-xs {
    border-radius: var(--dnb-radius-xs);
}
.radius-s {
    border-radius: var(--dnb-radius-s);
}
.radius-m {
    border-radius: var(--dnb-radius-m);
}
.radius-l {
    border-radius: var(--dnb-radius-l);
}
.radius-xl {
    border-radius: var(--dnb-radius-xl);
}
.radius-full {
    border-radius: var(--dnb-radius-full);
}
/* Borders */
.border {
    border-width: 1px;
    border-style: solid;
}
.border-left {
    border-left-width: 1px;
    border-left-style: solid;
}
.border-right {
    border-right-width: 1px;
    border-right-style: solid;
}
.border-top {
    border-top-width: 1px;
    border-top-style: solid;
}
.border-bottom {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
/* Shadows */
.shadow-xs {
    box-shadow: var(--dnb-shadow-xs);
}
.shadow-s {
    box-shadow: var(--dnb-shadow-s);
}
.shadow-m {
    box-shadow: var(--dnb-shadow-m);
}
.shadow-l {
    box-shadow: var(--dnb-shadow-l);
}
.shadow-xl {
    box-shadow: var(--dnb-shadow-xl);
}
/* Opacity */
.opacity-0 {
    opacity: 0;
}
.opacity-10 {
    opacity: 0.1;
}
.opacity-20 {
    opacity: 0.2;
}
.opacity-30 {
    opacity: 0.3;
}
.opacity-40 {
    opacity: 0.4;
}
.opacity-50 {
    opacity: 0.5;
}
.opacity-60 {
    opacity: 0.6;
}
.opacity-70 {
    opacity: 0.7;
}
.opacity-80 {
    opacity: 0.8;
}
.opacity-90 {
    opacity: 0.9;
}
.opacity-100 {
    opacity: 1;
}
/* Aspect Ratios */
.aspect-1 {
    aspect-ratio: 1;
}
.aspect-4-3 {
    aspect-ratio: 4 / 3;
}
.aspect-3-4 {
    aspect-ratio: 3 / 4;
}
.aspect-3-2 {
    aspect-ratio: 3 / 2;
}
.aspect-2-3 {
    aspect-ratio: 2 / 3;
}
.aspect-16-9 {
    aspect-ratio: 16 / 9;
}
.aspect-9-16 {
    aspect-ratio: 9 / 16;
}
/* Image Fit */
.fit-contain {
    object-fit: contain;
}
.fit-cover {
    object-fit: cover;
}
.fit-fill {
    object-fit: fill;
}
/* Utilities */
.display-none {
    display: none;
}
.visible {
    visibility: visible;
}
.hidden {
    visibility: hidden;
}
.overflow-hidden {
    overflow: hidden;
}
.overflow-auto {
    overflow: auto;
}
.overflow-x-hidden {
    overflow-x: hidden;
}
.overflow-x-auto {
    overflow-x: auto;
}
.overflow-y-hidden {
    overflow-y: hidden;
}
.overflow-y-auto {
    overflow-y: auto;
}
.list-none {
    list-style-type: none;
}
.white-space-nowrap {
    white-space: nowrap;
}
.transition-global {
    transition: all 0.3s;
}