@charset "UTF-8";
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/*  3 Elements
 *  Unclassed HTML elements (type selectors)
 *  We don't use these modules inside the DCI currently.
 *  
=========================================================== */
/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *	    Toplevel global scoped root and variables
 *      
 *	[1] Ensures if applied to a html element, that the page always fills at least the entire height of the viewport.
 *	[2] Disable horizontal scroll
 *  [3] Creates color palette custom properties (CSS variables)
 *	[4] Make sure 'font-size', 'line-height' & 'font-family' are set separately because of rounding errors with line-height
 *	[5]	Browser reset all margins.
 *	[6]	Set web component cxco-root to a default block display.

 ===================================================================================== */
.cxco-html {
  height: 100%;
  /*[1]*/
}

.cxco-body {
  overflow-x: hidden;
  /*[2]*/
  min-height: 100%;
  margin: 0;
  padding: 0;
}

cxco-root {
  --cxco-primary-inverted: hsla(0, 0%, calc((var(--cxco-primary-l) - var(--cxco-threshold)) * -100), var(--cxco-primary-contrast, 1));
  --cxco-primary-h: 210;
  --cxco-primary-s: 100%;
  --cxco-primary-l: 50%;
  --cxco-primary: hsl(var(--cxco-primary-h), var(--cxco-primary-s), var(--cxco-primary-l));
  --cxco-primary-dark-inverted: hsla(0, 0%, calc((var(--cxco-primary-dark-l) - var(--cxco-threshold)) * -100), var(--cxco-primary-dark-contrast, 1));
  --cxco-primary-dark-h: var(--cxco-primary-h);
  --cxco-primary-dark-s: var(--cxco-primary-s);
  --cxco-primary-dark-l: calc(var(--cxco-primary-l) - (var(--cxco-offset, 1) * var(--cxco-ratio, 1)) * 10%);
  --cxco-primary-dark: hsl(var(--cxco-primary-dark-h), var(--cxco-primary-dark-s), var(--cxco-primary-dark-l));
  --cxco-primary-light-inverted: hsla(0, 0%, calc((var(--cxco-primary-light-l) - var(--cxco-threshold)) * -100), var(--cxco-primary-light-contrast, 1));
  --cxco-primary-light-h: var(--cxco-primary-h);
  --cxco-primary-light-s: var(--cxco-primary-s);
  --cxco-primary-light-l: calc(var(--cxco-primary-l) + (var(--cxco-offset, 1) * var(--cxco-ratio, 1)) * 10%);
  --cxco-primary-light: hsl(var(--cxco-primary-light-h), var(--cxco-primary-light-s), var(--cxco-primary-light-l));
  --cxco-neutral-inverted: hsla(0, 0%, calc((var(--cxco-neutral-l) - var(--cxco-threshold)) * -100), var(--cxco-neutral-contrast, 1));
  --cxco-neutral-h: 204.00133;
  --cxco-neutral-s: 0%;
  --cxco-neutral-l: 99%;
  --cxco-neutral: hsl(var(--cxco-neutral-h), var(--cxco-neutral-s), var(--cxco-neutral-l));
  --cxco-neutral-dark-inverted: hsla(0, 0%, calc((var(--cxco-neutral-dark-l) - var(--cxco-threshold)) * -100), var(--cxco-neutral-dark-contrast, 1));
  --cxco-neutral-dark-h: var(--cxco-neutral-h);
  --cxco-neutral-dark-s: var(--cxco-neutral-s);
  --cxco-neutral-dark-l: calc(var(--cxco-neutral-l) - (var(--cxco-offset, 1) * var(--cxco-ratio, 1)) * 10%);
  --cxco-neutral-dark: hsl(var(--cxco-neutral-dark-h), var(--cxco-neutral-dark-s), var(--cxco-neutral-dark-l));
  --cxco-neutral-light-inverted: hsla(0, 0%, calc((var(--cxco-neutral-light-l) - var(--cxco-threshold)) * -100), var(--cxco-neutral-light-contrast, 1));
  --cxco-neutral-light-h: var(--cxco-neutral-h);
  --cxco-neutral-light-s: var(--cxco-neutral-s);
  --cxco-neutral-light-l: calc(var(--cxco-neutral-l) + (var(--cxco-offset, 1) * var(--cxco-ratio, 1)) * 10%);
  --cxco-neutral-light: hsl(var(--cxco-neutral-light-h), var(--cxco-neutral-light-s), var(--cxco-neutral-light-l));
  --cxco-neutral-x-dark-inverted: hsla(0, 0%, calc((var(--cxco-neutral-x-dark-l) - var(--cxco-threshold)) * -100), var(--cxco-neutral-x-dark-contrast, 1));
  --cxco-neutral-x-dark-h: var(--cxco-neutral-h);
  --cxco-neutral-x-dark-s: var(--cxco-neutral-s);
  --cxco-neutral-x-dark-l: calc(var(--cxco-neutral-l) - (var(--cxco-offset, 1) * var(--cxco-ratio, 1)) * 20%);
  --cxco-neutral-x-dark: hsl(var(--cxco-neutral-x-dark-h), var(--cxco-neutral-x-dark-s), var(--cxco-neutral-x-dark-l));
  --cxco-neutral-x-light-inverted: hsla(0, 0%, calc((var(--cxco-neutral-x-light-l) - var(--cxco-threshold)) * -100), var(--cxco-neutral-x-light-contrast, 1));
  --cxco-neutral-x-light-h: var(--cxco-neutral-h);
  --cxco-neutral-x-light-s: var(--cxco-neutral-s);
  --cxco-neutral-x-light-l: calc(var(--cxco-neutral-l) + (var(--cxco-offset, 1) * var(--cxco-ratio, 1)) * 20%);
  --cxco-neutral-x-light: hsl(var(--cxco-neutral-x-light-h), var(--cxco-neutral-x-light-s), var(--cxco-neutral-x-light-l));
  --cxco-green-inverted: hsla(0, 0%, calc((var(--cxco-green-l) - var(--cxco-threshold)) * -100), var(--cxco-green-contrast, 1));
  --cxco-green-h: 154;
  --cxco-green-s: 69%;
  --cxco-green-l: 55%;
  --cxco-green: hsl(var(--cxco-green-h), var(--cxco-green-s), var(--cxco-green-l));
  --cxco-orange-inverted: hsla(0, 0%, calc((var(--cxco-orange-l) - var(--cxco-threshold)) * -100), var(--cxco-orange-contrast, 1));
  --cxco-orange-h: 40;
  --cxco-orange-s: 100%;
  --cxco-orange-l: 50%;
  --cxco-orange: hsl(var(--cxco-orange-h), var(--cxco-orange-s), var(--cxco-orange-l));
  --cxco-red-inverted: hsla(0, 0%, calc((var(--cxco-red-l) - var(--cxco-threshold)) * -100), var(--cxco-red-contrast, 1));
  --cxco-red-h: 354;
  --cxco-red-s: 100%;
  --cxco-red-l: 64%;
  --cxco-red: hsl(var(--cxco-red-h), var(--cxco-red-s), var(--cxco-red-l));
  /*[3]*/
  --cxco-ui-font: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  /* <family-name> or a <generic-name> */
  --cxco-primary-font: 'Gotham', sans-serif;
  --cxco-line-height: 1.5;
  --cxco-threshold: 67%;
  --cxco-width: calc(100% - var(--cxco-gutter) * 2);
  --cxco-min-width: 0;
  --cxco-max-width: 25rem;
  --cxco-height: auto;
  --cxco-min-height: 50vh;
  --cxco-max-height: calc(100% - var(--cxco-gutter) * 2);
  --cxco-gutter: 5vmin;
  --cxco-offset: 1;
  --cxco-ratio: 1;
  --cxco-primary-contrast: 1;
  --cxco-neutral-contrast: 0.8;
  --cxco-shadow-hsl: var(--cxco-neutral-x-dark-h), var(--cxco-neutral-x-dark-s), calc(var(--cxco-neutral-x-dark-l) - 40%);
  --cxco-shadow-elevation: 3;
  --cxco-shadow-alpha: 1;
  --cxco-avatar-url: url('https://www.cm.com/app/aurora/svg/apps/chatbot.svg');
  --cxco-ui-spacing: 16px;
  --cxco-border-radius: calc(1rem + calc(var(--cxco-ui-spacing) / 2));
  font-size: var(--cxco-font-size, 12px);
  font-size: var(--cxco-font-size, 0.75rem);
  font-family: var(--cxco-ui-font);
  line-height: var(--cxco-line-height, 1.5);
  /*[4]*/
  display: block;
  /*[5]*/
  color: var(--cxco-neutral-inverted);
  background-color: var(--cxco-neutral);
  box-sizing: border-box;
  scroll-behavior: smooth;
  /*[5]*/
  /* Set the default selection */
  /* Apply clear focus to all focusable elements to improve UX */
  /* Overwrite default focus as in Aurora. Bad news for accessibility, but it looks nice. */
  /* Set the default anchors*/
  /* Apply extensions for anchors, except when it contains image content */
}

cxco-root[data-theme='dark'] {
  --cxco-neutral-l: 9%;
  --cxco-neutral-s: 30%;
  --cxco-neutral-h: 180;
  --cxco-primary-l: 49%;
  --cxco-primary-s: 97%;
  --cxco-primary-h: 184;
  --cxco-threshold: 39%;
  --cxco-primary-contrast: 1;
  --cxco-neutral-contrast: 0.9;
}

cxco-root[data-theme='dark'] svg:not([class='cxco-c-logo__icon']) path {
  fill: var(--cxco-neutral-inverted);
}

cxco-root *, cxco-root *:before, cxco-root *:after {
  box-sizing: inherit;
}

cxco-root blockquote,
cxco-root dl,
cxco-root dd,
cxco-root ol,
cxco-root ul,
cxco-root h1,
cxco-root h2,
cxco-root h3,
cxco-root h4,
cxco-root h5,
cxco-root h6,
cxco-root p,
cxco-root pre,
cxco-root fieldset,
cxco-root figure,
cxco-root hr {
  color: var(--cxco-neutral-inverted);
  margin: 0;
}

cxco-root fieldset,
cxco-root ol,
cxco-root ul {
  padding: 0;
}

cxco-root iframe,
cxco-root fieldset {
  border: 0;
}

cxco-root code,
cxco-root kbd,
cxco-root pre,
cxco-root samp {
  font-family: monospace, monospace;
}

cxco-root pre {
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(5px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  display: inline-block;
  padding: calc(var(--cxco-ui-spacing, 16px)/ 2);
  color: var(--cxco-neutral-inverted);
  background-color: var(--cxco-neutral);
  white-space: pre-wrap;
  word-break: break-word;
}

cxco-root hr {
  border: 0;
  border-top: 1px solid var(--cxco-neutral);
}

cxco-root code {
  color: var(--cxco-primary-dark);
  background: var(--cxco-neutral);
  padding: 2px 6px;
  border-radius: var(--cxco-border-radius, 6px);
}

cxco-root blockquote {
  font-size: var(--cxco-font-size, 32px);
  font-size: var(--cxco-font-size, 2rem);
  font-family: var(--cxco-ui-font);
  line-height: var(--cxco-line-height, 1.5);
  quotes: '“' '”' '‘' '’';
  padding: var(--cxco-ui-spacing, 16px);
  color: var(--cxco-primary);
}

cxco-root blockquote::before {
  content: open-quote;
  font-family: 'serif';
}

cxco-root blockquote::after {
  content: close-quote;
  font-family: 'serif';
}

cxco-root blockquote p {
  display: inline;
}

cxco-root ::-moz-selection {
  background: var(--cxco-neutral-dark-inverted);
  color: var(--cxco-neutral-dark);
  text-shadow: none;
}

cxco-root ::selection {
  background: var(--cxco-neutral-dark-inverted);
  color: var(--cxco-neutral-dark);
  text-shadow: none;
}

cxco-root *:focus {
  outline-width: 0;
}

cxco-root a {
  --cxco-a--color: var(--cxco-primary);
  --cxco-a--color-active: var(--cxco-primary-dark);
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: normal;
  word-break: break-word;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  color: var(--cxco-a--color);
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

cxco-root a:hover {
  color: var(--cxco-a--color-active);
  /*[3]*/
}

cxco-root a:focus {
  color: var(--cxco-a--color-active);
  /*[3]*/
}

cxco-root a:not([data-img~='true'])[href$='.pdf']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.pdf']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDQzRCNEM7IiBkPSJNMTkuNTE0LDMzLjMyNEwxOS41MTQsMzMuMzI0Yy0wLjM0OCwwLTAuNjgyLTAuMTEzLTAuOTY3LTAuMzI2ICAgYy0xLjA0MS0wLjc4MS0xLjE4MS0xLjY1LTEuMTE1LTIuMjQyYzAuMTgyLTEuNjI4LDIuMTk1LTMuMzMyLDUuOTg1LTUuMDY4YzEuNTA0LTMuMjk2LDIuOTM1LTcuMzU3LDMuNzg4LTEwLjc1ICAgYy0wLjk5OC0yLjE3Mi0xLjk2OC00Ljk5LTEuMjYxLTYuNjQzYzAuMjQ4LTAuNTc5LDAuNTU3LTEuMDIzLDEuMTM0LTEuMjE1YzAuMjI4LTAuMDc2LDAuODA0LTAuMTcyLDEuMDE2LTAuMTcyICAgYzAuNTA0LDAsMC45NDcsMC42NDksMS4yNjEsMS4wNDljMC4yOTUsMC4zNzYsMC45NjQsMS4xNzMtMC4zNzMsNi44MDJjMS4zNDgsMi43ODQsMy4yNTgsNS42Miw1LjA4OCw3LjU2MiAgIGMxLjMxMS0wLjIzNywyLjQzOS0wLjM1OCwzLjM1OC0wLjM1OGMxLjU2NiwwLDIuNTE1LDAuMzY1LDIuOTAyLDEuMTE3YzAuMzIsMC42MjIsMC4xODksMS4zNDktMC4zOSwyLjE2ICAgYy0wLjU1NywwLjc3OS0xLjMyNSwxLjE5MS0yLjIyLDEuMTkxYy0xLjIxNiwwLTIuNjMyLTAuNzY4LTQuMjExLTIuMjg1Yy0yLjgzNywwLjU5My02LjE1LDEuNjUxLTguODI4LDIuODIyICAgYy0wLjgzNiwxLjc3NC0xLjYzNywzLjIwMy0yLjM4Myw0LjI1MUMyMS4yNzMsMzIuNjU0LDIwLjM4OSwzMy4zMjQsMTkuNTE0LDMzLjMyNHogTTIyLjE3NiwyOC4xOTggICBjLTIuMTM3LDEuMjAxLTMuMDA4LDIuMTg4LTMuMDcxLDIuNzQ0Yy0wLjAxLDAuMDkyLTAuMDM3LDAuMzM0LDAuNDMxLDAuNjkyQzE5LjY4NSwzMS41ODcsMjAuNTU1LDMxLjE5LDIyLjE3NiwyOC4xOTh6ICAgIE0zNS44MTMsMjMuNzU2YzAuODE1LDAuNjI3LDEuMDE0LDAuOTQ0LDEuNTQ3LDAuOTQ0YzAuMjM0LDAsMC45MDEtMC4wMSwxLjIxLTAuNDQxYzAuMTQ5LTAuMjA5LDAuMjA3LTAuMzQzLDAuMjMtMC40MTUgICBjLTAuMTIzLTAuMDY1LTAuMjg2LTAuMTk3LTEuMTc1LTAuMTk3QzM3LjEyLDIzLjY0OCwzNi40ODUsMjMuNjcsMzUuODEzLDIzLjc1NnogTTI4LjM0MywxNy4xNzQgICBjLTAuNzE1LDIuNDc0LTEuNjU5LDUuMTQ1LTIuNjc0LDcuNTY0YzIuMDktMC44MTEsNC4zNjItMS41MTksNi40OTYtMi4wMkMzMC44MTUsMjEuMTUsMjkuNDY2LDE5LjE5MiwyOC4zNDMsMTcuMTc0eiAgICBNMjcuNzM2LDguNzEyYy0wLjA5OCwwLjAzMy0xLjMzLDEuNzU3LDAuMDk2LDMuMjE2QzI4Ljc4MSw5LjgxMywyNy43NzksOC42OTgsMjcuNzM2LDguNzEyeiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6I0NDNEI0QzsiIGQ9Ik00OC4wMzcsNTZINy45NjNDNy4xNTUsNTYsNi41LDU1LjM0NSw2LjUsNTQuNTM3VjM5aDQzdjE1LjUzN0M0OS41LDU1LjM0NSw0OC44NDUsNTYsNDguMDM3LDU2eiIvPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGQ9Ik0xNy4zODUsNTNoLTEuNjQxVjQyLjkyNGgyLjg5OGMwLjQyOCwwLDAuODUyLDAuMDY4LDEuMjcxLDAuMjA1ICAgIGMwLjQxOSwwLjEzNywwLjc5NSwwLjM0MiwxLjEyOCwwLjYxNWMwLjMzMywwLjI3MywwLjYwMiwwLjYwNCwwLjgwNywwLjk5MXMwLjMwOCwwLjgyMiwwLjMwOCwxLjMwNiAgICBjMCwwLjUxMS0wLjA4NywwLjk3My0wLjI2LDEuMzg4Yy0wLjE3MywwLjQxNS0wLjQxNSwwLjc2NC0wLjcyNSwxLjA0NmMtMC4zMSwwLjI4Mi0wLjY4NCwwLjUwMS0xLjEyMSwwLjY1NiAgICBzLTAuOTIxLDAuMjMyLTEuNDQ5LDAuMjMyaC0xLjIxN1Y1M3ogTTE3LjM4NSw0NC4xNjh2My45OTJoMS41MDRjMC4yLDAsMC4zOTgtMC4wMzQsMC41OTUtMC4xMDMgICAgYzAuMTk2LTAuMDY4LDAuMzc2LTAuMTgsMC41NC0wLjMzNWMwLjE2NC0wLjE1NSwwLjI5Ni0wLjM3MSwwLjM5Ni0wLjY0OWMwLjEtMC4yNzgsMC4xNS0wLjYyMiwwLjE1LTEuMDMyICAgIGMwLTAuMTY0LTAuMDIzLTAuMzU0LTAuMDY4LTAuNTY3Yy0wLjA0Ni0wLjIxNC0wLjEzOS0wLjQxOS0wLjI4LTAuNjE1Yy0wLjE0Mi0wLjE5Ni0wLjM0LTAuMzYtMC41OTUtMC40OTIgICAgYy0wLjI1NS0wLjEzMi0wLjU5My0wLjE5OC0xLjAxMi0wLjE5OEgxNy4zODV6Ii8+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGQ9Ik0zMi4yMTksNDcuNjgyYzAsMC44MjktMC4wODksMS41MzgtMC4yNjcsMi4xMjZzLTAuNDAzLDEuMDgtMC42NzcsMS40NzdzLTAuNTgxLDAuNzA5LTAuOTIzLDAuOTM3ICAgIHMtMC42NzIsMC4zOTgtMC45OTEsMC41MTNjLTAuMzE5LDAuMTE0LTAuNjExLDAuMTg3LTAuODc1LDAuMjE5QzI4LjIyMiw1Mi45ODQsMjguMDI2LDUzLDI3Ljg5OCw1M2gtMy44MTRWNDIuOTI0aDMuMDM1ICAgIGMwLjg0OCwwLDEuNTkzLDAuMTM1LDIuMjM1LDAuNDAzczEuMTc2LDAuNjI3LDEuNiwxLjA3M3MwLjc0LDAuOTU1LDAuOTUsMS41MjRDMzIuMTE0LDQ2LjQ5NCwzMi4yMTksNDcuMDgsMzIuMjE5LDQ3LjY4MnogICAgIE0yNy4zNTIsNTEuNzk3YzEuMTEyLDAsMS45MTQtMC4zNTUsMi40MDYtMS4wNjZzMC43MzgtMS43NDEsMC43MzgtMy4wOWMwLTAuNDE5LTAuMDUtMC44MzQtMC4xNS0xLjI0NCAgICBjLTAuMTAxLTAuNDEtMC4yOTQtMC43ODEtMC41ODEtMS4xMTRzLTAuNjc3LTAuNjAyLTEuMTY5LTAuODA3cy0xLjEzLTAuMzA4LTEuOTE0LTAuMzA4aC0wLjk1N3Y3LjYyOUgyNy4zNTJ6Ii8+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGQ9Ik0zNi4yNjYsNDQuMTY4djMuMTcyaDQuMjExdjEuMTIxaC00LjIxMVY1M2gtMS42NjhWNDIuOTI0SDQwLjl2MS4yNDRIMzYuMjY2eiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

cxco-root a:not([data-img~='true'])[href$='.js']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.js']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNFRUFGNEI7IiBkPSJNNDguMDM3LDU2SDcuOTYzQzcuMTU1LDU2LDYuNSw1NS4zNDUsNi41LDU0LjUzN1YzOWg0M3YxNS41MzdDNDkuNSw1NS4zNDUsNDguODQ1LDU2LDQ4LjAzNyw1NnoiLz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMjYuMDIxLDQyLjcxOXY3Ljg0OGMwLDAuNDc0LTAuMDg3LDAuODczLTAuMjYsMS4xOTZjLTAuMTc0LDAuMzIzLTAuNDA2LDAuNTgzLTAuNjk3LDAuNzc5ICAgIGMtMC4yOTIsMC4xOTYtMC42MjcsMC4zMzMtMS4wMDUsMC40MXMtMC43NjksMC4xMTYtMS4xNjksMC4xMTZjLTAuMjAxLDAtMC40MzYtMC4wMjEtMC43MDQtMC4wNjJzLTAuNTQ3LTAuMTA0LTAuODM0LTAuMTkxICAgIHMtMC41NjMtMC4xODUtMC44MjctMC4yOTRjLTAuMjY1LTAuMTA5LTAuNDg4LTAuMjMyLTAuNjctMC4zNjlsMC42OTctMS4xMDdjMC4wOTEsMC4wNjMsMC4yMjEsMC4xMywwLjM5LDAuMTk4ICAgIHMwLjM1MywwLjEzMiwwLjU1NCwwLjE5MWMwLjIsMC4wNiwwLjQxLDAuMTExLDAuNjI5LDAuMTU3czAuNDI0LDAuMDY4LDAuNjE1LDAuMDY4YzAuNDgyLDAsMC44NjgtMC4wOTQsMS4xNTUtMC4yOCAgICBzMC40MzktMC41MDQsMC40NTgtMC45NXYtNy43MTFIMjYuMDIxeiIvPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMzQuMTg0LDUwLjIzOGMwLDAuMzY0LTAuMDc1LDAuNzE4LTAuMjI2LDEuMDZzLTAuMzYyLDAuNjQzLTAuNjM2LDAuOTAycy0wLjYxMSwwLjQ2Ny0xLjAxMiwwLjYyMiAgICBjLTAuNDAxLDAuMTU1LTAuODU3LDAuMjMyLTEuMzY3LDAuMjMyYy0wLjIxOSwwLTAuNDQ0LTAuMDEyLTAuNjc3LTAuMDM0cy0wLjQ2OC0wLjA2Mi0wLjcwNC0wLjExNiAgICBjLTAuMjM3LTAuMDU1LTAuNDYzLTAuMTMtMC42NzctMC4yMjZzLTAuMzk5LTAuMjEyLTAuNTU0LTAuMzQ5bDAuMjg3LTEuMTc2YzAuMTI3LDAuMDczLDAuMjg5LDAuMTQ0LDAuNDg1LDAuMjEyICAgIHMwLjM5OCwwLjEzMiwwLjYwOCwwLjE5MWMwLjIwOSwwLjA2LDAuNDE5LDAuMTA3LDAuNjI5LDAuMTQ0YzAuMjA5LDAuMDM2LDAuNDA1LDAuMDU1LDAuNTg4LDAuMDU1YzAuNTU2LDAsMC45ODItMC4xMywxLjI3OC0wLjM5ICAgIHMwLjQ0NC0wLjY0NSwwLjQ0NC0xLjE1NWMwLTAuMzEtMC4xMDUtMC41NzQtMC4zMTQtMC43OTNjLTAuMjEtMC4yMTktMC40NzItMC40MTctMC43ODYtMC41OTVzLTAuNjU0LTAuMzU1LTEuMDE5LTAuNTMzICAgIGMtMC4zNjUtMC4xNzgtMC43MDctMC4zODgtMS4wMjUtMC42MjljLTAuMzE5LTAuMjQxLTAuNTg0LTAuNTI2LTAuNzkzLTAuODU0Yy0wLjIxLTAuMzI4LTAuMzE0LTAuNzM4LTAuMzE0LTEuMjMgICAgYzAtMC40NDYsMC4wODItMC44NDMsMC4yNDYtMS4xODlzMC4zODUtMC42NDEsMC42NjMtMC44ODJzMC42MDItMC40MjYsMC45NzEtMC41NTRzMC43NTktMC4xOTEsMS4xNjktMC4xOTEgICAgYzAuNDE5LDAsMC44NDMsMC4wMzksMS4yNzEsMC4xMTZjMC40MjgsMC4wNzcsMC43NzQsMC4yMDMsMS4wMzksMC4zNzZjLTAuMDU1LDAuMTE4LTAuMTE5LDAuMjQ4LTAuMTkxLDAuMzkgICAgYy0wLjA3MywwLjE0Mi0wLjE0MiwwLjI3My0wLjIwNSwwLjM5NmMtMC4wNjQsMC4xMjMtMC4xMTksMC4yMjYtMC4xNjQsMC4zMDhjLTAuMDQ2LDAuMDgyLTAuMDczLDAuMTI4LTAuMDgyLDAuMTM3ICAgIGMtMC4wNTUtMC4wMjctMC4xMTYtMC4wNjMtMC4xODUtMC4xMDlzLTAuMTY3LTAuMDkxLTAuMjk0LTAuMTM3Yy0wLjEyOC0wLjA0Ni0wLjI5Ny0wLjA3Ny0wLjUwNi0wLjA5NiAgICBjLTAuMjEtMC4wMTktMC40NzktMC4wMTQtMC44MDcsMC4wMTRjLTAuMTgzLDAuMDE5LTAuMzU1LDAuMDctMC41MiwwLjE1N3MtMC4zMTEsMC4xOTMtMC40MzgsMC4zMjEgICAgYy0wLjEyOCwwLjEyOC0wLjIyOSwwLjI3MS0wLjMwMSwwLjQzMWMtMC4wNzMsMC4xNTktMC4xMDksMC4zMTMtMC4xMDksMC40NThjMCwwLjM2NCwwLjEwNCwwLjY1OCwwLjMxNCwwLjg4MiAgICBjMC4yMDksMC4yMjQsMC40NjksMC40MTksMC43NzksMC41ODhjMC4zMSwwLjE2OSwwLjY0NiwwLjMzMywxLjAxMiwwLjQ5MmMwLjM2NCwwLjE1OSwwLjcwNCwwLjM1NCwxLjAxOSwwLjU4MSAgICBzMC41NzYsMC41MTMsMC43ODYsMC44NTRDMzQuMDc4LDQ5LjI2MSwzNC4xODQsNDkuNywzNC4xODQsNTAuMjM4eiIvPgoJPC9nPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0VFQUY0QjsiIGQ9Ik0xOS41LDE5di00YzAtMC41NTEsMC40NDgtMSwxLTFjMC41NTMsMCwxLTAuNDQ4LDEtMXMtMC40NDctMS0xLTFjLTEuNjU0LDAtMywxLjM0Ni0zLDN2NCAgICBjMCwxLjEwMy0wLjg5NywyLTIsMmMtMC41NTMsMC0xLDAuNDQ4LTEsMXMwLjQ0NywxLDEsMWMxLjEwMywwLDIsMC44OTcsMiwydjRjMCwxLjY1NCwxLjM0NiwzLDMsM2MwLjU1MywwLDEtMC40NDgsMS0xICAgIHMtMC40NDctMS0xLTFjLTAuNTUyLDAtMS0wLjQ0OS0xLTF2LTRjMC0xLjItMC41NDItMi4yNjYtMS4zODItM0MxOC45NTgsMjEuMjY2LDE5LjUsMjAuMiwxOS41LDE5eiIvPgoJCTxjaXJjbGUgc3R5bGU9ImZpbGw6I0VFQUY0QjsiIGN4PSIyNy41IiBjeT0iMTguNSIgcj0iMS41Ii8+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0VFQUY0QjsiIGQ9Ik0zOS41LDIxYy0xLjEwMywwLTItMC44OTctMi0ydi00YzAtMS42NTQtMS4zNDYtMy0zLTNjLTAuNTUzLDAtMSwwLjQ0OC0xLDFzMC40NDcsMSwxLDEgICAgYzAuNTUyLDAsMSwwLjQ0OSwxLDF2NGMwLDEuMiwwLjU0MiwyLjI2NiwxLjM4MiwzYy0wLjg0LDAuNzM0LTEuMzgyLDEuOC0xLjM4MiwzdjRjMCwwLjU1MS0wLjQ0OCwxLTEsMWMtMC41NTMsMC0xLDAuNDQ4LTEsMSAgICBzMC40NDcsMSwxLDFjMS42NTQsMCwzLTEuMzQ2LDMtM3YtNGMwLTEuMTAzLDAuODk3LTIsMi0yYzAuNTUzLDAsMS0wLjQ0OCwxLTFTNDAuMDUzLDIxLDM5LjUsMjF6Ii8+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0VFQUY0QjsiIGQ9Ik0yNy41LDI0Yy0wLjU1MywwLTEsMC40NDgtMSwxdjNjMCwwLjU1MiwwLjQ0NywxLDEsMXMxLTAuNDQ4LDEtMXYtMyAgICBDMjguNSwyNC40NDgsMjguMDUzLDI0LDI3LjUsMjR6Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
}

cxco-root a:not([data-img~='true'])[href$='.png']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.png']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojNjU5QzM1OyIgZD0iTTQ4LjAzNyw1Nkg3Ljk2M0M3LjE1NSw1Niw2LjUsNTUuMzQ1LDYuNSw1NC41MzdWMzloNDN2MTUuNTM3QzQ5LjUsNTUuMzQ1LDQ4Ljg0NSw1Niw0OC4wMzcsNTZ6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMTcuMzg1LDUzaC0xLjY0MVY0Mi45MjRoMi44OThjMC40MjgsMCwwLjg1MiwwLjA2OCwxLjI3MSwwLjIwNSAgICBjMC40MTksMC4xMzcsMC43OTUsMC4zNDIsMS4xMjgsMC42MTVjMC4zMzMsMC4yNzMsMC42MDIsMC42MDQsMC44MDcsMC45OTFzMC4zMDgsMC44MjIsMC4zMDgsMS4zMDYgICAgYzAsMC41MTEtMC4wODcsMC45NzMtMC4yNiwxLjM4OGMtMC4xNzMsMC40MTUtMC40MTUsMC43NjQtMC43MjUsMS4wNDZjLTAuMzEsMC4yODItMC42ODQsMC41MDEtMS4xMjEsMC42NTYgICAgcy0wLjkyMSwwLjIzMi0xLjQ0OSwwLjIzMmgtMS4yMTdWNTN6IE0xNy4zODUsNDQuMTY4djMuOTkyaDEuNTA0YzAuMiwwLDAuMzk4LTAuMDM0LDAuNTk1LTAuMTAzICAgIGMwLjE5Ni0wLjA2OCwwLjM3Ni0wLjE4LDAuNTQtMC4zMzVjMC4xNjQtMC4xNTUsMC4yOTYtMC4zNzEsMC4zOTYtMC42NDljMC4xLTAuMjc4LDAuMTUtMC42MjIsMC4xNS0xLjAzMiAgICBjMC0wLjE2NC0wLjAyMy0wLjM1NC0wLjA2OC0wLjU2N2MtMC4wNDYtMC4yMTQtMC4xMzktMC40MTktMC4yOC0wLjYxNWMtMC4xNDItMC4xOTYtMC4zNC0wLjM2LTAuNTk1LTAuNDkyICAgIGMtMC4yNTUtMC4xMzItMC41OTMtMC4xOTgtMS4wMTItMC4xOThIMTcuMzg1eiIvPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMzEuMzE2LDQyLjkyNFY1M2gtMS42NjhsLTMuOTUxLTYuOTQ1VjUzaC0xLjY2OFY0Mi45MjRoMS42NjhsMy45NTEsNi45NDV2LTYuOTQ1SDMxLjMxNnoiLz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTQxLjE2LDQ3LjgwNXYzLjg5NmMtMC4yMSwwLjI2NS0wLjQ0NCwwLjQ4LTAuNzA0LDAuNjQ5cy0wLjUzMywwLjMwOC0wLjgyLDAuNDE3ICAgIFMzOS4wNTIsNTIuOTU0LDM4Ljc0Nyw1M2MtMC4zMDYsMC4wNDYtMC42MDgsMC4wNjgtMC45MDksMC4wNjhjLTAuNjAyLDAtMS4xNTUtMC4xMDktMS42NjEtMC4zMjhzLTAuOTQ4LTAuNTQyLTEuMzI2LTAuOTcxICAgIGMtMC4zNzgtMC40MjktMC42NzUtMC45NjYtMC44ODktMS42MTNjLTAuMjE0LTAuNjQ3LTAuMzIxLTEuMzk1LTAuMzIxLTIuMjQyczAuMTA3LTEuNTkzLDAuMzIxLTIuMjM1ICAgIGMwLjIxNC0wLjY0MywwLjUxLTEuMTc4LDAuODg5LTEuNjA2YzAuMzc4LTAuNDI5LDAuODIyLTAuNzU0LDEuMzMzLTAuOTc4YzAuNTEtMC4yMjQsMS4wNjItMC4zMzUsMS42NTQtMC4zMzUgICAgYzAuNTQ3LDAsMS4wNTcsMC4wOTEsMS41MzEsMC4yNzNjMC40NzQsMC4xODMsMC44OTcsMC40NTYsMS4yNzEsMC44MmwtMS4xMzUsMS4wMTJjLTAuMjE5LTAuMjY1LTAuNDctMC40NTYtMC43NTItMC41NzQgICAgYy0wLjI4My0wLjExOC0wLjU3NC0wLjE3OC0wLjg3NS0wLjE3OGMtMC4zMzcsMC0wLjY1OSwwLjA2My0wLjk2NCwwLjE5MWMtMC4zMDYsMC4xMjgtMC41NzksMC4zNDQtMC44MiwwLjY0OSAgICBjLTAuMjQyLDAuMzA2LTAuNDMxLDAuNjk5LTAuNTY3LDEuMTgzcy0wLjIxLDEuMDc1LTAuMjE5LDEuNzc3YzAuMDA5LDAuNjg0LDAuMDgsMS4yNzYsMC4yMTIsMS43NzcgICAgYzAuMTMyLDAuNTAxLDAuMzE0LDAuOTExLDAuNTQ3LDEuMjNzMC40OTcsMC41NTYsMC43OTMsMC43MTFjMC4yOTYsMC4xNTUsMC42MDgsMC4yMzIsMC45MzcsMC4yMzJjMC4xLDAsMC4yMzQtMC4wMDcsMC40MDMtMC4wMjEgICAgYzAuMTY4LTAuMDE0LDAuMzM3LTAuMDM2LDAuNTA2LTAuMDY4YzAuMTY4LTAuMDMyLDAuMzMtMC4wNzUsMC40ODUtMC4xM2MwLjE1NS0wLjA1NSwwLjI2OS0wLjEzMiwwLjM0Mi0wLjIzMnYtMi40ODhoLTEuNzA5ICAgIHYtMS4xMjFINDEuMTZ6Ii8+Cgk8L2c+Cgk8Y2lyY2xlIHN0eWxlPSJmaWxsOiNGM0Q1NUI7IiBjeD0iMTguOTMxIiBjeT0iMTQuNDMxIiByPSI0LjU2OSIvPgoJPHBvbHlnb24gc3R5bGU9ImZpbGw6Izg4QzA1NzsiIHBvaW50cz0iNi41LDM5IDE3LjUsMzkgNDkuNSwzOSA0OS41LDI4IDM5LjUsMTguNSAyOSwzMCAyMy41MTcsMjQuNTE3ICAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
}

cxco-root a:not([data-img~='true'])[href$='.jpg']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.jpg']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxjaXJjbGUgc3R5bGU9ImZpbGw6I0YzRDU1QjsiIGN4PSIxOC45MzEiIGN5PSIxNC40MzEiIHI9IjQuNTY5Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojMjZCOTlBOyIgcG9pbnRzPSI2LjUsMzkgMTcuNSwzOSA0OS41LDM5IDQ5LjUsMjggMzkuNSwxOC41IDI5LDMwIDIzLjUxNywyNC41MTcgICIvPgoJPHBhdGggc3R5bGU9ImZpbGw6IzE0QTA4NTsiIGQ9Ik00OC4wMzcsNTZINy45NjNDNy4xNTUsNTYsNi41LDU1LjM0NSw2LjUsNTQuNTM3VjM5aDQzdjE1LjUzN0M0OS41LDU1LjM0NSw0OC44NDUsNTYsNDguMDM3LDU2eiIvPgoJPGc+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGQ9Ik0yMS40MjYsNDIuNjV2Ny44NDhjMCwwLjQ3NC0wLjA4NywwLjg3My0wLjI2LDEuMTk2Yy0wLjE3MywwLjMyMy0wLjQwNiwwLjU4My0wLjY5NywwLjc3OSAgICBjLTAuMjkyLDAuMTk2LTAuNjI3LDAuMzMzLTEuMDA1LDAuNDFDMTkuMDg1LDUyLjk2MSwxOC42OTYsNTMsMTguMjk1LDUzYy0wLjIwMSwwLTAuNDM2LTAuMDIxLTAuNzA0LTAuMDYyICAgIGMtMC4yNjktMC4wNDEtMC41NDctMC4xMDQtMC44MzQtMC4xOTFzLTAuNTYzLTAuMTg1LTAuODI3LTAuMjk0Yy0wLjI2NS0wLjEwOS0wLjQ4OC0wLjIzMi0wLjY3LTAuMzY5bDAuNjk3LTEuMTA3ICAgIGMwLjA5MSwwLjA2MywwLjIyMSwwLjEzLDAuMzksMC4xOThjMC4xNjgsMC4wNjgsMC4zNTMsMC4xMzIsMC41NTQsMC4xOTFjMC4yLDAuMDYsMC40MSwwLjExMSwwLjYyOSwwLjE1NyAgICBzMC40MjQsMC4wNjgsMC42MTUsMC4wNjhjMC40ODMsMCwwLjg2OC0wLjA5NCwxLjE1NS0wLjI4czAuNDM5LTAuNTA0LDAuNDU4LTAuOTVWNDIuNjVIMjEuNDI2eiIvPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMjUuNTE0LDUyLjkzMmgtMS42NDFWNDIuODU1aDIuODk4YzAuNDI4LDAsMC44NTIsMC4wNjgsMS4yNzEsMC4yMDUgICAgYzAuNDE5LDAuMTM3LDAuNzk1LDAuMzQyLDEuMTI4LDAuNjE1YzAuMzMzLDAuMjczLDAuNjAyLDAuNjA0LDAuODA3LDAuOTkxczAuMzA4LDAuODIyLDAuMzA4LDEuMzA2ICAgIGMwLDAuNTExLTAuMDg3LDAuOTczLTAuMjYsMS4zODhjLTAuMTczLDAuNDE1LTAuNDE1LDAuNzY0LTAuNzI1LDEuMDQ2Yy0wLjMxLDAuMjgyLTAuNjg0LDAuNTAxLTEuMTIxLDAuNjU2ICAgIHMtMC45MjEsMC4yMzItMS40NDksMC4yMzJoLTEuMjE3VjUyLjkzMnogTTI1LjUxNCw0NC4xdjMuOTkyaDEuNTA0YzAuMiwwLDAuMzk4LTAuMDM0LDAuNTk1LTAuMTAzICAgIGMwLjE5Ni0wLjA2OCwwLjM3Ni0wLjE4LDAuNTQtMC4zMzVzMC4yOTYtMC4zNzEsMC4zOTYtMC42NDljMC4xLTAuMjc4LDAuMTUtMC42MjIsMC4xNS0xLjAzMmMwLTAuMTY0LTAuMDIzLTAuMzU0LTAuMDY4LTAuNTY3ICAgIGMtMC4wNDYtMC4yMTQtMC4xMzktMC40MTktMC4yOC0wLjYxNWMtMC4xNDItMC4xOTYtMC4zNC0wLjM2LTAuNTk1LTAuNDkyQzI3LjUsNDQuMTY2LDI3LjE2Myw0NC4xLDI2Ljc0NCw0NC4xSDI1LjUxNHoiLz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTM5LjUsNDcuNzM2djMuODk2Yy0wLjIxLDAuMjY1LTAuNDQ0LDAuNDgtMC43MDQsMC42NDlzLTAuNTMzLDAuMzA4LTAuODIsMC40MTcgICAgcy0wLjU4MywwLjE4Ny0wLjg4OSwwLjIzMkMzNi43ODEsNTIuOTc4LDM2LjQ3OSw1MywzNi4xNzgsNTNjLTAuNjAyLDAtMS4xNTUtMC4xMDktMS42NjEtMC4zMjhzLTAuOTQ4LTAuNTQyLTEuMzI2LTAuOTcxICAgIGMtMC4zNzgtMC40MjktMC42NzUtMC45NjYtMC44ODktMS42MTNjLTAuMjE0LTAuNjQ3LTAuMzIxLTEuMzk1LTAuMzIxLTIuMjQyczAuMTA3LTEuNTkzLDAuMzIxLTIuMjM1ICAgIGMwLjIxNC0wLjY0MywwLjUxLTEuMTc4LDAuODg5LTEuNjA2YzAuMzc4LTAuNDI5LDAuODIyLTAuNzU0LDEuMzMzLTAuOTc4YzAuNTEtMC4yMjQsMS4wNjItMC4zMzUsMS42NTQtMC4zMzUgICAgYzAuNTQ3LDAsMS4wNTcsMC4wOTEsMS41MzEsMC4yNzNjMC40NzQsMC4xODMsMC44OTcsMC40NTYsMS4yNzEsMC44MmwtMS4xMzUsMS4wMTJjLTAuMjE5LTAuMjY1LTAuNDctMC40NTYtMC43NTItMC41NzQgICAgYy0wLjI4My0wLjExOC0wLjU3NC0wLjE3OC0wLjg3NS0wLjE3OGMtMC4zMzcsMC0wLjY1OSwwLjA2My0wLjk2NCwwLjE5MWMtMC4zMDYsMC4xMjgtMC41NzksMC4zNDQtMC44MiwwLjY0OSAgICBjLTAuMjQyLDAuMzA2LTAuNDMxLDAuNjk5LTAuNTY3LDEuMTgzcy0wLjIxLDEuMDc1LTAuMjE5LDEuNzc3YzAuMDA5LDAuNjg0LDAuMDgsMS4yNzYsMC4yMTIsMS43NzcgICAgYzAuMTMyLDAuNTAxLDAuMzE0LDAuOTExLDAuNTQ3LDEuMjNzMC40OTcsMC41NTYsMC43OTMsMC43MTFjMC4yOTYsMC4xNTUsMC42MDgsMC4yMzIsMC45MzcsMC4yMzJjMC4xLDAsMC4yMzQtMC4wMDcsMC40MDMtMC4wMjEgICAgYzAuMTY4LTAuMDE0LDAuMzM3LTAuMDM2LDAuNTA2LTAuMDY4YzAuMTY4LTAuMDMyLDAuMzMtMC4wNzUsMC40ODUtMC4xM2MwLjE1NS0wLjA1NSwwLjI2OS0wLjEzMiwwLjM0Mi0wLjIzMnYtMi40ODhoLTEuNzA5ICAgIHYtMS4xMjFIMzkuNXoiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
}

cxco-root a:not([data-img~='true'])[href$='.docx']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.docx']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNMTguNSwxM2gtNmMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWg2YzAuNTUyLDAsMSwwLjQ0OCwxLDFTMTkuMDUyLDEzLDE4LjUsMTN6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTIxLjUsMThoLTljLTAuNTUyLDAtMS0wLjQ0OC0xLTFzMC40NDgtMSwxLTFoOWMwLjU1MiwwLDEsMC40NDgsMSwxUzIyLjA1MiwxOCwyMS41LDE4eiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Izg2OTdDQjsiIGQ9Ik0yNS41LDE4Yy0wLjI2LDAtMC41Mi0wLjExLTAuNzEtMC4yOWMtMC4xOC0wLjE5LTAuMjktMC40NS0wLjI5LTAuNzFjMC0wLjI2LDAuMTEtMC41MiwwLjI5LTAuNzEgICBjMC4zNy0wLjM3LDEuMDUtMC4zNywxLjQyLDBjMC4xOCwwLjE5LDAuMjksMC40NSwwLjI5LDAuNzFjMCwwLjI2LTAuMTEsMC41Mi0wLjI5LDAuNzFDMjYuMDIsMTcuODksMjUuNzYsMTgsMjUuNSwxOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNMzcuNSwxOGgtOGMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWg4YzAuNTUyLDAsMSwwLjQ0OCwxLDFTMzguMDUyLDE4LDM3LjUsMTh6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTEyLjUsMzNjLTAuMjYsMC0wLjUyLTAuMTEtMC43MS0wLjI5Yy0wLjE4LTAuMTktMC4yOS0wLjQ1LTAuMjktMC43MWMwLTAuMjYsMC4xMS0wLjUyLDAuMjktMC43MSAgIGMwLjM3LTAuMzcsMS4wNS0wLjM3LDEuNDIsMGMwLjE4LDAuMTksMC4yOSwwLjQ0LDAuMjksMC43MWMwLDAuMjYtMC4xMSwwLjUyLTAuMjksMC43MUMxMy4wMiwzMi44OSwxMi43NiwzMywxMi41LDMzeiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Izg2OTdDQjsiIGQ9Ik0yNC41LDMzaC04Yy0wLjU1MiwwLTEtMC40NDgtMS0xczAuNDQ4LTEsMS0xaDhjMC41NTIsMCwxLDAuNDQ4LDEsMVMyNS4wNTIsMzMsMjQuNSwzM3oiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNNDMuNSwxOGgtMmMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWgyYzAuNTUyLDAsMSwwLjQ0OCwxLDFTNDQuMDUyLDE4LDQzLjUsMTh6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTM0LjUsMjNoLTIyYy0wLjU1MiwwLTEtMC40NDgtMS0xczAuNDQ4LTEsMS0xaDIyYzAuNTUyLDAsMSwwLjQ0OCwxLDFTMzUuMDUyLDIzLDM0LjUsMjN6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTQzLjUsMjNoLTZjLTAuNTUyLDAtMS0wLjQ0OC0xLTFzMC40NDgtMSwxLTFoNmMwLjU1MiwwLDEsMC40NDgsMSwxUzQ0LjA1MiwyMyw0My41LDIzeiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Izg2OTdDQjsiIGQ9Ik0xNi41LDI4aC00Yy0wLjU1MiwwLTEtMC40NDgtMS0xczAuNDQ4LTEsMS0xaDRjMC41NTIsMCwxLDAuNDQ4LDEsMVMxNy4wNTIsMjgsMTYuNSwyOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNMzAuNSwyOGgtMTBjLTAuNTUyLDAtMS0wLjQ0OC0xLTFzMC40NDgtMSwxLTFoMTBjMC41NTIsMCwxLDAuNDQ4LDEsMVMzMS4wNTIsMjgsMzAuNSwyOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNNDMuNSwyOGgtOWMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWg5YzAuNTUyLDAsMSwwLjQ0OCwxLDFTNDQuMDUyLDI4LDQzLjUsMjh6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojMDA5NkU2OyIgZD0iTTQ4LjAzNyw1Nkg3Ljk2M0M3LjE1NSw1Niw2LjUsNTUuMzQ1LDYuNSw1NC41MzdWMzloNDN2MTUuNTM3QzQ5LjUsNTUuMzQ1LDQ4Ljg0NSw1Niw0OC4wMzcsNTZ6Ii8+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTIzLjUsNDcuNjgyYzAsMC44MjktMC4wODksMS41MzgtMC4yNjcsMi4xMjZzLTAuNDAzLDEuMDgtMC42NzcsMS40NzdzLTAuNTgxLDAuNzA5LTAuOTIzLDAuOTM3ICAgIHMtMC42NzIsMC4zOTgtMC45OTEsMC41MTNjLTAuMzE5LDAuMTE0LTAuNjExLDAuMTg3LTAuODc1LDAuMjE5QzE5LjUwMyw1Mi45ODQsMTkuMzA3LDUzLDE5LjE4LDUzaC0zLjgxNFY0Mi45MjRIMTguNCAgICBjMC44NDgsMCwxLjU5MywwLjEzNSwyLjIzNSwwLjQwM3MxLjE3NiwwLjYyNywxLjYsMS4wNzNzMC43NCwwLjk1NSwwLjk1LDEuNTI0QzIzLjM5NSw0Ni40OTQsMjMuNSw0Ny4wOCwyMy41LDQ3LjY4MnogICAgIE0xOC42MzMsNTEuNzk3YzEuMTEyLDAsMS45MTQtMC4zNTUsMi40MDYtMS4wNjZzMC43MzgtMS43NDEsMC43MzgtMy4wOWMwLTAuNDE5LTAuMDUtMC44MzQtMC4xNS0xLjI0NCAgICBjLTAuMTAxLTAuNDEtMC4yOTQtMC43ODEtMC41ODEtMS4xMTRzLTAuNjc3LTAuNjAyLTEuMTY5LTAuODA3cy0xLjEzLTAuMzA4LTEuOTE0LTAuMzA4aC0wLjk1N3Y3LjYyOUgxOC42MzN6Ii8+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGQ9Ik0zMy40NzUsNDcuOTE0YzAsMC44NDgtMC4xMDcsMS41OTUtMC4zMjEsMi4yNDJjLTAuMjE0LDAuNjQ3LTAuNTExLDEuMTg1LTAuODg5LDEuNjEzICAgIGMtMC4zNzgsMC40MjktMC44MiwwLjc1Mi0xLjMyNiwwLjk3MXMtMS4wNiwwLjMyOC0xLjY2MSwwLjMyOHMtMS4xNTUtMC4xMDktMS42NjEtMC4zMjhzLTAuOTQ4LTAuNTQyLTEuMzI2LTAuOTcxICAgIGMtMC4zNzgtMC40MjktMC42NzUtMC45NjYtMC44ODktMS42MTNjLTAuMjE0LTAuNjQ3LTAuMzIxLTEuMzk1LTAuMzIxLTIuMjQyczAuMTA3LTEuNTkzLDAuMzIxLTIuMjM1ICAgIGMwLjIxNC0wLjY0MywwLjUxLTEuMTc4LDAuODg5LTEuNjA2YzAuMzc4LTAuNDI5LDAuODItMC43NTQsMS4zMjYtMC45NzhzMS4wNi0wLjMzNSwxLjY2MS0wLjMzNXMxLjE1NSwwLjExMSwxLjY2MSwwLjMzNSAgICBzMC45NDgsMC41NDksMS4zMjYsMC45NzhjMC4zNzgsMC40MjksMC42NzQsMC45NjQsMC44ODksMS42MDZDMzMuMzY3LDQ2LjMyMSwzMy40NzUsNDcuMDY2LDMzLjQ3NSw0Ny45MTR6IE0yOS4yMzYsNTEuNzI5ICAgIGMwLjMzNywwLDAuNjU4LTAuMDY2LDAuOTY0LTAuMTk4YzAuMzA1LTAuMTMyLDAuNTc5LTAuMzQ5LDAuODItMC42NDljMC4yNDEtMC4zMDEsMC40MzEtMC42OTUsMC41NjctMS4xODMgICAgczAuMjA5LTEuMDgyLDAuMjE5LTEuNzg0Yy0wLjAwOS0wLjY4NC0wLjA4LTEuMjY1LTAuMjEyLTEuNzQzYy0wLjEzMi0wLjQ3OS0wLjMxNC0wLjg3My0wLjU0Ny0xLjE4M3MtMC40OTctMC41MzMtMC43OTMtMC42NyAgICBjLTAuMjk2LTAuMTM3LTAuNjA4LTAuMjA1LTAuOTM3LTAuMjA1Yy0wLjMzNywwLTAuNjU5LDAuMDYzLTAuOTY0LDAuMTkxYy0wLjMwNiwwLjEyOC0wLjU3OSwwLjM0NC0wLjgyLDAuNjQ5ICAgIGMtMC4yNDIsMC4zMDYtMC40MzEsMC42OTktMC41NjcsMS4xODNzLTAuMjEsMS4wNzUtMC4yMTksMS43NzdjMC4wMDksMC42ODQsMC4wOCwxLjI2NywwLjIxMiwxLjc1ICAgIGMwLjEzMiwwLjQ4MywwLjMxNCwwLjg3NywwLjU0NywxLjE4M3MwLjQ5NywwLjUyOCwwLjc5MywwLjY3QzI4LjU5Niw1MS42NTgsMjguOTA4LDUxLjcyOSwyOS4yMzYsNTEuNzI5eiIvPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNNDIuNjA3LDUxLjk3NWMtMC4zNzQsMC4zNjQtMC43OTgsMC42MzgtMS4yNzEsMC44MmMtMC40NzQsMC4xODMtMC45ODQsMC4yNzMtMS41MzEsMC4yNzMgICAgYy0wLjYwMiwwLTEuMTU1LTAuMTA5LTEuNjYxLTAuMzI4cy0wLjk0OC0wLjU0Mi0xLjMyNi0wLjk3MWMtMC4zNzgtMC40MjktMC42NzUtMC45NjYtMC44ODktMS42MTMgICAgYy0wLjIxNC0wLjY0Ny0wLjMyMS0xLjM5NS0wLjMyMS0yLjI0MnMwLjEwNy0xLjU5MywwLjMyMS0yLjIzNWMwLjIxNC0wLjY0MywwLjUxLTEuMTc4LDAuODg5LTEuNjA2ICAgIGMwLjM3OC0wLjQyOSwwLjgyMi0wLjc1NCwxLjMzMy0wLjk3OGMwLjUxLTAuMjI0LDEuMDYyLTAuMzM1LDEuNjU0LTAuMzM1YzAuNTQ3LDAsMS4wNTcsMC4wOTEsMS41MzEsMC4yNzMgICAgYzAuNDc0LDAuMTgzLDAuODk3LDAuNDU2LDEuMjcxLDAuODJsLTEuMTM1LDEuMDEyYy0wLjIyOC0wLjI2NS0wLjQ4MS0wLjQ1Ni0wLjc1OS0wLjU3NGMtMC4yNzgtMC4xMTgtMC41NjctMC4xNzgtMC44NjgtMC4xNzggICAgYy0wLjMzNywwLTAuNjU5LDAuMDYzLTAuOTY0LDAuMTkxYy0wLjMwNiwwLjEyOC0wLjU3OSwwLjM0NC0wLjgyLDAuNjQ5Yy0wLjI0MiwwLjMwNi0wLjQzMSwwLjY5OS0wLjU2NywxLjE4MyAgICBzLTAuMjEsMS4wNzUtMC4yMTksMS43NzdjMC4wMDksMC42ODQsMC4wOCwxLjI2NywwLjIxMiwxLjc1YzAuMTMyLDAuNDgzLDAuMzE0LDAuODc3LDAuNTQ3LDEuMTgzczAuNDk3LDAuNTI4LDAuNzkzLDAuNjcgICAgYzAuMjk2LDAuMTQyLDAuNjA4LDAuMjEyLDAuOTM3LDAuMjEyczAuNjM2LTAuMDYsMC45MjMtMC4xNzhzMC41NDktMC4zMSwwLjc4Ni0wLjU3NEw0Mi42MDcsNTEuOTc1eiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

cxco-root a:not([data-img~='true'])[href$='.docm']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.docm']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNMTguNSwxM2gtNmMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWg2YzAuNTUyLDAsMSwwLjQ0OCwxLDFTMTkuMDUyLDEzLDE4LjUsMTN6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTIxLjUsMThoLTljLTAuNTUyLDAtMS0wLjQ0OC0xLTFzMC40NDgtMSwxLTFoOWMwLjU1MiwwLDEsMC40NDgsMSwxUzIyLjA1MiwxOCwyMS41LDE4eiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Izg2OTdDQjsiIGQ9Ik0yNS41LDE4Yy0wLjI2LDAtMC41Mi0wLjExLTAuNzEtMC4yOWMtMC4xOC0wLjE5LTAuMjktMC40NS0wLjI5LTAuNzFjMC0wLjI2LDAuMTEtMC41MiwwLjI5LTAuNzEgICBjMC4zNy0wLjM3LDEuMDUtMC4zNywxLjQyLDBjMC4xOCwwLjE5LDAuMjksMC40NSwwLjI5LDAuNzFjMCwwLjI2LTAuMTEsMC41Mi0wLjI5LDAuNzFDMjYuMDIsMTcuODksMjUuNzYsMTgsMjUuNSwxOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNMzcuNSwxOGgtOGMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWg4YzAuNTUyLDAsMSwwLjQ0OCwxLDFTMzguMDUyLDE4LDM3LjUsMTh6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTEyLjUsMzNjLTAuMjYsMC0wLjUyLTAuMTEtMC43MS0wLjI5Yy0wLjE4LTAuMTktMC4yOS0wLjQ1LTAuMjktMC43MWMwLTAuMjYsMC4xMS0wLjUyLDAuMjktMC43MSAgIGMwLjM3LTAuMzcsMS4wNS0wLjM3LDEuNDIsMGMwLjE4LDAuMTksMC4yOSwwLjQ0LDAuMjksMC43MWMwLDAuMjYtMC4xMSwwLjUyLTAuMjksMC43MUMxMy4wMiwzMi44OSwxMi43NiwzMywxMi41LDMzeiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Izg2OTdDQjsiIGQ9Ik0yNC41LDMzaC04Yy0wLjU1MiwwLTEtMC40NDgtMS0xczAuNDQ4LTEsMS0xaDhjMC41NTIsMCwxLDAuNDQ4LDEsMVMyNS4wNTIsMzMsMjQuNSwzM3oiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNNDMuNSwxOGgtMmMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWgyYzAuNTUyLDAsMSwwLjQ0OCwxLDFTNDQuMDUyLDE4LDQzLjUsMTh6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTM0LjUsMjNoLTIyYy0wLjU1MiwwLTEtMC40NDgtMS0xczAuNDQ4LTEsMS0xaDIyYzAuNTUyLDAsMSwwLjQ0OCwxLDFTMzUuMDUyLDIzLDM0LjUsMjN6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTQzLjUsMjNoLTZjLTAuNTUyLDAtMS0wLjQ0OC0xLTFzMC40NDgtMSwxLTFoNmMwLjU1MiwwLDEsMC40NDgsMSwxUzQ0LjA1MiwyMyw0My41LDIzeiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Izg2OTdDQjsiIGQ9Ik0xNi41LDI4aC00Yy0wLjU1MiwwLTEtMC40NDgtMS0xczAuNDQ4LTEsMS0xaDRjMC41NTIsMCwxLDAuNDQ4LDEsMVMxNy4wNTIsMjgsMTYuNSwyOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNMzAuNSwyOGgtMTBjLTAuNTUyLDAtMS0wLjQ0OC0xLTFzMC40NDgtMSwxLTFoMTBjMC41NTIsMCwxLDAuNDQ4LDEsMVMzMS4wNTIsMjgsMzAuNSwyOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNNDMuNSwyOGgtOWMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWg5YzAuNTUyLDAsMSwwLjQ0OCwxLDFTNDQuMDUyLDI4LDQzLjUsMjh6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojMDA5NkU2OyIgZD0iTTQ4LjAzNyw1Nkg3Ljk2M0M3LjE1NSw1Niw2LjUsNTUuMzQ1LDYuNSw1NC41MzdWMzloNDN2MTUuNTM3QzQ5LjUsNTUuMzQ1LDQ4Ljg0NSw1Niw0OC4wMzcsNTZ6Ii8+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTIzLjUsNDcuNjgyYzAsMC44MjktMC4wODksMS41MzgtMC4yNjcsMi4xMjZzLTAuNDAzLDEuMDgtMC42NzcsMS40NzdzLTAuNTgxLDAuNzA5LTAuOTIzLDAuOTM3ICAgIHMtMC42NzIsMC4zOTgtMC45OTEsMC41MTNjLTAuMzE5LDAuMTE0LTAuNjExLDAuMTg3LTAuODc1LDAuMjE5QzE5LjUwMyw1Mi45ODQsMTkuMzA3LDUzLDE5LjE4LDUzaC0zLjgxNFY0Mi45MjRIMTguNCAgICBjMC44NDgsMCwxLjU5MywwLjEzNSwyLjIzNSwwLjQwM3MxLjE3NiwwLjYyNywxLjYsMS4wNzNzMC43NCwwLjk1NSwwLjk1LDEuNTI0QzIzLjM5NSw0Ni40OTQsMjMuNSw0Ny4wOCwyMy41LDQ3LjY4MnogICAgIE0xOC42MzMsNTEuNzk3YzEuMTEyLDAsMS45MTQtMC4zNTUsMi40MDYtMS4wNjZzMC43MzgtMS43NDEsMC43MzgtMy4wOWMwLTAuNDE5LTAuMDUtMC44MzQtMC4xNS0xLjI0NCAgICBjLTAuMTAxLTAuNDEtMC4yOTQtMC43ODEtMC41ODEtMS4xMTRzLTAuNjc3LTAuNjAyLTEuMTY5LTAuODA3cy0xLjEzLTAuMzA4LTEuOTE0LTAuMzA4aC0wLjk1N3Y3LjYyOUgxOC42MzN6Ii8+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGQ9Ik0zMy40NzUsNDcuOTE0YzAsMC44NDgtMC4xMDcsMS41OTUtMC4zMjEsMi4yNDJjLTAuMjE0LDAuNjQ3LTAuNTExLDEuMTg1LTAuODg5LDEuNjEzICAgIGMtMC4zNzgsMC40MjktMC44MiwwLjc1Mi0xLjMyNiwwLjk3MXMtMS4wNiwwLjMyOC0xLjY2MSwwLjMyOHMtMS4xNTUtMC4xMDktMS42NjEtMC4zMjhzLTAuOTQ4LTAuNTQyLTEuMzI2LTAuOTcxICAgIGMtMC4zNzgtMC40MjktMC42NzUtMC45NjYtMC44ODktMS42MTNjLTAuMjE0LTAuNjQ3LTAuMzIxLTEuMzk1LTAuMzIxLTIuMjQyczAuMTA3LTEuNTkzLDAuMzIxLTIuMjM1ICAgIGMwLjIxNC0wLjY0MywwLjUxLTEuMTc4LDAuODg5LTEuNjA2YzAuMzc4LTAuNDI5LDAuODItMC43NTQsMS4zMjYtMC45NzhzMS4wNi0wLjMzNSwxLjY2MS0wLjMzNXMxLjE1NSwwLjExMSwxLjY2MSwwLjMzNSAgICBzMC45NDgsMC41NDksMS4zMjYsMC45NzhjMC4zNzgsMC40MjksMC42NzQsMC45NjQsMC44ODksMS42MDZDMzMuMzY3LDQ2LjMyMSwzMy40NzUsNDcuMDY2LDMzLjQ3NSw0Ny45MTR6IE0yOS4yMzYsNTEuNzI5ICAgIGMwLjMzNywwLDAuNjU4LTAuMDY2LDAuOTY0LTAuMTk4YzAuMzA1LTAuMTMyLDAuNTc5LTAuMzQ5LDAuODItMC42NDljMC4yNDEtMC4zMDEsMC40MzEtMC42OTUsMC41NjctMS4xODMgICAgczAuMjA5LTEuMDgyLDAuMjE5LTEuNzg0Yy0wLjAwOS0wLjY4NC0wLjA4LTEuMjY1LTAuMjEyLTEuNzQzYy0wLjEzMi0wLjQ3OS0wLjMxNC0wLjg3My0wLjU0Ny0xLjE4M3MtMC40OTctMC41MzMtMC43OTMtMC42NyAgICBjLTAuMjk2LTAuMTM3LTAuNjA4LTAuMjA1LTAuOTM3LTAuMjA1Yy0wLjMzNywwLTAuNjU5LDAuMDYzLTAuOTY0LDAuMTkxYy0wLjMwNiwwLjEyOC0wLjU3OSwwLjM0NC0wLjgyLDAuNjQ5ICAgIGMtMC4yNDIsMC4zMDYtMC40MzEsMC42OTktMC41NjcsMS4xODNzLTAuMjEsMS4wNzUtMC4yMTksMS43NzdjMC4wMDksMC42ODQsMC4wOCwxLjI2NywwLjIxMiwxLjc1ICAgIGMwLjEzMiwwLjQ4MywwLjMxNCwwLjg3NywwLjU0NywxLjE4M3MwLjQ5NywwLjUyOCwwLjc5MywwLjY3QzI4LjU5Niw1MS42NTgsMjguOTA4LDUxLjcyOSwyOS4yMzYsNTEuNzI5eiIvPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNNDIuNjA3LDUxLjk3NWMtMC4zNzQsMC4zNjQtMC43OTgsMC42MzgtMS4yNzEsMC44MmMtMC40NzQsMC4xODMtMC45ODQsMC4yNzMtMS41MzEsMC4yNzMgICAgYy0wLjYwMiwwLTEuMTU1LTAuMTA5LTEuNjYxLTAuMzI4cy0wLjk0OC0wLjU0Mi0xLjMyNi0wLjk3MWMtMC4zNzgtMC40MjktMC42NzUtMC45NjYtMC44ODktMS42MTMgICAgYy0wLjIxNC0wLjY0Ny0wLjMyMS0xLjM5NS0wLjMyMS0yLjI0MnMwLjEwNy0xLjU5MywwLjMyMS0yLjIzNWMwLjIxNC0wLjY0MywwLjUxLTEuMTc4LDAuODg5LTEuNjA2ICAgIGMwLjM3OC0wLjQyOSwwLjgyMi0wLjc1NCwxLjMzMy0wLjk3OGMwLjUxLTAuMjI0LDEuMDYyLTAuMzM1LDEuNjU0LTAuMzM1YzAuNTQ3LDAsMS4wNTcsMC4wOTEsMS41MzEsMC4yNzMgICAgYzAuNDc0LDAuMTgzLDAuODk3LDAuNDU2LDEuMjcxLDAuODJsLTEuMTM1LDEuMDEyYy0wLjIyOC0wLjI2NS0wLjQ4MS0wLjQ1Ni0wLjc1OS0wLjU3NGMtMC4yNzgtMC4xMTgtMC41NjctMC4xNzgtMC44NjgtMC4xNzggICAgYy0wLjMzNywwLTAuNjU5LDAuMDYzLTAuOTY0LDAuMTkxYy0wLjMwNiwwLjEyOC0wLjU3OSwwLjM0NC0wLjgyLDAuNjQ5Yy0wLjI0MiwwLjMwNi0wLjQzMSwwLjY5OS0wLjU2NywxLjE4MyAgICBzLTAuMjEsMS4wNzUtMC4yMTksMS43NzdjMC4wMDksMC42ODQsMC4wOCwxLjI2NywwLjIxMiwxLjc1YzAuMTMyLDAuNDgzLDAuMzE0LDAuODc3LDAuNTQ3LDEuMTgzczAuNDk3LDAuNTI4LDAuNzkzLDAuNjcgICAgYzAuMjk2LDAuMTQyLDAuNjA4LDAuMjEyLDAuOTM3LDAuMjEyczAuNjM2LTAuMDYsMC45MjMtMC4xNzhzMC41NDktMC4zMSwwLjc4Ni0wLjU3NEw0Mi42MDcsNTEuOTc1eiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

cxco-root a:not([data-img~='true'])[href$='.dotx']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.dotx']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNMTguNSwxM2gtNmMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWg2YzAuNTUyLDAsMSwwLjQ0OCwxLDFTMTkuMDUyLDEzLDE4LjUsMTN6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTIxLjUsMThoLTljLTAuNTUyLDAtMS0wLjQ0OC0xLTFzMC40NDgtMSwxLTFoOWMwLjU1MiwwLDEsMC40NDgsMSwxUzIyLjA1MiwxOCwyMS41LDE4eiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Izg2OTdDQjsiIGQ9Ik0yNS41LDE4Yy0wLjI2LDAtMC41Mi0wLjExLTAuNzEtMC4yOWMtMC4xOC0wLjE5LTAuMjktMC40NS0wLjI5LTAuNzFjMC0wLjI2LDAuMTEtMC41MiwwLjI5LTAuNzEgICBjMC4zNy0wLjM3LDEuMDUtMC4zNywxLjQyLDBjMC4xOCwwLjE5LDAuMjksMC40NSwwLjI5LDAuNzFjMCwwLjI2LTAuMTEsMC41Mi0wLjI5LDAuNzFDMjYuMDIsMTcuODksMjUuNzYsMTgsMjUuNSwxOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNMzcuNSwxOGgtOGMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWg4YzAuNTUyLDAsMSwwLjQ0OCwxLDFTMzguMDUyLDE4LDM3LjUsMTh6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTEyLjUsMzNjLTAuMjYsMC0wLjUyLTAuMTEtMC43MS0wLjI5Yy0wLjE4LTAuMTktMC4yOS0wLjQ1LTAuMjktMC43MWMwLTAuMjYsMC4xMS0wLjUyLDAuMjktMC43MSAgIGMwLjM3LTAuMzcsMS4wNS0wLjM3LDEuNDIsMGMwLjE4LDAuMTksMC4yOSwwLjQ0LDAuMjksMC43MWMwLDAuMjYtMC4xMSwwLjUyLTAuMjksMC43MUMxMy4wMiwzMi44OSwxMi43NiwzMywxMi41LDMzeiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Izg2OTdDQjsiIGQ9Ik0yNC41LDMzaC04Yy0wLjU1MiwwLTEtMC40NDgtMS0xczAuNDQ4LTEsMS0xaDhjMC41NTIsMCwxLDAuNDQ4LDEsMVMyNS4wNTIsMzMsMjQuNSwzM3oiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNNDMuNSwxOGgtMmMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWgyYzAuNTUyLDAsMSwwLjQ0OCwxLDFTNDQuMDUyLDE4LDQzLjUsMTh6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTM0LjUsMjNoLTIyYy0wLjU1MiwwLTEtMC40NDgtMS0xczAuNDQ4LTEsMS0xaDIyYzAuNTUyLDAsMSwwLjQ0OCwxLDFTMzUuMDUyLDIzLDM0LjUsMjN6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTQzLjUsMjNoLTZjLTAuNTUyLDAtMS0wLjQ0OC0xLTFzMC40NDgtMSwxLTFoNmMwLjU1MiwwLDEsMC40NDgsMSwxUzQ0LjA1MiwyMyw0My41LDIzeiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Izg2OTdDQjsiIGQ9Ik0xNi41LDI4aC00Yy0wLjU1MiwwLTEtMC40NDgtMS0xczAuNDQ4LTEsMS0xaDRjMC41NTIsMCwxLDAuNDQ4LDEsMVMxNy4wNTIsMjgsMTYuNSwyOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNMzAuNSwyOGgtMTBjLTAuNTUyLDAtMS0wLjQ0OC0xLTFzMC40NDgtMSwxLTFoMTBjMC41NTIsMCwxLDAuNDQ4LDEsMVMzMS4wNTIsMjgsMzAuNSwyOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNNDMuNSwyOGgtOWMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWg5YzAuNTUyLDAsMSwwLjQ0OCwxLDFTNDQuMDUyLDI4LDQzLjUsMjh6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojMDA5NkU2OyIgZD0iTTQ4LjAzNyw1Nkg3Ljk2M0M3LjE1NSw1Niw2LjUsNTUuMzQ1LDYuNSw1NC41MzdWMzloNDN2MTUuNTM3QzQ5LjUsNTUuMzQ1LDQ4Ljg0NSw1Niw0OC4wMzcsNTZ6Ii8+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTIzLjUsNDcuNjgyYzAsMC44MjktMC4wODksMS41MzgtMC4yNjcsMi4xMjZzLTAuNDAzLDEuMDgtMC42NzcsMS40NzdzLTAuNTgxLDAuNzA5LTAuOTIzLDAuOTM3ICAgIHMtMC42NzIsMC4zOTgtMC45OTEsMC41MTNjLTAuMzE5LDAuMTE0LTAuNjExLDAuMTg3LTAuODc1LDAuMjE5QzE5LjUwMyw1Mi45ODQsMTkuMzA3LDUzLDE5LjE4LDUzaC0zLjgxNFY0Mi45MjRIMTguNCAgICBjMC44NDgsMCwxLjU5MywwLjEzNSwyLjIzNSwwLjQwM3MxLjE3NiwwLjYyNywxLjYsMS4wNzNzMC43NCwwLjk1NSwwLjk1LDEuNTI0QzIzLjM5NSw0Ni40OTQsMjMuNSw0Ny4wOCwyMy41LDQ3LjY4MnogICAgIE0xOC42MzMsNTEuNzk3YzEuMTEyLDAsMS45MTQtMC4zNTUsMi40MDYtMS4wNjZzMC43MzgtMS43NDEsMC43MzgtMy4wOWMwLTAuNDE5LTAuMDUtMC44MzQtMC4xNS0xLjI0NCAgICBjLTAuMTAxLTAuNDEtMC4yOTQtMC43ODEtMC41ODEtMS4xMTRzLTAuNjc3LTAuNjAyLTEuMTY5LTAuODA3cy0xLjEzLTAuMzA4LTEuOTE0LTAuMzA4aC0wLjk1N3Y3LjYyOUgxOC42MzN6Ii8+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGQ9Ik0zMy40NzUsNDcuOTE0YzAsMC44NDgtMC4xMDcsMS41OTUtMC4zMjEsMi4yNDJjLTAuMjE0LDAuNjQ3LTAuNTExLDEuMTg1LTAuODg5LDEuNjEzICAgIGMtMC4zNzgsMC40MjktMC44MiwwLjc1Mi0xLjMyNiwwLjk3MXMtMS4wNiwwLjMyOC0xLjY2MSwwLjMyOHMtMS4xNTUtMC4xMDktMS42NjEtMC4zMjhzLTAuOTQ4LTAuNTQyLTEuMzI2LTAuOTcxICAgIGMtMC4zNzgtMC40MjktMC42NzUtMC45NjYtMC44ODktMS42MTNjLTAuMjE0LTAuNjQ3LTAuMzIxLTEuMzk1LTAuMzIxLTIuMjQyczAuMTA3LTEuNTkzLDAuMzIxLTIuMjM1ICAgIGMwLjIxNC0wLjY0MywwLjUxLTEuMTc4LDAuODg5LTEuNjA2YzAuMzc4LTAuNDI5LDAuODItMC43NTQsMS4zMjYtMC45NzhzMS4wNi0wLjMzNSwxLjY2MS0wLjMzNXMxLjE1NSwwLjExMSwxLjY2MSwwLjMzNSAgICBzMC45NDgsMC41NDksMS4zMjYsMC45NzhjMC4zNzgsMC40MjksMC42NzQsMC45NjQsMC44ODksMS42MDZDMzMuMzY3LDQ2LjMyMSwzMy40NzUsNDcuMDY2LDMzLjQ3NSw0Ny45MTR6IE0yOS4yMzYsNTEuNzI5ICAgIGMwLjMzNywwLDAuNjU4LTAuMDY2LDAuOTY0LTAuMTk4YzAuMzA1LTAuMTMyLDAuNTc5LTAuMzQ5LDAuODItMC42NDljMC4yNDEtMC4zMDEsMC40MzEtMC42OTUsMC41NjctMS4xODMgICAgczAuMjA5LTEuMDgyLDAuMjE5LTEuNzg0Yy0wLjAwOS0wLjY4NC0wLjA4LTEuMjY1LTAuMjEyLTEuNzQzYy0wLjEzMi0wLjQ3OS0wLjMxNC0wLjg3My0wLjU0Ny0xLjE4M3MtMC40OTctMC41MzMtMC43OTMtMC42NyAgICBjLTAuMjk2LTAuMTM3LTAuNjA4LTAuMjA1LTAuOTM3LTAuMjA1Yy0wLjMzNywwLTAuNjU5LDAuMDYzLTAuOTY0LDAuMTkxYy0wLjMwNiwwLjEyOC0wLjU3OSwwLjM0NC0wLjgyLDAuNjQ5ICAgIGMtMC4yNDIsMC4zMDYtMC40MzEsMC42OTktMC41NjcsMS4xODNzLTAuMjEsMS4wNzUtMC4yMTksMS43NzdjMC4wMDksMC42ODQsMC4wOCwxLjI2NywwLjIxMiwxLjc1ICAgIGMwLjEzMiwwLjQ4MywwLjMxNCwwLjg3NywwLjU0NywxLjE4M3MwLjQ5NywwLjUyOCwwLjc5MywwLjY3QzI4LjU5Niw1MS42NTgsMjguOTA4LDUxLjcyOSwyOS4yMzYsNTEuNzI5eiIvPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNNDIuNjA3LDUxLjk3NWMtMC4zNzQsMC4zNjQtMC43OTgsMC42MzgtMS4yNzEsMC44MmMtMC40NzQsMC4xODMtMC45ODQsMC4yNzMtMS41MzEsMC4yNzMgICAgYy0wLjYwMiwwLTEuMTU1LTAuMTA5LTEuNjYxLTAuMzI4cy0wLjk0OC0wLjU0Mi0xLjMyNi0wLjk3MWMtMC4zNzgtMC40MjktMC42NzUtMC45NjYtMC44ODktMS42MTMgICAgYy0wLjIxNC0wLjY0Ny0wLjMyMS0xLjM5NS0wLjMyMS0yLjI0MnMwLjEwNy0xLjU5MywwLjMyMS0yLjIzNWMwLjIxNC0wLjY0MywwLjUxLTEuMTc4LDAuODg5LTEuNjA2ICAgIGMwLjM3OC0wLjQyOSwwLjgyMi0wLjc1NCwxLjMzMy0wLjk3OGMwLjUxLTAuMjI0LDEuMDYyLTAuMzM1LDEuNjU0LTAuMzM1YzAuNTQ3LDAsMS4wNTcsMC4wOTEsMS41MzEsMC4yNzMgICAgYzAuNDc0LDAuMTgzLDAuODk3LDAuNDU2LDEuMjcxLDAuODJsLTEuMTM1LDEuMDEyYy0wLjIyOC0wLjI2NS0wLjQ4MS0wLjQ1Ni0wLjc1OS0wLjU3NGMtMC4yNzgtMC4xMTgtMC41NjctMC4xNzgtMC44NjgtMC4xNzggICAgYy0wLjMzNywwLTAuNjU5LDAuMDYzLTAuOTY0LDAuMTkxYy0wLjMwNiwwLjEyOC0wLjU3OSwwLjM0NC0wLjgyLDAuNjQ5Yy0wLjI0MiwwLjMwNi0wLjQzMSwwLjY5OS0wLjU2NywxLjE4MyAgICBzLTAuMjEsMS4wNzUtMC4yMTksMS43NzdjMC4wMDksMC42ODQsMC4wOCwxLjI2NywwLjIxMiwxLjc1YzAuMTMyLDAuNDgzLDAuMzE0LDAuODc3LDAuNTQ3LDEuMTgzczAuNDk3LDAuNTI4LDAuNzkzLDAuNjcgICAgYzAuMjk2LDAuMTQyLDAuNjA4LDAuMjEyLDAuOTM3LDAuMjEyczAuNjM2LTAuMDYsMC45MjMtMC4xNzhzMC41NDktMC4zMSwwLjc4Ni0wLjU3NEw0Mi42MDcsNTEuOTc1eiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

cxco-root a:not([data-img~='true'])[href$='.dotx']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.dotx']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNMTguNSwxM2gtNmMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWg2YzAuNTUyLDAsMSwwLjQ0OCwxLDFTMTkuMDUyLDEzLDE4LjUsMTN6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTIxLjUsMThoLTljLTAuNTUyLDAtMS0wLjQ0OC0xLTFzMC40NDgtMSwxLTFoOWMwLjU1MiwwLDEsMC40NDgsMSwxUzIyLjA1MiwxOCwyMS41LDE4eiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Izg2OTdDQjsiIGQ9Ik0yNS41LDE4Yy0wLjI2LDAtMC41Mi0wLjExLTAuNzEtMC4yOWMtMC4xOC0wLjE5LTAuMjktMC40NS0wLjI5LTAuNzFjMC0wLjI2LDAuMTEtMC41MiwwLjI5LTAuNzEgICBjMC4zNy0wLjM3LDEuMDUtMC4zNywxLjQyLDBjMC4xOCwwLjE5LDAuMjksMC40NSwwLjI5LDAuNzFjMCwwLjI2LTAuMTEsMC41Mi0wLjI5LDAuNzFDMjYuMDIsMTcuODksMjUuNzYsMTgsMjUuNSwxOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNMzcuNSwxOGgtOGMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWg4YzAuNTUyLDAsMSwwLjQ0OCwxLDFTMzguMDUyLDE4LDM3LjUsMTh6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTEyLjUsMzNjLTAuMjYsMC0wLjUyLTAuMTEtMC43MS0wLjI5Yy0wLjE4LTAuMTktMC4yOS0wLjQ1LTAuMjktMC43MWMwLTAuMjYsMC4xMS0wLjUyLDAuMjktMC43MSAgIGMwLjM3LTAuMzcsMS4wNS0wLjM3LDEuNDIsMGMwLjE4LDAuMTksMC4yOSwwLjQ0LDAuMjksMC43MWMwLDAuMjYtMC4xMSwwLjUyLTAuMjksMC43MUMxMy4wMiwzMi44OSwxMi43NiwzMywxMi41LDMzeiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Izg2OTdDQjsiIGQ9Ik0yNC41LDMzaC04Yy0wLjU1MiwwLTEtMC40NDgtMS0xczAuNDQ4LTEsMS0xaDhjMC41NTIsMCwxLDAuNDQ4LDEsMVMyNS4wNTIsMzMsMjQuNSwzM3oiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNNDMuNSwxOGgtMmMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWgyYzAuNTUyLDAsMSwwLjQ0OCwxLDFTNDQuMDUyLDE4LDQzLjUsMTh6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTM0LjUsMjNoLTIyYy0wLjU1MiwwLTEtMC40NDgtMS0xczAuNDQ4LTEsMS0xaDIyYzAuNTUyLDAsMSwwLjQ0OCwxLDFTMzUuMDUyLDIzLDM0LjUsMjN6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTQzLjUsMjNoLTZjLTAuNTUyLDAtMS0wLjQ0OC0xLTFzMC40NDgtMSwxLTFoNmMwLjU1MiwwLDEsMC40NDgsMSwxUzQ0LjA1MiwyMyw0My41LDIzeiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Izg2OTdDQjsiIGQ9Ik0xNi41LDI4aC00Yy0wLjU1MiwwLTEtMC40NDgtMS0xczAuNDQ4LTEsMS0xaDRjMC41NTIsMCwxLDAuNDQ4LDEsMVMxNy4wNTIsMjgsMTYuNSwyOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNMzAuNSwyOGgtMTBjLTAuNTUyLDAtMS0wLjQ0OC0xLTFzMC40NDgtMSwxLTFoMTBjMC41NTIsMCwxLDAuNDQ4LDEsMVMzMS4wNTIsMjgsMzAuNSwyOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNNDMuNSwyOGgtOWMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWg5YzAuNTUyLDAsMSwwLjQ0OCwxLDFTNDQuMDUyLDI4LDQzLjUsMjh6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojMDA5NkU2OyIgZD0iTTQ4LjAzNyw1Nkg3Ljk2M0M3LjE1NSw1Niw2LjUsNTUuMzQ1LDYuNSw1NC41MzdWMzloNDN2MTUuNTM3QzQ5LjUsNTUuMzQ1LDQ4Ljg0NSw1Niw0OC4wMzcsNTZ6Ii8+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTIzLjUsNDcuNjgyYzAsMC44MjktMC4wODksMS41MzgtMC4yNjcsMi4xMjZzLTAuNDAzLDEuMDgtMC42NzcsMS40NzdzLTAuNTgxLDAuNzA5LTAuOTIzLDAuOTM3ICAgIHMtMC42NzIsMC4zOTgtMC45OTEsMC41MTNjLTAuMzE5LDAuMTE0LTAuNjExLDAuMTg3LTAuODc1LDAuMjE5QzE5LjUwMyw1Mi45ODQsMTkuMzA3LDUzLDE5LjE4LDUzaC0zLjgxNFY0Mi45MjRIMTguNCAgICBjMC44NDgsMCwxLjU5MywwLjEzNSwyLjIzNSwwLjQwM3MxLjE3NiwwLjYyNywxLjYsMS4wNzNzMC43NCwwLjk1NSwwLjk1LDEuNTI0QzIzLjM5NSw0Ni40OTQsMjMuNSw0Ny4wOCwyMy41LDQ3LjY4MnogICAgIE0xOC42MzMsNTEuNzk3YzEuMTEyLDAsMS45MTQtMC4zNTUsMi40MDYtMS4wNjZzMC43MzgtMS43NDEsMC43MzgtMy4wOWMwLTAuNDE5LTAuMDUtMC44MzQtMC4xNS0xLjI0NCAgICBjLTAuMTAxLTAuNDEtMC4yOTQtMC43ODEtMC41ODEtMS4xMTRzLTAuNjc3LTAuNjAyLTEuMTY5LTAuODA3cy0xLjEzLTAuMzA4LTEuOTE0LTAuMzA4aC0wLjk1N3Y3LjYyOUgxOC42MzN6Ii8+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGQ9Ik0zMy40NzUsNDcuOTE0YzAsMC44NDgtMC4xMDcsMS41OTUtMC4zMjEsMi4yNDJjLTAuMjE0LDAuNjQ3LTAuNTExLDEuMTg1LTAuODg5LDEuNjEzICAgIGMtMC4zNzgsMC40MjktMC44MiwwLjc1Mi0xLjMyNiwwLjk3MXMtMS4wNiwwLjMyOC0xLjY2MSwwLjMyOHMtMS4xNTUtMC4xMDktMS42NjEtMC4zMjhzLTAuOTQ4LTAuNTQyLTEuMzI2LTAuOTcxICAgIGMtMC4zNzgtMC40MjktMC42NzUtMC45NjYtMC44ODktMS42MTNjLTAuMjE0LTAuNjQ3LTAuMzIxLTEuMzk1LTAuMzIxLTIuMjQyczAuMTA3LTEuNTkzLDAuMzIxLTIuMjM1ICAgIGMwLjIxNC0wLjY0MywwLjUxLTEuMTc4LDAuODg5LTEuNjA2YzAuMzc4LTAuNDI5LDAuODItMC43NTQsMS4zMjYtMC45NzhzMS4wNi0wLjMzNSwxLjY2MS0wLjMzNXMxLjE1NSwwLjExMSwxLjY2MSwwLjMzNSAgICBzMC45NDgsMC41NDksMS4zMjYsMC45NzhjMC4zNzgsMC40MjksMC42NzQsMC45NjQsMC44ODksMS42MDZDMzMuMzY3LDQ2LjMyMSwzMy40NzUsNDcuMDY2LDMzLjQ3NSw0Ny45MTR6IE0yOS4yMzYsNTEuNzI5ICAgIGMwLjMzNywwLDAuNjU4LTAuMDY2LDAuOTY0LTAuMTk4YzAuMzA1LTAuMTMyLDAuNTc5LTAuMzQ5LDAuODItMC42NDljMC4yNDEtMC4zMDEsMC40MzEtMC42OTUsMC41NjctMS4xODMgICAgczAuMjA5LTEuMDgyLDAuMjE5LTEuNzg0Yy0wLjAwOS0wLjY4NC0wLjA4LTEuMjY1LTAuMjEyLTEuNzQzYy0wLjEzMi0wLjQ3OS0wLjMxNC0wLjg3My0wLjU0Ny0xLjE4M3MtMC40OTctMC41MzMtMC43OTMtMC42NyAgICBjLTAuMjk2LTAuMTM3LTAuNjA4LTAuMjA1LTAuOTM3LTAuMjA1Yy0wLjMzNywwLTAuNjU5LDAuMDYzLTAuOTY0LDAuMTkxYy0wLjMwNiwwLjEyOC0wLjU3OSwwLjM0NC0wLjgyLDAuNjQ5ICAgIGMtMC4yNDIsMC4zMDYtMC40MzEsMC42OTktMC41NjcsMS4xODNzLTAuMjEsMS4wNzUtMC4yMTksMS43NzdjMC4wMDksMC42ODQsMC4wOCwxLjI2NywwLjIxMiwxLjc1ICAgIGMwLjEzMiwwLjQ4MywwLjMxNCwwLjg3NywwLjU0NywxLjE4M3MwLjQ5NywwLjUyOCwwLjc5MywwLjY3QzI4LjU5Niw1MS42NTgsMjguOTA4LDUxLjcyOSwyOS4yMzYsNTEuNzI5eiIvPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNNDIuNjA3LDUxLjk3NWMtMC4zNzQsMC4zNjQtMC43OTgsMC42MzgtMS4yNzEsMC44MmMtMC40NzQsMC4xODMtMC45ODQsMC4yNzMtMS41MzEsMC4yNzMgICAgYy0wLjYwMiwwLTEuMTU1LTAuMTA5LTEuNjYxLTAuMzI4cy0wLjk0OC0wLjU0Mi0xLjMyNi0wLjk3MWMtMC4zNzgtMC40MjktMC42NzUtMC45NjYtMC44ODktMS42MTMgICAgYy0wLjIxNC0wLjY0Ny0wLjMyMS0xLjM5NS0wLjMyMS0yLjI0MnMwLjEwNy0xLjU5MywwLjMyMS0yLjIzNWMwLjIxNC0wLjY0MywwLjUxLTEuMTc4LDAuODg5LTEuNjA2ICAgIGMwLjM3OC0wLjQyOSwwLjgyMi0wLjc1NCwxLjMzMy0wLjk3OGMwLjUxLTAuMjI0LDEuMDYyLTAuMzM1LDEuNjU0LTAuMzM1YzAuNTQ3LDAsMS4wNTcsMC4wOTEsMS41MzEsMC4yNzMgICAgYzAuNDc0LDAuMTgzLDAuODk3LDAuNDU2LDEuMjcxLDAuODJsLTEuMTM1LDEuMDEyYy0wLjIyOC0wLjI2NS0wLjQ4MS0wLjQ1Ni0wLjc1OS0wLjU3NGMtMC4yNzgtMC4xMTgtMC41NjctMC4xNzgtMC44NjgtMC4xNzggICAgYy0wLjMzNywwLTAuNjU5LDAuMDYzLTAuOTY0LDAuMTkxYy0wLjMwNiwwLjEyOC0wLjU3OSwwLjM0NC0wLjgyLDAuNjQ5Yy0wLjI0MiwwLjMwNi0wLjQzMSwwLjY5OS0wLjU2NywxLjE4MyAgICBzLTAuMjEsMS4wNzUtMC4yMTksMS43NzdjMC4wMDksMC42ODQsMC4wOCwxLjI2NywwLjIxMiwxLjc1YzAuMTMyLDAuNDgzLDAuMzE0LDAuODc3LDAuNTQ3LDEuMTgzczAuNDk3LDAuNTI4LDAuNzkzLDAuNjcgICAgYzAuMjk2LDAuMTQyLDAuNjA4LDAuMjEyLDAuOTM3LDAuMjEyczAuNjM2LTAuMDYsMC45MjMtMC4xNzhzMC41NDktMC4zMSwwLjc4Ni0wLjU3NEw0Mi42MDcsNTEuOTc1eiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

cxco-root a:not([data-img~='true'])[href$='.docb']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.docb']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNMTguNSwxM2gtNmMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWg2YzAuNTUyLDAsMSwwLjQ0OCwxLDFTMTkuMDUyLDEzLDE4LjUsMTN6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTIxLjUsMThoLTljLTAuNTUyLDAtMS0wLjQ0OC0xLTFzMC40NDgtMSwxLTFoOWMwLjU1MiwwLDEsMC40NDgsMSwxUzIyLjA1MiwxOCwyMS41LDE4eiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Izg2OTdDQjsiIGQ9Ik0yNS41LDE4Yy0wLjI2LDAtMC41Mi0wLjExLTAuNzEtMC4yOWMtMC4xOC0wLjE5LTAuMjktMC40NS0wLjI5LTAuNzFjMC0wLjI2LDAuMTEtMC41MiwwLjI5LTAuNzEgICBjMC4zNy0wLjM3LDEuMDUtMC4zNywxLjQyLDBjMC4xOCwwLjE5LDAuMjksMC40NSwwLjI5LDAuNzFjMCwwLjI2LTAuMTEsMC41Mi0wLjI5LDAuNzFDMjYuMDIsMTcuODksMjUuNzYsMTgsMjUuNSwxOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNMzcuNSwxOGgtOGMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWg4YzAuNTUyLDAsMSwwLjQ0OCwxLDFTMzguMDUyLDE4LDM3LjUsMTh6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTEyLjUsMzNjLTAuMjYsMC0wLjUyLTAuMTEtMC43MS0wLjI5Yy0wLjE4LTAuMTktMC4yOS0wLjQ1LTAuMjktMC43MWMwLTAuMjYsMC4xMS0wLjUyLDAuMjktMC43MSAgIGMwLjM3LTAuMzcsMS4wNS0wLjM3LDEuNDIsMGMwLjE4LDAuMTksMC4yOSwwLjQ0LDAuMjksMC43MWMwLDAuMjYtMC4xMSwwLjUyLTAuMjksMC43MUMxMy4wMiwzMi44OSwxMi43NiwzMywxMi41LDMzeiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Izg2OTdDQjsiIGQ9Ik0yNC41LDMzaC04Yy0wLjU1MiwwLTEtMC40NDgtMS0xczAuNDQ4LTEsMS0xaDhjMC41NTIsMCwxLDAuNDQ4LDEsMVMyNS4wNTIsMzMsMjQuNSwzM3oiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNNDMuNSwxOGgtMmMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWgyYzAuNTUyLDAsMSwwLjQ0OCwxLDFTNDQuMDUyLDE4LDQzLjUsMTh6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTM0LjUsMjNoLTIyYy0wLjU1MiwwLTEtMC40NDgtMS0xczAuNDQ4LTEsMS0xaDIyYzAuNTUyLDAsMSwwLjQ0OCwxLDFTMzUuMDUyLDIzLDM0LjUsMjN6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojODY5N0NCOyIgZD0iTTQzLjUsMjNoLTZjLTAuNTUyLDAtMS0wLjQ0OC0xLTFzMC40NDgtMSwxLTFoNmMwLjU1MiwwLDEsMC40NDgsMSwxUzQ0LjA1MiwyMyw0My41LDIzeiIvPgoJPHBhdGggc3R5bGU9ImZpbGw6Izg2OTdDQjsiIGQ9Ik0xNi41LDI4aC00Yy0wLjU1MiwwLTEtMC40NDgtMS0xczAuNDQ4LTEsMS0xaDRjMC41NTIsMCwxLDAuNDQ4LDEsMVMxNy4wNTIsMjgsMTYuNSwyOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNMzAuNSwyOGgtMTBjLTAuNTUyLDAtMS0wLjQ0OC0xLTFzMC40NDgtMSwxLTFoMTBjMC41NTIsMCwxLDAuNDQ4LDEsMVMzMS4wNTIsMjgsMzAuNSwyOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM4Njk3Q0I7IiBkPSJNNDMuNSwyOGgtOWMtMC41NTIsMC0xLTAuNDQ4LTEtMXMwLjQ0OC0xLDEtMWg5YzAuNTUyLDAsMSwwLjQ0OCwxLDFTNDQuMDUyLDI4LDQzLjUsMjh6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojMDA5NkU2OyIgZD0iTTQ4LjAzNyw1Nkg3Ljk2M0M3LjE1NSw1Niw2LjUsNTUuMzQ1LDYuNSw1NC41MzdWMzloNDN2MTUuNTM3QzQ5LjUsNTUuMzQ1LDQ4Ljg0NSw1Niw0OC4wMzcsNTZ6Ii8+Cgk8Zz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTIzLjUsNDcuNjgyYzAsMC44MjktMC4wODksMS41MzgtMC4yNjcsMi4xMjZzLTAuNDAzLDEuMDgtMC42NzcsMS40NzdzLTAuNTgxLDAuNzA5LTAuOTIzLDAuOTM3ICAgIHMtMC42NzIsMC4zOTgtMC45OTEsMC41MTNjLTAuMzE5LDAuMTE0LTAuNjExLDAuMTg3LTAuODc1LDAuMjE5QzE5LjUwMyw1Mi45ODQsMTkuMzA3LDUzLDE5LjE4LDUzaC0zLjgxNFY0Mi45MjRIMTguNCAgICBjMC44NDgsMCwxLjU5MywwLjEzNSwyLjIzNSwwLjQwM3MxLjE3NiwwLjYyNywxLjYsMS4wNzNzMC43NCwwLjk1NSwwLjk1LDEuNTI0QzIzLjM5NSw0Ni40OTQsMjMuNSw0Ny4wOCwyMy41LDQ3LjY4MnogICAgIE0xOC42MzMsNTEuNzk3YzEuMTEyLDAsMS45MTQtMC4zNTUsMi40MDYtMS4wNjZzMC43MzgtMS43NDEsMC43MzgtMy4wOWMwLTAuNDE5LTAuMDUtMC44MzQtMC4xNS0xLjI0NCAgICBjLTAuMTAxLTAuNDEtMC4yOTQtMC43ODEtMC41ODEtMS4xMTRzLTAuNjc3LTAuNjAyLTEuMTY5LTAuODA3cy0xLjEzLTAuMzA4LTEuOTE0LTAuMzA4aC0wLjk1N3Y3LjYyOUgxOC42MzN6Ii8+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGQ9Ik0zMy40NzUsNDcuOTE0YzAsMC44NDgtMC4xMDcsMS41OTUtMC4zMjEsMi4yNDJjLTAuMjE0LDAuNjQ3LTAuNTExLDEuMTg1LTAuODg5LDEuNjEzICAgIGMtMC4zNzgsMC40MjktMC44MiwwLjc1Mi0xLjMyNiwwLjk3MXMtMS4wNiwwLjMyOC0xLjY2MSwwLjMyOHMtMS4xNTUtMC4xMDktMS42NjEtMC4zMjhzLTAuOTQ4LTAuNTQyLTEuMzI2LTAuOTcxICAgIGMtMC4zNzgtMC40MjktMC42NzUtMC45NjYtMC44ODktMS42MTNjLTAuMjE0LTAuNjQ3LTAuMzIxLTEuMzk1LTAuMzIxLTIuMjQyczAuMTA3LTEuNTkzLDAuMzIxLTIuMjM1ICAgIGMwLjIxNC0wLjY0MywwLjUxLTEuMTc4LDAuODg5LTEuNjA2YzAuMzc4LTAuNDI5LDAuODItMC43NTQsMS4zMjYtMC45NzhzMS4wNi0wLjMzNSwxLjY2MS0wLjMzNXMxLjE1NSwwLjExMSwxLjY2MSwwLjMzNSAgICBzMC45NDgsMC41NDksMS4zMjYsMC45NzhjMC4zNzgsMC40MjksMC42NzQsMC45NjQsMC44ODksMS42MDZDMzMuMzY3LDQ2LjMyMSwzMy40NzUsNDcuMDY2LDMzLjQ3NSw0Ny45MTR6IE0yOS4yMzYsNTEuNzI5ICAgIGMwLjMzNywwLDAuNjU4LTAuMDY2LDAuOTY0LTAuMTk4YzAuMzA1LTAuMTMyLDAuNTc5LTAuMzQ5LDAuODItMC42NDljMC4yNDEtMC4zMDEsMC40MzEtMC42OTUsMC41NjctMS4xODMgICAgczAuMjA5LTEuMDgyLDAuMjE5LTEuNzg0Yy0wLjAwOS0wLjY4NC0wLjA4LTEuMjY1LTAuMjEyLTEuNzQzYy0wLjEzMi0wLjQ3OS0wLjMxNC0wLjg3My0wLjU0Ny0xLjE4M3MtMC40OTctMC41MzMtMC43OTMtMC42NyAgICBjLTAuMjk2LTAuMTM3LTAuNjA4LTAuMjA1LTAuOTM3LTAuMjA1Yy0wLjMzNywwLTAuNjU5LDAuMDYzLTAuOTY0LDAuMTkxYy0wLjMwNiwwLjEyOC0wLjU3OSwwLjM0NC0wLjgyLDAuNjQ5ICAgIGMtMC4yNDIsMC4zMDYtMC40MzEsMC42OTktMC41NjcsMS4xODNzLTAuMjEsMS4wNzUtMC4yMTksMS43NzdjMC4wMDksMC42ODQsMC4wOCwxLjI2NywwLjIxMiwxLjc1ICAgIGMwLjEzMiwwLjQ4MywwLjMxNCwwLjg3NywwLjU0NywxLjE4M3MwLjQ5NywwLjUyOCwwLjc5MywwLjY3QzI4LjU5Niw1MS42NTgsMjguOTA4LDUxLjcyOSwyOS4yMzYsNTEuNzI5eiIvPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNNDIuNjA3LDUxLjk3NWMtMC4zNzQsMC4zNjQtMC43OTgsMC42MzgtMS4yNzEsMC44MmMtMC40NzQsMC4xODMtMC45ODQsMC4yNzMtMS41MzEsMC4yNzMgICAgYy0wLjYwMiwwLTEuMTU1LTAuMTA5LTEuNjYxLTAuMzI4cy0wLjk0OC0wLjU0Mi0xLjMyNi0wLjk3MWMtMC4zNzgtMC40MjktMC42NzUtMC45NjYtMC44ODktMS42MTMgICAgYy0wLjIxNC0wLjY0Ny0wLjMyMS0xLjM5NS0wLjMyMS0yLjI0MnMwLjEwNy0xLjU5MywwLjMyMS0yLjIzNWMwLjIxNC0wLjY0MywwLjUxLTEuMTc4LDAuODg5LTEuNjA2ICAgIGMwLjM3OC0wLjQyOSwwLjgyMi0wLjc1NCwxLjMzMy0wLjk3OGMwLjUxLTAuMjI0LDEuMDYyLTAuMzM1LDEuNjU0LTAuMzM1YzAuNTQ3LDAsMS4wNTcsMC4wOTEsMS41MzEsMC4yNzMgICAgYzAuNDc0LDAuMTgzLDAuODk3LDAuNDU2LDEuMjcxLDAuODJsLTEuMTM1LDEuMDEyYy0wLjIyOC0wLjI2NS0wLjQ4MS0wLjQ1Ni0wLjc1OS0wLjU3NGMtMC4yNzgtMC4xMTgtMC41NjctMC4xNzgtMC44NjgtMC4xNzggICAgYy0wLjMzNywwLTAuNjU5LDAuMDYzLTAuOTY0LDAuMTkxYy0wLjMwNiwwLjEyOC0wLjU3OSwwLjM0NC0wLjgyLDAuNjQ5Yy0wLjI0MiwwLjMwNi0wLjQzMSwwLjY5OS0wLjU2NywxLjE4MyAgICBzLTAuMjEsMS4wNzUtMC4yMTksMS43NzdjMC4wMDksMC42ODQsMC4wOCwxLjI2NywwLjIxMiwxLjc1YzAuMTMyLDAuNDgzLDAuMzE0LDAuODc3LDAuNTQ3LDEuMTgzczAuNDk3LDAuNTI4LDAuNzkzLDAuNjcgICAgYzAuMjk2LDAuMTQyLDAuNjA4LDAuMjEyLDAuOTM3LDAuMjEyczAuNjM2LTAuMDYsMC45MjMtMC4xNzhzMC41NDktMC4zMSwwLjc4Ni0wLjU3NEw0Mi42MDcsNTEuOTc1eiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

cxco-root a:not([data-img~='true'])[href$='.pptx']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.pptx']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNGNjcxMkU7IiBkPSJNNDguMDM3LDU2SDcuOTYzQzcuMTU1LDU2LDYuNSw1NS4zNDUsNi41LDU0LjUzN1YzOWg0M3YxNS41MzdDNDkuNSw1NS4zNDUsNDguODQ1LDU2LDQ4LjAzNyw1NnoiLz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMTcuNTgxLDUzSDE1Ljk0VjQyLjkyNGgyLjg5OGMwLjQyOCwwLDAuODUyLDAuMDY4LDEuMjcxLDAuMjA1ICAgIGMwLjQxOSwwLjEzNywwLjc5NSwwLjM0MiwxLjEyOCwwLjYxNWMwLjMzMywwLjI3MywwLjYwMiwwLjYwNCwwLjgwNywwLjk5MXMwLjMwOCwwLjgyMiwwLjMwOCwxLjMwNiAgICBjMCwwLjUxMS0wLjA4NywwLjk3My0wLjI2LDEuMzg4Yy0wLjE3MywwLjQxNS0wLjQxNSwwLjc2NC0wLjcyNSwxLjA0NmMtMC4zMSwwLjI4Mi0wLjY4NCwwLjUwMS0xLjEyMSwwLjY1NiAgICBzLTAuOTIxLDAuMjMyLTEuNDQ5LDAuMjMyaC0xLjIxN1Y1M3ogTTE3LjU4MSw0NC4xNjh2My45OTJoMS41MDRjMC4yLDAsMC4zOTgtMC4wMzQsMC41OTUtMC4xMDMgICAgYzAuMTk2LTAuMDY4LDAuMzc2LTAuMTgsMC41NC0wLjMzNXMwLjI5Ni0wLjM3MSwwLjM5Ni0wLjY0OWMwLjEtMC4yNzgsMC4xNS0wLjYyMiwwLjE1LTEuMDMyYzAtMC4xNjQtMC4wMjMtMC4zNTQtMC4wNjgtMC41NjcgICAgYy0wLjA0Ni0wLjIxNC0wLjEzOS0wLjQxOS0wLjI4LTAuNjE1Yy0wLjE0Mi0wLjE5Ni0wLjM0LTAuMzYtMC41OTUtMC40OTJjLTAuMjU1LTAuMTMyLTAuNTkzLTAuMTk4LTEuMDEyLTAuMTk4SDE3LjU4MXoiLz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTI1Ljg1Myw1M2gtMS42NDFWNDIuOTI0aDIuODk4YzAuNDI4LDAsMC44NTIsMC4wNjgsMS4yNzEsMC4yMDUgICAgYzAuNDE5LDAuMTM3LDAuNzk1LDAuMzQyLDEuMTI4LDAuNjE1YzAuMzMzLDAuMjczLDAuNjAyLDAuNjA0LDAuODA3LDAuOTkxczAuMzA4LDAuODIyLDAuMzA4LDEuMzA2ICAgIGMwLDAuNTExLTAuMDg3LDAuOTczLTAuMjYsMS4zODhjLTAuMTczLDAuNDE1LTAuNDE1LDAuNzY0LTAuNzI1LDEuMDQ2Yy0wLjMxLDAuMjgyLTAuNjg0LDAuNTAxLTEuMTIxLDAuNjU2ICAgIHMtMC45MjEsMC4yMzItMS40NDksMC4yMzJoLTEuMjE3VjUzeiBNMjUuODUzLDQ0LjE2OHYzLjk5MmgxLjUwNGMwLjIsMCwwLjM5OC0wLjAzNCwwLjU5NS0wLjEwMyAgICBjMC4xOTYtMC4wNjgsMC4zNzYtMC4xOCwwLjU0LTAuMzM1czAuMjk2LTAuMzcxLDAuMzk2LTAuNjQ5YzAuMS0wLjI3OCwwLjE1LTAuNjIyLDAuMTUtMS4wMzJjMC0wLjE2NC0wLjAyMy0wLjM1NC0wLjA2OC0wLjU2NyAgICBjLTAuMDQ2LTAuMjE0LTAuMTM5LTAuNDE5LTAuMjgtMC42MTVjLTAuMTQyLTAuMTk2LTAuMzQtMC4zNi0wLjU5NS0wLjQ5MmMtMC4yNTUtMC4xMzItMC41OTMtMC4xOTgtMS4wMTItMC4xOThIMjUuODUzeiIvPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMzkuNjA2LDQyLjkyNHYxLjEyMWgtMy4wMDhWNTNoLTEuNjU0di04Ljk1NWgtMy4wMDh2LTEuMTIxSDM5LjYwNnoiLz4KCTwvZz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMzkuNSwzMGgtMjRWMTRoMjRWMzB6IE0xNy41LDI4aDIwVjE2aC0yMFYyOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMjAuNDk5LDM1Yy0wLjE3NSwwLTAuMzUzLTAuMDQ2LTAuNTE0LTAuMTQzYy0wLjQ3NC0wLjI4NC0wLjYyNy0wLjg5OC0wLjM0My0xLjM3MmwzLTUgICBjMC4yODQtMC40NzQsMC44OTgtMC42MjcsMS4zNzItMC4zNDNjMC40NzQsMC4yODQsMC42MjcsMC44OTgsMC4zNDMsMS4zNzJsLTMsNUMyMS4xNywzNC44MjcsMjAuODM5LDM1LDIwLjQ5OSwzNXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMzQuNTAxLDM1Yy0wLjM0LDAtMC42NzEtMC4xNzMtMC44NTgtMC40ODVsLTMtNWMtMC4yODQtMC40NzQtMC4xMzEtMS4wODgsMC4zNDMtMS4zNzIgICBjMC40NzQtMC4yODMsMS4wODgtMC4xMzEsMS4zNzIsMC4zNDNsMyw1YzAuMjg0LDAuNDc0LDAuMTMxLDEuMDg4LTAuMzQzLDEuMzcyQzM0Ljg1NCwzNC45NTQsMzQuNjc2LDM1LDM0LjUwMSwzNXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMjcuNSwxNmMtMC41NTIsMC0xLTAuNDQ3LTEtMXYtM2MwLTAuNTUzLDAuNDQ4LTEsMS0xczEsMC40NDcsMSwxdjNDMjguNSwxNS41NTMsMjguMDUyLDE2LDI3LjUsMTYgICB6Ii8+Cgk8cmVjdCB4PSIxNy41IiB5PSIxNiIgc3R5bGU9ImZpbGw6I0QzQ0NDOTsiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

cxco-root a:not([data-img~='true'])[href$='.pptm']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.pptm']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNGNjcxMkU7IiBkPSJNNDguMDM3LDU2SDcuOTYzQzcuMTU1LDU2LDYuNSw1NS4zNDUsNi41LDU0LjUzN1YzOWg0M3YxNS41MzdDNDkuNSw1NS4zNDUsNDguODQ1LDU2LDQ4LjAzNyw1NnoiLz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMTcuNTgxLDUzSDE1Ljk0VjQyLjkyNGgyLjg5OGMwLjQyOCwwLDAuODUyLDAuMDY4LDEuMjcxLDAuMjA1ICAgIGMwLjQxOSwwLjEzNywwLjc5NSwwLjM0MiwxLjEyOCwwLjYxNWMwLjMzMywwLjI3MywwLjYwMiwwLjYwNCwwLjgwNywwLjk5MXMwLjMwOCwwLjgyMiwwLjMwOCwxLjMwNiAgICBjMCwwLjUxMS0wLjA4NywwLjk3My0wLjI2LDEuMzg4Yy0wLjE3MywwLjQxNS0wLjQxNSwwLjc2NC0wLjcyNSwxLjA0NmMtMC4zMSwwLjI4Mi0wLjY4NCwwLjUwMS0xLjEyMSwwLjY1NiAgICBzLTAuOTIxLDAuMjMyLTEuNDQ5LDAuMjMyaC0xLjIxN1Y1M3ogTTE3LjU4MSw0NC4xNjh2My45OTJoMS41MDRjMC4yLDAsMC4zOTgtMC4wMzQsMC41OTUtMC4xMDMgICAgYzAuMTk2LTAuMDY4LDAuMzc2LTAuMTgsMC41NC0wLjMzNXMwLjI5Ni0wLjM3MSwwLjM5Ni0wLjY0OWMwLjEtMC4yNzgsMC4xNS0wLjYyMiwwLjE1LTEuMDMyYzAtMC4xNjQtMC4wMjMtMC4zNTQtMC4wNjgtMC41NjcgICAgYy0wLjA0Ni0wLjIxNC0wLjEzOS0wLjQxOS0wLjI4LTAuNjE1Yy0wLjE0Mi0wLjE5Ni0wLjM0LTAuMzYtMC41OTUtMC40OTJjLTAuMjU1LTAuMTMyLTAuNTkzLTAuMTk4LTEuMDEyLTAuMTk4SDE3LjU4MXoiLz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTI1Ljg1Myw1M2gtMS42NDFWNDIuOTI0aDIuODk4YzAuNDI4LDAsMC44NTIsMC4wNjgsMS4yNzEsMC4yMDUgICAgYzAuNDE5LDAuMTM3LDAuNzk1LDAuMzQyLDEuMTI4LDAuNjE1YzAuMzMzLDAuMjczLDAuNjAyLDAuNjA0LDAuODA3LDAuOTkxczAuMzA4LDAuODIyLDAuMzA4LDEuMzA2ICAgIGMwLDAuNTExLTAuMDg3LDAuOTczLTAuMjYsMS4zODhjLTAuMTczLDAuNDE1LTAuNDE1LDAuNzY0LTAuNzI1LDEuMDQ2Yy0wLjMxLDAuMjgyLTAuNjg0LDAuNTAxLTEuMTIxLDAuNjU2ICAgIHMtMC45MjEsMC4yMzItMS40NDksMC4yMzJoLTEuMjE3VjUzeiBNMjUuODUzLDQ0LjE2OHYzLjk5MmgxLjUwNGMwLjIsMCwwLjM5OC0wLjAzNCwwLjU5NS0wLjEwMyAgICBjMC4xOTYtMC4wNjgsMC4zNzYtMC4xOCwwLjU0LTAuMzM1czAuMjk2LTAuMzcxLDAuMzk2LTAuNjQ5YzAuMS0wLjI3OCwwLjE1LTAuNjIyLDAuMTUtMS4wMzJjMC0wLjE2NC0wLjAyMy0wLjM1NC0wLjA2OC0wLjU2NyAgICBjLTAuMDQ2LTAuMjE0LTAuMTM5LTAuNDE5LTAuMjgtMC42MTVjLTAuMTQyLTAuMTk2LTAuMzQtMC4zNi0wLjU5NS0wLjQ5MmMtMC4yNTUtMC4xMzItMC41OTMtMC4xOTgtMS4wMTItMC4xOThIMjUuODUzeiIvPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMzkuNjA2LDQyLjkyNHYxLjEyMWgtMy4wMDhWNTNoLTEuNjU0di04Ljk1NWgtMy4wMDh2LTEuMTIxSDM5LjYwNnoiLz4KCTwvZz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMzkuNSwzMGgtMjRWMTRoMjRWMzB6IE0xNy41LDI4aDIwVjE2aC0yMFYyOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMjAuNDk5LDM1Yy0wLjE3NSwwLTAuMzUzLTAuMDQ2LTAuNTE0LTAuMTQzYy0wLjQ3NC0wLjI4NC0wLjYyNy0wLjg5OC0wLjM0My0xLjM3MmwzLTUgICBjMC4yODQtMC40NzQsMC44OTgtMC42MjcsMS4zNzItMC4zNDNjMC40NzQsMC4yODQsMC42MjcsMC44OTgsMC4zNDMsMS4zNzJsLTMsNUMyMS4xNywzNC44MjcsMjAuODM5LDM1LDIwLjQ5OSwzNXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMzQuNTAxLDM1Yy0wLjM0LDAtMC42NzEtMC4xNzMtMC44NTgtMC40ODVsLTMtNWMtMC4yODQtMC40NzQtMC4xMzEtMS4wODgsMC4zNDMtMS4zNzIgICBjMC40NzQtMC4yODMsMS4wODgtMC4xMzEsMS4zNzIsMC4zNDNsMyw1YzAuMjg0LDAuNDc0LDAuMTMxLDEuMDg4LTAuMzQzLDEuMzcyQzM0Ljg1NCwzNC45NTQsMzQuNjc2LDM1LDM0LjUwMSwzNXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMjcuNSwxNmMtMC41NTIsMC0xLTAuNDQ3LTEtMXYtM2MwLTAuNTUzLDAuNDQ4LTEsMS0xczEsMC40NDcsMSwxdjNDMjguNSwxNS41NTMsMjguMDUyLDE2LDI3LjUsMTYgICB6Ii8+Cgk8cmVjdCB4PSIxNy41IiB5PSIxNiIgc3R5bGU9ImZpbGw6I0QzQ0NDOTsiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

cxco-root a:not([data-img~='true'])[href$='.potx']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.potx']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNGNjcxMkU7IiBkPSJNNDguMDM3LDU2SDcuOTYzQzcuMTU1LDU2LDYuNSw1NS4zNDUsNi41LDU0LjUzN1YzOWg0M3YxNS41MzdDNDkuNSw1NS4zNDUsNDguODQ1LDU2LDQ4LjAzNyw1NnoiLz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMTcuNTgxLDUzSDE1Ljk0VjQyLjkyNGgyLjg5OGMwLjQyOCwwLDAuODUyLDAuMDY4LDEuMjcxLDAuMjA1ICAgIGMwLjQxOSwwLjEzNywwLjc5NSwwLjM0MiwxLjEyOCwwLjYxNWMwLjMzMywwLjI3MywwLjYwMiwwLjYwNCwwLjgwNywwLjk5MXMwLjMwOCwwLjgyMiwwLjMwOCwxLjMwNiAgICBjMCwwLjUxMS0wLjA4NywwLjk3My0wLjI2LDEuMzg4Yy0wLjE3MywwLjQxNS0wLjQxNSwwLjc2NC0wLjcyNSwxLjA0NmMtMC4zMSwwLjI4Mi0wLjY4NCwwLjUwMS0xLjEyMSwwLjY1NiAgICBzLTAuOTIxLDAuMjMyLTEuNDQ5LDAuMjMyaC0xLjIxN1Y1M3ogTTE3LjU4MSw0NC4xNjh2My45OTJoMS41MDRjMC4yLDAsMC4zOTgtMC4wMzQsMC41OTUtMC4xMDMgICAgYzAuMTk2LTAuMDY4LDAuMzc2LTAuMTgsMC41NC0wLjMzNXMwLjI5Ni0wLjM3MSwwLjM5Ni0wLjY0OWMwLjEtMC4yNzgsMC4xNS0wLjYyMiwwLjE1LTEuMDMyYzAtMC4xNjQtMC4wMjMtMC4zNTQtMC4wNjgtMC41NjcgICAgYy0wLjA0Ni0wLjIxNC0wLjEzOS0wLjQxOS0wLjI4LTAuNjE1Yy0wLjE0Mi0wLjE5Ni0wLjM0LTAuMzYtMC41OTUtMC40OTJjLTAuMjU1LTAuMTMyLTAuNTkzLTAuMTk4LTEuMDEyLTAuMTk4SDE3LjU4MXoiLz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTI1Ljg1Myw1M2gtMS42NDFWNDIuOTI0aDIuODk4YzAuNDI4LDAsMC44NTIsMC4wNjgsMS4yNzEsMC4yMDUgICAgYzAuNDE5LDAuMTM3LDAuNzk1LDAuMzQyLDEuMTI4LDAuNjE1YzAuMzMzLDAuMjczLDAuNjAyLDAuNjA0LDAuODA3LDAuOTkxczAuMzA4LDAuODIyLDAuMzA4LDEuMzA2ICAgIGMwLDAuNTExLTAuMDg3LDAuOTczLTAuMjYsMS4zODhjLTAuMTczLDAuNDE1LTAuNDE1LDAuNzY0LTAuNzI1LDEuMDQ2Yy0wLjMxLDAuMjgyLTAuNjg0LDAuNTAxLTEuMTIxLDAuNjU2ICAgIHMtMC45MjEsMC4yMzItMS40NDksMC4yMzJoLTEuMjE3VjUzeiBNMjUuODUzLDQ0LjE2OHYzLjk5MmgxLjUwNGMwLjIsMCwwLjM5OC0wLjAzNCwwLjU5NS0wLjEwMyAgICBjMC4xOTYtMC4wNjgsMC4zNzYtMC4xOCwwLjU0LTAuMzM1czAuMjk2LTAuMzcxLDAuMzk2LTAuNjQ5YzAuMS0wLjI3OCwwLjE1LTAuNjIyLDAuMTUtMS4wMzJjMC0wLjE2NC0wLjAyMy0wLjM1NC0wLjA2OC0wLjU2NyAgICBjLTAuMDQ2LTAuMjE0LTAuMTM5LTAuNDE5LTAuMjgtMC42MTVjLTAuMTQyLTAuMTk2LTAuMzQtMC4zNi0wLjU5NS0wLjQ5MmMtMC4yNTUtMC4xMzItMC41OTMtMC4xOTgtMS4wMTItMC4xOThIMjUuODUzeiIvPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMzkuNjA2LDQyLjkyNHYxLjEyMWgtMy4wMDhWNTNoLTEuNjU0di04Ljk1NWgtMy4wMDh2LTEuMTIxSDM5LjYwNnoiLz4KCTwvZz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMzkuNSwzMGgtMjRWMTRoMjRWMzB6IE0xNy41LDI4aDIwVjE2aC0yMFYyOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMjAuNDk5LDM1Yy0wLjE3NSwwLTAuMzUzLTAuMDQ2LTAuNTE0LTAuMTQzYy0wLjQ3NC0wLjI4NC0wLjYyNy0wLjg5OC0wLjM0My0xLjM3MmwzLTUgICBjMC4yODQtMC40NzQsMC44OTgtMC42MjcsMS4zNzItMC4zNDNjMC40NzQsMC4yODQsMC42MjcsMC44OTgsMC4zNDMsMS4zNzJsLTMsNUMyMS4xNywzNC44MjcsMjAuODM5LDM1LDIwLjQ5OSwzNXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMzQuNTAxLDM1Yy0wLjM0LDAtMC42NzEtMC4xNzMtMC44NTgtMC40ODVsLTMtNWMtMC4yODQtMC40NzQtMC4xMzEtMS4wODgsMC4zNDMtMS4zNzIgICBjMC40NzQtMC4yODMsMS4wODgtMC4xMzEsMS4zNzIsMC4zNDNsMyw1YzAuMjg0LDAuNDc0LDAuMTMxLDEuMDg4LTAuMzQzLDEuMzcyQzM0Ljg1NCwzNC45NTQsMzQuNjc2LDM1LDM0LjUwMSwzNXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMjcuNSwxNmMtMC41NTIsMC0xLTAuNDQ3LTEtMXYtM2MwLTAuNTUzLDAuNDQ4LTEsMS0xczEsMC40NDcsMSwxdjNDMjguNSwxNS41NTMsMjguMDUyLDE2LDI3LjUsMTYgICB6Ii8+Cgk8cmVjdCB4PSIxNy41IiB5PSIxNiIgc3R5bGU9ImZpbGw6I0QzQ0NDOTsiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

cxco-root a:not([data-img~='true'])[href$='.potm']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.potm']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNGNjcxMkU7IiBkPSJNNDguMDM3LDU2SDcuOTYzQzcuMTU1LDU2LDYuNSw1NS4zNDUsNi41LDU0LjUzN1YzOWg0M3YxNS41MzdDNDkuNSw1NS4zNDUsNDguODQ1LDU2LDQ4LjAzNyw1NnoiLz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMTcuNTgxLDUzSDE1Ljk0VjQyLjkyNGgyLjg5OGMwLjQyOCwwLDAuODUyLDAuMDY4LDEuMjcxLDAuMjA1ICAgIGMwLjQxOSwwLjEzNywwLjc5NSwwLjM0MiwxLjEyOCwwLjYxNWMwLjMzMywwLjI3MywwLjYwMiwwLjYwNCwwLjgwNywwLjk5MXMwLjMwOCwwLjgyMiwwLjMwOCwxLjMwNiAgICBjMCwwLjUxMS0wLjA4NywwLjk3My0wLjI2LDEuMzg4Yy0wLjE3MywwLjQxNS0wLjQxNSwwLjc2NC0wLjcyNSwxLjA0NmMtMC4zMSwwLjI4Mi0wLjY4NCwwLjUwMS0xLjEyMSwwLjY1NiAgICBzLTAuOTIxLDAuMjMyLTEuNDQ5LDAuMjMyaC0xLjIxN1Y1M3ogTTE3LjU4MSw0NC4xNjh2My45OTJoMS41MDRjMC4yLDAsMC4zOTgtMC4wMzQsMC41OTUtMC4xMDMgICAgYzAuMTk2LTAuMDY4LDAuMzc2LTAuMTgsMC41NC0wLjMzNXMwLjI5Ni0wLjM3MSwwLjM5Ni0wLjY0OWMwLjEtMC4yNzgsMC4xNS0wLjYyMiwwLjE1LTEuMDMyYzAtMC4xNjQtMC4wMjMtMC4zNTQtMC4wNjgtMC41NjcgICAgYy0wLjA0Ni0wLjIxNC0wLjEzOS0wLjQxOS0wLjI4LTAuNjE1Yy0wLjE0Mi0wLjE5Ni0wLjM0LTAuMzYtMC41OTUtMC40OTJjLTAuMjU1LTAuMTMyLTAuNTkzLTAuMTk4LTEuMDEyLTAuMTk4SDE3LjU4MXoiLz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTI1Ljg1Myw1M2gtMS42NDFWNDIuOTI0aDIuODk4YzAuNDI4LDAsMC44NTIsMC4wNjgsMS4yNzEsMC4yMDUgICAgYzAuNDE5LDAuMTM3LDAuNzk1LDAuMzQyLDEuMTI4LDAuNjE1YzAuMzMzLDAuMjczLDAuNjAyLDAuNjA0LDAuODA3LDAuOTkxczAuMzA4LDAuODIyLDAuMzA4LDEuMzA2ICAgIGMwLDAuNTExLTAuMDg3LDAuOTczLTAuMjYsMS4zODhjLTAuMTczLDAuNDE1LTAuNDE1LDAuNzY0LTAuNzI1LDEuMDQ2Yy0wLjMxLDAuMjgyLTAuNjg0LDAuNTAxLTEuMTIxLDAuNjU2ICAgIHMtMC45MjEsMC4yMzItMS40NDksMC4yMzJoLTEuMjE3VjUzeiBNMjUuODUzLDQ0LjE2OHYzLjk5MmgxLjUwNGMwLjIsMCwwLjM5OC0wLjAzNCwwLjU5NS0wLjEwMyAgICBjMC4xOTYtMC4wNjgsMC4zNzYtMC4xOCwwLjU0LTAuMzM1czAuMjk2LTAuMzcxLDAuMzk2LTAuNjQ5YzAuMS0wLjI3OCwwLjE1LTAuNjIyLDAuMTUtMS4wMzJjMC0wLjE2NC0wLjAyMy0wLjM1NC0wLjA2OC0wLjU2NyAgICBjLTAuMDQ2LTAuMjE0LTAuMTM5LTAuNDE5LTAuMjgtMC42MTVjLTAuMTQyLTAuMTk2LTAuMzQtMC4zNi0wLjU5NS0wLjQ5MmMtMC4yNTUtMC4xMzItMC41OTMtMC4xOTgtMS4wMTItMC4xOThIMjUuODUzeiIvPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMzkuNjA2LDQyLjkyNHYxLjEyMWgtMy4wMDhWNTNoLTEuNjU0di04Ljk1NWgtMy4wMDh2LTEuMTIxSDM5LjYwNnoiLz4KCTwvZz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMzkuNSwzMGgtMjRWMTRoMjRWMzB6IE0xNy41LDI4aDIwVjE2aC0yMFYyOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMjAuNDk5LDM1Yy0wLjE3NSwwLTAuMzUzLTAuMDQ2LTAuNTE0LTAuMTQzYy0wLjQ3NC0wLjI4NC0wLjYyNy0wLjg5OC0wLjM0My0xLjM3MmwzLTUgICBjMC4yODQtMC40NzQsMC44OTgtMC42MjcsMS4zNzItMC4zNDNjMC40NzQsMC4yODQsMC42MjcsMC44OTgsMC4zNDMsMS4zNzJsLTMsNUMyMS4xNywzNC44MjcsMjAuODM5LDM1LDIwLjQ5OSwzNXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMzQuNTAxLDM1Yy0wLjM0LDAtMC42NzEtMC4xNzMtMC44NTgtMC40ODVsLTMtNWMtMC4yODQtMC40NzQtMC4xMzEtMS4wODgsMC4zNDMtMS4zNzIgICBjMC40NzQtMC4yODMsMS4wODgtMC4xMzEsMS4zNzIsMC4zNDNsMyw1YzAuMjg0LDAuNDc0LDAuMTMxLDEuMDg4LTAuMzQzLDEuMzcyQzM0Ljg1NCwzNC45NTQsMzQuNjc2LDM1LDM0LjUwMSwzNXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMjcuNSwxNmMtMC41NTIsMC0xLTAuNDQ3LTEtMXYtM2MwLTAuNTUzLDAuNDQ4LTEsMS0xczEsMC40NDcsMSwxdjNDMjguNSwxNS41NTMsMjguMDUyLDE2LDI3LjUsMTYgICB6Ii8+Cgk8cmVjdCB4PSIxNy41IiB5PSIxNiIgc3R5bGU9ImZpbGw6I0QzQ0NDOTsiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

cxco-root a:not([data-img~='true'])[href$='.ppam']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.ppam']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNGNjcxMkU7IiBkPSJNNDguMDM3LDU2SDcuOTYzQzcuMTU1LDU2LDYuNSw1NS4zNDUsNi41LDU0LjUzN1YzOWg0M3YxNS41MzdDNDkuNSw1NS4zNDUsNDguODQ1LDU2LDQ4LjAzNyw1NnoiLz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMTcuNTgxLDUzSDE1Ljk0VjQyLjkyNGgyLjg5OGMwLjQyOCwwLDAuODUyLDAuMDY4LDEuMjcxLDAuMjA1ICAgIGMwLjQxOSwwLjEzNywwLjc5NSwwLjM0MiwxLjEyOCwwLjYxNWMwLjMzMywwLjI3MywwLjYwMiwwLjYwNCwwLjgwNywwLjk5MXMwLjMwOCwwLjgyMiwwLjMwOCwxLjMwNiAgICBjMCwwLjUxMS0wLjA4NywwLjk3My0wLjI2LDEuMzg4Yy0wLjE3MywwLjQxNS0wLjQxNSwwLjc2NC0wLjcyNSwxLjA0NmMtMC4zMSwwLjI4Mi0wLjY4NCwwLjUwMS0xLjEyMSwwLjY1NiAgICBzLTAuOTIxLDAuMjMyLTEuNDQ5LDAuMjMyaC0xLjIxN1Y1M3ogTTE3LjU4MSw0NC4xNjh2My45OTJoMS41MDRjMC4yLDAsMC4zOTgtMC4wMzQsMC41OTUtMC4xMDMgICAgYzAuMTk2LTAuMDY4LDAuMzc2LTAuMTgsMC41NC0wLjMzNXMwLjI5Ni0wLjM3MSwwLjM5Ni0wLjY0OWMwLjEtMC4yNzgsMC4xNS0wLjYyMiwwLjE1LTEuMDMyYzAtMC4xNjQtMC4wMjMtMC4zNTQtMC4wNjgtMC41NjcgICAgYy0wLjA0Ni0wLjIxNC0wLjEzOS0wLjQxOS0wLjI4LTAuNjE1Yy0wLjE0Mi0wLjE5Ni0wLjM0LTAuMzYtMC41OTUtMC40OTJjLTAuMjU1LTAuMTMyLTAuNTkzLTAuMTk4LTEuMDEyLTAuMTk4SDE3LjU4MXoiLz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTI1Ljg1Myw1M2gtMS42NDFWNDIuOTI0aDIuODk4YzAuNDI4LDAsMC44NTIsMC4wNjgsMS4yNzEsMC4yMDUgICAgYzAuNDE5LDAuMTM3LDAuNzk1LDAuMzQyLDEuMTI4LDAuNjE1YzAuMzMzLDAuMjczLDAuNjAyLDAuNjA0LDAuODA3LDAuOTkxczAuMzA4LDAuODIyLDAuMzA4LDEuMzA2ICAgIGMwLDAuNTExLTAuMDg3LDAuOTczLTAuMjYsMS4zODhjLTAuMTczLDAuNDE1LTAuNDE1LDAuNzY0LTAuNzI1LDEuMDQ2Yy0wLjMxLDAuMjgyLTAuNjg0LDAuNTAxLTEuMTIxLDAuNjU2ICAgIHMtMC45MjEsMC4yMzItMS40NDksMC4yMzJoLTEuMjE3VjUzeiBNMjUuODUzLDQ0LjE2OHYzLjk5MmgxLjUwNGMwLjIsMCwwLjM5OC0wLjAzNCwwLjU5NS0wLjEwMyAgICBjMC4xOTYtMC4wNjgsMC4zNzYtMC4xOCwwLjU0LTAuMzM1czAuMjk2LTAuMzcxLDAuMzk2LTAuNjQ5YzAuMS0wLjI3OCwwLjE1LTAuNjIyLDAuMTUtMS4wMzJjMC0wLjE2NC0wLjAyMy0wLjM1NC0wLjA2OC0wLjU2NyAgICBjLTAuMDQ2LTAuMjE0LTAuMTM5LTAuNDE5LTAuMjgtMC42MTVjLTAuMTQyLTAuMTk2LTAuMzQtMC4zNi0wLjU5NS0wLjQ5MmMtMC4yNTUtMC4xMzItMC41OTMtMC4xOTgtMS4wMTItMC4xOThIMjUuODUzeiIvPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMzkuNjA2LDQyLjkyNHYxLjEyMWgtMy4wMDhWNTNoLTEuNjU0di04Ljk1NWgtMy4wMDh2LTEuMTIxSDM5LjYwNnoiLz4KCTwvZz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMzkuNSwzMGgtMjRWMTRoMjRWMzB6IE0xNy41LDI4aDIwVjE2aC0yMFYyOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMjAuNDk5LDM1Yy0wLjE3NSwwLTAuMzUzLTAuMDQ2LTAuNTE0LTAuMTQzYy0wLjQ3NC0wLjI4NC0wLjYyNy0wLjg5OC0wLjM0My0xLjM3MmwzLTUgICBjMC4yODQtMC40NzQsMC44OTgtMC42MjcsMS4zNzItMC4zNDNjMC40NzQsMC4yODQsMC42MjcsMC44OTgsMC4zNDMsMS4zNzJsLTMsNUMyMS4xNywzNC44MjcsMjAuODM5LDM1LDIwLjQ5OSwzNXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMzQuNTAxLDM1Yy0wLjM0LDAtMC42NzEtMC4xNzMtMC44NTgtMC40ODVsLTMtNWMtMC4yODQtMC40NzQtMC4xMzEtMS4wODgsMC4zNDMtMS4zNzIgICBjMC40NzQtMC4yODMsMS4wODgtMC4xMzEsMS4zNzIsMC4zNDNsMyw1YzAuMjg0LDAuNDc0LDAuMTMxLDEuMDg4LTAuMzQzLDEuMzcyQzM0Ljg1NCwzNC45NTQsMzQuNjc2LDM1LDM0LjUwMSwzNXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMjcuNSwxNmMtMC41NTIsMC0xLTAuNDQ3LTEtMXYtM2MwLTAuNTUzLDAuNDQ4LTEsMS0xczEsMC40NDcsMSwxdjNDMjguNSwxNS41NTMsMjguMDUyLDE2LDI3LjUsMTYgICB6Ii8+Cgk8cmVjdCB4PSIxNy41IiB5PSIxNiIgc3R5bGU9ImZpbGw6I0QzQ0NDOTsiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

cxco-root a:not([data-img~='true'])[href$='.ppsx']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.ppsx']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNGNjcxMkU7IiBkPSJNNDguMDM3LDU2SDcuOTYzQzcuMTU1LDU2LDYuNSw1NS4zNDUsNi41LDU0LjUzN1YzOWg0M3YxNS41MzdDNDkuNSw1NS4zNDUsNDguODQ1LDU2LDQ4LjAzNyw1NnoiLz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMTcuNTgxLDUzSDE1Ljk0VjQyLjkyNGgyLjg5OGMwLjQyOCwwLDAuODUyLDAuMDY4LDEuMjcxLDAuMjA1ICAgIGMwLjQxOSwwLjEzNywwLjc5NSwwLjM0MiwxLjEyOCwwLjYxNWMwLjMzMywwLjI3MywwLjYwMiwwLjYwNCwwLjgwNywwLjk5MXMwLjMwOCwwLjgyMiwwLjMwOCwxLjMwNiAgICBjMCwwLjUxMS0wLjA4NywwLjk3My0wLjI2LDEuMzg4Yy0wLjE3MywwLjQxNS0wLjQxNSwwLjc2NC0wLjcyNSwxLjA0NmMtMC4zMSwwLjI4Mi0wLjY4NCwwLjUwMS0xLjEyMSwwLjY1NiAgICBzLTAuOTIxLDAuMjMyLTEuNDQ5LDAuMjMyaC0xLjIxN1Y1M3ogTTE3LjU4MSw0NC4xNjh2My45OTJoMS41MDRjMC4yLDAsMC4zOTgtMC4wMzQsMC41OTUtMC4xMDMgICAgYzAuMTk2LTAuMDY4LDAuMzc2LTAuMTgsMC41NC0wLjMzNXMwLjI5Ni0wLjM3MSwwLjM5Ni0wLjY0OWMwLjEtMC4yNzgsMC4xNS0wLjYyMiwwLjE1LTEuMDMyYzAtMC4xNjQtMC4wMjMtMC4zNTQtMC4wNjgtMC41NjcgICAgYy0wLjA0Ni0wLjIxNC0wLjEzOS0wLjQxOS0wLjI4LTAuNjE1Yy0wLjE0Mi0wLjE5Ni0wLjM0LTAuMzYtMC41OTUtMC40OTJjLTAuMjU1LTAuMTMyLTAuNTkzLTAuMTk4LTEuMDEyLTAuMTk4SDE3LjU4MXoiLz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTI1Ljg1Myw1M2gtMS42NDFWNDIuOTI0aDIuODk4YzAuNDI4LDAsMC44NTIsMC4wNjgsMS4yNzEsMC4yMDUgICAgYzAuNDE5LDAuMTM3LDAuNzk1LDAuMzQyLDEuMTI4LDAuNjE1YzAuMzMzLDAuMjczLDAuNjAyLDAuNjA0LDAuODA3LDAuOTkxczAuMzA4LDAuODIyLDAuMzA4LDEuMzA2ICAgIGMwLDAuNTExLTAuMDg3LDAuOTczLTAuMjYsMS4zODhjLTAuMTczLDAuNDE1LTAuNDE1LDAuNzY0LTAuNzI1LDEuMDQ2Yy0wLjMxLDAuMjgyLTAuNjg0LDAuNTAxLTEuMTIxLDAuNjU2ICAgIHMtMC45MjEsMC4yMzItMS40NDksMC4yMzJoLTEuMjE3VjUzeiBNMjUuODUzLDQ0LjE2OHYzLjk5MmgxLjUwNGMwLjIsMCwwLjM5OC0wLjAzNCwwLjU5NS0wLjEwMyAgICBjMC4xOTYtMC4wNjgsMC4zNzYtMC4xOCwwLjU0LTAuMzM1czAuMjk2LTAuMzcxLDAuMzk2LTAuNjQ5YzAuMS0wLjI3OCwwLjE1LTAuNjIyLDAuMTUtMS4wMzJjMC0wLjE2NC0wLjAyMy0wLjM1NC0wLjA2OC0wLjU2NyAgICBjLTAuMDQ2LTAuMjE0LTAuMTM5LTAuNDE5LTAuMjgtMC42MTVjLTAuMTQyLTAuMTk2LTAuMzQtMC4zNi0wLjU5NS0wLjQ5MmMtMC4yNTUtMC4xMzItMC41OTMtMC4xOTgtMS4wMTItMC4xOThIMjUuODUzeiIvPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMzkuNjA2LDQyLjkyNHYxLjEyMWgtMy4wMDhWNTNoLTEuNjU0di04Ljk1NWgtMy4wMDh2LTEuMTIxSDM5LjYwNnoiLz4KCTwvZz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMzkuNSwzMGgtMjRWMTRoMjRWMzB6IE0xNy41LDI4aDIwVjE2aC0yMFYyOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMjAuNDk5LDM1Yy0wLjE3NSwwLTAuMzUzLTAuMDQ2LTAuNTE0LTAuMTQzYy0wLjQ3NC0wLjI4NC0wLjYyNy0wLjg5OC0wLjM0My0xLjM3MmwzLTUgICBjMC4yODQtMC40NzQsMC44OTgtMC42MjcsMS4zNzItMC4zNDNjMC40NzQsMC4yODQsMC42MjcsMC44OTgsMC4zNDMsMS4zNzJsLTMsNUMyMS4xNywzNC44MjcsMjAuODM5LDM1LDIwLjQ5OSwzNXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMzQuNTAxLDM1Yy0wLjM0LDAtMC42NzEtMC4xNzMtMC44NTgtMC40ODVsLTMtNWMtMC4yODQtMC40NzQtMC4xMzEtMS4wODgsMC4zNDMtMS4zNzIgICBjMC40NzQtMC4yODMsMS4wODgtMC4xMzEsMS4zNzIsMC4zNDNsMyw1YzAuMjg0LDAuNDc0LDAuMTMxLDEuMDg4LTAuMzQzLDEuMzcyQzM0Ljg1NCwzNC45NTQsMzQuNjc2LDM1LDM0LjUwMSwzNXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMjcuNSwxNmMtMC41NTIsMC0xLTAuNDQ3LTEtMXYtM2MwLTAuNTUzLDAuNDQ4LTEsMS0xczEsMC40NDcsMSwxdjNDMjguNSwxNS41NTMsMjguMDUyLDE2LDI3LjUsMTYgICB6Ii8+Cgk8cmVjdCB4PSIxNy41IiB5PSIxNiIgc3R5bGU9ImZpbGw6I0QzQ0NDOTsiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

cxco-root a:not([data-img~='true'])[href$='.ppsm']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.ppsm']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNGNjcxMkU7IiBkPSJNNDguMDM3LDU2SDcuOTYzQzcuMTU1LDU2LDYuNSw1NS4zNDUsNi41LDU0LjUzN1YzOWg0M3YxNS41MzdDNDkuNSw1NS4zNDUsNDguODQ1LDU2LDQ4LjAzNyw1NnoiLz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMTcuNTgxLDUzSDE1Ljk0VjQyLjkyNGgyLjg5OGMwLjQyOCwwLDAuODUyLDAuMDY4LDEuMjcxLDAuMjA1ICAgIGMwLjQxOSwwLjEzNywwLjc5NSwwLjM0MiwxLjEyOCwwLjYxNWMwLjMzMywwLjI3MywwLjYwMiwwLjYwNCwwLjgwNywwLjk5MXMwLjMwOCwwLjgyMiwwLjMwOCwxLjMwNiAgICBjMCwwLjUxMS0wLjA4NywwLjk3My0wLjI2LDEuMzg4Yy0wLjE3MywwLjQxNS0wLjQxNSwwLjc2NC0wLjcyNSwxLjA0NmMtMC4zMSwwLjI4Mi0wLjY4NCwwLjUwMS0xLjEyMSwwLjY1NiAgICBzLTAuOTIxLDAuMjMyLTEuNDQ5LDAuMjMyaC0xLjIxN1Y1M3ogTTE3LjU4MSw0NC4xNjh2My45OTJoMS41MDRjMC4yLDAsMC4zOTgtMC4wMzQsMC41OTUtMC4xMDMgICAgYzAuMTk2LTAuMDY4LDAuMzc2LTAuMTgsMC41NC0wLjMzNXMwLjI5Ni0wLjM3MSwwLjM5Ni0wLjY0OWMwLjEtMC4yNzgsMC4xNS0wLjYyMiwwLjE1LTEuMDMyYzAtMC4xNjQtMC4wMjMtMC4zNTQtMC4wNjgtMC41NjcgICAgYy0wLjA0Ni0wLjIxNC0wLjEzOS0wLjQxOS0wLjI4LTAuNjE1Yy0wLjE0Mi0wLjE5Ni0wLjM0LTAuMzYtMC41OTUtMC40OTJjLTAuMjU1LTAuMTMyLTAuNTkzLTAuMTk4LTEuMDEyLTAuMTk4SDE3LjU4MXoiLz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTI1Ljg1Myw1M2gtMS42NDFWNDIuOTI0aDIuODk4YzAuNDI4LDAsMC44NTIsMC4wNjgsMS4yNzEsMC4yMDUgICAgYzAuNDE5LDAuMTM3LDAuNzk1LDAuMzQyLDEuMTI4LDAuNjE1YzAuMzMzLDAuMjczLDAuNjAyLDAuNjA0LDAuODA3LDAuOTkxczAuMzA4LDAuODIyLDAuMzA4LDEuMzA2ICAgIGMwLDAuNTExLTAuMDg3LDAuOTczLTAuMjYsMS4zODhjLTAuMTczLDAuNDE1LTAuNDE1LDAuNzY0LTAuNzI1LDEuMDQ2Yy0wLjMxLDAuMjgyLTAuNjg0LDAuNTAxLTEuMTIxLDAuNjU2ICAgIHMtMC45MjEsMC4yMzItMS40NDksMC4yMzJoLTEuMjE3VjUzeiBNMjUuODUzLDQ0LjE2OHYzLjk5MmgxLjUwNGMwLjIsMCwwLjM5OC0wLjAzNCwwLjU5NS0wLjEwMyAgICBjMC4xOTYtMC4wNjgsMC4zNzYtMC4xOCwwLjU0LTAuMzM1czAuMjk2LTAuMzcxLDAuMzk2LTAuNjQ5YzAuMS0wLjI3OCwwLjE1LTAuNjIyLDAuMTUtMS4wMzJjMC0wLjE2NC0wLjAyMy0wLjM1NC0wLjA2OC0wLjU2NyAgICBjLTAuMDQ2LTAuMjE0LTAuMTM5LTAuNDE5LTAuMjgtMC42MTVjLTAuMTQyLTAuMTk2LTAuMzQtMC4zNi0wLjU5NS0wLjQ5MmMtMC4yNTUtMC4xMzItMC41OTMtMC4xOTgtMS4wMTItMC4xOThIMjUuODUzeiIvPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMzkuNjA2LDQyLjkyNHYxLjEyMWgtMy4wMDhWNTNoLTEuNjU0di04Ljk1NWgtMy4wMDh2LTEuMTIxSDM5LjYwNnoiLz4KCTwvZz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMzkuNSwzMGgtMjRWMTRoMjRWMzB6IE0xNy41LDI4aDIwVjE2aC0yMFYyOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMjAuNDk5LDM1Yy0wLjE3NSwwLTAuMzUzLTAuMDQ2LTAuNTE0LTAuMTQzYy0wLjQ3NC0wLjI4NC0wLjYyNy0wLjg5OC0wLjM0My0xLjM3MmwzLTUgICBjMC4yODQtMC40NzQsMC44OTgtMC42MjcsMS4zNzItMC4zNDNjMC40NzQsMC4yODQsMC42MjcsMC44OTgsMC4zNDMsMS4zNzJsLTMsNUMyMS4xNywzNC44MjcsMjAuODM5LDM1LDIwLjQ5OSwzNXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMzQuNTAxLDM1Yy0wLjM0LDAtMC42NzEtMC4xNzMtMC44NTgtMC40ODVsLTMtNWMtMC4yODQtMC40NzQtMC4xMzEtMS4wODgsMC4zNDMtMS4zNzIgICBjMC40NzQtMC4yODMsMS4wODgtMC4xMzEsMS4zNzIsMC4zNDNsMyw1YzAuMjg0LDAuNDc0LDAuMTMxLDEuMDg4LTAuMzQzLDEuMzcyQzM0Ljg1NCwzNC45NTQsMzQuNjc2LDM1LDM0LjUwMSwzNXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMjcuNSwxNmMtMC41NTIsMC0xLTAuNDQ3LTEtMXYtM2MwLTAuNTUzLDAuNDQ4LTEsMS0xczEsMC40NDcsMSwxdjNDMjguNSwxNS41NTMsMjguMDUyLDE2LDI3LjUsMTYgICB6Ii8+Cgk8cmVjdCB4PSIxNy41IiB5PSIxNiIgc3R5bGU9ImZpbGw6I0QzQ0NDOTsiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

cxco-root a:not([data-img~='true'])[href$='.sldx']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.sldx']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNGNjcxMkU7IiBkPSJNNDguMDM3LDU2SDcuOTYzQzcuMTU1LDU2LDYuNSw1NS4zNDUsNi41LDU0LjUzN1YzOWg0M3YxNS41MzdDNDkuNSw1NS4zNDUsNDguODQ1LDU2LDQ4LjAzNyw1NnoiLz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMTcuNTgxLDUzSDE1Ljk0VjQyLjkyNGgyLjg5OGMwLjQyOCwwLDAuODUyLDAuMDY4LDEuMjcxLDAuMjA1ICAgIGMwLjQxOSwwLjEzNywwLjc5NSwwLjM0MiwxLjEyOCwwLjYxNWMwLjMzMywwLjI3MywwLjYwMiwwLjYwNCwwLjgwNywwLjk5MXMwLjMwOCwwLjgyMiwwLjMwOCwxLjMwNiAgICBjMCwwLjUxMS0wLjA4NywwLjk3My0wLjI2LDEuMzg4Yy0wLjE3MywwLjQxNS0wLjQxNSwwLjc2NC0wLjcyNSwxLjA0NmMtMC4zMSwwLjI4Mi0wLjY4NCwwLjUwMS0xLjEyMSwwLjY1NiAgICBzLTAuOTIxLDAuMjMyLTEuNDQ5LDAuMjMyaC0xLjIxN1Y1M3ogTTE3LjU4MSw0NC4xNjh2My45OTJoMS41MDRjMC4yLDAsMC4zOTgtMC4wMzQsMC41OTUtMC4xMDMgICAgYzAuMTk2LTAuMDY4LDAuMzc2LTAuMTgsMC41NC0wLjMzNXMwLjI5Ni0wLjM3MSwwLjM5Ni0wLjY0OWMwLjEtMC4yNzgsMC4xNS0wLjYyMiwwLjE1LTEuMDMyYzAtMC4xNjQtMC4wMjMtMC4zNTQtMC4wNjgtMC41NjcgICAgYy0wLjA0Ni0wLjIxNC0wLjEzOS0wLjQxOS0wLjI4LTAuNjE1Yy0wLjE0Mi0wLjE5Ni0wLjM0LTAuMzYtMC41OTUtMC40OTJjLTAuMjU1LTAuMTMyLTAuNTkzLTAuMTk4LTEuMDEyLTAuMTk4SDE3LjU4MXoiLz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTI1Ljg1Myw1M2gtMS42NDFWNDIuOTI0aDIuODk4YzAuNDI4LDAsMC44NTIsMC4wNjgsMS4yNzEsMC4yMDUgICAgYzAuNDE5LDAuMTM3LDAuNzk1LDAuMzQyLDEuMTI4LDAuNjE1YzAuMzMzLDAuMjczLDAuNjAyLDAuNjA0LDAuODA3LDAuOTkxczAuMzA4LDAuODIyLDAuMzA4LDEuMzA2ICAgIGMwLDAuNTExLTAuMDg3LDAuOTczLTAuMjYsMS4zODhjLTAuMTczLDAuNDE1LTAuNDE1LDAuNzY0LTAuNzI1LDEuMDQ2Yy0wLjMxLDAuMjgyLTAuNjg0LDAuNTAxLTEuMTIxLDAuNjU2ICAgIHMtMC45MjEsMC4yMzItMS40NDksMC4yMzJoLTEuMjE3VjUzeiBNMjUuODUzLDQ0LjE2OHYzLjk5MmgxLjUwNGMwLjIsMCwwLjM5OC0wLjAzNCwwLjU5NS0wLjEwMyAgICBjMC4xOTYtMC4wNjgsMC4zNzYtMC4xOCwwLjU0LTAuMzM1czAuMjk2LTAuMzcxLDAuMzk2LTAuNjQ5YzAuMS0wLjI3OCwwLjE1LTAuNjIyLDAuMTUtMS4wMzJjMC0wLjE2NC0wLjAyMy0wLjM1NC0wLjA2OC0wLjU2NyAgICBjLTAuMDQ2LTAuMjE0LTAuMTM5LTAuNDE5LTAuMjgtMC42MTVjLTAuMTQyLTAuMTk2LTAuMzQtMC4zNi0wLjU5NS0wLjQ5MmMtMC4yNTUtMC4xMzItMC41OTMtMC4xOTgtMS4wMTItMC4xOThIMjUuODUzeiIvPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMzkuNjA2LDQyLjkyNHYxLjEyMWgtMy4wMDhWNTNoLTEuNjU0di04Ljk1NWgtMy4wMDh2LTEuMTIxSDM5LjYwNnoiLz4KCTwvZz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMzkuNSwzMGgtMjRWMTRoMjRWMzB6IE0xNy41LDI4aDIwVjE2aC0yMFYyOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMjAuNDk5LDM1Yy0wLjE3NSwwLTAuMzUzLTAuMDQ2LTAuNTE0LTAuMTQzYy0wLjQ3NC0wLjI4NC0wLjYyNy0wLjg5OC0wLjM0My0xLjM3MmwzLTUgICBjMC4yODQtMC40NzQsMC44OTgtMC42MjcsMS4zNzItMC4zNDNjMC40NzQsMC4yODQsMC42MjcsMC44OTgsMC4zNDMsMS4zNzJsLTMsNUMyMS4xNywzNC44MjcsMjAuODM5LDM1LDIwLjQ5OSwzNXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMzQuNTAxLDM1Yy0wLjM0LDAtMC42NzEtMC4xNzMtMC44NTgtMC40ODVsLTMtNWMtMC4yODQtMC40NzQtMC4xMzEtMS4wODgsMC4zNDMtMS4zNzIgICBjMC40NzQtMC4yODMsMS4wODgtMC4xMzEsMS4zNzIsMC4zNDNsMyw1YzAuMjg0LDAuNDc0LDAuMTMxLDEuMDg4LTAuMzQzLDEuMzcyQzM0Ljg1NCwzNC45NTQsMzQuNjc2LDM1LDM0LjUwMSwzNXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMjcuNSwxNmMtMC41NTIsMC0xLTAuNDQ3LTEtMXYtM2MwLTAuNTUzLDAuNDQ4LTEsMS0xczEsMC40NDcsMSwxdjNDMjguNSwxNS41NTMsMjguMDUyLDE2LDI3LjUsMTYgICB6Ii8+Cgk8cmVjdCB4PSIxNy41IiB5PSIxNiIgc3R5bGU9ImZpbGw6I0QzQ0NDOTsiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

cxco-root a:not([data-img~='true'])[href$='.sldm']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.sldm']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNGNjcxMkU7IiBkPSJNNDguMDM3LDU2SDcuOTYzQzcuMTU1LDU2LDYuNSw1NS4zNDUsNi41LDU0LjUzN1YzOWg0M3YxNS41MzdDNDkuNSw1NS4zNDUsNDguODQ1LDU2LDQ4LjAzNyw1NnoiLz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMTcuNTgxLDUzSDE1Ljk0VjQyLjkyNGgyLjg5OGMwLjQyOCwwLDAuODUyLDAuMDY4LDEuMjcxLDAuMjA1ICAgIGMwLjQxOSwwLjEzNywwLjc5NSwwLjM0MiwxLjEyOCwwLjYxNWMwLjMzMywwLjI3MywwLjYwMiwwLjYwNCwwLjgwNywwLjk5MXMwLjMwOCwwLjgyMiwwLjMwOCwxLjMwNiAgICBjMCwwLjUxMS0wLjA4NywwLjk3My0wLjI2LDEuMzg4Yy0wLjE3MywwLjQxNS0wLjQxNSwwLjc2NC0wLjcyNSwxLjA0NmMtMC4zMSwwLjI4Mi0wLjY4NCwwLjUwMS0xLjEyMSwwLjY1NiAgICBzLTAuOTIxLDAuMjMyLTEuNDQ5LDAuMjMyaC0xLjIxN1Y1M3ogTTE3LjU4MSw0NC4xNjh2My45OTJoMS41MDRjMC4yLDAsMC4zOTgtMC4wMzQsMC41OTUtMC4xMDMgICAgYzAuMTk2LTAuMDY4LDAuMzc2LTAuMTgsMC41NC0wLjMzNXMwLjI5Ni0wLjM3MSwwLjM5Ni0wLjY0OWMwLjEtMC4yNzgsMC4xNS0wLjYyMiwwLjE1LTEuMDMyYzAtMC4xNjQtMC4wMjMtMC4zNTQtMC4wNjgtMC41NjcgICAgYy0wLjA0Ni0wLjIxNC0wLjEzOS0wLjQxOS0wLjI4LTAuNjE1Yy0wLjE0Mi0wLjE5Ni0wLjM0LTAuMzYtMC41OTUtMC40OTJjLTAuMjU1LTAuMTMyLTAuNTkzLTAuMTk4LTEuMDEyLTAuMTk4SDE3LjU4MXoiLz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTI1Ljg1Myw1M2gtMS42NDFWNDIuOTI0aDIuODk4YzAuNDI4LDAsMC44NTIsMC4wNjgsMS4yNzEsMC4yMDUgICAgYzAuNDE5LDAuMTM3LDAuNzk1LDAuMzQyLDEuMTI4LDAuNjE1YzAuMzMzLDAuMjczLDAuNjAyLDAuNjA0LDAuODA3LDAuOTkxczAuMzA4LDAuODIyLDAuMzA4LDEuMzA2ICAgIGMwLDAuNTExLTAuMDg3LDAuOTczLTAuMjYsMS4zODhjLTAuMTczLDAuNDE1LTAuNDE1LDAuNzY0LTAuNzI1LDEuMDQ2Yy0wLjMxLDAuMjgyLTAuNjg0LDAuNTAxLTEuMTIxLDAuNjU2ICAgIHMtMC45MjEsMC4yMzItMS40NDksMC4yMzJoLTEuMjE3VjUzeiBNMjUuODUzLDQ0LjE2OHYzLjk5MmgxLjUwNGMwLjIsMCwwLjM5OC0wLjAzNCwwLjU5NS0wLjEwMyAgICBjMC4xOTYtMC4wNjgsMC4zNzYtMC4xOCwwLjU0LTAuMzM1czAuMjk2LTAuMzcxLDAuMzk2LTAuNjQ5YzAuMS0wLjI3OCwwLjE1LTAuNjIyLDAuMTUtMS4wMzJjMC0wLjE2NC0wLjAyMy0wLjM1NC0wLjA2OC0wLjU2NyAgICBjLTAuMDQ2LTAuMjE0LTAuMTM5LTAuNDE5LTAuMjgtMC42MTVjLTAuMTQyLTAuMTk2LTAuMzQtMC4zNi0wLjU5NS0wLjQ5MmMtMC4yNTUtMC4xMzItMC41OTMtMC4xOTgtMS4wMTItMC4xOThIMjUuODUzeiIvPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMzkuNjA2LDQyLjkyNHYxLjEyMWgtMy4wMDhWNTNoLTEuNjU0di04Ljk1NWgtMy4wMDh2LTEuMTIxSDM5LjYwNnoiLz4KCTwvZz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMzkuNSwzMGgtMjRWMTRoMjRWMzB6IE0xNy41LDI4aDIwVjE2aC0yMFYyOHoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMjAuNDk5LDM1Yy0wLjE3NSwwLTAuMzUzLTAuMDQ2LTAuNTE0LTAuMTQzYy0wLjQ3NC0wLjI4NC0wLjYyNy0wLjg5OC0wLjM0My0xLjM3MmwzLTUgICBjMC4yODQtMC40NzQsMC44OTgtMC42MjcsMS4zNzItMC4zNDNjMC40NzQsMC4yODQsMC42MjcsMC44OTgsMC4zNDMsMS4zNzJsLTMsNUMyMS4xNywzNC44MjcsMjAuODM5LDM1LDIwLjQ5OSwzNXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMzQuNTAxLDM1Yy0wLjM0LDAtMC42NzEtMC4xNzMtMC44NTgtMC40ODVsLTMtNWMtMC4yODQtMC40NzQtMC4xMzEtMS4wODgsMC4zNDMtMS4zNzIgICBjMC40NzQtMC4yODMsMS4wODgtMC4xMzEsMS4zNzIsMC4zNDNsMyw1YzAuMjg0LDAuNDc0LDAuMTMxLDEuMDg4LTAuMzQzLDEuMzcyQzM0Ljg1NCwzNC45NTQsMzQuNjc2LDM1LDM0LjUwMSwzNXoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiNDOEJEQjg7IiBkPSJNMjcuNSwxNmMtMC41NTIsMC0xLTAuNDQ3LTEtMXYtM2MwLTAuNTUzLDAuNDQ4LTEsMS0xczEsMC40NDcsMSwxdjNDMjguNSwxNS41NTMsMjguMDUyLDE2LDI3LjUsMTYgICB6Ii8+Cgk8cmVjdCB4PSIxNy41IiB5PSIxNiIgc3R5bGU9ImZpbGw6I0QzQ0NDOTsiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

cxco-root a:not([data-img~='true'])[href$='.xlsx']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.xlsx']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM5MUNEQTA7IiBkPSJNNDguMDM3LDU2SDcuOTYzQzcuMTU1LDU2LDYuNSw1NS4zNDUsNi41LDU0LjUzN1YzOWg0M3YxNS41MzdDNDkuNSw1NS4zNDUsNDguODQ1LDU2LDQ4LjAzNyw1NnoiLz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMjAuMzc5LDQ4LjEwNUwyMi45MzYsNTNoLTEuOWwtMS42LTMuODAxaC0wLjEzN0wxNy41NzYsNTNoLTEuOWwyLjU1Ny00Ljg5NWwtMi43MjEtNS4xODJoMS44NzMgICAgbDEuNzc3LDQuMTAyaDAuMTM3bDEuOTI4LTQuMTAySDIzLjFMMjAuMzc5LDQ4LjEwNXoiLz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTI3LjAzNyw0Mi45MjR2OC44MzJoNC42MzVWNTNoLTYuMzAzVjQyLjkyNEgyNy4wMzd6Ii8+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGQ9Ik0zOS4wNDEsNTAuMjM4YzAsMC4zNjQtMC4wNzUsMC43MTgtMC4yMjYsMS4wNlMzOC40NTMsNTEuOTQsMzguMTgsNTIuMnMtMC42MTEsMC40NjctMS4wMTIsMC42MjIgICAgYy0wLjQwMSwwLjE1NS0wLjg1NywwLjIzMi0xLjM2NywwLjIzMmMtMC4yMTksMC0wLjQ0NC0wLjAxMi0wLjY3Ny0wLjAzNHMtMC40NjctMC4wNjItMC43MDQtMC4xMTYgICAgYy0wLjIzNy0wLjA1NS0wLjQ2My0wLjEzLTAuNjc3LTAuMjI2Yy0wLjIxNC0wLjA5Ni0wLjM5OS0wLjIxMi0wLjU1NC0wLjM0OWwwLjI4Ny0xLjE3NmMwLjEyNywwLjA3MywwLjI4OSwwLjE0NCwwLjQ4NSwwLjIxMiAgICBjMC4xOTYsMC4wNjgsMC4zOTgsMC4xMzIsMC42MDgsMC4xOTFjMC4yMDksMC4wNiwwLjQxOSwwLjEwNywwLjYyOSwwLjE0NGMwLjIwOSwwLjAzNiwwLjQwNSwwLjA1NSwwLjU4OCwwLjA1NSAgICBjMC41NTYsMCwwLjk4Mi0wLjEzLDEuMjc4LTAuMzljMC4yOTYtMC4yNiwwLjQ0NC0wLjY0NSwwLjQ0NC0xLjE1NWMwLTAuMzEtMC4xMDUtMC41NzQtMC4zMTQtMC43OTMgICAgYy0wLjIxLTAuMjE5LTAuNDcyLTAuNDE3LTAuNzg2LTAuNTk1cy0wLjY1NC0wLjM1NS0xLjAxOS0wLjUzM2MtMC4zNjUtMC4xNzgtMC43MDctMC4zODgtMS4wMjUtMC42MjkgICAgYy0wLjMxOS0wLjI0MS0wLjU4My0wLjUyNi0wLjc5My0wLjg1NGMtMC4yMS0wLjMyOC0wLjMxNC0wLjczOC0wLjMxNC0xLjIzYzAtMC40NDYsMC4wODItMC44NDMsMC4yNDYtMS4xODkgICAgczAuMzg1LTAuNjQxLDAuNjYzLTAuODgyYzAuMjc4LTAuMjQxLDAuNjAyLTAuNDI2LDAuOTcxLTAuNTU0czAuNzU5LTAuMTkxLDEuMTY5LTAuMTkxYzAuNDE5LDAsMC44NDMsMC4wMzksMS4yNzEsMC4xMTYgICAgYzAuNDI4LDAuMDc3LDAuNzc0LDAuMjAzLDEuMDM5LDAuMzc2Yy0wLjA1NSwwLjExOC0wLjExOSwwLjI0OC0wLjE5MSwwLjM5Yy0wLjA3MywwLjE0Mi0wLjE0MiwwLjI3My0wLjIwNSwwLjM5NiAgICBjLTAuMDY0LDAuMTIzLTAuMTE5LDAuMjI2LTAuMTY0LDAuMzA4Yy0wLjA0NiwwLjA4Mi0wLjA3MywwLjEyOC0wLjA4MiwwLjEzN2MtMC4wNTUtMC4wMjctMC4xMTYtMC4wNjMtMC4xODUtMC4xMDkgICAgcy0wLjE2Ny0wLjA5MS0wLjI5NC0wLjEzN2MtMC4xMjgtMC4wNDYtMC4yOTYtMC4wNzctMC41MDYtMC4wOTZjLTAuMjEtMC4wMTktMC40NzktMC4wMTQtMC44MDcsMC4wMTQgICAgYy0wLjE4MywwLjAxOS0wLjM1NSwwLjA3LTAuNTIsMC4xNTdzLTAuMzEsMC4xOTMtMC40MzgsMC4zMjFjLTAuMTI4LDAuMTI4LTAuMjI4LDAuMjcxLTAuMzAxLDAuNDMxICAgIGMtMC4wNzMsMC4xNTktMC4xMDksMC4zMTMtMC4xMDksMC40NThjMCwwLjM2NCwwLjEwNCwwLjY1OCwwLjMxNCwwLjg4MmMwLjIwOSwwLjIyNCwwLjQ2OSwwLjQxOSwwLjc3OSwwLjU4OCAgICBjMC4zMSwwLjE2OSwwLjY0NywwLjMzMywxLjAxMiwwLjQ5MmMwLjM2NCwwLjE1OSwwLjcwNCwwLjM1NCwxLjAxOSwwLjU4MXMwLjU3NiwwLjUxMywwLjc4NiwwLjg1NCAgICBDMzguOTM2LDQ5LjI2MSwzOS4wNDEsNDkuNywzOS4wNDEsNTAuMjM4eiIvPgoJPC9nPgoJPHBhdGggc3R5bGU9ImZpbGw6I0M4QkRCODsiIGQ9Ik0yMy41LDE2di00aC0xMnY0djJ2MnYydjJ2MnYydjJ2NGgxMGgyaDIxdi00di0ydi0ydi0ydi0ydi0ydi00SDIzLjV6IE0xMy41LDE0aDh2MmgtOFYxNHogICAgTTEzLjUsMThoOHYyaC04VjE4eiBNMTMuNSwyMmg4djJoLThWMjJ6IE0xMy41LDI2aDh2MmgtOFYyNnogTTIxLjUsMzJoLTh2LTJoOFYzMnogTTQyLjUsMzJoLTE5di0yaDE5VjMyeiBNNDIuNSwyOGgtMTl2LTJoMTlWMjggICB6IE00Mi41LDI0aC0xOXYtMmgxOVYyNHogTTIzLjUsMjB2LTJoMTl2MkgyMy41eiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

cxco-root a:not([data-img~='true'])[href$='.xlsm']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.xlsm']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM5MUNEQTA7IiBkPSJNNDguMDM3LDU2SDcuOTYzQzcuMTU1LDU2LDYuNSw1NS4zNDUsNi41LDU0LjUzN1YzOWg0M3YxNS41MzdDNDkuNSw1NS4zNDUsNDguODQ1LDU2LDQ4LjAzNyw1NnoiLz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMjAuMzc5LDQ4LjEwNUwyMi45MzYsNTNoLTEuOWwtMS42LTMuODAxaC0wLjEzN0wxNy41NzYsNTNoLTEuOWwyLjU1Ny00Ljg5NWwtMi43MjEtNS4xODJoMS44NzMgICAgbDEuNzc3LDQuMTAyaDAuMTM3bDEuOTI4LTQuMTAySDIzLjFMMjAuMzc5LDQ4LjEwNXoiLz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTI3LjAzNyw0Mi45MjR2OC44MzJoNC42MzVWNTNoLTYuMzAzVjQyLjkyNEgyNy4wMzd6Ii8+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGQ9Ik0zOS4wNDEsNTAuMjM4YzAsMC4zNjQtMC4wNzUsMC43MTgtMC4yMjYsMS4wNlMzOC40NTMsNTEuOTQsMzguMTgsNTIuMnMtMC42MTEsMC40NjctMS4wMTIsMC42MjIgICAgYy0wLjQwMSwwLjE1NS0wLjg1NywwLjIzMi0xLjM2NywwLjIzMmMtMC4yMTksMC0wLjQ0NC0wLjAxMi0wLjY3Ny0wLjAzNHMtMC40NjctMC4wNjItMC43MDQtMC4xMTYgICAgYy0wLjIzNy0wLjA1NS0wLjQ2My0wLjEzLTAuNjc3LTAuMjI2Yy0wLjIxNC0wLjA5Ni0wLjM5OS0wLjIxMi0wLjU1NC0wLjM0OWwwLjI4Ny0xLjE3NmMwLjEyNywwLjA3MywwLjI4OSwwLjE0NCwwLjQ4NSwwLjIxMiAgICBjMC4xOTYsMC4wNjgsMC4zOTgsMC4xMzIsMC42MDgsMC4xOTFjMC4yMDksMC4wNiwwLjQxOSwwLjEwNywwLjYyOSwwLjE0NGMwLjIwOSwwLjAzNiwwLjQwNSwwLjA1NSwwLjU4OCwwLjA1NSAgICBjMC41NTYsMCwwLjk4Mi0wLjEzLDEuMjc4LTAuMzljMC4yOTYtMC4yNiwwLjQ0NC0wLjY0NSwwLjQ0NC0xLjE1NWMwLTAuMzEtMC4xMDUtMC41NzQtMC4zMTQtMC43OTMgICAgYy0wLjIxLTAuMjE5LTAuNDcyLTAuNDE3LTAuNzg2LTAuNTk1cy0wLjY1NC0wLjM1NS0xLjAxOS0wLjUzM2MtMC4zNjUtMC4xNzgtMC43MDctMC4zODgtMS4wMjUtMC42MjkgICAgYy0wLjMxOS0wLjI0MS0wLjU4My0wLjUyNi0wLjc5My0wLjg1NGMtMC4yMS0wLjMyOC0wLjMxNC0wLjczOC0wLjMxNC0xLjIzYzAtMC40NDYsMC4wODItMC44NDMsMC4yNDYtMS4xODkgICAgczAuMzg1LTAuNjQxLDAuNjYzLTAuODgyYzAuMjc4LTAuMjQxLDAuNjAyLTAuNDI2LDAuOTcxLTAuNTU0czAuNzU5LTAuMTkxLDEuMTY5LTAuMTkxYzAuNDE5LDAsMC44NDMsMC4wMzksMS4yNzEsMC4xMTYgICAgYzAuNDI4LDAuMDc3LDAuNzc0LDAuMjAzLDEuMDM5LDAuMzc2Yy0wLjA1NSwwLjExOC0wLjExOSwwLjI0OC0wLjE5MSwwLjM5Yy0wLjA3MywwLjE0Mi0wLjE0MiwwLjI3My0wLjIwNSwwLjM5NiAgICBjLTAuMDY0LDAuMTIzLTAuMTE5LDAuMjI2LTAuMTY0LDAuMzA4Yy0wLjA0NiwwLjA4Mi0wLjA3MywwLjEyOC0wLjA4MiwwLjEzN2MtMC4wNTUtMC4wMjctMC4xMTYtMC4wNjMtMC4xODUtMC4xMDkgICAgcy0wLjE2Ny0wLjA5MS0wLjI5NC0wLjEzN2MtMC4xMjgtMC4wNDYtMC4yOTYtMC4wNzctMC41MDYtMC4wOTZjLTAuMjEtMC4wMTktMC40NzktMC4wMTQtMC44MDcsMC4wMTQgICAgYy0wLjE4MywwLjAxOS0wLjM1NSwwLjA3LTAuNTIsMC4xNTdzLTAuMzEsMC4xOTMtMC40MzgsMC4zMjFjLTAuMTI4LDAuMTI4LTAuMjI4LDAuMjcxLTAuMzAxLDAuNDMxICAgIGMtMC4wNzMsMC4xNTktMC4xMDksMC4zMTMtMC4xMDksMC40NThjMCwwLjM2NCwwLjEwNCwwLjY1OCwwLjMxNCwwLjg4MmMwLjIwOSwwLjIyNCwwLjQ2OSwwLjQxOSwwLjc3OSwwLjU4OCAgICBjMC4zMSwwLjE2OSwwLjY0NywwLjMzMywxLjAxMiwwLjQ5MmMwLjM2NCwwLjE1OSwwLjcwNCwwLjM1NCwxLjAxOSwwLjU4MXMwLjU3NiwwLjUxMywwLjc4NiwwLjg1NCAgICBDMzguOTM2LDQ5LjI2MSwzOS4wNDEsNDkuNywzOS4wNDEsNTAuMjM4eiIvPgoJPC9nPgoJPHBhdGggc3R5bGU9ImZpbGw6I0M4QkRCODsiIGQ9Ik0yMy41LDE2di00aC0xMnY0djJ2MnYydjJ2MnYydjJ2NGgxMGgyaDIxdi00di0ydi0ydi0ydi0ydi0ydi00SDIzLjV6IE0xMy41LDE0aDh2MmgtOFYxNHogICAgTTEzLjUsMThoOHYyaC04VjE4eiBNMTMuNSwyMmg4djJoLThWMjJ6IE0xMy41LDI2aDh2MmgtOFYyNnogTTIxLjUsMzJoLTh2LTJoOFYzMnogTTQyLjUsMzJoLTE5di0yaDE5VjMyeiBNNDIuNSwyOGgtMTl2LTJoMTlWMjggICB6IE00Mi41LDI0aC0xOXYtMmgxOVYyNHogTTIzLjUsMjB2LTJoMTl2MkgyMy41eiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

cxco-root a:not([data-img~='true'])[href$='.xltx']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.xltx']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM5MUNEQTA7IiBkPSJNNDguMDM3LDU2SDcuOTYzQzcuMTU1LDU2LDYuNSw1NS4zNDUsNi41LDU0LjUzN1YzOWg0M3YxNS41MzdDNDkuNSw1NS4zNDUsNDguODQ1LDU2LDQ4LjAzNyw1NnoiLz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMjAuMzc5LDQ4LjEwNUwyMi45MzYsNTNoLTEuOWwtMS42LTMuODAxaC0wLjEzN0wxNy41NzYsNTNoLTEuOWwyLjU1Ny00Ljg5NWwtMi43MjEtNS4xODJoMS44NzMgICAgbDEuNzc3LDQuMTAyaDAuMTM3bDEuOTI4LTQuMTAySDIzLjFMMjAuMzc5LDQ4LjEwNXoiLz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTI3LjAzNyw0Mi45MjR2OC44MzJoNC42MzVWNTNoLTYuMzAzVjQyLjkyNEgyNy4wMzd6Ii8+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGQ9Ik0zOS4wNDEsNTAuMjM4YzAsMC4zNjQtMC4wNzUsMC43MTgtMC4yMjYsMS4wNlMzOC40NTMsNTEuOTQsMzguMTgsNTIuMnMtMC42MTEsMC40NjctMS4wMTIsMC42MjIgICAgYy0wLjQwMSwwLjE1NS0wLjg1NywwLjIzMi0xLjM2NywwLjIzMmMtMC4yMTksMC0wLjQ0NC0wLjAxMi0wLjY3Ny0wLjAzNHMtMC40NjctMC4wNjItMC43MDQtMC4xMTYgICAgYy0wLjIzNy0wLjA1NS0wLjQ2My0wLjEzLTAuNjc3LTAuMjI2Yy0wLjIxNC0wLjA5Ni0wLjM5OS0wLjIxMi0wLjU1NC0wLjM0OWwwLjI4Ny0xLjE3NmMwLjEyNywwLjA3MywwLjI4OSwwLjE0NCwwLjQ4NSwwLjIxMiAgICBjMC4xOTYsMC4wNjgsMC4zOTgsMC4xMzIsMC42MDgsMC4xOTFjMC4yMDksMC4wNiwwLjQxOSwwLjEwNywwLjYyOSwwLjE0NGMwLjIwOSwwLjAzNiwwLjQwNSwwLjA1NSwwLjU4OCwwLjA1NSAgICBjMC41NTYsMCwwLjk4Mi0wLjEzLDEuMjc4LTAuMzljMC4yOTYtMC4yNiwwLjQ0NC0wLjY0NSwwLjQ0NC0xLjE1NWMwLTAuMzEtMC4xMDUtMC41NzQtMC4zMTQtMC43OTMgICAgYy0wLjIxLTAuMjE5LTAuNDcyLTAuNDE3LTAuNzg2LTAuNTk1cy0wLjY1NC0wLjM1NS0xLjAxOS0wLjUzM2MtMC4zNjUtMC4xNzgtMC43MDctMC4zODgtMS4wMjUtMC42MjkgICAgYy0wLjMxOS0wLjI0MS0wLjU4My0wLjUyNi0wLjc5My0wLjg1NGMtMC4yMS0wLjMyOC0wLjMxNC0wLjczOC0wLjMxNC0xLjIzYzAtMC40NDYsMC4wODItMC44NDMsMC4yNDYtMS4xODkgICAgczAuMzg1LTAuNjQxLDAuNjYzLTAuODgyYzAuMjc4LTAuMjQxLDAuNjAyLTAuNDI2LDAuOTcxLTAuNTU0czAuNzU5LTAuMTkxLDEuMTY5LTAuMTkxYzAuNDE5LDAsMC44NDMsMC4wMzksMS4yNzEsMC4xMTYgICAgYzAuNDI4LDAuMDc3LDAuNzc0LDAuMjAzLDEuMDM5LDAuMzc2Yy0wLjA1NSwwLjExOC0wLjExOSwwLjI0OC0wLjE5MSwwLjM5Yy0wLjA3MywwLjE0Mi0wLjE0MiwwLjI3My0wLjIwNSwwLjM5NiAgICBjLTAuMDY0LDAuMTIzLTAuMTE5LDAuMjI2LTAuMTY0LDAuMzA4Yy0wLjA0NiwwLjA4Mi0wLjA3MywwLjEyOC0wLjA4MiwwLjEzN2MtMC4wNTUtMC4wMjctMC4xMTYtMC4wNjMtMC4xODUtMC4xMDkgICAgcy0wLjE2Ny0wLjA5MS0wLjI5NC0wLjEzN2MtMC4xMjgtMC4wNDYtMC4yOTYtMC4wNzctMC41MDYtMC4wOTZjLTAuMjEtMC4wMTktMC40NzktMC4wMTQtMC44MDcsMC4wMTQgICAgYy0wLjE4MywwLjAxOS0wLjM1NSwwLjA3LTAuNTIsMC4xNTdzLTAuMzEsMC4xOTMtMC40MzgsMC4zMjFjLTAuMTI4LDAuMTI4LTAuMjI4LDAuMjcxLTAuMzAxLDAuNDMxICAgIGMtMC4wNzMsMC4xNTktMC4xMDksMC4zMTMtMC4xMDksMC40NThjMCwwLjM2NCwwLjEwNCwwLjY1OCwwLjMxNCwwLjg4MmMwLjIwOSwwLjIyNCwwLjQ2OSwwLjQxOSwwLjc3OSwwLjU4OCAgICBjMC4zMSwwLjE2OSwwLjY0NywwLjMzMywxLjAxMiwwLjQ5MmMwLjM2NCwwLjE1OSwwLjcwNCwwLjM1NCwxLjAxOSwwLjU4MXMwLjU3NiwwLjUxMywwLjc4NiwwLjg1NCAgICBDMzguOTM2LDQ5LjI2MSwzOS4wNDEsNDkuNywzOS4wNDEsNTAuMjM4eiIvPgoJPC9nPgoJPHBhdGggc3R5bGU9ImZpbGw6I0M4QkRCODsiIGQ9Ik0yMy41LDE2di00aC0xMnY0djJ2MnYydjJ2MnYydjJ2NGgxMGgyaDIxdi00di0ydi0ydi0ydi0ydi0ydi00SDIzLjV6IE0xMy41LDE0aDh2MmgtOFYxNHogICAgTTEzLjUsMThoOHYyaC04VjE4eiBNMTMuNSwyMmg4djJoLThWMjJ6IE0xMy41LDI2aDh2MmgtOFYyNnogTTIxLjUsMzJoLTh2LTJoOFYzMnogTTQyLjUsMzJoLTE5di0yaDE5VjMyeiBNNDIuNSwyOGgtMTl2LTJoMTlWMjggICB6IE00Mi41LDI0aC0xOXYtMmgxOVYyNHogTTIzLjUsMjB2LTJoMTl2MkgyMy41eiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

cxco-root a:not([data-img~='true'])[href$='.xltm']:not([class]) {
  display: inline-block;
}

cxco-root a:not([data-img~='true'])[href$='.xltm']:not([class])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-position: center;
  background-size: contain;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2IDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NiA1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggc3R5bGU9ImZpbGw6I0U5RTlFMDsiIGQ9Ik0zNi45ODUsMEg3Ljk2M0M3LjE1NSwwLDYuNSwwLjY1NSw2LjUsMS45MjZWNTVjMCwwLjM0NSwwLjY1NSwxLDEuNDYzLDFoNDAuMDc0ICAgYzAuODA4LDAsMS40NjMtMC42NTUsMS40NjMtMVYxMi45NzhjMC0wLjY5Ni0wLjA5My0wLjkyLTAuMjU3LTEuMDg1TDM3LjYwNywwLjI1N0MzNy40NDIsMC4wOTMsMzcuMjE4LDAsMzYuOTg1LDB6Ii8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRDlEN0NBOyIgcG9pbnRzPSIzNy41LDAuMTUxIDM3LjUsMTIgNDkuMzQ5LDEyICAiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiM5MUNEQTA7IiBkPSJNNDguMDM3LDU2SDcuOTYzQzcuMTU1LDU2LDYuNSw1NS4zNDUsNi41LDU0LjUzN1YzOWg0M3YxNS41MzdDNDkuNSw1NS4zNDUsNDguODQ1LDU2LDQ4LjAzNyw1NnoiLz4KCTxnPgoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMjAuMzc5LDQ4LjEwNUwyMi45MzYsNTNoLTEuOWwtMS42LTMuODAxaC0wLjEzN0wxNy41NzYsNTNoLTEuOWwyLjU1Ny00Ljg5NWwtMi43MjEtNS4xODJoMS44NzMgICAgbDEuNzc3LDQuMTAyaDAuMTM3bDEuOTI4LTQuMTAySDIzLjFMMjAuMzc5LDQ4LjEwNXoiLz4KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTI3LjAzNyw0Mi45MjR2OC44MzJoNC42MzVWNTNoLTYuMzAzVjQyLjkyNEgyNy4wMzd6Ii8+CgkJPHBhdGggc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGQ9Ik0zOS4wNDEsNTAuMjM4YzAsMC4zNjQtMC4wNzUsMC43MTgtMC4yMjYsMS4wNlMzOC40NTMsNTEuOTQsMzguMTgsNTIuMnMtMC42MTEsMC40NjctMS4wMTIsMC42MjIgICAgYy0wLjQwMSwwLjE1NS0wLjg1NywwLjIzMi0xLjM2NywwLjIzMmMtMC4yMTksMC0wLjQ0NC0wLjAxMi0wLjY3Ny0wLjAzNHMtMC40NjctMC4wNjItMC43MDQtMC4xMTYgICAgYy0wLjIzNy0wLjA1NS0wLjQ2My0wLjEzLTAuNjc3LTAuMjI2Yy0wLjIxNC0wLjA5Ni0wLjM5OS0wLjIxMi0wLjU1NC0wLjM0OWwwLjI4Ny0xLjE3NmMwLjEyNywwLjA3MywwLjI4OSwwLjE0NCwwLjQ4NSwwLjIxMiAgICBjMC4xOTYsMC4wNjgsMC4zOTgsMC4xMzIsMC42MDgsMC4xOTFjMC4yMDksMC4wNiwwLjQxOSwwLjEwNywwLjYyOSwwLjE0NGMwLjIwOSwwLjAzNiwwLjQwNSwwLjA1NSwwLjU4OCwwLjA1NSAgICBjMC41NTYsMCwwLjk4Mi0wLjEzLDEuMjc4LTAuMzljMC4yOTYtMC4yNiwwLjQ0NC0wLjY0NSwwLjQ0NC0xLjE1NWMwLTAuMzEtMC4xMDUtMC41NzQtMC4zMTQtMC43OTMgICAgYy0wLjIxLTAuMjE5LTAuNDcyLTAuNDE3LTAuNzg2LTAuNTk1cy0wLjY1NC0wLjM1NS0xLjAxOS0wLjUzM2MtMC4zNjUtMC4xNzgtMC43MDctMC4zODgtMS4wMjUtMC42MjkgICAgYy0wLjMxOS0wLjI0MS0wLjU4My0wLjUyNi0wLjc5My0wLjg1NGMtMC4yMS0wLjMyOC0wLjMxNC0wLjczOC0wLjMxNC0xLjIzYzAtMC40NDYsMC4wODItMC44NDMsMC4yNDYtMS4xODkgICAgczAuMzg1LTAuNjQxLDAuNjYzLTAuODgyYzAuMjc4LTAuMjQxLDAuNjAyLTAuNDI2LDAuOTcxLTAuNTU0czAuNzU5LTAuMTkxLDEuMTY5LTAuMTkxYzAuNDE5LDAsMC44NDMsMC4wMzksMS4yNzEsMC4xMTYgICAgYzAuNDI4LDAuMDc3LDAuNzc0LDAuMjAzLDEuMDM5LDAuMzc2Yy0wLjA1NSwwLjExOC0wLjExOSwwLjI0OC0wLjE5MSwwLjM5Yy0wLjA3MywwLjE0Mi0wLjE0MiwwLjI3My0wLjIwNSwwLjM5NiAgICBjLTAuMDY0LDAuMTIzLTAuMTE5LDAuMjI2LTAuMTY0LDAuMzA4Yy0wLjA0NiwwLjA4Mi0wLjA3MywwLjEyOC0wLjA4MiwwLjEzN2MtMC4wNTUtMC4wMjctMC4xMTYtMC4wNjMtMC4xODUtMC4xMDkgICAgcy0wLjE2Ny0wLjA5MS0wLjI5NC0wLjEzN2MtMC4xMjgtMC4wNDYtMC4yOTYtMC4wNzctMC41MDYtMC4wOTZjLTAuMjEtMC4wMTktMC40NzktMC4wMTQtMC44MDcsMC4wMTQgICAgYy0wLjE4MywwLjAxOS0wLjM1NSwwLjA3LTAuNTIsMC4xNTdzLTAuMzEsMC4xOTMtMC40MzgsMC4zMjFjLTAuMTI4LDAuMTI4LTAuMjI4LDAuMjcxLTAuMzAxLDAuNDMxICAgIGMtMC4wNzMsMC4xNTktMC4xMDksMC4zMTMtMC4xMDksMC40NThjMCwwLjM2NCwwLjEwNCwwLjY1OCwwLjMxNCwwLjg4MmMwLjIwOSwwLjIyNCwwLjQ2OSwwLjQxOSwwLjc3OSwwLjU4OCAgICBjMC4zMSwwLjE2OSwwLjY0NywwLjMzMywxLjAxMiwwLjQ5MmMwLjM2NCwwLjE1OSwwLjcwNCwwLjM1NCwxLjAxOSwwLjU4MXMwLjU3NiwwLjUxMywwLjc4NiwwLjg1NCAgICBDMzguOTM2LDQ5LjI2MSwzOS4wNDEsNDkuNywzOS4wNDEsNTAuMjM4eiIvPgoJPC9nPgoJPHBhdGggc3R5bGU9ImZpbGw6I0M4QkRCODsiIGQ9Ik0yMy41LDE2di00aC0xMnY0djJ2MnYydjJ2MnYydjJ2NGgxMGgyaDIxdi00di0ydi0ydi0ydi0ydi0ydi00SDIzLjV6IE0xMy41LDE0aDh2MmgtOFYxNHogICAgTTEzLjUsMThoOHYyaC04VjE4eiBNMTMuNSwyMmg4djJoLThWMjJ6IE0xMy41LDI2aDh2MmgtOFYyNnogTTIxLjUsMzJoLTh2LTJoOFYzMnogTTQyLjUsMzJoLTE5di0yaDE5VjMyeiBNNDIuNSwyOGgtMTl2LTJoMTlWMjggICB6IE00Mi41LDI0aC0xOXYtMmgxOVYyNHogTTIzLjUsMjB2LTJoMTl2MkgyMy41eiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

cxco-root svg .cxco-c-gradient-start {
  stop-color: var(--cxco-neutral-inverted);
}

cxco-root svg .cxco-c-gradient-end {
  stop-color: var(--cxco-neutral-inverted);
}

cxco-root svg:hover .cxco-c-gradient-start {
  stop-color: var(--cxco-primary-light);
  /*[1]*/
}

cxco-root svg:hover .cxco-c-gradient-end {
  stop-color: var(--cxco-primary-dark);
  /*[1]*/
}

cxco-root svg .cxco-c-gradient-start--inverted {
  stop-color: var(--cxco-primary-inverted);
}

cxco-root svg .cxco-c-gradient-end--inverted {
  stop-color: var(--cxco-primary-inverted);
}

cxco-root svg:hover .cxco-c-gradient-start--inverted {
  stop-color: var(--cxco-primary-inverted);
  /*[1]*/
}

cxco-root svg:hover .cxco-c-gradient-end--inverted {
  stop-color: var(--cxco-primary-inverted);
  /*[1]*/
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Lists
 ===================================================================================== */
cxco-root {
  /**
    *	Default indentation value for lists
    */
  /**
    *	Remove extra vertical spacing when nesting lists.
    */
  /**
    *	list-items needs resetting for our Lobotomized Owl selector
    */
}

cxco-root ul,
cxco-root ol,
cxco-root dd {
  margin-left: 1.125em;
}

cxco-root li > ul,
cxco-root li > ol {
  margin-bottom: 0;
}

cxco-root li + li {
  margin-top: 0;
}

@font-face {
  font-family: 'Gotham';
  src: url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-Light.woff2") format("woff2"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-Light.woff") format("woff"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-Light.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';
  src: url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-LightIta.woff2") format("woff2"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-LightIta.woff") format("woff"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-LightIta.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: 'Gotham';
  src: url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-Book.woff2") format("woff2"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-Book.woff") format("woff"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-Book.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';
  src: url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-BookIta.woff2") format("woff2"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-BookIta.woff") format("woff"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-BookIta.otf") format("opentype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Gotham';
  src: url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-Medium.woff2") format("woff2"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-Medium.woff") format("woff"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';
  src: url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-MedIta.woff2") format("woff2"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-MedIta.woff") format("woff"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-MedIta.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Gotham';
  src: url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-Medium.woff2") format("woff2"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-Medium.woff") format("woff"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-Medium.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';
  src: url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-MedIta.woff2") format("woff2"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-MedIta.woff") format("woff"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-MedIta.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'Gotham';
  src: url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-Bold.woff2") format("woff2"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-Bold.woff") format("woff"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';
  src: url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-BoldIta.woff2") format("woff2"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-BoldIta.woff") format("woff"), url("https://aurora.cmtelecom.com/fonts/gotham/GothamRnd-BoldIta.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Axiomatic CSS and Lobotomized Owls
 *  As Per: http://alistapart.com/article/axiomatic-css-and-lobotomized-owls
 *  Extra selectors because we use a generic reset with margin:0;
 *  that is more specific than the general owl selector (* + *).
 *  vertical rhythm or horizontal rhythm
 *  We apply the not:([class]) pseudo selector to make sure that the owl selector 
 *  is applied to all unclassed HTML elements without the User Agent resets overriding. 
 ===================================================================================== */
cxco-root {
  /* Remove top-margins from empty divs */
}

cxco-root * + *,
cxco-root * + h1,
cxco-root * + h3,
cxco-root * + h4,
cxco-root * + h5,
cxco-root * + h6,
cxco-root * + p,
cxco-root * + ul,
cxco-root * + ol,
cxco-root * + dl,
cxco-root * + hr,
cxco-root * + figure,
cxco-root * + blockquote,
cxco-root * + pre {
  margin-top: var(--cxco-vertical-spacing, var(--cxco-ui-spacing, 16px));
}

cxco-root * + div:empty {
  margin-top: 0;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Tables
 ===================================================================================== */
cxco-root table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--cxco-neutral-xx-light);
  table-layout: fixed;
  width: 100%;
}

cxco-root table > * + * {
  margin-top: 0;
}

cxco-root table td,
cxco-root table th {
  border-bottom: 2px solid var(--cxco-neutral-dark);
  text-align: left;
  padding: var(--cxco-ui-spacing, 16px);
  overflow-wrap: break-word;
}

cxco-root table th {
  font-size: var(--cxco-font-size, 16px);
  font-size: var(--cxco-font-size, 1rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  color: var(--cxco-primary);
  background: var(--cxco-primary-inverted);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Headings 
 *  [1] We use padding instead of margin because we use margin property for the owl selector.
 ===================================================================================== */
cxco-root h1 {
  --cxco-h1--font-size: var(--cxco-font-size);
  font-size: var(--cxco-h1--font-size, 32px);
  font-size: var(--cxco-h1--font-size, 2rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  padding: var(--cxco-ui-spacing, 16px) 0;
  /*[1]*/
  font-weight: bold;
}

cxco-root h2 {
  --cxco-h2--font-size: var(--cxco-font-size);
  font-size: var(--cxco-h2--font-size, 24px);
  font-size: var(--cxco-h2--font-size, 1.5rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  padding: calc(var(--cxco-ui-spacing, 16px)/ 2) 0;
  /*[1]*/
  font-weight: bold;
}

cxco-root h3 {
  --cxco-h3--font-size: var(--cxco-font-size);
  font-size: var(--cxco-h3--font-size, 16px);
  font-size: var(--cxco-h3--font-size, 1rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  padding: calc(var(--cxco-ui-spacing, 16px)/ 4) 0;
  /*[1]*/
  font-weight: bold;
}

cxco-root h4 {
  --cxco-h3--font-size: var(--cxco-font-size);
  font-size: var(--cxco-h3--font-size, 14px);
  font-size: var(--cxco-h3--font-size, 0.875rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  font-weight: bold;
}

cxco-root h5 {
  --cxco-h5--font-size: var(--cxco-font-size);
  font-size: var(--cxco-h5--font-size, 14px);
  font-size: var(--cxco-h5--font-size, 0.875rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  font-weight: bold;
}

cxco-root h6 {
  --cxco-h6--font-size: var(--cxco-font-size);
  font-size: var(--cxco-h6--font-size, 14px);
  font-size: var(--cxco-h6--font-size, 0.875rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  font-weight: bold;
}

/*  4 Objects
 *  Design patterns (e.g. .media)
=========================================================== */
/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Object for arranging items next to each other
 ===================================================================================== */
.cxco-o-arrange {
  display: flex;
}

.cxco-o-arrange > * + * {
  margin-top: 0;
}

.cxco-o-arrange__fit {
  flex: none;
}

.cxco-o-arrange__fill {
  flex: 1 0 25px;
  /* Some made-up flex-base value so flexbox works properly for IE. */
}

/* Vertical alignment options */
.cxco-o-arrange--center {
  align-items: center;
}

.cxco-o-arrange--bottom {
  align-items: flex-end;
}

/* Start arranging at a different breakpoints. */
@media all and (min-width: 768px) {
  .cxco-o-arrange\@m {
    display: flex;
  }
  .cxco-o-arrange\@m > * + * {
    margin-top: 0;
  }
}

@media all and (min-width: 1024px) {
  .cxco-o-arrange\@l {
    display: flex;
  }
  .cxco-o-arrange\@l > * + * {
    margin-top: 0;
  }
}

@media all and (min-width: 1440px) {
  .cxco-o-arrange\@xl {
    display: flex;
  }
  .cxco-o-arrange\@xl > * + * {
    margin-top: 0;
  }
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Object for arranging buttons next to each other
 ===================================================================================== */
.cxco-o-buttongroup {
  padding: 0;
  margin-left: 0;
  margin-bottom: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-left: calc(0px - calc(var(--cxco-ui-spacing, 16px)/ 4));
  margin-right: calc(0px - calc(var(--cxco-ui-spacing, 16px)/ 4));
}

.cxco-o-buttongroup > * + * {
  margin-top: 0;
}

.cxco-o-buttongroup--right {
  justify-content: flex-end;
}

.cxco-o-buttongroup--center {
  justify-content: center;
}

.cxco-o-buttongroup--space-between {
  justify-content: space-between;
}

.cxco-o-buttongroup__item {
  flex: 0 1 auto;
  padding: calc(var(--cxco-ui-spacing, 16px)/ 4) calc(var(--cxco-ui-spacing, 16px)/ 4);
  margin: 0;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 * Grid
 ===================================================================================== */
.cxco-o-grid {
  display: grid;
  gap: calc(var(--cxco-ui-spacing, 16px)* 2);
  grid-template-columns: 1fr;
  grid-auto-flow: row dense;
}

.cxco-o-grid > * + * {
  margin-top: 0;
}

.cxco-o-grid[min-width~='768px'] {
  grid-template-columns: 1fr 1fr;
}

.cxco-o-grid__item--prominent {
  grid-row: 1;
  grid-column: 1;
}

[min-width~='768px'] .cxco-o-grid__item--prominent {
  grid-column: 1 / span 2;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 * Carrousel
 ===================================================================================== */
.cxco-o-carrousel {
  overflow-x: scroll;
  overflow-y: hidden;
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--cxco-ui-spacing, 16px);
  margin-left: calc(0px - var(--cxco-ui-spacing, 16px));
  margin-right: calc(0px - var(--cxco-ui-spacing, 16px));
}

.cxco-o-carrousel > * + * {
  margin-top: 0;
}

.cxco-o-carrousel::-webkit-scrollbar {
  width: calc(var(--cxco-ui-spacing, 16px)/ 2);
}

.cxco-o-carrousel::-webkit-scrollbar-track {
  background-color: transparent;
}

.cxco-o-carrousel::-webkit-scrollbar-thumb {
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  min-height: calc(var(--cxco-ui-spacing, 16px)* 2);
  background-color: var(--cxco-neutral-x-dark);
}

.cxco-o-carrousel > * {
  flex: none;
  display: inline-block;
  max-width: 80%;
  touch-action: cross-slide-x;
  cursor: pointer;
}

.cxco-o-carrousel > * + * {
  margin-top: 0 !important;
  margin-left: var(--cxco-ui-spacing, 16px);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Chat layout
 *  1. Bleed | nav area | content | nav area | Bleed
 ===================================================================================== */
.cxco-o-chat {
  --cxco-o-chat--opacity: 1;
  --cxco-o-chat--bg-color-start: hsla(var(--cxco-neutral-xx-light-h), var(--cxco-neutral-xx-light-s), var(--cxco-neutral-xx-light-l), var(--cxco-o-chat--opacity));
  --cxco-o-chat--bg-color-end: hsla(var(--cxco-neutral-xx-light-h), var(--cxco-neutral-xx-light-s), var(--cxco-neutral-xx-light-l), var(--cxco-o-chat--opacity));
  --cxco-o-chat--color: var(--cxco-neutral-xx-light-inverted);
  font-size: var(--cxco-font-size, 16px);
  font-size: var(--cxco-font-size, 1rem);
  font-family: var(--cxco-ui-font);
  line-height: var(--cxco-line-height, 1.5);
  background-image: linear-gradient(to bottom, var(--cxco-o-chat--bg-color-start) 0%, var(--cxco-o-chat--bg-color-end) 100%);
  background-size: 1px 100%;
  background-position: 0 0;
  z-index: 98;
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  overflow: hidden;
  position: fixed;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: var(--cxco-ui-spacing, 16px) minmax(calc(var(--cxco-ui-spacing, 16px)* 2), auto) 1fr minmax(calc(var(--cxco-ui-spacing, 16px)* 2), auto) var(--cxco-ui-spacing, 16px);
  /* [1] */
  grid-template-rows: var(--cxco-ui-spacing, 16px) minmax(calc(var(--cxco-ui-spacing, 16px)* 2), auto) 1fr minmax(calc(var(--cxco-ui-spacing, 16px)* 2), auto) var(--cxco-ui-spacing, 16px);
  /* [1] */
  gap: calc(var(--cxco-ui-spacing, 16px)/ 4);
  width: var(--cxco-width);
  min-width: var(--cxco-min-width);
  max-width: var(--cxco-max-width);
  height: var(--cxco-height);
  min-height: var(--cxco-min-height);
  max-height: var(--cxco-max-height);
  margin: var(--cxco-gutter);
  color: var(--cxco-o-chat--color);
  transition: transform 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66), opacity 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66), box-shadow 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66);
  transform-origin: bottom right;
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
}

.cxco-o-chat > * + * {
  margin-top: 0;
}

.cxco-o-chat[data-state='closed'] {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(8px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  opacity: 0;
  transform: scale(0);
}

.cxco-o-chat[data-state='open'] {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(-2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(9px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(11px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  opacity: 1;
  transition-delay: 0.2s;
  transform: scale(1);
}

.cxco-o-chat.is-test::after {
  font-size: var(--cxco-font-size, 40px);
  font-size: var(--cxco-font-size, 2.5rem);
  content: 'test version';
  z-index: 3;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.3;
  color: var(--cxco-red);
  pointer-events: none;
}

.cxco-o-chat .cxco-lightbox {
  cursor: zoom-in;
}

.cxco--inline .cxco-o-chat {
  position: relative;
  box-shadow: none;
  right: inherit;
  bottom: inherit;
  margin: 0;
  --cxco-width: initial;
  --cxco-min-width: initial;
  --cxco-max-width: 100%;
  --cxco-height: 100%;
  --cxco-min-height: initial;
  --cxco-max-height: 100%;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 * Simple matrix to display items in a grid
 ===================================================================================== */
.cxco-o-matrix {
  --cxco-grid-child-width: 350px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--cxco-grid-child-width, 350px), 1fr));
  align-items: start;
  justify-items: center;
  gap: calc(var(--cxco-ui-spacing, 16px)* 2);
  margin: var(--cxco-ui-spacing, 16px);
}

.cxco-o-matrix * + * {
  margin-top: 0;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** ==============================================================
 * Wrapper for global layout for layout header, content and footer
 ============================================================== */
.cxco-o-page {
  font-size: var(--cxco-font-size, 12px);
  font-size: var(--cxco-font-size, 0.75rem);
  font-family: var(--cxco-ui-font);
  line-height: var(--cxco-line-height, 1.5);
  display: grid;
  grid-template-columns: 1fr minmax(auto, 1440px) 1fr;
  color: var(--cxco-neutral-xx-light-inverted);
  background-color: var(--cxco-neutral-xx-light);
}

.cxco-o-page > * + * {
  margin-top: 0;
}

@media all and (min-width: 768px) {
  .cxco-o-page {
    height: 100vh;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
  }
}

.cxco-o-page__header {
  z-index: 51;
  grid-column: 1 / span 3;
  grid-row: 1;
}

@media all and (min-width: 768px) {
  .cxco-o-page__header {
    grid-column: 1 / span 2;
    grid-row: 1;
  }
}

.cxco-o-page__body {
  grid-column: 1 / span 3;
  grid-row: 2;
  scroll-behavior: smooth;
}

@media all and (min-width: 768px) {
  .cxco-o-page__body {
    overflow-y: scroll;
    overflow-x: hidden;
    grid-column: 2;
    grid-row: 2;
  }
  .cxco-o-page__body::-webkit-scrollbar {
    width: calc(var(--cxco-ui-spacing, 16px)/ 2);
  }
  .cxco-o-page__body::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .cxco-o-page__body::-webkit-scrollbar-thumb {
    border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
    min-height: calc(var(--cxco-ui-spacing, 16px)* 2);
    background-color: var(--cxco-neutral-x-dark);
  }
}

.cxco-o-page__footer {
  grid-column: 2;
  grid-row: 3;
}

.cxco-o-page__menu {
  z-index: 50;
  grid-column: 1 / span 3;
  grid-row: 2;
  pointer-events: none;
}

@media all and (min-width: 768px) {
  .cxco-o-page__menu {
    grid-column: 1;
    grid-row: 2 / span 2;
  }
}

.cxco-o-article {
  padding-left: var(--cxco-gutter) !important;
  padding-right: var(--cxco-gutter) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: calc(1440px + 2 * var(--cxco-gutter)) !important;
  width: 100%;
  margin: calc(var(--cxco-ui-spacing, 16px)* 3) 0;
  align-self: stretch;
  justify-self: stretch;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto auto;
  gap: 0 calc(var(--cxco-ui-spacing, 16px)* 3);
}

.cxco-o-article > * + * {
  margin-top: 0;
}

.cxco-o-article--asymetrical {
  grid-template-columns: 2fr 1fr;
}

.cxco-o-article--asymetrical[min-width~='768px'] {
  margin-left: unset !important;
  padding-left: calc(var(--cxco-gutter) * 2) !important;
}

.cxco-o-article__header {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.cxco-o-article__main {
  grid-row: 3;
  grid-column: 1 / span 2;
}

[min-width~='768px'] .cxco-o-article__main {
  grid-column: 1;
  grid-row: 2;
}

.cxco-o-article__aside {
  grid-row: 2;
  grid-column: 1 / span 2;
}

[min-width~='768px'] .cxco-o-article__aside {
  grid-column: 1;
  grid-column: 2;
  grid-row: 2;
}

.cxco-o-article__footer {
  margin-top: calc(var(--cxco-ui-spacing, 16px)* 2);
  grid-column: 1 / span 2;
  grid-row: 4;
}

[min-width~='768px'] .cxco-o-article__footer {
  grid-row: 3;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Article
 ===================================================================================== */
.cxco-c-article {
  position: relative;
}

.cxco-c-article > * + * {
  margin-top: 0;
}

.cxco-c-article ul {
  list-style: initial;
}

/* Article transitions */
.cxco-c-article-transition-leave-active,
.cxco-c-article-transition-enter-active {
  transition: all 0.4s;
  opacity: 0;
}

.cxco-c-article-transition-enter,
.cxco-c-article-transition-leave-to {
  opacity: 1;
}

.slide-right-leave-active,
.slide-right-enter-active,
.slide-left-leave-active,
.slide-left-enter-active {
  transition: all 0.5s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  transform: translate(100px, 0);
}

.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  transform: translate(-100px, 0);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Avatar agent
 ===================================================================================== */
.cxco-c-avatar {
  --cxco-c-avatar--bg-color: var(--cxco-primary);
  --cxco-c-avatar--url: var(--cxco-avatar-url);
  --cxco-c-avatar--width: calc(var(--cxco-ui-spacing, 16px)* 3);
  --cxco-c-avatar--height: calc(var(--cxco-ui-spacing, 16px)* 3);
  border-radius: 50%;
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(5px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  width: var(--cxco-c-avatar--width);
  height: var(--cxco-c-avatar--height);
  background-color: var(--cxco-c-avatar--bg-color);
  background-image: var(--cxco-c-avatar--url, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjAgMkg0Yy0xLjEgMC0xLjk5LjktMS45OSAyTDIgMjJsNC00aDE0YzEuMSAwIDItLjkgMi0yVjRjMC0xLjEtLjktMi0yLTJ6TTYgOWgxMnYySDZWOXptOCA1SDZ2LTJoOHYyem00LTZINlY2aDEydjJ6Ii8+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg=="));
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
  outline: none;
}

.cxco-o-chat .cxco-c-avatar {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Action. Similar to the floating action button : https://material.io/components/buttons-floating-action-button/#behavior
 *  1. Magic number '141.42%' is derived from the Pythagorean theorem. Hypotenuse = 141.42% = 100% ** 2 + 100% ** 2 10,000‬
 ===================================================================================== */
.cxco-c-action {
  --cxco-c-action--opacity: 1;
  --cxco-c-action--bg-color-start: hsla(var(--cxco-primary-dark-h), var(--cxco-primary-dark-s), var(--cxco-primary-dark-l), var(--cxco-c-action--opacity));
  --cxco-c-action--bg-color-end: hsla(var(--cxco-primary-light-h), var(--cxco-primary-light-s), var(--cxco-primary-light-l), var(--cxco-c-action--opacity));
  --cxco-c-action--color: var(--cxco-primary-inverted);
  --cxco-c-action--width: calc(var(--cxco-ui-spacing, 16px)* 3);
  --cxco-c-action--height: calc(var(--cxco-ui-spacing, 16px)* 3);
  border-radius: 50%;
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(-2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(9px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(11px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  background: transparent;
  background-image: linear-gradient(to right, var(--cxco-c-action--bg-color-start) 0%, var(--cxco-c-action--bg-color-end) 100%);
  background-size: 100% 1px;
  background-position: 0 0;
  background-size: 200% 1px;
  position: fixed;
  right: var(--cxco-gutter);
  bottom: var(--cxco-gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cxco-c-action--width);
  height: var(--cxco-c-action--height);
  margin-left: auto;
  border: 0;
  color: var(--cxco-c-action--color);
  cursor: pointer;
  transition: opacity 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66), background 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66), box-shadow 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
}

.cxco-c-action:hover {
  background-position: 100% 0;
}

.cxco-c-action:hover {
  box-shadow: 0 0 0 var(--cxco-primary);
  -webkit-animation: pulse 1.5s ease-out;
          animation: pulse 1.5s ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.cxco-c-action[aria-expanded='true'] {
  opacity: 0;
  transition-delay: 0.2s;
}

@media all and (min-width: 768px) {
  .cxco-c-action[aria-expanded='true'] {
    opacity: 1;
  }
}

.cxco-c-action__icon {
  background-image: var(--cxco-avatar-url, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjAgMkg0Yy0xLjEgMC0xLjk5LjktMS45OSAyTDIgMjJsNC00aDE0YzEuMSAwIDItLjkgMi0yVjRjMC0xLjEtLjktMi0yLTJ6TTYgOWgxMnYySDZWOXptOCA1SDZ2LTJoOHYyem00LTZINlY2aDEydjJ6Ii8+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg=="));
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
  padding: var(--cxco-ui-spacing, 16px);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Breadcrumbs
 ===================================================================================== */
.cxco-c-breadcrumb {
  --cxco-c-breadcrumb--color: var(--cxco-neutral-inverted);
  --cxco-c-breadcrumb--color-active: var(--cxco-primary);
  padding: 0;
  margin-left: 0;
  margin-bottom: 0;
  list-style: none;
  font-size: var(--cxco-font-size, 14px);
  font-size: var(--cxco-font-size, 0.875rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
}

.cxco-c-breadcrumb * + * {
  margin-top: 0;
}

.cxco-c-breadcrumb__list {
  padding: 0;
  margin-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.cxco-c-breadcrumb__item {
  display: inline-flex;
  align-items: center;
}

.cxco-c-breadcrumb__item:not(:last-child):after {
  border-top: 2px solid var(--cxco-c-breadcrumb--color);
  border-right: 2px solid var(--cxco-c-breadcrumb--color);
  content: '';
  margin-left: calc(var(--cxco-ui-spacing, 16px)/ 2);
  width: calc(var(--cxco-ui-spacing, 16px)/ 2);
  height: calc(var(--cxco-ui-spacing, 16px)/ 2);
  transform: rotateZ(45deg);
}

.cxco-c-breadcrumb__item + .cxco-c-breadcrumb__item {
  margin-left: calc(var(--cxco-ui-spacing, 16px)/ 2);
}

.cxco-c-breadcrumb__link {
  text-decoration: underline;
  cursor: pointer;
  color: var(--cxco-c-breadcrumb--color);
}

.cxco-c-breadcrumb__item:last-child .cxco-c-breadcrumb__link {
  color: var(--cxco-c-breadcrumb--color-active);
  text-decoration: none;
  pointer-events: none;
}

.cxco-c-breadcrumb__link:hover {
  color: var(--cxco-c-breadcrumb--color-active);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Default speech bubble
 *  1. Ensures visually whether the message comes from a certain agent or user.

 ===================================================================================== */
.cxco-c-bubble, .cxco-c-bubble--inverted, .cxco-c-dialog__option[data-state~='selected'] {
  --cxco-c-bubble--opacity: 1;
  --cxco-c-bubble--bg-color-start: hsla(var(--cxco-neutral-x-dark-h), var(--cxco-neutral-x-dark-s), var(--cxco-neutral-x-dark-l), var(--cxco-c-bubble--opacity));
  --cxco-c-bubble--bg-color-end: hsla(var(--cxco-neutral-dark-h), var(--cxco-neutral-dark-s), var(--cxco-neutral-dark-l), var(--cxco-c-bubble--opacity));
  --cxco-c-bubble--color: var(--cxco-neutral-inverted);
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(8px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  --cxco-c-bubble--font-size: var(--cxco-font-size);
  font-size: var(--cxco-c-bubble--font-size, 16px);
  font-size: var(--cxco-c-bubble--font-size, 1rem);
  font-family: var(--cxco-ui-font);
  line-height: var(--cxco-line-height, 1.5);
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  background-image: linear-gradient(to right, var(--cxco-c-bubble--bg-color-start) 0%, var(--cxco-c-bubble--bg-color-end) 100%);
  background-size: 100% 1px;
  background-position: 0 0;
  z-index: 1;
  align-self: flex-start;
  position: relative;
  display: inline-block;
  max-width: 80%;
  /*[1]*/
  padding: var(--cxco-ui-spacing, 16px);
  color: var(--cxco-c-bubble--color);
  opacity: 1;
  transition: opacity 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66), flex 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
}

.cxco-c-bubble--inverted, .cxco-c-dialog__option[data-state~='selected'] {
  --cxco-c-bubble--inverted--opacity: 1;
  --cxco-c-bubble--inverted--bg-color-start: hsla(var(--cxco-primary-dark-h), var(--cxco-primary-dark-s), var(--cxco-primary-dark-l), var(--cxco-c-bubble--inverted--opacity));
  --cxco-c-bubble--inverted--bg-color-end: hsla(var(--cxco-primary-light-h), var(--cxco-primary-light-s), var(--cxco-primary-light-l), var(--cxco-c-bubble--inverted--opacity));
  --cxco-c-bubble--inverted--color: var(--cxco-primary-inverted);
  background-image: linear-gradient(to right, var(--cxco-c-bubble--inverted--bg-color-start) 0%, var(--cxco-c-bubble--inverted--bg-color-end) 100%);
  background-size: 100% 1px;
  background-position: 0 0;
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  align-self: flex-end;
  color: var(--cxco-c-bubble--inverted--color);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Buttons
 *  Modifiers are based on visual 'loudness' metaphor,
 *  Most important Call to Action (primary) and less important (neutral)
 ===================================================================================== */
/**
 *	[1] Reset some properties so 'c-button' is the same when used as all elements
 * '<a>', '<button>', '<input>'
 */
.cxco-c-button, .cxco-c-button--outlined, .cxco-c-dialog__option, .cxco-c-tag {
  --cxco-c-button--bg-color-start: var(--cxco-primary-dark);
  --cxco-c-button--bg-color-end: var(--cxco-primary);
  --cxco-c-button--color: var(--cxco-primary);
  --cxco-c-button--color-active: var(--cxco-primary-inverted);
  --cxco-c-button--outline: 2px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  --cxco-c-button--font-size: var(--cxco-font-size);
  font-size: var(--cxco-c-button--font-size, 16px);
  font-size: var(--cxco-c-button--font-size, 1rem);
  font-family: var(--cxco-ui-font);
  line-height: var(--cxco-line-height, 1.5);
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  color: var(--cxco-c-button--color);
  display: inline-block;
  height: auto;
  /* [1] */
  border: 0;
  /* [1] */
  padding: calc(var(--cxco-ui-spacing, 16px)/ 2) var(--cxco-ui-spacing, 16px);
  text-decoration: none;
  /* [1] */
  -webkit-appearance: none;
  font-weight: bold;
  cursor: pointer;
  /* [1] */
  box-shadow: none;
  background-color: transparent;
  background-image: linear-gradient(to right, var(--cxco-c-button--bg-color-start) 0%, var(--cxco-c-button--bg-color-start) 66.66%, transparent 66.66%, transparent 100%);
  background-size: calc(300% + calc(var(--cxco-c-button--outline) * 4)) 1px;
  background-position: calc(100% + var(--cxco-c-button--outline)) 0;
  transition: background 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66), box-shadow 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66), border 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66), color 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

.cxco-c-button:hover:not(:disabled):not([data-state~='selected']), .cxco-c-button--outlined:hover:not(:disabled):not([data-state~='selected']), .cxco-c-dialog__option:hover:not(:disabled):not([data-state~='selected']), .cxco-c-tag:hover:not(:disabled):not([data-state~='selected']), .cxco-c-button[data-state~='selected'], .cxco-c-button--outlined[data-state~='selected'], .cxco-c-dialog__option[data-state~='selected'], .cxco-c-tag[data-state~='selected'] {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(5px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  color: var(--cxco-c-button--color-active);
  background-position: calc(33.33% + 0px - var(--cxco-c-button--outline)) 0;
  box-shadow: 0 0 0 var(--cxco-primary);
  -webkit-animation: pulse 1.5s ease-out;
          animation: pulse 1.5s ease-out;
}

.cxco-c-button:active:not(:disabled):not([data-state~='selected']), .cxco-c-button--outlined:active:not(:disabled):not([data-state~='selected']), .cxco-c-dialog__option:active:not(:disabled):not([data-state~='selected']), .cxco-c-tag:active:not(:disabled):not([data-state~='selected']) {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(8px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  background-position: calc(0% + 0px - var(--cxco-c-button--outline)) 0;
}

.cxco .cxco-c-button:focus, .cxco .cxco-c-button--outlined:focus, .cxco .cxco-c-dialog__option:focus, .cxco .cxco-c-tag:focus {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(8px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  outline: none;
}

.cxco-c-button:disabled, .cxco-c-button--outlined:disabled, .cxco-c-dialog__option:disabled, .cxco-c-tag:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cxco-c-button--outlined, .cxco-c-dialog__option, .cxco-c-tag {
  border: var(--cxco-c-button--outline) solid var(--cxco-primary);
}

.cxco-c-button--outlined:hover:not(:disabled):not([data-state~='selected']), .cxco-c-dialog__option:hover:not(:disabled):not([data-state~='selected']), .cxco-c-tag:hover:not(:disabled):not([data-state~='selected']), .cxco-c-button--outlined:active:not(:disabled):not([data-state~='selected']), .cxco-c-dialog__option:active:not(:disabled):not([data-state~='selected']), .cxco-c-tag:active:not(:disabled):not([data-state~='selected']), .cxco-c-button--outlined[data-state~='selected'], .cxco-c-dialog__option[data-state~='selected'], .cxco-c-tag[data-state~='selected'] {
  border-color: transparent;
}

.cxco-c-button--contained {
  --cxco-c-button--color: var(--cxco-primary-dark-inverted);
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  background-image: linear-gradient(to right, var(--cxco-primary-dark) 0%, var(--cxco-primary) 100%);
  background-size: 300% 1px;
}

.cxco-c-button--contained:hover:not(:disabled):not([data-state~='selected']) {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(8px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
}

.cxco-c-button--contained:active:not(:disabled):not([data-state~='selected']) {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(-2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(9px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(11px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Card
 ===================================================================================== */
.cxco-c-card {
  --cxco-c-card--width: 100%;
  --cxco-c-card--max-width: 320px;
  --cxco-c-card--opacity: 1;
  --cxco-c-card--bg-color-start: hsla(var(--cxco-neutral-h), var(--cxco-neutral-s), var(--cxco-neutral-l), var(--cxco-c-card--opacity));
  --cxco-c-card--bg-color-end: hsla(var(--cxco-neutral-light-h), var(--cxco-neutral-light-s), var(--cxco-neutral-light-l), var(--cxco-c-card--opacity));
  --cxco-c-card--color: var(--cxco-neutral-inverted);
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(5px * var(--cxco-shadow-elevation, 1)) calc(8px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(10px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  border: 2px solid var(--cxco-neutral-dark);
  background-image: linear-gradient(to bottom, var(--cxco-c-card--bg-color-start) 0%, var(--cxco-c-card--bg-color-end) 100%);
  background-size: 1px 100%;
  background-position: 0 0;
  background-size: 1px 200%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: var(--cxco-c-card--width);
  max-width: var(--cxco-c-card--max-width);
  text-decoration: none;
  color: var(--cxco-c-card--color);
  transition: background 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66), box-shadow 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
  cursor: pointer;
}

.cxco-c-card:hover {
  background-position: 0 100%;
}

.cxco-c-card * + * {
  margin-top: var(--cxco-vertical-spacing, calc(var(--cxco-ui-spacing, 16px)/ 2));
}

.cxco-c-card:hover {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(5px * var(--cxco-shadow-elevation, 1)) calc(8px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(10px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
}

.cxco-c-card:active {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(-2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(9px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(11px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
}

.cxco .cxco-c-card:focus {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(-2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(9px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(11px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  outline: none;
}

.cxco-c-card--vertical {
  --cxco-c-card--max-width: 50rem;
}

@media all and (min-width: 768px) {
  .cxco-c-card--vertical {
    flex-direction: row;
  }
}

@media all and (min-width: 768px) {
  .cxco-c-card--vertical .cxco-c-card__figure {
    padding: 0;
  }
}

.cxco-c-card__main {
  padding: calc(var(--cxco-ui-spacing, 16px)* 2);
}

.cxco-c-card__title {
  --cxco-c-card__title--font-size: var(--cxco-font-size);
  font-size: var(--cxco-c-card__title--font-size, 24px);
  font-size: var(--cxco-c-card__title--font-size, 1.5rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  margin: 0;
  color: var(--cxco-c-card--color);
}

.cxco-c-card__body {
  --cxco-c-card__body--font-size: var(--cxco-font-size);
  font-size: var(--cxco-c-card__body--font-size, 14px);
  font-size: var(--cxco-c-card__body--font-size, 0.875rem);
  font-family: var(--cxco-ui-font);
  line-height: var(--cxco-line-height, 1.5);
  margin: 0;
  color: var(--cxco-c-card--color);
  font-weight: normal;
}

.cxco-c-card__figure {
  margin: 0;
  padding-top: 61.8%;
  background-position: center;
  background-size: auto 100%;
  transition: background 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

.cxco-c-card:hover .cxco-c-card__figure {
  background-size: auto 110%;
}

.cxco-c-card__figure--vertical {
  background-size: 100% auto;
}

.cxco-c-card:hover .cxco-c-card__figure--vertical {
  background-size: 110% auto;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Close 
 ===================================================================================== */
.cxco-c-close {
  --cxco-c-close-bg-color: var(--cxco-neutral-inverted);
  --cxco-c-close--opacity: 1;
  z-index: 100;
  position: relative;
  width: calc(var(--cxco-ui-spacing, 16px)* 2);
  height: calc(var(--cxco-ui-spacing, 16px)* 2);
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.cxco-c-close svg {
  fill: var(--cxco-c-close-bg-color);
  width: 32px;
  width: calc(var(--cxco-ui-spacing, 16px) * 2);
  height: 32px;
  height: calc(var(--cxco-ui-spacing, 16px) * 2);
}

.cxco-c-close:hover svg {
  fill: var(--cxco-c-close-bg-color);
  transition: background 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

.cxco-o-chat .cxco-c-close {
  grid-column: 4;
  grid-row: 2;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Conversation containing nodes
 *  1. Currently we copy the CSS grid layout from the cxco-o-chat, because grid lines can't be
 *     inherited from parent elements with CSS grid layout. When subgrids are supported we move
 *     away from this. subgrids are currently only supported by Firefox 71 - 72 https://caniuse.com/#feat=css-subgrid.
 *  2. Ensure that conversation nodes appear in regular block flow.    
 ===================================================================================== */
.cxco-c-conversation {
  z-index: -1;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  display: grid;
  grid-template-columns: var(--cxco-ui-spacing, 16px) minmax(calc(var(--cxco-ui-spacing, 16px)* 2), auto) 1fr minmax(calc(var(--cxco-ui-spacing, 16px)* 2), auto) var(--cxco-ui-spacing, 16px);
  /* [1] */
  grid-auto-rows: -webkit-min-content;
  grid-auto-rows: min-content;
  /* [2} */
  grid-row-gap: var(--cxco-ui-spacing, 16px);
  margin: 0;
  scroll-behavior: smooth;
}

.cxco-c-conversation::-webkit-scrollbar {
  width: calc(var(--cxco-ui-spacing, 16px)/ 2);
}

.cxco-c-conversation::-webkit-scrollbar-track {
  background-color: transparent;
}

.cxco-c-conversation::-webkit-scrollbar-thumb {
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  min-height: calc(var(--cxco-ui-spacing, 16px)* 2);
  background-color: var(--cxco-neutral-x-dark);
}

.cxco-c-conversation > * + * {
  margin-top: 0;
}

@supports (grid-template-columns: subgrid) {
  .cxco-c-conversation {
    gap: var(--cxco-ui-spacing, 16px) calc(var(--cxco-ui-spacing, 16px)/ 4);
    grid-template-columns: subgrid;
  }
}

.cxco-o-chat .cxco-c-conversation {
  grid-column: 1 / span 5;
  grid-row: 3 / span 1;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Divider used for segmenting 
 ===================================================================================== */
.cxco-c-divider {
  --cxco-c-divider--opacity: 1;
  --cxco-c-divider--left-bg-color-start: hsla(var(--cxco-primary-dark-h), var(--cxco-primary-dark-s), var(--cxco-primary-dark-l), var(--cxco-c-divider--opacity));
  --cxco-c-divider--left-bg-color-end: hsla(var(--cxco-primary-h), var(--cxco-primary-s), var(--cxco-primary-l), var(--cxco-c-divider--opacity));
  --cxco-c-divider--right-bg-color-start: hsla(var(--cxco-primary-h), var(--cxco-primary-s), var(--cxco-primary-l), var(--cxco-c-divider--opacity));
  --cxco-c-divider--right-bg-color-end: hsla(var(--cxco-primary-light-h), var(--cxco-primary-light-s), var(--cxco-primary-light-l), var(--cxco-c-divider--opacity));
  --cxco-c-divider--color: var(--cxco-neutral-inverted);
  --cxco-c-divider--font-size: var(--cxco-font-size);
  font-size: var(--cxco-c-divider--font-size, 14px);
  font-size: var(--cxco-c-divider--font-size, 0.875rem);
  font-family: var(--cxco-ui-font);
  line-height: var(--cxco-line-height, 1.5);
  position: relative;
  margin: var(--cxco-ui-spacing, 16px) 0;
  display: flex;
  align-items: center;
  justify-content: stretch;
  /* Lines before and after text */
  /* Optional text */
}

.cxco-c-divider::after, .cxco-c-divider::before {
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  content: '';
  display: block;
  flex: auto;
  height: 1px;
}

.cxco-c-divider::before {
  background-image: linear-gradient(to right, var(--cxco-c-divider--left-bg-color-start) 0%, var(--cxco-c-divider--left-bg-color-end) 100%);
  background-size: 100% 1px;
  background-position: 0 0;
}

.cxco-c-divider::after {
  background-image: linear-gradient(to right, var(--cxco-c-divider--right-bg-color-start) 0%, var(--cxco-c-divider--right-bg-color-end) 100%);
  background-size: 100% 1px;
  background-position: 0 0;
}

.cxco-c-divider > * {
  color: var(--cxco-c-divider--color);
  padding: calc(var(--cxco-ui-spacing, 16px)/ 2);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Buttons
 *  Modifiers are based on visual 'loudness' metaphor,
 *  Most important Call to Action (primary) and less important (neutral)
 ===================================================================================== */
/**
 *	[1] Reset some properties so 'c-button' is the same when used as all elements
 * '<a>', '<button>', '<input>'
 */
.cxco-c-button, .cxco-c-button--outlined, .cxco-c-dialog__option, .cxco-c-tag {
  --cxco-c-button--bg-color-start: var(--cxco-primary-dark);
  --cxco-c-button--bg-color-end: var(--cxco-primary);
  --cxco-c-button--color: var(--cxco-primary);
  --cxco-c-button--color-active: var(--cxco-primary-inverted);
  --cxco-c-button--outline: 2px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  --cxco-c-button--font-size: var(--cxco-font-size);
  font-size: var(--cxco-c-button--font-size, 16px);
  font-size: var(--cxco-c-button--font-size, 1rem);
  font-family: var(--cxco-ui-font);
  line-height: var(--cxco-line-height, 1.5);
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  color: var(--cxco-c-button--color);
  display: inline-block;
  height: auto;
  /* [1] */
  border: 0;
  /* [1] */
  padding: calc(var(--cxco-ui-spacing, 16px)/ 2) var(--cxco-ui-spacing, 16px);
  text-decoration: none;
  /* [1] */
  -webkit-appearance: none;
  font-weight: bold;
  cursor: pointer;
  /* [1] */
  box-shadow: none;
  background-color: transparent;
  background-image: linear-gradient(to right, var(--cxco-c-button--bg-color-start) 0%, var(--cxco-c-button--bg-color-start) 66.66%, transparent 66.66%, transparent 100%);
  background-size: calc(300% + calc(var(--cxco-c-button--outline) * 4)) 1px;
  background-position: calc(100% + var(--cxco-c-button--outline)) 0;
  transition: background 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66), box-shadow 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66), border 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66), color 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

.cxco-c-button:hover:not(:disabled):not([data-state~='selected']), .cxco-c-button--outlined:hover:not(:disabled):not([data-state~='selected']), .cxco-c-dialog__option:hover:not(:disabled):not([data-state~='selected']), .cxco-c-tag:hover:not(:disabled):not([data-state~='selected']), .cxco-c-button[data-state~='selected'], .cxco-c-button--outlined[data-state~='selected'], .cxco-c-dialog__option[data-state~='selected'], .cxco-c-tag[data-state~='selected'] {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(5px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  color: var(--cxco-c-button--color-active);
  background-position: calc(33.33% + 0px - var(--cxco-c-button--outline)) 0;
  box-shadow: 0 0 0 var(--cxco-primary);
  -webkit-animation: pulse 1.5s ease-out;
          animation: pulse 1.5s ease-out;
}

.cxco-c-button:active:not(:disabled):not([data-state~='selected']), .cxco-c-button--outlined:active:not(:disabled):not([data-state~='selected']), .cxco-c-dialog__option:active:not(:disabled):not([data-state~='selected']), .cxco-c-tag:active:not(:disabled):not([data-state~='selected']) {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(8px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  background-position: calc(0% + 0px - var(--cxco-c-button--outline)) 0;
}

.cxco .cxco-c-button:focus, .cxco .cxco-c-button--outlined:focus, .cxco .cxco-c-dialog__option:focus, .cxco .cxco-c-tag:focus {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(8px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  outline: none;
}

.cxco-c-button:disabled, .cxco-c-button--outlined:disabled, .cxco-c-dialog__option:disabled, .cxco-c-tag:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cxco-c-button--outlined, .cxco-c-dialog__option, .cxco-c-tag {
  border: var(--cxco-c-button--outline) solid var(--cxco-primary);
}

.cxco-c-button--outlined:hover:not(:disabled):not([data-state~='selected']), .cxco-c-dialog__option:hover:not(:disabled):not([data-state~='selected']), .cxco-c-tag:hover:not(:disabled):not([data-state~='selected']), .cxco-c-button--outlined:active:not(:disabled):not([data-state~='selected']), .cxco-c-dialog__option:active:not(:disabled):not([data-state~='selected']), .cxco-c-tag:active:not(:disabled):not([data-state~='selected']), .cxco-c-button--outlined[data-state~='selected'], .cxco-c-dialog__option[data-state~='selected'], .cxco-c-tag[data-state~='selected'] {
  border-color: transparent;
}

.cxco-c-button--contained {
  --cxco-c-button--color: var(--cxco-primary-dark-inverted);
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  background-image: linear-gradient(to right, var(--cxco-primary-dark) 0%, var(--cxco-primary) 100%);
  background-size: 300% 1px;
}

.cxco-c-button--contained:hover:not(:disabled):not([data-state~='selected']) {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(8px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
}

.cxco-c-button--contained:active:not(:disabled):not([data-state~='selected']) {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(-2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(9px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(11px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Default speech bubble
 *  1. Ensures visually whether the message comes from a certain agent or user.

 ===================================================================================== */
.cxco-c-bubble, .cxco-c-bubble--inverted, .cxco-c-dialog__option[data-state~='selected'] {
  --cxco-c-bubble--opacity: 1;
  --cxco-c-bubble--bg-color-start: hsla(var(--cxco-neutral-x-dark-h), var(--cxco-neutral-x-dark-s), var(--cxco-neutral-x-dark-l), var(--cxco-c-bubble--opacity));
  --cxco-c-bubble--bg-color-end: hsla(var(--cxco-neutral-dark-h), var(--cxco-neutral-dark-s), var(--cxco-neutral-dark-l), var(--cxco-c-bubble--opacity));
  --cxco-c-bubble--color: var(--cxco-neutral-inverted);
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(8px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  --cxco-c-bubble--font-size: var(--cxco-font-size);
  font-size: var(--cxco-c-bubble--font-size, 16px);
  font-size: var(--cxco-c-bubble--font-size, 1rem);
  font-family: var(--cxco-ui-font);
  line-height: var(--cxco-line-height, 1.5);
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  background-image: linear-gradient(to right, var(--cxco-c-bubble--bg-color-start) 0%, var(--cxco-c-bubble--bg-color-end) 100%);
  background-size: 100% 1px;
  background-position: 0 0;
  z-index: 1;
  align-self: flex-start;
  position: relative;
  display: inline-block;
  max-width: 80%;
  /*[1]*/
  padding: var(--cxco-ui-spacing, 16px);
  color: var(--cxco-c-bubble--color);
  opacity: 1;
  transition: opacity 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66), flex 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
}

.cxco-c-bubble--inverted, .cxco-c-dialog__option[data-state~='selected'] {
  --cxco-c-bubble--inverted--opacity: 1;
  --cxco-c-bubble--inverted--bg-color-start: hsla(var(--cxco-primary-dark-h), var(--cxco-primary-dark-s), var(--cxco-primary-dark-l), var(--cxco-c-bubble--inverted--opacity));
  --cxco-c-bubble--inverted--bg-color-end: hsla(var(--cxco-primary-light-h), var(--cxco-primary-light-s), var(--cxco-primary-light-l), var(--cxco-c-bubble--inverted--opacity));
  --cxco-c-bubble--inverted--color: var(--cxco-primary-inverted);
  background-image: linear-gradient(to right, var(--cxco-c-bubble--inverted--bg-color-start) 0%, var(--cxco-c-bubble--inverted--bg-color-end) 100%);
  background-size: 100% 1px;
  background-position: 0 0;
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  align-self: flex-end;
  color: var(--cxco-c-bubble--inverted--color);
}

/** =====================================================================================
 *  Dialog
 *  1. Shrink animation due flex transition
 *  2. Dialog options appear to right to improve UX on inline layout. 
 *  3. Ensures visually whether the message comes from a certain agent or user.

 ===================================================================================== */
.cxco-c-dialog {
  --cxco-c-dialog--align: flex-start;
  --cxco-c-dialog--direction: row;
  padding: 0;
  margin-left: 0;
  margin-bottom: 0;
  list-style: none;
  grid-column: 2 / span 3;
  grid-row: 3;
  align-self: self-end;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: var(--cxco-c-dialog--align, flex-start);
  flex-direction: var(--cxco-c-dialog--direction, row);
  margin: calc(0px - calc(var(--cxco-ui-spacing, 16px)/ 2));
  padding-bottom: calc(var(--cxco-ui-spacing, 16px)/ 2);
}

.cxco-c-dialog * + * {
  margin-top: 0;
}

.cxco-c-dialog[data-state~='selected'] {
  justify-content: flex-end;
}

.cxco-c-dialog[data-layout~='vertical'] {
  --cxco-c-dialog--align: flex-start;
  --cxco-c-dialog--direction: column;
}

.cxco-c-dialog__item {
  display: flex;
  flex-wrap: wrap;
  max-width: 80%;
  display: inline-flex;
  flex: 0 1 auto;
  padding: calc(var(--cxco-ui-spacing, 16px)/ 4);
}

.cxco-c-dialog__item[data-state~='selected'] {
  justify-content: flex-end;
  margin: 0;
}

.cxco-c-dialog__option {
  --cxco-c-dialog--bg-color-start: var(--cxco-primary-dark);
  --cxco-c-dialog--bg-color-end: var(--cxco-primary);
  --cxco-c-dialog--color: var(--cxco-primary);
  --cxco-c-dialog--color-active: var(--cxco-primary-inverted);
  position: relative;
  flex: 1 1 100%;
  /*[1]*/
  margin: 0 var(--cxco-ui-spacing, 16px);
  text-align: initial;
  background-image: linear-gradient(to right, var(--cxco-c-dialog--bg-color-start) 0%, var(--cxco-c-dialog--bg-color-end) 66.66%, var(--cxco-neutral) 66.66%, var(--cxco-neutral) 100%);
  color: var(--cxco-c-dialog--color);
  margin: 0;
  font-weight: 800;
}

.cxco-c-dialog__option:hover:not(:disabled):not([data-state~='selected']), .cxco-c-dialog__option[data-state~='selected'] {
  color: var(--cxco-c-dialog--color-active);
  margin: 0;
}

.cxco-c-dialog__option:not([data-state~='selected']) {
  flex: none;
  margin: 0;
}

[data-state~='selected'] .cxco-c-dialog__option:not([data-state~='selected']) {
  display: none;
}

.cxco-c-dialog__option[data-state~='selected'] {
  display: flex;
  flex: initial;
  border-top-right-radius: 0;
  border: 0;
  cursor: auto;
  font-weight: normal;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Feedback
 *
 *  [1] Stop-color svg attribute is used in svg gradients.
 /** ===================================================================================== */
.cxco-c-feedback {
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  display: inline-block;
  width: 100%;
  transition: transform 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66), box-shadow 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66);
  transform-origin: left top;
}

.cxco-c-feedback * + * {
  margin-top: var(--cxco-vertical-spacing, calc(var(--cxco-ui-spacing, 16px)/ 2));
}

.cxco-c-feedback[data-state='closed'] {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  opacity: 0;
  transform: scale(0);
}

.cxco-c-feedback[data-state='open'] {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(5px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  border: 2px solid var(--cxco-neutral-dark);
  padding: calc(var(--cxco-ui-spacing, 16px)/ 2);
  opacity: 1;
  transform: scale(1);
}

.cxco-c-feedback__title {
  --cxco-c-feedback__title--font-size: var(--cxco-font-size);
  font-size: var(--cxco-c-feedback__title--font-size, 16px);
  font-size: var(--cxco-c-feedback__title--font-size, 1rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  font-weight: bold;
  flex-grow: 9999;
  margin-right: var(--cxco-ui-spacing, 16px);
  padding-bottom: calc(var(--cxco-ui-spacing, 16px)/ 2);
  text-align: left;
}

.cxco-c-feedback[min-width~='400px'] .cxco-c-feedback__title {
  --cxco-c-feedback__title--large--font-size: var(--cxco-font-size);
  font-size: var(--cxco-c-feedback__title--large--font-size, 24px);
  font-size: var(--cxco-c-feedback__title--large--font-size, 1.5rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
}

.cxco-c-feedback__footer {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.cxco-c-feedback__footer * + * {
  margin-top: 0;
}

.cxco-c-feedback__footer * + * {
  margin-left: var(--cxco-ui-spacing, 16px);
}

.cxco-c-feedback__rating {
  padding: 0;
  margin-left: 0;
  margin-bottom: 0;
  list-style: none;
  flex-grow: 1;
  flex-basis: auto;
  display: flex;
  margin: -calc(var(--cxco-ui-spacing, 16px)/ 4)/2;
}

.cxco-c-feedback__rating * + * {
  margin-top: 0;
}

.cxco-c-feedback[data-state='open'] .cxco-c-feedback__rating {
  display: none;
}

.cxco-c-feedback__point {
  flex: none;
  display: flex;
  align-items: center;
  padding: calc(var(--cxco-ui-spacing, 16px)/ 4)/2;
  outline: none;
  cursor: pointer;
}

.cxco-c-feedback__point + .cxco-c-feedback__point {
  margin-left: calc(var(--cxco-ui-spacing, 16px)/ 4);
}

.cxco-c-feedback__point input {
  display: none;
}

.cxco-c-feedback__point input:checked + label .cxco-c-feedback__icon--up {
  transform: rotateZ(-10deg) translateX(2px) translateY(-2px);
}

.cxco-c-feedback__point input:checked + label .cxco-c-feedback__icon--down {
  transform: rotateZ(10deg) translateX(2px) translateY(2px);
}

.cxco-c-feedback__icon {
  cursor: pointer;
  width: calc(var(--cxco-ui-spacing, 16px)* 2);
  height: calc(var(--cxco-ui-spacing, 16px)* 2);
}

.cxco-c-feedback__icon--small {
  width: calc(var(--cxco-ui-spacing, 16px) * 1.5);
  height: calc(var(--cxco-ui-spacing, 16px) * 1.5);
}

.cxco-c-feedback__icon--up {
  transition: transform 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

.cxco-c-feedback__icon--up:hover {
  transform: rotateZ(-10deg) translateX(2px) translateY(-2px);
}

.cxco-c-feedback__icon--down {
  transition: transform 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

.cxco-c-feedback__icon--down:hover {
  transform: rotateZ(10deg) translateX(2px) translateY(2px);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Field
 ===================================================================================== */
.cxco-c-field {
  border-top: 2px solid var(--cxco-neutral-dark);
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: calc(var(--cxco-ui-spacing, 16px)/ 2) var(--cxco-ui-spacing, 16px);
  color: var(--cxco-primary-inverted);
}

.cxco-c-field * + * {
  margin-top: 0;
}

cxco-o-chat .cxco-c-field {
  grid-column: 1 / span 5;
  grid-row: 4 / span 2;
}

.cxco-c-field__input {
  --cxco-c-field--font-size: var(--cxco-font-size);
  font-size: var(--cxco-c-field--font-size, 24px);
  font-size: var(--cxco-c-field--font-size, 1.5rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  overflow: hidden;
  display: block;
  flex: auto;
  margin: 0;
  /* Reset for Safari */
  border: 0;
  color: var(--cxco-neutral-inverted);
  background: transparent;
  caret-color: var(--cxco-primary);
  resize: none;
  font-weight: bold;
}

.cxco .cxco-c-field__input:focus {
  outline: none;
  border-image-slice: 1;
}

.cxco-c-field__input::-webkit-input-placeholder {
  color: var(--cxco-neutral-xx-dark);
  opacity: 0.7;
}

.cxco-c-field__input::-moz-placeholder {
  color: var(--cxco-neutral-xx-dark);
  opacity: 0.7;
}

.cxco-c-field__input:-ms-input-placeholder {
  color: var(--cxco-neutral-xx-dark);
  opacity: 0.7;
}

.cxco-c-field__input::-ms-input-placeholder {
  color: var(--cxco-neutral-xx-dark);
  opacity: 0.7;
}

.cxco-c-field__input::placeholder {
  color: var(--cxco-neutral-xx-dark);
  opacity: 0.7;
}

.cxco-c-field__button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
  width: calc(var(--cxco-ui-spacing, 16px)* 2);
  height: calc(var(--cxco-ui-spacing, 16px)* 2);
  margin-left: calc(var(--cxco-ui-spacing, 16px)/ 4);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.cxco-c-field__button svg {
  flex: none;
}

.cxco-c-field__button--contained {
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  background: var(--cxco-primary);
}

.cxco-c-field__button--contained:hover {
  box-shadow: 0 0 0 var(--cxco-primary);
  -webkit-animation: pulse 1.5s ease-out;
          animation: pulse 1.5s ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.cxco-c-autocomplete__result {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin-left: var(--cxco-ui-spacing, 16px);
  padding: calc(var(--cxco-ui-spacing, 16px)/ 4) 0;
  pointer-events: none;
}

.cxco-c-autocomplete__text {
  visibility: hidden;
}

.cxco-c-autocomplete__result {
  font-weight: bold;
  cursor: pointer;
  pointer-events: visible;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Figure
  *	[1] Fluid images for responsive purposes. Needs to override inline width attributes.
 ===================================================================================== */
.cxco-c-figure {
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cxco-c-figure * + * {
  margin-top: 0;
}

@media all and (max-width: 767px) {
  .cxco-c-figure {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
  }
}

.cxco-c-figure.center {
  margin: auto;
}

.cxco-c-figure.right {
  margin-left: auto;
}

.cxco-c-figure.left {
  margin-right: auto;
}

.cxco-c-figure__group {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0;
}

.cxco-c-figure__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: calc(var(--cxco-ui-spacing, 16px)/ 2) var(--cxco-ui-spacing, 16px);
  text-align: left;
  color: var(--cxco-neutral-x-dark-inverted);
  background-color: hsla(var(--cxco-neutral-x-dark-h), var(--cxco-neutral-x-dark-s), var(--cxco-neutral-x-dark-l), 0.7);
}

.cxco-c-figure__link {
  display: block;
  text-decoration: underline;
}

.cxco-c-figure__link:hover {
  color: var(--cxco-neutral-x-light);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Footer
 ===================================================================================== */
.cxco-c-footer {
  border-top: 4px solid var(--cxco-neutral-light);
  background-color: var(--cxco-neutral-x-light);
  text-align: right;
}

.cxco-c-footer__content {
  padding-left: var(--cxco-gutter) !important;
  padding-right: var(--cxco-gutter) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: calc(1440px + 2 * var(--cxco-gutter)) !important;
  width: 100%;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  padding-top: var(--cxco-ui-spacing, 16px);
  padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 3);
}

@media all and (min-width: 768px) {
  .cxco-c-footer__content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Fold
 ===================================================================================== */
.cxco-c-fold {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(8px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  transform-origin: top left;
  will-change: transform;
}

.cxco-c-fold[data-state='creating'] {
  -webkit-animation: fade-ins 400ms ease-in;
          animation: fade-ins 400ms ease-in;
}

.cxco-c-fold[data-state='removing'] {
  -webkit-animation: fade-outs 400ms ease-in;
          animation: fade-outs 400ms ease-in;
  opacity: 0;
}

.cxco-c-fold__item {
  overflow: hidden;
  /* prevent children background-color from overflowing the parent border-radius*/
  margin-top: 0;
  background-color: var(--cxco-neutral-xx-light);
  border-bottom: 2px solid var(--cxco-neutral-dark);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 0;
}

.cxco-c-fold__item > * + * {
  margin-top: 0;
}

.cxco-c-fold__item + .cxco-c-fold__item {
  border-top: 1px solid var(--cxco-neutral);
}

.cxco-c-fold__item:last-of-type {
  border-bottom-left-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  border-bottom-right-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
}

.cxco-c-fold__item:first-of-type {
  border-top: 2px solid var(--cxco-neutral-dark);
  border: none;
  border-top-left-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  border-top-right-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
}

.cxco-c-fold__header {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(var(--cxco-ui-spacing, 16px)/ 2);
  padding-right: var(--cxco-ui-spacing, 16px);
  padding-bottom: calc(var(--cxco-ui-spacing, 16px)/ 2);
  color: var(--cxco-neutral-xx-light-inverted);
  text-decoration: none;
  transition: background-color 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
  cursor: pointer;
}

.cxco-c-fold__header:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.cxco-c-fold[min-width~='640px'] .cxco-c-fold__header,
.cxco-c-fold[min-width~='40rem'] .cxco-c-fold__header {
  padding-right: calc(var(--cxco-ui-spacing, 16px)* 2);
  padding-left: var(--cxco-ui-spacing, 16px);
}

.cxco-c-fold__header::after {
  content: '';
  border-top: 2px solid var(--cxco-neutral-x-dark);
  border-right: 2px solid var(--cxco-neutral-x-dark);
  width: calc(var(--cxco-ui-spacing, 16px)/ 2);
  height: calc(var(--cxco-ui-spacing, 16px)/ 2);
  margin-left: calc(var(--cxco-ui-spacing, 16px)/ 2);
  transition: transform 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66), box-shadow 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
  transform: rotateZ(135deg);
}

[data-state='open'] .cxco-c-fold__header::after {
  border-top: 2px solid var(--cxco-primary);
  border-right: 2px solid var(--cxco-primary);
  transform: rotateZ(315deg);
}

.cxco-c-fold__header :hover::after,
.cxco-c-fold__header :active::after {
  transform: rotateZ(135deg);
}

.cxco-c-fold__title {
  font-size: var(--cxco-font-size, 16px);
  font-size: var(--cxco-font-size, 1rem);
  font-weight: normal;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--cxco-ui-spacing, 16px)/ 2) var(--cxco-ui-spacing, 16px);
  margin: 0;
  color: var(--cxco-neutral-xx-light-inverted);
  text-decoration: none;
  transition: background-color 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
  cursor: pointer;
}

.cxco-c-fold[min-width~='640px'] .cxco-c-fold__title,
.cxco-c-fold[min-width~='40rem'] .cxco-c-fold__title {
  padding-right: calc(var(--cxco-ui-spacing, 16px)* 2);
  padding-left: calc(var(--cxco-ui-spacing, 16px)* 2);
}

.cxco-c-fold__content {
  background-image: linear-gradient(to bottom, var(--cxco-neutral-xx-light) 0%, var(--cxco-neutral-x-light) 100%);
}

.cxco-c-fold__content > * {
  margin: var(--cxco-ui-spacing, 16px);
}

[data-state='closed'] .cxco-c-fold__content {
  height: 0;
}

.cxco-c-fold[min-width~='640px'] .cxco-c-fold__content,
.cxco-c-fold[min-width~='40rem'] .cxco-c-fold__content {
  padding-left: calc(var(--cxco-ui-spacing, 16px)* 2);
}

@-webkit-keyframes fade-ins {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-ins {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fade-outs {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-outs {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/** =====================================================================================
 *  Form
 ===================================================================================== */
.cxco-c-form > * + * {
  margin-top: 0;
}

.cxco-c-form__header {
  padding: var(--cxco-ui-spacing, 16px) var(--cxco-ui-spacing, 16px) 0 var(--cxco-ui-spacing, 16px);
}

.cxco-c-form__footer {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: var(--cxco-ui-spacing, 16px);
}

.cxco-c-form__footer * + * {
  margin-top: 0;
}

* + .cxco-c-form__footer {
  border-top: 2px solid var(--cxco-neutral-dark);
}

.cxco-c-form__legend {
  font-size: var(--cxco-font-size, 16px);
  font-size: var(--cxco-font-size, 1rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  padding: var(--cxco-ui-spacing, 16px);
  margin: calc(0px - var(--cxco-ui-spacing, 16px));
}

.cxco-c-form__fieldset {
  border: 0;
  border-top: 2px solid var(--cxco-neutral-dark);
  overflow: auto;
  padding: var(--cxco-ui-spacing, 16px);
}

.cxco-c-form__fieldset * + * {
  margin-top: 0;
}

.cxco-c-form__row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.cxco-c-form__row > * + * {
  margin-top: 0;
}

.cxco-c-form__row + .cxco-c-form__row {
  margin-top: calc(var(--cxco-ui-spacing, 16px)/ 2);
}

.cxco-o-chat .cxco-c-form__row {
  grid-column: 2 / span 5;
  grid-row: 6;
}

.cxco-o-chat .cxco-c-form__row::after {
  background-image: linear-gradient(to right, var(--cxco-primary-x-dark) 0%, var(--cxco-primary-x-light) 100%);
  background-size: 100% 1px;
  background-position: 0 0;
  background-size: 200% 1px;
  content: '';
  transition: background 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  color: var(--cxco-primary-inverted);
}

.cxco-o-chat .cxco-c-form__row::after:hover {
  background-position: 100% 0;
}

.cxco-c-form__label {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: normal;
  word-break: break-word;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  font-size: var(--cxco-font-size, 14px);
  font-size: var(--cxco-font-size, 0.875rem);
  font-family: var(--cxco-ui-font);
  line-height: var(--cxco-line-height, 1.5);
  flex: auto;
  display: flex;
  font-weight: bold;
  margin: calc(var(--cxco-ui-spacing, 16px)/ 4) 0;
}

.cxco-c-form[min-width~='660px'] .cxco-c-form__label {
  margin-right: var(--cxco-ui-spacing, 16px);
  flex: 0 0 14em;
}

.cxco-c-form__value {
  flex: 1 1 100%;
  margin-top: calc(var(--cxco-ui-spacing, 16px)/ 4);
  /* custom owl selector for elements in cxco-c-form value */
}

.cxco-c-form[min-width~='660px'] .cxco-c-form__value {
  flex: 1 0 14em;
}

.cxco-c-form__value > * + * {
  margin-top: calc(var(--cxco-ui-spacing, 16px)/ 4);
}

.cxco-c-form[min-width~='660px'] .cxco-c-form__value {
  /* negative margin for aligning first cxco-c-input to label */
}

.cxco-c-form[min-width~='660px'] .cxco-c-form__value .cxco-c-input:first-child {
  margin-top: -calc(var(--cxco-ui-spacing, 16px)/ 4);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =================================
 * The main header of the site
 ================================= */
.cxco-c-header {
  border-bottom: 2px solid var(--cxco-neutral-dark);
  display: grid;
  grid-template-columns: auto calc(var(--cxco-gutter) * 2) auto calc(var(--cxco-gutter) * 2) auto;
  align-items: center;
  padding: var(--cxco-ui-spacing, 16px) calc(var(--cxco-ui-spacing, 16px)* 2);
  background-image: radial-gradient(circle at top right, var(--cxco-neutral-x-light), var(--cxco-neutral-xx-light));
  background-size: cover;
  background-position: center;
  position: relative;
}

@media all and (min-width: 768px) {
  .cxco-c-header {
    grid-template-columns: calc(320px - var(--cxco-ui-spacing, 16px)) calc(var(--cxco-gutter) * 2) auto calc(var(--cxco-gutter) * 2) auto;
  }
  .cxco-c-header * + * {
    margin-top: 0;
  }
}

.cxco-c-header__logo {
  grid-column: 1 / span 5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cxco-c-header__logo * + * {
  margin-top: 0;
}

@media all and (min-width: 768px) {
  .cxco-c-header__logo {
    grid-column: 1;
    justify-content: flex-start;
  }
}

.cxco-c-header__logo > * + * {
  margin-left: calc(var(--cxco-ui-spacing, 16px)/ 2);
}

.cxco-c-header__search {
  grid-column: 1 / span 5;
}

@media all and (min-width: 768px) {
  .cxco-c-header__search {
    grid-column: 3;
  }
}

.cxco-c-header__actions {
  grid-column: 1 / span 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@media all and (min-width: 768px) {
  .cxco-c-header__actions {
    grid-column: 5;
  }
}

.cxco-c-header__actions > * + * {
  margin-left: var(--cxco-ui-spacing, 16px);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Images
 ===================================================================================== */
/**
 *	[1] Fluid images for responsive purposes. Needs to override inline width attributes.
 *	[2] Offset 'alt' text from surrounding copy.
 *	[3] Setting 'vertical-align' removes the whitespace that appears under 'img'
 *		elements when they are dropped into a page as-is. Safer alternative to
 *		using 'display: block;'.
 */
.cxco-c-image {
  border: 2px solid var(--cxco-neutral-dark);
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  max-width: 100% !important;
  /*[1]*/
  font-style: italic;
  /*[2]*/
  vertical-align: middle;
  /*[3]*/
  display: block;
}

.cxco-c-image.center {
  margin: auto;
}

.cxco-c-image.right {
  margin-left: auto;
}

.cxco-c-image.left {
  margin-right: auto;
}

.cxco-c-image--responsive {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cxco-c-image--progressive {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-filter: blur(20px);
          filter: blur(20px);
  transform: scale(1.2);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  opacity: 1;
}

.cxco-c-image--progressive[data-state='hidden'] {
  opacity: 0;
  transform: scale(1);
}

/**
 *	[1] Google Maps breaks if 'max-width: 100%' acts upon it; use their selector
 *		to remove the effects.
 *	[2] If a 'width' and/or 'height' attribute have been explicitly defined, let’s
 *		not make the image fluid.
 */
.gm-style img,
img[width],
img[height] {
  /*[2]*/
  max-width: none;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  input
 ===================================================================================== */
/* Basic styling for the form elements */
input.cxco-c-input,
textarea.cxco-c-input,
select.cxco-c-input {
  font-size: var(--cxco-font-size, 16px);
  font-size: var(--cxco-font-size, 1rem);
  font-family: var(--cxco-ui-font);
  line-height: var(--cxco-line-height, 1.5);
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  width: 100%;
  padding: calc(var(--cxco-ui-spacing, 16px)/ 2) var(--cxco-ui-spacing, 16px);
  /* padding 0 needed for iOS */
  background-color: var(--cxco-neutral);
  border: 2px solid var(--cxco-neutral-x-dark);
  color: var(--cxco-neutral-inverted);
  caret-color: var(--cxco-primary);
}

input.cxco-c-input::-webkit-input-placeholder,
textarea.cxco-c-input::-webkit-input-placeholder,
select.cxco-c-input::-webkit-input-placeholder {
  color: var(--cxco-neutral-inverted);
  opacity: 0.8;
}

input.cxco-c-input::-moz-placeholder,
textarea.cxco-c-input::-moz-placeholder,
select.cxco-c-input::-moz-placeholder {
  color: var(--cxco-neutral-inverted);
  opacity: 0.8;
}

input.cxco-c-input:-ms-input-placeholder,
textarea.cxco-c-input:-ms-input-placeholder,
select.cxco-c-input:-ms-input-placeholder {
  color: var(--cxco-neutral-inverted);
  opacity: 0.8;
}

input.cxco-c-input::-ms-input-placeholder,
textarea.cxco-c-input::-ms-input-placeholder,
select.cxco-c-input::-ms-input-placeholder {
  color: var(--cxco-neutral-inverted);
  opacity: 0.8;
}

input.cxco-c-input::placeholder,
textarea.cxco-c-input::placeholder,
select.cxco-c-input::placeholder {
  color: var(--cxco-neutral-inverted);
  opacity: 0.8;
}

.cxco input.cxco-c-input:focus:not(:disabled), input.cxco-c-input:active:not(:disabled), .cxco
textarea.cxco-c-input:focus:not(:disabled),
textarea.cxco-c-input:active:not(:disabled), .cxco
select.cxco-c-input:focus:not(:disabled),
select.cxco-c-input:active:not(:disabled) {
  box-shadow: inset calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), inset calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), inset calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  outline: 0;
  border-color: var(--cxco-primary);
}

input.cxco-c-input:disabled,
textarea.cxco-c-input:disabled,
select.cxco-c-input:disabled {
  outline: 0;
  color: var(--cxco-neutral-dark);
  background-color: var(--cxco-neutral-dark);
  opacity: 0.6;
}

selectinput.cxco-c-input, textarea.cxco-c-input, select.cxco-c-input {
  padding: calc(var(--cxco-ui-spacing, 16px)/ 2) var(--cxco-ui-spacing, 16px);
}

.cxco-c-input--clean {
  background-color: transparent;
  border: none;
  color: var(--cxco-neutral-inverted);
  caret-color: var(--cxco-primary);
  overflow: hidden;
}

.cxco .cxco-c-input--clean:focus:not(:disabled), .cxco-c-input--clean:active:not(:disabled) {
  box-shadow: none;
  outline: 0;
  border-color: var(--cxco-primary);
}

.cxco-c-input[data-state~='error'] {
  box-shadow: inset calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-red-light-h), var(--cxco-red-light-s), var(--cxco-red-light-l), calc(var(--cxco-shadow-alpha, 1) * 0.4)), inset calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-red-light-h), var(--cxco-red-light-s), var(--cxco-red-light-l), calc(var(--cxco-shadow-alpha, 1) * 0.25)), inset calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-red-light-h), var(--cxco-red-light-s), var(--cxco-red-light-l), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  border-color: var(--cxco-red);
  color: var(--cxco-red);
}

.cxco-c-input[data-state~='error']::-webkit-input-placeholder {
  color: var(--cxco-red);
}

.cxco-c-input[data-state~='error']::-moz-placeholder {
  color: var(--cxco-red);
}

.cxco-c-input[data-state~='error']:-ms-input-placeholder {
  color: var(--cxco-red);
}

.cxco-c-input[data-state~='error']::-ms-input-placeholder {
  color: var(--cxco-red);
}

.cxco-c-input[data-state~='error']::placeholder {
  color: var(--cxco-red);
}

.cxco .cxco-c-input[data-state~='error']:focus:not(:disabled), .cxco-c-input[data-state~='error']:active:not(:disabled) {
  box-shadow: inset calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-red-light-h), var(--cxco-red-light-s), var(--cxco-red-light-l), calc(var(--cxco-shadow-alpha, 1) * 0.4)), inset calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-red-light-h), var(--cxco-red-light-s), var(--cxco-red-light-l), calc(var(--cxco-shadow-alpha, 1) * 0.25)), inset calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-red-light-h), var(--cxco-red-light-s), var(--cxco-red-light-l), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  border-color: var(--cxco-red);
  color: var(--cxco-red);
}

.c-input--tiny {
  max-width: 4rem;
}

.c-input--small {
  max-width: 7rem;
}

.c-input--medium {
  max-width: 14rem;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Kebab
 ===================================================================================== */
.cxco-c-kebab {
  z-index: 100;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: calc(var(--cxco-ui-spacing, 16px)/ 4);
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  cursor: pointer;
}

.cxco-o-chat .cxco-c-kebab {
  grid-column: 2;
  grid-row: 2;
  width: calc(var(--cxco-ui-spacing, 16px)* 2);
  height: calc(var(--cxco-ui-spacing, 16px)* 2);
}

.cxco-c-kebab * + * {
  margin-top: var(--cxco-vertical-spacing, calc(var(--cxco-ui-spacing, 16px)/ 4));
}

.cxco-c-kebab:hover .cxco-c-kebab__ball {
  background-color: var(--cxco-primary);
}

.cxco-c-kebab:hover .cxco-c-kebab__ball:nth-child(1) {
  background-color: var(--cxco-primary-light);
}

.cxco-c-kebab:hover .cxco-c-kebab__ball:nth-child(3) {
  background-color: var(--cxco-primary-dark);
}

.cxco-c-kebab__ball {
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  display: flex;
  flex: none;
  width: calc(var(--cxco-ui-spacing, 16px)/ 2);
  height: calc(var(--cxco-ui-spacing, 16px)/ 2);
  background-color: var(--cxco-neutral-inverted);
}

[data-state='open'] .cxco-c-kebab__ball {
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(0.03, 0.18, 0.32, 0.66);
          animation-timing-function: cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

[data-state='open'] .cxco-c-kebab__ball:nth-child(1) {
  -webkit-animation-name: kebab11;
          animation-name: kebab11;
}

[data-state='open'] .cxco-c-kebab__ball:nth-child(2) {
  -webkit-animation-name: kebab22;
          animation-name: kebab22;
}

[data-state='open'] .cxco-c-kebab__ball:nth-child(3) {
  -webkit-animation-name: kebab33;
          animation-name: kebab33;
}

[data-state='closed'] .cxco-c-kebab__ball {
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(0.03, 0.18, 0.32, 0.66);
          animation-timing-function: cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

[data-state='closed'] .cxco-c-kebab__ball:nth-child(1) {
  -webkit-animation-name: kebab1;
          animation-name: kebab1;
}

[data-state='closed'] .cxco-c-kebab__ball:nth-child(2) {
  -webkit-animation-name: kebab2;
          animation-name: kebab2;
}

[data-state='closed'] .cxco-c-kebab__ball:nth-child(3) {
  -webkit-animation-name: kebab3;
          animation-name: kebab3;
}

.cxco-c-kebab--horizontal {
  flex-direction: row;
}

.cxco-c-kebab--horizontal * + * {
  margin-top: 0;
}

.cxco-c-kebab--horizontal > * + * {
  margin-left: calc(var(--cxco-ui-spacing, 16px)/ 4);
}

@-webkit-keyframes kebab2 {
  0% {
    width: calc(var(--cxco-ui-spacing, 16px)* 2);
    height: 3px;
  }
  100% {
    width: calc(var(--cxco-ui-spacing, 16px)/ 2);
  }
}

@keyframes kebab2 {
  0% {
    width: calc(var(--cxco-ui-spacing, 16px)* 2);
    height: 3px;
  }
  100% {
    width: calc(var(--cxco-ui-spacing, 16px)/ 2);
  }
}

@-webkit-keyframes kebab22 {
  0% {
    width: calc(var(--cxco-ui-spacing, 16px)/ 2);
  }
  100% {
    width: calc(var(--cxco-ui-spacing, 16px)* 2);
    height: 3px;
  }
}

@keyframes kebab22 {
  0% {
    width: calc(var(--cxco-ui-spacing, 16px)/ 2);
  }
  100% {
    width: calc(var(--cxco-ui-spacing, 16px)* 2);
    height: 3px;
  }
}

@-webkit-keyframes kebab1 {
  0% {
    transform: rotate(-45deg) translate3d(calc(0 - calc(var(--cxco-ui-spacing, 16px)/ 2) - 3px), calc(0px - calc(var(--cxco-ui-spacing, 16px)/ 2)), 0);
    width: var(--cxco-ui-spacing, 16px);
    height: 3px;
  }
  100% {
    transform: rotate(0deg);
    width: calc(var(--cxco-ui-spacing, 16px)/ 2);
  }
}

@keyframes kebab1 {
  0% {
    transform: rotate(-45deg) translate3d(calc(0 - calc(var(--cxco-ui-spacing, 16px)/ 2) - 3px), calc(0px - calc(var(--cxco-ui-spacing, 16px)/ 2)), 0);
    width: var(--cxco-ui-spacing, 16px);
    height: 3px;
  }
  100% {
    transform: rotate(0deg);
    width: calc(var(--cxco-ui-spacing, 16px)/ 2);
  }
}

@-webkit-keyframes kebab3 {
  0% {
    transform: rotate(45deg) translate3d(calc(0 - calc(var(--cxco-ui-spacing, 16px)/ 2) - 3px), calc(var(--cxco-ui-spacing, 16px)/ 2), 0);
    width: var(--cxco-ui-spacing, 16px);
    height: 3px;
  }
  100% {
    transform: rotate(0deg);
    width: calc(var(--cxco-ui-spacing, 16px)/ 2);
  }
}

@keyframes kebab3 {
  0% {
    transform: rotate(45deg) translate3d(calc(0 - calc(var(--cxco-ui-spacing, 16px)/ 2) - 3px), calc(var(--cxco-ui-spacing, 16px)/ 2), 0);
    width: var(--cxco-ui-spacing, 16px);
    height: 3px;
  }
  100% {
    transform: rotate(0deg);
    width: calc(var(--cxco-ui-spacing, 16px)/ 2);
  }
}

@-webkit-keyframes kebab11 {
  0% {
    transform: rotate(0deg);
    width: calc(var(--cxco-ui-spacing, 16px)/ 2);
  }
  100% {
    transform: rotate(-45deg) translate3d(calc(0 - calc(var(--cxco-ui-spacing, 16px)/ 2) - 3px), calc(0px - calc(var(--cxco-ui-spacing, 16px)/ 2)), 0);
    width: var(--cxco-ui-spacing, 16px);
    height: 3px;
  }
}

@keyframes kebab11 {
  0% {
    transform: rotate(0deg);
    width: calc(var(--cxco-ui-spacing, 16px)/ 2);
  }
  100% {
    transform: rotate(-45deg) translate3d(calc(0 - calc(var(--cxco-ui-spacing, 16px)/ 2) - 3px), calc(0px - calc(var(--cxco-ui-spacing, 16px)/ 2)), 0);
    width: var(--cxco-ui-spacing, 16px);
    height: 3px;
  }
}

@-webkit-keyframes kebab33 {
  0% {
    transform: rotate(0deg);
    width: calc(var(--cxco-ui-spacing, 16px)/ 2);
  }
  100% {
    transform: rotate(45deg) translate3d(calc(0 - calc(var(--cxco-ui-spacing, 16px)/ 2) - 3px), calc(var(--cxco-ui-spacing, 16px)/ 2), 0);
    width: var(--cxco-ui-spacing, 16px);
    height: 3px;
  }
}

@keyframes kebab33 {
  0% {
    transform: rotate(0deg);
    width: calc(var(--cxco-ui-spacing, 16px)/ 2);
  }
  100% {
    transform: rotate(45deg) translate3d(calc(0 - calc(var(--cxco-ui-spacing, 16px)/ 2) - 3px), calc(var(--cxco-ui-spacing, 16px)/ 2), 0);
    width: var(--cxco-ui-spacing, 16px);
    height: 3px;
  }
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
.cxco-c-lead {
  font-size: var(--cxco-font-size, 32px);
  font-size: var(--cxco-font-size, 2rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  font-style: italic;
  opacity: 0.8;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 * Lists
 ===================================================================================== */
.cxco-c-list {
  padding: 0;
  margin-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.cxco-c-list li {
  position: relative;
  margin-top: 0;
  margin-left: calc(var(--cxco-ui-spacing, 16px) + calc(var(--cxco-ui-spacing, 16px)/ 2));
}

.cxco-c-list li:not(:last-child) {
  margin-bottom: 3px;
}

.cxco-c-list li:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: calc(50% - calc(var(--cxco-ui-spacing, 16px)/ 2)/2);
  left: calc(0px - var(--cxco-ui-spacing, 16px) - calc(var(--cxco-ui-spacing, 16px)/ 2));
  width: calc(var(--cxco-ui-spacing, 16px)/ 2);
  height: calc(var(--cxco-ui-spacing, 16px)/ 2);
  border-radius: 50%;
  background-color: var(--cxco-primary);
}

.cxco-c-list li .is-active {
  color: var(--cxco-primary);
}

.cxco-c-list--clean > li {
  margin-left: 0;
}

.cxco-c-list--clean > li:before {
  display: none !important;
}

.cxco-c-list--arrow > li:before {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid var(--cxco-primary);
  top: 6px;
  border-radius: 0;
  background: none;
}

.cxco-c-list--horizontal > li {
  display: inline-block;
  margin-right: var(--cxco-ui-spacing, 16px);
  margin-top: 0 !important;
  margin-bottom: 3px !important;
}

.cxco-c-list--masonry {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  transform: translateY(-calc(var(--cxco-ui-spacing, 16px)/ 2));
  margin-right: -calc(var(--cxco-ui-spacing, 16px)/ 2);
  margin-bottom: -calc(var(--cxco-ui-spacing, 16px)/ 2);
  margin-left: -calc(var(--cxco-ui-spacing, 16px)/ 2);
}

.cxco-c-list--masonry > li {
  margin: calc(var(--cxco-ui-spacing, 16px)/ 2) !important;
}

.cxco-c-list--masonry > li:before {
  display: none !important;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Loader This is the loader for bubbles
 ===================================================================================== */
.cxco-c-loader {
  margin: 0;
  display: none;
  grid-column: 2 / span 3;
}

.cxco-c-loader * + * {
  margin-top: 0;
}

.cxco-c-loader.is-visible {
  display: inline-flex;
}

cxco-o-chat .cxco-c-loader {
  grid-column: 2;
}

.cxco-c-loader__bubble {
  width: calc(var(--cxco-ui-spacing, 16px)/ 2);
  height: calc(var(--cxco-ui-spacing, 16px)/ 2);
  background-color: var(--cxco-primary);
  border-radius: 50%;
  -webkit-animation: sk-bouncedelay 1s infinite cubic-bezier(0.03, 0.18, 0.32, 0.66) both;
          animation: sk-bouncedelay 1s infinite cubic-bezier(0.03, 0.18, 0.32, 0.66) both;
}

.cxco-c-loader__bubble:nth-child(2n) {
  -webkit-animation-delay: 0.33333s;
          animation-delay: 0.33333s;
}

.cxco-c-loader__bubble:nth-child(3n) {
  -webkit-animation-delay: 0.66667s;
          animation-delay: 0.66667s;
}

.cxco-c-loader__bubble + .cxco-c-loader__bubble {
  margin-left: calc(var(--cxco-ui-spacing, 16px)/ 4);
}

@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/** =====================================================================================
 *	Loader This is the component or page loader
 ===================================================================================== */
/**
 *	[1] This is really neccesary for making sure other values
 *		that are set on a pseudo-element of the element in question are overwritten.
 */
@-webkit-keyframes loading {
  0% {
    left: 0%;
    width: 0%;
  }
  1% {
    left: 1%;
    width: 1%;
  }
  22% {
    left: 3%;
    width: 28%;
  }
  46% {
    left: 37%;
    width: 28%;
  }
  70% {
    left: 69%;
    width: 28%;
  }
  99% {
    left: 99%;
    width: 1%;
  }
  100% {
    left: 100%;
    width: 0;
  }
}
@keyframes loading {
  0% {
    left: 0%;
    width: 0%;
  }
  1% {
    left: 1%;
    width: 1%;
  }
  22% {
    left: 3%;
    width: 28%;
  }
  46% {
    left: 37%;
    width: 28%;
  }
  70% {
    left: 69%;
    width: 28%;
  }
  99% {
    left: 99%;
    width: 1%;
  }
  100% {
    left: 100%;
    width: 0;
  }
}

[aria-busy='true']:not(cxco-c-conversation) {
  position: relative;
  overflow: hidden;
}

[aria-busy='true']:not(cxco-c-conversation)::before, [aria-busy='true']:not(cxco-c-conversation)::after {
  content: '';
  position: absolute;
}

[aria-busy='true']:not(cxco-c-conversation)::after {
  z-index: 53;
  height: 100% !important;
  /*[1]*/
  width: 100% !important;
  /*[1]*/
  top: 0;
  left: 0;
  background-color: var(--cxco-neutral);
}

[aria-busy='true']:not(cxco-c-conversation)::before {
  z-index: 54;
  display: block;
  height: 3px !important;
  /*[1]*/
  top: 0;
  transform: translateY(halve(-3px));
  background-image: linear-gradient(to right, var(--cxco-primary-dark) 0%, var(--cxco-primary-light) 100%);
  -webkit-animation: loading 1.7s linear infinite;
          animation: loading 1.7s linear infinite;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
.cxco-c-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}

.cxco-c-logo * + * {
  margin-top: 0;
}

.cxco-c-logo__header {
  flex: auto;
  margin-left: calc(var(--cxco-ui-spacing, 16px)/ 2);
}

.cxco-c-logo__title {
  font-size: var(--cxco-font-size, 16px);
  font-size: var(--cxco-font-size, 1rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  color: var(--cxco-neutral-inverted);
}

.cxco-c-logo__title > span {
  font-weight: bold;
}

.cxco-c-logo__subtitle {
  font-size: var(--cxco-font-size, 14px);
  font-size: var(--cxco-font-size, 0.875rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  color: var(--cxco-primary);
  margin-left: calc(var(--cxco-ui-spacing, 16px)/ 2);
}

.cxco-c-logo__icon {
  flex: none;
  border-radius: 50%;
  width: calc(var(--cxco-ui-spacing, 16px)* 2);
  height: calc(var(--cxco-ui-spacing, 16px)* 2);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
*  Menu
===================================================================================== */
.cxco-c-menu {
  --cxco-menu-offset: 0%;
  --cxco-menu-h: var(--cxco-neutral-h);
  --cxco-menu-s: var(--cxco-neutral-s);
  --cxco-menu-l: var(--cxco-neutral-l);
  --cxco-menu: var(--cxco-neutral);
  --cxco-menu-inverted: var(--cxco-neutral-inverted);
  border-right: 2px solid var(--cxco-neutral-dark);
  display: flex;
  flex-direction: column;
  background-color: var(--cxco-menu);
  height: 100%;
  transition: margin 0.4s cubic-bezier(0.55, 0, 0.1, 1), width 0.4s cubic-bezier(0.55, 0, 0.1, 1);
  pointer-events: auto;
  width: 0;
  margin-left: -100%;
}

.cxco-c-menu > * + * {
  margin-top: 0;
}

.cxco-c-menu[data-state='open'] {
  width: calc(100% - calc(var(--cxco-ui-spacing, 16px)* 3) - var(--cxco-gutter));
  margin-left: 0;
}

@media all and (min-width: 768px) {
  .cxco-c-menu[data-state='open'] {
    width: 320px;
    margin-left: 0;
  }
}

.cxco-c-menu__content {
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.cxco-c-menu__content::-webkit-scrollbar {
  width: calc(var(--cxco-ui-spacing, 16px)/ 2);
}

.cxco-c-menu__content::-webkit-scrollbar-track {
  background-color: transparent;
}

.cxco-c-menu__content::-webkit-scrollbar-thumb {
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  min-height: calc(var(--cxco-ui-spacing, 16px)* 2);
  background-color: var(--cxco-neutral-x-dark);
}

.cxco-c-menu__content:hover {
  overflow-y: auto;
}

[data-state='open'] .cxco-c-menu__content {
  overflow-y: auto;
  overflow-x: hidden;
}

.cxco-c-menu__header {
  flex: none;
  padding: calc(var(--cxco-ui-spacing, 16px)* 2) var(--cxco-ui-spacing, 16px) calc(var(--cxco-ui-spacing, 16px)/ 2) var(--cxco-ui-spacing, 16px);
}

.cxco-c-menu__body {
  flex: auto;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.55, 0, 0.1, 1);
}

[data-state='open'] .cxco-c-menu__body {
  opacity: 1;
}

.cxco-c-menu__body::after {
  content: '';
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  display: block;
  width: 100%;
  height: calc(var(--cxco-ui-spacing, 16px)* 4);
  background-image: linear-gradient(to top, var(--cxco-menu) 0%, rgba(0, 0, 0, 0) 100%);
  background-image: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, var(--cxco-menu) 100%);
  pointer-events: none;
}

.cxco-c-menu__list {
  padding: 0;
  margin-left: 0;
  margin-bottom: 0;
  list-style: none;
  border-bottom: 2px solid var(--cxco-neutral-dark);
  overflow: hidden;
  padding-bottom: var(--cxco-ui-spacing, 16px);
}

.cxco-c-menu__list * + * {
  margin-top: 0;
}

.cxco-c-menu__item * + * {
  margin-top: 0;
}

.cxco-c-menu__tab {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: var(--cxco-font-size, 16px);
  font-size: var(--cxco-font-size, 1rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(var(--cxco-ui-spacing, 16px)/ 2);
  padding-right: var(--cxco-ui-spacing, 16px);
  padding-bottom: calc(var(--cxco-ui-spacing, 16px)/ 2);
  color: var(--cxco-menu-inverted);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.4s cubic-bezier(0.55, 0, 0.1, 1), box-shadow 0.4s cubic-bezier(0.55, 0, 0.1, 1);
}

.cxco .cxco-c-menu__tab:focus {
  outline: none;
}

.cxco-c-menu__tab.is-active-page {
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  color: var(--cxco-primary);
  background-color: var(--cxco-primary-x-light);
}

.cxco-c-menu__tab--0 {
  font-weight: bold;
}

.cxco-c-menu__footer {
  flex: none;
  padding: calc(var(--cxco-ui-spacing, 16px)/ 2) var(--cxco-ui-spacing, 16px) calc(var(--cxco-ui-spacing, 16px)* 2) var(--cxco-ui-spacing, 16px);
}

/* Menu transitions */
.cxco-c-menu__transition-leave-active,
.cxco-c-menu__transition-enter-active {
  transition: all 0.4s cubic-bezier(0.55, 0, 0.1, 1);
  max-height: 1000px;
}

.cxco-c-menu__transition-enter,
.cxco-c-menu__transition-leave-to {
  max-height: 0;
  margin-bottom: 0;
}

.cxco-c-menu__item--0[data-state='open'] {
  background-color: hsl(var(--cxco-menu-h), var(--cxco-menu-s), calc(var(--cxco-menu-l) + calc(1 * var(--cxco-menu-offset))));
  color: var(--cxco-menu-inverted);
}

.cxco-c-menu__tab--0 {
  padding-left: calc(1 * var(--cxco-ui-spacing, 16px));
  font-size: calc(1 * 16px);
  padding-top: calc(1 * calc(var(--cxco-ui-spacing, 16px)/ 2));
  padding-bottom: calc(1 * calc(var(--cxco-ui-spacing, 16px)/ 2));
  color: var(--cxco-menu-inverted);
}

.cxco-c-menu__tab--0:hover {
  background-color: hsl(var(--cxco-menu-h), var(--cxco-menu-s), calc(var(--cxco-menu-l) + calc(1 * var(--cxco-menu-offset))));
}

.cxco-c-menu__item--1[data-state='open'] {
  background-color: hsl(var(--cxco-menu-h), var(--cxco-menu-s), calc(var(--cxco-menu-l) + calc(2 * var(--cxco-menu-offset))));
  color: var(--cxco-menu-inverted);
}

.cxco-c-menu__tab--1 {
  padding-left: calc(1.5 * var(--cxco-ui-spacing, 16px));
  font-size: calc(0.95 * 16px);
  padding-top: calc(0.9 * calc(var(--cxco-ui-spacing, 16px)/ 2));
  padding-bottom: calc(0.9 * calc(var(--cxco-ui-spacing, 16px)/ 2));
  color: var(--cxco-menu-inverted);
}

.cxco-c-menu__tab--1:hover {
  background-color: hsl(var(--cxco-menu-h), var(--cxco-menu-s), calc(var(--cxco-menu-l) + calc(2 * var(--cxco-menu-offset))));
}

.cxco-c-menu__item--2[data-state='open'] {
  background-color: hsl(var(--cxco-menu-h), var(--cxco-menu-s), calc(var(--cxco-menu-l) + calc(3 * var(--cxco-menu-offset))));
  color: var(--cxco-menu-inverted);
}

.cxco-c-menu__tab--2 {
  padding-left: calc(2 * var(--cxco-ui-spacing, 16px));
  font-size: calc(0.9 * 16px);
  padding-top: calc(0.8 * calc(var(--cxco-ui-spacing, 16px)/ 2));
  padding-bottom: calc(0.8 * calc(var(--cxco-ui-spacing, 16px)/ 2));
  color: var(--cxco-menu-inverted);
}

.cxco-c-menu__tab--2:hover {
  background-color: hsl(var(--cxco-menu-h), var(--cxco-menu-s), calc(var(--cxco-menu-l) + calc(3 * var(--cxco-menu-offset))));
}

.cxco-c-menu__item--3[data-state='open'] {
  background-color: hsl(var(--cxco-menu-h), var(--cxco-menu-s), calc(var(--cxco-menu-l) + calc(4 * var(--cxco-menu-offset))));
  color: var(--cxco-menu-inverted);
}

.cxco-c-menu__tab--3 {
  padding-left: calc(2.5 * var(--cxco-ui-spacing, 16px));
  font-size: calc(0.85 * 16px);
  padding-top: calc(0.7 * calc(var(--cxco-ui-spacing, 16px)/ 2));
  padding-bottom: calc(0.7 * calc(var(--cxco-ui-spacing, 16px)/ 2));
  color: var(--cxco-menu-inverted);
}

.cxco-c-menu__tab--3:hover {
  background-color: hsl(var(--cxco-menu-h), var(--cxco-menu-s), calc(var(--cxco-menu-l) + calc(4 * var(--cxco-menu-offset))));
}

.cxco-c-menu__item--4[data-state='open'] {
  background-color: hsl(var(--cxco-menu-h), var(--cxco-menu-s), calc(var(--cxco-menu-l) + calc(5 * var(--cxco-menu-offset))));
  color: var(--cxco-menu-inverted);
}

.cxco-c-menu__tab--4 {
  padding-left: calc(3 * var(--cxco-ui-spacing, 16px));
  font-size: calc(0.8 * 16px);
  padding-top: calc(0.6 * calc(var(--cxco-ui-spacing, 16px)/ 2));
  padding-bottom: calc(0.6 * calc(var(--cxco-ui-spacing, 16px)/ 2));
  color: var(--cxco-menu-inverted);
}

.cxco-c-menu__tab--4:hover {
  background-color: hsl(var(--cxco-menu-h), var(--cxco-menu-s), calc(var(--cxco-menu-l) + calc(5 * var(--cxco-menu-offset))));
}

.cxco-c-menu__item--5[data-state='open'] {
  background-color: hsl(var(--cxco-menu-h), var(--cxco-menu-s), calc(var(--cxco-menu-l) + calc(6 * var(--cxco-menu-offset))));
  color: var(--cxco-menu-inverted);
}

.cxco-c-menu__tab--5 {
  padding-left: calc(3.5 * var(--cxco-ui-spacing, 16px));
  font-size: calc(0.75 * 16px);
  padding-top: calc(0.5 * calc(var(--cxco-ui-spacing, 16px)/ 2));
  padding-bottom: calc(0.5 * calc(var(--cxco-ui-spacing, 16px)/ 2));
  color: var(--cxco-menu-inverted);
}

.cxco-c-menu__tab--5:hover {
  background-color: hsl(var(--cxco-menu-h), var(--cxco-menu-s), calc(var(--cxco-menu-l) + calc(6 * var(--cxco-menu-offset))));
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
*	Messages
===================================================================================== */
.cxco-c-notify {
  --cxco-shadow-elevation: 1;
  --cxco-c-notify--opacity: 0.7;
  --cxco-c-notify--bg-color-start: hsla(var(--cxco-neutral-light-h), var(--cxco-neutral-light-s), var(--cxco-neutral-light-l), var(--cxco-c-notify--opacity));
  --cxco-c-notify--bg-color-end: hsla(var(--cxco-neutral-h), var(--cxco-neutral-s), var(--cxco-neutral-l), var(--cxco-c-notify--opacity));
  --cxco-c-notify--color: var(--cxco-neutral-light-inverted);
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(-2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(9px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(11px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  --cxco-c-message--font-size: var(--cxco-font-size);
  font-size: var(--cxco-c-message--font-size, 14px);
  font-size: var(--cxco-c-message--font-size, 0.875rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  border: 2px solid var(--cxco-neutral-dark);
  background-image: linear-gradient(to right, var(--cxco-c-notify--bg-color-start) 0%, var(--cxco-c-notify--bg-color-end) 100%);
  background-size: 100% 1px;
  background-position: 0 0;
  background-size: 200% 1px;
  position: relative;
  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  padding: calc(var(--cxco-ui-spacing, 16px)/ 2) var(--cxco-ui-spacing, 16px);
  font-weight: bold;
  cursor: pointer;
  color: var(--cxco-c-notify--color);
  transition: background 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66), box-shadow 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
}

@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .cxco-c-notify {
    --cxco-c-notify--opacity: 1;
  }
}

.cxco-c-notify * + * {
  margin-top: 0;
}

.cxco-c-notify:hover {
  background-position: 100% 0;
}

.cxco-c-notify:hover {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(8px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
}

.cxco-c-notify:active {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(5px * var(--cxco-shadow-elevation, 1)) calc(8px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(10px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
}

.cxco-c-notify[class*='--'] {
  overflow: hidden;
}

.cxco-c-notify[class*='--']:hover::before {
  background-position: 0 100%;
}

.cxco-c-notify[class*='--']::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  transition: background 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

.cxco-c-notify[class*='--'] > * + * {
  margin-left: var(--cxco-ui-spacing, 16px);
}

.cxco-c-notify--success::before {
  background-image: linear-gradient(to top, var(--cxco-green-light) 0%, var(--cxco-green-dark) 100%);
  background-size: 1px 100%;
  background-position: 0 0;
}

.cxco-c-notify--success path {
  fill: var(--cxco-green);
}

.cxco-c-notify--alert::before {
  background-image: linear-gradient(to top, var(--cxco-orange-light) 0%, var(--cxco-orange-dark) 100%);
  background-size: 1px 100%;
  background-position: 0 0;
}

.cxco-c-notify--alert path {
  fill: var(--cxco-orange);
}

.cxco-c-notify--error::before {
  background-image: linear-gradient(to top, var(--cxco-red-light) 0%, var(--cxco-red-dark) 100%);
  background-size: 1px 100%;
  background-position: 0 0;
}

.cxco-c-notify--error path {
  fill: var(--cxco-red);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
*  Metadata
===================================================================================== */
.cxco-c-metadata {
  font-size: var(--cxco-font-size, 14px);
  font-size: var(--cxco-font-size, 0.875rem);
  font-family: var(--cxco-ui-font);
  line-height: var(--cxco-line-height, 1.5);
  display: flex;
  margin-left: var(--cxco-ui-spacing, 16px);
  margin-right: var(--cxco-ui-spacing, 16px);
  justify-content: flex-start;
}

.cxco-c-metadata > * + * {
  margin-top: 0;
}

.cxco-c-metadata--inverted {
  justify-content: flex-end;
}

.cxco-c-metadata__item {
  flex: none;
}

.cxco-c-metadata__item + .cxco-c-metadata__item {
  margin-left: calc(var(--cxco-ui-spacing, 16px)/ 2);
}

.cxco-c-metadata__item--fill {
  flex: 1 0 25px;
  /* Some made-up flex-base value so flexbox works properly for IE. */
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
*  Modal
* 1.    Ensures when in closed state nothing is clickable
===================================================================================== */
.cxco-c-modal, .basicLightbox {
  --cxco-c-modal--opacity: 0.7;
  --cxco-c-modal--bg-color-start: hsla(var(--cxco-neutral-dark-h), var(--cxco-neutral-dark-s), var(--cxco-neutral-dark-l), var(--cxco-c-modal--opacity));
  --cxco-c-modal--bg-color-end: hsla(var(--cxco-neutral-h), var(--cxco-neutral-s), var(--cxco-neutral-l), var(--cxco-c-modal--opacity));
  z-index: 101;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10vmax;
  transition: opacity 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66), transform 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .cxco-c-modal, .basicLightbox {
    --cxco-c-modal--opacity: 1;
  }
}

.cxco-c-modal::before, .basicLightbox::before {
  background-image: linear-gradient(to top, var(--cxco-c-modal--bg-color-start) 0%, var(--cxco-c-modal--bg-color-end) 100%);
  background-size: 1px 100%;
  background-position: 0 0;
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  transition: border-radius 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

.cxco-c-modal[data-state='open'], .basicLightbox[data-state='open'], .basicLightbox.basicLightbox--visible {
  opacity: 1;
  transform: scale(1);
}

.cxco-c-modal[data-state='open']::before, .basicLightbox[data-state='open']::before, .basicLightbox.basicLightbox--visible::before {
  border-radius: 0;
}

.cxco-c-modal[data-state='closed'], .basicLightbox {
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  /*[1]*/
}

.cxco-c-modal[data-state='closed']::before, .basicLightbox::before {
  border-radius: 50%;
}

.cxco .cxco-c-modal, .cxco .basicLightbox {
  margin-top: 0;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Navigation
 ===================================================================================== */
.cxco-c-navigation {
  display: flex;
}

.cxco-c-navigation * + * {
  margin-top: 0;
}

.cxco-c-navigation > * + * {
  margin-left: calc(var(--cxco-ui-spacing, 16px)/ 2);
}

.cxco-c-navigation__link {
  font-size: var(--cxco-font-size, 24px);
  font-size: var(--cxco-font-size, 1.5rem);
  display: flex;
  color: var(--cxco-neutral-xx-light-inverted);
}

.cxco-c-navigation__icon {
  flex: none;
  width: calc(var(--cxco-ui-spacing, 16px)* 2);
  height: calc(var(--cxco-ui-spacing, 16px)* 2);
}

.cxco-c-navigation__icon path {
  stroke: var(--cxco-neutral-xx-light-inverted);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *	Options: Checkbox and Radiobutton
 ===================================================================================== */
/**
 * Basic styling can be set here for the option elements
 * This includes radio and checkboxes
 */
.cxco-c-option {
  margin-left: -1.125em;
  list-style-type: none;
  /* Specific Radio styles */
  /* Specific Checkbox styles */
}

.cxco-c-option input[type='radio'],
.cxco-c-option input[type='checkbox'] {
  visibility: hidden;
  overflow: hidden;
  position: absolute;
  top: -100vh;
  left: -100vw;
  height: 0;
  width: 0;
}

.cxco-c-option input[type='radio'] + label,
.cxco-c-option input[type='checkbox'] + label {
  display: block;
  position: relative;
  margin-left: calc(var(--cxco-ui-spacing, 16px) + calc(var(--cxco-ui-spacing, 16px)/ 2));
  cursor: pointer;
}

.cxco-c-option input[type='radio'] + label::after, .cxco-c-option input[type='radio'] + label::before,
.cxco-c-option input[type='checkbox'] + label::after,
.cxco-c-option input[type='checkbox'] + label::before {
  position: absolute;
  top: 4px;
  left: calc(0px - var(--cxco-ui-spacing, 16px) - calc(var(--cxco-ui-spacing, 16px)/ 2));
}

.cxco-c-option input[type='radio'] + label::before,
.cxco-c-option input[type='checkbox'] + label::before {
  content: '';
  border: 1px solid var(--cxco-neutral-xx-light-inverted);
  width: var(--cxco-ui-spacing, 16px);
  height: var(--cxco-ui-spacing, 16px);
  background-color: var(--cxco-neutral-xx-light);
}

.cxco-c-option input[type='radio']:checked + label::after,
.cxco-c-option input[type='checkbox']:checked + label::after {
  content: '';
}

.cxco-c-option input[type='radio']:disabled + label,
.cxco-c-option input[type='checkbox']:disabled + label {
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0.5;
}

.cxco-c-option input[type='radio']:disabled + label::after, .cxco-c-option input[type='radio']:disabled + label::before,
.cxco-c-option input[type='checkbox']:disabled + label::after,
.cxco-c-option input[type='checkbox']:disabled + label::before {
  background-color: var(--cxco-neutral-x-light);
}

.cxco-c-option input[type='radio'] + label::before,
.cxco-c-option input[type='radio'] + label::after {
  border-radius: 50%;
}

.cxco-c-option input[type='radio'] + label::after {
  width: calc(var(--cxco-ui-spacing, 16px) - calc(var(--cxco-ui-spacing, 16px)/ 2));
  height: calc(var(--cxco-ui-spacing, 16px) - calc(var(--cxco-ui-spacing, 16px)/ 2));
  margin: calc(calc(var(--cxco-ui-spacing, 16px)/ 2) / 2);
  background-color: var(--cxco-neutral-xx-light-inverted);
}

.cxco-c-option input[type='checkbox'] + label::after {
  width: calc(var(--cxco-ui-spacing, 16px) - calc(var(--cxco-ui-spacing, 16px)/ 2));
  height: calc(var(--cxco-ui-spacing, 16px) - calc(var(--cxco-ui-spacing, 16px)/ 2));
  margin: calc(calc(var(--cxco-ui-spacing, 16px)/ 2) / 2);
  background-color: var(--cxco-neutral-xx-light-inverted);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
.cxco-c-result-grid {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  gap: var(--cxco-ui-spacing, 16px);
}

.cxco-c-result-grid * + * {
  margin-top: 0;
}

@media all and (min-width: 768px) {
  .cxco-c-result-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media all and (min-width: 1024px) {
  .cxco-c-result-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.cxco-c-result--primary {
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
}

@media all and (min-width: 768px) {
  .cxco-c-result--primary {
    grid-row: 1 / span 1;
    grid-column: 1 / span 2;
  }
}

@media all and (min-width: 1024px) {
  .cxco-c-result--primary {
    grid-row: 1 / span 1;
    grid-column: 1 / span 3;
  }
}

.cxco-c-result--primary .cxco-c-result__title {
  background-image: linear-gradient(to right, var(--cxco-primary-dark) 0%, var(--cxco-primary-light) 100%);
  border-image-source: linear-gradient(to right, var(--cxco-primary-dark) 0%, var(--cxco-primary-dark) 100%);
  color: var(--cxco-primary-dark-inverted);
}

.cxco-c-result {
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(-2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(9px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(11px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  background-color: var(--cxco-neutral-xx-light);
  overflow: hidden;
  align-self: flex-start;
}

.cxco-c-result * + * {
  margin-top: 0;
}

.cxco-c-result__title {
  font-size: var(--cxco-font-size, 24px);
  font-size: var(--cxco-font-size, 1.5rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  margin: 0;
  padding: calc(var(--cxco-ui-spacing, 16px)/ 2) var(--cxco-ui-spacing, 16px);
  background-image: linear-gradient(to right, var(--cxco-neutral-dark) 0%, var(--cxco-neutral) 100%);
  border-image-source: linear-gradient(to right, var(--cxco-neutral-dark) 0%, var(--cxco-neutral-dark) 100%);
  border-image-slice: 1;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  font-weight: bold;
  color: var(--cxco-neutral-x-dark-inverted);
}

.cxco-c-result__list {
  padding: 0;
  margin-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.cxco-c-result__item + .cxco-c-result__item {
  border-top: 1px solid hsl(var(--cxco-neutral-dark-h), var(--cxco-neutral-dark-s), var(--cxco-neutral-dark-l));
}

.cxco-c-result__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: calc(var(--cxco-ui-spacing, 16px)/ 2) var(--cxco-ui-spacing, 16px);
  color: var(--cxco-neutral-xx-light-inverted);
  background-color: var(--cxco-neutral-xx-light);
  border: 0;
  text-decoration: none;
  transition: background-color 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
  cursor: pointer;
}

.cxco-c-result__button[data-state~='selected'], .cxco-c-result__button:hover {
  background-color: var(--cxco-neutral-light);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Reverter component that goes back to a specific point in time
 ===================================================================================== */
.cxco-c-reverter {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
  color: var(--cxco-neutral-inverted);
}

.cxco-c-reverter[href]:hover, .cxco-c-reverter[href]:active {
  color: var(--cxco-neutral-inverted);
  font-weight: bold;
}

[data-state='focus']:not(.cxco-c-reverter[href]:focus) {
  font-weight: bold;
}

[data-state='focus'] .cxco-c-reverter {
  font-weight: bold;
  pointer-events: none;
}

.cxco [data-state='focus'] .cxco-c-reverter:focus {
  outline: none;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  search
 ===================================================================================== */
.cxco-c-search {
  font-size: var(--cxco-font-size, 16px);
  font-size: var(--cxco-font-size, 1rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1024px;
  z-index: 1;
}

.cxco-c-search * + * {
  margin-top: 0;
}

.cxco-c-search__group {
  position: relative;
  flex: 1 1 100%;
}

input.cxco-c-search__field,
textarea.cxco-c-search__field,
select.cxco-c-search__field {
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  border: 2px solid var(--cxco-neutral-dark);
  font-size: var(--cxco-font-size, 16px);
  font-size: var(--cxco-font-size, 1rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  width: 100%;
  padding: calc(var(--cxco-ui-spacing, 16px)/ 4) calc(var(--cxco-ui-spacing, 16px)/ 4) calc(var(--cxco-ui-spacing, 16px)/ 4) calc(var(--cxco-ui-spacing, 16px)* 2);
  margin: 0;
  /* Reset for Safari */
  background-color: var(--cxco-neutral);
  color: var(--cxco-neutral-inverted);
  caret-color: var(--cxco-primary);
  transition: box-shadow 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

input.cxco-c-search__field:hover, input.cxco-c-search__field:focus,
textarea.cxco-c-search__field:hover,
textarea.cxco-c-search__field:focus,
select.cxco-c-search__field:hover,
select.cxco-c-search__field:focus {
  border-color: var(--cxco-primary);
  outline: none;
}

input.cxco-c-search__field:hover + .cxco-c-search__list, input.cxco-c-search__field:focus + .cxco-c-search__list,
textarea.cxco-c-search__field:hover + .cxco-c-search__list,
textarea.cxco-c-search__field:focus + .cxco-c-search__list,
select.cxco-c-search__field:hover + .cxco-c-search__list,
select.cxco-c-search__field:focus + .cxco-c-search__list {
  border-color: var(--cxco-primary);
}

.cxco input.cxco-c-search__field.hover, .cxco
textarea.cxco-c-search__field.hover, .cxco
select.cxco-c-search__field.hover {
  border-color: var(--cxco-primary);
}

[data-state='open'] input.cxco-c-search__field, [data-state='open']
textarea.cxco-c-search__field, [data-state='open']
select.cxco-c-search__field {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.cxco-c-search__label {
  position: absolute;
  z-index: 1;
  display: block;
  flex: 0 0 calc(var(--cxco-ui-spacing, 16px)/ 2);
  left: calc(var(--cxco-ui-spacing, 16px)/ 2);
}

.cxco-c-search__icon {
  display: block;
  opacity: 0.7;
}

.cxco-c-search__icon .start {
  stop-color: var(--cxco-neutral-inverted);
  /*[1]*/
}

.cxco-c-search__icon .end {
  stop-color: var(--cxco-neutral-inverted);
  /*[1]*/
}

.cxco-c-search__list {
  z-index: -1;
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(-2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(9px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(11px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  border: 2px solid var(--cxco-neutral-dark);
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  padding: 0;
  margin-left: 0;
  margin-bottom: 0;
  list-style: none;
  display: none;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  background-color: hsla(var(--cxco-neutral-h), var(--cxco-neutral-s), var(--cxco-neutral-l), 0.8);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border-top: 0;
  max-height: 50vh;
  overflow-y: auto;
}

.cxco-c-search__list::-webkit-scrollbar {
  width: calc(var(--cxco-ui-spacing, 16px)/ 2);
}

.cxco-c-search__list::-webkit-scrollbar-track {
  background-color: transparent;
}

.cxco-c-search__list::-webkit-scrollbar-thumb {
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  min-height: calc(var(--cxco-ui-spacing, 16px)* 2);
  background-color: var(--cxco-neutral-x-dark);
}

@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .cxco-c-search__list {
    background-color: hsl(var(--cxco-neutral-h), var(--cxco-neutral-s), var(--cxco-neutral-l));
  }
}

[data-state='open'] .cxco-c-search__list {
  display: block;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.cxco-c-search__list-button {
  font-size: var(--cxco-font-size, 16px);
  font-size: var(--cxco-font-size, 1rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  border: 0;
  background: transparent;
  padding: calc(var(--cxco-ui-spacing, 16px)/ 4) 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: relative;
  margin: 0 var(--cxco-ui-spacing, 16px);
  color: var(--cxco-neutral-inverted);
}

.cxco-c-search__list-button::after {
  background-image: linear-gradient(to right, var(--cxco-primary-dark) 0%, var(--cxco-primary-light) 100%);
  background-size: 100% 1px;
  background-position: 0 0;
  background-size: 200% 1px;
  content: '';
  color: var(--cxco-primary-dark-inverted);
  background-position: center center;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0px;
  height: 3px;
  transition: width 0.5s ease, background-color 0.5s ease;
  margin: auto;
}

.cxco-c-search__list-button::after:hover {
  background-position: 100% 0;
}

.cxco-c-search__list-button:hover::after, .cxco-c-search__list-button:focus::after {
  width: 100%;
}

.cxco-c-search__list-button:active {
  background-color: hsla(var(--cxco-primary-h), var(--cxco-primary-s), var(--cxco-primary-l), 25%);
}

.cxco-c-search__answer {
  font-weight: bold;
}

.cxco-c-search__question {
  font-weight: normal;
  opacity: 0.8;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Fold
 ===================================================================================== */
.cxco-c-slide {
  display: flex;
  align-items: center;
}

.cxco-c-slide__title {
  font-size: var(--cxco-font-size, 16px);
  font-size: var(--cxco-font-size, 1rem);
  font-family: var(--cxco-ui-font);
  line-height: var(--cxco-line-height, 1.5);
}

.cxco-c-slide__button {
  flex: none;
  border-radius: 50%;
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(8px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--cxco-ui-spacing, 16px)* 2);
  height: calc(var(--cxco-ui-spacing, 16px)* 2);
  margin: calc(var(--cxco-ui-spacing, 16px)/ 4);
  border: 0;
  background-image: linear-gradient(to right, var(--cxco-primary-dark) 0%, var(--cxco-primary) 100%);
  background-size: 200% 1px;
  background-position: center center;
  cursor: pointer;
  transition: background 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66), box-shadow 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

.cxco-c-slide[min-width~='320px'] .cxco-c-slide__button,
.cxco-c-slide[min-width~='20rem'] .cxco-c-slide__button {
  margin: var(--cxco-ui-spacing, 16px);
}

.cxco-c-slide__button:hover,
.cxco .cxco-c-slide__button:focus {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(-2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(9px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(11px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  background-position: 0 center;
  outline: none;
}

.cxco-c-slide__button::before, .cxco-c-slide__button::after {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  content: '';
  position: absolute;
  display: block;
  width: 30%;
  height: 3px;
  background-color: var(--cxco-primary-inverted);
}

.cxco-c-slide__button::before {
  top: 37%;
}

.cxco-c-slide__button::after {
  bottom: 37%;
}

.cxco-c-slide__button:active {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(-2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(9px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(11px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
}

.cxco-c-slide__button:disabled, .cxco-c-slide__button[aria-disabled='true'] {
  visibility: hidden;
  opacity: 0.4;
  cursor: not-allowed;
}

.cxco-c-slide__button--prev::before {
  transform: rotate(-45deg);
}

.cxco-c-slide__button--prev::after {
  transform: rotate(45deg);
}

.cxco-c-slide__button--next::before {
  transform: rotate(45deg);
}

.cxco-c-slide__button--next::after {
  transform: rotate(-45deg);
}

.cxco-c-slide__content {
  padding: 0;
  margin-left: 0;
  margin-bottom: 0;
  list-style: none;
  flex: auto;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding-bottom: var(--cxco-ui-spacing, 16px);
  scroll-behavior: smooth;
  will-change: scroll-position;
}

.cxco-c-slide__item {
  padding: 0;
  margin-left: 0;
  margin-bottom: 0;
  list-style: none;
  padding: 0 calc(var(--cxco-ui-spacing, 16px)/ 2);
  flex-basis: 100%;
  flex-shrink: 0;
  flex-grow: 1;
  transition: flex-basis 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66);
  min-width: 0;
}

.cxco-c-slide__item[data-state='creating'] {
  -webkit-animation: fade-in 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66);
          animation: fade-in 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

.cxco-c-slide__item[data-state='removing'] {
  -webkit-animation: fade-out 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66);
          animation: fade-out 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

@-webkit-keyframes fade-out {
  from {
    flex-basis: 100%;
    opacity: 1;
    flex-grow: 1;
  }
  to {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
}

@keyframes fade-out {
  from {
    flex-basis: 100%;
    opacity: 1;
    flex-grow: 1;
  }
  to {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
}

@-webkit-keyframes fade-in {
  from {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
  to {
    flex-basis: 100%;
    opacity: 1;
    flex-grow: 1;
  }
}

@keyframes fade-in {
  from {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
  to {
    flex-basis: 100%;
    opacity: 1;
    flex-grow: 1;
  }
}

@-webkit-keyframes fade-out-1 {
  from {
    flex-basis: 100%;
    opacity: 1;
    flex-grow: 1;
  }
  to {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
}

@keyframes fade-out-1 {
  from {
    flex-basis: 100%;
    opacity: 1;
    flex-grow: 1;
  }
  to {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
}

@-webkit-keyframes fade-in-1 {
  from {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
  to {
    flex-basis: 100%;
    opacity: 1;
    flex-grow: 1;
  }
}

@keyframes fade-in-1 {
  from {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
  to {
    flex-basis: 100%;
    opacity: 1;
    flex-grow: 1;
  }
}

.cxco-c-slide__content[min-width~='320px'] .cxco-c-slide__item,
.cxco-c-slide__content[min-width~='20rem'] .cxco-c-slide__item {
  flex-basis: 100%;
  padding: 0 calc(calc(var(--cxco-ui-spacing, 16px)/ 2) * 1);
}

.cxco-c-slide__content[min-width~='320px'] .cxco-c-slide__item[data-state='removing'],
.cxco-c-slide__content[min-width~='20rem'] .cxco-c-slide__item[data-state='removing'] {
  -webkit-animation: fade-out-1 0.4s ease-in-out;
          animation: fade-out-1 0.4s ease-in-out;
}

.cxco-c-slide__content[min-width~='320px'] .cxco-c-slide__item[data-state='creating'],
.cxco-c-slide__content[min-width~='20rem'] .cxco-c-slide__item[data-state='creating'] {
  -webkit-animation: fade-in-1 0.4s ease-in-out;
          animation: fade-in-1 0.4s ease-in-out;
}

@-webkit-keyframes fade-out-2 {
  from {
    flex-basis: 50%;
    opacity: 1;
    flex-grow: 1;
  }
  to {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
}

@keyframes fade-out-2 {
  from {
    flex-basis: 50%;
    opacity: 1;
    flex-grow: 1;
  }
  to {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
}

@-webkit-keyframes fade-in-2 {
  from {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
  to {
    flex-basis: 50%;
    opacity: 1;
    flex-grow: 1;
  }
}

@keyframes fade-in-2 {
  from {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
  to {
    flex-basis: 50%;
    opacity: 1;
    flex-grow: 1;
  }
}

.cxco-c-slide__content[min-width~='640px'] .cxco-c-slide__item,
.cxco-c-slide__content[min-width~='40rem'] .cxco-c-slide__item {
  flex-basis: 50%;
  padding: 0 calc(calc(var(--cxco-ui-spacing, 16px)/ 2) * 2);
}

.cxco-c-slide__content[min-width~='640px'] .cxco-c-slide__item[data-state='removing'],
.cxco-c-slide__content[min-width~='40rem'] .cxco-c-slide__item[data-state='removing'] {
  -webkit-animation: fade-out-2 0.4s ease-in-out;
          animation: fade-out-2 0.4s ease-in-out;
}

.cxco-c-slide__content[min-width~='640px'] .cxco-c-slide__item[data-state='creating'],
.cxco-c-slide__content[min-width~='40rem'] .cxco-c-slide__item[data-state='creating'] {
  -webkit-animation: fade-in-2 0.4s ease-in-out;
          animation: fade-in-2 0.4s ease-in-out;
}

@-webkit-keyframes fade-out-3 {
  from {
    flex-basis: 33.33333%;
    opacity: 1;
    flex-grow: 1;
  }
  to {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
}

@keyframes fade-out-3 {
  from {
    flex-basis: 33.33333%;
    opacity: 1;
    flex-grow: 1;
  }
  to {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
}

@-webkit-keyframes fade-in-3 {
  from {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
  to {
    flex-basis: 33.33333%;
    opacity: 1;
    flex-grow: 1;
  }
}

@keyframes fade-in-3 {
  from {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
  to {
    flex-basis: 33.33333%;
    opacity: 1;
    flex-grow: 1;
  }
}

.cxco-c-slide__content[min-width~='960px'] .cxco-c-slide__item,
.cxco-c-slide__content[min-width~='60rem'] .cxco-c-slide__item {
  flex-basis: 33.33333%;
}

.cxco-c-slide__content[min-width~='960px'] .cxco-c-slide__item[data-state='removing'],
.cxco-c-slide__content[min-width~='60rem'] .cxco-c-slide__item[data-state='removing'] {
  -webkit-animation: fade-out-3 0.4s ease-in-out;
          animation: fade-out-3 0.4s ease-in-out;
}

.cxco-c-slide__content[min-width~='960px'] .cxco-c-slide__item[data-state='creating'],
.cxco-c-slide__content[min-width~='60rem'] .cxco-c-slide__item[data-state='creating'] {
  -webkit-animation: fade-in-3 0.4s ease-in-out;
          animation: fade-in-3 0.4s ease-in-out;
}

@-webkit-keyframes fade-out-4 {
  from {
    flex-basis: 25%;
    opacity: 1;
    flex-grow: 1;
  }
  to {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
}

@keyframes fade-out-4 {
  from {
    flex-basis: 25%;
    opacity: 1;
    flex-grow: 1;
  }
  to {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
}

@-webkit-keyframes fade-in-4 {
  from {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
  to {
    flex-basis: 25%;
    opacity: 1;
    flex-grow: 1;
  }
}

@keyframes fade-in-4 {
  from {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
  to {
    flex-basis: 25%;
    opacity: 1;
    flex-grow: 1;
  }
}

.cxco-c-slide__content[min-width~='1280px'] .cxco-c-slide__item,
.cxco-c-slide__content[min-width~='80rem'] .cxco-c-slide__item {
  flex-basis: 25%;
}

.cxco-c-slide__content[min-width~='1280px'] .cxco-c-slide__item[data-state='removing'],
.cxco-c-slide__content[min-width~='80rem'] .cxco-c-slide__item[data-state='removing'] {
  -webkit-animation: fade-out-4 0.4s ease-in-out;
          animation: fade-out-4 0.4s ease-in-out;
}

.cxco-c-slide__content[min-width~='1280px'] .cxco-c-slide__item[data-state='creating'],
.cxco-c-slide__content[min-width~='80rem'] .cxco-c-slide__item[data-state='creating'] {
  -webkit-animation: fade-in-4 0.4s ease-in-out;
          animation: fade-in-4 0.4s ease-in-out;
}

@-webkit-keyframes fade-out-5 {
  from {
    flex-basis: 20%;
    opacity: 1;
    flex-grow: 1;
  }
  to {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
}

@keyframes fade-out-5 {
  from {
    flex-basis: 20%;
    opacity: 1;
    flex-grow: 1;
  }
  to {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
}

@-webkit-keyframes fade-in-5 {
  from {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
  to {
    flex-basis: 20%;
    opacity: 1;
    flex-grow: 1;
  }
}

@keyframes fade-in-5 {
  from {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
  to {
    flex-basis: 20%;
    opacity: 1;
    flex-grow: 1;
  }
}

.cxco-c-slide__content[min-width~='1600px'] .cxco-c-slide__item,
.cxco-c-slide__content[min-width~='100rem'] .cxco-c-slide__item {
  flex-basis: 20%;
}

.cxco-c-slide__content[min-width~='1600px'] .cxco-c-slide__item[data-state='removing'],
.cxco-c-slide__content[min-width~='100rem'] .cxco-c-slide__item[data-state='removing'] {
  -webkit-animation: fade-out-5 0.4s ease-in-out;
          animation: fade-out-5 0.4s ease-in-out;
}

.cxco-c-slide__content[min-width~='1600px'] .cxco-c-slide__item[data-state='creating'],
.cxco-c-slide__content[min-width~='100rem'] .cxco-c-slide__item[data-state='creating'] {
  -webkit-animation: fade-in-5 0.4s ease-in-out;
          animation: fade-in-5 0.4s ease-in-out;
}

@-webkit-keyframes fade-out-6 {
  from {
    flex-basis: 16.66667%;
    opacity: 1;
    flex-grow: 1;
  }
  to {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
}

@keyframes fade-out-6 {
  from {
    flex-basis: 16.66667%;
    opacity: 1;
    flex-grow: 1;
  }
  to {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
}

@-webkit-keyframes fade-in-6 {
  from {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
  to {
    flex-basis: 16.66667%;
    opacity: 1;
    flex-grow: 1;
  }
}

@keyframes fade-in-6 {
  from {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
  to {
    flex-basis: 16.66667%;
    opacity: 1;
    flex-grow: 1;
  }
}

.cxco-c-slide__content[min-width~='1920px'] .cxco-c-slide__item,
.cxco-c-slide__content[min-width~='120rem'] .cxco-c-slide__item {
  flex-basis: 16.66667%;
}

.cxco-c-slide__content[min-width~='1920px'] .cxco-c-slide__item[data-state='removing'],
.cxco-c-slide__content[min-width~='120rem'] .cxco-c-slide__item[data-state='removing'] {
  -webkit-animation: fade-out-6 0.4s ease-in-out;
          animation: fade-out-6 0.4s ease-in-out;
}

.cxco-c-slide__content[min-width~='1920px'] .cxco-c-slide__item[data-state='creating'],
.cxco-c-slide__content[min-width~='120rem'] .cxco-c-slide__item[data-state='creating'] {
  -webkit-animation: fade-in-6 0.4s ease-in-out;
          animation: fade-in-6 0.4s ease-in-out;
}

@-webkit-keyframes fade-out-7 {
  from {
    flex-basis: 14.28571%;
    opacity: 1;
    flex-grow: 1;
  }
  to {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
}

@keyframes fade-out-7 {
  from {
    flex-basis: 14.28571%;
    opacity: 1;
    flex-grow: 1;
  }
  to {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
}

@-webkit-keyframes fade-in-7 {
  from {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
  to {
    flex-basis: 14.28571%;
    opacity: 1;
    flex-grow: 1;
  }
}

@keyframes fade-in-7 {
  from {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
  to {
    flex-basis: 14.28571%;
    opacity: 1;
    flex-grow: 1;
  }
}

.cxco-c-slide__content[min-width~='2240px'] .cxco-c-slide__item,
.cxco-c-slide__content[min-width~='140rem'] .cxco-c-slide__item {
  flex-basis: 14.28571%;
}

.cxco-c-slide__content[min-width~='2240px'] .cxco-c-slide__item[data-state='removing'],
.cxco-c-slide__content[min-width~='140rem'] .cxco-c-slide__item[data-state='removing'] {
  -webkit-animation: fade-out-7 0.4s ease-in-out;
          animation: fade-out-7 0.4s ease-in-out;
}

.cxco-c-slide__content[min-width~='2240px'] .cxco-c-slide__item[data-state='creating'],
.cxco-c-slide__content[min-width~='140rem'] .cxco-c-slide__item[data-state='creating'] {
  -webkit-animation: fade-in-7 0.4s ease-in-out;
          animation: fade-in-7 0.4s ease-in-out;
}

@-webkit-keyframes fade-out-8 {
  from {
    flex-basis: 12.5%;
    opacity: 1;
    flex-grow: 1;
  }
  to {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
}

@keyframes fade-out-8 {
  from {
    flex-basis: 12.5%;
    opacity: 1;
    flex-grow: 1;
  }
  to {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
}

@-webkit-keyframes fade-in-8 {
  from {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
  to {
    flex-basis: 12.5%;
    opacity: 1;
    flex-grow: 1;
  }
}

@keyframes fade-in-8 {
  from {
    flex-basis: 0;
    opacity: 0;
    flex-grow: 0;
  }
  to {
    flex-basis: 12.5%;
    opacity: 1;
    flex-grow: 1;
  }
}

.cxco-c-slide__content[min-width~='2560px'] .cxco-c-slide__item,
.cxco-c-slide__content[min-width~='160rem'] .cxco-c-slide__item {
  flex-basis: 12.5%;
}

.cxco-c-slide__content[min-width~='2560px'] .cxco-c-slide__item[data-state='removing'],
.cxco-c-slide__content[min-width~='160rem'] .cxco-c-slide__item[data-state='removing'] {
  -webkit-animation: fade-out-8 0.4s ease-in-out;
          animation: fade-out-8 0.4s ease-in-out;
}

.cxco-c-slide__content[min-width~='2560px'] .cxco-c-slide__item[data-state='creating'],
.cxco-c-slide__content[min-width~='160rem'] .cxco-c-slide__item[data-state='creating'] {
  -webkit-animation: fade-in-8 0.4s ease-in-out;
          animation: fade-in-8 0.4s ease-in-out;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Slide switch
 ===================================================================================== */
.cxco-c-switch input {
  display: none;
}

.cxco-c-switch input + label {
  height: 25px;
  position: relative;
  margin-top: calc(var(--cxco-ui-spacing, 16px)/ 4);
  padding-left: calc(42px + calc(var(--cxco-ui-spacing, 16px)/ 2));
  display: flex;
  align-items: center;
  cursor: pointer;
}

.cxco-c-switch input + label::after, .cxco-c-switch input + label::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  transition: all 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

.cxco-c-switch input + label:before {
  background-color: var(--cxco-neutral-dark);
  width: 42px;
  height: 25px;
  border-radius: 42px;
}

.cxco-c-switch input + label:after {
  border-radius: 50%;
  width: 17px;
  height: 17px;
  margin: 4px;
  background-color: var(--cxco-neutral-x-dark);
}

.cxco-c-switch input:checked ~ label::after {
  transform: translateX(17px);
  background-color: var(--cxco-primary-dark);
}

.cxco-c-switch input:checked ~ label::before {
  background-color: var(--cxco-primary-light);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Subarticle
 ===================================================================================== */
.cxco-c-subarticle > * + * {
  margin-top: 0;
}

@media all and (min-width: 768px) {
  .cxco-c-subarticle {
    max-width: 960px;
  }
}

.cxco-c-subarticle + .cxco-c-subarticle {
  padding-top: calc(var(--cxco-ui-spacing, 16px)/ 2);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Summary
 ===================================================================================== */
.cxco-c-summary {
  color: var(--cxco-neutral-xx-light-inverted);
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--cxco-ui-spacing, 16px)* 3);
}

.cxco-c-summary > * + * {
  margin-top: 0;
}

.cxco-c-summary__title {
  text-transform: capitalize;
  margin-left: calc(2rem + var(--cxco-ui-spacing, 16px));
}

.cxco-c-summary__list {
  padding: 0;
  margin-left: 0;
  margin-bottom: 0;
  list-style: none;
  counter-reset: counter;
}

.cxco-c-summary__list * + * {
  margin-top: var(--cxco-vertical-spacing, calc(var(--cxco-ui-spacing, 16px)/ 4));
}

.cxco-c-summary__item {
  font-size: var(--cxco-font-size, 16px);
  font-size: var(--cxco-font-size, 1rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  display: flex;
  align-items: flex-start;
  position: relative;
  counter-increment: counter;
}

.cxco-c-summary__item::before {
  font-size: var(--cxco-font-size, 16px);
  font-size: var(--cxco-font-size, 1rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  flex: none;
  display: flex;
  justify-content: flex-end;
  flex-basis: 2rem;
  margin-right: var(--cxco-ui-spacing, 16px);
  content: counter(counter);
  color: var(--cxco-primary);
}

.cxco-c-summary__link {
  color: var(--cxco-neutral-xx-light-inverted);
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

.cxco-c-summary__link:hover {
  color: var(--cxco-primary);
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Buttons
 *  Modifiers are based on visual 'loudness' metaphor,
 *  Most important Call to Action (primary) and less important (neutral)
 ===================================================================================== */
/**
 *	[1] Reset some properties so 'c-button' is the same when used as all elements
 * '<a>', '<button>', '<input>'
 */
.cxco-c-button, .cxco-c-button--outlined, .cxco-c-dialog__option, .cxco-c-tag {
  --cxco-c-button--bg-color-start: var(--cxco-primary-dark);
  --cxco-c-button--bg-color-end: var(--cxco-primary);
  --cxco-c-button--color: var(--cxco-primary);
  --cxco-c-button--color-active: var(--cxco-primary-inverted);
  --cxco-c-button--outline: 2px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  --cxco-c-button--font-size: var(--cxco-font-size);
  font-size: var(--cxco-c-button--font-size, 16px);
  font-size: var(--cxco-c-button--font-size, 1rem);
  font-family: var(--cxco-ui-font);
  line-height: var(--cxco-line-height, 1.5);
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
  color: var(--cxco-c-button--color);
  display: inline-block;
  height: auto;
  /* [1] */
  border: 0;
  /* [1] */
  padding: calc(var(--cxco-ui-spacing, 16px)/ 2) var(--cxco-ui-spacing, 16px);
  text-decoration: none;
  /* [1] */
  -webkit-appearance: none;
  font-weight: bold;
  cursor: pointer;
  /* [1] */
  box-shadow: none;
  background-color: transparent;
  background-image: linear-gradient(to right, var(--cxco-c-button--bg-color-start) 0%, var(--cxco-c-button--bg-color-start) 66.66%, transparent 66.66%, transparent 100%);
  background-size: calc(300% + calc(var(--cxco-c-button--outline) * 4)) 1px;
  background-position: calc(100% + var(--cxco-c-button--outline)) 0;
  transition: background 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66), box-shadow 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66), border 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66), color 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

.cxco-c-button:hover:not(:disabled):not([data-state~='selected']), .cxco-c-button--outlined:hover:not(:disabled):not([data-state~='selected']), .cxco-c-dialog__option:hover:not(:disabled):not([data-state~='selected']), .cxco-c-tag:hover:not(:disabled):not([data-state~='selected']), .cxco-c-button[data-state~='selected'], .cxco-c-button--outlined[data-state~='selected'], .cxco-c-dialog__option[data-state~='selected'], .cxco-c-tag[data-state~='selected'] {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(5px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  color: var(--cxco-c-button--color-active);
  background-position: calc(33.33% + 0px - var(--cxco-c-button--outline)) 0;
  box-shadow: 0 0 0 var(--cxco-primary);
  -webkit-animation: pulse 1.5s ease-out;
          animation: pulse 1.5s ease-out;
}

.cxco-c-button:active:not(:disabled):not([data-state~='selected']), .cxco-c-button--outlined:active:not(:disabled):not([data-state~='selected']), .cxco-c-dialog__option:active:not(:disabled):not([data-state~='selected']), .cxco-c-tag:active:not(:disabled):not([data-state~='selected']) {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(8px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  background-position: calc(0% + 0px - var(--cxco-c-button--outline)) 0;
}

.cxco .cxco-c-button:focus, .cxco .cxco-c-button--outlined:focus, .cxco .cxco-c-dialog__option:focus, .cxco .cxco-c-tag:focus {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(8px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  outline: none;
}

.cxco-c-button:disabled, .cxco-c-button--outlined:disabled, .cxco-c-dialog__option:disabled, .cxco-c-tag:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cxco-c-button--outlined, .cxco-c-dialog__option, .cxco-c-tag {
  border: var(--cxco-c-button--outline) solid var(--cxco-primary);
}

.cxco-c-button--outlined:hover:not(:disabled):not([data-state~='selected']), .cxco-c-dialog__option:hover:not(:disabled):not([data-state~='selected']), .cxco-c-tag:hover:not(:disabled):not([data-state~='selected']), .cxco-c-button--outlined:active:not(:disabled):not([data-state~='selected']), .cxco-c-dialog__option:active:not(:disabled):not([data-state~='selected']), .cxco-c-tag:active:not(:disabled):not([data-state~='selected']), .cxco-c-button--outlined[data-state~='selected'], .cxco-c-dialog__option[data-state~='selected'], .cxco-c-tag[data-state~='selected'] {
  border-color: transparent;
}

.cxco-c-button--contained {
  --cxco-c-button--color: var(--cxco-primary-dark-inverted);
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(0px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  background-image: linear-gradient(to right, var(--cxco-primary-dark) 0%, var(--cxco-primary) 100%);
  background-size: 300% 1px;
}

.cxco-c-button--contained:hover:not(:disabled):not([data-state~='selected']) {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(8px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
}

.cxco-c-button--contained:active:not(:disabled):not([data-state~='selected']) {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(-2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(9px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(11px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
}

/** =====================================================================================
 *  Tag
 ===================================================================================== */
.cxco-c-tag {
  font-size: var(--cxco-font-size, 14px);
  font-size: var(--cxco-font-size, 0.875rem);
  padding: 4px 12px;
  transition: background 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66), box-shadow 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

.cxco-c-tag[data-state='active'] {
  background-image: linear-gradient(to right, var(--cxco-primary-dark) 0%, var(--cxco-primary-light) 100%);
  background-size: 100% 1px;
  background-position: 0 0;
  background-size: 200% 1px;
  color: var(--cxco-primary-inverted);
}

.cxco-c-tag[data-state='active']:hover {
  background-position: 100% 0;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Titlebar
 ===================================================================================== */
.cxco-c-titlebar {
  margin: 0;
}

.cxco-c-titlebar * + * {
  margin-top: 0;
}

.cxco-o-chat .cxco-c-titlebar {
  grid-column: 3;
  grid-row: 2;
}

.cxco-o-chat .cxco-c-titlebar > * {
  margin: 0;
}

.cxco-c-titlebar__title {
  --cxco-c-titlebar__title--mobile--font-size: var(--cxco-font-size);
  font-size: var(--cxco-c-titlebar__title--mobile--font-size, 24px);
  font-size: var(--cxco-c-titlebar__title--mobile--font-size, 1.5rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  color: var(--cxco-primary);
  padding: 0;
}

@media all and (min-width: 768px) {
  .cxco-c-titlebar__title {
    --cxco-c-titlebar__title--font-size: var(--cxco-font-size);
    font-size: var(--cxco-c-titlebar__title--font-size, 40px);
    font-size: var(--cxco-c-titlebar__title--font-size, 2.5rem);
    font-family: var(--cxco-primary-font);
    line-height: var(--cxco-line-height, 1.5);
  }
}

.cxco-c-titlebar__subtitle {
  --cxco-c-titlebar__subtitle--mobile--font-size: var(--cxco-font-size);
  font-size: var(--cxco-c-titlebar__subtitle--mobile--font-size, 16px);
  font-size: var(--cxco-c-titlebar__subtitle--mobile--font-size, 1rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  padding: 0;
}

@media all and (min-width: 768px) {
  .cxco-c-titlebar__subtitle {
    --cxco-c-titlebar__title--font-size: var(--cxco-font-size);
    font-size: var(--cxco-c-titlebar__title--font-size, 24px);
    font-size: var(--cxco-c-titlebar__title--font-size, 1.5rem);
    font-family: var(--cxco-primary-font);
    line-height: var(--cxco-line-height, 1.5);
  }
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Tile
 ===================================================================================== */
.cxco-c-tile {
  color: var(--cxco-neutral-xx-light-inverted);
  display: block;
  text-decoration: none;
  font-weight: bold;
  padding: var(--cxco-ui-spacing, 16px);
  transition: border-color 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66);
  border: 1px solid transparent;
  width: 100%;
}

.cxco-c-tile > * + * {
  margin-top: var(--cxco-vertical-spacing, calc(var(--cxco-ui-spacing, 16px)/ 4));
}

.cxco-c-tile:hover {
  border: 1px solid var(--cxco-neutral);
}

.cxco-c-tile__title {
  --cxco-c-tile__title--font-size: var(--cxco-font-size);
  font-size: var(--cxco-c-tile__title--font-size, 24px);
  font-size: var(--cxco-c-tile__title--font-size, 1.5rem);
  font-family: var(--cxco-primary-font);
  line-height: var(--cxco-line-height, 1.5);
  margin: 0;
  margin-top: calc(var(--cxco-ui-spacing, 16px)/ 2);
  font-weight: bold;
}

.cxco-c-tile__body {
  --cxco-c-tile__body--font-size: var(--cxco-font-size);
  font-size: var(--cxco-c-tile__body--font-size, 14px);
  font-size: var(--cxco-c-tile__body--font-size, 0.875rem);
  font-family: var(--cxco-ui-font);
  line-height: var(--cxco-line-height, 1.5);
  margin: 0;
  font-weight: normal;
}

.cxco-c-tile__figure {
  margin: 0;
  width: 100%;
  padding-top: 61.8%;
  background-position: center;
  background-size: auto 100%;
  transition: background 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

.cxco-c-tile:hover .cxco-c-tile__figure {
  background-size: auto 110%;
}

.cxco-c-tile__figure--vertical {
  background-size: 100% auto;
}

.cxco-c-tile:hover .cxco-c-tile__figure--vertical {
  background-size: 110% auto;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Toggle
 ===================================================================================== */
.cxco-c-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--cxco-ui-spacing, 16px)* 2);
  height: calc(var(--cxco-ui-spacing, 16px)* 2);
  border: 0;
  margin-left: auto;
  background: transparent;
  transition: background 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66), box-shadow 0.2s cubic-bezier(0.03, 0.18, 0.32, 0.66);
  cursor: pointer;
}

.cxco-c-toggle::before, .cxco-c-toggle::after {
  content: '';
  position: absolute;
  display: block;
  width: 30%;
  height: 3px;
  background-color: var(--cxco-neutral-x-dark);
  transition-duration: 0.4s, 0.4s, 0.4s;
  transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1), cubic-bezier(0.55, 0, 0.1, 1), cubic-bezier(0.55, 0, 0.1, 1);
  border-radius: 3px;
}

.cxco-c-toggle::before {
  transform: rotate(-45deg);
  transition-property: transform, left, width;
  left: 44%;
}

.cxco-c-toggle::after {
  transform: rotate(45deg);
  transition-property: transform, right, width;
  right: 44%;
}

.cxco-c-toggle[data-state='open']::before {
  transform: rotate(45deg);
}

.cxco-c-toggle[data-state='open']::after {
  transform: rotate(-45deg);
}

.is-active-page .cxco-c-toggle::before {
  background: var(--cxco-primary);
}

.is-active-page .cxco-c-toggle::after {
  background: var(--cxco-primary);
}

.cxco-c-toggle:hover,
.cxco .cxco-c-toggle:focus {
  outline: none;
}

.cxco-c-toggle--menu {
  border-radius: 50%;
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(-1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(8px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
  background-image: linear-gradient(to right, var(--cxco-primary-x-dark) 0%, var(--cxco-primary-x-light) 100%);
  background-size: 100% 1px;
  background-position: 0 0;
  background-size: 200% 1px;
  position: fixed;
  right: var(--cxco-gutter);
  bottom: 5vh;
  transition: background 0.4s cubic-bezier(0.55, 0, 0.1, 1), box-shadow 0.4s cubic-bezier(0.55, 0, 0.1, 1);
}

.cxco-c-toggle--menu::before, .cxco-c-toggle--menu::after {
  content: '';
  position: absolute;
  display: block;
  width: 30%;
  height: 3px;
  background-color: var(--cxco-primary-x-dark-inverted);
  transition-duration: 0.4s, 0.4s, 0.4s;
  transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1), cubic-bezier(0.55, 0, 0.1, 1), cubic-bezier(0.55, 0, 0.1, 1);
  border-radius: 3px;
}

.cxco-c-toggle--menu::before {
  transform: rotate(45deg);
  transition-property: transform, top, width;
  top: 38%;
  right: unset;
  bottom: unset;
  left: unset;
}

.cxco-c-toggle--menu::after {
  transform: rotate(-45deg);
  transition-property: transform, top, width;
  top: unset;
  right: unset;
  bottom: 38%;
  left: unset;
}

.cxco-c-toggle--menu[data-state='open']::before {
  transform: rotate(-45deg);
}

.cxco-c-toggle--menu[data-state='open']::after {
  transform: rotate(45deg);
}

.cxco-c-toggle--menu:hover {
  background-position: 100% 0;
}

@media all and (min-width: 768px) {
  .cxco-c-toggle--menu {
    position: relative;
    right: unset;
    bottom: unset;
  }
}

.cxco-c-toggle--menu:hover,
.cxco .cxco-c-toggle--menu:focus {
  box-shadow: calc(0px * var(--cxco-shadow-elevation, 1)) calc(3px * var(--cxco-shadow-elevation, 1)) calc(4px * var(--cxco-shadow-elevation, 1)) calc(-2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.4)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(6px * var(--cxco-shadow-elevation, 1)) calc(9px * var(--cxco-shadow-elevation, 1)) calc(1px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.25)), calc(0px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) calc(11px * var(--cxco-shadow-elevation, 1)) calc(2px * var(--cxco-shadow-elevation, 1)) hsla(var(--cxco-shadow-hsl, 0deg, 0%, 28.62745%), calc(var(--cxco-shadow-alpha, 1) * 0.1));
}

/*  6 Utility
 *  High-specificity, very explicit selectors.
 *  Overrides and helper classes.
=========================================================== */
/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Generic animations and transitions 
 ===================================================================================== */
.cxco-u-transition--fade-leave-active,
.cxco-u-transition--fade-enter-active {
  transition: all cubic-bezier(0.03, 0.18, 0.32, 0.66) cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

.cxco-u-transition--fade-enter,
.cxco-u-transition--fade-leave-active {
  opacity: 0;
}

.cxco-u-animation {
  -webkit-animation-timing-function: cubic-bezier(0.03, 0.18, 0.32, 0.66);
          animation-timing-function: cubic-bezier(0.03, 0.18, 0.32, 0.66);
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
}

.cxco-u-animation--fade-in-left {
  -webkit-animation-name: fade-in-left;
          animation-name: fade-in-left;
}

@-webkit-keyframes fade-in-left {
  0% {
    transform: translateX(-100%) scale(0);
    opacity: 0;
  }
  100% {
    transform: translateX(0%) scale(1);
    opacity: 1;
  }
}

@keyframes fade-in-left {
  0% {
    transform: translateX(-100%) scale(0);
    opacity: 0;
  }
  100% {
    transform: translateX(0%) scale(1);
    opacity: 1;
  }
}

.cxco-u-animation--fade-in-right {
  -webkit-animation-name: fade-in-right;
          animation-name: fade-in-right;
}

@-webkit-keyframes fade-in-right {
  0% {
    transform: translateX(100%) scale(0);
    opacity: 0;
  }
  100% {
    transform: transxlateX(0%) scale(1);
    opacity: 1;
  }
}

@keyframes fade-in-right {
  0% {
    transform: translateX(100%) scale(0);
    opacity: 0;
  }
  100% {
    transform: transxlateX(0%) scale(1);
    opacity: 1;
  }
}

.cxco-u-animation--fade-in-top {
  -webkit-animation-name: fade-in-top;
          animation-name: fade-in-top;
}

@-webkit-keyframes fade-in-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes fade-in-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--cxco-primary);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--cxco-primary);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Color
 ===================================================================================== */
/**
 * Here we print out all our helper classes for our defined colors
 * Based on these articles:
 * - http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/
 * - https://blog.atechmedia.com/css-for-multiple-themes/
 * Output is in the form of:
   
   .cxco-u-color-primary {
      color: #ea862c;
   }

  .cxco-u-bg-neutral--dark {
    background-color: #9b9b9b; 
  }
 */
.cxco-u-color-cxco-primary-inverted {
  color: var(--cxco-primary-inverted);
}

.cxco-u-color-cxco-primary {
  color: var(--cxco-primary);
}

.cxco-u-bg-cxco-primary {
  background-color: var(--cxco-primary);
}

.cxco-u-bg-cxco-primary-inverted {
  background-color: var(--cxco-primary-inverted);
}

.cxco-u-color-cxco-primary-dark-inverted {
  color: var(--cxco-primary-dark-inverted);
}

.cxco-u-color-cxco-primary-dark {
  color: var(--cxco-primary-dark);
}

.cxco-u-bg-cxco-primary-dark {
  background-color: var(--cxco-primary-dark);
}

.cxco-u-bg-cxco-primary-dark-inverted {
  background-color: var(--cxco-primary-dark-inverted);
}

.cxco-u-color-cxco-primary-light-inverted {
  color: var(--cxco-primary-light-inverted);
}

.cxco-u-color-cxco-primary-light {
  color: var(--cxco-primary-light);
}

.cxco-u-bg-cxco-primary-light {
  background-color: var(--cxco-primary-light);
}

.cxco-u-bg-cxco-primary-light-inverted {
  background-color: var(--cxco-primary-light-inverted);
}

.cxco-u-color-cxco-neutral-inverted {
  color: var(--cxco-neutral-inverted);
}

.cxco-u-color-cxco-neutral {
  color: var(--cxco-neutral);
}

.cxco-u-bg-cxco-neutral {
  background-color: var(--cxco-neutral);
}

.cxco-u-bg-cxco-neutral-inverted {
  background-color: var(--cxco-neutral-inverted);
}

.cxco-u-color-cxco-neutral-dark-inverted {
  color: var(--cxco-neutral-dark-inverted);
}

.cxco-u-color-cxco-neutral-dark {
  color: var(--cxco-neutral-dark);
}

.cxco-u-bg-cxco-neutral-dark {
  background-color: var(--cxco-neutral-dark);
}

.cxco-u-bg-cxco-neutral-dark-inverted {
  background-color: var(--cxco-neutral-dark-inverted);
}

.cxco-u-color-cxco-neutral-light-inverted {
  color: var(--cxco-neutral-light-inverted);
}

.cxco-u-color-cxco-neutral-light {
  color: var(--cxco-neutral-light);
}

.cxco-u-bg-cxco-neutral-light {
  background-color: var(--cxco-neutral-light);
}

.cxco-u-bg-cxco-neutral-light-inverted {
  background-color: var(--cxco-neutral-light-inverted);
}

.cxco-u-color-cxco-neutral-x-dark-inverted {
  color: var(--cxco-neutral-x-dark-inverted);
}

.cxco-u-color-cxco-neutral-x-dark {
  color: var(--cxco-neutral-x-dark);
}

.cxco-u-bg-cxco-neutral-x-dark {
  background-color: var(--cxco-neutral-x-dark);
}

.cxco-u-bg-cxco-neutral-x-dark-inverted {
  background-color: var(--cxco-neutral-x-dark-inverted);
}

.cxco-u-color-cxco-neutral-x-light-inverted {
  color: var(--cxco-neutral-x-light-inverted);
}

.cxco-u-color-cxco-neutral-x-light {
  color: var(--cxco-neutral-x-light);
}

.cxco-u-bg-cxco-neutral-x-light {
  background-color: var(--cxco-neutral-x-light);
}

.cxco-u-bg-cxco-neutral-x-light-inverted {
  background-color: var(--cxco-neutral-x-light-inverted);
}

.cxco-u-color-cxco-green-inverted {
  color: var(--cxco-green-inverted);
}

.cxco-u-color-cxco-green {
  color: var(--cxco-green);
}

.cxco-u-bg-cxco-green {
  background-color: var(--cxco-green);
}

.cxco-u-bg-cxco-green-inverted {
  background-color: var(--cxco-green-inverted);
}

.cxco-u-color-cxco-orange-inverted {
  color: var(--cxco-orange-inverted);
}

.cxco-u-color-cxco-orange {
  color: var(--cxco-orange);
}

.cxco-u-bg-cxco-orange {
  background-color: var(--cxco-orange);
}

.cxco-u-bg-cxco-orange-inverted {
  background-color: var(--cxco-orange-inverted);
}

.cxco-u-color-cxco-red-inverted {
  color: var(--cxco-red-inverted);
}

.cxco-u-color-cxco-red {
  color: var(--cxco-red);
}

.cxco-u-bg-cxco-red {
  background-color: var(--cxco-red);
}

.cxco-u-bg-cxco-red-inverted {
  background-color: var(--cxco-red-inverted);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *	These classes get an '!important' after the value
 *	So be aware when combining with other classes
 *	It can potentially break the layout
 ===================================================================================== */
/**
*	Set on a full width element to constrain it to a max-width
*	And give some padding on the side on medium screens and larger.
*/
.cxco-u-constrain {
  padding-left: var(--cxco-gutter) !important;
  padding-right: var(--cxco-gutter) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: calc(1440px + 2 * var(--cxco-gutter)) !important;
  width: 100%;
}

/**
*	When a element needs to break out of a constrained wrapper
*/
.cxco-u-breakout {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}

@media all and (max-width: 767px) {
  .cxco-u-breakout\@s {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
  }
}

/**
*	Break out and (re)set the default gutter/padding
*/
.cxco-u-breakout-pad {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
}

@media all and (max-width: 767px) {
  .cxco-u-breakout-pad\@s {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: calc(50vw - 50%) !important;
    padding-right: calc(50vw - 50%) !important;
  }
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Elevation
 ===================================================================================== */
/**
 * All our available elevation-shadow values
 *
 * Output is in the form of:

   .cxco-u-elevation-2 {
          box-shadow:   0px 3px 1px -2px rgba(85, 85, 85, 0.2),
                        0px 2px 2px 0px rgba(85, 85, 85, 0.14),
                        0px 1px 5px 0px rgba(85, 85, 85, 0.12);
   }

 */
/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Fontsize
 ===================================================================================== */
/**
 *  Use these to tweak layout on a micro level.
 *
 *  Here we print out all our helper classes for our font sizes
 *  Loop through the $font-sizes Map and convert to Rem

    USAGE:

   .cxco-u-fs-x-large {
      font-size: 1.75rem;
      line-height: 1.5;
   }

 */
/**
 * Here we print out all our helper classes for our font sizes
 * Loop through the $font-sizes Map and convert to Rem
 * as does the @mixin `font-size`.
 *
 * Output is in the form of:

   .cxco-u-fs-x-large {
      font-size: 1.75rem;
      line-height: 1.5;
   }

 */
.cxco-u-fs-x2-small {
  font-size: 0.75rem;
  line-height: var(--cxco-line-height, 1.5);
}

.cxco-u-fs-x-small {
  font-size: 0.875rem;
  line-height: var(--cxco-line-height, 1.5);
}

.cxco-u-fs-small {
  font-size: 0.875rem;
  line-height: var(--cxco-line-height, 1.5);
}

.cxco-u-fs-base {
  font-size: 1rem;
  line-height: var(--cxco-line-height, 1.5);
}

.cxco-u-fs-medium {
  font-size: 1.5rem;
  line-height: var(--cxco-line-height, 1.5);
}

.cxco-u-fs-large {
  font-size: 2rem;
  line-height: var(--cxco-line-height, 1.5);
}

.cxco-u-fs-x-large {
  font-size: 2.5rem;
  line-height: var(--cxco-line-height, 1.5);
}

.cxco-u-fs-x2-large {
  font-size: 5rem;
  line-height: var(--cxco-line-height, 1.5);
}

.cxco-u-fs-x3-large {
  font-size: 7.5rem;
  line-height: var(--cxco-line-height, 1.5);
}

/**
* Here we generate the responsive versions with our set suffix
* Output is in the form of:
*
.cxco-u-fs@m-x-large {
    font-size: 2rem;
    line-height: 1.8;
}

*/
/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Spacing
 ===================================================================================== */
/**
 * All our available font families
 * Loop through the $font-families Map
 * 
 * Output is in the form of:
   
   .cxco-u-font-default {
      font-family: Arial;
   }

 */
.cxco-u-font-default {
  font-family: var(--cxco-ui-font);
}

.cxco-u-font-primary {
  font-family: var(--cxco-primary-font);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Spacing
 ===================================================================================== */
/**
 * Utilities are complete single responsibility rules which have a very
 * specific and targeted task. It is also quite common for these rules’ declarations
 * to carry !important so as to guarantee they beat other less specific ones.
 * They do one thing in a very heavy-handed and inelegant way.
 * They are to be used as a last resort when no other CSS hooks are available,
 * or to tackle completely unique circumstances,
 * e.g. using .cxco-u-text-center to centrally align one piece of text once and once only.
 * They are only one step away from inline styles, so should be used sparingly.
 *
 * Because of their heavy-handed approach, their global reusability,
 * and their exceptional use-case, it is incredibly important
 * that we signal Utilities to other developers.
 * We do not want anyone trying to bind onto these in future selectors.
 *
 * Only use a helper class if an element/component doesn’t already have a class
 * to which you could apply this styling,
 * e.g. if you need to float `.cxco-c-nav__list` left
 * then add `float:left;` to that ruleset
 * as opposed to adding the `.cxco-u-float-left` class to the markup.
 */
/* A simple reset for our lobotomized owl-selector */
.cxco-u-reset-owl * + * {
  margin-top: 0;
}

/* Group component for clearing floats */
.cxco-u-group:after {
  content: '';
  display: block;
  clear: both;
}

/* Add/remove floats */
.cxco-u-float-right {
  float: right !important;
}

.cxco-u-float-left {
  float: left !important;
}

.cxco-u-float-none {
  float: none !important;
}

/**
 * Center an element via margin
 * Make sure it's not an inline element
 */
.cxco-u-center {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Center horizontally and vertically with the use of Flexbox */
.cxco-u-flex {
  display: flex !important;
}

/* Flexbox directions*/
.cxco-u-flex--column {
  flex-direction: column !important;
}

@media all and (min-width: 768px) {
  .cxco-u-flex--row\@m {
    flex-direction: row !important;
  }
}

/* Flexbox alignment helpers*/
.cxco-u-flex--center {
  justify-content: center !important;
  align-items: center !important;
}

.cxco-u-flex-justify-start {
  justify-content: flex-start !important;
}

.cxco-u-flex-justify-center {
  justify-content: center !important;
}

.cxco-u-flex-justify-end {
  justify-content: flex-end !important;
}

.cxco-u-flex-align-start {
  align-items: flex-start !important;
}

.cxco-u-flex-align-center {
  align-items: center !important;
}

.cxco-u-flex-align-end {
  align-items: flex-end !important;
}

/**
 * noscroll
 */
.cxco-u-noscroll {
  overflow: hidden !important;
}

/**
 * Text alignment
 */
.cxco-u-text-left {
  text-align: left !important;
}

.cxco-u-text-center {
  text-align: center !important;
}

.cxco-u-text-right {
  text-align: right !important;
}

/**
 * Font weights
 */
.cxco-u-weight-light {
  font-weight: 300 !important;
}

.cxco-u-weight-normal {
  font-weight: 400 !important;
}

.cxco-u-weight-bold {
  font-weight: 700 !important;
}

/**
 * Caps
 */
.cxco-u-uppercase {
  text-transform: uppercase !important;
}

/**
 * Make an element 100% wide
 */
.cxco-u-full-width {
  width: 100% !important;
}

/**
 * Control wrapping
 */
.cxco-u-wrap {
  overflow-wrap: break-word !important;
}

.cxco-u-nowrap {
  white-space: nowrap !important;
}

/**
 * =================================
 * Below some design utility classes
 * =================================
 */
/**
 * Give some rounded corners
 */
.cxco-u-rounded {
  border-radius: var(--cxco-border-radius, calc(1rem + calc(var(--cxco-ui-spacing, 16px)/ 2)));
}

/**
 * Make a circle with border-radius
 */
.cxco-u-circle {
  border-radius: 50%;
}

/**
 * Add a default border
 */
.cxco-u-border {
  border: 2px solid var(--cxco-neutral-dark);
}

.cxco-u-border-t {
  border-top: 2px solid var(--cxco-neutral-dark);
}

.cxco-u-border-r {
  border-right: 2px solid var(--cxco-neutral-dark);
}

.cxco-u-border-b {
  border-bottom: 2px solid var(--cxco-neutral-dark);
}

.cxco-u-border-l {
  border-left: 2px solid var(--cxco-neutral-dark);
}

.cxco-u-border-color-dark {
  border-color: var(--cxco-neutral);
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 *  Spacing
 ===================================================================================== */
/**
 * For faster mobile-friendly development,
 * use these utility classes for showing and hiding
 * content by device via media query.
 *
 * Based on this table: https://v4-alpha.getbootstrap.com/layout/responsive-utilities/
 */
.cxco-u-hidden {
  display: none !important;
}

@media all and (max-width: 767px) {
  .cxco-u-hidden\@s-down {
    display: none !important;
  }
}

@media all and (min-width: 768px) {
  .cxco-u-hidden\@m-up {
    display: none !important;
  }
}

@media all and (max-width: 1023px) {
  .cxco-u-hidden\@m-down {
    display: none !important;
  }
}

@media all and (min-width: 1024px) {
  .cxco-u-hidden\@l-up {
    display: none !important;
  }
}

@media all and (max-width: 1439px) {
  .cxco-u-hidden\@l-down {
    display: none !important;
  }
}

@media all and (min-width: 1440px) {
  .cxco-u-hidden\@xl-up {
    display: none !important;
  }
}

.cxco-u-visually-hidden {
  visibility: hidden !important;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 * Print styles
 ===================================================================================== */
/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/* 
* If you need to make a quick fix, you can do it here. 
* Later when you have proper time, you can move the fix into the proper structure/organization
*/
[id^='__'] > * + * {
  margin-top: 0 !important;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 * Spacing
 ===================================================================================== */
/**
 *	Margin and padding helper classes. 
 *	Use these to tweak layout on a micro level.
 *
 *	'.(m|p) (t|r|b|l|h|v) (-|+|0) {}' = margin/padding   top/right/bottom/left/horizontal/vertical   less/more/none
 */
/**
 *	Predefine the variables below in order to alter and enable specific features.
 */
/** 
 *	Enable/disable specific helper classes 
 */
/**
 *	Margin helper classes.
 */
.cxco-u-spacing-m {
  margin: var(--cxco-ui-spacing, 16px) !important;
}

.cxco-u-spacing-mt {
  margin-top: var(--cxco-ui-spacing, 16px) !important;
}

.cxco-u-spacing-mr {
  margin-right: var(--cxco-ui-spacing, 16px) !important;
}

.cxco-u-spacing-mb {
  margin-bottom: var(--cxco-ui-spacing, 16px) !important;
}

.cxco-u-spacing-ml {
  margin-left: var(--cxco-ui-spacing, 16px) !important;
}

.cxco-u-spacing-mh {
  margin-right: var(--cxco-ui-spacing, 16px) !important;
  margin-left: var(--cxco-ui-spacing, 16px) !important;
}

.cxco-u-spacing-mv {
  margin-top: var(--cxco-ui-spacing, 16px) !important;
  margin-bottom: var(--cxco-ui-spacing, 16px) !important;
}

/**
 *	Add tiny margins.
 */
.cxco-u-spacing-m-- {
  margin: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mt-- {
  margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mr-- {
  margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mb-- {
  margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-ml-- {
  margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mh-- {
  margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mv-- {
  margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

/**
 *	Add small margins.
 */
.cxco-u-spacing-m- {
  margin: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mt- {
  margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mr- {
  margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mb- {
  margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-ml- {
  margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mh- {
  margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mv- {
  margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

/**
 *	Add large margins.
 */
.cxco-u-spacing-m\+ {
  margin: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mt\+ {
  margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mr\+ {
  margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mb\+ {
  margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-ml\+ {
  margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mh\+ {
  margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mv\+ {
  margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

/**
 *	Add huge margins.
 */
.cxco-u-spacing-m\+\+ {
  margin: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mt\+\+ {
  margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mr\+\+ {
  margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mb\+\+ {
  margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-ml\+\+ {
  margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mh\+\+ {
  margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-mv\+\+ {
  margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

/**
 *	Remove margins.
 */
.cxco-u-spacing-m0 {
  margin: 0 !important;
}

.cxco-u-spacing-mt0 {
  margin-top: 0 !important;
}

.cxco-u-spacing-mr0 {
  margin-right: 0 !important;
}

.cxco-u-spacing-mb0 {
  margin-bottom: 0 !important;
}

.cxco-u-spacing-ml0 {
  margin-left: 0 !important;
}

.cxco-u-spacing-mh0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.cxco-u-spacing-mv0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/**
 *	Negative margins.
 */
.cxco-u-spacing--m {
  margin: -var(--cxco-ui-spacing, 16px) !important;
}

.cxco-u-spacing--mt {
  margin-top: -var(--cxco-ui-spacing, 16px) !important;
}

.cxco-u-spacing--mr {
  margin-right: -var(--cxco-ui-spacing, 16px) !important;
}

.cxco-u-spacing--mb {
  margin-bottom: -var(--cxco-ui-spacing, 16px) !important;
}

.cxco-u-spacing--ml {
  margin-left: -var(--cxco-ui-spacing, 16px) !important;
}

.cxco-u-spacing--mh {
  margin-right: -var(--cxco-ui-spacing, 16px) !important;
  margin-left: -var(--cxco-ui-spacing, 16px) !important;
}

.cxco-u-spacing--mv {
  margin-top: -var(--cxco-ui-spacing, 16px) !important;
  margin-bottom: -var(--cxco-ui-spacing, 16px) !important;
}

/**
 *	Tiny negative margins.
 */
.cxco-u-spacing--m-- {
  margin: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mt-- {
  margin-top: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mr-- {
  margin-right: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mb-- {
  margin-bottom: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--ml-- {
  margin-left: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mh-- {
  margin-right: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  margin-left: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mv-- {
  margin-top: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  margin-bottom: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

/**
 *	Small negative margins.
 */
.cxco-u-spacing--m- {
  margin: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mt- {
  margin-top: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mr- {
  margin-right: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mb- {
  margin-bottom: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--ml- {
  margin-left: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mh- {
  margin-right: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  margin-left: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mv- {
  margin-top: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  margin-bottom: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

/**
 *	Large negative margins.
 */
.cxco-u-spacing--m\+ {
  margin: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mt\+ {
  margin-top: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mr\+ {
  margin-right: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mb\+ {
  margin-bottom: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--ml\+ {
  margin-left: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mh\+ {
  margin-right: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  margin-left: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mv\+ {
  margin-top: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  margin-bottom: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

/**
 *	Huge negative margins.
 */
.cxco-u-spacing--m\+\+ {
  margin: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mt\+\+ {
  margin-top: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mr\+\+ {
  margin-right: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mb\+\+ {
  margin-bottom: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--ml\+\+ {
  margin-left: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mh\+\+ {
  margin-right: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  margin-left: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing--mv\+\+ {
  margin-top: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  margin-bottom: -calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

/**
 *	Padding helper classes.
 */
.cxco-u-spacing-p {
  padding: var(--cxco-ui-spacing, 16px) !important;
}

.cxco-u-spacing-pt {
  padding-top: var(--cxco-ui-spacing, 16px) !important;
}

.cxco-u-spacing-pr {
  padding-right: var(--cxco-ui-spacing, 16px) !important;
}

.cxco-u-spacing-pb {
  padding-bottom: var(--cxco-ui-spacing, 16px) !important;
}

.cxco-u-spacing-pl {
  padding-left: var(--cxco-ui-spacing, 16px) !important;
}

.cxco-u-spacing-ph {
  padding-right: var(--cxco-ui-spacing, 16px) !important;
  padding-left: var(--cxco-ui-spacing, 16px) !important;
}

.cxco-u-spacing-pv {
  padding-top: var(--cxco-ui-spacing, 16px) !important;
  padding-bottom: var(--cxco-ui-spacing, 16px) !important;
}

/**
 *	Add tiny paddings.
 */
.cxco-u-spacing-p-- {
  padding: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pt-- {
  padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pr-- {
  padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pb-- {
  padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pl-- {
  padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-ph-- {
  padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pv-- {
  padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

/**
 *	Add small paddings.
 */
.cxco-u-spacing-p- {
  padding: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pt- {
  padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pr- {
  padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pb- {
  padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pl- {
  padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-ph- {
  padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pv- {
  padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

/**
 *	Add large paddings.
 */
.cxco-u-spacing-p\+ {
  padding: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pt\+ {
  padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pr\+ {
  padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pb\+ {
  padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pl\+ {
  padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-ph\+ {
  padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pv\+ {
  padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

/**
 *	Add huge paddings.
 */
.cxco-u-spacing-p\+\+ {
  padding: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pt\+\+ {
  padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pr\+\+ {
  padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pb\+\+ {
  padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pl\+\+ {
  padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-ph\+\+ {
  padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

.cxco-u-spacing-pv\+\+ {
  padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
}

/**
 *	Remove paddings.
 */
.cxco-u-spacing-p0 {
  padding: 0 !important;
}

.cxco-u-spacing-pt0 {
  padding-top: 0 !important;
}

.cxco-u-spacing-pr0 {
  padding-right: 0 !important;
}

.cxco-u-spacing-pb0 {
  padding-bottom: 0 !important;
}

.cxco-u-spacing-pl0 {
  padding-left: 0 !important;
}

.cxco-u-spacing-ph0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.cxco-u-spacing-pv0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 * Spacing-responsive
 ===================================================================================== */
/**
 * Margin and padding helper classes. Use these to tweak layout on a micro
 * level.
 *
 * `.(m|p)(t|r|b|l|h|v)(-|+|0) {}` = margin/padding top/right/bottom/left/horizontal/vertical less/more/none
 *
 * Example:
 *
 * .u-spacing@m-mt+ (Adds a margin top @ media query m)
 *
 */
/**
     * Margin helper classes.
     *
     * Add margins.
     */
@media all and (min-width: 768px) {
  .cxco-u-spacing\@m-m {
    margin: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@m-mt {
    margin-top: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@m-mr {
    margin-right: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@m-mb {
    margin-bottom: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@m-ml {
    margin-left: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@m-mh {
    margin-right: var(--cxco-ui-spacing, 16px) !important;
    margin-left: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@m-mv {
    margin-top: var(--cxco-ui-spacing, 16px) !important;
    margin-bottom: var(--cxco-ui-spacing, 16px) !important;
  }
}

@media all and (min-width: 1024px) {
  .cxco-u-spacing\@l-m {
    margin: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@l-mt {
    margin-top: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@l-mr {
    margin-right: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@l-mb {
    margin-bottom: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@l-ml {
    margin-left: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@l-mh {
    margin-right: var(--cxco-ui-spacing, 16px) !important;
    margin-left: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@l-mv {
    margin-top: var(--cxco-ui-spacing, 16px) !important;
    margin-bottom: var(--cxco-ui-spacing, 16px) !important;
  }
}

@media all and (min-width: 1440px) {
  .cxco-u-spacing\@xl-m {
    margin: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@xl-mt {
    margin-top: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@xl-mr {
    margin-right: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@xl-mb {
    margin-bottom: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@xl-ml {
    margin-left: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@xl-mh {
    margin-right: var(--cxco-ui-spacing, 16px) !important;
    margin-left: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@xl-mv {
    margin-top: var(--cxco-ui-spacing, 16px) !important;
    margin-bottom: var(--cxco-ui-spacing, 16px) !important;
  }
}

/**
     * Add tiny margins.
     */
@media all and (min-width: 768px) {
  .cxco-u-spacing\@m-m-- {
    margin: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mt-- {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mr-- {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mb-- {
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-ml-- {
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mh-- {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mv-- {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

@media all and (min-width: 1024px) {
  .cxco-u-spacing\@l-m-- {
    margin: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mt-- {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mr-- {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mb-- {
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-ml-- {
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mh-- {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mv-- {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

@media all and (min-width: 1440px) {
  .cxco-u-spacing\@xl-m-- {
    margin: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mt-- {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mr-- {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mb-- {
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-ml-- {
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mh-- {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mv-- {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

/**
     * Add small margins.
     */
@media all and (min-width: 768px) {
  .cxco-u-spacing\@m-m- {
    margin: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mt- {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mr- {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mb- {
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-ml- {
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mh- {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mv- {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

@media all and (min-width: 1024px) {
  .cxco-u-spacing\@l-m- {
    margin: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mt- {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mr- {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mb- {
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-ml- {
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mh- {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mv- {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

@media all and (min-width: 1440px) {
  .cxco-u-spacing\@xl-m- {
    margin: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mt- {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mr- {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mb- {
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-ml- {
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mh- {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mv- {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

/**
     * Add large margins.
     */
@media all and (min-width: 768px) {
  .cxco-u-spacing\@m-m\+ {
    margin: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mt\+ {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mr\+ {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mb\+ {
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-ml\+ {
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mh\+ {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mv\+ {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

@media all and (min-width: 1024px) {
  .cxco-u-spacing\@l-m\+ {
    margin: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mt\+ {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mr\+ {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mb\+ {
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-ml\+ {
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mh\+ {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mv\+ {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

@media all and (min-width: 1440px) {
  .cxco-u-spacing\@xl-m\+ {
    margin: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mt\+ {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mr\+ {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mb\+ {
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-ml\+ {
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mh\+ {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mv\+ {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

/**
     * Add huge margins.
     */
@media all and (min-width: 768px) {
  .cxco-u-spacing\@m-m\+\+ {
    margin: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mt\+\+ {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mr\+\+ {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mb\+\+ {
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-ml\+\+ {
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mh\+\+ {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-mv\+\+ {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

@media all and (min-width: 1024px) {
  .cxco-u-spacing\@l-m\+\+ {
    margin: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mt\+\+ {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mr\+\+ {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mb\+\+ {
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-ml\+\+ {
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mh\+\+ {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-mv\+\+ {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

@media all and (min-width: 1440px) {
  .cxco-u-spacing\@xl-m\+\+ {
    margin: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mt\+\+ {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mr\+\+ {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mb\+\+ {
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-ml\+\+ {
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mh\+\+ {
    margin-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-mv\+\+ {
    margin-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    margin-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

/**
     * Remove margins.
     */
@media all and (min-width: 768px) {
  .cxco-u-spacing\@m-m0 {
    margin: 0 !important;
  }
  .cxco-u-spacing\@m-mt0 {
    margin-top: 0 !important;
  }
  .cxco-u-spacing\@m-mr0 {
    margin-right: 0 !important;
  }
  .cxco-u-spacing\@m-mb0 {
    margin-bottom: 0 !important;
  }
  .cxco-u-spacing\@m-ml0 {
    margin-left: 0 !important;
  }
  .cxco-u-spacing\@m-mh0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .cxco-u-spacing\@m-mv0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media all and (min-width: 1024px) {
  .cxco-u-spacing\@l-m0 {
    margin: 0 !important;
  }
  .cxco-u-spacing\@l-mt0 {
    margin-top: 0 !important;
  }
  .cxco-u-spacing\@l-mr0 {
    margin-right: 0 !important;
  }
  .cxco-u-spacing\@l-mb0 {
    margin-bottom: 0 !important;
  }
  .cxco-u-spacing\@l-ml0 {
    margin-left: 0 !important;
  }
  .cxco-u-spacing\@l-mh0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .cxco-u-spacing\@l-mv0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media all and (min-width: 1440px) {
  .cxco-u-spacing\@xl-m0 {
    margin: 0 !important;
  }
  .cxco-u-spacing\@xl-mt0 {
    margin-top: 0 !important;
  }
  .cxco-u-spacing\@xl-mr0 {
    margin-right: 0 !important;
  }
  .cxco-u-spacing\@xl-mb0 {
    margin-bottom: 0 !important;
  }
  .cxco-u-spacing\@xl-ml0 {
    margin-left: 0 !important;
  }
  .cxco-u-spacing\@xl-mh0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .cxco-u-spacing\@xl-mv0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/**
     * Padding helper classes.
     *
     * Add paddings.
     */
@media all and (min-width: 768px) {
  .cxco-u-spacing\@m-pt {
    padding-top: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@m-p {
    padding: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@m-pr {
    padding-right: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@m-pb {
    padding-bottom: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@m-pl {
    padding-left: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@m-ph {
    padding-right: var(--cxco-ui-spacing, 16px) !important;
    padding-left: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@m-pv {
    padding-top: var(--cxco-ui-spacing, 16px) !important;
    padding-bottom: var(--cxco-ui-spacing, 16px) !important;
  }
}

@media all and (min-width: 1024px) {
  .cxco-u-spacing\@l-pt {
    padding-top: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@l-p {
    padding: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@l-pr {
    padding-right: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@l-pb {
    padding-bottom: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@l-pl {
    padding-left: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@l-ph {
    padding-right: var(--cxco-ui-spacing, 16px) !important;
    padding-left: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@l-pv {
    padding-top: var(--cxco-ui-spacing, 16px) !important;
    padding-bottom: var(--cxco-ui-spacing, 16px) !important;
  }
}

@media all and (min-width: 1440px) {
  .cxco-u-spacing\@xl-pt {
    padding-top: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@xl-p {
    padding: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@xl-pr {
    padding-right: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@xl-pb {
    padding-bottom: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@xl-pl {
    padding-left: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@xl-ph {
    padding-right: var(--cxco-ui-spacing, 16px) !important;
    padding-left: var(--cxco-ui-spacing, 16px) !important;
  }
  .cxco-u-spacing\@xl-pv {
    padding-top: var(--cxco-ui-spacing, 16px) !important;
    padding-bottom: var(--cxco-ui-spacing, 16px) !important;
  }
}

/**
     * Add tiny paddings.
     */
@media all and (min-width: 768px) {
  .cxco-u-spacing\@m-p-- {
    padding: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pt-- {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pr-- {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pb-- {
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pl-- {
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-ph-- {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pv-- {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

@media all and (min-width: 1024px) {
  .cxco-u-spacing\@l-p-- {
    padding: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pt-- {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pr-- {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pb-- {
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pl-- {
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-ph-- {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pv-- {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

@media all and (min-width: 1440px) {
  .cxco-u-spacing\@xl-p-- {
    padding: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pt-- {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pr-- {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pb-- {
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pl-- {
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-ph-- {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pv-- {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

/**
     * Add small paddings.
     */
@media all and (min-width: 768px) {
  .cxco-u-spacing\@m-p- {
    padding: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pt- {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pr- {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pb- {
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pl- {
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-ph- {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pv- {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

@media all and (min-width: 1024px) {
  .cxco-u-spacing\@l-p- {
    padding: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pt- {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pr- {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pb- {
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pl- {
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-ph- {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pv- {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

@media all and (min-width: 1440px) {
  .cxco-u-spacing\@xl-p- {
    padding: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pt- {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pr- {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pb- {
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pl- {
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-ph- {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pv- {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

/**
     * Add large paddings.
     */
@media all and (min-width: 768px) {
  .cxco-u-spacing\@m-p\+ {
    padding: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pt\+ {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pr\+ {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pb\+ {
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pl\+ {
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-ph\+ {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pv\+ {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

@media all and (min-width: 1024px) {
  .cxco-u-spacing\@l-p\+ {
    padding: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pt\+ {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pr\+ {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pb\+ {
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pl\+ {
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-ph\+ {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pv\+ {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

@media all and (min-width: 1440px) {
  .cxco-u-spacing\@xl-p\+ {
    padding: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pt\+ {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pr\+ {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pb\+ {
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pl\+ {
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-ph\+ {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pv\+ {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

/**
     * Add huge paddings.
     */
@media all and (min-width: 768px) {
  .cxco-u-spacing\@m-p\+\+ {
    padding: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pt\+\+ {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pr\+\+ {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pb\+\+ {
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pl\+\+ {
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-ph\+\+ {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@m-pv\+\+ {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

@media all and (min-width: 1024px) {
  .cxco-u-spacing\@l-p\+\+ {
    padding: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pt\+\+ {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pr\+\+ {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pb\+\+ {
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pl\+\+ {
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-ph\+\+ {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@l-pv\+\+ {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

@media all and (min-width: 1440px) {
  .cxco-u-spacing\@xl-p\+\+ {
    padding: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pt\+\+ {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pr\+\+ {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pb\+\+ {
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pl\+\+ {
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-ph\+\+ {
    padding-right: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-left: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
  .cxco-u-spacing\@xl-pv\+\+ {
    padding-top: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
    padding-bottom: calc(var(--cxco-ui-spacing, 16px)* 2) !important;
  }
}

/**
     * Remove paddings.
     */
@media all and (min-width: 768px) {
  .cxco-u-spacing\@m-p0 {
    padding: 0 !important;
  }
  .cxco-u-spacing\@m-pt0 {
    padding-top: 0 !important;
  }
  .cxco-u-spacing\@m-pr0 {
    padding-right: 0 !important;
  }
  .cxco-u-spacing\@m-pb0 {
    padding-bottom: 0 !important;
  }
  .cxco-u-spacing\@m-pl0 {
    padding-left: 0 !important;
  }
  .cxco-u-spacing\@m-ph0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .cxco-u-spacing\@m-pv0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

@media all and (min-width: 1024px) {
  .cxco-u-spacing\@l-p0 {
    padding: 0 !important;
  }
  .cxco-u-spacing\@l-pt0 {
    padding-top: 0 !important;
  }
  .cxco-u-spacing\@l-pr0 {
    padding-right: 0 !important;
  }
  .cxco-u-spacing\@l-pb0 {
    padding-bottom: 0 !important;
  }
  .cxco-u-spacing\@l-pl0 {
    padding-left: 0 !important;
  }
  .cxco-u-spacing\@l-ph0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .cxco-u-spacing\@l-pv0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

@media all and (min-width: 1440px) {
  .cxco-u-spacing\@xl-p0 {
    padding: 0 !important;
  }
  .cxco-u-spacing\@xl-pt0 {
    padding-top: 0 !important;
  }
  .cxco-u-spacing\@xl-pr0 {
    padding-right: 0 !important;
  }
  .cxco-u-spacing\@xl-pb0 {
    padding-bottom: 0 !important;
  }
  .cxco-u-spacing\@xl-pl0 {
    padding-left: 0 !important;
  }
  .cxco-u-spacing\@xl-ph0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .cxco-u-spacing\@xl-pv0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
 * States
 ===================================================================================== */
.is-disabled {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0.2;
}

/*  7 Libs
// =========================================================== */
/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/** =====================================================================================
*  Modal
* 1.    Ensures when in closed state nothing is clickable
===================================================================================== */
.cxco-c-modal, .basicLightbox {
  --cxco-c-modal--opacity: 0.7;
  --cxco-c-modal--bg-color-start: hsla(var(--cxco-neutral-dark-h), var(--cxco-neutral-dark-s), var(--cxco-neutral-dark-l), var(--cxco-c-modal--opacity));
  --cxco-c-modal--bg-color-end: hsla(var(--cxco-neutral-h), var(--cxco-neutral-s), var(--cxco-neutral-l), var(--cxco-c-modal--opacity));
  z-index: 101;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10vmax;
  transition: opacity 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66), transform 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .cxco-c-modal, .basicLightbox {
    --cxco-c-modal--opacity: 1;
  }
}

.cxco-c-modal::before, .basicLightbox::before {
  background-image: linear-gradient(to top, var(--cxco-c-modal--bg-color-start) 0%, var(--cxco-c-modal--bg-color-end) 100%);
  background-size: 1px 100%;
  background-position: 0 0;
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  transition: border-radius 0.4s cubic-bezier(0.03, 0.18, 0.32, 0.66);
}

.cxco-c-modal[data-state='open'], .basicLightbox[data-state='open'], .basicLightbox.basicLightbox--visible {
  opacity: 1;
  transform: scale(1);
}

.cxco-c-modal[data-state='open']::before, .basicLightbox[data-state='open']::before, .basicLightbox.basicLightbox--visible::before {
  border-radius: 0;
}

.cxco-c-modal[data-state='closed'], .basicLightbox {
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  /*[1]*/
}

.cxco-c-modal[data-state='closed']::before, .basicLightbox::before {
  border-radius: 50%;
}

.cxco .cxco-c-modal, .cxco .basicLightbox {
  margin-top: 0;
}

.basicLightbox {
  pointer-events: auto;
}

.basicLightbox__placeholder {
  max-width: 100%;
  z-index: 1;
}

.basicLightbox__placeholder > img:first-child:last-child,
.basicLightbox__placeholder > video:first-child:last-child,
.basicLightbox__placeholder > iframe:first-child:last-child {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

.basicLightbox__placeholder > video:first-child:last-child,
.basicLightbox__placeholder > iframe:first-child:last-child {
  pointer-events: auto;
}

.basicLightbox__placeholder > img:first-child:last-child,
.basicLightbox__placeholder > video:first-child:last-child {
  width: auto;
  height: auto;
}

.basicLightbox__placeholder > [data-basicLightbox] {
  display: block !important;
}

.basicLightbox--img .basicLightbox__placeholder,
.basicLightbox--video .basicLightbox__placeholder,
.basicLightbox--iframe .basicLightbox__placeholder {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.basicLightbox--visible .basicLightbox__placeholder {
  transform: scale(1);
}

[data-basicLightbox] {
  display: none !important;
}

/** Import settings and tools to use global variables, functions, mixing */
/*  1 SETTINGS
 *  Global variables, site-wide settings,
 *  config switches etc.
 *
 *  The order in which these Sass files
 *  are loaded is critical!
 *  So please be careful when editing
=========================================================== */
/** =====================================================================================
 *  Some additional settings
 ===================================================================================== */
/**
 *	Would you like to show media queries?
 *	This is handy during development.
 */
/**
 *	Enable debug mode to highlight possible
 *	markup/accessibility quirks in your code
 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/** =====================================================================================
 *  Colors
 ===================================================================================== */
/**
Here we define and calculate our color palettes.
Use the base-color-config map in order to configure the palettes:

Use offset to determine the amount of variations based on the defined color.
With the ratio you can fine-tune the range between the min and max lightness.
The generated color map will be like: 

$palettes: (
    "primary": (
        base: #ffffff, 
        inverted: #000000
    ), 
    "primary-dark": (
        base: #000000, 
        inverted: #ffffff
    ), 
    "primary-x-dark": (
        base: #000000, 
        inverted: #ffffff
    )
)

Usage:

The amount lightness can be altered by adding the x unit.
Use the base color in combination with the inverted color to add contrast.
The contrast is auto generated and variable with the $contrast-threshold.

background-color: var(primary-x-dark, base);
color: var(primary-x-dark, inverted);

* 
*/
/*
 *  Global color variables.
 *	Never use them directly in the styles, only for functions and mixins.
*/
/* Map that will hold all our colors */
/* Map with base configuration of all defined colors 
 * We use this map to generate a color map with different tones ($palettes)
 * @prop {color} $color The CSS color
 * @prop {number} $offset Amount of variations 
 * @prop {number} $ratio Defines the range of lightness 
*/
/**
 * Function that generates a lightness map that contains different tones of a color.
 *
 * @param {string} $color-name The color name
 * @param {color} $color The CSS color
 * @param {number} $offset Amount of variations 
 * @param {number} $ratio Defines the range of lightness 
 * @return {Sass map} A map containing tone variations
 */
/** =====================================================================================
 *  Elevation & shadows
 *  Umbra Penumbra and Ambient light
 *  Based on material design principles:
 *  https: //material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 ===================================================================================== */
/** =====================================================================================
 *  Defines the typographic baseline.
 *  We define every size in pixels, the underlying system converts the
 *  respective units to the responsive REM value.
 ===================================================================================== */
/**
 *	Base font size & line height
 *	We predefine a nice big font size, which reads very nice on a big screen.
 *	As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 *
 *	The $base-line-height is used for creating spacing classes,
 *	and the line-height ration is used inf the $font-sizes map
 */
/**
 *	Here we assign short names for the font families
 */
/**
 *	Here we store short names for all the sizes
 */
/** =====================================================================================
 *  Spacing units to properly size your UI
 *  Source: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
 ===================================================================================== */
/**
 *	Smaller units
 */
/**
 *	Larger units
 */
/** =====================================================================================
 *  Define your breakpoints
 ===================================================================================== */
/** =====================================================================================
 *  Site wide variables for specific components on which other elements are dependent.
 ===================================================================================== */
/* Set some values here for reuse within components */
/* Default border properties */
/* Default animation properties */
/* Default nav properties */
/* All supported file extensions with base 64 encoded svg*/
/** =====================================================================================
 *  We use a 'z-index-map' for easy managing the stacking order
 *  This way we have a overview of all the z-index values that are used across the project.
 ===================================================================================== */
/**
    USAGE:

    @include z(article);

 */
/*  2 Tools
*  Site wide mixins and functions
=========================================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/* Value to em */
/* Value to rem */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  Remove the unit of a length
 *  @param {Number} $number - Number to remove unit from
 *  @return {Number} - Unitless number
 */
/**
 *  Slightly lighten a color or darken a color
 *
 *  Both lighten and darken functions manipulate the lightness of a color in the HSL space
 *  by adding or subtracting lightness to it. Basically, they are nothing but aliases
 *  for the $lightness parameter of the adjust-color function.
 *
 *  The thing is, those functions often do not provide the expected result.
 *  On the other hand, the mix function is a nice way to lighten or darken a color
 *  by mixing it with either white or black.
 *
 *  The benefit of using mix rather than one of the two aforementioned functions
 *  is that it will progressively go to black (or white) as you decrease
 *  the proportion of the color, whereas darken and lighten
 *  will quickly blow out a color all the way to black or white.

    USAGE:

    .myClass {
        background-color: tint(#BADA55, 42%);
    }

    .myClass {
        background-color: shade(#C0FFEE, 42%);
    }

 */
/*
 *  Split a string with a seperator
 *  @param {String} $string - String to be splitted
 *  @param {String} $seperator - Sets the index for splitting
 *  @return {Array} $split-arr - Splitted values
 */
/**
 *  Quickly get a value from our zindex map

    USAGE:

    .myClass {
        z-index: z(z-value);
    }

 */
/** =====================================================================================
 * Toolbox mixins
 ===================================================================================== */
/**
 *  Mixin for setting a font-family

    USAGE:

    .myClass {
        @include font-family(default, thin);
    }

 */
/**
 *  Mixin for setting font-size in PX and REM

    USAGE:

    .myClass {
        @include font-size('x-large');
    }

 */
/**
 *  Font mixin for setting font-size, font-family, line-height and font-weight

    USAGE:

    .myClass {
        @include font('default', 'base', $bold:true);
    }

 */
/**
 *  Truncate overly long strings
 *  sample value truncate(100%)
 */
/**
 *  Show hyphens for every browser supporting it
 *  and will break lines in every other browser
 */
/* Can be used to make text unselectable */
/**
 *  Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
 *  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
/**
 *  Micro clearfix
 *  As per: nicolasgallagher.com/micro-clearfix-hack
 */
/* Lobotomized Owl selector */
/* Lobotomized Owl selector for all direct children*/
/* Reset Lobotomized Owl selector for all ancesctors in a component */
/* Reset Lobotomized Owl selector for all direct children in a component */
/* Quickly reset lists */
/* Make a circle */
/* Give some rounded corners */
/**
 *  Adding a border
 *
 *  When no arguments are passed it gets the default border on all sides
 *  Specifying side(s) is possible by including a 'space-seperated' list
 *  Overwriting default border style with '$style' argument

    USAGE:

    @include border();
    @include border(bottom left);
    @include border($style: 3px dotted #383838);
    @include border(top right, $style: 2px solid #ff0000);

 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/*
 *  Break out to the edge of the window when inside an constrained element.
 *  So basically reset the constrain.
 */
/**
 *  Mixin for making solid arrows

    USAGE:

    @include arrow(top, 10px, #fff);

 */
/**
 *  Mixin for making arrows

    USAGE:

    @include arrow(top, 10px, #fff, #000);

 */
/**
 *  Mixin for initialising all file extensions svg icons

    USAGE:

    @include init-extensions();

 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/** =====================================================================================
 *  Debug Mode
 *  Activate switch $debug-mode in _settings.config.scss
 *
 *  Red border      ==  something is wrong
 *  Yellow border   ==  something may be wrong, you should double check.
 *  Green border    ==  perfect, nice one!
 ===================================================================================== */
/**
 *  Media query helper
 *  Displays the current active media query in the bottom right corner
 */
/** =====================================================================================
 *	Scrollbar for webkit browsers: Used for inline scrollable content
 ===================================================================================== */
/** =====================================================================================
 *	Mixing for recursive menus. To indicate depth we want different styling for submenus
 *  1. Currently we don't use custom properties, because the post-css-processor cant parse them using sass functions because it's not calculated on runtime.
 ===================================================================================== */
/*

Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>

*/
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: var(--cxco-neutral-x-light);
  color: var(--cxco-neutral-x-light-inverted);
}

/* Base color: saturation 0; */
.hljs,
.hljs-subst {
  background: var(--cxco-neutral-x-light);
}

.hljs-comment {
  color: var(--cxco-neutral-x-light-inverted);
  opacity: 0.9;
}

.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
  font-weight: bold;
}

/* User color: hue: 0 */
.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
  color: var(--cxco-primary);
}

.hljs-title,
.hljs-section {
  color: var(--cxco-red);
  font-weight: bold;
}

.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: var(--cxco-neutral-x-light-inverted);
}

/* Language color: hue: 90; */
.hljs-literal {
  color: var(--cxco-orange);
}

.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
  color: var(--cxco-green);
}

/* Meta color: hue: 200 */
.hljs-meta {
  color: var(--cxco-primary-dark);
}

.hljs-meta-string {
  color: var(--cxco-primary-dark);
}

/* Misc effects */
.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}
/*# sourceMappingURL=cxco.css.map */