Themes
Honeycomb comes with 5 themes on board:
defaultneptunekamildarkhigh-contrast
Applying themes is done by using special CSS classes:
flix-theme-neptunefor neptune theme;flix-theme-kamilfor kamil theme;flix-theme-darkfor dark theme;flix-theme-high-contrastfor high contrast theme;- default theme doesn't require any classes and is applied by default.
Generally we recommend applying these theming CSS classes to one of the root HTML elements of your application (<html> or <body> elements).
Let's call this one a theming container.
There are 2 things to note related to that:
- to make sure proper background color is applied you need to either use a
flix-main-wrapperlayout element within the theming container or set the background of you Apps root element via theme variable:background-color: var(--flix-bg-primary-color); - theming container needs to be a parent of the outer most honeycomb component including mentioned
flix-main-wrapper.
The setup can look like this:
<!DOCTYPE html>
<!-- adding a theme container -->
<html class="flix-theme-dark">
<!-- applying proper background with main-wrapper element -->
<body class="flix-main-wrapper">
<!-- Your app with all the Honeycomb component you use needs to be here -->
<header class="flix-header"></header>
<section class="flix-page-container"></section>
</body>
</html>Theme variables
We utilize CSS custom properties for theming our components which makes it super easy to apply them in any CSS code.
To namespace Honeycomb theme vars, all the variables are prefixed with a --flix prefix.
Say you wanna apply our ui-primary-color as a background and spacing-2 as a padding to one of your awesome components, this would look like this:
.my-awesome-component {
padding: 0 var(--flix-spacing-2);
background: var(--flix-ui-primary-color);
}If you have SASS based stylesheets you can also use cssvar() function that takes care of prefixing and stuff.
With this in mind the above example in SCSS would look like this:
// including honeycomb tools and theme variables
@import '@flixbus/honeycomb/assets/scss/honeycomb-tools';
@import '@flixbus/honeycomb/assets/scss/honeycomb-themes';
.my-awesome-component {
padding: 0 cssvar(spacing-2);
background: cssvar(ui-primary-color);
}Bellow you can find a list of all the available variables with their respective values. Notice that it's not only colors that are provided in there, there are also spacing and geometry vars as well as icons.
--flix-primary-brand-color: #73d700;
--flix-secondary-brand-color: #ffad00;
--flix-primary-ui-color: #31a100;
--flix-primary-ui-light-color: #5cc500;
--flix-primary-ui-dark-color: #187d00;
--flix-ui-primary-color: #31a100;
--flix-ui-primary-light-color: #5cc500;
--flix-ui-primary-dark-color: #187d00;
--flix-grayscale-0-color: #fff;
--flix-grayscale-10-color: #f7f7f7;
--flix-grayscale-30-color: #e1e1e1;
--flix-grayscale-50-color: #c8c8c8;
--flix-grayscale-70-color: #646464;
--flix-grayscale-90-color: #444;
--flix-grayscale-100-color: #353535;
--flix-neutral-color: #016ae7;
--flix-success-color: #228f00;
--flix-success-dark-color: #136b00;
--flix-warning-color: #ff5704;
--flix-warning-dark-color: #c42d00;
--flix-danger-color: #dd2828;
--flix-danger-dark-color: #b31414;
--flix-primary-bg-color: #fff;
--flix-primary-bg-transparent-color: rgba(255, 255, 255, 0.88);
--flix-secondary-bg-color: #f7f7f7;
--flix-bg-primary-color: #fff;
--flix-bg-primary-transparent-color: rgba(255, 255, 255, 0.88);
--flix-bg-secondary-color: #f7f7f7;
--flix-box-bg-color: #fff;
--flix-highlight-color: #e5f9c0;
--flix-overlay-bg-color: rgba(0, 0, 0, 0.5);
--flix-focus-outline-color: #016ae7;
--flix-content-primary-color: #353535;
--flix-content-secondary-color: #646464;
--flix-heading-font-color: #353535;
--flix-link-color: #0047de;
--flix-primary-line-color: #c8c8c8;
--flix-primary-icon-color: #8b8b8b;
--flix-secondary-icon-color: #31a100;
--flix-line-primary-color: #c8c8c8;
--flix-icon-primary-color: #8b8b8b;
--flix-icon-secondary-color: #31a100;
--flix-box-shadow-color: rgba(0, 0, 0, 0.18);
--flix-box-shadow-subtle-color: rgba(0, 0, 0, 0.06);
--flix-button-primary-color: #ffcb46;
--flix-button-secondary-color: #a2e53f;
--flix-button-label-color: #353535;
--flix-header-bg-color: #a2e53f;
--flix-header-color: #353535;
--flix-header-nav-bg-color-tablet: #73d700;
--flix-input-border-color: #8b8b8b;
--flix-input-height-mobile: 44px;
--flix-input-height-desktop: 36px;
--flix-input-border-radius: 6px;
--flix-spacing-1: 6px;
--flix-spacing-2: 12px;
--flix-spacing-3: 18px;
--flix-spacing-4: 24px;
--flix-spacing-5: 30px;
--flix-spacing-6: 36px;
--flix-spacing-7: 42px;
--flix-spacing-8: 48px;
--flix-spacing-9: 54px;
--flix-spacing-10: 60px;
--flix-spacing-11: 66px;
--flix-spacing-12: 72px;
--flix-spacing-half: 3px;
--flix-page-min-width: 320px;
--flix-page-max-width: 1200px;
--flix-font-size-primary: 1rem;
--flix-font-size-small: 0.9rem;
--flix-font-size-fineprint: 0.8rem;
--flix-font-size-h1: 1.7rem;
--flix-font-size-h2: 1.3rem;
--flix-font-size-h3: 1.1rem;
--flix-font-size-h4: 1rem;
--flix-font-size-button: 1rem;
--flix-line-height-primary: 1.5rem;
--flix-line-height-small: 1.1rem;
--flix-line-height-fineprint: 0.9rem;
--flix-line-height-h1: 2rem;
--flix-line-height-h2: 1.7rem;
--flix-line-height-h3: 1.5rem;
--flix-line-height-h4: 1.5rem;
--flix-icon-arrow-down: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M18.68 8.3a1 1 0 00-1.41 0l-5.28 5.28-5.26-5.27a1 1 0 00-1.4 0 1 1 0 000 1.41l5.96 5.99a1 1 0 001.41 0l5.98-6a1 1 0 000-1.42z' fill='%238b8b8b' /%3E%3C/svg%3E");
--flix-icon-arrow-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M15.7 17.27l-5.28-5.28 5.27-5.26a1 1 0 000-1.41 1 1 0 00-1.41 0l-5.99 5.97a1 1 0 000 1.41l6 5.98a1 1 0 001.42 0 1 1 0 000-1.41z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-arrow-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M15.7 11.3L9.72 5.32a1 1 0 00-1.42 0 1 1 0 000 1.42L13.58 12 8.3 17.27a1 1 0 000 1.41 1 1 0 001.41 0l5.99-5.97a1 1 0 000-1.41z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-attention-solid: url("data:image/svg+xml,%3Csvg fill='%23dd2828' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5a1 1 0 012 0v5.5a1 1 0 11-2 0V7zm1 11a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/%3E%3C/svg%3E");
--flix-icon-calendar: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M19 5h-1V4a1 1 0 00-2 0v1H8V4a1 1 0 00-2 0v1H5a3 3 0 00-3 3v10a3 3 0 003 3h14a3 3 0 003-3V8a3 3 0 00-3-3zm1 13c0 .54-.46 1-1 1H5c-.54 0-1-.46-1-1v-7h16v7zM4 9V8c0-.54.46-1 1-1h14c.54 0 1 .46 1 1v1H4zm2 4.5a1 1 0 112 0 1 1 0 01-2 0zm5 0a1 1 0 112 0 1 1 0 01-2 0zm5 0a1 1 0 112 0 1 1 0 01-2 0zm-10 3a1 1 0 112 0 1 1 0 01-2 0zm5 0a1 1 0 112 0 1 1 0 01-2 0z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-checkbox-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21,11H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z' style='fill:%2331a100'/%3E%3C/svg%3E");
--flix-icon-checkmark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M21.7 6.2l-13 13a1 1 0 01-1.4 0l-5-5a1 1 0 111.4-1.4L8 17.08l12.3-12.3a1 1 0 111.4 1.42z' style='fill:%2331a100' /%3E%3C/svg%3E");
--flix-icon-checkmark-solid: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23228f00' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.89 7.7l-6 6a1 1 0 01-1.42 0l-2.36-2.35a1 1 0 111.42-1.41l1.65 1.65 5.3-5.3a1 1 0 111.4 1.42z'/%3E%3C/svg%3E");
--flix-icon-close: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M13.41 12l6.37-6.36a1 1 0 10-1.42-1.42L12 10.6 5.64 4.22a1 1 0 10-1.42 1.42L10.6 12l-6.37 6.36a1 1 0 101.42 1.42L12 13.4l6.36 6.37a1 1 0 101.42-1.42L13.4 12z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-close-inverted: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M13.41 12l6.37-6.36a1 1 0 10-1.42-1.42L12 10.6 5.64 4.22a1 1 0 10-1.42 1.42L10.6 12l-6.37 6.36a1 1 0 101.42 1.42L12 13.4l6.36 6.37a1 1 0 101.42-1.42L13.4 12z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-close-white: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M13.41 12l6.37-6.36a1 1 0 10-1.42-1.42L12 10.6 5.64 4.22a1 1 0 10-1.42 1.42L10.6 12l-6.37 6.36a1 1 0 101.42 1.42L12 13.4l6.36 6.37a1 1 0 101.42-1.42L13.4 12z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-danger: url("data:image/svg+xml,%3Csvg fill='%23dd2828' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm4.95-3.05a1 1 0 01-1.41 0L12 13.41l-3.54 3.54a1 1 0 11-1.41-1.41L10.59 12 7.05 8.46a1 1 0 111.41-1.41L12 10.59l3.54-3.54a1 1 0 111.41 1.41L13.41 12l3.54 3.54a1 1 0 010 1.41z'/%3E%3C/svg%3E");
--flix-icon-danger-solid: url("data:image/svg+xml,%3Csvg fill='%23dd2828' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' class='flix-icon crossed-solid'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.95 13.54a1 1 0 11-1.41 1.41L12 13.41l-3.54 3.54a1 1 0 11-1.41-1.41L10.59 12 7.05 8.46a1 1 0 111.41-1.41L12 10.59l3.54-3.54a1 1 0 111.41 1.41L13.41 12l3.54 3.54z'/%3E%3C/svg%3E");
--flix-icon-header-arrow-down: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M18.68 8.3a1 1 0 00-1.41 0l-5.28 5.28-5.26-5.27a1 1 0 00-1.4 0 1 1 0 000 1.41l5.96 5.99a1 1 0 001.41 0l5.98-6a1 1 0 000-1.42z' fill='%23353535' /%3E%3C/svg%3E");
--flix-icon-header-burger: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M2 5a1 1 0 011-1h18a1 1 0 010 2H3a1 1 0 01-1-1zm19 6H3a1 1 0 000 2h18a1 1 0 000-2zm0 7H3a1 1 0 000 2h18a1 1 0 000-2z' fill='%23353535'/%3E%3C/svg%3E");
--flix-icon-info: url("data:image/svg+xml,%3Csvg fill='%23016ae7' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm1-8.5V17a1 1 0 01-2 0v-5.5a1 1 0 112 0zm.5-4a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z'/%3E%3C/svg%3E");
--flix-icon-info-solid: url("data:image/svg+xml,%3Csvg fill='%23016ae7' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15a1 1 0 01-2 0v-5.5a1 1 0 112 0V17zm-1-8a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/%3E%3C/svg%3E");
--flix-icon-minus: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M21 11H3a1 1 0 000 2h18a1 1 0 000-2z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-radio-checkmark: url("data:image/svg+xml,%3Csvg fill='%2331a100' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z'/%3E%3C/svg%3E");
--flix-icon-plus: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%238b8b8b' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M21 11h-8V3a1 1 0 00-2 0v8H3a1 1 0 000 2h8v8a1 1 0 002 0v-8h8a1 1 0 000-2z'/%3E%3C/svg%3E");
--flix-icon-success: url("data:image/svg+xml,%3Csvg fill='%23228f00' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M16.89 8.3a1 1 0 010 1.4l-6 6a1 1 0 01-1.42 0l-2.36-2.35a1 1 0 111.42-1.41l1.65 1.65 5.3-5.3a1 1 0 011.4 0zM22 12a10 10 0 11-20 0 10 10 0 0120 0zm-2 0a8 8 0 00-16 0 8 8 0 0016 0z'/%3E%3C/svg%3E");
--flix-icon-success-solid: url("data:image/svg+xml,%3Csvg fill='%23228f00' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.89 7.7l-6 6a1 1 0 01-1.42 0l-2.36-2.35a1 1 0 111.42-1.41l1.65 1.65 5.3-5.3a1 1 0 111.4 1.42z'/%3E%3C/svg%3E");
--flix-icon-time: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm3.2-6.2a1 1 0 11-1.4 1.4l-2.5-2.5a1 1 0 01-.3-.7V7a1 1 0 012 0v4.59l2.2 2.2z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-warning: url("data:image/svg+xml,%3Csvg fill='%23ff5704' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm-1-7.5V7a1 1 0 012 0v5.5a1 1 0 11-2 0zm2.5 4a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z'/%3E%3C/svg%3E");
--flix-icon-warning-solid: url("data:image/svg+xml,%3Csvg fill='%23ff5704' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5a1 1 0 012 0v5.5a1 1 0 11-2 0V7zm1 11a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/%3E%3C/svg%3E");
--flix-hover-layer-color: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06));
--flix-pressed-layer-color: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12));
--flix-disabled-element-opacity: 0.5;
--flix-primary-border-radius: 6px;
--flix-primary-box-shadow: 0px 6px 12px rgba(0, 0, 0, .06), 0px 3px 18px rgba(0, 0, 0, .06), 0px 3px 6px rgba(0, 0, 0, .18);
--flix-font-family-primary: Roboto, Arial, sans-serif;
--flix-font-weight-normal: 400;
--flix-font-weight-semibold: 400;
--flix-font-weight-bold: 700;
--flix-primary-brand-color: #73d700;
--flix-secondary-brand-color: #ffad00;
--flix-primary-ui-color: #73d700;
--flix-primary-ui-light-color: #cef38d;
--flix-primary-ui-dark-color: #44b300;
--flix-ui-primary-color: #73d700;
--flix-ui-primary-light-color: #cef38d;
--flix-ui-primary-dark-color: #44b300;
--flix-grayscale-0-color: #252525;
--flix-grayscale-10-color: #353535;
--flix-grayscale-30-color: #444;
--flix-grayscale-50-color: #646464;
--flix-grayscale-70-color: #8b8b8b;
--flix-grayscale-90-color: #c8c8c8;
--flix-grayscale-100-color: #fff;
--flix-neutral-color: #6ae2e6;
--flix-success-color: #a2e53f;
--flix-success-dark-color: #31a100;
--flix-warning-color: #ffcb46;
--flix-warning-dark-color: #ff6c07;
--flix-danger-color: #ff8187;
--flix-danger-dark-color: #eb3d3d;
--flix-primary-bg-color: #252525;
--flix-primary-bg-transparent-color: rgba(53, 53, 53, 0.88);
--flix-secondary-bg-color: #202020;
--flix-bg-primary-color: #252525;
--flix-bg-primary-transparent-color: rgba(53, 53, 53, 0.88);
--flix-bg-secondary-color: #202020;
--flix-box-bg-color: #353535;
--flix-highlight-color: #136b00;
--flix-overlay-bg-color: rgba(0, 0, 0, 0.5);
--flix-focus-outline-color: #016ae7;
--flix-content-primary-color: #fff;
--flix-content-secondary-color: #c8c8c8;
--flix-heading-font-color: #fff;
--flix-link-color: #3bd0de;
--flix-primary-line-color: #646464;
--flix-primary-icon-color: #fff;
--flix-secondary-icon-color: #fff;
--flix-line-primary-color: #646464;
--flix-icon-primary-color: #fff;
--flix-icon-secondary-color: #fff;
--flix-box-shadow-color: rgba(0, 0, 0, 0.18);
--flix-box-shadow-subtle-color: rgba(0, 0, 0, 0.06);
--flix-button-primary-color: #ffcb46;
--flix-button-secondary-color: #a2e53f;
--flix-button-label-color: #353535;
--flix-header-bg-color: #0f5900;
--flix-header-color: #fff;
--flix-header-nav-bg-color-tablet: #0b4000;
--flix-input-border-color: #c8c8c8;
--flix-input-height-mobile: 44px;
--flix-input-height-desktop: 36px;
--flix-input-border-radius: 6px;
--flix-spacing-1: 6px;
--flix-spacing-2: 12px;
--flix-spacing-3: 18px;
--flix-spacing-4: 24px;
--flix-spacing-5: 30px;
--flix-spacing-6: 36px;
--flix-spacing-7: 42px;
--flix-spacing-8: 48px;
--flix-spacing-9: 54px;
--flix-spacing-10: 60px;
--flix-spacing-11: 66px;
--flix-spacing-12: 72px;
--flix-spacing-half: 3px;
--flix-page-min-width: 320px;
--flix-page-max-width: 1200px;
--flix-font-size-primary: 1rem;
--flix-font-size-small: 0.9rem;
--flix-font-size-fineprint: 0.8rem;
--flix-font-size-h1: 1.7rem;
--flix-font-size-h2: 1.3rem;
--flix-font-size-h3: 1.1rem;
--flix-font-size-h4: 1rem;
--flix-font-size-button: 1rem;
--flix-line-height-primary: 1.5rem;
--flix-line-height-small: 1.1rem;
--flix-line-height-fineprint: 0.9rem;
--flix-line-height-h1: 2rem;
--flix-line-height-h2: 1.7rem;
--flix-line-height-h3: 1.5rem;
--flix-line-height-h4: 1.5rem;
--flix-icon-arrow-down: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M18.68 8.3a1 1 0 00-1.41 0l-5.28 5.28-5.26-5.27a1 1 0 00-1.4 0 1 1 0 000 1.41l5.96 5.99a1 1 0 001.41 0l5.98-6a1 1 0 000-1.42z' fill='%23ffffff' /%3E%3C/svg%3E");
--flix-icon-arrow-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M15.7 17.27l-5.28-5.28 5.27-5.26a1 1 0 000-1.41 1 1 0 00-1.41 0l-5.99 5.97a1 1 0 000 1.41l6 5.98a1 1 0 001.42 0 1 1 0 000-1.41z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-arrow-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M15.7 11.3L9.72 5.32a1 1 0 00-1.42 0 1 1 0 000 1.42L13.58 12 8.3 17.27a1 1 0 000 1.41 1 1 0 001.41 0l5.99-5.97a1 1 0 000-1.41z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-attention-solid: url("data:image/svg+xml,%3Csvg fill='%23ff8187' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5a1 1 0 012 0v5.5a1 1 0 11-2 0V7zm1 11a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/%3E%3C/svg%3E");
--flix-icon-calendar: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M19 5h-1V4a1 1 0 00-2 0v1H8V4a1 1 0 00-2 0v1H5a3 3 0 00-3 3v10a3 3 0 003 3h14a3 3 0 003-3V8a3 3 0 00-3-3zm1 13c0 .54-.46 1-1 1H5c-.54 0-1-.46-1-1v-7h16v7zM4 9V8c0-.54.46-1 1-1h14c.54 0 1 .46 1 1v1H4zm2 4.5a1 1 0 112 0 1 1 0 01-2 0zm5 0a1 1 0 112 0 1 1 0 01-2 0zm5 0a1 1 0 112 0 1 1 0 01-2 0zm-10 3a1 1 0 112 0 1 1 0 01-2 0zm5 0a1 1 0 112 0 1 1 0 01-2 0z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-checkbox-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21,11H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z' style='fill:%2373d700'/%3E%3C/svg%3E");
--flix-icon-checkmark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M21.7 6.2l-13 13a1 1 0 01-1.4 0l-5-5a1 1 0 111.4-1.4L8 17.08l12.3-12.3a1 1 0 111.4 1.42z' style='fill:%2373d700' /%3E%3C/svg%3E");
--flix-icon-checkmark-solid: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23a2e53f' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.89 7.7l-6 6a1 1 0 01-1.42 0l-2.36-2.35a1 1 0 111.42-1.41l1.65 1.65 5.3-5.3a1 1 0 111.4 1.42z'/%3E%3C/svg%3E");
--flix-icon-close: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M13.41 12l6.37-6.36a1 1 0 10-1.42-1.42L12 10.6 5.64 4.22a1 1 0 10-1.42 1.42L10.6 12l-6.37 6.36a1 1 0 101.42 1.42L12 13.4l6.36 6.37a1 1 0 101.42-1.42L13.4 12z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-close-inverted: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M13.41 12l6.37-6.36a1 1 0 10-1.42-1.42L12 10.6 5.64 4.22a1 1 0 10-1.42 1.42L10.6 12l-6.37 6.36a1 1 0 101.42 1.42L12 13.4l6.36 6.37a1 1 0 101.42-1.42L13.4 12z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-close-white: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M13.41 12l6.37-6.36a1 1 0 10-1.42-1.42L12 10.6 5.64 4.22a1 1 0 10-1.42 1.42L10.6 12l-6.37 6.36a1 1 0 101.42 1.42L12 13.4l6.36 6.37a1 1 0 101.42-1.42L13.4 12z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-danger: url("data:image/svg+xml,%3Csvg fill='%23ff8187' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm4.95-3.05a1 1 0 01-1.41 0L12 13.41l-3.54 3.54a1 1 0 11-1.41-1.41L10.59 12 7.05 8.46a1 1 0 111.41-1.41L12 10.59l3.54-3.54a1 1 0 111.41 1.41L13.41 12l3.54 3.54a1 1 0 010 1.41z'/%3E%3C/svg%3E");
--flix-icon-danger-solid: url("data:image/svg+xml,%3Csvg fill='%23ff8187' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' class='flix-icon crossed-solid'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.95 13.54a1 1 0 11-1.41 1.41L12 13.41l-3.54 3.54a1 1 0 11-1.41-1.41L10.59 12 7.05 8.46a1 1 0 111.41-1.41L12 10.59l3.54-3.54a1 1 0 111.41 1.41L13.41 12l3.54 3.54z'/%3E%3C/svg%3E");
--flix-icon-header-arrow-down: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M18.68 8.3a1 1 0 00-1.41 0l-5.28 5.28-5.26-5.27a1 1 0 00-1.4 0 1 1 0 000 1.41l5.96 5.99a1 1 0 001.41 0l5.98-6a1 1 0 000-1.42z' fill='%23ffffff' /%3E%3C/svg%3E");
--flix-icon-header-burger: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M2 5a1 1 0 011-1h18a1 1 0 010 2H3a1 1 0 01-1-1zm19 6H3a1 1 0 000 2h18a1 1 0 000-2zm0 7H3a1 1 0 000 2h18a1 1 0 000-2z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-info: url("data:image/svg+xml,%3Csvg fill='%236ae2e6' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm1-8.5V17a1 1 0 01-2 0v-5.5a1 1 0 112 0zm.5-4a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z'/%3E%3C/svg%3E");
--flix-icon-info-solid: url("data:image/svg+xml,%3Csvg fill='%236ae2e6' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15a1 1 0 01-2 0v-5.5a1 1 0 112 0V17zm-1-8a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/%3E%3C/svg%3E");
--flix-icon-minus: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M21 11H3a1 1 0 000 2h18a1 1 0 000-2z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-radio-checkmark: url("data:image/svg+xml,%3Csvg fill='%2373d700' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' class='flix-icon circle-solid'%3E%3Cpath d='M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z'/%3E%3C/svg%3E");
--flix-icon-plus: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M21 11h-8V3a1 1 0 00-2 0v8H3a1 1 0 000 2h8v8a1 1 0 002 0v-8h8a1 1 0 000-2z'/%3E%3C/svg%3E");
--flix-icon-success: url("data:image/svg+xml,%3Csvg fill='%23a2e53f' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M16.89 8.3a1 1 0 010 1.4l-6 6a1 1 0 01-1.42 0l-2.36-2.35a1 1 0 111.42-1.41l1.65 1.65 5.3-5.3a1 1 0 011.4 0zM22 12a10 10 0 11-20 0 10 10 0 0120 0zm-2 0a8 8 0 00-16 0 8 8 0 0016 0z'/%3E%3C/svg%3E");
--flix-icon-success-solid: url("data:image/svg+xml,%3Csvg fill='%23a2e53f' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.89 7.7l-6 6a1 1 0 01-1.42 0l-2.36-2.35a1 1 0 111.42-1.41l1.65 1.65 5.3-5.3a1 1 0 111.4 1.42z'/%3E%3C/svg%3E");
--flix-icon-time: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm3.2-6.2a1 1 0 11-1.4 1.4l-2.5-2.5a1 1 0 01-.3-.7V7a1 1 0 012 0v4.59l2.2 2.2z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-warning: url("data:image/svg+xml,%3Csvg fill='%23ffcb46' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm-1-7.5V7a1 1 0 012 0v5.5a1 1 0 11-2 0zm2.5 4a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z'/%3E%3C/svg%3E");
--flix-icon-warning-solid: url("data:image/svg+xml,%3Csvg fill='%23ffcb46' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5a1 1 0 012 0v5.5a1 1 0 11-2 0V7zm1 11a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/%3E%3C/svg%3E");
--flix-hover-layer-color: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12));
--flix-pressed-layer-color: linear-gradient(rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.24));
--flix-disabled-element-opacity: 0.5;
--flix-primary-border-radius: 6px;
--flix-primary-box-shadow: 0px 6px 12px rgba(0, 0, 0, .06), 0px 3px 18px rgba(0, 0, 0, .06), 0px 3px 6px rgba(0, 0, 0, .18);
--flix-font-family-primary: Roboto, Arial, sans-serif;
--flix-font-weight-normal: 400;
--flix-font-weight-semibold: 400;
--flix-font-weight-bold: 700;
--flix-primary-brand-color: #73d700;
--flix-secondary-brand-color: #ffad00;
--flix-primary-ui-color: #fff;
--flix-primary-ui-light-color: #fff;
--flix-primary-ui-dark-color: #000;
--flix-ui-primary-color: #fff;
--flix-ui-primary-light-color: #fff;
--flix-ui-primary-dark-color: #000;
--flix-grayscale-0-color: #000;
--flix-grayscale-10-color: #252525;
--flix-grayscale-30-color: #353535;
--flix-grayscale-50-color: #444;
--flix-grayscale-70-color: #fff;
--flix-grayscale-90-color: #fff;
--flix-grayscale-100-color: #fff;
--flix-neutral-color: #ccf7f7;
--flix-success-color: #e5f9c0;
--flix-success-dark-color: #e5f9c0;
--flix-warning-color: #ffefc5;
--flix-warning-dark-color: #ffefc5;
--flix-danger-color: #ffe3e6;
--flix-danger-dark-color: #ffe3e6;
--flix-primary-bg-color: #000;
--flix-primary-bg-transparent-color: rgba(0, 0, 0, 0.88);
--flix-secondary-bg-color: #000;
--flix-bg-primary-color: #000;
--flix-bg-primary-transparent-color: rgba(0, 0, 0, 0.88);
--flix-bg-secondary-color: #000;
--flix-box-bg-color: #000;
--flix-highlight-color: #252525;
--flix-overlay-bg-color: rgba(0, 0, 0, 0.5);
--flix-focus-outline-color: #ff0;
--flix-content-primary-color: #fff;
--flix-content-secondary-color: #fff;
--flix-heading-font-color: #fff;
--flix-link-color: #ff0;
--flix-primary-line-color: #fff;
--flix-primary-icon-color: #fff;
--flix-secondary-icon-color: #fff;
--flix-line-primary-color: #fff;
--flix-icon-primary-color: #fff;
--flix-icon-secondary-color: #fff;
--flix-box-shadow-color: rgba(255, 255, 255, 0.18);
--flix-box-shadow-subtle-color: rgba(255, 255, 255, 0.06);
--flix-button-primary-color: #fff;
--flix-button-secondary-color: #fff;
--flix-button-label-color: #000;
--flix-header-bg-color: #000;
--flix-header-color: #fff;
--flix-header-nav-bg-color-tablet: #000;
--flix-input-border-color: #fff;
--flix-input-height-mobile: 44px;
--flix-input-height-desktop: 36px;
--flix-input-border-radius: 6px;
--flix-spacing-1: 6px;
--flix-spacing-2: 12px;
--flix-spacing-3: 18px;
--flix-spacing-4: 24px;
--flix-spacing-5: 30px;
--flix-spacing-6: 36px;
--flix-spacing-7: 42px;
--flix-spacing-8: 48px;
--flix-spacing-9: 54px;
--flix-spacing-10: 60px;
--flix-spacing-11: 66px;
--flix-spacing-12: 72px;
--flix-spacing-half: 3px;
--flix-page-min-width: 320px;
--flix-page-max-width: 1200px;
--flix-font-size-primary: 1rem;
--flix-font-size-small: 0.9rem;
--flix-font-size-fineprint: 0.8rem;
--flix-font-size-h1: 1.7rem;
--flix-font-size-h2: 1.3rem;
--flix-font-size-h3: 1.1rem;
--flix-font-size-h4: 1rem;
--flix-font-size-button: 1rem;
--flix-line-height-primary: 1.5rem;
--flix-line-height-small: 1.1rem;
--flix-line-height-fineprint: 0.9rem;
--flix-line-height-h1: 2rem;
--flix-line-height-h2: 1.7rem;
--flix-line-height-h3: 1.5rem;
--flix-line-height-h4: 1.5rem;
--flix-icon-arrow-down: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M18.68 8.3a1 1 0 00-1.41 0l-5.28 5.28-5.26-5.27a1 1 0 00-1.4 0 1 1 0 000 1.41l5.96 5.99a1 1 0 001.41 0l5.98-6a1 1 0 000-1.42z' fill='%23ffffff' /%3E%3C/svg%3E");
--flix-icon-arrow-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M15.7 17.27l-5.28-5.28 5.27-5.26a1 1 0 000-1.41 1 1 0 00-1.41 0l-5.99 5.97a1 1 0 000 1.41l6 5.98a1 1 0 001.42 0 1 1 0 000-1.41z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-arrow-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M15.7 11.3L9.72 5.32a1 1 0 00-1.42 0 1 1 0 000 1.42L13.58 12 8.3 17.27a1 1 0 000 1.41 1 1 0 001.41 0l5.99-5.97a1 1 0 000-1.41z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-attention-solid: url("data:image/svg+xml,%3Csvg fill='%23ffe3e6' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5a1 1 0 012 0v5.5a1 1 0 11-2 0V7zm1 11a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/%3E%3C/svg%3E");
--flix-icon-calendar: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M19 5h-1V4a1 1 0 00-2 0v1H8V4a1 1 0 00-2 0v1H5a3 3 0 00-3 3v10a3 3 0 003 3h14a3 3 0 003-3V8a3 3 0 00-3-3zm1 13c0 .54-.46 1-1 1H5c-.54 0-1-.46-1-1v-7h16v7zM4 9V8c0-.54.46-1 1-1h14c.54 0 1 .46 1 1v1H4zm2 4.5a1 1 0 112 0 1 1 0 01-2 0zm5 0a1 1 0 112 0 1 1 0 01-2 0zm5 0a1 1 0 112 0 1 1 0 01-2 0zm-10 3a1 1 0 112 0 1 1 0 01-2 0zm5 0a1 1 0 112 0 1 1 0 01-2 0z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-checkbox-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21,11H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z' style='fill:%2373d700'/%3E%3C/svg%3E");
--flix-icon-checkmark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M21.7 6.2l-13 13a1 1 0 01-1.4 0l-5-5a1 1 0 111.4-1.4L8 17.08l12.3-12.3a1 1 0 111.4 1.42z' style='fill:%23fff' /%3E%3C/svg%3E");
--flix-icon-checkmark-solid: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23fff' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.89 7.7l-6 6a1 1 0 01-1.42 0l-2.36-2.35a1 1 0 111.42-1.41l1.65 1.65 5.3-5.3a1 1 0 111.4 1.42z'/%3E%3C/svg%3E");
--flix-icon-close: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M13.41 12l6.37-6.36a1 1 0 10-1.42-1.42L12 10.6 5.64 4.22a1 1 0 10-1.42 1.42L10.6 12l-6.37 6.36a1 1 0 101.42 1.42L12 13.4l6.36 6.37a1 1 0 101.42-1.42L13.4 12z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-close-inverted: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M13.41 12l6.37-6.36a1 1 0 10-1.42-1.42L12 10.6 5.64 4.22a1 1 0 10-1.42 1.42L10.6 12l-6.37 6.36a1 1 0 101.42 1.42L12 13.4l6.36 6.37a1 1 0 101.42-1.42L13.4 12z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-close-white: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M13.41 12l6.37-6.36a1 1 0 10-1.42-1.42L12 10.6 5.64 4.22a1 1 0 10-1.42 1.42L10.6 12l-6.37 6.36a1 1 0 101.42 1.42L12 13.4l6.36 6.37a1 1 0 101.42-1.42L13.4 12z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-danger: url("data:image/svg+xml,%3Csvg fill='%23ffe3e6' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm4.95-3.05a1 1 0 01-1.41 0L12 13.41l-3.54 3.54a1 1 0 11-1.41-1.41L10.59 12 7.05 8.46a1 1 0 111.41-1.41L12 10.59l3.54-3.54a1 1 0 111.41 1.41L13.41 12l3.54 3.54a1 1 0 010 1.41z'/%3E%3C/svg%3E");
--flix-icon-danger-solid: url("data:image/svg+xml,%3Csvg fill='%23ffe3e6' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' class='flix-icon crossed-solid'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.95 13.54a1 1 0 11-1.41 1.41L12 13.41l-3.54 3.54a1 1 0 11-1.41-1.41L10.59 12 7.05 8.46a1 1 0 111.41-1.41L12 10.59l3.54-3.54a1 1 0 111.41 1.41L13.41 12l3.54 3.54z'/%3E%3C/svg%3E");
--flix-icon-header-arrow-down: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M18.68 8.3a1 1 0 00-1.41 0l-5.28 5.28-5.26-5.27a1 1 0 00-1.4 0 1 1 0 000 1.41l5.96 5.99a1 1 0 001.41 0l5.98-6a1 1 0 000-1.42z' fill='%23ffffff' /%3E%3C/svg%3E");
--flix-icon-header-burger: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M2 5a1 1 0 011-1h18a1 1 0 010 2H3a1 1 0 01-1-1zm19 6H3a1 1 0 000 2h18a1 1 0 000-2zm0 7H3a1 1 0 000 2h18a1 1 0 000-2z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-info: url("data:image/svg+xml,%3Csvg fill='%23ccf7f7' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm1-8.5V17a1 1 0 01-2 0v-5.5a1 1 0 112 0zm.5-4a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z'/%3E%3C/svg%3E");
--flix-icon-info-solid: url("data:image/svg+xml,%3Csvg fill='%23ccf7f7' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15a1 1 0 01-2 0v-5.5a1 1 0 112 0V17zm-1-8a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/%3E%3C/svg%3E");
--flix-icon-minus: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M21 11H3a1 1 0 000 2h18a1 1 0 000-2z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-radio-checkmark: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' class='flix-icon circle-solid'%3E%3Cpath d='M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z'/%3E%3C/svg%3E");
--flix-icon-plus: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M21 11h-8V3a1 1 0 00-2 0v8H3a1 1 0 000 2h8v8a1 1 0 002 0v-8h8a1 1 0 000-2z'/%3E%3C/svg%3E");
--flix-icon-success: url("data:image/svg+xml,%3Csvg fill='%23e5f9c0' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M16.89 8.3a1 1 0 010 1.4l-6 6a1 1 0 01-1.42 0l-2.36-2.35a1 1 0 111.42-1.41l1.65 1.65 5.3-5.3a1 1 0 011.4 0zM22 12a10 10 0 11-20 0 10 10 0 0120 0zm-2 0a8 8 0 00-16 0 8 8 0 0016 0z'/%3E%3C/svg%3E");
--flix-icon-success-solid: url("data:image/svg+xml,%3Csvg fill='%23e5f9c0' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.89 7.7l-6 6a1 1 0 01-1.42 0l-2.36-2.35a1 1 0 111.42-1.41l1.65 1.65 5.3-5.3a1 1 0 111.4 1.42z'/%3E%3C/svg%3E");
--flix-icon-time: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm3.2-6.2a1 1 0 11-1.4 1.4l-2.5-2.5a1 1 0 01-.3-.7V7a1 1 0 012 0v4.59l2.2 2.2z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-warning: url("data:image/svg+xml,%3Csvg fill='%23ffefc5' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm-1-7.5V7a1 1 0 012 0v5.5a1 1 0 11-2 0zm2.5 4a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z'/%3E%3C/svg%3E");
--flix-icon-warning-solid: url("data:image/svg+xml,%3Csvg fill='%23ffefc5' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5a1 1 0 012 0v5.5a1 1 0 11-2 0V7zm1 11a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/%3E%3C/svg%3E");
--flix-hover-layer-color: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06));
--flix-pressed-layer-color: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12));
--flix-disabled-element-opacity: 0.5;
--flix-primary-border-radius: 6px;
--flix-primary-box-shadow: inset -2px -2px 0 #fff, inset 2px 2px 0 #fff;
--flix-font-family-primary: Roboto, Arial, sans-serif;
--flix-font-weight-normal: 400;
--flix-font-weight-semibold: 400;
--flix-font-weight-bold: 700;
--flix-primary-brand-color: #004B8D;
--flix-secondary-brand-color: #ffb300;
--flix-primary-ui-color: #082967;
--flix-primary-ui-light-color: #3eb5f1;
--flix-primary-ui-dark-color: #00003c;
--flix-ui-primary-color: #082967;
--flix-ui-primary-light-color: #3eb5f1;
--flix-ui-primary-dark-color: #00003c;
--flix-grayscale-0-color: #fff;
--flix-grayscale-10-color: #f7f7f7;
--flix-grayscale-30-color: #e1e1e1;
--flix-grayscale-50-color: #c8c8c8;
--flix-grayscale-70-color: #646464;
--flix-grayscale-90-color: #444;
--flix-grayscale-100-color: #353535;
--flix-neutral-color: #016ae7;
--flix-success-color: #228f00;
--flix-success-dark-color: #136b00;
--flix-warning-color: #ff5704;
--flix-warning-dark-color: #c42d00;
--flix-danger-color: #dd2828;
--flix-danger-dark-color: #b31414;
--flix-primary-bg-color: #fff;
--flix-primary-bg-transparent-color: rgba(255, 255, 255, 0.88);
--flix-secondary-bg-color: #f7f7f7;
--flix-bg-primary-color: #fff;
--flix-bg-primary-transparent-color: rgba(255, 255, 255, 0.88);
--flix-bg-secondary-color: #f7f7f7;
--flix-box-bg-color: #fff;
--flix-highlight-color: #deeaff;
--flix-overlay-bg-color: rgba(0, 0, 0, 0.5);
--flix-focus-outline-color: #016ae7;
--flix-content-primary-color: #353535;
--flix-content-secondary-color: #646464;
--flix-heading-font-color: #353535;
--flix-link-color: #0047de;
--flix-primary-line-color: #c8c8c8;
--flix-primary-icon-color: #8b8b8b;
--flix-secondary-icon-color: #082967;
--flix-line-primary-color: #c8c8c8;
--flix-icon-primary-color: #8b8b8b;
--flix-icon-secondary-color: #082967;
--flix-box-shadow-color: rgba(0, 0, 0, 0.18);
--flix-box-shadow-subtle-color: rgba(0, 0, 0, 0.06);
--flix-button-primary-color: #d0460a;
--flix-button-secondary-color: #082967;
--flix-button-label-color: #fff;
--flix-header-bg-color: #082967;
--flix-header-color: #fff;
--flix-header-nav-bg-color-tablet: #00003c;
--flix-input-border-color: #8b8b8b;
--flix-input-height-mobile: 44px;
--flix-input-height-desktop: 36px;
--flix-input-border-radius: 6px;
--flix-spacing-1: 6px;
--flix-spacing-2: 12px;
--flix-spacing-3: 18px;
--flix-spacing-4: 24px;
--flix-spacing-5: 30px;
--flix-spacing-6: 36px;
--flix-spacing-7: 42px;
--flix-spacing-8: 48px;
--flix-spacing-9: 54px;
--flix-spacing-10: 60px;
--flix-spacing-11: 66px;
--flix-spacing-12: 72px;
--flix-spacing-half: 3px;
--flix-page-min-width: 320px;
--flix-page-max-width: 1200px;
--flix-font-size-primary: 1rem;
--flix-font-size-small: 0.9rem;
--flix-font-size-fineprint: 0.8rem;
--flix-font-size-h1: 1.7rem;
--flix-font-size-h2: 1.3rem;
--flix-font-size-h3: 1.1rem;
--flix-font-size-h4: 1rem;
--flix-font-size-button: 1rem;
--flix-line-height-primary: 1.5rem;
--flix-line-height-small: 1.1rem;
--flix-line-height-fineprint: 0.9rem;
--flix-line-height-h1: 2rem;
--flix-line-height-h2: 1.7rem;
--flix-line-height-h3: 1.5rem;
--flix-line-height-h4: 1.5rem;
--flix-icon-arrow-down: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M18.68 8.3a1 1 0 00-1.41 0l-5.28 5.28-5.26-5.27a1 1 0 00-1.4 0 1 1 0 000 1.41l5.96 5.99a1 1 0 001.41 0l5.98-6a1 1 0 000-1.42z' fill='%238b8b8b' /%3E%3C/svg%3E");
--flix-icon-arrow-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M15.7 17.27l-5.28-5.28 5.27-5.26a1 1 0 000-1.41 1 1 0 00-1.41 0l-5.99 5.97a1 1 0 000 1.41l6 5.98a1 1 0 001.42 0 1 1 0 000-1.41z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-arrow-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M15.7 11.3L9.72 5.32a1 1 0 00-1.42 0 1 1 0 000 1.42L13.58 12 8.3 17.27a1 1 0 000 1.41 1 1 0 001.41 0l5.99-5.97a1 1 0 000-1.41z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-attention-solid: url("data:image/svg+xml,%3Csvg fill='%23dd2828' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5a1 1 0 012 0v5.5a1 1 0 11-2 0V7zm1 11a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/%3E%3C/svg%3E");
--flix-icon-calendar: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M19 5h-1V4a1 1 0 00-2 0v1H8V4a1 1 0 00-2 0v1H5a3 3 0 00-3 3v10a3 3 0 003 3h14a3 3 0 003-3V8a3 3 0 00-3-3zm1 13c0 .54-.46 1-1 1H5c-.54 0-1-.46-1-1v-7h16v7zM4 9V8c0-.54.46-1 1-1h14c.54 0 1 .46 1 1v1H4zm2 4.5a1 1 0 112 0 1 1 0 01-2 0zm5 0a1 1 0 112 0 1 1 0 01-2 0zm5 0a1 1 0 112 0 1 1 0 01-2 0zm-10 3a1 1 0 112 0 1 1 0 01-2 0zm5 0a1 1 0 112 0 1 1 0 01-2 0z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-checkbox-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21,11H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z' style='fill:%23082967'/%3E%3C/svg%3E");
--flix-icon-checkmark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M21.7 6.2l-13 13a1 1 0 01-1.4 0l-5-5a1 1 0 111.4-1.4L8 17.08l12.3-12.3a1 1 0 111.4 1.42z' style='fill:%23082967' /%3E%3C/svg%3E");
--flix-icon-checkmark-solid: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23228f00' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.89 7.7l-6 6a1 1 0 01-1.42 0l-2.36-2.35a1 1 0 111.42-1.41l1.65 1.65 5.3-5.3a1 1 0 111.4 1.42z'/%3E%3C/svg%3E");
--flix-icon-close: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M13.41 12l6.37-6.36a1 1 0 10-1.42-1.42L12 10.6 5.64 4.22a1 1 0 10-1.42 1.42L10.6 12l-6.37 6.36a1 1 0 101.42 1.42L12 13.4l6.36 6.37a1 1 0 101.42-1.42L13.4 12z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-close-inverted: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M13.41 12l6.37-6.36a1 1 0 10-1.42-1.42L12 10.6 5.64 4.22a1 1 0 10-1.42 1.42L10.6 12l-6.37 6.36a1 1 0 101.42 1.42L12 13.4l6.36 6.37a1 1 0 101.42-1.42L13.4 12z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-close-white: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M13.41 12l6.37-6.36a1 1 0 10-1.42-1.42L12 10.6 5.64 4.22a1 1 0 10-1.42 1.42L10.6 12l-6.37 6.36a1 1 0 101.42 1.42L12 13.4l6.36 6.37a1 1 0 101.42-1.42L13.4 12z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-danger: url("data:image/svg+xml,%3Csvg fill='%23dd2828' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm4.95-3.05a1 1 0 01-1.41 0L12 13.41l-3.54 3.54a1 1 0 11-1.41-1.41L10.59 12 7.05 8.46a1 1 0 111.41-1.41L12 10.59l3.54-3.54a1 1 0 111.41 1.41L13.41 12l3.54 3.54a1 1 0 010 1.41z'/%3E%3C/svg%3E");
--flix-icon-danger-solid: url("data:image/svg+xml,%3Csvg fill='%23dd2828' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' class='flix-icon crossed-solid'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.95 13.54a1 1 0 11-1.41 1.41L12 13.41l-3.54 3.54a1 1 0 11-1.41-1.41L10.59 12 7.05 8.46a1 1 0 111.41-1.41L12 10.59l3.54-3.54a1 1 0 111.41 1.41L13.41 12l3.54 3.54z'/%3E%3C/svg%3E");
--flix-icon-header-arrow-down: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M18.68 8.3a1 1 0 00-1.41 0l-5.28 5.28-5.26-5.27a1 1 0 00-1.4 0 1 1 0 000 1.41l5.96 5.99a1 1 0 001.41 0l5.98-6a1 1 0 000-1.42z' fill='%23ffffff' /%3E%3C/svg%3E");
--flix-icon-header-burger: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M2 5a1 1 0 011-1h18a1 1 0 010 2H3a1 1 0 01-1-1zm19 6H3a1 1 0 000 2h18a1 1 0 000-2zm0 7H3a1 1 0 000 2h18a1 1 0 000-2z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-info: url("data:image/svg+xml,%3Csvg fill='%23016ae7' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm1-8.5V17a1 1 0 01-2 0v-5.5a1 1 0 112 0zm.5-4a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z'/%3E%3C/svg%3E");
--flix-icon-info-solid: url("data:image/svg+xml,%3Csvg fill='%23016ae7' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15a1 1 0 01-2 0v-5.5a1 1 0 112 0V17zm-1-8a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/%3E%3C/svg%3E");
--flix-icon-minus: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M21 11H3a1 1 0 000 2h18a1 1 0 000-2z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-radio-checkmark: url("data:image/svg+xml,%3Csvg fill='%23082967' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' class='flix-icon circle-solid'%3E%3Cpath d='M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z'/%3E%3C/svg%3E");
--flix-icon-plus: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%238b8b8b' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M21 11h-8V3a1 1 0 00-2 0v8H3a1 1 0 000 2h8v8a1 1 0 002 0v-8h8a1 1 0 000-2z'/%3E%3C/svg%3E");
--flix-icon-success: url("data:image/svg+xml,%3Csvg fill='%23228f00' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M16.89 8.3a1 1 0 010 1.4l-6 6a1 1 0 01-1.42 0l-2.36-2.35a1 1 0 111.42-1.41l1.65 1.65 5.3-5.3a1 1 0 011.4 0zM22 12a10 10 0 11-20 0 10 10 0 0120 0zm-2 0a8 8 0 00-16 0 8 8 0 0016 0z'/%3E%3C/svg%3E");
--flix-icon-success-solid: url("data:image/svg+xml,%3Csvg fill='%23228f00' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.89 7.7l-6 6a1 1 0 01-1.42 0l-2.36-2.35a1 1 0 111.42-1.41l1.65 1.65 5.3-5.3a1 1 0 111.4 1.42z'/%3E%3C/svg%3E");
--flix-icon-time: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm3.2-6.2a1 1 0 11-1.4 1.4l-2.5-2.5a1 1 0 01-.3-.7V7a1 1 0 012 0v4.59l2.2 2.2z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-warning: url("data:image/svg+xml,%3Csvg fill='%23ff5704' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm-1-7.5V7a1 1 0 012 0v5.5a1 1 0 11-2 0zm2.5 4a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z'/%3E%3C/svg%3E");
--flix-icon-warning-solid: url("data:image/svg+xml,%3Csvg fill='%23ff5704' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5a1 1 0 012 0v5.5a1 1 0 11-2 0V7zm1 11a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/%3E%3C/svg%3E");
--flix-hover-layer-color: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06));
--flix-pressed-layer-color: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12));
--flix-disabled-element-opacity: 0.5;
--flix-primary-border-radius: 6px;
--flix-primary-box-shadow: 0px 6px 12px rgba(0, 0, 0, .06), 0px 3px 18px rgba(0, 0, 0, .06), 0px 3px 6px rgba(0, 0, 0, .18);
--flix-font-family-primary: Roboto, Arial, sans-serif;
--flix-font-weight-normal: 400;
--flix-font-weight-semibold: 400;
--flix-font-weight-bold: 700;
--flix-primary-brand-color: #004963;
--flix-secondary-brand-color: #f57812;
--flix-primary-ui-color: #004963;
--flix-primary-ui-light-color: #00759c;
--flix-primary-ui-dark-color: #003547;
--flix-ui-primary-color: #004963;
--flix-ui-primary-light-color: #00759c;
--flix-ui-primary-dark-color: #003547;
--flix-grayscale-0-color: #fff;
--flix-grayscale-10-color: #f7f7f7;
--flix-grayscale-30-color: #e1e1e1;
--flix-grayscale-50-color: #c8c8c8;
--flix-grayscale-70-color: #646464;
--flix-grayscale-90-color: #444;
--flix-grayscale-100-color: #353535;
--flix-neutral-color: #016ae7;
--flix-success-color: #228f00;
--flix-success-dark-color: #136b00;
--flix-warning-color: #ff5704;
--flix-warning-dark-color: #c42d00;
--flix-danger-color: #dd2828;
--flix-danger-dark-color: #b31414;
--flix-primary-bg-color: #fff;
--flix-primary-bg-transparent-color: rgba(255, 255, 255, 0.88);
--flix-secondary-bg-color: #f7f7f7;
--flix-bg-primary-color: #fff;
--flix-bg-primary-transparent-color: rgba(255, 255, 255, 0.88);
--flix-bg-secondary-color: #f7f7f7;
--flix-box-bg-color: #fff;
--flix-highlight-color: #d4ecf5;
--flix-overlay-bg-color: rgba(0, 0, 0, 0.5);
--flix-focus-outline-color: #016ae7;
--flix-content-primary-color: #353535;
--flix-content-secondary-color: #646464;
--flix-heading-font-color: #004963;
--flix-link-color: #bd5604;
--flix-primary-line-color: #c8c8c8;
--flix-primary-icon-color: #8b8b8b;
--flix-secondary-icon-color: #ef782c;
--flix-line-primary-color: #c8c8c8;
--flix-icon-primary-color: #8b8b8b;
--flix-icon-secondary-color: #ef782c;
--flix-box-shadow-color: rgba(0, 0, 0, 0.18);
--flix-box-shadow-subtle-color: rgba(0, 0, 0, 0.06);
--flix-button-primary-color: #bd5604;
--flix-button-secondary-color: #004963;
--flix-button-label-color: #fff;
--flix-header-bg-color: #004963;
--flix-header-color: #fff;
--flix-header-nav-bg-color-tablet: #003547;
--flix-input-border-color: #8b8b8b;
--flix-input-height-mobile: 44px;
--flix-input-height-desktop: 36px;
--flix-input-border-radius: 6px;
--flix-spacing-1: 6px;
--flix-spacing-2: 12px;
--flix-spacing-3: 18px;
--flix-spacing-4: 24px;
--flix-spacing-5: 30px;
--flix-spacing-6: 36px;
--flix-spacing-7: 42px;
--flix-spacing-8: 48px;
--flix-spacing-9: 54px;
--flix-spacing-10: 60px;
--flix-spacing-11: 66px;
--flix-spacing-12: 72px;
--flix-spacing-half: 3px;
--flix-page-min-width: 320px;
--flix-page-max-width: 1200px;
--flix-font-size-primary: 1rem;
--flix-font-size-small: 0.9rem;
--flix-font-size-fineprint: 0.8rem;
--flix-font-size-h1: 1.7rem;
--flix-font-size-h2: 1.3rem;
--flix-font-size-h3: 1.1rem;
--flix-font-size-h4: 1rem;
--flix-font-size-button: 1rem;
--flix-line-height-primary: 1.5rem;
--flix-line-height-small: 1.1rem;
--flix-line-height-fineprint: 0.9rem;
--flix-line-height-h1: 2rem;
--flix-line-height-h2: 1.7rem;
--flix-line-height-h3: 1.5rem;
--flix-line-height-h4: 1.5rem;
--flix-icon-arrow-down: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M18.68 8.3a1 1 0 00-1.41 0l-5.28 5.28-5.26-5.27a1 1 0 00-1.4 0 1 1 0 000 1.41l5.96 5.99a1 1 0 001.41 0l5.98-6a1 1 0 000-1.42z' fill='%238b8b8b' /%3E%3C/svg%3E");
--flix-icon-arrow-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M15.7 17.27l-5.28-5.28 5.27-5.26a1 1 0 000-1.41 1 1 0 00-1.41 0l-5.99 5.97a1 1 0 000 1.41l6 5.98a1 1 0 001.42 0 1 1 0 000-1.41z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-arrow-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M15.7 11.3L9.72 5.32a1 1 0 00-1.42 0 1 1 0 000 1.42L13.58 12 8.3 17.27a1 1 0 000 1.41 1 1 0 001.41 0l5.99-5.97a1 1 0 000-1.41z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-attention-solid: url("data:image/svg+xml,%3Csvg fill='%23dd2828' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5a1 1 0 012 0v5.5a1 1 0 11-2 0V7zm1 11a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/%3E%3C/svg%3E");
--flix-icon-calendar: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M19 5h-1V4a1 1 0 00-2 0v1H8V4a1 1 0 00-2 0v1H5a3 3 0 00-3 3v10a3 3 0 003 3h14a3 3 0 003-3V8a3 3 0 00-3-3zm1 13c0 .54-.46 1-1 1H5c-.54 0-1-.46-1-1v-7h16v7zM4 9V8c0-.54.46-1 1-1h14c.54 0 1 .46 1 1v1H4zm2 4.5a1 1 0 112 0 1 1 0 01-2 0zm5 0a1 1 0 112 0 1 1 0 01-2 0zm5 0a1 1 0 112 0 1 1 0 01-2 0zm-10 3a1 1 0 112 0 1 1 0 01-2 0zm5 0a1 1 0 112 0 1 1 0 01-2 0z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-checkbox-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21,11H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z' fill='%23004963'/%3E%3C/svg%3E");
--flix-icon-checkmark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M21.7 6.2l-13 13a1 1 0 01-1.4 0l-5-5a1 1 0 111.4-1.4L8 17.08l12.3-12.3a1 1 0 111.4 1.42z' style='fill:%23004963' /%3E%3C/svg%3E");
--flix-icon-checkmark-solid: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23228f00' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.89 7.7l-6 6a1 1 0 01-1.42 0l-2.36-2.35a1 1 0 111.42-1.41l1.65 1.65 5.3-5.3a1 1 0 111.4 1.42z'/%3E%3C/svg%3E");
--flix-icon-close: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M13.41 12l6.37-6.36a1 1 0 10-1.42-1.42L12 10.6 5.64 4.22a1 1 0 10-1.42 1.42L10.6 12l-6.37 6.36a1 1 0 101.42 1.42L12 13.4l6.36 6.37a1 1 0 101.42-1.42L13.4 12z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-close-inverted: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M13.41 12l6.37-6.36a1 1 0 10-1.42-1.42L12 10.6 5.64 4.22a1 1 0 10-1.42 1.42L10.6 12l-6.37 6.36a1 1 0 101.42 1.42L12 13.4l6.36 6.37a1 1 0 101.42-1.42L13.4 12z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-close-white: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M13.41 12l6.37-6.36a1 1 0 10-1.42-1.42L12 10.6 5.64 4.22a1 1 0 10-1.42 1.42L10.6 12l-6.37 6.36a1 1 0 101.42 1.42L12 13.4l6.36 6.37a1 1 0 101.42-1.42L13.4 12z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-danger: url("data:image/svg+xml,%3Csvg fill='%23dd2828' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm4.95-3.05a1 1 0 01-1.41 0L12 13.41l-3.54 3.54a1 1 0 11-1.41-1.41L10.59 12 7.05 8.46a1 1 0 111.41-1.41L12 10.59l3.54-3.54a1 1 0 111.41 1.41L13.41 12l3.54 3.54a1 1 0 010 1.41z'/%3E%3C/svg%3E");
--flix-icon-danger-solid: url("data:image/svg+xml,%3Csvg fill='%23dd2828' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' class='flix-icon crossed-solid'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.95 13.54a1 1 0 11-1.41 1.41L12 13.41l-3.54 3.54a1 1 0 11-1.41-1.41L10.59 12 7.05 8.46a1 1 0 111.41-1.41L12 10.59l3.54-3.54a1 1 0 111.41 1.41L13.41 12l3.54 3.54z'/%3E%3C/svg%3E");
--flix-icon-header-arrow-down: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M18.68 8.3a1 1 0 00-1.41 0l-5.28 5.28-5.26-5.27a1 1 0 00-1.4 0 1 1 0 000 1.41l5.96 5.99a1 1 0 001.41 0l5.98-6a1 1 0 000-1.42z' fill='%23ffffff' /%3E%3C/svg%3E");
--flix-icon-header-burger: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M2 5a1 1 0 011-1h18a1 1 0 010 2H3a1 1 0 01-1-1zm19 6H3a1 1 0 000 2h18a1 1 0 000-2zm0 7H3a1 1 0 000 2h18a1 1 0 000-2z' fill='%23ffffff'/%3E%3C/svg%3E");
--flix-icon-info: url("data:image/svg+xml,%3Csvg fill='%23016ae7' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm1-8.5V17a1 1 0 01-2 0v-5.5a1 1 0 112 0zm.5-4a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z'/%3E%3C/svg%3E");
--flix-icon-info-solid: url("data:image/svg+xml,%3Csvg fill='%23016ae7' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15a1 1 0 01-2 0v-5.5a1 1 0 112 0V17zm-1-8a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/%3E%3C/svg%3E");
--flix-icon-minus: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M21 11H3a1 1 0 000 2h18a1 1 0 000-2z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-radio-checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M500 83.3A416.7 416.7 0 1 0 916.7 500 416.7 416.7 0 0 0 500 83.3Z' fill='%23004963'/%3E%3C/svg%3E");
--flix-icon-plus: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%238b8b8b' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M21 11h-8V3a1 1 0 00-2 0v8H3a1 1 0 000 2h8v8a1 1 0 002 0v-8h8a1 1 0 000-2z'/%3E%3C/svg%3E");
--flix-icon-success: url("data:image/svg+xml,%3Csvg fill='%23228f00' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M16.89 8.3a1 1 0 010 1.4l-6 6a1 1 0 01-1.42 0l-2.36-2.35a1 1 0 111.42-1.41l1.65 1.65 5.3-5.3a1 1 0 011.4 0zM22 12a10 10 0 11-20 0 10 10 0 0120 0zm-2 0a8 8 0 00-16 0 8 8 0 0016 0z'/%3E%3C/svg%3E");
--flix-icon-success-solid: url("data:image/svg+xml,%3Csvg fill='%23228f00' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.89 7.7l-6 6a1 1 0 01-1.42 0l-2.36-2.35a1 1 0 111.42-1.41l1.65 1.65 5.3-5.3a1 1 0 111.4 1.42z'/%3E%3C/svg%3E");
--flix-icon-time: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm3.2-6.2a1 1 0 11-1.4 1.4l-2.5-2.5a1 1 0 01-.3-.7V7a1 1 0 012 0v4.59l2.2 2.2z' fill='%238b8b8b'/%3E%3C/svg%3E");
--flix-icon-warning: url("data:image/svg+xml,%3Csvg fill='%23ff5704' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 010-16 8 8 0 010 16zm-1-7.5V7a1 1 0 012 0v5.5a1 1 0 11-2 0zm2.5 4a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z'/%3E%3C/svg%3E");
--flix-icon-warning-solid: url("data:image/svg+xml,%3Csvg fill='%23ff5704' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5a1 1 0 012 0v5.5a1 1 0 11-2 0V7zm1 11a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/%3E%3C/svg%3E");
--flix-hover-layer-color: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06));
--flix-pressed-layer-color: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12));
--flix-disabled-element-opacity: 0.5;
--flix-primary-border-radius: 6px;
--flix-primary-box-shadow: 0px 6px 12px rgba(0, 0, 0, .06), 0px 3px 18px rgba(0, 0, 0, .06), 0px 3px 6px rgba(0, 0, 0, .18);
--flix-font-family-primary: Roboto, Arial, sans-serif;
--flix-font-weight-normal: 400;
--flix-font-weight-semibold: 400;
--flix-font-weight-bold: 700;
