@charset "UTF-8";
.row--narrow,
.row--narrow > [class*=col-],
.row--narrow > .col,
.row--narrow > [class^=col] {
--hl-grid-spacer: 0.5rem; }
:root {
--blue: var(--hl-color-supporting-blue);
--blue-light: var(--hl-color-supporting-blue-light);
--blue-dark: var(--hl-color-supporting-blue-dark);
--purple: var(--hl-color-supporting-purple);
--purple-light: var(--hl-color-supporting-purple-light);
--purple-dark: var(--hl-color-supporting-purple-dark);
--pink: var(--hl-color-supporting-pink);
--pink-light: var(--hl-color-supporting-pink-light);
--pink-dark: var(--hl-color-supporting-pink-dark);
--orange: #FF7900;
--yellow: var(--hl-color-supporting-yellow);
--yellow-light: var(--hl-color-supporting-yellow-light);
--yellow-dark: var(--hl-color-supporting-yellow-dark);
--green: var(--hl-color-supporting-green);
--green-light: var(--hl-color-supporting-green-light);
--green-dark: var(--hl-color-supporting-green-dark);
--white: var(--hl-color-core-white);
--gray: #999999;
--gray-dark: #333333;
--red: var(--hl-color-functional-danger);
--primary: var(--hl-color-primary);
--secondary: var(--hl-color-secondary);
--success: var(--hl-color-functional-success);
--info: var(--hl-color-functional-info);
--warning: var(--hl-color-functional-warning);
--danger: var(--hl-color-functional-danger);
--black: var(--hl-color-core-black);
--white: var(--hl-color-core-white);
--obs: #595959;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1400px;
--breakpoint-xxxl: 1880px;
--hl-factor-grid-gutter-width: 1.5;
--hl-inset-outline-focus: 30px; }
@media (min-width: 992px) {
:root {
--hl-factor-grid-gutter-width: 3; } }
:root,
.bg-light {
--hl-spacer-none: 0;
--hl-spacer-3xs: 0.125rem;
--hl-spacer-2xs: 0.25rem;
--hl-spacer-xs: 0.5rem;
--hl-spacer-sm: 0.75rem;
--hl-spacer-md: 1rem;
--hl-spacer-lg: 1.5rem;
--hl-spacer-xl: 2rem;
--hl-spacer-2xl: 2.5rem;
--hl-spacer-3xl: 3rem;
--hl-spacer-4xl: 4rem;
--hl-spacer-5xl: 5rem;
--hl-spacer-6xl: 6rem;
--hl-spacer-7xl: 10rem;
--hl-spacing-section: 2.5rem;
--hl-spacing-module: 2rem;
--hl-spacing-submodule: 1.5rem;
--hl-spacing-grid: 1rem;
--hl-spacing-atom: 0.5rem;
--hl-spacing-subatom: 0.25rem;
--hl-spacing-border: 0.125rem;
--hl-size-box-shadow-soft-sm: 0.25rem;
--hl-size-box-shadow-soft-md: 0.75rem;
--hl-size-box-shadow-soft-lg: 1.5rem;
--hl-size-box-shadow-hard-sm: 0.125rem;
--hl-size-box-shadow-hard-md: 0.25rem;
--hl-size-box-shadow-hard-lg: 0.5rem;
--hl-size-icon-xs: 0.75rem;
--hl-size-icon-sm: 1rem;
--hl-size-icon-md: 1.5rem;
--hl-size-icon-lg: 2rem;
--hl-size-icon-xl: 2.5rem;
--hl-size-icon-2xl: 3rem;
--hl-size-gap: 0.5rem;
--hl-border-radius-none: 0;
--hl-border-radius-sm: 0.25rem;
--hl-border-radius-md: 0.5rem;
--hl-border-radius-lg: 1rem;
--hl-border-radius-full: 100000px;
--hl-border-radius-default: 0;
--hl-border-width-none: 0;
--hl-border-width-xs: 1px;
--hl-border-width-sm: 2px;
--hl-border-width-md: 4px;
--hl-border-width-lg: 8px;
--hl-border-width-default: 2px;
--hl-color-core-black: #000;
--hl-color-core-white: #ffffff;
--hl-color-brand-1: #FF7900;
--hl-color-brand-2: #000;
--hl-color-brand-3: #595959;
--hl-color-primary: #FF7900;
--hl-color-secondary: #000;
--hl-color-tertiary: #595959;
--hl-color-functional-success: #38C738;
--hl-color-functional-info: #5A83DD;
--hl-color-functional-warning: #FFCC00;
--hl-color-functional-danger: #CC3C14;
--hl-color-fg-light-default: rgba(0, 0, 0, 0.8);
--hl-color-fg-light-important: #000;
--hl-color-fg-light-disabled: rgba(0, 0, 0, 0.4);
--hl-color-fg-light-muted: rgba(0, 0, 0, 0.6);
--hl-color-fg-light-very-muted: rgba(0, 0, 0, 0.2);
--hl-color-fg-light-ultra-muted: rgba(0, 0, 0, 0.07);
--hl-color-fg-light-accent: #F16E00;
--hl-color-fg-light-heading: #000;
--hl-color-fg-light-primary: #F16E00;
--hl-color-fg-light-secondary: #000;
--hl-color-fg-light-tertiary: #4d4d4d;
--hl-color-fg-light-danger: #b13411;
--hl-color-fg-light-info: #4e72c0;
--hl-color-fg-light-warning: #deb100;
--hl-color-fg-light-success: #227722;
--hl-color-fg-light-interaction-standby: #000;
--hl-color-fg-light-interaction-hover: #c15800;
--hl-color-fg-light-interaction-focus: #c15800;
--hl-color-fg-light-interaction-pressed: #602c00;
--hl-color-fg-light-interaction-active: #F16E00;
--hl-color-fg-light-interaction-active-accesible: #F16E00;
--hl-color-fg-dark-default: rgba(255, 255, 255, 0.96);
--hl-color-fg-dark-important: #ffffff;
--hl-color-fg-dark-disabled: rgba(255, 255, 255, 0.6);
--hl-color-fg-dark-muted: rgba(255, 255, 255, 0.6);
--hl-color-fg-dark-very-muted: rgba(255, 255, 255, 0.4);
--hl-color-fg-dark-ultra-muted: rgba(255, 255, 255, 0.2);
--hl-color-fg-dark-accent: #FF7900;
--hl-color-fg-dark-heading: #ffffff;
--hl-color-fg-dark-primary: #FF7900;
--hl-color-fg-dark-secondary: #000;
--hl-color-fg-dark-tertiary: #4d4d4d;
--hl-color-fg-dark-danger: #b13411;
--hl-color-fg-dark-info: #4e72c0;
--hl-color-fg-dark-warning: #deb100;
--hl-color-fg-dark-success: #31ad31;
--hl-color-fg-dark-interaction-standby: #ffffff;
--hl-color-fg-dark-interaction-hover: #ff9433;
--hl-color-fg-dark-interaction-focus: #ff9433;
--hl-color-fg-dark-interaction-pressed: #ffe4cc;
--hl-color-fg-dark-interaction-active: #FF7900;
--hl-color-fg-dark-interaction-active-accesible: #FF7900;
--hl-color-bg-light-default: #ffffff;
--hl-color-bg-light-primary: #FF7900;
--hl-color-bg-light-secondary: #000;
--hl-color-bg-light-tertiary: #595959;
--hl-color-bg-light-muted: #dedede;
--hl-color-bg-light-very-muted: #ededed;
--hl-color-bg-light-ultra-muted: whitesmoke;
--hl-color-bg-light-disabled: #ededed;
--hl-color-bg-light-alpha: rgba(0, 0, 0, 0.13);
--hl-color-bg-dark-default: #000;
--hl-color-bg-dark-primary: #FF7900;
--hl-color-bg-dark-secondary: #000;
--hl-color-bg-dark-tertiary: #595959;
--hl-color-bg-dark-muted: #666666;
--hl-color-bg-dark-very-muted: #333333;
--hl-color-bg-dark-ultra-muted: #1a1a1a;
--hl-color-bg-dark-disabled: #666666;
--hl-color-bg-dark-alpha: rgba(255, 255, 255, 0.2);
--hl-color-border-light-default: rgba(0, 0, 0, 0.13);
--hl-color-border-light-muted: rgba(0, 0, 0, 0.07);
--hl-color-border-light-very-muted: rgba(0, 0, 0, 0.04);
--hl-color-border-light-ultra-muted: rgba(0, 0, 0, 0.02);
--hl-color-border-light-interaction-standby: rgba(0, 0, 0, 0.13);
--hl-color-border-light-interaction-hover: rgba(0, 0, 0, 0.4);
--hl-color-border-light-interaction-focus: rgba(0, 0, 0, 0.4);
--hl-color-border-light-interaction-pressed: rgba(0, 0, 0, 0.6);
--hl-color-border-light-interaction-active: #F16E00;
--hl-color-border-light-primary: #FF7900;
--hl-color-border-light-secondary: #000;
--hl-color-border-light-form: rgba(0, 0, 0, 0.13);
--hl-color-border-light-info: #5A83DD;
--hl-color-border-light-success: #38C738;
--hl-color-border-light-warning: #FFCC00;
--hl-color-border-light-danger: #CC3C14;
--hl-color-border-dark-default: rgba(255, 255, 255, 0.4);
--hl-color-border-dark-muted: rgba(255, 255, 255, 0.4);
--hl-color-border-dark-very-muted: rgba(255, 255, 255, 0.2);
--hl-color-border-dark-ultra-muted: rgba(255, 255, 255, 0.1);
--hl-color-border-dark-interaction-standby: rgba(255, 255, 255, 0.4);
--hl-color-border-dark-interaction-hover: rgba(255, 255, 255, 0.6);
--hl-color-border-dark-interaction-focus: rgba(255, 255, 255, 0.6);
--hl-color-border-dark-interaction-pressed: rgba(255, 255, 255, 0.87);
--hl-color-border-dark-interaction-active: #FF7900;
--hl-color-border-dark-primary: #FF7900;
--hl-color-border-dark-secondary: #ffffff;
--hl-color-border-dark-form: rgba(255, 255, 255, 0.4);
--hl-color-border-dark-info: #5A83DD;
--hl-color-border-dark-success: #38C738;
--hl-color-border-dark-warning: #FFCC00;
--hl-color-border-dark-danger: #CC3C14;
--hl-color-box-shadow-default: rgba(0, 0, 0, 0.2);
--hl-color-box-shadow-hover: rgba(0, 0, 0, 0.2);
--hl-color-box-shadow-active: rgba(0, 0, 0, 0.6);
--hl-color-box-shadow-light-default: rgba(0, 0, 0, 0.2);
--hl-color-box-shadow-light-hover: rgba(0, 0, 0, 0.2);
--hl-color-box-shadow-light-active: rgba(0, 0, 0, 0.6);
--hl-color-box-shadow-dark-default: rgba(0, 0, 0, 0.2);
--hl-color-box-shadow-dark-hover: rgba(0, 0, 0, 0.2);
--hl-color-box-shadow-dark-active: rgba(0, 0, 0, 0.6);
--hl-color-button-bg-light-disabled: #666666;
--hl-color-button-border-light-disabled: #666666;
--hl-color-button-fg-light-disabled: #ededed;
--hl-color-button-bg-dark-disabled: #ededed;
--hl-color-button-border-dark-disabled: #ededed;
--hl-color-button-fg-dark-disabled: #666666;
--hl-color-button-bg-light-disabled-transparent: transparent;
--hl-color-button-bg-dark-disabled-transparent: transparent;
--hl-color-icon: currentColor;
--hl-color-form-fg-light-disabled: rgba(0, 0, 0, 0.4);
--hl-color-form-bg-light-disabled: rgba(0, 0, 0, 0.04);
--hl-color-form-border-light-disabled: rgba(0, 0, 0, 0.13);
--hl-color-form-fg-dark-disabled: rgba(255, 255, 255, 0.6);
--hl-color-form-bg-dark-disabled: rgba(255, 255, 255, 0.2);
--hl-color-form-border-dark-disabled: rgba(255, 255, 255, 0.4);
--hl-color-form-interaction-bg-light-hover: #c15800;
--hl-color-form-interaction-bg-light-focus: #c15800;
--hl-color-form-interaction-bg-light-pressed: #602c00;
--hl-color-form-interaction-bg-light-active: #F16E00;
--hl-color-form-interaction-fg-light-hover: rgb(0, 0, 0);
--hl-color-form-interaction-fg-light-focus: rgb(0, 0, 0);
--hl-color-form-interaction-fg-light-pressed: rgb(255, 255, 255);
--hl-color-form-interaction-fg-light-active: rgb(0, 0, 0);
--hl-color-form-interaction-bg-dark-hover: #ff9433;
--hl-color-form-interaction-bg-dark-focus: #ff9433;
--hl-color-form-interaction-bg-dark-pressed: #ffe4cc;
--hl-color-form-interaction-bg-dark-active: #FF7900;
--hl-color-form-interaction-fg-dark-hover: rgb(0, 0, 0);
--hl-color-form-interaction-fg-dark-focus: rgb(0, 0, 0);
--hl-color-form-interaction-fg-dark-pressed: rgb(0, 0, 0);
--hl-color-form-interaction-fg-dark-active: rgb(0, 0, 0);
--hl-icon-form-indicator: url('data:image/svg+xml,');
--hl-icon-form-radio-indicator: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='6' fill='black'/%3E%3C/svg%3E%0A");
--hl-font-size-2xs: 0.625rem;
--hl-font-size-xs: 0.75rem;
--hl-font-size-sm: 0.875rem;
--hl-font-size-md: 1rem;
--hl-font-size-lg: 1.125rem;
--hl-font-size-xl: 1.25rem;
--hl-font-size-2xl: 1.5rem;
--hl-font-size-3xl: 1.75rem;
--hl-font-size-4xl: 2rem;
--hl-font-size-5xl: 2.25rem;
--hl-font-size-6xl: 2.5rem;
--hl-font-size-7xl: 2.75rem;
--hl-font-size-8xl: 3rem;
--hl-font-size-9xl: 3.5rem;
--hl-font-size-10xl: 4rem;
--hl-font-size-11xl: 4.5rem;
--hl-font-size-12xl: 5rem;
--hl-font-size-13xl: 6rem;
--hl-font-size-6xs: 0.375rem;
--hl-font-size-5xs: 0.4375rem;
--hl-font-size-4xs: 0.5rem;
--hl-font-size-3xs: 0.5625rem;
--hl-typography-font-family-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--hl-typography-font-family-body: "Helvetica-Neue-Family", "Helvetica Neue", "Orange Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--hl-typography-font-family-monospaced: monospace;
--hl-typography-font-weight-heading-regular: 400;
--hl-typography-font-weight-heading-bold: 700;
--hl-typography-font-weight-body-regular: 400;
--hl-typography-font-weight-body-bold: 700;
--hl-typography-letter-spacing-ultra-decreased: -0.16em;
--hl-typography-letter-spacing-very-decreased: -0.08em;
--hl-typography-letter-spacing-decreased: -0.04em;
--hl-typography-letter-spacing-default: 0em;
--hl-typography-letter-spacing-increased: 0.04em;
--hl-typography-letter-spacing-very-increased: 0.08em;
--hl-typography-letter-spacing-ultra-increased: 0.16em;
--hl-typography-line-height-very-decreased: 1;
--hl-typography-line-height-decreased: 1.1;
--hl-typography-line-height-default: 1.2;
--hl-typography-line-height-increased: 1.3;
--hl-typography-line-height-very-increased: 1.5;
--hl-box-shadow-soft-default: 0 0 0.25rem 0 rgba(0, 0, 0, 0.2);
--hl-box-shadow-soft-hover: 0 0 0.75rem 0 rgba(0, 0, 0, 0.2);
--hl-box-shadow-soft-active: 0 0 0.25rem 0 rgba(0, 0, 0, 0.6);
--hl-box-shadow-hard-default: 0 0 0 0.125rem rgba(0, 0, 0, 0.2);
--hl-box-shadow-hard-hover: 0 0 0 0.25rem rgba(0, 0, 0, 0.2);
--hl-box-shadow-hard-active: 0 0 0 0.125rem rgba(0, 0, 0, 0.6);
--hl-opacity-low: 0.1;
--hl-opacity-md: 0.5;
--hl-opacity-high: 0.9;
--hl-opacity-disabled: 0.35;
--hl-transition-quickly: 0.1s ease-in-out;
--hl-transition-normal: 0.3s ease-in-out;
--hl-transition-slowly: 0.6s ease-in-out;
--hl-z-index-deep: -9999;
--hl-z-index-default: 1;
--hl-z-index-masked: 100;
--hl-z-index-mask: 200;
--hl-z-index-mask-buttons: 250;
--hl-z-index-sticky: 300;
--hl-z-index-header: 400;
--hl-z-index-toast: 500;
--hl-z-index-dropdown: 600;
--hl-z-index-overlay: 700;
--hl-z-index-spinner: 800;
--hl-z-index-modal: 900;
--hl-z-index-popup: 950;
--hl-z-index-mars: 10000000;
--hl-grid-spacer: 1rem;
--hl-color-button-fg-light-primary-standby: rgb(0, 0, 0);
--hl-color-button-fg-light-primary-hover: rgb(0, 0, 0);
--hl-color-button-fg-light-primary-focus: rgb(0, 0, 0);
--hl-color-button-fg-light-primary-pressed: rgb(255, 255, 255);
--hl-color-button-fg-light-primary-active: rgb(0, 0, 0);
--hl-color-button-bg-light-primary-standby: #FF7900;
--hl-color-button-bg-light-primary-hover: #cc6100;
--hl-color-button-bg-light-primary-focus: #cc6100;
--hl-color-button-bg-light-primary-pressed: #663000;
--hl-color-button-bg-light-primary-active: #FF7900;
--hl-color-button-border-light-primary-standby: #FF7900;
--hl-color-button-border-light-primary-hover: #cc6100;
--hl-color-button-border-light-primary-focus: #cc6100;
--hl-color-button-border-light-primary-pressed: #663000;
--hl-color-button-border-light-primary-active: #FF7900;
--hl-color-button-fg-dark-primary-standby: rgb(0, 0, 0);
--hl-color-button-fg-dark-primary-hover: rgb(0, 0, 0);
--hl-color-button-fg-dark-primary-focus: rgb(0, 0, 0);
--hl-color-button-fg-dark-primary-pressed: rgb(255, 255, 255);
--hl-color-button-fg-dark-primary-active: rgb(0, 0, 0);
--hl-color-button-bg-dark-primary-standby: #FF7900;
--hl-color-button-bg-dark-primary-hover: #cc6100;
--hl-color-button-bg-dark-primary-focus: #cc6100;
--hl-color-button-bg-dark-primary-pressed: #663000;
--hl-color-button-bg-dark-primary-active: #FF7900;
--hl-color-button-border-dark-primary-standby: #FF7900;
--hl-color-button-border-dark-primary-hover: #cc6100;
--hl-color-button-border-dark-primary-focus: #cc6100;
--hl-color-button-border-dark-primary-pressed: #663000;
--hl-color-button-border-dark-primary-active: #FF7900;
--hl-color-button-fg-light-secondary-standby: rgb(0, 0, 0);
--hl-color-button-fg-light-secondary-hover: rgb(0, 0, 0);
--hl-color-button-fg-light-secondary-focus: rgb(0, 0, 0);
--hl-color-button-fg-light-secondary-pressed: rgb(255, 255, 255);
--hl-color-button-fg-light-secondary-active: rgb(255, 255, 255);
--hl-color-button-bg-light-secondary-standby: transparent;
--hl-color-button-bg-light-secondary-hover: rgba(0, 0, 0, 0.13);
--hl-color-button-bg-light-secondary-focus: rgba(0, 0, 0, 0.13);
--hl-color-button-bg-light-secondary-pressed: rgba(0, 0, 0, 0.6);
--hl-color-button-bg-light-secondary-active: rgba(0, 0, 0, 0.8);
--hl-color-button-border-light-secondary-standby: #000;
--hl-color-button-border-light-secondary-hover: #000;
--hl-color-button-border-light-secondary-focus: #000;
--hl-color-button-border-light-secondary-pressed: #000;
--hl-color-button-border-light-secondary-active: #000;
--hl-color-button-fg-dark-secondary-standby: rgb(255, 255, 255);
--hl-color-button-fg-dark-secondary-hover: rgb(255, 255, 255);
--hl-color-button-fg-dark-secondary-focus: rgb(255, 255, 255);
--hl-color-button-fg-dark-secondary-pressed: rgb(0, 0, 0);
--hl-color-button-fg-dark-secondary-active: rgb(0, 0, 0);
--hl-color-button-bg-dark-secondary-standby: transparent;
--hl-color-button-bg-dark-secondary-hover: rgba(255, 255, 255, 0.2);
--hl-color-button-bg-dark-secondary-focus: rgba(255, 255, 255, 0.2);
--hl-color-button-bg-dark-secondary-pressed: rgba(255, 255, 255, 0.8);
--hl-color-button-bg-dark-secondary-active: rgba(255, 255, 255, 0.87);
--hl-color-button-border-dark-secondary-standby: #ffffff;
--hl-color-button-border-dark-secondary-hover: #ffffff;
--hl-color-button-border-dark-secondary-focus: #ffffff;
--hl-color-button-border-dark-secondary-pressed: #ffffff;
--hl-color-button-border-dark-secondary-active: #ffffff;
--hl-color-button-fg-light-tertiary-standby: #000;
--hl-color-button-fg-light-tertiary-hover: #c15800;
--hl-color-button-fg-light-tertiary-focus: #c15800;
--hl-color-button-fg-light-tertiary-pressed: #602c00;
--hl-color-button-fg-light-tertiary-active: #F16E00;
--hl-color-button-bg-light-tertiary-standby: transparent;
--hl-color-button-bg-light-tertiary-hover: rgba(0, 0, 0, 0.04);
--hl-color-button-bg-light-tertiary-focus: rgba(0, 0, 0, 0.04);
--hl-color-button-bg-light-tertiary-pressed: rgba(0, 0, 0, 0.8);
--hl-color-button-bg-light-tertiary-active: #000;
--hl-color-button-border-light-tertiary-standby: transparent;
--hl-color-button-border-light-tertiary-hover: transparent;
--hl-color-button-border-light-tertiary-focus: transparent;
--hl-color-button-border-light-tertiary-pressed: transparent;
--hl-color-button-border-light-tertiary-active: transparent;
--hl-color-button-fg-dark-tertiary-standby: #ffffff;
--hl-color-button-fg-dark-tertiary-hover: #ff9433;
--hl-color-button-fg-dark-tertiary-focus: #ff9433;
--hl-color-button-fg-dark-tertiary-pressed: #ffe4cc;
--hl-color-button-fg-dark-tertiary-active: #FF7900;
--hl-color-button-bg-dark-tertiary-standby: transparent;
--hl-color-button-bg-dark-tertiary-hover: rgba(255, 255, 255, 0.2);
--hl-color-button-bg-dark-tertiary-focus: rgba(255, 255, 255, 0.2);
--hl-color-button-bg-dark-tertiary-pressed: rgba(255, 255, 255, 0.93);
--hl-color-button-bg-dark-tertiary-active: rgba(255, 255, 255, 0.98);
--hl-color-button-border-dark-tertiary-standby: transparent;
--hl-color-button-border-dark-tertiary-hover: transparent;
--hl-color-button-border-dark-tertiary-focus: transparent;
--hl-color-button-border-dark-tertiary-pressed: transparent;
--hl-color-button-border-dark-tertiary-active: transparent;
--hl-color-button-fg-light-link-standby: #000;
--hl-color-button-fg-light-link-hover: #c15800;
--hl-color-button-fg-light-link-focus: #c15800;
--hl-color-button-fg-light-link-pressed: #602c00;
--hl-color-button-fg-light-link-active: #F16E00;
--hl-color-button-bg-light-link-standby: transparent;
--hl-color-button-bg-light-link-hover: transparent;
--hl-color-button-bg-light-link-focus: transparent;
--hl-color-button-bg-light-link-pressed: transparent;
--hl-color-button-bg-light-link-active: transparent;
--hl-color-button-border-light-link-standby: transparent;
--hl-color-button-border-light-link-hover: transparent;
--hl-color-button-border-light-link-focus: transparent;
--hl-color-button-border-light-link-pressed: transparent;
--hl-color-button-border-light-link-active: transparent;
--hl-color-button-fg-dark-link-standby: #ffffff;
--hl-color-button-fg-dark-link-hover: #ff9433;
--hl-color-button-fg-dark-link-focus: #ff9433;
--hl-color-button-fg-dark-link-pressed: #ffe4cc;
--hl-color-button-fg-dark-link-active: #FF7900;
--hl-color-button-bg-dark-link-standby: transparent;
--hl-color-button-bg-dark-link-hover: transparent;
--hl-color-button-bg-dark-link-focus: transparent;
--hl-color-button-bg-dark-link-pressed: transparent;
--hl-color-button-bg-dark-link-active: transparent;
--hl-color-button-border-dark-link-standby: transparent;
--hl-color-button-border-dark-link-hover: transparent;
--hl-color-button-border-dark-link-focus: transparent;
--hl-color-button-border-dark-link-pressed: transparent;
--hl-color-button-border-dark-link-active: transparent;
--hl-color-button-fg-light-link-surface-standby: #000;
--hl-color-button-fg-light-link-surface-hover: #c15800;
--hl-color-button-fg-light-link-surface-focus: #c15800;
--hl-color-button-fg-light-link-surface-pressed: rgb(255, 255, 255);
--hl-color-button-fg-light-link-surface-active: #ffffff;
--hl-color-button-bg-light-link-surface-standby: transparent;
--hl-color-button-bg-light-link-surface-hover: rgba(0, 0, 0, 0.04);
--hl-color-button-bg-light-link-surface-focus: rgba(0, 0, 0, 0.04);
--hl-color-button-bg-light-link-surface-pressed: rgba(0, 0, 0, 0.8);
--hl-color-button-bg-light-link-surface-active: #000;
--hl-color-button-border-light-link-surface-standby: transparent;
--hl-color-button-border-light-link-surface-hover: transparent;
--hl-color-button-border-light-link-surface-focus: transparent;
--hl-color-button-border-light-link-surface-pressed: transparent;
--hl-color-button-border-light-link-surface-active: transparent;
--hl-color-button-fg-dark-link-surface-standby: #ffffff;
--hl-color-button-fg-dark-link-surface-hover: #ff9433;
--hl-color-button-fg-dark-link-surface-focus: #ff9433;
--hl-color-button-fg-dark-link-surface-pressed: rgb(0, 0, 0);
--hl-color-button-fg-dark-link-surface-active: #000;
--hl-color-button-bg-dark-link-surface-standby: transparent;
--hl-color-button-bg-dark-link-surface-hover: rgba(255, 255, 255, 0.2);
--hl-color-button-bg-dark-link-surface-focus: rgba(255, 255, 255, 0.2);
--hl-color-button-bg-dark-link-surface-pressed: rgba(255, 255, 255, 0.93);
--hl-color-button-bg-dark-link-surface-active: rgba(255, 255, 255, 0.98);
--hl-color-button-border-dark-link-surface-standby: transparent;
--hl-color-button-border-dark-link-surface-hover: transparent;
--hl-color-button-border-dark-link-surface-focus: transparent;
--hl-color-button-border-dark-link-surface-pressed: transparent;
--hl-color-button-border-dark-link-surface-active: transparent;
--hl-color-button-fg-dark-outline-standby: rgb(255, 255, 255);
--hl-color-button-fg-dark-outline-hover: rgb(255, 255, 255);
--hl-color-button-fg-dark-outline-focus: rgb(255, 255, 255);
--hl-color-button-fg-dark-outline-pressed: rgb(0, 0, 0);
--hl-color-button-fg-dark-outline-active: rgb(0, 0, 0);
--hl-color-button-bg-dark-outline-standby: transparent;
--hl-color-button-bg-dark-outline-hover: rgba(255, 255, 255, 0.2);
--hl-color-button-bg-dark-outline-focus: rgba(255, 255, 255, 0.2);
--hl-color-button-bg-dark-outline-pressed: rgba(255, 255, 255, 0.8);
--hl-color-button-bg-dark-outline-active: rgba(255, 255, 255, 0.87);
--hl-color-button-border-dark-outline-standby: #ffffff;
--hl-color-button-border-dark-outline-hover: #ffffff;
--hl-color-button-border-dark-outline-focus: #ffffff;
--hl-color-button-border-dark-outline-pressed: #ffffff;
--hl-color-button-border-dark-outline-active: #ffffff;
--hl-color-button-fg-light-outline-standby: rgb(0, 0, 0);
--hl-color-button-fg-light-outline-hover: rgb(0, 0, 0);
--hl-color-button-fg-light-outline-focus: rgb(0, 0, 0);
--hl-color-button-fg-light-outline-pressed: rgb(255, 255, 255);
--hl-color-button-fg-light-outline-active: rgb(255, 255, 255);
--hl-color-button-bg-light-outline-standby: transparent;
--hl-color-button-bg-light-outline-hover: rgba(0, 0, 0, 0.13);
--hl-color-button-bg-light-outline-focus: rgba(0, 0, 0, 0.13);
--hl-color-button-bg-light-outline-pressed: rgba(0, 0, 0, 0.6);
--hl-color-button-bg-light-outline-active: rgba(0, 0, 0, 0.8);
--hl-color-button-border-light-outline-standby: #000;
--hl-color-button-border-light-outline-hover: #000;
--hl-color-button-border-light-outline-focus: #000;
--hl-color-button-border-light-outline-pressed: #000;
--hl-color-button-border-light-outline-active: #000;
--hl-color-button-fg-light-borderless-standby: rgb(0, 0, 0);
--hl-color-button-fg-light-borderless-hover: rgb(0, 0, 0);
--hl-color-button-fg-light-borderless-focus: rgb(0, 0, 0);
--hl-color-button-fg-light-borderless-pressed: rgb(255, 255, 255);
--hl-color-button-fg-light-borderless-active: rgb(255, 255, 255);
--hl-color-button-bg-light-borderless-standby: transparent;
--hl-color-button-bg-light-borderless-hover: rgba(0, 0, 0, 0.13);
--hl-color-button-bg-light-borderless-focus: rgba(0, 0, 0, 0.13);
--hl-color-button-bg-light-borderless-pressed: rgba(0, 0, 0, 0.6);
--hl-color-button-bg-light-borderless-active: rgba(0, 0, 0, 0.8);
--hl-color-button-border-light-borderless-standby: transparent;
--hl-color-button-border-light-borderless-hover: transparent;
--hl-color-button-border-light-borderless-focus: transparent;
--hl-color-button-border-light-borderless-pressed: transparent;
--hl-color-button-border-light-borderless-active: transparent;
--hl-color-button-fg-dark-borderless-standby: rgb(255, 255, 255);
--hl-color-button-fg-dark-borderless-hover: rgb(255, 255, 255);
--hl-color-button-fg-dark-borderless-focus: rgb(255, 255, 255);
--hl-color-button-fg-dark-borderless-pressed: rgb(0, 0, 0);
--hl-color-button-fg-dark-borderless-active: rgb(0, 0, 0);
--hl-color-button-bg-dark-borderless-standby: transparent;
--hl-color-button-bg-dark-borderless-hover: rgba(255, 255, 255, 0.2);
--hl-color-button-bg-dark-borderless-focus: rgba(255, 255, 255, 0.2);
--hl-color-button-bg-dark-borderless-pressed: rgba(255, 255, 255, 0.8);
--hl-color-button-bg-dark-borderless-active: rgba(255, 255, 255, 0.87);
--hl-color-button-border-dark-borderless-standby: transparent;
--hl-color-button-border-dark-borderless-hover: transparent;
--hl-color-button-border-dark-borderless-focus: transparent;
--hl-color-button-border-dark-borderless-pressed: transparent;
--hl-color-button-border-dark-borderless-active: transparent;
--hl-color-button-fg-light-interaction-surface-standby: rgb(0, 0, 0);
--hl-color-button-fg-light-interaction-surface-hover: rgb(0, 0, 0);
--hl-color-button-fg-light-interaction-surface-focus: rgb(0, 0, 0);
--hl-color-button-fg-light-interaction-surface-pressed: rgb(255, 255, 255);
--hl-color-button-fg-light-interaction-surface-active: rgb(255, 255, 255);
--hl-color-button-bg-light-interaction-surface-standby: transparent;
--hl-color-button-bg-light-interaction-surface-hover: rgba(0, 0, 0, 0.13);
--hl-color-button-bg-light-interaction-surface-focus: rgba(0, 0, 0, 0.13);
--hl-color-button-bg-light-interaction-surface-pressed: rgba(0, 0, 0, 0.6);
--hl-color-button-bg-light-interaction-surface-active: rgba(0, 0, 0, 0.8);
--hl-color-button-border-light-interaction-surface-standby: transparent;
--hl-color-button-border-light-interaction-surface-hover: transparent;
--hl-color-button-border-light-interaction-surface-focus: transparent;
--hl-color-button-border-light-interaction-surface-pressed: transparent;
--hl-color-button-border-light-interaction-surface-active: transparent;
--hl-color-button-fg-dark-interaction-surface-standby: rgb(255, 255, 255);
--hl-color-button-fg-dark-interaction-surface-hover: rgb(255, 255, 255);
--hl-color-button-fg-dark-interaction-surface-focus: rgb(255, 255, 255);
--hl-color-button-fg-dark-interaction-surface-pressed: rgb(0, 0, 0);
--hl-color-button-fg-dark-interaction-surface-active: rgb(0, 0, 0);
--hl-color-button-bg-dark-interaction-surface-standby: transparent;
--hl-color-button-bg-dark-interaction-surface-hover: rgba(255, 255, 255, 0.2);
--hl-color-button-bg-dark-interaction-surface-focus: rgba(255, 255, 255, 0.2);
--hl-color-button-bg-dark-interaction-surface-pressed: rgba(255, 255, 255, 0.8);
--hl-color-button-bg-dark-interaction-surface-active: rgba(255, 255, 255, 0.87);
--hl-color-button-border-dark-interaction-surface-standby: transparent;
--hl-color-button-border-dark-interaction-surface-hover: transparent;
--hl-color-button-border-dark-interaction-surface-focus: transparent;
--hl-color-button-border-dark-interaction-surface-pressed: transparent;
--hl-color-button-border-dark-interaction-surface-active: transparent;
--hl-color-button-fg-light-warning-standby: rgb(0, 0, 0);
--hl-color-button-fg-light-warning-hover: rgb(0, 0, 0);
--hl-color-button-fg-light-warning-focus: rgb(0, 0, 0);
--hl-color-button-fg-light-warning-pressed: rgb(255, 255, 255);
--hl-color-button-fg-light-warning-active: rgb(0, 0, 0);
--hl-color-button-bg-light-warning-standby: #FFCC00;
--hl-color-button-bg-light-warning-hover: #cca300;
--hl-color-button-bg-light-warning-focus: #cca300;
--hl-color-button-bg-light-warning-pressed: #665200;
--hl-color-button-bg-light-warning-active: #FFCC00;
--hl-color-button-border-light-warning-standby: #FFCC00;
--hl-color-button-border-light-warning-hover: #cca300;
--hl-color-button-border-light-warning-focus: #cca300;
--hl-color-button-border-light-warning-pressed: #665200;
--hl-color-button-border-light-warning-active: #FFCC00;
--hl-color-button-fg-dark-warning-standby: rgb(0, 0, 0);
--hl-color-button-fg-dark-warning-hover: rgb(0, 0, 0);
--hl-color-button-fg-dark-warning-focus: rgb(0, 0, 0);
--hl-color-button-fg-dark-warning-pressed: rgb(255, 255, 255);
--hl-color-button-fg-dark-warning-active: rgb(0, 0, 0);
--hl-color-button-bg-dark-warning-standby: #FFCC00;
--hl-color-button-bg-dark-warning-hover: #cca300;
--hl-color-button-bg-dark-warning-focus: #cca300;
--hl-color-button-bg-dark-warning-pressed: #665200;
--hl-color-button-bg-dark-warning-active: #FFCC00;
--hl-color-button-border-dark-warning-standby: #FFCC00;
--hl-color-button-border-dark-warning-hover: #cca300;
--hl-color-button-border-dark-warning-focus: #cca300;
--hl-color-button-border-dark-warning-pressed: #665200;
--hl-color-button-border-dark-warning-active: #FFCC00;
--hl-color-button-fg-light-info-standby: rgb(0, 0, 0);
--hl-color-button-fg-light-info-hover: rgb(255, 255, 255);
--hl-color-button-fg-light-info-focus: rgb(255, 255, 255);
--hl-color-button-fg-light-info-pressed: rgb(255, 255, 255);
--hl-color-button-fg-light-info-active: rgb(0, 0, 0);
--hl-color-button-bg-light-info-standby: #5A83DD;
--hl-color-button-bg-light-info-hover: #4869b1;
--hl-color-button-bg-light-info-focus: #4869b1;
--hl-color-button-bg-light-info-pressed: #243458;
--hl-color-button-bg-light-info-active: #5A83DD;
--hl-color-button-border-light-info-standby: #5A83DD;
--hl-color-button-border-light-info-hover: #4869b1;
--hl-color-button-border-light-info-focus: #4869b1;
--hl-color-button-border-light-info-pressed: #243458;
--hl-color-button-border-light-info-active: #5A83DD;
--hl-color-button-fg-dark-info-standby: rgb(0, 0, 0);
--hl-color-button-fg-dark-info-hover: rgb(255, 255, 255);
--hl-color-button-fg-dark-info-focus: rgb(255, 255, 255);
--hl-color-button-fg-dark-info-pressed: rgb(255, 255, 255);
--hl-color-button-fg-dark-info-active: rgb(0, 0, 0);
--hl-color-button-bg-dark-info-standby: #5A83DD;
--hl-color-button-bg-dark-info-hover: #4869b1;
--hl-color-button-bg-dark-info-focus: #4869b1;
--hl-color-button-bg-dark-info-pressed: #243458;
--hl-color-button-bg-dark-info-active: #5A83DD;
--hl-color-button-border-dark-info-standby: #5A83DD;
--hl-color-button-border-dark-info-hover: #4869b1;
--hl-color-button-border-dark-info-focus: #4869b1;
--hl-color-button-border-dark-info-pressed: #243458;
--hl-color-button-border-dark-info-active: #5A83DD;
--hl-color-button-fg-light-success-standby: rgb(0, 0, 0);
--hl-color-button-fg-light-success-hover: rgb(0, 0, 0);
--hl-color-button-fg-light-success-focus: rgb(0, 0, 0);
--hl-color-button-fg-light-success-pressed: rgb(255, 255, 255);
--hl-color-button-fg-light-success-active: rgb(0, 0, 0);
--hl-color-button-bg-light-success-standby: #38C738;
--hl-color-button-bg-light-success-hover: #2d9f2d;
--hl-color-button-bg-light-success-focus: #2d9f2d;
--hl-color-button-bg-light-success-pressed: #165016;
--hl-color-button-bg-light-success-active: #38C738;
--hl-color-button-border-light-success-standby: #38C738;
--hl-color-button-border-light-success-hover: #2d9f2d;
--hl-color-button-border-light-success-focus: #2d9f2d;
--hl-color-button-border-light-success-pressed: #165016;
--hl-color-button-border-light-success-active: #38C738;
--hl-color-button-fg-dark-success-standby: rgb(0, 0, 0);
--hl-color-button-fg-dark-success-hover: rgb(0, 0, 0);
--hl-color-button-fg-dark-success-focus: rgb(0, 0, 0);
--hl-color-button-fg-dark-success-pressed: rgb(255, 255, 255);
--hl-color-button-fg-dark-success-active: rgb(0, 0, 0);
--hl-color-button-bg-dark-success-standby: #38C738;
--hl-color-button-bg-dark-success-hover: #2d9f2d;
--hl-color-button-bg-dark-success-focus: #2d9f2d;
--hl-color-button-bg-dark-success-pressed: #165016;
--hl-color-button-bg-dark-success-active: #38C738;
--hl-color-button-border-dark-success-standby: #38C738;
--hl-color-button-border-dark-success-hover: #2d9f2d;
--hl-color-button-border-dark-success-focus: #2d9f2d;
--hl-color-button-border-dark-success-pressed: #165016;
--hl-color-button-border-dark-success-active: #38C738;
--hl-color-button-fg-light-danger-standby: rgb(255, 255, 255);
--hl-color-button-fg-light-danger-hover: rgb(255, 255, 255);
--hl-color-button-fg-light-danger-focus: rgb(255, 255, 255);
--hl-color-button-fg-light-danger-pressed: rgb(255, 255, 255);
--hl-color-button-fg-light-danger-active: rgb(255, 255, 255);
--hl-color-button-bg-light-danger-standby: #CC3C14;
--hl-color-button-bg-light-danger-hover: #a33010;
--hl-color-button-bg-light-danger-focus: #a33010;
--hl-color-button-bg-light-danger-pressed: #521808;
--hl-color-button-bg-light-danger-active: #CC3C14;
--hl-color-button-border-light-danger-standby: #CC3C14;
--hl-color-button-border-light-danger-hover: #a33010;
--hl-color-button-border-light-danger-focus: #a33010;
--hl-color-button-border-light-danger-pressed: #521808;
--hl-color-button-border-light-danger-active: #CC3C14;
--hl-color-button-fg-dark-danger-standby: rgb(255, 255, 255);
--hl-color-button-fg-dark-danger-hover: rgb(255, 255, 255);
--hl-color-button-fg-dark-danger-focus: rgb(255, 255, 255);
--hl-color-button-fg-dark-danger-pressed: rgb(255, 255, 255);
--hl-color-button-fg-dark-danger-active: rgb(255, 255, 255);
--hl-color-button-bg-dark-danger-standby: #CC3C14;
--hl-color-button-bg-dark-danger-hover: #a33010;
--hl-color-button-bg-dark-danger-focus: #a33010;
--hl-color-button-bg-dark-danger-pressed: #521808;
--hl-color-button-bg-dark-danger-active: #CC3C14;
--hl-color-button-border-dark-danger-standby: #CC3C14;
--hl-color-button-border-dark-danger-hover: #a33010;
--hl-color-button-border-dark-danger-focus: #a33010;
--hl-color-button-border-dark-danger-pressed: #521808;
--hl-color-button-border-dark-danger-active: #CC3C14;
--hl-color-button-fg-light-remove-standby: rgb(0, 0, 0);
--hl-color-button-fg-light-remove-hover: rgb(255, 255, 255);
--hl-color-button-fg-light-remove-focus: rgb(255, 255, 255);
--hl-color-button-bg-light-remove-standby: transparent;
--hl-color-button-fg-light-remove-pressed: rgb(255, 255, 255);
--hl-color-button-fg-light-remove-active: rgb(255, 255, 255);
--hl-color-button-bg-light-remove-hover: #CC3C14;
--hl-color-button-bg-light-remove-focus: #a33010;
--hl-color-button-bg-light-remove-pressed: #521808;
--hl-color-button-bg-light-remove-active: #CC3C14;
--hl-color-button-border-light-remove-standby: #000;
--hl-color-button-border-light-remove-hover: #CC3C14;
--hl-color-button-border-light-remove-focus: #a33010;
--hl-color-button-border-light-remove-pressed: #521808;
--hl-color-button-border-light-remove-active: #CC3C14;
--hl-color-button-fg-dark-remove-standby: rgb(255, 255, 255);
--hl-color-button-fg-dark-remove-hover: rgb(255, 255, 255);
--hl-color-button-fg-dark-remove-focus: rgb(255, 255, 255);
--hl-color-button-fg-dark-remove-pressed: rgb(255, 255, 255);
--hl-color-button-fg-dark-remove-active: rgb(255, 255, 255);
--hl-color-button-bg-dark-remove-standby: transparent;
--hl-color-button-bg-dark-remove-hover: #CC3C14;
--hl-color-button-bg-dark-remove-focus: #a33010;
--hl-color-button-bg-dark-remove-pressed: #521808;
--hl-color-button-bg-dark-remove-active: #CC3C14;
--hl-color-button-border-dark-remove-standby: #ffffff;
--hl-color-button-border-dark-remove-hover: #CC3C14;
--hl-color-button-border-dark-remove-focus: #a33010;
--hl-color-button-border-dark-remove-pressed: #521808;
--hl-color-button-border-dark-remove-active: #CC3C14;
--hl-color-button-fg-light-black-standby: rgb(255, 255, 255);
--hl-color-button-fg-light-black-hover: rgb(255, 255, 255);
--hl-color-button-fg-light-black-focus: rgb(255, 255, 255);
--hl-color-button-fg-light-black-pressed: rgb(0, 0, 0);
--hl-color-button-fg-light-black-active: rgb(255, 255, 255);
--hl-color-button-bg-light-black-standby: #000;
--hl-color-button-bg-light-black-hover: rgba(0, 0, 0, 0.6);
--hl-color-button-bg-light-black-focus: rgba(0, 0, 0, 0.6);
--hl-color-button-bg-light-black-pressed: rgba(0, 0, 0, 0.2);
--hl-color-button-bg-light-black-active: #000;
--hl-color-button-border-light-black-standby: transparent;
--hl-color-button-border-light-black-hover: transparent;
--hl-color-button-border-light-black-focus: transparent;
--hl-color-button-border-light-black-pressed: transparent;
--hl-color-button-border-light-black-active: transparent;
--hl-color-button-fg-dark-black-standby: rgb(0, 0, 0);
--hl-color-button-fg-dark-black-hover: rgb(0, 0, 0);
--hl-color-button-fg-dark-black-focus: rgb(0, 0, 0);
--hl-color-button-fg-dark-black-pressed: rgb(255, 255, 255);
--hl-color-button-fg-dark-black-active: rgb(0, 0, 0);
--hl-color-button-bg-dark-black-standby: #ffffff;
--hl-color-button-bg-dark-black-hover: rgba(255, 255, 255, 0.6);
--hl-color-button-bg-dark-black-focus: rgba(255, 255, 255, 0.6);
--hl-color-button-bg-dark-black-pressed: rgba(255, 255, 255, 0.2);
--hl-color-button-bg-dark-black-active: #ffffff;
--hl-color-button-border-dark-black-standby: transparent;
--hl-color-button-border-dark-black-hover: transparent;
--hl-color-button-border-dark-black-focus: transparent;
--hl-color-button-border-dark-black-pressed: transparent;
--hl-color-button-border-dark-black-active: transparent;
--hl-color-button-fg-white-standby: rgb(0, 0, 0);
--hl-color-button-fg-white-hover: rgb(0, 0, 0);
--hl-color-button-fg-white-focus: rgb(0, 0, 0);
--hl-color-button-fg-white-pressed: rgb(255, 255, 255);
--hl-color-button-fg-white-active: rgb(0, 0, 0);
--hl-color-button-bg-white-standby: #ffffff;
--hl-color-button-bg-white-hover: rgba(255, 255, 255, 0.6);
--hl-color-button-bg-white-focus: rgba(255, 255, 255, 0.6);
--hl-color-button-bg-white-pressed: rgba(255, 255, 255, 0.2);
--hl-color-button-bg-white-active: #ffffff;
--hl-color-button-border-white-standby: transparent;
--hl-color-button-border-white-hover: transparent;
--hl-color-button-border-white-focus: transparent;
--hl-color-button-border-white-pressed: transparent;
--hl-color-button-border-white-active: transparent;
--hl-table-color-bg-light-success: #d7f4d7;
--hl-table-color-bg-light-info: #dee6f8;
--hl-table-color-bg-light-danger: #f5d8d0;
--hl-table-color-bg-light-warning: #fff5cc;
--hl-table-color-border-top-success: #38C738;
--hl-table-color-border-top-info: #5A83DD;
--hl-table-color-border-top-danger: #CC3C14;
--hl-table-color-border-top-warning: #FFCC00;
--hl-table-color-border-top-blue-light: #dee6f8;
--hl-color-border-light-default-alpha: rgba(0, 0, 0, 0.13);
--hl-color-supporting-blue-light: #B5E8F7;
--hl-color-supporting-blue: #4BB4E6;
--hl-color-supporting-blue-dark: #085EBD;
--hl-color-supporting-yellow-light: #FFF6B6;
--hl-color-supporting-yellow: #FFD200;
--hl-color-supporting-yellow-dark: #FFB400;
--hl-color-supporting-green-light: #B8EBD6;
--hl-color-supporting-green: #50BE87;
--hl-color-supporting-green-dark: #0A6E31;
--hl-color-supporting-purple-light: #D9C2F0;
--hl-color-supporting-purple: #A885D8;
--hl-color-supporting-purple-dark: #492191;
--hl-color-supporting-pink-light: #FFE8F7;
--hl-color-supporting-pink: #FFB4E6;
--hl-color-supporting-pink-dark: #FF8AD4;
--hl-color-supporting-orange-light: #FFC999;
--hl-color-supporting-orange: #FF7900;
--hl-color-supporting-orange-dark: #994700;
--hl-typography-p1-font-size: 1rem;
--hl-typography-p1-line-height: 1.2;
--hl-typography-p1-letter-spacing: 0em;
--hl-typography-p1-font-size: 1rem;
--hl-typography-p1-line-height: 1.2;
--hl-typography-p1-letter-spacing: 0em;
--hl-typography-p2-font-size: 0.875rem;
--hl-typography-p2-line-height: 1.3;
--hl-typography-p2-letter-spacing: 0em;
--hl-typography-p2-font-size: 0.875rem;
--hl-typography-p2-line-height: 1.3;
--hl-typography-p2-letter-spacing: 0em;
--hl-typography-p3-font-size: 0.75rem;
--hl-typography-p3-line-height: 1.5;
--hl-typography-p3-letter-spacing: 0em;
--hl-typography-p3-font-size: 0.75rem;
--hl-typography-p3-line-height: 1.5;
--hl-typography-p3-letter-spacing: 0em;
--hl-typography-p4-font-size: 0.625rem;
--hl-typography-p4-line-height: 1.5;
--hl-typography-p4-letter-spacing: 0em;
--hl-typography-p4-font-size: 0.625rem;
--hl-typography-p4-line-height: 1.5;
--hl-typography-p4-letter-spacing: 0em;
--hl-typography-h1-font-size: 2rem;
--hl-typography-h1-line-height: 1.1;
--hl-typography-h1-letter-spacing: -0.04em;
--hl-typography-h1-font-size: 2rem;
--hl-typography-h1-line-height: 1.1;
--hl-typography-h1-letter-spacing: -0.04em;
--hl-typography-h2-font-size: 1.75rem;
--hl-typography-h2-line-height: 1.1;
--hl-typography-h2-letter-spacing: -0.04em;
--hl-typography-h2-font-size: 1.75rem;
--hl-typography-h2-line-height: 1.1;
--hl-typography-h2-letter-spacing: -0.04em;
--hl-typography-h3-font-size: 1.5rem;
--hl-typography-h3-line-height: 1.3;
--hl-typography-h3-letter-spacing: -0.04em;
--hl-typography-h3-font-size: 1.5rem;
--hl-typography-h3-line-height: 1.3;
--hl-typography-h3-letter-spacing: -0.04em;
--hl-typography-h4-font-size: 1.25rem;
--hl-typography-h4-line-height: 1.2;
--hl-typography-h4-letter-spacing: -0.04em;
--hl-typography-h4-font-size: 1.25rem;
--hl-typography-h4-line-height: 1.2;
--hl-typography-h4-letter-spacing: -0.04em;
--hl-typography-h5-font-size: 1.125rem;
--hl-typography-h5-line-height: 1.2;
--hl-typography-h5-letter-spacing: 0em;
--hl-typography-h5-font-size: 1.125rem;
--hl-typography-h5-line-height: 1.2;
--hl-typography-h5-letter-spacing: 0em;
--hl-typography-h6-font-size: 1rem;
--hl-typography-h6-line-height: 1.2;
--hl-typography-h6-letter-spacing: 0em;
--hl-typography-h6-font-size: 1rem;
--hl-typography-h6-line-height: 1.2;
--hl-typography-h6-letter-spacing: 0em;
--hl-typography-d1-font-size: 3rem;
--hl-typography-d1-line-height: 1;
--hl-typography-d1-letter-spacing: -0.04em;
--hl-typography-d1-font-size: 3rem;
--hl-typography-d1-line-height: 1;
--hl-typography-d1-letter-spacing: -0.04em;
--hl-typography-d2-font-size: 2.75rem;
--hl-typography-d2-line-height: 1;
--hl-typography-d2-letter-spacing: -0.04em;
--hl-typography-d2-font-size: 2.75rem;
--hl-typography-d2-line-height: 1;
--hl-typography-d2-letter-spacing: -0.04em;
--hl-typography-d3-font-size: 2.5rem;
--hl-typography-d3-line-height: 1;
--hl-typography-d3-letter-spacing: -0.04em;
--hl-typography-d3-font-size: 2.5rem;
--hl-typography-d3-line-height: 1;
--hl-typography-d3-letter-spacing: -0.04em;
--hl-typography-d4-font-size: 2.25rem;
--hl-typography-d4-line-height: 1;
--hl-typography-d4-letter-spacing: -0.04em;
--hl-typography-d4-font-size: 2.25rem;
--hl-typography-d4-line-height: 1;
--hl-typography-d4-letter-spacing: -0.04em;
--hl-link-decoration: underline;
--hl-link-decoration-hover: underline;
--hl-link-decoration-active: underline;
--hl-color-link-fg-light-standby: var(--hl-color-fg-light-interaction-standby);
--hl-color-link-fg-light-hover: var(--hl-color-fg-light-interaction-hover);
--hl-color-link-fg-light-focus: var(--hl-color-fg-light-interaction-focus);
--hl-color-link-fg-light-pressed: var(--hl-color-fg-light-interaction-pressed);
--hl-color-link-fg-light-active: var(--hl-color-fg-light-interaction-active);
--hl-color-link-fg-dark-standby: var(--hl-color-fg-dark-interaction-standby);
--hl-color-link-fg-dark-hover: var(--hl-color-fg-dark-interaction-hover);
--hl-color-link-fg-dark-focus: var(--hl-color-fg-dark-interaction-focus);
--hl-color-link-fg-dark-pressed: var(--hl-color-fg-dark-interaction-pressed);
--hl-color-link-fg-dark-active: var(--hl-color-fg-dark-interaction-active);
--hl-nav-padding-y: var(--hl-spacer-sm);
--hl-nav-logo-height: 30px;
--hl-section-color-fg-light-default: var(--hl-color-fg-light-default);
--hl-section-color-fg-dark-default: var(--hl-color-fg-dark-default); }
@media (min-width: 768px) {
:root,
.bg-light {
--hl-typography-p1-font-size: 1.125rem;
--hl-typography-p1-line-height: 1.2;
--hl-typography-p1-letter-spacing: 0em; } }
@media (min-width: 992px) {
:root,
.bg-light {
--hl-typography-p1-font-size: 1.125rem;
--hl-typography-p1-line-height: 1.2;
--hl-typography-p1-letter-spacing: 0em; } }
@media (min-width: 768px) {
:root,
.bg-light {
--hl-typography-p2-font-size: 1rem;
--hl-typography-p2-line-height: 1.2;
--hl-typography-p2-letter-spacing: 0em; } }
@media (min-width: 992px) {
:root,
.bg-light {
--hl-typography-p2-font-size: 1rem;
--hl-typography-p2-line-height: 1.2;
--hl-typography-p2-letter-spacing: 0em; } }
@media (min-width: 768px) {
:root,
.bg-light {
--hl-typography-p3-font-size: 0.875rem;
--hl-typography-p3-line-height: 1.3;
--hl-typography-p3-letter-spacing: 0em; } }
@media (min-width: 992px) {
:root,
.bg-light {
--hl-typography-p3-font-size: 0.875rem;
--hl-typography-p3-line-height: 1.3;
--hl-typography-p3-letter-spacing: 0em; } }
@media (min-width: 768px) {
:root,
.bg-light {
--hl-typography-p4-font-size: 0.75rem;
--hl-typography-p4-line-height: 1.5;
--hl-typography-p4-letter-spacing: 0em; } }
@media (min-width: 992px) {
:root,
.bg-light {
--hl-typography-p4-font-size: 0.75rem;
--hl-typography-p4-line-height: 1.5;
--hl-typography-p4-letter-spacing: 0em; } }
@media (min-width: 768px) {
:root,
.bg-light {
--hl-typography-h1-font-size: 2.5rem;
--hl-typography-h1-line-height: 1;
--hl-typography-h1-letter-spacing: -0.04em; } }
@media (min-width: 992px) {
:root,
.bg-light {
--hl-typography-h1-font-size: 3rem;
--hl-typography-h1-line-height: 1;
--hl-typography-h1-letter-spacing: -0.04em; } }
@media (min-width: 768px) {
:root,
.bg-light {
--hl-typography-h2-font-size: 2.25rem;
--hl-typography-h2-line-height: 1;
--hl-typography-h2-letter-spacing: -0.04em; } }
@media (min-width: 992px) {
:root,
.bg-light {
--hl-typography-h2-font-size: 2.5rem;
--hl-typography-h2-line-height: 1;
--hl-typography-h2-letter-spacing: -0.04em; } }
@media (min-width: 768px) {
:root,
.bg-light {
--hl-typography-h3-font-size: 2rem;
--hl-typography-h3-line-height: 1.2;
--hl-typography-h3-letter-spacing: -0.04em; } }
@media (min-width: 992px) {
:root,
.bg-light {
--hl-typography-h3-font-size: 2rem;
--hl-typography-h3-line-height: 1.2;
--hl-typography-h3-letter-spacing: -0.04em; } }
@media (min-width: 768px) {
:root,
.bg-light {
--hl-typography-h4-font-size: 1.75rem;
--hl-typography-h4-line-height: 1.1;
--hl-typography-h4-letter-spacing: -0.04em; } }
@media (min-width: 992px) {
:root,
.bg-light {
--hl-typography-h4-font-size: 1.75rem;
--hl-typography-h4-line-height: 1.1;
--hl-typography-h4-letter-spacing: -0.04em; } }
@media (min-width: 768px) {
:root,
.bg-light {
--hl-typography-h5-font-size: 1.5rem;
--hl-typography-h5-line-height: 1.1;
--hl-typography-h5-letter-spacing: 0em; } }
@media (min-width: 992px) {
:root,
.bg-light {
--hl-typography-h5-font-size: 1.5rem;
--hl-typography-h5-line-height: 1.1;
--hl-typography-h5-letter-spacing: 0em; } }
@media (min-width: 768px) {
:root,
.bg-light {
--hl-typography-h6-font-size: 1.25rem;
--hl-typography-h6-line-height: 1.2;
--hl-typography-h6-letter-spacing: 0em; } }
@media (min-width: 992px) {
:root,
.bg-light {
--hl-typography-h6-font-size: 1.25rem;
--hl-typography-h6-line-height: 1.2;
--hl-typography-h6-letter-spacing: 0em; } }
@media (min-width: 768px) {
:root,
.bg-light {
--hl-typography-d1-font-size: 4rem;
--hl-typography-d1-line-height: 1;
--hl-typography-d1-letter-spacing: -0.04em; } }
@media (min-width: 992px) {
:root,
.bg-light {
--hl-typography-d1-font-size: 6rem;
--hl-typography-d1-line-height: 1;
--hl-typography-d1-letter-spacing: -0.04em; } }
@media (min-width: 768px) {
:root,
.bg-light {
--hl-typography-d2-font-size: 3.5rem;
--hl-typography-d2-line-height: 1;
--hl-typography-d2-letter-spacing: -0.04em; } }
@media (min-width: 992px) {
:root,
.bg-light {
--hl-typography-d2-font-size: 5rem;
--hl-typography-d2-line-height: 1;
--hl-typography-d2-letter-spacing: -0.04em; } }
@media (min-width: 768px) {
:root,
.bg-light {
--hl-typography-d3-font-size: 3rem;
--hl-typography-d3-line-height: 1;
--hl-typography-d3-letter-spacing: -0.04em; } }
@media (min-width: 992px) {
:root,
.bg-light {
--hl-typography-d3-font-size: 4.5rem;
--hl-typography-d3-line-height: 1;
--hl-typography-d3-letter-spacing: -0.04em; } }
@media (min-width: 768px) {
:root,
.bg-light {
--hl-typography-d4-font-size: 2.75rem;
--hl-typography-d4-line-height: 1;
--hl-typography-d4-letter-spacing: -0.04em; } }
@media (min-width: 992px) {
:root,
.bg-light {
--hl-typography-d4-font-size: 3.5rem;
--hl-typography-d4-line-height: 1;
--hl-typography-d4-letter-spacing: -0.04em; } }
@media (min-width: 768px) {
:root,
.bg-light {
--hl-nav-padding-y: var(--hl-spacer-lg); } }
@media (min-width: 768px) {
:root,
.bg-light {
--hl-nav-logo-height: 50px; } }
.bg-dark,
.muu--dark {
--hl-color-fg-light-default: var(--hl-color-fg-dark-default);
--hl-color-fg-light-important: var(--hl-color-fg-dark-important);
--hl-color-fg-light-disabled: var(--hl-color-fg-dark-disabled);
--hl-color-fg-light-muted: var(--hl-color-fg-dark-muted);
--hl-color-fg-light-very-muted: var(--hl-color-fg-dark-very-muted);
--hl-color-fg-light-ultra-muted: var(--hl-color-fg-dark-ultra-muted);
--hl-color-fg-light-accent: var(--hl-color-fg-dark-accent);
--hl-color-fg-light-heading: var(--hl-color-fg-dark-heading);
--hl-color-fg-light-primary: var(--hl-color-fg-dark-primary);
--hl-color-fg-light-secondary: var(--hl-color-fg-dark-secondary);
--hl-color-fg-light-tertiary: var(--hl-color-fg-dark-tertiary);
--hl-color-fg-light-danger: var(--hl-color-fg-dark-danger);
--hl-color-fg-light-info: var(--hl-color-fg-dark-info);
--hl-color-fg-light-warning: var(--hl-color-fg-dark-warning);
--hl-color-fg-light-success: var(--hl-color-fg-dark-success);
--hl-color-fg-light-interaction-standby: var(--hl-color-fg-dark-interaction-standby);
--hl-color-fg-light-interaction-hover: var(--hl-color-fg-dark-interaction-hover);
--hl-color-fg-light-interaction-focus: var(--hl-color-fg-dark-interaction-focus);
--hl-color-fg-light-interaction-pressed: var(--hl-color-fg-dark-interaction-pressed);
--hl-color-fg-light-interaction-active: var(--hl-color-fg-dark-interaction-active);
--hl-color-fg-light-interaction-active-accesible: var(--hl-color-fg-dark-interaction-active-accesible);
--hl-color-bg-light-default: var(--hl-color-bg-dark-default);
--hl-color-bg-light-primary: var(--hl-color-bg-dark-primary);
--hl-color-bg-light-secondary: var(--hl-color-bg-dark-secondary);
--hl-color-bg-light-tertiary: var(--hl-color-bg-dark-tertiary);
--hl-color-bg-light-muted: var(--hl-color-bg-dark-muted);
--hl-color-bg-light-very-muted: var(--hl-color-bg-dark-very-muted);
--hl-color-bg-light-ultra-muted: var(--hl-color-bg-dark-ultra-muted);
--hl-color-bg-light-disabled: var(--hl-color-bg-dark-disabled);
--hl-color-bg-light-alpha: var(--hl-color-bg-dark-alpha);
--hl-color-border-light-default: var(--hl-color-border-dark-default);
--hl-color-border-light-muted: var(--hl-color-border-dark-muted);
--hl-color-border-light-very-muted: var(--hl-color-border-dark-very-muted);
--hl-color-border-light-ultra-muted: var(--hl-color-border-dark-ultra-muted);
--hl-color-border-light-interaction-standby: var(--hl-color-border-dark-interaction-standby);
--hl-color-border-light-interaction-hover: var(--hl-color-border-dark-interaction-hover);
--hl-color-border-light-interaction-focus: var(--hl-color-border-dark-interaction-focus);
--hl-color-border-light-interaction-pressed: var(--hl-color-border-dark-interaction-pressed);
--hl-color-border-light-interaction-active: var(--hl-color-border-dark-interaction-active);
--hl-color-border-light-primary: var(--hl-color-border-dark-primary);
--hl-color-border-light-secondary: var(--hl-color-border-dark-secondary);
--hl-color-border-light-form: var(--hl-color-border-dark-form);
--hl-color-border-light-info: var(--hl-color-border-dark-info);
--hl-color-border-light-success: var(--hl-color-border-dark-success);
--hl-color-border-light-warning: var(--hl-color-border-dark-warning);
--hl-color-border-light-danger: var(--hl-color-border-dark-danger);
--hl-color-box-shadow-light-default: var(--hl-color-box-shadow-dark-default);
--hl-color-box-shadow-light-hover: var(--hl-color-box-shadow-dark-hover);
--hl-color-box-shadow-light-active: var(--hl-color-box-shadow-dark-active);
--hl-color-button-bg-light-disabled: var(--hl-color-button-bg-dark-disabled);
--hl-color-button-border-light-disabled: var(--hl-color-button-border-dark-disabled);
--hl-color-button-fg-light-disabled: var(--hl-color-button-fg-dark-disabled);
--hl-color-button-bg-light-disabled-transparent: var(--hl-color-button-bg-dark-disabled-transparent);
--hl-color-form-fg-light-disabled: var(--hl-color-form-fg-dark-disabled);
--hl-color-form-bg-light-disabled: var(--hl-color-form-bg-dark-disabled);
--hl-color-form-border-light-disabled: var(--hl-color-form-border-dark-disabled);
--hl-color-form-interaction-bg-light-hover: var(--hl-color-form-interaction-bg-dark-hover);
--hl-color-form-interaction-bg-light-focus: var(--hl-color-form-interaction-bg-dark-focus);
--hl-color-form-interaction-bg-light-pressed: var(--hl-color-form-interaction-bg-dark-pressed);
--hl-color-form-interaction-bg-light-active: var(--hl-color-form-interaction-bg-dark-active);
--hl-color-form-interaction-fg-light-hover: var(--hl-color-form-interaction-fg-dark-hover);
--hl-color-form-interaction-fg-light-focus: var(--hl-color-form-interaction-fg-dark-focus);
--hl-color-form-interaction-fg-light-pressed: var(--hl-color-form-interaction-fg-dark-pressed);
--hl-color-form-interaction-fg-light-active: var(--hl-color-form-interaction-fg-dark-active);
--hl-color-button-fg-light-primary-standby: var(--hl-color-button-fg-dark-primary-standby);
--hl-color-button-fg-light-primary-hover: var(--hl-color-button-fg-dark-primary-hover);
--hl-color-button-fg-light-primary-focus: var(--hl-color-button-fg-dark-primary-focus);
--hl-color-button-fg-light-primary-pressed: var(--hl-color-button-fg-dark-primary-pressed);
--hl-color-button-fg-light-primary-active: var(--hl-color-button-fg-dark-primary-active);
--hl-color-button-bg-light-primary-standby: var(--hl-color-button-bg-dark-primary-standby);
--hl-color-button-bg-light-primary-hover: var(--hl-color-button-bg-dark-primary-hover);
--hl-color-button-bg-light-primary-focus: var(--hl-color-button-bg-dark-primary-focus);
--hl-color-button-bg-light-primary-pressed: var(--hl-color-button-bg-dark-primary-pressed);
--hl-color-button-bg-light-primary-active: var(--hl-color-button-bg-dark-primary-active);
--hl-color-button-border-light-primary-standby: var(--hl-color-button-border-dark-primary-standby);
--hl-color-button-border-light-primary-hover: var(--hl-color-button-border-dark-primary-hover);
--hl-color-button-border-light-primary-focus: var(--hl-color-button-border-dark-primary-focus);
--hl-color-button-border-light-primary-pressed: var(--hl-color-button-border-dark-primary-pressed);
--hl-color-button-border-light-primary-active: var(--hl-color-button-border-dark-primary-active);
--hl-color-button-fg-light-secondary-standby: var(--hl-color-button-fg-dark-secondary-standby);
--hl-color-button-fg-light-secondary-hover: var(--hl-color-button-fg-dark-secondary-hover);
--hl-color-button-fg-light-secondary-focus: var(--hl-color-button-fg-dark-secondary-focus);
--hl-color-button-fg-light-secondary-pressed: var(--hl-color-button-fg-dark-secondary-pressed);
--hl-color-button-fg-light-secondary-active: var(--hl-color-button-fg-dark-secondary-active);
--hl-color-button-bg-light-secondary-standby: var(--hl-color-button-bg-dark-secondary-standby);
--hl-color-button-bg-light-secondary-hover: var(--hl-color-button-bg-dark-secondary-hover);
--hl-color-button-bg-light-secondary-focus: var(--hl-color-button-bg-dark-secondary-focus);
--hl-color-button-bg-light-secondary-pressed: var(--hl-color-button-bg-dark-secondary-pressed);
--hl-color-button-bg-light-secondary-active: var(--hl-color-button-bg-dark-secondary-active);
--hl-color-button-border-light-secondary-standby: var(--hl-color-button-border-dark-secondary-standby);
--hl-color-button-border-light-secondary-hover: var(--hl-color-button-border-dark-secondary-hover);
--hl-color-button-border-light-secondary-focus: var(--hl-color-button-border-dark-secondary-focus);
--hl-color-button-border-light-secondary-pressed: var(--hl-color-button-border-dark-secondary-pressed);
--hl-color-button-border-light-secondary-active: var(--hl-color-button-border-dark-secondary-active);
--hl-color-button-fg-light-tertiary-standby: var(--hl-color-button-fg-dark-tertiary-standby);
--hl-color-button-fg-light-tertiary-hover: var(--hl-color-button-fg-dark-tertiary-hover);
--hl-color-button-fg-light-tertiary-focus: var(--hl-color-button-fg-dark-tertiary-focus);
--hl-color-button-fg-light-tertiary-pressed: var(--hl-color-button-fg-dark-tertiary-pressed);
--hl-color-button-fg-light-tertiary-active: var(--hl-color-button-fg-dark-tertiary-active);
--hl-color-button-bg-light-tertiary-standby: var(--hl-color-button-bg-dark-tertiary-standby);
--hl-color-button-bg-light-tertiary-hover: var(--hl-color-button-bg-dark-tertiary-hover);
--hl-color-button-bg-light-tertiary-focus: var(--hl-color-button-bg-dark-tertiary-focus);
--hl-color-button-bg-light-tertiary-pressed: var(--hl-color-button-bg-dark-tertiary-pressed);
--hl-color-button-bg-light-tertiary-active: var(--hl-color-button-bg-dark-tertiary-active);
--hl-color-button-border-light-tertiary-standby: var(--hl-color-button-border-dark-tertiary-standby);
--hl-color-button-border-light-tertiary-hover: var(--hl-color-button-border-dark-tertiary-hover);
--hl-color-button-border-light-tertiary-focus: var(--hl-color-button-border-dark-tertiary-focus);
--hl-color-button-border-light-tertiary-pressed: var(--hl-color-button-border-dark-tertiary-pressed);
--hl-color-button-border-light-tertiary-active: var(--hl-color-button-border-dark-tertiary-active);
--hl-color-button-fg-light-link-standby: var(--hl-color-button-fg-dark-link-standby);
--hl-color-button-fg-light-link-hover: var(--hl-color-button-fg-dark-link-hover);
--hl-color-button-fg-light-link-focus: var(--hl-color-button-fg-dark-link-focus);
--hl-color-button-fg-light-link-pressed: var(--hl-color-button-fg-dark-link-pressed);
--hl-color-button-fg-light-link-active: var(--hl-color-button-fg-dark-link-active);
--hl-color-button-bg-light-link-standby: var(--hl-color-button-bg-dark-link-standby);
--hl-color-button-bg-light-link-hover: var(--hl-color-button-bg-dark-link-hover);
--hl-color-button-bg-light-link-focus: var(--hl-color-button-bg-dark-link-focus);
--hl-color-button-bg-light-link-pressed: var(--hl-color-button-bg-dark-link-pressed);
--hl-color-button-bg-light-link-active: var(--hl-color-button-bg-dark-link-active);
--hl-color-button-border-light-link-standby: var(--hl-color-button-border-dark-link-standby);
--hl-color-button-border-light-link-hover: var(--hl-color-button-border-dark-link-hover);
--hl-color-button-border-light-link-focus: var(--hl-color-button-border-dark-link-focus);
--hl-color-button-border-light-link-pressed: var(--hl-color-button-border-dark-link-pressed);
--hl-color-button-border-light-link-active: var(--hl-color-button-border-dark-link-active);
--hl-color-button-fg-light-link-surface-standby: var(--hl-color-button-fg-dark-link-surface-standby);
--hl-color-button-fg-light-link-surface-hover: var(--hl-color-button-fg-dark-link-surface-hover);
--hl-color-button-fg-light-link-surface-focus: var(--hl-color-button-fg-dark-link-surface-focus);
--hl-color-button-fg-light-link-surface-pressed: var(--hl-color-button-fg-dark-link-surface-pressed);
--hl-color-button-fg-light-link-surface-active: var(--hl-color-button-fg-dark-link-surface-active);
--hl-color-button-bg-light-link-surface-standby: var(--hl-color-button-bg-dark-link-surface-standby);
--hl-color-button-bg-light-link-surface-hover: var(--hl-color-button-bg-dark-link-surface-hover);
--hl-color-button-bg-light-link-surface-focus: var(--hl-color-button-bg-dark-link-surface-focus);
--hl-color-button-bg-light-link-surface-pressed: var(--hl-color-button-bg-dark-link-surface-pressed);
--hl-color-button-bg-light-link-surface-active: var(--hl-color-button-bg-dark-link-surface-active);
--hl-color-button-border-light-link-surface-standby: var(--hl-color-button-border-dark-link-surface-standby);
--hl-color-button-border-light-link-surface-hover: var(--hl-color-button-border-dark-link-surface-hover);
--hl-color-button-border-light-link-surface-focus: var(--hl-color-button-border-dark-link-surface-focus);
--hl-color-button-border-light-link-surface-pressed: var(--hl-color-button-border-dark-link-surface-pressed);
--hl-color-button-border-light-link-surface-active: var(--hl-color-button-border-dark-link-surface-active);
--hl-color-button-fg-light-outline-standby: var(--hl-color-button-fg-dark-outline-standby);
--hl-color-button-fg-light-outline-hover: var(--hl-color-button-fg-dark-outline-hover);
--hl-color-button-fg-light-outline-focus: var(--hl-color-button-fg-dark-outline-focus);
--hl-color-button-fg-light-outline-pressed: var(--hl-color-button-fg-dark-outline-pressed);
--hl-color-button-fg-light-outline-active: var(--hl-color-button-fg-dark-outline-active);
--hl-color-button-bg-light-outline-standby: var(--hl-color-button-bg-dark-outline-standby);
--hl-color-button-bg-light-outline-hover: var(--hl-color-button-bg-dark-outline-hover);
--hl-color-button-bg-light-outline-focus: var(--hl-color-button-bg-dark-outline-focus);
--hl-color-button-bg-light-outline-pressed: var(--hl-color-button-bg-dark-outline-pressed);
--hl-color-button-bg-light-outline-active: var(--hl-color-button-bg-dark-outline-active);
--hl-color-button-border-light-outline-standby: var(--hl-color-button-border-dark-outline-standby);
--hl-color-button-border-light-outline-hover: var(--hl-color-button-border-dark-outline-hover);
--hl-color-button-border-light-outline-focus: var(--hl-color-button-border-dark-outline-focus);
--hl-color-button-border-light-outline-pressed: var(--hl-color-button-border-dark-outline-pressed);
--hl-color-button-border-light-outline-active: var(--hl-color-button-border-dark-outline-active);
--hl-color-button-fg-light-borderless-standby: var(--hl-color-button-fg-dark-borderless-standby);
--hl-color-button-fg-light-borderless-hover: var(--hl-color-button-fg-dark-borderless-hover);
--hl-color-button-fg-light-borderless-focus: var(--hl-color-button-fg-dark-borderless-focus);
--hl-color-button-fg-light-borderless-pressed: var(--hl-color-button-fg-dark-borderless-pressed);
--hl-color-button-fg-light-borderless-active: var(--hl-color-button-fg-dark-borderless-active);
--hl-color-button-bg-light-borderless-standby: var(--hl-color-button-bg-dark-borderless-standby);
--hl-color-button-bg-light-borderless-hover: var(--hl-color-button-bg-dark-borderless-hover);
--hl-color-button-bg-light-borderless-focus: var(--hl-color-button-bg-dark-borderless-focus);
--hl-color-button-bg-light-borderless-pressed: var(--hl-color-button-bg-dark-borderless-pressed);
--hl-color-button-bg-light-borderless-active: var(--hl-color-button-bg-dark-borderless-active);
--hl-color-button-border-light-borderless-standby: var(--hl-color-button-border-dark-borderless-standby);
--hl-color-button-border-light-borderless-hover: var(--hl-color-button-border-dark-borderless-hover);
--hl-color-button-border-light-borderless-focus: var(--hl-color-button-border-dark-borderless-focus);
--hl-color-button-border-light-borderless-pressed: var(--hl-color-button-border-dark-borderless-pressed);
--hl-color-button-border-light-borderless-active: var(--hl-color-button-border-dark-borderless-active);
--hl-color-button-fg-light-interaction-surface-standby: var(--hl-color-button-fg-dark-interaction-surface-standby);
--hl-color-button-fg-light-interaction-surface-hover: var(--hl-color-button-fg-dark-interaction-surface-hover);
--hl-color-button-fg-light-interaction-surface-focus: var(--hl-color-button-fg-dark-interaction-surface-focus);
--hl-color-button-fg-light-interaction-surface-pressed: var(--hl-color-button-fg-dark-interaction-surface-pressed);
--hl-color-button-fg-light-interaction-surface-active: var(--hl-color-button-fg-dark-interaction-surface-active);
--hl-color-button-bg-light-interaction-surface-standby: var(--hl-color-button-bg-dark-interaction-surface-standby);
--hl-color-button-bg-light-interaction-surface-hover: var(--hl-color-button-bg-dark-interaction-surface-hover);
--hl-color-button-bg-light-interaction-surface-focus: var(--hl-color-button-bg-dark-interaction-surface-focus);
--hl-color-button-bg-light-interaction-surface-pressed: var(--hl-color-button-bg-dark-interaction-surface-pressed);
--hl-color-button-bg-light-interaction-surface-active: var(--hl-color-button-bg-dark-interaction-surface-active);
--hl-color-button-border-light-interaction-surface-standby: var(--hl-color-button-border-dark-interaction-surface-standby);
--hl-color-button-border-light-interaction-surface-hover: var(--hl-color-button-border-dark-interaction-surface-hover);
--hl-color-button-border-light-interaction-surface-focus: var(--hl-color-button-border-dark-interaction-surface-focus);
--hl-color-button-border-light-interaction-surface-pressed: var(--hl-color-button-border-dark-interaction-surface-pressed);
--hl-color-button-border-light-interaction-surface-active: var(--hl-color-button-border-dark-interaction-surface-active);
--hl-color-button-fg-light-warning-standby: var(--hl-color-button-fg-dark-warning-standby);
--hl-color-button-fg-light-warning-hover: var(--hl-color-button-fg-dark-warning-hover);
--hl-color-button-fg-light-warning-focus: var(--hl-color-button-fg-dark-warning-focus);
--hl-color-button-fg-light-warning-pressed: var(--hl-color-button-fg-dark-warning-pressed);
--hl-color-button-fg-light-warning-active: var(--hl-color-button-fg-dark-warning-active);
--hl-color-button-bg-light-warning-standby: var(--hl-color-button-bg-dark-warning-standby);
--hl-color-button-bg-light-warning-hover: var(--hl-color-button-bg-dark-warning-hover);
--hl-color-button-bg-light-warning-focus: var(--hl-color-button-bg-dark-warning-focus);
--hl-color-button-bg-light-warning-pressed: var(--hl-color-button-bg-dark-warning-pressed);
--hl-color-button-bg-light-warning-active: var(--hl-color-button-bg-dark-warning-active);
--hl-color-button-border-light-warning-standby: var(--hl-color-button-border-dark-warning-standby);
--hl-color-button-border-light-warning-hover: var(--hl-color-button-border-dark-warning-hover);
--hl-color-button-border-light-warning-focus: var(--hl-color-button-border-dark-warning-focus);
--hl-color-button-border-light-warning-pressed: var(--hl-color-button-border-dark-warning-pressed);
--hl-color-button-border-light-warning-active: var(--hl-color-button-border-dark-warning-active);
--hl-color-button-fg-light-info-standby: var(--hl-color-button-fg-dark-info-standby);
--hl-color-button-fg-light-info-hover: var(--hl-color-button-fg-dark-info-hover);
--hl-color-button-fg-light-info-focus: var(--hl-color-button-fg-dark-info-focus);
--hl-color-button-fg-light-info-pressed: var(--hl-color-button-fg-dark-info-pressed);
--hl-color-button-fg-light-info-active: var(--hl-color-button-fg-dark-info-active);
--hl-color-button-bg-light-info-standby: var(--hl-color-button-bg-dark-info-standby);
--hl-color-button-bg-light-info-hover: var(--hl-color-button-bg-dark-info-hover);
--hl-color-button-bg-light-info-focus: var(--hl-color-button-bg-dark-info-focus);
--hl-color-button-bg-light-info-pressed: var(--hl-color-button-bg-dark-info-pressed);
--hl-color-button-bg-light-info-active: var(--hl-color-button-bg-dark-info-active);
--hl-color-button-border-light-info-standby: var(--hl-color-button-border-dark-info-standby);
--hl-color-button-border-light-info-hover: var(--hl-color-button-border-dark-info-hover);
--hl-color-button-border-light-info-focus: var(--hl-color-button-border-dark-info-focus);
--hl-color-button-border-light-info-pressed: var(--hl-color-button-border-dark-info-pressed);
--hl-color-button-border-light-info-active: var(--hl-color-button-border-dark-info-active);
--hl-color-button-fg-light-success-standby: var(--hl-color-button-fg-dark-success-standby);
--hl-color-button-fg-light-success-hover: var(--hl-color-button-fg-dark-success-hover);
--hl-color-button-fg-light-success-focus: var(--hl-color-button-fg-dark-success-focus);
--hl-color-button-fg-light-success-pressed: var(--hl-color-button-fg-dark-success-pressed);
--hl-color-button-fg-light-success-active: var(--hl-color-button-fg-dark-success-active);
--hl-color-button-bg-light-success-standby: var(--hl-color-button-bg-dark-success-standby);
--hl-color-button-bg-light-success-hover: var(--hl-color-button-bg-dark-success-hover);
--hl-color-button-bg-light-success-focus: var(--hl-color-button-bg-dark-success-focus);
--hl-color-button-bg-light-success-pressed: var(--hl-color-button-bg-dark-success-pressed);
--hl-color-button-bg-light-success-active: var(--hl-color-button-bg-dark-success-active);
--hl-color-button-border-light-success-standby: var(--hl-color-button-border-dark-success-standby);
--hl-color-button-border-light-success-hover: var(--hl-color-button-border-dark-success-hover);
--hl-color-button-border-light-success-focus: var(--hl-color-button-border-dark-success-focus);
--hl-color-button-border-light-success-pressed: var(--hl-color-button-border-dark-success-pressed);
--hl-color-button-border-light-success-active: var(--hl-color-button-border-dark-success-active);
--hl-color-button-fg-light-danger-standby: var(--hl-color-button-fg-dark-danger-standby);
--hl-color-button-fg-light-danger-hover: var(--hl-color-button-fg-dark-danger-hover);
--hl-color-button-fg-light-danger-focus: var(--hl-color-button-fg-dark-danger-focus);
--hl-color-button-fg-light-danger-pressed: var(--hl-color-button-fg-dark-danger-pressed);
--hl-color-button-fg-light-danger-active: var(--hl-color-button-fg-dark-danger-active);
--hl-color-button-bg-light-danger-standby: var(--hl-color-button-bg-dark-danger-standby);
--hl-color-button-bg-light-danger-hover: var(--hl-color-button-bg-dark-danger-hover);
--hl-color-button-bg-light-danger-focus: var(--hl-color-button-bg-dark-danger-focus);
--hl-color-button-bg-light-danger-pressed: var(--hl-color-button-bg-dark-danger-pressed);
--hl-color-button-bg-light-danger-active: var(--hl-color-button-bg-dark-danger-active);
--hl-color-button-border-light-danger-standby: var(--hl-color-button-border-dark-danger-standby);
--hl-color-button-border-light-danger-hover: var(--hl-color-button-border-dark-danger-hover);
--hl-color-button-border-light-danger-focus: var(--hl-color-button-border-dark-danger-focus);
--hl-color-button-border-light-danger-pressed: var(--hl-color-button-border-dark-danger-pressed);
--hl-color-button-border-light-danger-active: var(--hl-color-button-border-dark-danger-active);
--hl-color-button-fg-light-remove-standby: var(--hl-color-button-fg-dark-remove-standby);
--hl-color-button-fg-light-remove-hover: var(--hl-color-button-fg-dark-remove-hover);
--hl-color-button-fg-light-remove-focus: var(--hl-color-button-fg-dark-remove-focus);
--hl-color-button-bg-light-remove-standby: var(--hl-color-button-bg-dark-remove-standby);
--hl-color-button-fg-light-remove-pressed: var(--hl-color-button-fg-dark-remove-pressed);
--hl-color-button-fg-light-remove-active: var(--hl-color-button-fg-dark-remove-active);
--hl-color-button-bg-light-remove-hover: var(--hl-color-button-bg-dark-remove-hover);
--hl-color-button-bg-light-remove-focus: var(--hl-color-button-bg-dark-remove-focus);
--hl-color-button-bg-light-remove-pressed: var(--hl-color-button-bg-dark-remove-pressed);
--hl-color-button-bg-light-remove-active: var(--hl-color-button-bg-dark-remove-active);
--hl-color-button-border-light-remove-standby: var(--hl-color-button-border-dark-remove-standby);
--hl-color-button-border-light-remove-hover: var(--hl-color-button-border-dark-remove-hover);
--hl-color-button-border-light-remove-focus: var(--hl-color-button-border-dark-remove-focus);
--hl-color-button-border-light-remove-pressed: var(--hl-color-button-border-dark-remove-pressed);
--hl-color-button-border-light-remove-active: var(--hl-color-button-border-dark-remove-active);
--hl-color-button-fg-light-black-standby: var(--hl-color-button-fg-dark-black-standby);
--hl-color-button-fg-light-black-hover: var(--hl-color-button-fg-dark-black-hover);
--hl-color-button-fg-light-black-focus: var(--hl-color-button-fg-dark-black-focus);
--hl-color-button-fg-light-black-pressed: var(--hl-color-button-fg-dark-black-pressed);
--hl-color-button-fg-light-black-active: var(--hl-color-button-fg-dark-black-active);
--hl-color-button-bg-light-black-standby: var(--hl-color-button-bg-dark-black-standby);
--hl-color-button-bg-light-black-hover: var(--hl-color-button-bg-dark-black-hover);
--hl-color-button-bg-light-black-focus: var(--hl-color-button-bg-dark-black-focus);
--hl-color-button-bg-light-black-pressed: var(--hl-color-button-bg-dark-black-pressed);
--hl-color-button-bg-light-black-active: var(--hl-color-button-bg-dark-black-active);
--hl-color-button-border-light-black-standby: var(--hl-color-button-border-dark-black-standby);
--hl-color-button-border-light-black-hover: var(--hl-color-button-border-dark-black-hover);
--hl-color-button-border-light-black-focus: var(--hl-color-button-border-dark-black-focus);
--hl-color-button-border-light-black-pressed: var(--hl-color-button-border-dark-black-pressed);
--hl-color-button-border-light-black-active: var(--hl-color-button-border-dark-black-active);
--hl-table-color-bg-light-success: var(--hl-table-color-bg-dark-success);
--hl-table-color-bg-light-info: var(--hl-table-color-bg-dark-info);
--hl-table-color-bg-light-danger: var(--hl-table-color-bg-dark-danger);
--hl-table-color-bg-light-warning: var(--hl-table-color-bg-dark-warning);
--hl-table-color-border-top-blue-light: var(--hl-table-color-border-top-blue-dark);
--hl-color-border-light-default-alpha: var(--hl-color-border-dark-default-alpha);
--hl-color-supporting-blue-light: var(--hl-color-supporting-blue-dark);
--hl-color-supporting-yellow-light: var(--hl-color-supporting-yellow-dark);
--hl-color-supporting-green-light: var(--hl-color-supporting-green-dark);
--hl-color-supporting-purple-light: var(--hl-color-supporting-purple-dark);
--hl-color-supporting-pink-light: var(--hl-color-supporting-pink-dark);
--hl-color-supporting-orange-light: var(--hl-color-supporting-orange-dark);
--hl-color-link-fg-light-standby: var(--hl-color-link-fg-dark-standby);
--hl-color-link-fg-light-hover: var(--hl-color-link-fg-dark-hover);
--hl-color-link-fg-light-focus: var(--hl-color-link-fg-dark-focus);
--hl-color-link-fg-light-pressed: var(--hl-color-link-fg-dark-pressed);
--hl-color-link-fg-light-active: var(--hl-color-link-fg-dark-active);
--hl-section-color-fg-light-default: var(--hl-section-color-fg-dark-default); }
*,
*::before,
*::after {
box-sizing: border-box; }
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(var(--hl-color-core-black), 0); }
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block; }
body {
margin: 0;
font-family: var(--hl-typography-font-family-body);
font-size: var(--hl-font-size-md);
font-weight: var(--hl-typography-font-weight-body-regular);
line-height: var(--hl-typography-line-height-very-increased);
color: var(--hl-color-fg-light-default);
text-align: left;
background-color: var(--hl-color-bg-light-default);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
[tabindex="-1"]:focus:not(:focus-visible) {
outline: 0 !important; }
hr {
box-sizing: content-box;
height: 0;
overflow: visible; }
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: var(--hl-spacer-lg); }
p {
margin-top: 0;
margin-bottom: 1rem; }
abbr[title],
abbr[data-original-title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
border-bottom: 0;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none; }
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit; }
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem; }
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0; }
dt {
font-weight: var(--hl-typography-font-weight-body-bold); }
dd {
margin-bottom: 0.5rem;
margin-left: 0; }
blockquote {
margin: 0 0 1rem; }
b,
strong {
font-weight: var(--hl-typography-font-weight-body-bold); }
small {
font-size: var(--hl-font-size-xs); }
sub,
sup {
position: relative;
font-size: var(--hl-font-size-xs);
line-height: 0;
vertical-align: baseline; }
sub {
bottom: -0.25em; }
sup {
top: -0.5em; }
a {
color: var(--hl-color-link-fg-light-standby);
-webkit-text-decoration: var(--hl-link-decoration);
text-decoration: var(--hl-link-decoration);
background-color: transparent; }
a:not(.disabled):focus-visible, a:not(.disabled):has(input):focus-within {
animation: focus-outline-animation var(--hl-transition-normal) forwards; }
a.disabled:focus-visible, a.disabled:focus-within {
outline: 0 !important; }
a.hover,
a:hover {
color: var(--hl-color-link-fg-light-hover);
-webkit-text-decoration: var(--hl-link-decoration-hover);
text-decoration: var(--hl-link-decoration-hover); }
a.focus,
a:focus-visible {
color: var(--hl-color-link-fg-light-focus); }
a.focus-visible,
a:focus-visible {
color: var(--hl-color-link-fg-light-focus); }
a.pressed,
a:active {
color: var(--hl-color-link-fg-light-pressed);
-webkit-text-decoration: var(--hl-link-decoration-active);
text-decoration: var(--hl-link-decoration-active); }
a.active {
color: var(--hl-color-link-fg-light-active); }
a:not([class]) {
word-break: break-word; }
a:not([href]):not([class]) {
color: inherit;
text-decoration: none; }
a:not([href]):not([class]):hover {
color: inherit;
text-decoration: none; }
pre,
code,
kbd,
samp {
font-family: var(--hl-typography-font-family-monospaced);
font-size: var(--hl-font-size-xs); }
pre {
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
-ms-overflow-style: scrollbar; }
figure {
margin: 0 0 1rem; }
img {
vertical-align: middle;
border-style: none; }
svg {
overflow: hidden;
vertical-align: middle; }
table {
border-collapse: collapse; }
caption {
padding-top: var(--hl-spacer-md);
padding-bottom: var(--hl-spacer-md);
color: var(--hl-color-fg-light-muted);
text-align: left;
caption-side: bottom; }
th {
font-weight: var(--hl-typography-font-weight-body-bold);
text-align: inherit;
text-align: -webkit-match-parent; }
label,
.label {
display: inline-block;
margin-bottom: var(--hl-spacer-3xs); }
button {
border-radius: 0; }
button:focus:not(:focus-visible) {
outline: 0; }
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit; }
button,
input {
overflow: visible; }
button,
select {
text-transform: none; }
[role=button] {
cursor: pointer; }
select {
word-wrap: normal;
-webkit-appearance: unset;
-moz-appearance: unset;
appearance: unset; }
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button; }
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
cursor: pointer; }
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
padding: 0;
border-style: none; }
input[type=radio],
input[type=checkbox] {
box-sizing: border-box;
padding: 0; }
textarea {
overflow: auto;
resize: vertical; }
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0; }
legend {
display: block;
width: 100%;
max-width: 100%;
padding: 0;
margin-bottom: 0.5rem;
font-size: 1.5rem;
line-height: inherit;
color: inherit;
white-space: normal; }
progress {
vertical-align: baseline; }
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto; }
[type=search] {
outline-offset: -2px;
-webkit-appearance: none; }
[type=search]::-webkit-search-decoration {
-webkit-appearance: none; }
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button; }
output {
display: inline-block; }
summary {
display: list-item;
cursor: pointer; }
template {
display: none; }
[hidden] {
display: none !important; }
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: var(--hl-color-fg-light-important);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold); }
h1,
.h1 {
font-size: var(--hl-typography-h1-font-size);
line-height: var(--hl-typography-h1-line-height);
letter-spacing: var(--hl-typography-h1-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg); }
h2,
.h2 {
font-size: var(--hl-typography-h2-font-size);
line-height: var(--hl-typography-h2-line-height);
letter-spacing: var(--hl-typography-h2-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg); }
h3,
.h3 {
font-size: var(--hl-typography-h3-font-size);
line-height: var(--hl-typography-h3-line-height);
letter-spacing: var(--hl-typography-h3-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg); }
h4,
.h4 {
font-size: var(--hl-typography-h4-font-size);
line-height: var(--hl-typography-h4-line-height);
letter-spacing: var(--hl-typography-h4-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg); }
h5,
.h5 {
font-size: var(--hl-typography-h5-font-size);
line-height: var(--hl-typography-h5-line-height);
letter-spacing: var(--hl-typography-h5-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg); }
h6,
.h6 {
font-size: var(--hl-typography-h6-font-size);
line-height: var(--hl-typography-h6-line-height);
letter-spacing: var(--hl-typography-h6-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg); }
.p1 {
font-size: var(--hl-typography-p1-font-size);
line-height: var(--hl-typography-p1-line-height);
letter-spacing: var(--hl-typography-p1-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular); }
.p2 {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular); }
.p3 {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular); }
.p4 {
font-size: var(--hl-typography-p4-font-size);
line-height: var(--hl-typography-p4-line-height);
letter-spacing: var(--hl-typography-p4-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular); }
.p1-bold {
font-size: var(--hl-typography-p1-font-size);
line-height: var(--hl-typography-p1-line-height);
letter-spacing: var(--hl-typography-p1-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold); }
.p2-bold {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold); }
.p3-bold {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold); }
.p4-bold {
font-size: var(--hl-typography-p4-font-size);
line-height: var(--hl-typography-p4-line-height);
letter-spacing: var(--hl-typography-p4-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold); }
.lead {
font-size: var(--hl-font-size-xl);
font-weight: var(--hl-typography-font-weight-heading-bold); }
.display-1,
.d1 {
font-size: var(--hl-typography-d1-font-size);
line-height: var(--hl-typography-d1-line-height);
letter-spacing: var(--hl-typography-d1-letter-spacing); }
.display-2,
.d2 {
font-size: var(--hl-typography-d2-font-size);
line-height: var(--hl-typography-d2-line-height);
letter-spacing: var(--hl-typography-d2-letter-spacing); }
.display-3,
.d3 {
font-size: var(--hl-typography-d3-font-size);
line-height: var(--hl-typography-d3-line-height);
letter-spacing: var(--hl-typography-d3-letter-spacing); }
.display-4,
.d4 {
font-size: var(--hl-typography-d4-font-size);
line-height: var(--hl-typography-d4-line-height);
letter-spacing: var(--hl-typography-d4-letter-spacing); }
hr {
margin-top: var(--hl-spacer-md);
margin-bottom: var(--hl-spacer-md);
border: 0;
border-top: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
width: 100%; }
small,
.small {
font-size: 0.75em;
font-weight: var(--hl-typography-font-weight-body-regular);
letter-spacing: var(--hl-typography-letter-spacing-default); }
mark,
.mark {
padding: 0.2em;
background-color: #fcf8e3; }
.list-unstyled {
padding-left: 0;
list-style-type: ""; }
.list-inline {
padding-left: 0;
list-style-type: ""; }
.list-inline-item {
display: inline-block; }
.list-inline-item:not(:last-child) {
margin-right: 0.5rem; }
.initialism {
font-size: 90%;
text-transform: uppercase; }
.blockquote {
margin-bottom: var(--hl-spacer-md);
font-size: var(--hl-font-size-xl); }
.blockquote-footer {
display: block;
font-size: var(--hl-font-size-sm);
color: var(--hl-color-fg-light-muted); }
.blockquote-footer::before {
content: "\2014 "; }
.bg-dark {
color: var(--hl-color-fg-dark-default);
color-scheme: dark; }
.text-accent {
color: var(--hl-color-fg-light-accent); }
.img-fluid {
max-width: 100%;
height: auto; }
.img-thumbnail {
padding: var(--hl-spacer-2xs);
background-color: var(--hl-color-bg-light-default);
border: var(--hl-border-width-default) solid #EDEDED;
border-radius: var(--hl-border-radius-default);
max-width: 100%;
height: auto; }
.figure {
display: inline-block; }
.figure-img {
margin-bottom: var(--hl-spacer-xs);
line-height: var(--hl-typography-line-height-very-decreased); }
.figure-caption {
font-size: 90%;
color: #999999; }
.picture {
width: 100%;
height: auto;
display: block;
overflow: hidden;
position: relative; }
.picture__img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center; }
.picture--21x9 {
padding-top: 42.8571428571% !important; }
.picture--16x9 {
padding-top: 56.25% !important; }
.picture--4x3 {
padding-top: 75% !important; }
.picture--3x4 {
padding-top: 133.3333333333% !important; }
.picture--2x1 {
padding-top: 50% !important; }
.picture--1x2 {
padding-top: 200% !important; }
.picture--1x1 {
padding-top: 100% !important; }
.picture--left .picture__img {
-o-object-position: left;
object-position: left; }
.picture--right .picture__img {
-o-object-position: right;
object-position: right; }
.picture--top .picture__img {
-o-object-position: top;
object-position: top; }
.picture--bottom .picture__img {
-o-object-position: bottom;
object-position: bottom; }
.picture-bg {
width: 100%;
height: 100%;
position: absolute;
display: block;
overflow: hidden;
z-index: 0;
top: 0;
bottom: 0;
left: 0;
right: 0; }
.picture-bg__img {
position: absolute; }
.picture-bg + .picture-bg-content {
z-index: 0; }
.picture-bg--centered .picture-bg__img {
top: 50% !important;
left: 50% !important;
right: auto;
bottom: auto;
transform: translate(-50%, -50%) !important;
width: auto;
height: auto; }
.picture-bg--extend .picture-bg__img {
width: 100%;
height: 100%; }
.picture-bg--extend-h .picture-bg__img {
height: 100%; }
.picture-bg--extend-w .picture-bg__img {
width: 100%; }
.picture-bg--top .picture-bg__img {
top: 0;
bottom: auto;
transform: none; }
.picture-bg--left .picture-bg__img {
left: 0;
right: auto;
transform: none; }
.picture-bg--right .picture-bg__img {
left: auto;
right: 0;
transform: none; }
.picture-bg--bottom .picture-bg__img {
bottom: 0;
top: auto;
transform: none; }
.picture-cover {
width: 100%;
height: 100%;
display: block;
overflow: hidden;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute; }
.picture-cover__img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 50% 50%;
object-position: 50% 50%; }
.picture-cover--left .picture-cover__img {
-o-object-position: left;
object-position: left; }
.picture-cover--right .picture-cover__img {
-o-object-position: right;
object-position: right; }
.picture-cover--top .picture-cover__img {
-o-object-position: top;
object-position: top; }
.picture-cover--bottom .picture-cover__img {
-o-object-position: bottom;
object-position: bottom; }
.picture-full-width {
display: block; }
.picture-full-width img {
width: 100%; }
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth; } }
@media (prefers-reduced-motion) {
:root {
--hl-transition-quickly: 0.1ms linear;
--hl-transition-normal: 0.1ms linear;
--hl-transition-slowly: 0.1ms linear; } }
@keyframes focus-outline-animation {
0% {
outline: var(--hl-color-primary) solid var(--hl-border-width-default);
outline-offset: var(--hl-spacer-md); }
60% {
outline: var(--hl-color-primary) solid var(--hl-border-width-default);
outline-offset: var(--hl-spacer-xs); }
100% {
outline: var(--hl-navigation-focus-visible, transparent) solid var(--hl-border-width-default);
outline-offset: var(--hl-spacer-xs); } }
@keyframes fade-in-bottom {
0% {
transform: translateY(20px);
opacity: 0; }
100% {
transform: translateY(0);
opacity: 1; } }
@keyframes shine-lines {
0% {
background-position: -100px; }
40%, 100% {
background-position: 140px; } }
.mosaic-devices__block .stretched-link::before {
content: "";
position: absolute;
top: var(--hl-inset-outline-focus);
left: var(--hl-inset-outline-focus);
right: var(--hl-inset-outline-focus);
bottom: var(--hl-inset-outline-focus);
background: transparent;
outline: var(--hl-color-primary) solid var(--hl-border-width-default);
transition: none;
visibility: hidden;
z-index: 1; }
.mosaic-devices__block .stretched-link:focus-visible {
--hl-inset-outline-focus: 0;
animation: none;
outline: none;
overflow: hidden; }
.mosaic-devices__block .stretched-link:focus-visible::before {
visibility: visible;
transition: all 0.3s linear; }
.animation-none {
animation: none !important; }
.transition-none {
transition: none !important; }
.navigation-focus-visible,
.navigation-focus-visible .hlx-scope .link-icon {
--hl-navigation-focus-visible: currentColor; }
.navigation-focus-visible a,
.navigation-focus-visible .dropdown-item,
.navigation-focus-visible .hlx-scope .hl-btn {
--hl-navigation-focus-visible: var(--hl-color-primary); }
.navigation-focus-visible .btn, .navigation-focus-visible .subnav__nav__item, .navigation-focus-visible .charger-btn,
.navigation-focus-visible .hl-btn {
--hl-navigation-focus-visible: var(--a11y-color-navigation-focus-visible); }
.article--docs {
max-width: 960px;
margin: 0 auto; }
.article--docs img {
max-width: 100%;
height: auto;
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-standby); }
code {
font-size: 87.5%;
color: var(--hl-color-functional-danger);
word-wrap: break-word;
background: var(--hl-color-bg-light-ultra-muted); }
a > code {
color: inherit; }
kbd {
padding: var(--hl-spacer-2xs) var(--hl-spacer-xs);
font-size: 87.5%;
color: var(--hl-color-core-white);
background-color: var(--hl-color-core-black);
border-radius: var(--hl-border-radius-default); }
kbd kbd {
padding: 0;
font-size: 100%;
font-weight: var(--hl-typography-font-weight-body-bold); }
pre {
display: block;
font-size: 87.5%;
color: var(--hl-color-core-white);
padding: var(--hl-spacer-md); }
pre code {
background: transparent;
font-size: inherit;
word-break: normal; }
.pre-scrollable {
max-height: 340px;
overflow-y: scroll; }
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
width: 100%;
padding-right: calc(var(--hl-grid-spacer) * var(--hl-factor-grid-gutter-width));
padding-left: calc(var(--hl-grid-spacer) * var(--hl-factor-grid-gutter-width));
margin-right: auto;
margin-left: auto; }
@media (min-width: 576px) {
.container-sm, .container {
max-width: 540px; } }
@media (min-width: 768px) {
.container-md, .container-sm, .container {
max-width: 720px; } }
@media (min-width: 992px) {
.container-lg, .container-md, .container-sm, .container {
max-width: 960px; } }
@media (min-width: 1200px) {
.container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1140px; } }
@media (min-width: 1400px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1320px; } }
.container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
max-width: 1400px; }
.container-fluid.container-max-xs, .container-max-xs.container-sm, .container-max-xs.container-md, .container-max-xs.container-lg, .container-max-xs.container-xl, .container-max-xs.container-xxl,
.container-max-xs .container-fluid,
.container-max-xs .container-sm,
.container-max-xs .container-md,
.container-max-xs .container-lg,
.container-max-xs .container-xl,
.container-max-xs .container-xxl,
.container-fluid.container--max-xs,
.container--max-xs.container-sm,
.container--max-xs.container-md,
.container--max-xs.container-lg,
.container--max-xs.container-xl,
.container--max-xs.container-xxl,
.container--max-xs .container-fluid,
.container--max-xs .container-sm,
.container--max-xs .container-md,
.container--max-xs .container-lg,
.container--max-xs .container-xl,
.container--max-xs .container-xxl {
max-width: 375px; }
.container-fluid.container-max-sm, .container-max-sm.container-sm, .container-max-sm.container-md, .container-max-sm.container-lg, .container-max-sm.container-xl, .container-max-sm.container-xxl,
.container-max-sm .container-fluid,
.container-max-sm .container-sm,
.container-max-sm .container-md,
.container-max-sm .container-lg,
.container-max-sm .container-xl,
.container-max-sm .container-xxl,
.container-fluid.container--max-sm,
.container--max-sm.container-sm,
.container--max-sm.container-md,
.container--max-sm.container-lg,
.container--max-sm.container-xl,
.container--max-sm.container-xxl,
.container--max-sm .container-fluid,
.container--max-sm .container-sm,
.container--max-sm .container-md,
.container--max-sm .container-lg,
.container--max-sm .container-xl,
.container--max-sm .container-xxl {
max-width: 576px; }
.container-fluid.container-max-md, .container-max-md.container-sm, .container-max-md.container-md, .container-max-md.container-lg, .container-max-md.container-xl, .container-max-md.container-xxl,
.container-max-md .container-fluid,
.container-max-md .container-sm,
.container-max-md .container-md,
.container-max-md .container-lg,
.container-max-md .container-xl,
.container-max-md .container-xxl,
.container-fluid.container--max-md,
.container--max-md.container-sm,
.container--max-md.container-md,
.container--max-md.container-lg,
.container--max-md.container-xl,
.container--max-md.container-xxl,
.container--max-md .container-fluid,
.container--max-md .container-sm,
.container--max-md .container-md,
.container--max-md .container-lg,
.container--max-md .container-xl,
.container--max-md .container-xxl {
max-width: 768px; }
.container-fluid.container-max-lg, .container-max-lg.container-sm, .container-max-lg.container-md, .container-max-lg.container-lg, .container-max-lg.container-xl, .container-max-lg.container-xxl,
.container-max-lg .container-fluid,
.container-max-lg .container-sm,
.container-max-lg .container-md,
.container-max-lg .container-lg,
.container-max-lg .container-xl,
.container-max-lg .container-xxl,
.container-fluid.container--max-lg,
.container--max-lg.container-sm,
.container--max-lg.container-md,
.container--max-lg.container-lg,
.container--max-lg.container-xl,
.container--max-lg.container-xxl,
.container--max-lg .container-fluid,
.container--max-lg .container-sm,
.container--max-lg .container-md,
.container--max-lg .container-lg,
.container--max-lg .container-xl,
.container--max-lg .container-xxl {
max-width: 992px; }
.container-fluid.container-max-xl, .container-max-xl.container-sm, .container-max-xl.container-md, .container-max-xl.container-lg, .container-max-xl.container-xl, .container-max-xl.container-xxl,
.container-max-xl .container-fluid,
.container-max-xl .container-sm,
.container-max-xl .container-md,
.container-max-xl .container-lg,
.container-max-xl .container-xl,
.container-max-xl .container-xxl,
.container-fluid.container--max-xl,
.container--max-xl.container-sm,
.container--max-xl.container-md,
.container--max-xl.container-lg,
.container--max-xl.container-xl,
.container--max-xl.container-xxl,
.container--max-xl .container-fluid,
.container--max-xl .container-sm,
.container--max-xl .container-md,
.container--max-xl .container-lg,
.container--max-xl .container-xl,
.container--max-xl .container-xxl {
max-width: 1200px; }
.container-fluid.container-max-xxl, .container-max-xxl.container-sm, .container-max-xxl.container-md, .container-max-xxl.container-lg, .container-max-xxl.container-xl, .container-max-xxl.container-xxl,
.container-max-xxl .container-fluid,
.container-max-xxl .container-sm,
.container-max-xxl .container-md,
.container-max-xxl .container-lg,
.container-max-xxl .container-xl,
.container-max-xxl .container-xxl,
.container-fluid.container--max-xxl,
.container--max-xxl.container-sm,
.container--max-xxl.container-md,
.container--max-xxl.container-lg,
.container--max-xxl.container-xl,
.container--max-xxl.container-xxl,
.container--max-xxl .container-fluid,
.container--max-xxl .container-sm,
.container--max-xxl .container-md,
.container--max-xxl .container-lg,
.container--max-xxl .container-xl,
.container--max-xxl .container-xxl {
max-width: 1400px; }
.container-fluid.container-max-xxxl, .container-max-xxxl.container-sm, .container-max-xxxl.container-md, .container-max-xxxl.container-lg, .container-max-xxxl.container-xl, .container-max-xxxl.container-xxl,
.container-max-xxxl .container-fluid,
.container-max-xxxl .container-sm,
.container-max-xxxl .container-md,
.container-max-xxxl .container-lg,
.container-max-xxxl .container-xl,
.container-max-xxxl .container-xxl,
.container-fluid.container--max-xxxl,
.container--max-xxxl.container-sm,
.container--max-xxxl.container-md,
.container--max-xxxl.container-lg,
.container--max-xxxl.container-xl,
.container--max-xxxl.container-xxl,
.container--max-xxxl .container-fluid,
.container--max-xxxl .container-sm,
.container--max-xxxl .container-md,
.container--max-xxxl .container-lg,
.container--max-xxxl .container-xl,
.container--max-xxxl .container-xxl {
max-width: 1880px; }
.container-fluid--full-width .container-fluid, .container-fluid--full-width .container-sm, .container-fluid--full-width .container-md, .container-fluid--full-width .container-lg, .container-fluid--full-width .container-xl, .container-fluid--full-width .container-xxl,
.container-fluid--full-width.container-fluid,
.container-fluid--full-width.container-sm,
.container-fluid--full-width.container-md,
.container-fluid--full-width.container-lg,
.container-fluid--full-width.container-xl,
.container-fluid--full-width.container-xxl {
max-width: none; }
.row {
display: flex;
flex-wrap: wrap;
margin-right: calc(var(--hl-grid-spacer) * -0.5);
margin-left: calc(var(--hl-grid-spacer) * -0.5); }
.row.row-gap {
margin-top: calc(-1 * var(--hl-grid-spacer)); }
.row.row-gap > .col,
.row.row-gap > [class*=col-] {
margin-top: var(--hl-grid-spacer); }
.row.row-gap ~ .row-gap {
margin-top: inherit; }
.no-gutters {
margin-right: 0;
margin-left: 0; }
.no-gutters > .col,
.no-gutters > [class*=col-] {
padding-right: 0;
padding-left: 0; }
.col-xxxl,
.col-xxxl-auto, .col-xxxl-12, .col-xxxl-11, .col-xxxl-10, .col-xxxl-9, .col-xxxl-8, .col-xxxl-7, .col-xxxl-6, .col-xxxl-5, .col-xxxl-4, .col-xxxl-3, .col-xxxl-2, .col-xxxl-1, .col-xxl,
.col-xxl-auto, .col-xxl-12, .col-xxl-11, .col-xxl-10, .col-xxl-9, .col-xxl-8, .col-xxl-7, .col-xxl-6, .col-xxl-5, .col-xxl-4, .col-xxl-3, .col-xxl-2, .col-xxl-1, .col-xl,
.col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg,
.col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md,
.col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm,
.col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col,
.col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
position: relative;
width: 100%;
padding-right: calc(var(--hl-grid-spacer) * 0.5);
padding-left: calc(var(--hl-grid-spacer) * 0.5); }
.col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
.row-cols-1 > * {
flex: 0 0 100%;
max-width: 100%; }
.row-cols-2 > * {
flex: 0 0 50%;
max-width: 50%; }
.row-cols-3 > * {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; }
.row-cols-4 > * {
flex: 0 0 25%;
max-width: 25%; }
.row-cols-5 > * {
flex: 0 0 20%;
max-width: 20%; }
.row-cols-6 > * {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; }
.col-auto {
flex: 0 0 auto;
width: auto;
max-width: 100%; }
.col-1 {
flex: 0 0 8.33333333%;
max-width: 8.33333333%; }
.col-2 {
flex: 0 0 16.66666667%;
max-width: 16.66666667%; }
.col-3 {
flex: 0 0 25%;
max-width: 25%; }
.col-4 {
flex: 0 0 33.33333333%;
max-width: 33.33333333%; }
.col-5 {
flex: 0 0 41.66666667%;
max-width: 41.66666667%; }
.col-6 {
flex: 0 0 50%;
max-width: 50%; }
.col-7 {
flex: 0 0 58.33333333%;
max-width: 58.33333333%; }
.col-8 {
flex: 0 0 66.66666667%;
max-width: 66.66666667%; }
.col-9 {
flex: 0 0 75%;
max-width: 75%; }
.col-10 {
flex: 0 0 83.33333333%;
max-width: 83.33333333%; }
.col-11 {
flex: 0 0 91.66666667%;
max-width: 91.66666667%; }
.col-12 {
flex: 0 0 100%;
max-width: 100%; }
.order-first {
order: -1; }
.order-last {
order: 13; }
.order-0 {
order: 0; }
.order-1 {
order: 1; }
.order-2 {
order: 2; }
.order-3 {
order: 3; }
.order-4 {
order: 4; }
.order-5 {
order: 5; }
.order-6 {
order: 6; }
.order-7 {
order: 7; }
.order-8 {
order: 8; }
.order-9 {
order: 9; }
.order-10 {
order: 10; }
.order-11 {
order: 11; }
.order-12 {
order: 12; }
.offset-1 {
margin-left: 8.33333333%; }
.offset-2 {
margin-left: 16.66666667%; }
.offset-3 {
margin-left: 25%; }
.offset-4 {
margin-left: 33.33333333%; }
.offset-5 {
margin-left: 41.66666667%; }
.offset-6 {
margin-left: 50%; }
.offset-7 {
margin-left: 58.33333333%; }
.offset-8 {
margin-left: 66.66666667%; }
.offset-9 {
margin-left: 75%; }
.offset-10 {
margin-left: 83.33333333%; }
.offset-11 {
margin-left: 91.66666667%; }
@media (min-width: 576px) {
.col-sm {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
.row-cols-sm-1 > * {
flex: 0 0 100%;
max-width: 100%; }
.row-cols-sm-2 > * {
flex: 0 0 50%;
max-width: 50%; }
.row-cols-sm-3 > * {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; }
.row-cols-sm-4 > * {
flex: 0 0 25%;
max-width: 25%; }
.row-cols-sm-5 > * {
flex: 0 0 20%;
max-width: 20%; }
.row-cols-sm-6 > * {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; }
.col-sm-auto {
flex: 0 0 auto;
width: auto;
max-width: 100%; }
.col-sm-1 {
flex: 0 0 8.33333333%;
max-width: 8.33333333%; }
.col-sm-2 {
flex: 0 0 16.66666667%;
max-width: 16.66666667%; }
.col-sm-3 {
flex: 0 0 25%;
max-width: 25%; }
.col-sm-4 {
flex: 0 0 33.33333333%;
max-width: 33.33333333%; }
.col-sm-5 {
flex: 0 0 41.66666667%;
max-width: 41.66666667%; }
.col-sm-6 {
flex: 0 0 50%;
max-width: 50%; }
.col-sm-7 {
flex: 0 0 58.33333333%;
max-width: 58.33333333%; }
.col-sm-8 {
flex: 0 0 66.66666667%;
max-width: 66.66666667%; }
.col-sm-9 {
flex: 0 0 75%;
max-width: 75%; }
.col-sm-10 {
flex: 0 0 83.33333333%;
max-width: 83.33333333%; }
.col-sm-11 {
flex: 0 0 91.66666667%;
max-width: 91.66666667%; }
.col-sm-12 {
flex: 0 0 100%;
max-width: 100%; }
.order-sm-first {
order: -1; }
.order-sm-last {
order: 13; }
.order-sm-0 {
order: 0; }
.order-sm-1 {
order: 1; }
.order-sm-2 {
order: 2; }
.order-sm-3 {
order: 3; }
.order-sm-4 {
order: 4; }
.order-sm-5 {
order: 5; }
.order-sm-6 {
order: 6; }
.order-sm-7 {
order: 7; }
.order-sm-8 {
order: 8; }
.order-sm-9 {
order: 9; }
.order-sm-10 {
order: 10; }
.order-sm-11 {
order: 11; }
.order-sm-12 {
order: 12; }
.offset-sm-0 {
margin-left: 0; }
.offset-sm-1 {
margin-left: 8.33333333%; }
.offset-sm-2 {
margin-left: 16.66666667%; }
.offset-sm-3 {
margin-left: 25%; }
.offset-sm-4 {
margin-left: 33.33333333%; }
.offset-sm-5 {
margin-left: 41.66666667%; }
.offset-sm-6 {
margin-left: 50%; }
.offset-sm-7 {
margin-left: 58.33333333%; }
.offset-sm-8 {
margin-left: 66.66666667%; }
.offset-sm-9 {
margin-left: 75%; }
.offset-sm-10 {
margin-left: 83.33333333%; }
.offset-sm-11 {
margin-left: 91.66666667%; } }
@media (min-width: 768px) {
.col-md {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
.row-cols-md-1 > * {
flex: 0 0 100%;
max-width: 100%; }
.row-cols-md-2 > * {
flex: 0 0 50%;
max-width: 50%; }
.row-cols-md-3 > * {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; }
.row-cols-md-4 > * {
flex: 0 0 25%;
max-width: 25%; }
.row-cols-md-5 > * {
flex: 0 0 20%;
max-width: 20%; }
.row-cols-md-6 > * {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; }
.col-md-auto {
flex: 0 0 auto;
width: auto;
max-width: 100%; }
.col-md-1 {
flex: 0 0 8.33333333%;
max-width: 8.33333333%; }
.col-md-2 {
flex: 0 0 16.66666667%;
max-width: 16.66666667%; }
.col-md-3 {
flex: 0 0 25%;
max-width: 25%; }
.col-md-4 {
flex: 0 0 33.33333333%;
max-width: 33.33333333%; }
.col-md-5 {
flex: 0 0 41.66666667%;
max-width: 41.66666667%; }
.col-md-6 {
flex: 0 0 50%;
max-width: 50%; }
.col-md-7 {
flex: 0 0 58.33333333%;
max-width: 58.33333333%; }
.col-md-8 {
flex: 0 0 66.66666667%;
max-width: 66.66666667%; }
.col-md-9 {
flex: 0 0 75%;
max-width: 75%; }
.col-md-10 {
flex: 0 0 83.33333333%;
max-width: 83.33333333%; }
.col-md-11 {
flex: 0 0 91.66666667%;
max-width: 91.66666667%; }
.col-md-12 {
flex: 0 0 100%;
max-width: 100%; }
.order-md-first {
order: -1; }
.order-md-last {
order: 13; }
.order-md-0 {
order: 0; }
.order-md-1 {
order: 1; }
.order-md-2 {
order: 2; }
.order-md-3 {
order: 3; }
.order-md-4 {
order: 4; }
.order-md-5 {
order: 5; }
.order-md-6 {
order: 6; }
.order-md-7 {
order: 7; }
.order-md-8 {
order: 8; }
.order-md-9 {
order: 9; }
.order-md-10 {
order: 10; }
.order-md-11 {
order: 11; }
.order-md-12 {
order: 12; }
.offset-md-0 {
margin-left: 0; }
.offset-md-1 {
margin-left: 8.33333333%; }
.offset-md-2 {
margin-left: 16.66666667%; }
.offset-md-3 {
margin-left: 25%; }
.offset-md-4 {
margin-left: 33.33333333%; }
.offset-md-5 {
margin-left: 41.66666667%; }
.offset-md-6 {
margin-left: 50%; }
.offset-md-7 {
margin-left: 58.33333333%; }
.offset-md-8 {
margin-left: 66.66666667%; }
.offset-md-9 {
margin-left: 75%; }
.offset-md-10 {
margin-left: 83.33333333%; }
.offset-md-11 {
margin-left: 91.66666667%; } }
@media (min-width: 992px) {
.col-lg {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
.row-cols-lg-1 > * {
flex: 0 0 100%;
max-width: 100%; }
.row-cols-lg-2 > * {
flex: 0 0 50%;
max-width: 50%; }
.row-cols-lg-3 > * {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; }
.row-cols-lg-4 > * {
flex: 0 0 25%;
max-width: 25%; }
.row-cols-lg-5 > * {
flex: 0 0 20%;
max-width: 20%; }
.row-cols-lg-6 > * {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; }
.col-lg-auto {
flex: 0 0 auto;
width: auto;
max-width: 100%; }
.col-lg-1 {
flex: 0 0 8.33333333%;
max-width: 8.33333333%; }
.col-lg-2 {
flex: 0 0 16.66666667%;
max-width: 16.66666667%; }
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%; }
.col-lg-4 {
flex: 0 0 33.33333333%;
max-width: 33.33333333%; }
.col-lg-5 {
flex: 0 0 41.66666667%;
max-width: 41.66666667%; }
.col-lg-6 {
flex: 0 0 50%;
max-width: 50%; }
.col-lg-7 {
flex: 0 0 58.33333333%;
max-width: 58.33333333%; }
.col-lg-8 {
flex: 0 0 66.66666667%;
max-width: 66.66666667%; }
.col-lg-9 {
flex: 0 0 75%;
max-width: 75%; }
.col-lg-10 {
flex: 0 0 83.33333333%;
max-width: 83.33333333%; }
.col-lg-11 {
flex: 0 0 91.66666667%;
max-width: 91.66666667%; }
.col-lg-12 {
flex: 0 0 100%;
max-width: 100%; }
.order-lg-first {
order: -1; }
.order-lg-last {
order: 13; }
.order-lg-0 {
order: 0; }
.order-lg-1 {
order: 1; }
.order-lg-2 {
order: 2; }
.order-lg-3 {
order: 3; }
.order-lg-4 {
order: 4; }
.order-lg-5 {
order: 5; }
.order-lg-6 {
order: 6; }
.order-lg-7 {
order: 7; }
.order-lg-8 {
order: 8; }
.order-lg-9 {
order: 9; }
.order-lg-10 {
order: 10; }
.order-lg-11 {
order: 11; }
.order-lg-12 {
order: 12; }
.offset-lg-0 {
margin-left: 0; }
.offset-lg-1 {
margin-left: 8.33333333%; }
.offset-lg-2 {
margin-left: 16.66666667%; }
.offset-lg-3 {
margin-left: 25%; }
.offset-lg-4 {
margin-left: 33.33333333%; }
.offset-lg-5 {
margin-left: 41.66666667%; }
.offset-lg-6 {
margin-left: 50%; }
.offset-lg-7 {
margin-left: 58.33333333%; }
.offset-lg-8 {
margin-left: 66.66666667%; }
.offset-lg-9 {
margin-left: 75%; }
.offset-lg-10 {
margin-left: 83.33333333%; }
.offset-lg-11 {
margin-left: 91.66666667%; } }
@media (min-width: 1200px) {
.col-xl {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
.row-cols-xl-1 > * {
flex: 0 0 100%;
max-width: 100%; }
.row-cols-xl-2 > * {
flex: 0 0 50%;
max-width: 50%; }
.row-cols-xl-3 > * {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; }
.row-cols-xl-4 > * {
flex: 0 0 25%;
max-width: 25%; }
.row-cols-xl-5 > * {
flex: 0 0 20%;
max-width: 20%; }
.row-cols-xl-6 > * {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; }
.col-xl-auto {
flex: 0 0 auto;
width: auto;
max-width: 100%; }
.col-xl-1 {
flex: 0 0 8.33333333%;
max-width: 8.33333333%; }
.col-xl-2 {
flex: 0 0 16.66666667%;
max-width: 16.66666667%; }
.col-xl-3 {
flex: 0 0 25%;
max-width: 25%; }
.col-xl-4 {
flex: 0 0 33.33333333%;
max-width: 33.33333333%; }
.col-xl-5 {
flex: 0 0 41.66666667%;
max-width: 41.66666667%; }
.col-xl-6 {
flex: 0 0 50%;
max-width: 50%; }
.col-xl-7 {
flex: 0 0 58.33333333%;
max-width: 58.33333333%; }
.col-xl-8 {
flex: 0 0 66.66666667%;
max-width: 66.66666667%; }
.col-xl-9 {
flex: 0 0 75%;
max-width: 75%; }
.col-xl-10 {
flex: 0 0 83.33333333%;
max-width: 83.33333333%; }
.col-xl-11 {
flex: 0 0 91.66666667%;
max-width: 91.66666667%; }
.col-xl-12 {
flex: 0 0 100%;
max-width: 100%; }
.order-xl-first {
order: -1; }
.order-xl-last {
order: 13; }
.order-xl-0 {
order: 0; }
.order-xl-1 {
order: 1; }
.order-xl-2 {
order: 2; }
.order-xl-3 {
order: 3; }
.order-xl-4 {
order: 4; }
.order-xl-5 {
order: 5; }
.order-xl-6 {
order: 6; }
.order-xl-7 {
order: 7; }
.order-xl-8 {
order: 8; }
.order-xl-9 {
order: 9; }
.order-xl-10 {
order: 10; }
.order-xl-11 {
order: 11; }
.order-xl-12 {
order: 12; }
.offset-xl-0 {
margin-left: 0; }
.offset-xl-1 {
margin-left: 8.33333333%; }
.offset-xl-2 {
margin-left: 16.66666667%; }
.offset-xl-3 {
margin-left: 25%; }
.offset-xl-4 {
margin-left: 33.33333333%; }
.offset-xl-5 {
margin-left: 41.66666667%; }
.offset-xl-6 {
margin-left: 50%; }
.offset-xl-7 {
margin-left: 58.33333333%; }
.offset-xl-8 {
margin-left: 66.66666667%; }
.offset-xl-9 {
margin-left: 75%; }
.offset-xl-10 {
margin-left: 83.33333333%; }
.offset-xl-11 {
margin-left: 91.66666667%; } }
@media (min-width: 1400px) {
.col-xxl {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
.row-cols-xxl-1 > * {
flex: 0 0 100%;
max-width: 100%; }
.row-cols-xxl-2 > * {
flex: 0 0 50%;
max-width: 50%; }
.row-cols-xxl-3 > * {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; }
.row-cols-xxl-4 > * {
flex: 0 0 25%;
max-width: 25%; }
.row-cols-xxl-5 > * {
flex: 0 0 20%;
max-width: 20%; }
.row-cols-xxl-6 > * {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; }
.col-xxl-auto {
flex: 0 0 auto;
width: auto;
max-width: 100%; }
.col-xxl-1 {
flex: 0 0 8.33333333%;
max-width: 8.33333333%; }
.col-xxl-2 {
flex: 0 0 16.66666667%;
max-width: 16.66666667%; }
.col-xxl-3 {
flex: 0 0 25%;
max-width: 25%; }
.col-xxl-4 {
flex: 0 0 33.33333333%;
max-width: 33.33333333%; }
.col-xxl-5 {
flex: 0 0 41.66666667%;
max-width: 41.66666667%; }
.col-xxl-6 {
flex: 0 0 50%;
max-width: 50%; }
.col-xxl-7 {
flex: 0 0 58.33333333%;
max-width: 58.33333333%; }
.col-xxl-8 {
flex: 0 0 66.66666667%;
max-width: 66.66666667%; }
.col-xxl-9 {
flex: 0 0 75%;
max-width: 75%; }
.col-xxl-10 {
flex: 0 0 83.33333333%;
max-width: 83.33333333%; }
.col-xxl-11 {
flex: 0 0 91.66666667%;
max-width: 91.66666667%; }
.col-xxl-12 {
flex: 0 0 100%;
max-width: 100%; }
.order-xxl-first {
order: -1; }
.order-xxl-last {
order: 13; }
.order-xxl-0 {
order: 0; }
.order-xxl-1 {
order: 1; }
.order-xxl-2 {
order: 2; }
.order-xxl-3 {
order: 3; }
.order-xxl-4 {
order: 4; }
.order-xxl-5 {
order: 5; }
.order-xxl-6 {
order: 6; }
.order-xxl-7 {
order: 7; }
.order-xxl-8 {
order: 8; }
.order-xxl-9 {
order: 9; }
.order-xxl-10 {
order: 10; }
.order-xxl-11 {
order: 11; }
.order-xxl-12 {
order: 12; }
.offset-xxl-0 {
margin-left: 0; }
.offset-xxl-1 {
margin-left: 8.33333333%; }
.offset-xxl-2 {
margin-left: 16.66666667%; }
.offset-xxl-3 {
margin-left: 25%; }
.offset-xxl-4 {
margin-left: 33.33333333%; }
.offset-xxl-5 {
margin-left: 41.66666667%; }
.offset-xxl-6 {
margin-left: 50%; }
.offset-xxl-7 {
margin-left: 58.33333333%; }
.offset-xxl-8 {
margin-left: 66.66666667%; }
.offset-xxl-9 {
margin-left: 75%; }
.offset-xxl-10 {
margin-left: 83.33333333%; }
.offset-xxl-11 {
margin-left: 91.66666667%; } }
@media (min-width: 1880px) {
.col-xxxl {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
.row-cols-xxxl-1 > * {
flex: 0 0 100%;
max-width: 100%; }
.row-cols-xxxl-2 > * {
flex: 0 0 50%;
max-width: 50%; }
.row-cols-xxxl-3 > * {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; }
.row-cols-xxxl-4 > * {
flex: 0 0 25%;
max-width: 25%; }
.row-cols-xxxl-5 > * {
flex: 0 0 20%;
max-width: 20%; }
.row-cols-xxxl-6 > * {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; }
.col-xxxl-auto {
flex: 0 0 auto;
width: auto;
max-width: 100%; }
.col-xxxl-1 {
flex: 0 0 8.33333333%;
max-width: 8.33333333%; }
.col-xxxl-2 {
flex: 0 0 16.66666667%;
max-width: 16.66666667%; }
.col-xxxl-3 {
flex: 0 0 25%;
max-width: 25%; }
.col-xxxl-4 {
flex: 0 0 33.33333333%;
max-width: 33.33333333%; }
.col-xxxl-5 {
flex: 0 0 41.66666667%;
max-width: 41.66666667%; }
.col-xxxl-6 {
flex: 0 0 50%;
max-width: 50%; }
.col-xxxl-7 {
flex: 0 0 58.33333333%;
max-width: 58.33333333%; }
.col-xxxl-8 {
flex: 0 0 66.66666667%;
max-width: 66.66666667%; }
.col-xxxl-9 {
flex: 0 0 75%;
max-width: 75%; }
.col-xxxl-10 {
flex: 0 0 83.33333333%;
max-width: 83.33333333%; }
.col-xxxl-11 {
flex: 0 0 91.66666667%;
max-width: 91.66666667%; }
.col-xxxl-12 {
flex: 0 0 100%;
max-width: 100%; }
.order-xxxl-first {
order: -1; }
.order-xxxl-last {
order: 13; }
.order-xxxl-0 {
order: 0; }
.order-xxxl-1 {
order: 1; }
.order-xxxl-2 {
order: 2; }
.order-xxxl-3 {
order: 3; }
.order-xxxl-4 {
order: 4; }
.order-xxxl-5 {
order: 5; }
.order-xxxl-6 {
order: 6; }
.order-xxxl-7 {
order: 7; }
.order-xxxl-8 {
order: 8; }
.order-xxxl-9 {
order: 9; }
.order-xxxl-10 {
order: 10; }
.order-xxxl-11 {
order: 11; }
.order-xxxl-12 {
order: 12; }
.offset-xxxl-0 {
margin-left: 0; }
.offset-xxxl-1 {
margin-left: 8.33333333%; }
.offset-xxxl-2 {
margin-left: 16.66666667%; }
.offset-xxxl-3 {
margin-left: 25%; }
.offset-xxxl-4 {
margin-left: 33.33333333%; }
.offset-xxxl-5 {
margin-left: 41.66666667%; }
.offset-xxxl-6 {
margin-left: 50%; }
.offset-xxxl-7 {
margin-left: 58.33333333%; }
.offset-xxxl-8 {
margin-left: 66.66666667%; }
.offset-xxxl-9 {
margin-left: 75%; }
.offset-xxxl-10 {
margin-left: 83.33333333%; }
.offset-xxxl-11 {
margin-left: 91.66666667%; } }
.table {
border: 0;
color: var(--hl-color-fg-light-default);
width: 100%; }
.table th {
padding: var(--hl-spacer-md);
vertical-align: top;
border-bottom: var(--hl-border-width-xs) solid var(--hl-color-bg-light-muted); }
.table td {
padding: var(--hl-spacer-md);
vertical-align: top;
border-bottom: 0; }
.table tr {
border-bottom: var(--hl-border-width-default) solid var(--hl-color-bg-light-muted); }
.table thead th {
position: relative;
background-color: var(--hl-color-bg-light-default);
border-top: 0;
vertical-align: middle;
white-space: nowrap;
border: 0;
border-bottom: var(--hl-border-width-md) solid var(--hl-color-bg-light-muted); }
.table thead th:last-child {
border-right: 0; }
.table thead th .table__content-header {
display: flex;
justify-content: space-between;
align-items: stretch;
gap: var(--hl-spacer-2xs); }
.table thead th .table__content-header.custom-control {
align-items: flex-start; }
.table tbody + tbody {
border-top: calc(2 * var(--hl-border-width-default)) solid var(--hl-color-bg-light-muted); }
.table__cell--important {
font-weight: var(--hl-typography-font-weight-body-bold); }
.table__row--disabled {
color: var(--hl-color-fg-light-disabled); }
.table__row--disabled .hl-tag {
--tag-bg-color: var(--hl-color-bg-light-muted);
--tag-text-color: var(--hl-color-button-fg-light-black-standby); }
.table__row--success {
background-color: var(--hl-table-color-bg-light-success); }
.table__row--info {
background-color: var(--hl-table-color-bg-light-info); }
.table__row--danger {
background-color: var(--hl-table-color-bg-light-danger); }
.table__row--warning {
background-color: var(--hl-table-color-bg-light-warning); }
.table__container {
background: var(--hl-color-bg-light-default);
padding: 0; }
.table__content {
display: block;
overflow: auto;
position: relative;
scrollbar-width: none;
background-image: linear-gradient(to right, var(--hl-color-bg-light-default), rgba(255, 255, 255, 0)), linear-gradient(to left, var(--hl-color-bg-light-default), rgba(255, 255, 255, 0)), linear-gradient(to right, var(--hl-color-bg-light-alpha), rgba(255, 255, 255, 0)), linear-gradient(to left, var(--hl-color-bg-light-alpha), rgba(255, 255, 255, 0));
background-position: left center, right center, left center, right center;
background-repeat: no-repeat;
background-size: 80px 100%, 80px 100%, 20px 100%, 20px 100%;
background-attachment: local, local, scroll, scroll; }
.table__content::-webkit-scrollbar {
display: none; }
.table__content-height--75 {
max-height: calc(75vh - (var(--hl-nav-padding-y) * 2 + var(--hl-nav-logo-height))); }
.table__content-height--75:after {
content: "";
overflow: auto;
position: sticky;
display: block;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
background-image: linear-gradient(to top, var(--hl-color-bg-light-alpha), rgba(255, 255, 255, 0));
background-attachment: local, local, scroll, scroll;
z-index: 2; }
.table__content-height--75.table__content-border {
border-bottom: var(--hl-border-width-default) solid var(--hl-color-bg-light-muted); }
.table__footer {
display: flex;
gap: var(--hl-spacer-md);
flex-direction: row;
margin-top: var(--hl-spacer-lg);
flex-wrap: wrap;
justify-content: end; }
@media (min-width: 1200px) {
.table__footer {
align-items: center;
justify-content: space-between; } }
.table__footer__info {
flex-grow: 1;
color: var(--hl-color-fg-light-muted); }
.table__footer__filter {
align-items: center;
display: flex;
flex-wrap: nowrap;
gap: var(--hl-spacer-sm); }
.table__footer__filter label {
flex-shrink: 0; }
.table__footer .pagination {
margin: 0 auto; }
@media (min-width: 576px) {
.table__footer .pagination {
margin: 0; } }
.table-sortable thead {
border: var(--hl-border-width-default) solid var(--hl-color-bg-light-muted); }
.table-sortable thead th {
padding: 0;
border-bottom: var(--hl-border-width-md) solid var(--hl-color-bg-light-muted);
border-right: var(--hl-border-width-default) solid var(--hl-color-bg-light-muted);
border-top: 0; }
.table-sortable thead .table__content-header {
position: relative;
padding: 0; }
.table-sortable thead .table__content-header .btn:hover, .table-sortable thead .table__content-header .subnav__nav__item:hover, .table-sortable thead .table__content-header .charger-btn:hover {
color: var(--hl-color-fg-light-default);
background-color: var(--hl-color-bg-light-ultra-muted); }
.table-sortable thead .table__content-header .btn:active, .table-sortable thead .table__content-header .subnav__nav__item:active, .table-sortable thead .table__content-header .charger-btn:active {
background-color: var(--hl-color-fg-light-ultra-muted); }
.table-sortable thead .table__content-header .btn:hover .hl-icon, .table-sortable thead .table__content-header .subnav__nav__item:hover .hl-icon, .table-sortable thead .table__content-header .charger-btn:hover .hl-icon {
--hl-icon-color: var(--hl-color-fg-light-important); }
.table-sortable thead .table__content-header span {
padding: var(--hl-spacer-sm); }
.table__cell {
display: none; }
.table-condensed .table__cell.table__cell--condensed,
.table--view-condensed .table__cell.table__cell--condensed {
display: table-cell; }
.table--view-view2 .table__cell.table__cell--view2 {
display: table-cell; }
.table-sm th,
.table-sm td {
padding: var(--hl-spacer-2xs); }
.table-bordered thead th {
border-right: var(--hl-border-width-default) solid var(--hl-color-bg-light-muted); }
.table-bordered thead th:last-child {
border-right: 0; }
.table-bordered thead td {
border-bottom-width: calc(2 * var(--hl-border-width-default)); }
.table-bordered tbody td,
.table-bordered tbody th {
border-right: var(--hl-border-width-default) solid var(--hl-color-bg-light-muted); }
.table-bordered tbody td:last-child,
.table-bordered tbody th:last-child {
border-right: 0; }
.table-bordered tbody tr th, .table-bordered tbody tr:last-child {
border-bottom: 0; }
.table--un-bordered tbody tr {
border-bottom: 0; }
.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
border: 0; }
.table-border-top {
border-top: var(--hl-border-width-default) solid var(--hl-color-bg-light-muted); }
.table-border-top.table {
border: var(--hl-border-width-default) solid var(--hl-color-bg-light-muted);
margin-top: var(--hl-spacer-sm);
border-top: 0; }
.table-border-top--success {
box-shadow: 0 calc(-1 * var(--hl-border-width-lg)) 0 0 var(--hl-table-color-border-top-success); }
.table-border-top--info {
box-shadow: 0 calc(-1 * var(--hl-border-width-lg)) 0 0 var(--hl-table-color-border-top-info); }
.table-border-top--warning {
box-shadow: 0 calc(-1 * var(--hl-border-width-lg)) 0 0 var(--hl-table-color-border-top-warning); }
.table-border-top--danger {
box-shadow: 0 calc(-1 * var(--hl-border-width-lg)) 0 0 var(--hl-table-color-border-top-danger); }
.table-border-top--blue-light {
box-shadow: 0 calc(-1 * var(--hl-border-width-lg)) 0 0 var(--hl-color-supporting-purple-light); }
.table-border-top--purple-light {
box-shadow: 0 calc(-1 * var(--hl-border-width-lg)) 0 0 var(--hl-color-supporting-purple-light); }
.table-striped {
border: var(--hl-border-width-default) solid var(--hl-color-bg-light-muted); }
.table-striped tbody tr:nth-of-type(odd) {
background-color: var(--hl-color-bg-light-ultra-muted); }
.table-hover tr {
position: relative; }
.table-hover tr:hover {
color: var(--hl-color-fg-light-default);
background-color: var(--hl-color-bg-light-ultra-muted); }
.table-hover.table-striped tr:hover {
color: var(--hl-color-fg-light-default);
background-color: var(--hl-color-bg-light-very-muted); }
.table-hover.table-row-bg tbody tr:hover td {
background-color: var(--hl-color-border-light-muted); }
.table-row-bg tbody .table__row--disabled {
color: var(--hl-color-fg-light-disabled); }
.table-row-bg tbody .table__row--disabled .hl-tag {
--tag-bg-color: var(--hl-color-bg-light-muted);
--tag-text-color: var(--hl-color-button-fg-light-black-standby); }
.table-row-bg tbody .table__row--success {
background-color: var(--hl-table-color-bg-light-success); }
.table-row-bg tbody .table__row--info {
background-color: var(--hl-table-color-bg-light-info); }
.table-row-bg tbody .table__row--danger {
background-color: var(--hl-table-color-bg-light-danger); }
.table-row-bg tbody .table__row--warning {
background-color: var(--hl-table-color-bg-light-warning); }
.table .thead-dark th {
color: var(--hl-color-fg-dark-default);
background-color: var(--hl-color-bg-dark-default);
border-color: var(--hl-color-border-dark-default); }
.table .thead-light th {
color: var(--hl-color-fg-light-default);
background-color: var(--hl-color-bg-light-muted);
border-color: var(--hl-color-bg-light-muted); }
.table-dark {
color: var(--hl-color-fg-dark-default);
background-color: var(--hl-color-bg-dark-default); }
.table-dark th,
.table-dark td,
.table-dark thead th {
border-color: var(--hl-color-border-dark-default); }
.table-dark.table-bordered {
border: 0; }
.table-dark.table-striped tbody tr:nth-of-type(odd) {
background-color: var(--hl-color-bg-dark-ultra-muted); }
.table-dark.table-hover tbody tr:hover {
color: var(--hl-color-fg-dark-default);
background-color: var(--hl-color-bg-dark-ultra-muted); }
@media (max-width: 575.98px) {
.table-responsive-sm {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.table-responsive-sm > .table-bordered {
border: 0; } }
@media (max-width: 767.98px) {
.table-responsive-md {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.table-responsive-md > .table-bordered {
border: 0; } }
@media (max-width: 991.98px) {
.table-responsive-lg {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.table-responsive-lg > .table-bordered {
border: 0; } }
@media (max-width: 1199.98px) {
.table-responsive-xl {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.table-responsive-xl > .table-bordered {
border: 0; } }
@media (max-width: 1399.98px) {
.table-responsive-xxl {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.table-responsive-xxl > .table-bordered {
border: 0; } }
@media (max-width: 1879.98px) {
.table-responsive-xxxl {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.table-responsive-xxxl > .table-bordered {
border: 0; } }
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.table-responsive > .table-bordered {
border: 0; }
.table-sticky-header thead {
position: sticky;
top: 0;
background: var(--hl-color-bg-light-default);
box-shadow: 0 var(--hl-border-width-default) 0 var(--hl-border-width-default) var(--hl-color-bg-light-muted);
z-index: 1; }
.table-sticky-header thead th {
border-bottom: 0; }
.table-convertible {
table-layout: fixed;
border-bottom: none; }
.table-convertible thead tr {
height: 60px; }
@media (min-width: 768px) {
.table-convertible thead tr {
height: unset; } }
.table-convertible tr {
position: relative;
display: block;
border-bottom: var(--hl-border-width-default) solid var(--hl-color-bg-light-muted); }
@media (min-width: 768px) {
.table-convertible tr {
display: table-row;
transform: translate(0); } }
.table-convertible thead th {
position: absolute;
border-bottom: none;
top: -9999999px;
left: -9999999px; }
@media (min-width: 768px) {
.table-convertible thead th {
position: relative;
top: unset;
left: unset; } }
.table-convertible td {
display: flex;
border: none;
padding-top: 0;
padding-bottom: 0;
padding-right: var(--hl-spacer-4xl); }
@media (min-width: 768px) {
.table-convertible td {
display: table-cell;
padding: var(--hl-spacer-sm); } }
.table-convertible td.table-convertible__price .price-block {
margin-left: auto;
margin-right: 0; }
@media (min-width: 768px) {
.table-convertible td.table-convertible__price .price-block {
margin: unset; } }
.table-convertible td.table-convertible__btn .table-convertible__btn__container {
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 0;
display: grid;
place-items: flex-end;
padding-right: var(--hl-spacer-sm);
padding-bottom: var(--hl-spacer-sm); }
@media (min-width: 768px) {
.table-convertible td.table-convertible__btn .table-convertible__btn__container {
position: unset;
padding: unset; } }
.table-convertible td.table-convertible__btn .table-convertible__btn__container .table-convertible__btn__text {
display: none; }
@media (min-width: 768px) {
.table-convertible td.table-convertible__btn .table-convertible__btn__container .table-convertible__btn__text {
display: block; } }
.table-convertible td:first-child {
padding-top: var(--hl-spacer-sm); }
.table-convertible td:last-child {
padding-bottom: var(--hl-spacer-sm); }
.table-convertible td:before {
content: attr(data-th);
font-weight: bold;
min-width: var(--hl-spacer-6xl);
width: var(--hl-spacer-6xl);
display: inline-block; }
@media (min-width: 768px) {
.table-convertible td:before {
display: none; } }
.form-control {
display: block;
width: 100%;
height: calc(var(--hl-typography-line-height-very-decreased) * 1em + calc(var(--hl-spacer-sm)) * 2 + calc(var(--hl-border-width-default) * 2));
padding: calc(var(--hl-spacer-sm)) calc(var(--hl-spacer-sm));
font-size: var(--hl-font-size-md);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-very-decreased);
color: var(--hl-color-fg-light-important);
background-color: var(--hl-color-bg-light-default);
background-clip: padding-box;
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-standby);
border-radius: var(--hl-border-radius-default);
transition: border-color var(--hl-transition-normal), box-shadow var(--hl-transition-normal); }
.form-control:hover {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-hover); }
@media (prefers-reduced-motion: reduce) {
.form-control {
transition: none; } }
.form-control::-ms-expand {
background-color: transparent;
border: 0; }
.form-control:hover {
color: var(--hl-color-fg-light-important);
background-color: var(--hl-color-bg-light-default);
border-color: var(--hl-color-border-light-interaction-hover);
outline: 0;
box-shadow: var(--hl-color-box-shadow-hover); }
.form-control:focus {
color: var(--hl-color-fg-light-important);
background-color: var(--hl-color-bg-light-default);
border-color: var(--hl-color-border-light-interaction-focus);
outline: 0;
box-shadow: var(--hl-color-box-shadow-hover); }
.form-control::-moz-placeholder {
color: var(--hl-color-fg-light-muted);
opacity: 1; }
.form-control::placeholder {
color: var(--hl-color-fg-light-muted);
opacity: 1; }
.form-control:disabled, .form-control[readonly] {
background-color: var(--hl-color-form-bg-light-disabled);
border-color: var(--hl-color-form-border-light-disabled);
opacity: 1;
pointer-events: none; }
.form-control:disabled {
color: var(--hl-color-form-fg-light-disabled); }
input[type=date].form-control,
input[type=time].form-control,
input[type=datetime-local].form-control,
input[type=month].form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
input[type=file]::file-selector-button {
opacity: 0;
width: 0;
position: absolute;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0; }
input[type=file]::-ms-browse {
opacity: 0;
width: 0;
position: absolute;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0; }
input[type=file]::-webkit-file-upload-button {
opacity: 0;
width: 0;
position: absolute;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0; }
input[type=file]:not(.input-file-added) {
color: var(--hl-color-fg-light-muted); }
legend.label {
font-size: var(--hl-font-size-md);
margin-bottom: var(--hl-spacer-xs); }
.label-file {
--file-button-fg-color: var(--hl-color-button-fg-light-outline-standby);
--file-button-bg-color: var(--hl-color-button-bg-light-outline-standby);
--file-button-border-color: var(--hl-color-button-border-light-outline-standby);
display: block;
display: contents; }
.label-file__input {
display: grid;
grid-template-columns: 1fr auto; }
.label-file__input::after {
content: "Elige...";
border: var(--hl-border-width-default) solid var(--file-button-border-color);
display: flex;
align-items: center;
font-weight: var(--hl-typography-font-weight-body-bold);
color: var(--file-button-fg-color);
background-color: var(--file-button-bg-color);
padding-left: var(--hl-spacer-lg);
padding-right: var(--hl-spacer-lg);
margin-left: calc(-1 * var(--hl-border-width-default));
transition: all var(--hl-transition-normal);
grid-column-end: -1;
grid-row-start: 1;
border-top-right-radius: var(--hl-border-radius-default);
border-bottom-right-radius: var(--hl-border-radius-default); }
@media (prefers-reduced-motion: reduce) {
.label-file__input::after {
transition: none; } }
.label-file .form-control {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.label-file:focus-within, .label-file:hover, .label-file:focus {
--file-button-fg-color: var(--hl-color-button-fg-light-outline-hover);
--file-button-bg-color: var(--hl-color-button-bg-light-outline-hover); }
.label-file:not(:disabled):not(.disabled):active {
--file-button-fg-color: var(--hl-color-button-fg-light-outline-pressed);
--file-button-bg-color: var(--hl-color-button-bg-light-outline-pressed); }
select.form-control option {
font-weight: var(--hl-typography-font-weight-body-bold); }
select.form-control:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 var(--hl-color-fg-light-important); }
select.form-control:focus::-ms-value {
color: var(--hl-color-fg-light-important);
background-color: var(--hl-color-bg-light-default); }
.form-control-file,
.form-control-range {
display: block;
width: 100%; }
label,
.label {
color: var(--hl-color-fg-light-important);
font-weight: var(--hl-typography-font-weight-body-bold);
position: relative;
display: inline-flex;
gap: var(--hl-spacer-2xs); }
label.required:after,
.label.required:after {
content: "*";
display: inline-flex;
color: var(--hl-color-fg-light-accent);
font-size: var(--hl-typography-h2-font-size);
line-height: var(--hl-typography-h2-line-height);
letter-spacing: var(--hl-typography-h2-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
margin: 0;
line-height: var(--hl-typography-line-height-very-decreased);
position: absolute;
transform: translate(calc(100% + var(--hl-spacer-2xs)), calc(-1 * var(--hl-spacer-2xs)));
right: 0; }
.col-form-label {
padding-top: calc(calc(var(--hl-spacer-sm)) + var(--hl-border-width-default));
padding-bottom: calc(calc(var(--hl-spacer-sm)) + var(--hl-border-width-default));
margin-bottom: 0;
font-size: inherit;
line-height: var(--hl-typography-line-height-very-decreased); }
.col-form-label-lg {
padding-top: calc(var(--hl-spacer-md) + var(--hl-border-width-default));
padding-bottom: calc(var(--hl-spacer-md) + var(--hl-border-width-default));
font-size: var(--hl-font-size-2xl);
line-height: var(--hl-typography-line-height-very-decreased); }
.col-form-label-sm {
padding-top: calc(var(--hl-spacer-xs) + var(--hl-border-width-default));
padding-bottom: calc(var(--hl-spacer-xs) + var(--hl-border-width-default));
font-size: var(--hl-font-size-sm);
line-height: var(--hl-typography-line-height-very-decreased); }
.form-control-plaintext {
display: block;
width: 100%;
padding: calc(var(--hl-spacer-sm)) 0;
font-weight: var(--hl-typography-font-weight-body-bold);
margin-bottom: 0;
font-size: var(--hl-font-size-md);
line-height: var(--hl-typography-line-height-very-decreased);
color: var(--hl-color-fg-light-default);
background-color: transparent;
border: solid transparent;
border-radius: var(--hl-border-radius-default);
border-width: var(--hl-border-width-default) 0;
outline: unset; }
.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
padding-right: 0;
padding-left: 0; }
.form-control-sm {
height: calc(var(--hl-typography-line-height-very-decreased) * 1em + var(--hl-spacer-xs) * 2 + calc(var(--hl-border-width-default) * 2));
padding: var(--hl-spacer-xs) var(--hl-spacer-xs);
font-size: var(--hl-font-size-sm);
line-height: var(--hl-typography-line-height-very-decreased);
border-radius: var(--hl-border-radius-default); }
.form-control-lg {
height: calc(var(--hl-typography-line-height-very-decreased) * 1em + var(--hl-spacer-md) * 2 + calc(var(--hl-border-width-default) * 2));
padding: var(--hl-spacer-md) var(--hl-spacer-md);
font-size: var(--hl-font-size-2xl);
line-height: var(--hl-typography-line-height-very-decreased);
border-radius: var(--hl-border-radius-default); }
select.form-control[size], select.form-control[multiple] {
height: auto; }
select.form-control[size] option, select.form-control[multiple] option {
font-weight: var(--hl-typography-font-weight-body-bold); }
textarea.form-control {
height: auto; }
.form-group {
margin-bottom: var(--hl-spacing-grid);
position: relative; }
.form-group .select-dropdown-icon {
background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='40'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/mask%3E%3Cg mask='url%28%23mask0%29'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M39 11L1 11L20 30L39 11Z' fill='black'/%3E%3C/g%3E%3C/svg%3E%0A") right calc(var(--hl-spacer-sm)) center/14px 14px no-repeat; }
.form-group.required label:not(.custom-control-label):after,
.form-group.required .label:after {
content: "*";
display: inline-flex;
color: var(--hl-color-fg-light-accent);
font-size: var(--hl-typography-h2-font-size);
line-height: var(--hl-typography-h2-line-height);
letter-spacing: var(--hl-typography-h2-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
margin: 0;
line-height: var(--hl-typography-line-height-very-decreased);
position: absolute;
transform: translate(calc(100% + var(--hl-spacer-2xs)), calc(-1 * var(--hl-spacer-2xs)));
right: 0; }
.form-group.disabled * {
pointer-events: none; }
.form-text {
align-items: center;
display: flex;
gap: var(--hl-spacer-2xs);
width: 100%;
color: var(--hl-color-fg-light-muted);
margin-top: var(--hl-spacer-xs);
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular); }
.form-row {
display: flex;
flex-wrap: wrap;
margin-right: calc(var(--hl-spacer-sm) * -0.5);
margin-left: calc(var(--hl-spacer-sm) * -0.5); }
.form-row > .col,
.form-row > [class*=col-] {
padding-right: calc(var(--hl-spacer-sm) * 0.5);
padding-left: calc(var(--hl-spacer-sm) * 0.5); }
.form-check {
position: relative;
display: block;
padding-left: var(--hl-spacer-lg); }
.form-check-input {
position: absolute;
margin-top: var(--hl-spacer-2xs);
margin-left: calc(-1 * var(--hl-spacer-lg)); }
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
color: var(--hl-color-fg-light-muted); }
.form-check-label {
margin-bottom: 0; }
.form-check-inline {
display: inline-flex;
align-items: center;
padding-left: 0;
margin-right: var(--hl-spacer-sm); }
.form-check-inline .form-check-input {
position: static;
margin-top: 0;
margin-right: var(--hl-spacer-2xs);
margin-left: 0; }
.valid-feedback {
display: none;
font-weight: var(--hl-typography-font-weight-body-regular);
width: 100%;
margin-top: var(--hl-spacer-xs);
font-size: var(--hl-font-size-sm);
grid-column: 1/-1; }
.valid-tooltip {
position: absolute;
top: 100%;
left: 0;
z-index: 5;
font-weight: var(--hl-typography-font-weight-body-regular);
display: none;
max-width: 100%;
padding: var(--hl-spacer-2xs) var(--hl-spacer-xs);
margin-top: 0.1rem;
font-size: var(--hl-font-size-sm);
line-height: var(--hl-typography-line-height-very-increased);
color: var(--hl-color-functional-success);
background-color: var(--hl-color-functional-danger);
border-radius: var(--hl-border-radius-sm); }
.form-row > .col > .valid-tooltip, .form-row > [class*=col-] > .valid-tooltip {
left: calc(var(--hl-spacer-sm) * 0.5); }
.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-feedback,
.is-valid ~ .valid-tooltip {
display: block; }
.was-validated :valid ~ .valid-feedback,
.is-valid ~ .valid-feedback {
padding-left: calc(var(--hl-size-icon-sm) + var(--hl-spacer-2xs));
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='32' height='32' viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='12' cy='12' r='12' fill='%2338C738'%3e%3c/circle%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 6L10 14L7 11L5 13L8 16L10 18L12 16L20 8L18 6Z' fill='%23fff'%3e%3c/path%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: left center;
background-size: var(--hl-size-icon-sm); }
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
color: var(--hl-color-functional-success); }
.was-validated .form-check-input:valid ~ .valid-feedback,
.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback,
.form-check-input.is-valid ~ .valid-tooltip {
display: block; }
.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
border-color: var(--hl-color-functional-success); }
.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label {
border-color: var(--hl-color-functional-success);
box-shadow: 0 0 0 var(--hl-spacer-2xs) rgba(var(--hl-color-functional-success), 0.25); }
.invalid-feedback {
display: none;
font-weight: var(--hl-typography-font-weight-body-regular);
width: 100%;
margin-top: var(--hl-spacer-xs);
font-size: var(--hl-font-size-sm);
grid-column: 1/-1; }
.invalid-tooltip {
position: absolute;
top: 100%;
left: 0;
z-index: 5;
font-weight: var(--hl-typography-font-weight-body-regular);
display: none;
max-width: 100%;
padding: var(--hl-spacer-2xs) var(--hl-spacer-xs);
margin-top: 0.1rem;
font-size: var(--hl-font-size-sm);
line-height: var(--hl-typography-line-height-very-increased);
color: var(--hl-color-fg-light-muted);
background-color: var(--hl-color-functional-danger);
border-radius: var(--hl-border-radius-sm); }
.form-row > .col > .invalid-tooltip, .form-row > [class*=col-] > .invalid-tooltip {
left: calc(var(--hl-spacer-sm) * 0.5); }
.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
display: block; }
.was-validated :invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-feedback {
padding-left: calc(var(--hl-size-icon-sm) + var(--hl-spacer-2xs));
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='%23CC3C14' fill-rule='evenodd' d='M14.4646 11.6288 9.27964 2.73546C9.01439 2.28008 8.52696 2 7.99997 2c-.52699 0-1.01428.28008-1.27953.73546L1.5479 11.6069l-.00055.0009-.01218.0209c-.26742.4583-.2693 1.0246-.00514 1.4848.26417.4602.75419.7441 1.28481.7443H13.1851c.5306-.0003 1.0206-.2841 1.2848-.7443.2641-.4601.2621-1.0264-.0053-1.4847Zm-4.1733-.1729c-.1142.1143-.2692.1785-.43088.1785-.16163 0-.31663-.0642-.4309-.1785l-1.42973-1.4304-1.42973 1.4304c-.15357.1562-.37911.2179-.5908.1618-.21169-.0562-.37699-.2216-.43299-.4333-.05601-.2117.00588-.4372.16213-.5907l1.42969-1.43029-1.37887-1.37954c-.23542-.23845-.23424-.62221.00265-.8592.23689-.23699.62065-.23834.8592-.00302L7.9999 8.3012l1.37881-1.37955c.15353-.15635.37918-.21827.591-.16216.21179.05611.37719.22161.43319.43346.056.21186-.006.43747-.1624.59092L8.86163 9.16341l1.42967 1.43019c.2379.2382.2379.6241 0 .8623Z' clip-rule='evenodd'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: left center;
background-size: var(--hl-size-icon-sm); }
.was-validated .form-control:invalid, .form-control.is-invalid {
border-color: var(--hl-color-functional-danger); }
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
color: var(--hl-color-fg-light-muted); }
.was-validated .form-check-input:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-tooltip {
display: block; }
.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
border-color: var(--hl-color-fg-light-muted); }
.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label {
border-color: var(--hl-color-fg-light-muted);
box-shadow: 0 0 0 var(--hl-spacer-2xs) rgba(var(--hl-color-fg-light-muted), 0.25); }
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center; }
.form-inline .form-check {
width: 100%; }
@media (min-width: 576px) {
.form-inline label {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0; }
.form-inline .form-group {
display: flex;
flex: 0 0 auto;
flex-flow: row wrap;
align-items: center;
margin-bottom: 0; }
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle; }
.form-inline .form-control-plaintext {
display: inline-block; }
.form-inline .input-group,
.form-inline .custom-select {
width: auto; }
.form-inline .form-check {
display: flex;
align-items: center;
justify-content: center;
width: auto;
padding-left: 0; }
.form-inline .form-check-input {
position: relative;
flex-shrink: 0;
margin-top: 0;
margin-right: var(--hl-spacer-2xs);
margin-left: 0; }
.form-inline .custom-control {
align-items: center;
justify-content: center; }
.form-inline .custom-control-label {
margin-bottom: 0; } }
.form-submit {
margin-top: var(--hl-spacing-atom); }
.invalid-feedback {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
color: var(--hl-color-fg-light-important); }
input::-ms-reveal,
input::-ms-clear {
display: none; }
.form-group--material {
--md-floating-top: 1rem;
--md-transition-duration: 0.2s;
--md-transition-function: cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
padding-top: var(--md-floating-top); }
@media (prefers-reduced-motion) {
.form-group--material {
--md-transition-duration: 0s; } }
.form-group--material .form-control:focus-visible,
.form-group--material .custom-select:focus-visible {
outline: var(--hl-border-width-default) solid transparent;
outline-color: var(--hl-color-fg-light-muted);
outline-offset: var(--hl-border-width-default);
transition: outline-color var(--md-transition-duration) var(--md-transition-function); }
.form-group--material > label {
position: absolute;
display: block;
font-weight: var(--hl-typography-font-weight-body-bold);
top: calc(var(--md-floating-top) + var(--hl-border-width-default) + calc(var(--hl-spacer-sm)));
left: calc(var(--hl-spacer-sm));
transform-origin: left top;
transition: top var(--md-transition-duration) var(--md-transition-function), font-size var(--md-transition-duration) var(--md-transition-function), color var(--md-transition-duration) var(--md-transition-function);
pointer-events: none;
font-size: var(--hl-font-size-md);
line-height: var(--hl-typography-line-height-very-decreased);
color: var(--hl-color-fg-light-muted);
z-index: 4;
margin: 0;
padding: 0 var(--hl-spacer-2xs);
background-color: var(--hl-color-bg-light-default);
max-width: calc(100% - var(--hl-spacer-sm) * 2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.form-group--material:has(.input-group) > label {
max-width: calc(100% - var(--hl-spacer-sm) * 2 - 44px); }
.form-group--material:has(.form-control:focus) > label {
top: var(--md-floating-top);
font-size: var(--hl-font-size-sm);
transform: translateY(-50%); }
.form-group--material:has(.form-control:not(:placeholder-shown)) > label, .form-group--material:has(.form-control:-webkit-autofill) > label, .form-group--material:has(.form-control:autofill) > label {
top: var(--md-floating-top);
font-size: var(--hl-font-size-sm);
transform: translateY(-50%); }
.form-group--material:has(select:focus) > label {
top: var(--md-floating-top);
font-size: var(--hl-font-size-sm);
transform: translateY(-50%);
color: var(--hl-color-fg-light-muted); }
.form-group--material:has(select:not(:invalid)) > label, .form-group--material:has(select) > label:has(~ select option:checked:not([value=""])) {
top: var(--md-floating-top);
font-size: var(--hl-font-size-sm);
transform: translateY(-50%); }
.form-group--material .custom-select {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-standby);
border-radius: var(--hl-border-radius-default);
background-color: var(--hl-color-bg-light-default);
transition: border-color var(--md-transition-duration) var(--md-transition-function), background-color var(--md-transition-duration) var(--md-transition-function); }
@media (prefers-reduced-motion: reduce) {
.form-group--material .custom-select {
transition: none; } }
.form-group--material .custom-select:hover {
border-color: var(--hl-color-border-light-interaction-hover); }
.form-group--material .custom-select:focus {
box-shadow: none;
border-color: var(--hl-color-border-light-interaction-focus);
background-color: var(--hl-color-bg-light-default); }
.form-group--material:has(input[type=file]) > label, .form-group--material:has(input[type=date]) > label {
color: var(--hl-color-fg-light-muted); }
.form-group--material:has(.form-control:disabled) > label, .form-group--material:has(.custom-select:disabled) > label {
color: var(--hl-color-form-fg-light-disabled); }
.form-group--material:has(.form-control.is-invalid) > label {
color: var(--hl-color-functional-danger); }
.form-group--material:has(.form-control.is-invalid) .form-control {
border-color: var(--hl-color-functional-danger); }
.form-group--material .form-control {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-standby);
border-radius: var(--hl-border-radius-default);
background-color: var(--hl-color-bg-light-default);
transition: border-color var(--md-transition-duration) var(--md-transition-function), background-color var(--md-transition-duration) var(--md-transition-function); }
@media (prefers-reduced-motion: reduce) {
.form-group--material .form-control {
transition: none; } }
.form-group--material .form-control::-moz-placeholder {
color: transparent;
-moz-transition: color var(--md-transition-duration) var(--md-transition-function);
transition: color var(--md-transition-duration) var(--md-transition-function); }
.form-group--material .form-control::placeholder {
color: transparent;
transition: color var(--md-transition-duration) var(--md-transition-function); }
.form-group--material .form-control:focus::-moz-placeholder {
color: var(--hl-color-fg-light-muted); }
.form-group--material .form-control:focus::placeholder {
color: var(--hl-color-fg-light-muted); }
.form-group--material .form-control:hover {
border-color: var(--hl-color-border-light-interaction-hover); }
.form-group--material .form-control:focus {
box-shadow: none;
border-color: var(--hl-color-border-light-interaction-focus);
background-color: var(--hl-color-bg-light-default); }
.form-group--material textarea.form-control {
min-height: calc(var(--hl-typography-line-height-very-decreased) * 1em + calc(var(--hl-spacer-sm)) * 2 + calc(var(--hl-border-width-default) * 2)); }
.form-group--material .input-group-append {
z-index: 5;
background-color: var(--hl-color-bg-light-default);
border-radius: 0 var(--hl-border-radius-default) var(--hl-border-radius-default) 0;
transition: border-color var(--md-transition-duration) var(--md-transition-function), background-color var(--md-transition-duration) var(--md-transition-function); }
@media (prefers-reduced-motion: reduce) {
.form-group--material .input-group-append {
transition: none; } }
.form-group--material:has(.form-control:focus) .input-group-append {
border-color: var(--hl-color-border-light-interaction-focus);
background-color: var(--hl-color-bg-light-default); }
.form-group--material .input-group .form-control {
border-radius: var(--hl-border-radius-default) 0 0 var(--hl-border-radius-default); }
.form-group--material .input-group .form-control:focus {
border-color: var(--hl-color-border-light-interaction-focus); }
.form-group--material .input-group-prepend {
z-index: 5;
background-color: var(--hl-color-bg-light-default);
border-radius: var(--hl-border-radius-default) 0 0 var(--hl-border-radius-default);
transition: border-color var(--md-transition-duration) var(--md-transition-function), background-color var(--md-transition-duration) var(--md-transition-function); }
@media (prefers-reduced-motion: reduce) {
.form-group--material .input-group-prepend {
transition: none; } }
.form-group--material:has(.form-control:focus) .input-group-prepend {
border-color: var(--hl-color-border-light-interaction-focus);
background-color: var(--hl-color-bg-light-default); }
.form-group--material:has(.input-group-prepend) > label {
left: calc(calc(var(--hl-spacer-sm)) + var(--hl-size-icon-md) + var(--hl-spacer-sm) + (var(--hl-size-icon-md) - 1em) * 0.5); }
.form-group--material .input-group-prepend + .form-control,
.form-group--material .input-group-prepend ~ .form-control {
border-radius: 0 var(--hl-border-radius-default) var(--hl-border-radius-default) 0; }
.form-control--icon-search {
--_size-icon-search: calc(var(--hl-size-icon-md) - 4px);
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: var(--_size-icon-search);
background-position: calc(100% - var(--hl-spacer-sm)) center;
padding-right: calc(var(--hl-spacer-lg) + var(--_size-icon-search)); }
.hl-btn,
.btn,
.subnav__nav__item,
.charger-btn {
--btn-icon-size: var(--hl-size-icon-md);
--btn-icon-margin: calc((var(--btn-icon-size) - 1em) * -.5);
--btn-icon-gap: var(--hl-spacer-xs);
display: inline-flex;
font-weight: var(--hl-typography-font-weight-body-bold);
color: var(--hl-color-fg-light-default);
text-align: center;
text-decoration: none;
justify-content: center;
align-items: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: transparent;
border: var(--hl-border-width-default) solid transparent;
max-width: 100%;
min-width: var(--hl-spacer-md);
gap: var(--btn-icon-gap);
padding: calc(var(--hl-spacer-sm)) var(--hl-spacer-lg);
font-size: var(--hl-font-size-md);
line-height: var(--hl-typography-line-height-very-decreased);
border-radius: var(--hl-border-radius-default);
transition: all var(--hl-transition-normal); }
@media (prefers-reduced-motion: reduce) {
.hl-btn,
.btn,
.subnav__nav__item,
.charger-btn {
transition: none; } }
.hl-btn:not(.disabled):focus-visible, .hl-btn:not(.disabled):has(input):focus-within,
.btn:not(.disabled):focus-visible,
.subnav__nav__item:not(.disabled):focus-visible,
.charger-btn:not(.disabled):focus-visible,
.btn:not(.disabled):has(input):focus-within,
.subnav__nav__item:not(.disabled):has(input):focus-within,
.charger-btn:not(.disabled):has(input):focus-within {
animation: focus-outline-animation var(--hl-transition-normal) forwards; }
.hl-btn.disabled:focus-visible, .hl-btn.disabled:focus-within,
.btn.disabled:focus-visible,
.disabled.subnav__nav__item:focus-visible,
.disabled.charger-btn:focus-visible,
.btn.disabled:focus-within,
.disabled.subnav__nav__item:focus-within,
.disabled.charger-btn:focus-within {
outline: 0 !important; }
.hl-btn path,
.btn path,
.subnav__nav__item path,
.charger-btn path {
fill: currentColor; }
.hl-btn:hover,
.btn:hover,
.subnav__nav__item:hover,
.charger-btn:hover {
color: var(--hl-color-fg-light-default);
text-decoration: none !important; }
.hl-btn:focus, .hl-btn.focus,
.btn:focus,
.subnav__nav__item:focus,
.charger-btn:focus,
.btn.focus,
.focus.subnav__nav__item,
.focus.charger-btn {
outline: 0;
box-shadow: 0;
text-decoration: none !important; }
.hl-btn.disabled, .hl-btn:disabled,
.btn.disabled,
.disabled.subnav__nav__item,
.disabled.charger-btn,
.btn:disabled,
.subnav__nav__item:disabled,
.charger-btn:disabled {
opacity: var(--hl-opacity-disabled);
pointer-events: none; }
.hl-btn:not(:disabled):not(.disabled),
.btn:not(:disabled):not(.disabled),
.subnav__nav__item:not(:disabled):not(.disabled),
.charger-btn:not(:disabled):not(.disabled) {
cursor: pointer; }
.hl-btn-icon,
.btn-icon {
padding-left: calc(var(--hl-spacer-sm));
padding-right: calc(var(--hl-spacer-sm)); }
.hl-btn .hl-btn__icon, .hl-btn .hl-icon,
.hl-btn .btn__icon,
.btn .hl-icon,
.subnav__nav__item .hl-icon,
.charger-btn .hl-icon,
.btn .hl-btn__icon,
.subnav__nav__item .hl-btn__icon,
.charger-btn .hl-btn__icon,
.btn .btn__icon,
.subnav__nav__item .btn__icon,
.charger-btn .btn__icon {
flex-shrink: 0;
height: var(--btn-icon-size);
margin: var(--btn-icon-margin);
width: var(--btn-icon-size); }
a.hl-btn.disabled,
a.btn.disabled,
a.disabled.subnav__nav__item,
a.disabled.charger-btn,
fieldset:disabled a.hl-btn,
fieldset:disabled a.btn,
fieldset:disabled a.subnav__nav__item,
fieldset:disabled a.charger-btn {
pointer-events: none; }
.hl-btn-primary,
.btn-primary,
.hl-tag--interactive-orange .btn,
.hl-tag--interactive-orange .charger-btn,
.hl-tag--interactive-orange .subnav__nav__item {
--a11y-color-navigation-focus-visible: var(--hl-color-button-border-light-primary-standby);
background-color: var(--hl-color-button-bg-light-primary-standby);
color: var(--hl-color-button-fg-light-primary-standby);
border-color: var(--hl-color-button-border-light-primary-standby); }
.hl-btn-primary.hover, .hl-btn-primary:hover,
.btn-primary.hover,
.hl-tag--interactive-orange .hover.btn,
.hl-tag--interactive-orange .hover.charger-btn,
.hl-tag--interactive-orange .hover.subnav__nav__item,
.btn-primary:hover,
.hl-tag--interactive-orange .btn:hover,
.hl-tag--interactive-orange .charger-btn:hover,
.hl-tag--interactive-orange .subnav__nav__item:hover {
background-color: var(--hl-color-button-bg-light-primary-hover);
color: var(--hl-color-button-fg-light-primary-hover);
border-color: var(--hl-color-button-border-light-primary-hover); }
.hl-btn-primary.focus, .hl-btn-primary:focus,
.btn-primary.focus,
.hl-tag--interactive-orange .focus.btn,
.hl-tag--interactive-orange .focus.charger-btn,
.hl-tag--interactive-orange .focus.subnav__nav__item,
.btn-primary:focus,
.hl-tag--interactive-orange .btn:focus,
.hl-tag--interactive-orange .charger-btn:focus,
.hl-tag--interactive-orange .subnav__nav__item:focus {
background-color: var(--hl-color-button-bg-light-primary-focus);
color: var(--hl-color-button-fg-light-primary-focus);
border-color: var(--hl-color-button-border-light-primary-focus); }
.hl-btn-primary.focus-visible, .hl-btn-primary:focus-visible,
.btn-primary.focus-visible,
.hl-tag--interactive-orange .focus-visible.btn,
.hl-tag--interactive-orange .focus-visible.charger-btn,
.hl-tag--interactive-orange .focus-visible.subnav__nav__item,
.btn-primary:focus-visible,
.hl-tag--interactive-orange .btn:focus-visible,
.hl-tag--interactive-orange .charger-btn:focus-visible,
.hl-tag--interactive-orange .subnav__nav__item:focus-visible {
background-color: var(--hl-color-button-bg-light-primary-focus);
color: var(--hl-color-button-fg-light-primary-focus);
border-color: var(--hl-color-button-border-light-primary-focus); }
.hl-btn-primary.pressed, .hl-btn-primary:active,
.btn-primary.pressed,
.hl-tag--interactive-orange .pressed.btn,
.hl-tag--interactive-orange .pressed.charger-btn,
.hl-tag--interactive-orange .pressed.subnav__nav__item,
.btn-primary:active,
.hl-tag--interactive-orange .btn:active,
.hl-tag--interactive-orange .charger-btn:active,
.hl-tag--interactive-orange .subnav__nav__item:active {
background-color: var(--hl-color-button-bg-light-primary-pressed);
color: var(--hl-color-button-fg-light-primary-pressed);
border-color: var(--hl-color-button-border-light-primary-pressed); }
.hl-btn-primary.active, .hl-btn-primary.dropdown-toggle[aria-expanded=true],
.btn-primary.active,
.hl-tag--interactive-orange .active.btn,
.hl-tag--interactive-orange .active.charger-btn,
.hl-tag--interactive-orange .active.subnav__nav__item,
.btn-primary.dropdown-toggle[aria-expanded=true],
.hl-tag--interactive-orange .dropdown-toggle[aria-expanded=true].btn,
.hl-tag--interactive-orange .dropdown-toggle[aria-expanded=true].charger-btn,
.hl-tag--interactive-orange .dropdown-toggle[aria-expanded=true].subnav__nav__item {
background-color: var(--hl-color-button-bg-light-primary-active);
color: var(--hl-color-button-fg-light-primary-active);
border-color: var(--hl-color-button-border-light-primary-active); }
.hl-btn-primary.disabled, .hl-btn-primary:disabled,
.btn-primary.disabled,
.hl-tag--interactive-orange .disabled.btn,
.hl-tag--interactive-orange .disabled.charger-btn,
.hl-tag--interactive-orange .disabled.subnav__nav__item,
.btn-primary:disabled,
.hl-tag--interactive-orange .btn:disabled,
.hl-tag--interactive-orange .charger-btn:disabled,
.hl-tag--interactive-orange .subnav__nav__item:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled); }
.hl-btn-secondary,
.btn-secondary {
--a11y-color-navigation-focus-visible: var(--hl-color-button-border-light-secondary-standby);
background-color: var(--hl-color-button-bg-light-secondary-standby);
color: var(--hl-color-button-fg-light-secondary-standby);
border-color: var(--hl-color-button-border-light-secondary-standby); }
.hl-btn-secondary.hover, .hl-btn-secondary:hover,
.btn-secondary.hover,
.btn-secondary:hover {
background-color: var(--hl-color-button-bg-light-secondary-hover);
color: var(--hl-color-button-fg-light-secondary-hover);
border-color: var(--hl-color-button-border-light-secondary-hover); }
.hl-btn-secondary.focus, .hl-btn-secondary:focus,
.btn-secondary.focus,
.btn-secondary:focus {
background-color: var(--hl-color-button-bg-light-secondary-focus);
color: var(--hl-color-button-fg-light-secondary-focus);
border-color: var(--hl-color-button-border-light-secondary-focus); }
.hl-btn-secondary.focus-visible, .hl-btn-secondary:focus-visible,
.btn-secondary.focus-visible,
.btn-secondary:focus-visible {
background-color: var(--hl-color-button-bg-light-secondary-focus);
color: var(--hl-color-button-fg-light-secondary-focus);
border-color: var(--hl-color-button-border-light-secondary-focus); }
.hl-btn-secondary.pressed, .hl-btn-secondary:active,
.btn-secondary.pressed,
.btn-secondary:active {
background-color: var(--hl-color-button-bg-light-secondary-pressed);
color: var(--hl-color-button-fg-light-secondary-pressed);
border-color: var(--hl-color-button-border-light-secondary-pressed); }
.hl-btn-secondary.active, .hl-btn-secondary.dropdown-toggle[aria-expanded=true],
.btn-secondary.active,
.btn-secondary.dropdown-toggle[aria-expanded=true] {
background-color: var(--hl-color-button-bg-light-secondary-active);
color: var(--hl-color-button-fg-light-secondary-active);
border-color: var(--hl-color-button-border-light-secondary-active); }
.hl-btn-secondary.disabled, .hl-btn-secondary:disabled,
.btn-secondary.disabled,
.btn-secondary:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled);
background-color: transparent;
color: var(--hl-color-button-border-light-disabled); }
.hl-btn-tertiary,
.btn-tertiary {
--a11y-color-navigation-focus-visible: var(--hl-color-button-fg-light-link-standby);
background-color: var(--hl-color-button-bg-light-link-standby);
color: var(--hl-color-button-fg-light-link-standby);
border-color: var(--hl-color-button-border-light-link-standby); }
.hl-btn-tertiary.hover, .hl-btn-tertiary:hover,
.btn-tertiary.hover,
.btn-tertiary:hover {
background-color: var(--hl-color-button-bg-light-link-hover);
color: var(--hl-color-button-fg-light-link-hover);
border-color: var(--hl-color-button-border-light-link-hover); }
.hl-btn-tertiary.focus, .hl-btn-tertiary:focus,
.btn-tertiary.focus,
.btn-tertiary:focus {
background-color: var(--hl-color-button-bg-light-link-focus);
color: var(--hl-color-button-fg-light-link-focus);
border-color: var(--hl-color-button-border-light-link-focus); }
.hl-btn-tertiary.focus-visible, .hl-btn-tertiary:focus-visible,
.btn-tertiary.focus-visible,
.btn-tertiary:focus-visible {
background-color: var(--hl-color-button-bg-light-link-focus);
color: var(--hl-color-button-fg-light-link-focus);
border-color: var(--hl-color-button-border-light-link-focus); }
.hl-btn-tertiary.pressed, .hl-btn-tertiary:active,
.btn-tertiary.pressed,
.btn-tertiary:active {
background-color: var(--hl-color-button-bg-light-link-pressed);
color: var(--hl-color-button-fg-light-link-pressed);
border-color: var(--hl-color-button-border-light-link-pressed); }
.hl-btn-tertiary.active, .hl-btn-tertiary.dropdown-toggle[aria-expanded=true],
.btn-tertiary.active,
.btn-tertiary.dropdown-toggle[aria-expanded=true] {
background-color: var(--hl-color-button-bg-light-link-active);
color: var(--hl-color-button-fg-light-link-active);
border-color: var(--hl-color-button-border-light-link-active); }
.hl-btn-tertiary.disabled, .hl-btn-tertiary:disabled,
.btn-tertiary.disabled,
.btn-tertiary:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled);
background-color: transparent;
border-color: transparent;
color: var(--hl-color-button-border-light-disabled); }
.hl-btn-outline-black,
.btn-outline-black,
.hl-tag--interactive .btn,
.hl-tag--interactive .charger-btn,
.hl-tag--interactive .subnav__nav__item {
--a11y-color-navigation-focus-visible: var(--hl-color-button-border-light-outline-standby);
background-color: var(--hl-color-button-bg-light-outline-standby);
color: var(--hl-color-button-fg-light-outline-standby);
border-color: var(--hl-color-button-border-light-outline-standby); }
.hl-btn-outline-black.hover, .hl-btn-outline-black:hover,
.btn-outline-black.hover,
.hl-tag--interactive .hover.btn,
.hl-tag--interactive .hover.charger-btn,
.hl-tag--interactive .hover.subnav__nav__item,
.btn-outline-black:hover,
.hl-tag--interactive .btn:hover,
.hl-tag--interactive .charger-btn:hover,
.hl-tag--interactive .subnav__nav__item:hover {
background-color: var(--hl-color-button-bg-light-outline-hover);
color: var(--hl-color-button-fg-light-outline-hover);
border-color: var(--hl-color-button-border-light-outline-hover); }
.hl-btn-outline-black.focus, .hl-btn-outline-black:focus,
.btn-outline-black.focus,
.hl-tag--interactive .focus.btn,
.hl-tag--interactive .focus.charger-btn,
.hl-tag--interactive .focus.subnav__nav__item,
.btn-outline-black:focus,
.hl-tag--interactive .btn:focus,
.hl-tag--interactive .charger-btn:focus,
.hl-tag--interactive .subnav__nav__item:focus {
background-color: var(--hl-color-button-bg-light-outline-focus);
color: var(--hl-color-button-fg-light-outline-focus);
border-color: var(--hl-color-button-border-light-outline-focus); }
.hl-btn-outline-black.focus-visible, .hl-btn-outline-black:focus-visible,
.btn-outline-black.focus-visible,
.hl-tag--interactive .focus-visible.btn,
.hl-tag--interactive .focus-visible.charger-btn,
.hl-tag--interactive .focus-visible.subnav__nav__item,
.btn-outline-black:focus-visible,
.hl-tag--interactive .btn:focus-visible,
.hl-tag--interactive .charger-btn:focus-visible,
.hl-tag--interactive .subnav__nav__item:focus-visible {
background-color: var(--hl-color-button-bg-light-outline-focus);
color: var(--hl-color-button-fg-light-outline-focus);
border-color: var(--hl-color-button-border-light-outline-focus); }
.hl-btn-outline-black.pressed, .hl-btn-outline-black:active,
.btn-outline-black.pressed,
.hl-tag--interactive .pressed.btn,
.hl-tag--interactive .pressed.charger-btn,
.hl-tag--interactive .pressed.subnav__nav__item,
.btn-outline-black:active,
.hl-tag--interactive .btn:active,
.hl-tag--interactive .charger-btn:active,
.hl-tag--interactive .subnav__nav__item:active {
background-color: var(--hl-color-button-bg-light-outline-pressed);
color: var(--hl-color-button-fg-light-outline-pressed);
border-color: var(--hl-color-button-border-light-outline-pressed); }
.hl-btn-outline-black.active, .hl-btn-outline-black.dropdown-toggle[aria-expanded=true],
.btn-outline-black.active,
.hl-tag--interactive .active.btn,
.hl-tag--interactive .active.charger-btn,
.hl-tag--interactive .active.subnav__nav__item,
.btn-outline-black.dropdown-toggle[aria-expanded=true],
.hl-tag--interactive .dropdown-toggle[aria-expanded=true].btn,
.hl-tag--interactive .dropdown-toggle[aria-expanded=true].charger-btn,
.hl-tag--interactive .dropdown-toggle[aria-expanded=true].subnav__nav__item {
background-color: var(--hl-color-button-bg-light-outline-active);
color: var(--hl-color-button-fg-light-outline-active);
border-color: var(--hl-color-button-border-light-outline-active); }
.hl-btn-outline-black.disabled, .hl-btn-outline-black:disabled,
.btn-outline-black.disabled,
.hl-tag--interactive .disabled.btn,
.hl-tag--interactive .disabled.charger-btn,
.hl-tag--interactive .disabled.subnav__nav__item,
.btn-outline-black:disabled,
.hl-tag--interactive .btn:disabled,
.hl-tag--interactive .charger-btn:disabled,
.hl-tag--interactive .subnav__nav__item:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled);
background-color: transparent;
color: var(--hl-color-button-border-light-disabled); }
.hl-btn-outline-white,
.btn-outline-white,
.bg-dark .hl-tag--interactive .btn,
.bg-dark .hl-tag--interactive .charger-btn,
.bg-dark .hl-tag--interactive .subnav__nav__item {
--a11y-color-navigation-focus-visible: var(--hl-color-button-border-light-outline-standby);
background-color: var(--hl-color-button-bg-light-outline-standby);
color: var(--hl-color-button-fg-light-outline-standby);
border-color: var(--hl-color-button-border-light-outline-standby); }
.hl-btn-outline-white.hover, .hl-btn-outline-white:hover,
.btn-outline-white.hover,
.bg-dark .hl-tag--interactive .hover.btn,
.bg-dark .hl-tag--interactive .hover.charger-btn,
.bg-dark .hl-tag--interactive .hover.subnav__nav__item,
.btn-outline-white:hover,
.bg-dark .hl-tag--interactive .btn:hover,
.bg-dark .hl-tag--interactive .charger-btn:hover,
.bg-dark .hl-tag--interactive .subnav__nav__item:hover {
background-color: var(--hl-color-button-bg-light-outline-hover);
color: var(--hl-color-button-fg-light-outline-hover);
border-color: var(--hl-color-button-border-light-outline-hover); }
.hl-btn-outline-white.focus, .hl-btn-outline-white:focus,
.btn-outline-white.focus,
.bg-dark .hl-tag--interactive .focus.btn,
.bg-dark .hl-tag--interactive .focus.charger-btn,
.bg-dark .hl-tag--interactive .focus.subnav__nav__item,
.btn-outline-white:focus,
.bg-dark .hl-tag--interactive .btn:focus,
.bg-dark .hl-tag--interactive .charger-btn:focus,
.bg-dark .hl-tag--interactive .subnav__nav__item:focus {
background-color: var(--hl-color-button-bg-light-outline-focus);
color: var(--hl-color-button-fg-light-outline-focus);
border-color: var(--hl-color-button-border-light-outline-focus); }
.hl-btn-outline-white.focus-visible, .hl-btn-outline-white:focus-visible,
.btn-outline-white.focus-visible,
.bg-dark .hl-tag--interactive .focus-visible.btn,
.bg-dark .hl-tag--interactive .focus-visible.charger-btn,
.bg-dark .hl-tag--interactive .focus-visible.subnav__nav__item,
.btn-outline-white:focus-visible,
.bg-dark .hl-tag--interactive .btn:focus-visible,
.bg-dark .hl-tag--interactive .charger-btn:focus-visible,
.bg-dark .hl-tag--interactive .subnav__nav__item:focus-visible {
background-color: var(--hl-color-button-bg-light-outline-focus);
color: var(--hl-color-button-fg-light-outline-focus);
border-color: var(--hl-color-button-border-light-outline-focus); }
.hl-btn-outline-white.pressed, .hl-btn-outline-white:active,
.btn-outline-white.pressed,
.bg-dark .hl-tag--interactive .pressed.btn,
.bg-dark .hl-tag--interactive .pressed.charger-btn,
.bg-dark .hl-tag--interactive .pressed.subnav__nav__item,
.btn-outline-white:active,
.bg-dark .hl-tag--interactive .btn:active,
.bg-dark .hl-tag--interactive .charger-btn:active,
.bg-dark .hl-tag--interactive .subnav__nav__item:active {
background-color: var(--hl-color-button-bg-light-outline-pressed);
color: var(--hl-color-button-fg-light-outline-pressed);
border-color: var(--hl-color-button-border-light-outline-pressed); }
.hl-btn-outline-white.active, .hl-btn-outline-white.dropdown-toggle[aria-expanded=true],
.btn-outline-white.active,
.bg-dark .hl-tag--interactive .active.btn,
.bg-dark .hl-tag--interactive .active.charger-btn,
.bg-dark .hl-tag--interactive .active.subnav__nav__item,
.btn-outline-white.dropdown-toggle[aria-expanded=true],
.bg-dark .hl-tag--interactive .dropdown-toggle[aria-expanded=true].btn,
.bg-dark .hl-tag--interactive .dropdown-toggle[aria-expanded=true].charger-btn,
.bg-dark .hl-tag--interactive .dropdown-toggle[aria-expanded=true].subnav__nav__item {
background-color: var(--hl-color-button-bg-light-outline-active);
color: var(--hl-color-button-fg-light-outline-active);
border-color: var(--hl-color-button-border-light-outline-active); }
.hl-btn-outline-white.disabled, .hl-btn-outline-white:disabled,
.btn-outline-white.disabled,
.bg-dark .hl-tag--interactive .disabled.btn,
.bg-dark .hl-tag--interactive .disabled.charger-btn,
.bg-dark .hl-tag--interactive .disabled.subnav__nav__item,
.btn-outline-white:disabled,
.bg-dark .hl-tag--interactive .btn:disabled,
.bg-dark .hl-tag--interactive .charger-btn:disabled,
.bg-dark .hl-tag--interactive .subnav__nav__item:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled);
background-color: transparent;
color: var(--hl-color-button-border-light-disabled); }
.hl-btn-borderless,
.btn-borderless,
.subnav__nav__item {
--a11y-color-navigation-focus-visible: var(--hl-color-button-fg-light-borderless-standby);
background-color: var(--hl-color-button-bg-light-borderless-standby);
color: var(--hl-color-button-fg-light-borderless-standby);
border-color: var(--hl-color-button-border-light-borderless-standby); }
.hl-btn-borderless.hover, .hl-btn-borderless:hover,
.btn-borderless.hover,
.hover.subnav__nav__item,
.btn-borderless:hover,
.subnav__nav__item:hover {
background-color: var(--hl-color-button-bg-light-borderless-hover);
color: var(--hl-color-button-fg-light-borderless-hover);
border-color: var(--hl-color-button-border-light-borderless-hover); }
.hl-btn-borderless.focus, .hl-btn-borderless:focus,
.btn-borderless.focus,
.focus.subnav__nav__item,
.btn-borderless:focus,
.subnav__nav__item:focus {
background-color: var(--hl-color-button-bg-light-borderless-focus);
color: var(--hl-color-button-fg-light-borderless-focus);
border-color: var(--hl-color-button-border-light-borderless-focus); }
.hl-btn-borderless.focus-visible, .hl-btn-borderless:focus-visible,
.btn-borderless.focus-visible,
.focus-visible.subnav__nav__item,
.btn-borderless:focus-visible,
.subnav__nav__item:focus-visible {
background-color: var(--hl-color-button-bg-light-borderless-focus);
color: var(--hl-color-button-fg-light-borderless-focus);
border-color: var(--hl-color-button-border-light-borderless-focus); }
.hl-btn-borderless.pressed, .hl-btn-borderless:active,
.btn-borderless.pressed,
.pressed.subnav__nav__item,
.btn-borderless:active,
.subnav__nav__item:active {
background-color: var(--hl-color-button-bg-light-borderless-pressed);
color: var(--hl-color-button-fg-light-borderless-pressed);
border-color: var(--hl-color-button-border-light-borderless-pressed); }
.hl-btn-borderless.active, .hl-btn-borderless.dropdown-toggle[aria-expanded=true],
.btn-borderless.active,
.active.subnav__nav__item,
.btn-borderless.dropdown-toggle[aria-expanded=true],
.dropdown-toggle[aria-expanded=true].subnav__nav__item {
background-color: var(--hl-color-button-bg-light-borderless-active);
color: var(--hl-color-button-fg-light-borderless-active);
border-color: var(--hl-color-button-border-light-borderless-active); }
.hl-btn-borderless.disabled, .hl-btn-borderless:disabled,
.btn-borderless.disabled,
.disabled.subnav__nav__item,
.btn-borderless:disabled,
.subnav__nav__item:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled);
background-color: transparent;
border-color: transparent;
color: var(--hl-color-button-border-light-disabled); }
.hl-btn-borderless-black,
.btn-borderless-black {
--a11y-color-navigation-focus-visible: var(--hl-color-button-fg-light-borderless-standby);
background-color: var(--hl-color-button-bg-light-borderless-standby);
color: var(--hl-color-button-fg-light-borderless-standby);
border-color: var(--hl-color-button-border-light-borderless-standby); }
.hl-btn-borderless-black.hover, .hl-btn-borderless-black:hover,
.btn-borderless-black.hover,
.btn-borderless-black:hover {
background-color: var(--hl-color-button-bg-light-borderless-hover);
color: var(--hl-color-button-fg-light-borderless-hover);
border-color: var(--hl-color-button-border-light-borderless-hover); }
.hl-btn-borderless-black.focus, .hl-btn-borderless-black:focus,
.btn-borderless-black.focus,
.btn-borderless-black:focus {
background-color: var(--hl-color-button-bg-light-borderless-focus);
color: var(--hl-color-button-fg-light-borderless-focus);
border-color: var(--hl-color-button-border-light-borderless-focus); }
.hl-btn-borderless-black.focus-visible, .hl-btn-borderless-black:focus-visible,
.btn-borderless-black.focus-visible,
.btn-borderless-black:focus-visible {
background-color: var(--hl-color-button-bg-light-borderless-focus);
color: var(--hl-color-button-fg-light-borderless-focus);
border-color: var(--hl-color-button-border-light-borderless-focus); }
.hl-btn-borderless-black.pressed, .hl-btn-borderless-black:active,
.btn-borderless-black.pressed,
.btn-borderless-black:active {
background-color: var(--hl-color-button-bg-light-borderless-pressed);
color: var(--hl-color-button-fg-light-borderless-pressed);
border-color: var(--hl-color-button-border-light-borderless-pressed); }
.hl-btn-borderless-black.active, .hl-btn-borderless-black.dropdown-toggle[aria-expanded=true],
.btn-borderless-black.active,
.btn-borderless-black.dropdown-toggle[aria-expanded=true] {
background-color: var(--hl-color-button-bg-light-borderless-active);
color: var(--hl-color-button-fg-light-borderless-active);
border-color: var(--hl-color-button-border-light-borderless-active); }
.hl-btn-borderless-black.disabled, .hl-btn-borderless-black:disabled,
.btn-borderless-black.disabled,
.btn-borderless-black:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled);
background-color: transparent;
border-color: transparent;
color: var(--hl-color-button-border-light-disabled); }
.hl-btn-borderless-white,
.btn-borderless-white {
--a11y-color-navigation-focus-visible: var(--hl-color-button-fg-light-borderless-standby);
background-color: var(--hl-color-button-bg-light-borderless-standby);
color: var(--hl-color-button-fg-light-borderless-standby);
border-color: var(--hl-color-button-border-light-borderless-standby); }
.hl-btn-borderless-white.hover, .hl-btn-borderless-white:hover,
.btn-borderless-white.hover,
.btn-borderless-white:hover {
background-color: var(--hl-color-button-bg-light-borderless-hover);
color: var(--hl-color-button-fg-light-borderless-hover);
border-color: var(--hl-color-button-border-light-borderless-hover); }
.hl-btn-borderless-white.focus, .hl-btn-borderless-white:focus,
.btn-borderless-white.focus,
.btn-borderless-white:focus {
background-color: var(--hl-color-button-bg-light-borderless-focus);
color: var(--hl-color-button-fg-light-borderless-focus);
border-color: var(--hl-color-button-border-light-borderless-focus); }
.hl-btn-borderless-white.focus-visible, .hl-btn-borderless-white:focus-visible,
.btn-borderless-white.focus-visible,
.btn-borderless-white:focus-visible {
background-color: var(--hl-color-button-bg-light-borderless-focus);
color: var(--hl-color-button-fg-light-borderless-focus);
border-color: var(--hl-color-button-border-light-borderless-focus); }
.hl-btn-borderless-white.pressed, .hl-btn-borderless-white:active,
.btn-borderless-white.pressed,
.btn-borderless-white:active {
background-color: var(--hl-color-button-bg-light-borderless-pressed);
color: var(--hl-color-button-fg-light-borderless-pressed);
border-color: var(--hl-color-button-border-light-borderless-pressed); }
.hl-btn-borderless-white.active, .hl-btn-borderless-white.dropdown-toggle[aria-expanded=true],
.btn-borderless-white.active,
.btn-borderless-white.dropdown-toggle[aria-expanded=true] {
background-color: var(--hl-color-button-bg-light-borderless-active);
color: var(--hl-color-button-fg-light-borderless-active);
border-color: var(--hl-color-button-border-light-borderless-active); }
.hl-btn-borderless-white.disabled, .hl-btn-borderless-white:disabled,
.btn-borderless-white.disabled,
.btn-borderless-white:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled);
background-color: transparent;
border-color: transparent;
color: var(--hl-color-button-border-light-disabled); }
.hl-btn-black,
.btn-black,
.hl-tag--interactive-secondary .btn,
.hl-tag--interactive-secondary .charger-btn,
.hl-tag--interactive-secondary .subnav__nav__item {
--a11y-color-navigation-focus-visible: var(--hl-color-button-bg-light-black-standby);
background-color: var(--hl-color-button-bg-light-black-standby);
color: var(--hl-color-button-fg-light-black-standby);
border-color: var(--hl-color-button-border-light-black-standby); }
.hl-btn-black.hover, .hl-btn-black:hover,
.btn-black.hover,
.hl-tag--interactive-secondary .hover.btn,
.hl-tag--interactive-secondary .hover.charger-btn,
.hl-tag--interactive-secondary .hover.subnav__nav__item,
.btn-black:hover,
.hl-tag--interactive-secondary .btn:hover,
.hl-tag--interactive-secondary .charger-btn:hover,
.hl-tag--interactive-secondary .subnav__nav__item:hover {
background-color: var(--hl-color-button-bg-light-black-hover);
color: var(--hl-color-button-fg-light-black-hover);
border-color: var(--hl-color-button-border-light-black-hover); }
.hl-btn-black.focus, .hl-btn-black:focus,
.btn-black.focus,
.hl-tag--interactive-secondary .focus.btn,
.hl-tag--interactive-secondary .focus.charger-btn,
.hl-tag--interactive-secondary .focus.subnav__nav__item,
.btn-black:focus,
.hl-tag--interactive-secondary .btn:focus,
.hl-tag--interactive-secondary .charger-btn:focus,
.hl-tag--interactive-secondary .subnav__nav__item:focus {
background-color: var(--hl-color-button-bg-light-black-focus);
color: var(--hl-color-button-fg-light-black-focus);
border-color: var(--hl-color-button-border-light-black-focus); }
.hl-btn-black.focus-visible, .hl-btn-black:focus-visible,
.btn-black.focus-visible,
.hl-tag--interactive-secondary .focus-visible.btn,
.hl-tag--interactive-secondary .focus-visible.charger-btn,
.hl-tag--interactive-secondary .focus-visible.subnav__nav__item,
.btn-black:focus-visible,
.hl-tag--interactive-secondary .btn:focus-visible,
.hl-tag--interactive-secondary .charger-btn:focus-visible,
.hl-tag--interactive-secondary .subnav__nav__item:focus-visible {
background-color: var(--hl-color-button-bg-light-black-focus);
color: var(--hl-color-button-fg-light-black-focus);
border-color: var(--hl-color-button-border-light-black-focus); }
.hl-btn-black.pressed, .hl-btn-black:active,
.btn-black.pressed,
.hl-tag--interactive-secondary .pressed.btn,
.hl-tag--interactive-secondary .pressed.charger-btn,
.hl-tag--interactive-secondary .pressed.subnav__nav__item,
.btn-black:active,
.hl-tag--interactive-secondary .btn:active,
.hl-tag--interactive-secondary .charger-btn:active,
.hl-tag--interactive-secondary .subnav__nav__item:active {
background-color: var(--hl-color-button-bg-light-black-pressed);
color: var(--hl-color-button-fg-light-black-pressed);
border-color: var(--hl-color-button-border-light-black-pressed); }
.hl-btn-black.active, .hl-btn-black.dropdown-toggle[aria-expanded=true],
.btn-black.active,
.hl-tag--interactive-secondary .active.btn,
.hl-tag--interactive-secondary .active.charger-btn,
.hl-tag--interactive-secondary .active.subnav__nav__item,
.btn-black.dropdown-toggle[aria-expanded=true],
.hl-tag--interactive-secondary .dropdown-toggle[aria-expanded=true].btn,
.hl-tag--interactive-secondary .dropdown-toggle[aria-expanded=true].charger-btn,
.hl-tag--interactive-secondary .dropdown-toggle[aria-expanded=true].subnav__nav__item {
background-color: var(--hl-color-button-bg-light-black-active);
color: var(--hl-color-button-fg-light-black-active);
border-color: var(--hl-color-button-border-light-black-active); }
.hl-btn-black.disabled, .hl-btn-black:disabled,
.btn-black.disabled,
.hl-tag--interactive-secondary .disabled.btn,
.hl-tag--interactive-secondary .disabled.charger-btn,
.hl-tag--interactive-secondary .disabled.subnav__nav__item,
.btn-black:disabled,
.hl-tag--interactive-secondary .btn:disabled,
.hl-tag--interactive-secondary .charger-btn:disabled,
.hl-tag--interactive-secondary .subnav__nav__item:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled); }
.hl-btn-white,
.btn-white,
.bg-dark .hl-tag--interactive-secondary .btn,
.bg-dark .hl-tag--interactive-secondary .charger-btn,
.bg-dark .hl-tag--interactive-secondary .subnav__nav__item {
--a11y-color-navigation-focus-visible: var(--hl-color-button-bg-white-standby);
background-color: var(--hl-color-button-bg-white-standby);
color: var(--hl-color-button-fg-white-standby);
border-color: var(--hl-color-button-border-white-standby); }
.hl-btn-white.hover, .hl-btn-white:hover,
.btn-white.hover,
.bg-dark .hl-tag--interactive-secondary .hover.btn,
.bg-dark .hl-tag--interactive-secondary .hover.charger-btn,
.bg-dark .hl-tag--interactive-secondary .hover.subnav__nav__item,
.btn-white:hover,
.bg-dark .hl-tag--interactive-secondary .btn:hover,
.bg-dark .hl-tag--interactive-secondary .charger-btn:hover,
.bg-dark .hl-tag--interactive-secondary .subnav__nav__item:hover {
background-color: var(--hl-color-button-bg-white-hover);
color: var(--hl-color-button-fg-white-hover);
border-color: var(--hl-color-button-border-white-hover); }
.hl-btn-white.focus, .hl-btn-white:focus,
.btn-white.focus,
.bg-dark .hl-tag--interactive-secondary .focus.btn,
.bg-dark .hl-tag--interactive-secondary .focus.charger-btn,
.bg-dark .hl-tag--interactive-secondary .focus.subnav__nav__item,
.btn-white:focus,
.bg-dark .hl-tag--interactive-secondary .btn:focus,
.bg-dark .hl-tag--interactive-secondary .charger-btn:focus,
.bg-dark .hl-tag--interactive-secondary .subnav__nav__item:focus {
background-color: var(--hl-color-button-bg-white-focus);
color: var(--hl-color-button-fg-white-focus);
border-color: var(--hl-color-button-border-white-focus); }
.hl-btn-white.focus-visible, .hl-btn-white:focus-visible,
.btn-white.focus-visible,
.bg-dark .hl-tag--interactive-secondary .focus-visible.btn,
.bg-dark .hl-tag--interactive-secondary .focus-visible.charger-btn,
.bg-dark .hl-tag--interactive-secondary .focus-visible.subnav__nav__item,
.btn-white:focus-visible,
.bg-dark .hl-tag--interactive-secondary .btn:focus-visible,
.bg-dark .hl-tag--interactive-secondary .charger-btn:focus-visible,
.bg-dark .hl-tag--interactive-secondary .subnav__nav__item:focus-visible {
background-color: var(--hl-color-button-bg-white-focus);
color: var(--hl-color-button-fg-white-focus);
border-color: var(--hl-color-button-border-white-focus); }
.hl-btn-white.pressed, .hl-btn-white:active,
.btn-white.pressed,
.bg-dark .hl-tag--interactive-secondary .pressed.btn,
.bg-dark .hl-tag--interactive-secondary .pressed.charger-btn,
.bg-dark .hl-tag--interactive-secondary .pressed.subnav__nav__item,
.btn-white:active,
.bg-dark .hl-tag--interactive-secondary .btn:active,
.bg-dark .hl-tag--interactive-secondary .charger-btn:active,
.bg-dark .hl-tag--interactive-secondary .subnav__nav__item:active {
background-color: var(--hl-color-button-bg-white-pressed);
color: var(--hl-color-button-fg-white-pressed);
border-color: var(--hl-color-button-border-white-pressed); }
.hl-btn-white.active, .hl-btn-white.dropdown-toggle[aria-expanded=true],
.btn-white.active,
.bg-dark .hl-tag--interactive-secondary .active.btn,
.bg-dark .hl-tag--interactive-secondary .active.charger-btn,
.bg-dark .hl-tag--interactive-secondary .active.subnav__nav__item,
.btn-white.dropdown-toggle[aria-expanded=true],
.bg-dark .hl-tag--interactive-secondary .dropdown-toggle[aria-expanded=true].btn,
.bg-dark .hl-tag--interactive-secondary .dropdown-toggle[aria-expanded=true].charger-btn,
.bg-dark .hl-tag--interactive-secondary .dropdown-toggle[aria-expanded=true].subnav__nav__item {
background-color: var(--hl-color-button-bg-white-active);
color: var(--hl-color-button-fg-white-active);
border-color: var(--hl-color-button-border-white-active); }
.hl-btn-white.disabled, .hl-btn-white:disabled,
.btn-white.disabled,
.bg-dark .hl-tag--interactive-secondary .disabled.btn,
.bg-dark .hl-tag--interactive-secondary .disabled.charger-btn,
.bg-dark .hl-tag--interactive-secondary .disabled.subnav__nav__item,
.btn-white:disabled,
.bg-dark .hl-tag--interactive-secondary .btn:disabled,
.bg-dark .hl-tag--interactive-secondary .charger-btn:disabled,
.bg-dark .hl-tag--interactive-secondary .subnav__nav__item:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled); }
.hl-btn-info,
.btn-info {
--a11y-color-navigation-focus-visible: var(--hl-color-button-border-light-info-standby);
background-color: var(--hl-color-button-bg-light-info-standby);
color: var(--hl-color-button-fg-light-info-standby);
border-color: var(--hl-color-button-border-light-info-standby); }
.hl-btn-info.hover, .hl-btn-info:hover,
.btn-info.hover,
.btn-info:hover {
background-color: var(--hl-color-button-bg-light-info-hover);
color: var(--hl-color-button-fg-light-info-hover);
border-color: var(--hl-color-button-border-light-info-hover); }
.hl-btn-info.focus, .hl-btn-info:focus,
.btn-info.focus,
.btn-info:focus {
background-color: var(--hl-color-button-bg-light-info-focus);
color: var(--hl-color-button-fg-light-info-focus);
border-color: var(--hl-color-button-border-light-info-focus); }
.hl-btn-info.focus-visible, .hl-btn-info:focus-visible,
.btn-info.focus-visible,
.btn-info:focus-visible {
background-color: var(--hl-color-button-bg-light-info-focus);
color: var(--hl-color-button-fg-light-info-focus);
border-color: var(--hl-color-button-border-light-info-focus); }
.hl-btn-info.pressed, .hl-btn-info:active,
.btn-info.pressed,
.btn-info:active {
background-color: var(--hl-color-button-bg-light-info-pressed);
color: var(--hl-color-button-fg-light-info-pressed);
border-color: var(--hl-color-button-border-light-info-pressed); }
.hl-btn-info.active, .hl-btn-info.dropdown-toggle[aria-expanded=true],
.btn-info.active,
.btn-info.dropdown-toggle[aria-expanded=true] {
background-color: var(--hl-color-button-bg-light-info-active);
color: var(--hl-color-button-fg-light-info-active);
border-color: var(--hl-color-button-border-light-info-active); }
.hl-btn-info.disabled, .hl-btn-info:disabled,
.btn-info.disabled,
.btn-info:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled); }
.hl-btn-success,
.btn-success {
--a11y-color-navigation-focus-visible: var(--hl-color-button-border-light-success-standby);
background-color: var(--hl-color-button-bg-light-success-standby);
color: var(--hl-color-button-fg-light-success-standby);
border-color: var(--hl-color-button-border-light-success-standby); }
.hl-btn-success.hover, .hl-btn-success:hover,
.btn-success.hover,
.btn-success:hover {
background-color: var(--hl-color-button-bg-light-success-hover);
color: var(--hl-color-button-fg-light-success-hover);
border-color: var(--hl-color-button-border-light-success-hover); }
.hl-btn-success.focus, .hl-btn-success:focus,
.btn-success.focus,
.btn-success:focus {
background-color: var(--hl-color-button-bg-light-success-focus);
color: var(--hl-color-button-fg-light-success-focus);
border-color: var(--hl-color-button-border-light-success-focus); }
.hl-btn-success.focus-visible, .hl-btn-success:focus-visible,
.btn-success.focus-visible,
.btn-success:focus-visible {
background-color: var(--hl-color-button-bg-light-success-focus);
color: var(--hl-color-button-fg-light-success-focus);
border-color: var(--hl-color-button-border-light-success-focus); }
.hl-btn-success.pressed, .hl-btn-success:active,
.btn-success.pressed,
.btn-success:active {
background-color: var(--hl-color-button-bg-light-success-pressed);
color: var(--hl-color-button-fg-light-success-pressed);
border-color: var(--hl-color-button-border-light-success-pressed); }
.hl-btn-success.active, .hl-btn-success.dropdown-toggle[aria-expanded=true],
.btn-success.active,
.btn-success.dropdown-toggle[aria-expanded=true] {
background-color: var(--hl-color-button-bg-light-success-active);
color: var(--hl-color-button-fg-light-success-active);
border-color: var(--hl-color-button-border-light-success-active); }
.hl-btn-success.disabled, .hl-btn-success:disabled,
.btn-success.disabled,
.btn-success:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled); }
.hl-btn-warning,
.btn-warning {
--a11y-color-navigation-focus-visible: var(--hl-color-button-border-light-warning-standby);
background-color: var(--hl-color-button-bg-light-warning-standby);
color: var(--hl-color-button-fg-light-warning-standby);
border-color: var(--hl-color-button-border-light-warning-standby); }
.hl-btn-warning.hover, .hl-btn-warning:hover,
.btn-warning.hover,
.btn-warning:hover {
background-color: var(--hl-color-button-bg-light-warning-hover);
color: var(--hl-color-button-fg-light-warning-hover);
border-color: var(--hl-color-button-border-light-warning-hover); }
.hl-btn-warning.focus, .hl-btn-warning:focus,
.btn-warning.focus,
.btn-warning:focus {
background-color: var(--hl-color-button-bg-light-warning-focus);
color: var(--hl-color-button-fg-light-warning-focus);
border-color: var(--hl-color-button-border-light-warning-focus); }
.hl-btn-warning.focus-visible, .hl-btn-warning:focus-visible,
.btn-warning.focus-visible,
.btn-warning:focus-visible {
background-color: var(--hl-color-button-bg-light-warning-focus);
color: var(--hl-color-button-fg-light-warning-focus);
border-color: var(--hl-color-button-border-light-warning-focus); }
.hl-btn-warning.pressed, .hl-btn-warning:active,
.btn-warning.pressed,
.btn-warning:active {
background-color: var(--hl-color-button-bg-light-warning-pressed);
color: var(--hl-color-button-fg-light-warning-pressed);
border-color: var(--hl-color-button-border-light-warning-pressed); }
.hl-btn-warning.active, .hl-btn-warning.dropdown-toggle[aria-expanded=true],
.btn-warning.active,
.btn-warning.dropdown-toggle[aria-expanded=true] {
background-color: var(--hl-color-button-bg-light-warning-active);
color: var(--hl-color-button-fg-light-warning-active);
border-color: var(--hl-color-button-border-light-warning-active); }
.hl-btn-warning.disabled, .hl-btn-warning:disabled,
.btn-warning.disabled,
.btn-warning:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled); }
.hl-btn-danger,
.btn-danger {
--a11y-color-navigation-focus-visible: var(--hl-color-button-border-light-danger-standby);
background-color: var(--hl-color-button-bg-light-danger-standby);
color: var(--hl-color-button-fg-light-danger-standby);
border-color: var(--hl-color-button-border-light-danger-standby); }
.hl-btn-danger.hover, .hl-btn-danger:hover,
.btn-danger.hover,
.btn-danger:hover {
background-color: var(--hl-color-button-bg-light-danger-hover);
color: var(--hl-color-button-fg-light-danger-hover);
border-color: var(--hl-color-button-border-light-danger-hover); }
.hl-btn-danger.focus, .hl-btn-danger:focus,
.btn-danger.focus,
.btn-danger:focus {
background-color: var(--hl-color-button-bg-light-danger-focus);
color: var(--hl-color-button-fg-light-danger-focus);
border-color: var(--hl-color-button-border-light-danger-focus); }
.hl-btn-danger.focus-visible, .hl-btn-danger:focus-visible,
.btn-danger.focus-visible,
.btn-danger:focus-visible {
background-color: var(--hl-color-button-bg-light-danger-focus);
color: var(--hl-color-button-fg-light-danger-focus);
border-color: var(--hl-color-button-border-light-danger-focus); }
.hl-btn-danger.pressed, .hl-btn-danger:active,
.btn-danger.pressed,
.btn-danger:active {
background-color: var(--hl-color-button-bg-light-danger-pressed);
color: var(--hl-color-button-fg-light-danger-pressed);
border-color: var(--hl-color-button-border-light-danger-pressed); }
.hl-btn-danger.active, .hl-btn-danger.dropdown-toggle[aria-expanded=true],
.btn-danger.active,
.btn-danger.dropdown-toggle[aria-expanded=true] {
background-color: var(--hl-color-button-bg-light-danger-active);
color: var(--hl-color-button-fg-light-danger-active);
border-color: var(--hl-color-button-border-light-danger-active); }
.hl-btn-danger.disabled, .hl-btn-danger:disabled,
.btn-danger.disabled,
.btn-danger:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled); }
.hl-btn-remove,
.btn-remove {
--a11y-color-navigation-focus-visible: var(--hl-color-button-border-light-remove-standby);
background-color: var(--hl-color-button-bg-light-remove-standby);
color: var(--hl-color-button-fg-light-remove-standby);
border-color: var(--hl-color-button-border-light-remove-standby); }
.hl-btn-remove.hover, .hl-btn-remove:hover,
.btn-remove.hover,
.btn-remove:hover {
background-color: var(--hl-color-button-bg-light-remove-hover);
color: var(--hl-color-button-fg-light-remove-hover);
border-color: var(--hl-color-button-border-light-remove-hover); }
.hl-btn-remove.focus, .hl-btn-remove:focus,
.btn-remove.focus,
.btn-remove:focus {
background-color: var(--hl-color-button-bg-light-remove-focus);
color: var(--hl-color-button-fg-light-remove-focus);
border-color: var(--hl-color-button-border-light-remove-focus); }
.hl-btn-remove.focus-visible, .hl-btn-remove:focus-visible,
.btn-remove.focus-visible,
.btn-remove:focus-visible {
background-color: var(--hl-color-button-bg-light-remove-focus);
color: var(--hl-color-button-fg-light-remove-focus);
border-color: var(--hl-color-button-border-light-remove-focus); }
.hl-btn-remove.pressed, .hl-btn-remove:active,
.btn-remove.pressed,
.btn-remove:active {
background-color: var(--hl-color-button-bg-light-remove-pressed);
color: var(--hl-color-button-fg-light-remove-pressed);
border-color: var(--hl-color-button-border-light-remove-pressed); }
.hl-btn-remove.active, .hl-btn-remove.dropdown-toggle[aria-expanded=true],
.btn-remove.active,
.btn-remove.dropdown-toggle[aria-expanded=true] {
background-color: var(--hl-color-button-bg-light-remove-active);
color: var(--hl-color-button-fg-light-remove-active);
border-color: var(--hl-color-button-border-light-remove-active); }
.hl-btn-remove.disabled, .hl-btn-remove:disabled,
.btn-remove.disabled,
.btn-remove:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled);
background-color: transparent;
color: var(--hl-color-button-border-light-disabled); }
.hl-btn-remove-black,
.btn-remove-black {
--a11y-color-navigation-focus-visible: var(--hl-color-button-border-light-remove-standby);
background-color: var(--hl-color-button-bg-light-remove-standby);
color: var(--hl-color-button-fg-light-remove-standby);
border-color: var(--hl-color-button-border-light-remove-standby); }
.hl-btn-remove-black.hover, .hl-btn-remove-black:hover,
.btn-remove-black.hover,
.btn-remove-black:hover {
background-color: var(--hl-color-button-bg-light-remove-hover);
color: var(--hl-color-button-fg-light-remove-hover);
border-color: var(--hl-color-button-border-light-remove-hover); }
.hl-btn-remove-black.focus, .hl-btn-remove-black:focus,
.btn-remove-black.focus,
.btn-remove-black:focus {
background-color: var(--hl-color-button-bg-light-remove-focus);
color: var(--hl-color-button-fg-light-remove-focus);
border-color: var(--hl-color-button-border-light-remove-focus); }
.hl-btn-remove-black.focus-visible, .hl-btn-remove-black:focus-visible,
.btn-remove-black.focus-visible,
.btn-remove-black:focus-visible {
background-color: var(--hl-color-button-bg-light-remove-focus);
color: var(--hl-color-button-fg-light-remove-focus);
border-color: var(--hl-color-button-border-light-remove-focus); }
.hl-btn-remove-black.pressed, .hl-btn-remove-black:active,
.btn-remove-black.pressed,
.btn-remove-black:active {
background-color: var(--hl-color-button-bg-light-remove-pressed);
color: var(--hl-color-button-fg-light-remove-pressed);
border-color: var(--hl-color-button-border-light-remove-pressed); }
.hl-btn-remove-black.active, .hl-btn-remove-black.dropdown-toggle[aria-expanded=true],
.btn-remove-black.active,
.btn-remove-black.dropdown-toggle[aria-expanded=true] {
background-color: var(--hl-color-button-bg-light-remove-active);
color: var(--hl-color-button-fg-light-remove-active);
border-color: var(--hl-color-button-border-light-remove-active); }
.hl-btn-remove-black.disabled, .hl-btn-remove-black:disabled,
.btn-remove-black.disabled,
.btn-remove-black:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled);
background-color: transparent;
color: var(--hl-color-button-border-light-disabled); }
.hl-btn-remove-white,
.btn-remove-white {
--a11y-color-navigation-focus-visible: var(--hl-color-button-border-light-remove-standby);
background-color: var(--hl-color-button-bg-light-remove-standby);
color: var(--hl-color-button-fg-light-remove-standby);
border-color: var(--hl-color-button-border-light-remove-standby); }
.hl-btn-remove-white.hover, .hl-btn-remove-white:hover,
.btn-remove-white.hover,
.btn-remove-white:hover {
background-color: var(--hl-color-button-bg-light-remove-hover);
color: var(--hl-color-button-fg-light-remove-hover);
border-color: var(--hl-color-button-border-light-remove-hover); }
.hl-btn-remove-white.focus, .hl-btn-remove-white:focus,
.btn-remove-white.focus,
.btn-remove-white:focus {
background-color: var(--hl-color-button-bg-light-remove-focus);
color: var(--hl-color-button-fg-light-remove-focus);
border-color: var(--hl-color-button-border-light-remove-focus); }
.hl-btn-remove-white.focus-visible, .hl-btn-remove-white:focus-visible,
.btn-remove-white.focus-visible,
.btn-remove-white:focus-visible {
background-color: var(--hl-color-button-bg-light-remove-focus);
color: var(--hl-color-button-fg-light-remove-focus);
border-color: var(--hl-color-button-border-light-remove-focus); }
.hl-btn-remove-white.pressed, .hl-btn-remove-white:active,
.btn-remove-white.pressed,
.btn-remove-white:active {
background-color: var(--hl-color-button-bg-light-remove-pressed);
color: var(--hl-color-button-fg-light-remove-pressed);
border-color: var(--hl-color-button-border-light-remove-pressed); }
.hl-btn-remove-white.active, .hl-btn-remove-white.dropdown-toggle[aria-expanded=true],
.btn-remove-white.active,
.btn-remove-white.dropdown-toggle[aria-expanded=true] {
background-color: var(--hl-color-button-bg-light-remove-active);
color: var(--hl-color-button-fg-light-remove-active);
border-color: var(--hl-color-button-border-light-remove-active); }
.hl-btn-remove-white.disabled, .hl-btn-remove-white:disabled,
.btn-remove-white.disabled,
.btn-remove-white:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled);
background-color: transparent;
color: var(--hl-color-button-border-light-disabled); }
.hl-btn-link,
.btn-link {
--a11y-color-navigation-focus-visible: var(--hl-color-button-fg-light-link-standby);
background-color: var(--hl-color-button-bg-light-link-standby);
color: var(--hl-color-button-fg-light-link-standby);
border-color: var(--hl-color-button-border-light-link-standby); }
.hl-btn-link.hover, .hl-btn-link:hover,
.btn-link.hover,
.btn-link:hover {
background-color: var(--hl-color-button-bg-light-link-hover);
color: var(--hl-color-button-fg-light-link-hover);
border-color: var(--hl-color-button-border-light-link-hover); }
.hl-btn-link.focus, .hl-btn-link:focus,
.btn-link.focus,
.btn-link:focus {
background-color: var(--hl-color-button-bg-light-link-focus);
color: var(--hl-color-button-fg-light-link-focus);
border-color: var(--hl-color-button-border-light-link-focus); }
.hl-btn-link.focus-visible, .hl-btn-link:focus-visible,
.btn-link.focus-visible,
.btn-link:focus-visible {
background-color: var(--hl-color-button-bg-light-link-focus);
color: var(--hl-color-button-fg-light-link-focus);
border-color: var(--hl-color-button-border-light-link-focus); }
.hl-btn-link.pressed, .hl-btn-link:active,
.btn-link.pressed,
.btn-link:active {
background-color: var(--hl-color-button-bg-light-link-pressed);
color: var(--hl-color-button-fg-light-link-pressed);
border-color: var(--hl-color-button-border-light-link-pressed); }
.hl-btn-link.active, .hl-btn-link.dropdown-toggle[aria-expanded=true],
.btn-link.active,
.btn-link.dropdown-toggle[aria-expanded=true] {
background-color: var(--hl-color-button-bg-light-link-active);
color: var(--hl-color-button-fg-light-link-active);
border-color: var(--hl-color-button-border-light-link-active); }
.hl-btn-link.disabled, .hl-btn-link:disabled,
.btn-link.disabled,
.btn-link:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled);
background-color: transparent;
border-color: transparent;
color: var(--hl-color-button-border-light-disabled); }
.hl-btn-link-light,
.btn-link-light {
--a11y-color-navigation-focus-visible: var(--hl-color-button-fg-light-link-standby);
background-color: var(--hl-color-button-bg-light-link-standby);
color: var(--hl-color-button-fg-light-link-standby);
border-color: var(--hl-color-button-border-light-link-standby); }
.hl-btn-link-light.hover, .hl-btn-link-light:hover,
.btn-link-light.hover,
.btn-link-light:hover {
background-color: var(--hl-color-button-bg-light-link-hover);
color: var(--hl-color-button-fg-light-link-hover);
border-color: var(--hl-color-button-border-light-link-hover); }
.hl-btn-link-light.focus, .hl-btn-link-light:focus,
.btn-link-light.focus,
.btn-link-light:focus {
background-color: var(--hl-color-button-bg-light-link-focus);
color: var(--hl-color-button-fg-light-link-focus);
border-color: var(--hl-color-button-border-light-link-focus); }
.hl-btn-link-light.focus-visible, .hl-btn-link-light:focus-visible,
.btn-link-light.focus-visible,
.btn-link-light:focus-visible {
background-color: var(--hl-color-button-bg-light-link-focus);
color: var(--hl-color-button-fg-light-link-focus);
border-color: var(--hl-color-button-border-light-link-focus); }
.hl-btn-link-light.pressed, .hl-btn-link-light:active,
.btn-link-light.pressed,
.btn-link-light:active {
background-color: var(--hl-color-button-bg-light-link-pressed);
color: var(--hl-color-button-fg-light-link-pressed);
border-color: var(--hl-color-button-border-light-link-pressed); }
.hl-btn-link-light.active, .hl-btn-link-light.dropdown-toggle[aria-expanded=true],
.btn-link-light.active,
.btn-link-light.dropdown-toggle[aria-expanded=true] {
background-color: var(--hl-color-button-bg-light-link-active);
color: var(--hl-color-button-fg-light-link-active);
border-color: var(--hl-color-button-border-light-link-active); }
.hl-btn-link-light.disabled, .hl-btn-link-light:disabled,
.btn-link-light.disabled,
.btn-link-light:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled);
background-color: transparent;
border-color: transparent;
color: var(--hl-color-button-border-light-disabled); }
.hl-btn-link-dark,
.btn-link-dark {
--a11y-color-navigation-focus-visible: var(--hl-color-button-fg-light-link-standby);
background-color: var(--hl-color-button-bg-light-link-standby);
color: var(--hl-color-button-fg-light-link-standby);
border-color: var(--hl-color-button-border-light-link-standby); }
.hl-btn-link-dark.hover, .hl-btn-link-dark:hover,
.btn-link-dark.hover,
.btn-link-dark:hover {
background-color: var(--hl-color-button-bg-light-link-hover);
color: var(--hl-color-button-fg-light-link-hover);
border-color: var(--hl-color-button-border-light-link-hover); }
.hl-btn-link-dark.focus, .hl-btn-link-dark:focus,
.btn-link-dark.focus,
.btn-link-dark:focus {
background-color: var(--hl-color-button-bg-light-link-focus);
color: var(--hl-color-button-fg-light-link-focus);
border-color: var(--hl-color-button-border-light-link-focus); }
.hl-btn-link-dark.focus-visible, .hl-btn-link-dark:focus-visible,
.btn-link-dark.focus-visible,
.btn-link-dark:focus-visible {
background-color: var(--hl-color-button-bg-light-link-focus);
color: var(--hl-color-button-fg-light-link-focus);
border-color: var(--hl-color-button-border-light-link-focus); }
.hl-btn-link-dark.pressed, .hl-btn-link-dark:active,
.btn-link-dark.pressed,
.btn-link-dark:active {
background-color: var(--hl-color-button-bg-light-link-pressed);
color: var(--hl-color-button-fg-light-link-pressed);
border-color: var(--hl-color-button-border-light-link-pressed); }
.hl-btn-link-dark.active, .hl-btn-link-dark.dropdown-toggle[aria-expanded=true],
.btn-link-dark.active,
.btn-link-dark.dropdown-toggle[aria-expanded=true] {
background-color: var(--hl-color-button-bg-light-link-active);
color: var(--hl-color-button-fg-light-link-active);
border-color: var(--hl-color-button-border-light-link-active); }
.hl-btn-link-dark.disabled, .hl-btn-link-dark:disabled,
.btn-link-dark.disabled,
.btn-link-dark:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled);
background-color: transparent;
border-color: transparent;
color: var(--hl-color-button-border-light-disabled); }
.hl-btn-link-primary,
.btn-link-primary {
--a11y-color-navigation-focus-visible: var(--hl-color-button-fg-light-link-standby);
background-color: var(--hl-color-button-bg-light-link-standby);
color: var(--hl-color-button-fg-light-link-standby);
border-color: var(--hl-color-button-border-light-link-standby); }
.hl-btn-link-primary.hover, .hl-btn-link-primary:hover,
.btn-link-primary.hover,
.btn-link-primary:hover {
background-color: var(--hl-color-button-bg-light-link-hover);
color: var(--hl-color-button-fg-light-link-hover);
border-color: var(--hl-color-button-border-light-link-hover); }
.hl-btn-link-primary.focus, .hl-btn-link-primary:focus,
.btn-link-primary.focus,
.btn-link-primary:focus {
background-color: var(--hl-color-button-bg-light-link-focus);
color: var(--hl-color-button-fg-light-link-focus);
border-color: var(--hl-color-button-border-light-link-focus); }
.hl-btn-link-primary.focus-visible, .hl-btn-link-primary:focus-visible,
.btn-link-primary.focus-visible,
.btn-link-primary:focus-visible {
background-color: var(--hl-color-button-bg-light-link-focus);
color: var(--hl-color-button-fg-light-link-focus);
border-color: var(--hl-color-button-border-light-link-focus); }
.hl-btn-link-primary.pressed, .hl-btn-link-primary:active,
.btn-link-primary.pressed,
.btn-link-primary:active {
background-color: var(--hl-color-button-bg-light-link-pressed);
color: var(--hl-color-button-fg-light-link-pressed);
border-color: var(--hl-color-button-border-light-link-pressed); }
.hl-btn-link-primary.active, .hl-btn-link-primary.dropdown-toggle[aria-expanded=true],
.btn-link-primary.active,
.btn-link-primary.dropdown-toggle[aria-expanded=true] {
background-color: var(--hl-color-button-bg-light-link-active);
color: var(--hl-color-button-fg-light-link-active);
border-color: var(--hl-color-button-border-light-link-active); }
.hl-btn-link-primary.disabled, .hl-btn-link-primary:disabled,
.btn-link-primary.disabled,
.btn-link-primary:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled);
background-color: transparent;
border-color: transparent;
color: var(--hl-color-button-border-light-disabled); }
.hl-btn-link-surface,
.btn-link-surface {
--a11y-color-navigation-focus-visible: var(--hl-color-button-fg-light-link-surface-standby);
background-color: var(--hl-color-button-bg-light-link-surface-standby);
color: var(--hl-color-button-fg-light-link-surface-standby);
border-color: var(--hl-color-button-border-light-link-surface-standby); }
.hl-btn-link-surface.hover, .hl-btn-link-surface:hover,
.btn-link-surface.hover,
.btn-link-surface:hover {
background-color: var(--hl-color-button-bg-light-link-surface-hover);
color: var(--hl-color-button-fg-light-link-surface-hover);
border-color: var(--hl-color-button-border-light-link-surface-hover); }
.hl-btn-link-surface.focus, .hl-btn-link-surface:focus,
.btn-link-surface.focus,
.btn-link-surface:focus {
background-color: var(--hl-color-button-bg-light-link-surface-focus);
color: var(--hl-color-button-fg-light-link-surface-focus);
border-color: var(--hl-color-button-border-light-link-surface-focus); }
.hl-btn-link-surface.focus-visible, .hl-btn-link-surface:focus-visible,
.btn-link-surface.focus-visible,
.btn-link-surface:focus-visible {
background-color: var(--hl-color-button-bg-light-link-surface-focus);
color: var(--hl-color-button-fg-light-link-surface-focus);
border-color: var(--hl-color-button-border-light-link-surface-focus); }
.hl-btn-link-surface.pressed, .hl-btn-link-surface:active,
.btn-link-surface.pressed,
.btn-link-surface:active {
background-color: var(--hl-color-button-bg-light-link-surface-pressed);
color: var(--hl-color-button-fg-light-link-surface-pressed);
border-color: var(--hl-color-button-border-light-link-surface-pressed); }
.hl-btn-link-surface.active, .hl-btn-link-surface.dropdown-toggle[aria-expanded=true],
.btn-link-surface.active,
.btn-link-surface.dropdown-toggle[aria-expanded=true] {
background-color: var(--hl-color-button-bg-light-link-surface-active);
color: var(--hl-color-button-fg-light-link-surface-active);
border-color: var(--hl-color-button-border-light-link-surface-active); }
.hl-btn-link-surface.disabled, .hl-btn-link-surface:disabled,
.btn-link-surface.disabled,
.btn-link-surface:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled);
background-color: transparent;
border-color: transparent;
color: var(--hl-color-button-border-light-disabled); }
.hl-btn-link-surface-light,
.btn-link-surface-light {
--a11y-color-navigation-focus-visible: var(--hl-color-button-fg-light-link-surface-standby);
background-color: var(--hl-color-button-bg-light-link-surface-standby);
color: var(--hl-color-button-fg-light-link-surface-standby);
border-color: var(--hl-color-button-border-light-link-surface-standby); }
.hl-btn-link-surface-light.hover, .hl-btn-link-surface-light:hover,
.btn-link-surface-light.hover,
.btn-link-surface-light:hover {
background-color: var(--hl-color-button-bg-light-link-surface-hover);
color: var(--hl-color-button-fg-light-link-surface-hover);
border-color: var(--hl-color-button-border-light-link-surface-hover); }
.hl-btn-link-surface-light.focus, .hl-btn-link-surface-light:focus,
.btn-link-surface-light.focus,
.btn-link-surface-light:focus {
background-color: var(--hl-color-button-bg-light-link-surface-focus);
color: var(--hl-color-button-fg-light-link-surface-focus);
border-color: var(--hl-color-button-border-light-link-surface-focus); }
.hl-btn-link-surface-light.focus-visible, .hl-btn-link-surface-light:focus-visible,
.btn-link-surface-light.focus-visible,
.btn-link-surface-light:focus-visible {
background-color: var(--hl-color-button-bg-light-link-surface-focus);
color: var(--hl-color-button-fg-light-link-surface-focus);
border-color: var(--hl-color-button-border-light-link-surface-focus); }
.hl-btn-link-surface-light.pressed, .hl-btn-link-surface-light:active,
.btn-link-surface-light.pressed,
.btn-link-surface-light:active {
background-color: var(--hl-color-button-bg-light-link-surface-pressed);
color: var(--hl-color-button-fg-light-link-surface-pressed);
border-color: var(--hl-color-button-border-light-link-surface-pressed); }
.hl-btn-link-surface-light.active, .hl-btn-link-surface-light.dropdown-toggle[aria-expanded=true],
.btn-link-surface-light.active,
.btn-link-surface-light.dropdown-toggle[aria-expanded=true] {
background-color: var(--hl-color-button-bg-light-link-surface-active);
color: var(--hl-color-button-fg-light-link-surface-active);
border-color: var(--hl-color-button-border-light-link-surface-active); }
.hl-btn-link-surface-light.disabled, .hl-btn-link-surface-light:disabled,
.btn-link-surface-light.disabled,
.btn-link-surface-light:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled);
background-color: transparent;
border-color: transparent;
color: var(--hl-color-button-border-light-disabled); }
.hl-btn-link-surface-dark,
.btn-link-surface-dark {
--a11y-color-navigation-focus-visible: var(--hl-color-button-fg-dark-link-surface-standby);
background-color: var(--hl-color-button-bg-dark-link-surface-standby);
color: var(--hl-color-button-fg-dark-link-surface-standby);
border-color: var(--hl-color-button-border-dark-link-surface-standby); }
.hl-btn-link-surface-dark.hover, .hl-btn-link-surface-dark:hover,
.btn-link-surface-dark.hover,
.btn-link-surface-dark:hover {
background-color: var(--hl-color-button-bg-dark-link-surface-hover);
color: var(--hl-color-button-fg-dark-link-surface-hover);
border-color: var(--hl-color-button-border-dark-link-surface-hover); }
.hl-btn-link-surface-dark.focus, .hl-btn-link-surface-dark:focus,
.btn-link-surface-dark.focus,
.btn-link-surface-dark:focus {
background-color: var(--hl-color-button-bg-dark-link-surface-focus);
color: var(--hl-color-button-fg-dark-link-surface-focus);
border-color: var(--hl-color-button-border-dark-link-surface-focus); }
.hl-btn-link-surface-dark.focus-visible, .hl-btn-link-surface-dark:focus-visible,
.btn-link-surface-dark.focus-visible,
.btn-link-surface-dark:focus-visible {
background-color: var(--hl-color-button-bg-dark-link-surface-focus);
color: var(--hl-color-button-fg-dark-link-surface-focus);
border-color: var(--hl-color-button-border-dark-link-surface-focus); }
.hl-btn-link-surface-dark.pressed, .hl-btn-link-surface-dark:active,
.btn-link-surface-dark.pressed,
.btn-link-surface-dark:active {
background-color: var(--hl-color-button-bg-dark-link-surface-pressed);
color: var(--hl-color-button-fg-dark-link-surface-pressed);
border-color: var(--hl-color-button-border-dark-link-surface-pressed); }
.hl-btn-link-surface-dark.active, .hl-btn-link-surface-dark.dropdown-toggle[aria-expanded=true],
.btn-link-surface-dark.active,
.btn-link-surface-dark.dropdown-toggle[aria-expanded=true] {
background-color: var(--hl-color-button-bg-dark-link-surface-active);
color: var(--hl-color-button-fg-dark-link-surface-active);
border-color: var(--hl-color-button-border-dark-link-surface-active); }
.hl-btn-link-surface-dark.disabled, .hl-btn-link-surface-dark:disabled,
.btn-link-surface-dark.disabled,
.btn-link-surface-dark:disabled {
background-color: var(--hl-color-button-bg-light-disabled);
color: var(--hl-color-button-fg-light-disabled);
border-color: var(--hl-color-button-border-light-disabled); }
.hl-btn-link-primary,
.btn-link-primary {
color: var(--hl-color-fg-light-interaction-active); }
.hl-btn-xs,
.btn-xs {
--btn-icon-gap: var(--hl-spacer-2xs);
--btn-icon-size: var(--hl-size-icon-sm);
padding: var(--hl-spacer-2xs) var(--hl-spacer-xs);
font-size: var(--hl-font-size-xs);
line-height: var(--hl-typography-line-height-very-decreased);
border-radius: var(--hl-border-radius-default); }
.hl-btn-xs.hl-btn-icon, .hl-btn-xs.btn-icon,
.btn-xs.hl-btn-icon,
.btn-xs.btn-icon {
padding-left: var(--hl-spacer-2xs);
padding-right: var(--hl-spacer-2xs); }
.hl-btn-sm,
.btn-sm,
.subnav__nav__item,
.btn-group-sm > .btn,
.btn-group-sm > .subnav__nav__item,
.btn-group-sm > .charger-btn {
--btn-icon-gap: var(--hl-spacer-xs);
--btn-icon-size: var(--hl-size-icon-md);
padding: var(--hl-spacer-xs) var(--hl-spacer-md);
font-size: var(--hl-font-size-sm);
line-height: var(--hl-typography-line-height-very-decreased);
border-radius: var(--hl-border-radius-default); }
.hl-btn-sm.hl-btn-icon, .hl-btn-sm.btn-icon,
.btn-sm.hl-btn-icon,
.hl-btn-icon.subnav__nav__item,
.btn-group-sm > .hl-btn-icon.btn,
.btn-group-sm > .hl-btn-icon.charger-btn,
.btn-sm.btn-icon,
.btn-icon.subnav__nav__item,
.btn-group-sm > .btn-icon.btn,
.btn-group-sm > .btn-icon.charger-btn {
padding-left: var(--hl-spacer-xs);
padding-right: var(--hl-spacer-xs); }
.hl-btn-md,
.btn-md {
--btn-icon-gap: var(--hl-spacer-xs);
--btn-icon-size: var(--hl-size-icon-md);
padding: calc(var(--hl-spacer-sm)) var(--hl-spacer-lg);
font-size: var(--hl-font-size-md);
line-height: var(--hl-typography-line-height-very-decreased);
border-radius: var(--hl-border-radius-default); }
.hl-btn-md.hl-btn-icon, .hl-btn-md.btn-icon,
.btn-md.hl-btn-icon,
.btn-md.btn-icon {
padding-left: calc(var(--hl-spacer-sm));
padding-right: calc(var(--hl-spacer-sm)); }
.hl-btn-lg,
.btn-lg,
.btn-group-lg > .btn,
.btn-group-lg > .subnav__nav__item,
.btn-group-lg > .charger-btn {
--btn-icon-gap: var(--hl-spacer-md);
--btn-icon-size: var(--hl-size-icon-md);
padding: var(--hl-spacer-md) var(--hl-spacer-xl);
font-size: var(--hl-font-size-2xl);
line-height: var(--hl-typography-line-height-very-decreased);
border-radius: var(--hl-border-radius-default); }
.hl-btn-lg.hl-btn-icon, .hl-btn-lg.btn-icon,
.btn-lg.hl-btn-icon,
.btn-group-lg > .hl-btn-icon.btn,
.btn-group-lg > .hl-btn-icon.subnav__nav__item,
.btn-group-lg > .hl-btn-icon.charger-btn,
.btn-lg.btn-icon,
.btn-group-lg > .btn-icon.btn,
.btn-group-lg > .btn-icon.subnav__nav__item,
.btn-group-lg > .btn-icon.charger-btn {
padding-left: var(--hl-spacer-md);
padding-right: var(--hl-spacer-md); }
@media (min-width: 576px) {
.hl-btn--sm-at-sm,
.btn--sm-at-sm {
--btn-icon-gap: var(--hl-spacer-xs);
--btn-icon-size: var(--hl-size-icon-md);
padding: var(--hl-spacer-xs) var(--hl-spacer-md);
font-size: var(--hl-font-size-sm);
line-height: var(--hl-typography-line-height-very-decreased);
border-radius: var(--hl-border-radius-default); }
.hl-btn--sm-at-sm.hl-btn-icon, .hl-btn--sm-at-sm.btn-icon,
.btn--sm-at-sm.hl-btn-icon,
.btn--sm-at-sm.btn-icon {
padding-left: var(--hl-spacer-xs);
padding-right: var(--hl-spacer-xs); }
.hl-btn--md-at-sm,
.btn--md-at-sm {
--btn-icon-gap: var(--hl-spacer-xs);
--btn-icon-size: var(--hl-size-icon-md);
padding: calc(var(--hl-spacer-sm)) var(--hl-spacer-lg);
font-size: var(--hl-font-size-md);
line-height: var(--hl-typography-line-height-very-decreased);
border-radius: var(--hl-border-radius-default); }
.hl-btn--md-at-sm.hl-btn-icon, .hl-btn--md-at-sm.btn-icon,
.btn--md-at-sm.hl-btn-icon,
.btn--md-at-sm.btn-icon {
padding-left: calc(var(--hl-spacer-sm));
padding-right: calc(var(--hl-spacer-sm)); }
.hl-btn--lg-at-sm,
.btn--lg-at-sm {
--btn-icon-gap: var(--hl-spacer-md);
--btn-icon-size: var(--hl-size-icon-md);
padding: var(--hl-spacer-md) var(--hl-spacer-xl);
font-size: var(--hl-font-size-2xl);
line-height: var(--hl-typography-line-height-very-decreased);
border-radius: var(--hl-border-radius-default); }
.hl-btn--lg-at-sm.hl-btn-icon, .hl-btn--lg-at-sm.btn-icon,
.btn--lg-at-sm.hl-btn-icon,
.btn--lg-at-sm.btn-icon {
padding-left: var(--hl-spacer-md);
padding-right: var(--hl-spacer-md); } }
@media (min-width: 768px) {
.hl-btn--sm-at-md,
.btn--sm-at-md {
--btn-icon-gap: var(--hl-spacer-xs);
--btn-icon-size: var(--hl-size-icon-md);
padding: var(--hl-spacer-xs) var(--hl-spacer-md);
font-size: var(--hl-font-size-sm);
line-height: var(--hl-typography-line-height-very-decreased);
border-radius: var(--hl-border-radius-default); }
.hl-btn--sm-at-md.hl-btn-icon, .hl-btn--sm-at-md.btn-icon,
.btn--sm-at-md.hl-btn-icon,
.btn--sm-at-md.btn-icon {
padding-left: var(--hl-spacer-xs);
padding-right: var(--hl-spacer-xs); }
.hl-btn--md-at-md,
.btn--md-at-md {
--btn-icon-gap: var(--hl-spacer-xs);
--btn-icon-size: var(--hl-size-icon-md);
padding: calc(var(--hl-spacer-sm)) var(--hl-spacer-lg);
font-size: var(--hl-font-size-md);
line-height: var(--hl-typography-line-height-very-decreased);
border-radius: var(--hl-border-radius-default); }
.hl-btn--md-at-md.hl-btn-icon, .hl-btn--md-at-md.btn-icon,
.btn--md-at-md.hl-btn-icon,
.btn--md-at-md.btn-icon {
padding-left: calc(var(--hl-spacer-sm));
padding-right: calc(var(--hl-spacer-sm)); }
.hl-btn--lg-at-md,
.btn--lg-at-md {
--btn-icon-gap: var(--hl-spacer-md);
--btn-icon-size: var(--hl-size-icon-md);
padding: var(--hl-spacer-md) var(--hl-spacer-xl);
font-size: var(--hl-font-size-2xl);
line-height: var(--hl-typography-line-height-very-decreased);
border-radius: var(--hl-border-radius-default); }
.hl-btn--lg-at-md.hl-btn-icon, .hl-btn--lg-at-md.btn-icon,
.btn--lg-at-md.hl-btn-icon,
.btn--lg-at-md.btn-icon {
padding-left: var(--hl-spacer-md);
padding-right: var(--hl-spacer-md); } }
@media (min-width: 992px) {
.hl-btn--sm-at-lg,
.btn--sm-at-lg {
--btn-icon-gap: var(--hl-spacer-xs);
--btn-icon-size: var(--hl-size-icon-md);
padding: var(--hl-spacer-xs) var(--hl-spacer-md);
font-size: var(--hl-font-size-sm);
line-height: var(--hl-typography-line-height-very-decreased);
border-radius: var(--hl-border-radius-default); }
.hl-btn--sm-at-lg.hl-btn-icon, .hl-btn--sm-at-lg.btn-icon,
.btn--sm-at-lg.hl-btn-icon,
.btn--sm-at-lg.btn-icon {
padding-left: var(--hl-spacer-xs);
padding-right: var(--hl-spacer-xs); }
.hl-btn--md-at-lg,
.btn--md-at-lg {
--btn-icon-gap: var(--hl-spacer-xs);
--btn-icon-size: var(--hl-size-icon-md);
padding: calc(var(--hl-spacer-sm)) var(--hl-spacer-lg);
font-size: var(--hl-font-size-md);
line-height: var(--hl-typography-line-height-very-decreased);
border-radius: var(--hl-border-radius-default); }
.hl-btn--md-at-lg.hl-btn-icon, .hl-btn--md-at-lg.btn-icon,
.btn--md-at-lg.hl-btn-icon,
.btn--md-at-lg.btn-icon {
padding-left: calc(var(--hl-spacer-sm));
padding-right: calc(var(--hl-spacer-sm)); }
.hl-btn--lg-at-lg,
.btn--lg-at-lg {
--btn-icon-gap: var(--hl-spacer-md);
--btn-icon-size: var(--hl-size-icon-md);
padding: var(--hl-spacer-md) var(--hl-spacer-xl);
font-size: var(--hl-font-size-2xl);
line-height: var(--hl-typography-line-height-very-decreased);
border-radius: var(--hl-border-radius-default); }
.hl-btn--lg-at-lg.hl-btn-icon, .hl-btn--lg-at-lg.btn-icon,
.btn--lg-at-lg.hl-btn-icon,
.btn--lg-at-lg.btn-icon {
padding-left: var(--hl-spacer-md);
padding-right: var(--hl-spacer-md); } }
.hl-btn-block,
.btn-block {
display: flex;
width: 100%; }
.hl-btn-block + .hl-btn-block,
.hl-btn-block + .btn-block,
.btn-block + .hl-btn-block,
.btn-block + .btn-block {
margin-top: var(--hl-spacer-xs); }
input[type=submit].hl-btn-block, input[type=submit].btn-block,
input[type=reset].hl-btn-block,
input[type=reset].btn-block,
input[type=button].hl-btn-block,
input[type=button].btn-block {
width: 100%; }
.hl-btn--just-text,
.btn--just-text {
color: var(--hl-color-fg-light-important);
padding-left: 0;
padding-right: 0;
pointer-events: none; }
[data-read-more][data-read-less]::before {
content: attr(data-read-more);
display: block; }
[data-read-more][data-read-less][aria-expanded=true]::before {
content: attr(data-read-less); }
.charger-btn {
--charger-size: 3.125rem;
--charger-scale-font: 0.13;
font-size: calc(var(--charger-size) * var(--charger-scale-font));
text-align: center; }
.charger-btn-empty, .charger-btn-line-through {
width: var(--charger-size);
height: var(--charger-size);
background-position: center;
background-repeat: no-repeat;
background-size: contain; }
.charger-btn-empty {
display: inline-grid;
grid-template-areas: "hero";
justify-content: center;
align-content: flex-end; }
.charger-btn-empty .charger-btn__img, .charger-btn-empty .charger-btn__text {
grid-area: hero; }
.charger-btn-empty .charger-btn__text {
display: grid;
grid-auto-flow: row;
align-self: flex-end; }
.charger-btn .underline-visible {
color: var(--hl-color-link-fg-light-standby);
-webkit-text-decoration: var(--hl-link-decoration);
text-decoration: var(--hl-link-decoration);
font-family: var(--hl-typography-font-family-body);
font-size: var(--hl-font-size-md);
font-weight: var(--hl-typography-font-weight-body-regular);
line-height: var(--hl-typography-line-height-very-increased); }
.charger-btn:hover .underline-visible {
color: var(--hl-color-link-fg-light-hover);
-webkit-text-decoration: var(--hl-link-decoration-hover);
text-decoration: var(--hl-link-decoration-hover); }
.charger-btn:active .underline-visible {
color: var(--hl-color-link-fg-light-pressed);
-webkit-text-decoration: var(--hl-link-decoration-active);
text-decoration: var(--hl-link-decoration-active); }
.charger-btn:focus-visible:has(.underline-visible) {
--hl-navigation-focus-visible: var(--hl-color-primary);
animation: focus-outline-animation var(--hl-transition-normal) forwards; }
.charger-btn:focus-visible:has(.underline-visible) .underline-visible {
color: var(--hl-color-link-fg-light-hover); }
.charger-btn__img {
width: var(--charger-size);
height: var(--charger-size); }
.charger-btn .line-top,
.charger-btn .line-middle,
.charger-btn .line-bottom {
line-height: 1.1; }
.charger-btn .line-middle {
font-size: 1.05em; }
.charger-btn .line-bottom {
padding-top: 0.14em;
padding-bottom: 0.4em; }
.charger-btn--font-light {
--charger-scale-font: 0.14;
font-weight: var(--hl-typography-font-weight-body-regular); }
.charger-btn--as-bg .charger-btn-empty {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='188' viewBox='0 0 150 188' fill='none'%3E%3Cpath d='M59 0C59.5523 0 60 0.447715 60 1V31H90V1C90 0.447715 90.4477 0 90 0H99C99.5523 0 100 0.447715 100 1V31H116C116.552 31 117 31.4477 117 32V62H133C135.209 62 137 63.7909 137 66V182C137 184.209 135.209 186 133 186H17C14.7909 186 13 184.209 13 182V66C13 63.7909 14.7909 62 17 62H33V32C33 31.4477 33.4477 31 34 31H50V1C50 0.447715 50.4477 0 50 0H59ZM133 63.5H17C15.6193 63.5 14.5 64.6193 14.5 66V182C14.5 183.381 15.6193 184.5 17 184.5H133C134.381 184.5 135.5 183.381 135.5 182V66C135.5 64.6193 134.381 63.5 133 63.5ZM115.5 32.5H34.5V62H115.5V32.5ZM58.5 1.5H51.5V31H58.5V1.5ZM98.5 1.5H91.5V31H98.5V1.5Z' fill='black'/%3E%3C/svg%3E"); }
.charger-btn--as-bg .charger-btn-line-through {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='188' viewBox='0 0 150 188' fill='none'%3E%3Cpath d='M59 0C59.5523 0 60 0.447715 60 1V31H90V1C90 0.447715 90.4477 0 90 0H99C99.5523 0 100 0.447715 100 1V31H116C116.552 31 117 31.4477 117 32V62H133C135.209 62 137 63.7909 137 66L137 167.056L150 184.5L147.595 186.293L137 172.075L137 182C137 184.209 135.209 186 133 186H17C14.7909 186 13 184.209 13 182V66C13 63.7909 14.7909 62 17 62H33L32.9995 32.526L10.0945 1.79269L12.5 0L35.6025 31H50V1C50 0.447715 50.4477 0 50 0H59ZM56.0825 63.5H17C15.6193 63.5 14.5 64.6193 14.5 66V182C14.5 183.381 15.6193 184.5 17 184.5H133C134.381 184.5 135.5 183.381 135.5 182L135.5 170.063L56.0825 63.5ZM133 63.5H59.8235L135.5 165.044L135.5 66C135.5 64.6193 134.381 63.5 133 63.5ZM34.4995 34.539L34.5 62H54.9645L34.4995 34.539ZM115.5 32.5H36.7205L58.7055 62H115.5V32.5ZM58.5 1.5H51.5V31H58.5V1.5ZM98.5 1.5H91.5V31H98.5V1.5Z' fill='black'/%3E%3C/svg%3E"); }
.bg-dark .charger-btn__img {
filter: brightness(0) invert(1); }
.filtrar-ordenar-btn {
background-color: white; }
.filtrar-ordenar-btn.hover, .filtrar-ordenar-btn:hover {
background-color: #dedede;
color: black; }
.filtrar-ordenar-btn.focus, .filtrar-ordenar-btn:focus {
background-color: #666666;
color: black; }
.filtrar-ordenar-btn.active, .filtrar-ordenar-btn:active {
background-color: #666666;
color: white; }
.translate-right-btn {
transform: translateX(8px); }
@media (max-width: 992px) {
.plp-mobile-sticky-filters {
white-space: nowrap; }
.plp-mobile-sticky-filters.is-sticky {
position: fixed;
right: var(--hl-spacer-sm);
top: calc(var(--hlx-header-height, 0px) + var(--hl-spacer-sm, 6px));
z-index: var(--hl-z-index-sticky);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } }
.hl-btn-pill,
.btn-pill {
border-radius: var(--hl-border-radius-full); }
.orange-rebrand-2022-cms .btn-group {
box-shadow: none; }
.fade {
transition: opacity var(--hl-transition-quickly); }
@media (prefers-reduced-motion: reduce) {
.fade {
transition: none; } }
.fade:not(.show) {
opacity: 0; }
.collapse:not(.show) {
display: none; }
.collapsing {
position: relative;
height: 0;
overflow: hidden;
transition: height var(--hl-transition-normal); }
@media (prefers-reduced-motion: reduce) {
.collapsing {
transition: none; } }
.collapsing.width {
width: 0;
height: auto;
transition: width var(--hl-transition-normal); }
@media (prefers-reduced-motion: reduce) {
.collapsing.width {
transition: none; } }
.scale {
transition: all var(--hl-transition-normal); }
@media (prefers-reduced-motion: reduce) {
.scale {
transition: none; } }
.scale-cards {
display: block;
transform: scale(1);
transition: all var(--hl-transition-normal);
position: relative;
opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.scale-cards {
transition: none; } }
.scale-cards:hover {
transform: scale(1.1);
opacity: 1;
z-index: 2; }
.scale-cards:not(:hover) {
opacity: 0.7; }
.opacity-scale:hover .opacity-scale-cards {
opacity: 0.7; }
.opacity-scale:hover .opacity-scale-cards:hover {
transform: scale(1.1);
opacity: 1;
z-index: 2; }
.opacity-scale-cards {
display: block;
transform: scale(1);
transition: all var(--hl-transition-normal);
position: relative;
opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.opacity-scale-cards {
transition: none; } }
.opacity-scale-cards:hover {
transform: scale(1.1);
opacity: 1;
z-index: 2; }
.dropup,
.dropright,
.dropdown,
.dropleft {
position: relative; }
.dropdown-toggle {
white-space: nowrap; }
.dropdown-toggle::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.1em;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent; }
.dropdown-toggle:empty::after {
margin-left: 0; }
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: var(--hl-z-index-dropdown);
display: none;
float: left;
min-width: var(--hl-spacer-7xl);
padding: var(--hl-spacer-none) var(--hl-spacer-none);
margin: var(--hl-spacer-3xs) 0 0;
font-size: var(--hl-font-size-md);
color: var(--hl-color-core-black);
text-align: left;
list-style-type: "";
background-color: var(--hl-color-core-white);
background-clip: padding-box;
border: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
border-radius: var(--hl-border-radius-default); }
.dropdown-menu-left {
right: auto;
left: 0; }
.dropdown-menu-right {
right: 0; }
@media (min-width: 576px) {
.dropdown-menu-sm-left {
right: auto;
left: 0; }
.dropdown-menu-sm-right {
right: 0; } }
@media (min-width: 768px) {
.dropdown-menu-md-left {
right: auto;
left: 0; }
.dropdown-menu-md-right {
right: 0; } }
@media (min-width: 992px) {
.dropdown-menu-lg-left {
right: auto;
left: 0; }
.dropdown-menu-lg-right {
right: 0; } }
@media (min-width: 1200px) {
.dropdown-menu-xl-left {
right: auto;
left: 0; }
.dropdown-menu-xl-right {
right: 0; } }
@media (min-width: 1400px) {
.dropdown-menu-xxl-left {
right: auto;
left: 0; }
.dropdown-menu-xxl-right {
right: 0; } }
@media (min-width: 1880px) {
.dropdown-menu-xxxl-left {
right: auto;
left: 0; }
.dropdown-menu-xxxl-right {
right: 0; } }
.dropup .dropdown-menu {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: var(--hl-spacer-3xs); }
.dropup .dropdown-toggle::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.1em;
content: "";
border-top: 0;
border-right: 0.3em solid transparent;
border-bottom: 0.3em solid;
border-left: 0.3em solid transparent; }
.dropup .dropdown-toggle:empty::after {
margin-left: 0; }
.dropright .dropdown-menu {
top: 0;
right: auto;
left: 100%;
margin-top: 0;
margin-left: var(--hl-spacer-3xs); }
.dropright .dropdown-toggle::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.1em;
content: "";
border-top: 0.3em solid transparent;
border-right: 0;
border-bottom: 0.3em solid transparent;
border-left: 0.3em solid; }
.dropright .dropdown-toggle:empty::after {
margin-left: 0; }
.dropright .dropdown-toggle::after {
vertical-align: 0; }
.dropleft .dropdown-menu {
top: 0;
right: 100%;
left: auto;
margin-top: 0;
margin-right: var(--hl-spacer-3xs); }
.dropleft .dropdown-toggle::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.1em;
content: ""; }
.dropleft .dropdown-toggle::after {
display: none; }
.dropleft .dropdown-toggle::before {
display: inline-block;
margin-right: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid transparent;
border-right: 0.3em solid;
border-bottom: 0.3em solid transparent; }
.dropleft .dropdown-toggle:empty::after {
margin-left: 0; }
.dropleft .dropdown-toggle::before {
vertical-align: 0; }
.dropdown-menu[x-placement^=top], .dropdown-menu[x-placement^=right], .dropdown-menu[x-placement^=bottom], .dropdown-menu[x-placement^=left] {
right: auto;
bottom: auto; }
.dropdown-divider {
height: 0;
margin: var(--hl-spacer-none) 0;
overflow: hidden;
border-top: 1px solid var(--hl-color-border-light-default); }
.dropdown-item.hl-btn, .dropdown-item.btn, .dropdown-item.subnav__nav__item, .dropdown-item.charger-btn {
display: flex;
width: 100%;
justify-content: flex-start; }
.dropdown-item:not(.hl-btn), .dropdown-item:not(.btn):not(.subnav__nav__item):not(.charger-btn) {
display: block;
width: 100%;
padding: var(--hl-spacer-xs) var(--hl-spacer-sm);
clear: both;
font-weight: var(--hl-typography-font-weight-body-bold);
color: var(--hl-color-core-black);
text-align: inherit;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border: 0; }
.dropdown-item:not(.hl-btn):hover, .dropdown-item:not(.hl-btn):focus, .dropdown-item:not(.btn):not(.subnav__nav__item):not(.charger-btn):hover, .dropdown-item:not(.btn):not(.subnav__nav__item):not(.charger-btn):focus {
color: var(--hl-color-core-white);
text-decoration: none;
background-color: var(--hl-color-core-black); }
.dropdown-item:not(.hl-btn).active, .dropdown-item:not(.hl-btn):active, .dropdown-item:not(.btn):not(.subnav__nav__item):not(.charger-btn).active, .dropdown-item:not(.btn):not(.subnav__nav__item):not(.charger-btn):active {
color: var(--hl-color-form-interaction-fg-light-active);
text-decoration: none;
background-color: var(--hl-color-form-interaction-bg-light-active); }
.dropdown-item:not(.hl-btn).disabled, .dropdown-item:not(.hl-btn):disabled, .dropdown-item:not(.btn):not(.subnav__nav__item):not(.charger-btn).disabled, .dropdown-item:not(.btn):not(.subnav__nav__item):not(.charger-btn):disabled {
color: #CCCCCC;
pointer-events: none;
background-color: transparent; }
.dropdown-menu.show {
display: block; }
.show .dropdown-toggle::after {
transform: scaleY(-1); }
.dropdown-header {
display: block;
padding: var(--hl-spacer-xs) var(--hl-spacer-sm) var(--hl-spacer-none) var(--hl-spacer-sm);
margin-top: 0;
margin-bottom: 0;
font-size: var(--hl-font-size-sm);
color: #999999;
white-space: nowrap; }
.dropdown-item-text {
display: block;
padding: var(--hl-spacer-xs) var(--hl-spacer-sm);
color: var(--hl-color-core-black); }
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-flex;
vertical-align: middle;
box-shadow: inset 0 0 0 var(--hl-border-width-default) var(--hl-color-border-light-secondary); }
.btn-group .btn, .btn-group .subnav__nav__item, .btn-group .charger-btn,
.btn-group-vertical .btn,
.btn-group-vertical .subnav__nav__item,
.btn-group-vertical .charger-btn {
display: flex;
flex-wrap: wrap;
align-content: center;
position: relative;
flex: 1 1 auto;
border: none; }
.btn-group .btn:hover, .btn-group .subnav__nav__item:hover, .btn-group .charger-btn:hover,
.btn-group-vertical .btn:hover,
.btn-group-vertical .subnav__nav__item:hover,
.btn-group-vertical .charger-btn:hover {
z-index: 1; }
.btn-group .btn:focus, .btn-group .subnav__nav__item:focus, .btn-group .charger-btn:focus, .btn-group .btn:active, .btn-group .subnav__nav__item:active, .btn-group .charger-btn:active, .btn-group .btn.active, .btn-group .active.subnav__nav__item, .btn-group .active.charger-btn,
.btn-group-vertical .btn:focus,
.btn-group-vertical .subnav__nav__item:focus,
.btn-group-vertical .charger-btn:focus,
.btn-group-vertical .btn:active,
.btn-group-vertical .subnav__nav__item:active,
.btn-group-vertical .charger-btn:active,
.btn-group-vertical .btn.active,
.btn-group-vertical .active.subnav__nav__item,
.btn-group-vertical .active.charger-btn {
z-index: 1; }
.btn-toolbar,
.btn-toolbar__left,
.btn-toolbar__right {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: var(--hl-spacer-xs); }
.btn-toolbar__left,
.btn-toolbar__left__left,
.btn-toolbar__right__left {
flex-grow: 1; }
.btn-toolbar__left + *,
.btn-toolbar__left__left + *,
.btn-toolbar__right__left + * {
margin-left: var(--hl-spacer-xs); }
.btn-toolbar .input-group,
.btn-toolbar__left .input-group,
.btn-toolbar__right .input-group {
width: auto; }
.btn-toolbar__right {
justify-content: flex-end; }
.btn-group > .btn:not(:first-child), .btn-group > .subnav__nav__item:not(:first-child), .btn-group > .charger-btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) {
margin-left: 0; }
.btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .subnav__nav__item:not(:last-child):not(.dropdown-toggle), .btn-group > .charger-btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn,
.btn-group > .btn-group:not(:last-child) > .subnav__nav__item,
.btn-group > .btn-group:not(:last-child) > .charger-btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.btn-group > .btn:not(:first-child), .btn-group > .subnav__nav__item:not(:first-child), .btn-group > .charger-btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn,
.btn-group > .btn-group:not(:first-child) > .subnav__nav__item,
.btn-group > .btn-group:not(:first-child) > .charger-btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
@media (max-width: 991.98px) {
.btn-group--as-vertical-on-down-md {
flex-direction: column;
align-items: flex-start;
justify-content: center; }
.btn-group--as-vertical-on-down-md > .btn, .btn-group--as-vertical-on-down-md > .subnav__nav__item, .btn-group--as-vertical-on-down-md > .charger-btn,
.btn-group--as-vertical-on-down-md > .btn-group {
width: 100%; }
.btn-group--as-vertical-on-down-md.btn-group-toggle--bordered > .btn, .btn-group--as-vertical-on-down-md.btn-group-toggle--bordered > .subnav__nav__item, .btn-group--as-vertical-on-down-md.btn-group-toggle--bordered > .charger-btn {
border-top: none;
border-right: none;
border-bottom-style: solid;
border-bottom-width: var(--hl-border-width-default); }
.btn-group--as-vertical-on-down-md.btn-group-toggle--bordered > .btn:last-child, .btn-group--as-vertical-on-down-md.btn-group-toggle--bordered > .subnav__nav__item:last-child, .btn-group--as-vertical-on-down-md.btn-group-toggle--bordered > .charger-btn:last-child {
border-bottom: none; } }
.btn-group--pills {
border-top-left-radius: var(--hl-border-radius-full);
border-bottom-left-radius: var(--hl-border-radius-full);
border-top-right-radius: var(--hl-border-radius-full);
border-bottom-right-radius: var(--hl-border-radius-full); }
.btn-group--pills > .btn:first-of-type, .btn-group--pills > .subnav__nav__item:first-of-type, .btn-group--pills > .charger-btn:first-of-type {
border-top-left-radius: var(--hl-border-radius-full);
border-bottom-left-radius: var(--hl-border-radius-full); }
.btn-group--pills > .btn:last-of-type, .btn-group--pills > .subnav__nav__item:last-of-type, .btn-group--pills > .charger-btn:last-of-type {
border-top-right-radius: var(--hl-border-radius-full);
border-bottom-right-radius: var(--hl-border-radius-full); }
@media (max-width: 991.98px) {
.btn-group--pills.btn-group--as-vertical-on-down-md {
border-top-left-radius: var(--hl-spacer-xs);
border-top-right-radius: var(--hl-spacer-xs);
border-bottom-right-radius: var(--hl-spacer-xs);
border-bottom-left-radius: var(--hl-spacer-xs); }
.btn-group--pills.btn-group--as-vertical-on-down-md > .btn:first-of-type:not(.dropdown-toggle), .btn-group--pills.btn-group--as-vertical-on-down-md > .subnav__nav__item:first-of-type:not(.dropdown-toggle), .btn-group--pills.btn-group--as-vertical-on-down-md > .charger-btn:first-of-type:not(.dropdown-toggle) {
border-top-right-radius: var(--hl-spacer-xs); }
.btn-group--pills.btn-group--as-vertical-on-down-md > .btn:first-of-type, .btn-group--pills.btn-group--as-vertical-on-down-md > .subnav__nav__item:first-of-type, .btn-group--pills.btn-group--as-vertical-on-down-md > .charger-btn:first-of-type {
border-top-left-radius: var(--hl-spacer-xs);
border-top-right-radius: var(--hl-spacer-xs);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }
.btn-group--pills.btn-group--as-vertical-on-down-md > .btn:last-of-type, .btn-group--pills.btn-group--as-vertical-on-down-md > .subnav__nav__item:last-of-type, .btn-group--pills.btn-group--as-vertical-on-down-md > .charger-btn:last-of-type {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: var(--hl-spacer-xs);
border-bottom-left-radius: var(--hl-spacer-xs); } }
.btn-group.btn-group-vertical.btn-group--pills {
border-top-left-radius: var(--hl-spacer-xs);
border-top-right-radius: var(--hl-spacer-xs);
border-bottom-right-radius: var(--hl-spacer-xs);
border-bottom-left-radius: var(--hl-spacer-xs); }
.btn-group.btn-group-vertical.btn-group--pills > .btn:first-of-type, .btn-group.btn-group-vertical.btn-group--pills > .subnav__nav__item:first-of-type, .btn-group.btn-group-vertical.btn-group--pills > .charger-btn:first-of-type {
border-top-left-radius: var(--hl-spacer-xs);
border-top-right-radius: var(--hl-spacer-xs); }
.btn-group.btn-group-vertical.btn-group--pills > .btn:last-of-type, .btn-group.btn-group-vertical.btn-group--pills > .subnav__nav__item:last-of-type, .btn-group.btn-group-vertical.btn-group--pills > .charger-btn:last-of-type {
border-bottom-right-radius: var(--hl-spacer-xs);
border-bottom-left-radius: var(--hl-spacer-xs); }
.btn-group--justified {
display: flex; }
.btn-group--justified .btn, .btn-group--justified .subnav__nav__item, .btn-group--justified .charger-btn {
flex-grow: 1;
text-align: center; }
@media (max-width: 991.98px) {
.btn-group--justified--md {
display: flex; }
.btn-group--justified--md .btn, .btn-group--justified--md .subnav__nav__item, .btn-group--justified--md .charger-btn {
flex-grow: 1;
text-align: center; } }
.dropdown-toggle-split {
padding-right: calc(var(--hl-spacer-lg) * 0.75);
padding-left: calc(var(--hl-spacer-lg) * 0.75); }
.dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropright .dropdown-toggle-split::after {
margin-left: 0; }
.dropleft .dropdown-toggle-split::before {
margin-right: 0; }
.btn-sm + .dropdown-toggle-split, .subnav__nav__item + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split, .btn-group-sm > .charger-btn + .dropdown-toggle-split {
padding-right: calc(var(--hl-spacer-md) * 0.75);
padding-left: calc(var(--hl-spacer-md) * 0.75); }
.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split, .btn-group-lg > .subnav__nav__item + .dropdown-toggle-split, .btn-group-lg > .charger-btn + .dropdown-toggle-split {
padding-right: calc(var(--hl-spacer-xl) * 0.75);
padding-left: calc(var(--hl-spacer-xl) * 0.75); }
.btn-group-vertical {
flex-direction: column;
align-items: flex-start;
justify-content: center; }
.btn-group-vertical > .btn, .btn-group-vertical > .subnav__nav__item, .btn-group-vertical > .charger-btn,
.btn-group-vertical > .btn-group {
width: 100%; }
.btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .subnav__nav__item:not(:first-child), .btn-group-vertical > .charger-btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) {
margin-top: calc(-1 * var(--hl-border-width-default)); }
.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), .btn-group-vertical > .subnav__nav__item:not(:last-child):not(.dropdown-toggle), .btn-group-vertical > .charger-btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical > .btn-group:not(:last-child) > .btn,
.btn-group-vertical > .btn-group:not(:last-child) > .subnav__nav__item,
.btn-group-vertical > .btn-group:not(:last-child) > .charger-btn {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }
.btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .subnav__nav__item:not(:first-child), .btn-group-vertical > .charger-btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) > .btn,
.btn-group-vertical > .btn-group:not(:first-child) > .subnav__nav__item,
.btn-group-vertical > .btn-group:not(:first-child) > .charger-btn {
border-top-left-radius: 0;
border-top-right-radius: 0; }
.btn-group-toggle > .btn, .btn-group-toggle > .subnav__nav__item, .btn-group-toggle > .charger-btn,
.btn-group-toggle > .btn-group > .btn,
.btn-group-toggle > .btn-group > .subnav__nav__item,
.btn-group-toggle > .btn-group > .charger-btn {
margin-bottom: 0; }
.btn-group-toggle > .btn input[type=radio], .btn-group-toggle > .subnav__nav__item input[type=radio], .btn-group-toggle > .charger-btn input[type=radio],
.btn-group-toggle > .btn input[type=checkbox],
.btn-group-toggle > .subnav__nav__item input[type=checkbox],
.btn-group-toggle > .charger-btn input[type=checkbox],
.btn-group-toggle > .btn-group > .btn input[type=radio],
.btn-group-toggle > .btn-group > .subnav__nav__item input[type=radio],
.btn-group-toggle > .btn-group > .charger-btn input[type=radio],
.btn-group-toggle > .btn-group > .btn input[type=checkbox],
.btn-group-toggle > .btn-group > .subnav__nav__item input[type=checkbox],
.btn-group-toggle > .btn-group > .charger-btn input[type=checkbox] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none; }
.btn-group-toggle > .btn.active, .btn-group-toggle > .active.subnav__nav__item, .btn-group-toggle > .active.charger-btn,
.btn-group-toggle > .btn-group > .btn.active,
.btn-group-toggle > .btn-group > .active.subnav__nav__item,
.btn-group-toggle > .btn-group > .active.charger-btn {
box-shadow: inset 0 0 0 var(--hl-border-width-default) var(--hl-color-button-bg-light-black-active); }
.btn-group-toggle--bordered > .btn, .btn-group-toggle--bordered > .subnav__nav__item, .btn-group-toggle--bordered > .charger-btn {
border-top: none;
border-bottom: none;
border-right-style: solid;
border-right-width: var(--hl-border-width-default); }
.btn-group-toggle--bordered > .btn:last-child, .btn-group-toggle--bordered > .subnav__nav__item:last-child, .btn-group-toggle--bordered > .charger-btn:last-child {
border-right: none; }
.btn-group-toggle--form {
box-shadow: inset 0 0 0 var(--hl-border-width-default) var(--hl-color-border-light-interaction-standby); }
.btn-group-toggle--primary > .btn.active, .btn-group-toggle--primary > .active.subnav__nav__item, .btn-group-toggle--primary > .active.charger-btn,
.btn-group-toggle--primary > .btn-group > .btn.active,
.btn-group-toggle--primary > .btn-group > .active.subnav__nav__item,
.btn-group-toggle--primary > .btn-group > .active.charger-btn {
background-color: var(--hl-color-button-bg-primary-standby) !important;
box-shadow: inset 0 0 0 var(--hl-border-width-default) var(--hl-color-button-bg-primary-standby);
color: var(--hl-color-fg-light-important) !important; }
.input-group {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 100%; }
.input-group > .form-control,
.input-group > .form-control-plaintext,
.input-group > .custom-select,
.input-group > .custom-file,
.input-group hl-input,
.input-group hl-select {
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 0;
margin-bottom: 0; }
.input-group > .form-control + .form-control,
.input-group > .form-control + .custom-select,
.input-group > .form-control + .custom-file,
.input-group > .form-control-plaintext + .form-control,
.input-group > .form-control-plaintext + .custom-select,
.input-group > .form-control-plaintext + .custom-file,
.input-group > .custom-select + .form-control,
.input-group > .custom-select + .custom-select,
.input-group > .custom-select + .custom-file,
.input-group > .custom-file + .form-control,
.input-group > .custom-file + .custom-select,
.input-group > .custom-file + .custom-file,
.input-group hl-input + .form-control,
.input-group hl-input + .custom-select,
.input-group hl-input + .custom-file,
.input-group hl-select + .form-control,
.input-group hl-select + .custom-select,
.input-group hl-select + .custom-file {
margin-left: calc(-1 * var(--hl-border-width-default)); }
.input-group > .form-control:focus,
.input-group > .custom-select:focus,
.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label {
z-index: 3; }
.input-group > .custom-file .custom-file-input:focus {
z-index: 4; }
.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.input-group > .custom-file {
display: flex;
align-items: center; }
.input-group > .custom-file:not(:last-child) .custom-file-label, .input-group > .custom-file:not(:last-child) .custom-file-label::after {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
font-weight: var(--hl-typography-font-weight-body-bold); }
.input-group > .custom-file:not(:first-child) .custom-file-label {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
font-weight: var(--hl-typography-font-weight-body-bold); }
.input-group:not(.has-validation) > .form-control:has(+ .input-group-append),
.input-group:not(.has-validation) > .custom-select:not(:last-child),
.input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label,
.input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label::after {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.input-group.has-validation > .form-control:nth-last-child(n+3),
.input-group.has-validation > .custom-select:nth-last-child(n+3),
.input-group.has-validation > .custom-file:nth-last-child(n+3) .custom-file-label,
.input-group.has-validation > .custom-file:nth-last-child(n+3) .custom-file-label::after {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.input-group-prepend,
.input-group-append {
display: flex; }
.input-group-prepend .hl-btn,
.input-group-prepend .btn,
.input-group-prepend .subnav__nav__item,
.input-group-prepend .charger-btn,
.input-group-append .hl-btn,
.input-group-append .btn,
.input-group-append .subnav__nav__item,
.input-group-append .charger-btn {
position: relative;
z-index: 2; }
.input-group-prepend .hl-btn:focus,
.input-group-prepend .btn:focus,
.input-group-prepend .subnav__nav__item:focus,
.input-group-prepend .charger-btn:focus,
.input-group-append .hl-btn:focus,
.input-group-append .btn:focus,
.input-group-append .subnav__nav__item:focus,
.input-group-append .charger-btn:focus {
z-index: 3; }
.input-group-prepend .hl-btn + .hl-btn,
.input-group-prepend .hl-btn + .input-group-text,
.input-group-prepend .btn + .btn,
.input-group-prepend .subnav__nav__item + .btn,
.input-group-prepend .btn + .subnav__nav__item,
.input-group-prepend .subnav__nav__item + .subnav__nav__item,
.input-group-prepend .charger-btn + .btn,
.input-group-prepend .charger-btn + .subnav__nav__item,
.input-group-prepend .btn + .charger-btn,
.input-group-prepend .subnav__nav__item + .charger-btn,
.input-group-prepend .charger-btn + .charger-btn,
.input-group-prepend .btn + .input-group-text,
.input-group-prepend .subnav__nav__item + .input-group-text,
.input-group-prepend .charger-btn + .input-group-text,
.input-group-prepend .input-group-text + .input-group-text,
.input-group-prepend .input-group-text + .btn,
.input-group-prepend .input-group-text + .subnav__nav__item,
.input-group-prepend .input-group-text + .charger-btn,
.input-group-append .hl-btn + .hl-btn,
.input-group-append .hl-btn + .input-group-text,
.input-group-append .btn + .btn,
.input-group-append .subnav__nav__item + .btn,
.input-group-append .btn + .subnav__nav__item,
.input-group-append .subnav__nav__item + .subnav__nav__item,
.input-group-append .charger-btn + .btn,
.input-group-append .charger-btn + .subnav__nav__item,
.input-group-append .btn + .charger-btn,
.input-group-append .subnav__nav__item + .charger-btn,
.input-group-append .charger-btn + .charger-btn,
.input-group-append .btn + .input-group-text,
.input-group-append .subnav__nav__item + .input-group-text,
.input-group-append .charger-btn + .input-group-text,
.input-group-append .input-group-text + .input-group-text,
.input-group-append .input-group-text + .btn,
.input-group-append .input-group-text + .subnav__nav__item,
.input-group-append .input-group-text + .charger-btn {
margin-left: calc(-1 * var(--hl-border-width-default)); }
.input-group-prepend {
margin-right: calc(-1 * var(--hl-border-width-default)); }
.input-group-append {
margin-left: calc(-1 * var(--hl-border-width-default)); }
.input-group-text {
display: flex;
align-items: center;
padding: calc(var(--hl-spacer-sm)) calc(var(--hl-spacer-sm));
margin-bottom: 0;
font-size: var(--hl-font-size-md);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-very-decreased);
color: var(--hl-color-fg-light-important);
text-align: center;
white-space: nowrap;
background-color: var(--hl-color-bg-light-ultra-muted);
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-standby);
border-radius: var(--hl-border-radius-default); }
.input-group-text input[type=radio],
.input-group-text input[type=checkbox] {
margin-top: 0; }
.input-group-lg > .form-control:not(textarea),
.input-group-lg > .custom-select {
height: calc(var(--hl-typography-line-height-very-decreased) * 1em + var(--hl-spacer-md) * 2 + calc(var(--hl-border-width-default) * 2)); }
.input-group-lg > .form-control,
.input-group-lg > .custom-select,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-prepend > .subnav__nav__item,
.input-group-lg > .input-group-prepend > .charger-btn,
.input-group-lg > .input-group-append > .btn,
.input-group-lg > .input-group-append > .subnav__nav__item,
.input-group-lg > .input-group-append > .charger-btn,
.input-group-lg > .input-group-prepend > .hl-btn,
.input-group-lg > .input-group-append > .hl-btn {
padding: var(--hl-spacer-md) var(--hl-spacer-md);
font-size: var(--hl-font-size-2xl);
line-height: var(--hl-typography-line-height-very-decreased);
border-radius: var(--hl-border-radius-default); }
.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
height: calc(var(--hl-typography-line-height-very-decreased) * 1em + var(--hl-spacer-xs) * 2 + calc(var(--hl-border-width-default) * 2)); }
.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-prepend > .subnav__nav__item,
.input-group-sm > .input-group-prepend > .charger-btn,
.input-group-sm > .input-group-append > .btn,
.input-group-sm > .input-group-append > .subnav__nav__item,
.input-group-sm > .input-group-append > .charger-btn,
.input-group-sm > .input-group-prepend > .hl-btn,
.input-group-sm > .input-group-append > .hl-btn {
padding: var(--hl-spacer-xs) var(--hl-spacer-xs);
font-size: var(--hl-font-size-sm);
line-height: var(--hl-typography-line-height-very-decreased);
border-radius: var(--hl-border-radius-default); }
.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
padding-right: calc(var(--hl-spacer-sm)) var(--hl-spacer-xl); }
.input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .subnav__nav__item, .input-group > .input-group-prepend > .charger-btn,
.input-group > .input-group-prepend > .hl-btn,
.input-group > .input-group-prepend > .input-group-text {
border-top-left-radius: var(--hl-border-radius-default);
border-bottom-left-radius: var(--hl-border-radius-default);
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn, .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .subnav__nav__item, .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .charger-btn,
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .hl-btn,
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
.input-group.has-validation > .input-group-append:nth-last-child(n+3) > .btn,
.input-group.has-validation > .input-group-append:nth-last-child(n+3) > .subnav__nav__item,
.input-group.has-validation > .input-group-append:nth-last-child(n+3) > .charger-btn,
.input-group.has-validation > .input-group-append:nth-last-child(n+3) > .hl-btn,
.input-group.has-validation > .input-group-append:nth-last-child(n+3) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .subnav__nav__item:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .charger-btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .hl-btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
border-top-right-radius: var(--hl-border-radius-default);
border-bottom-right-radius: var(--hl-border-radius-default); }
.input-group > .input-group-append > .btn, .input-group > .input-group-append > .subnav__nav__item, .input-group > .input-group-append > .charger-btn,
.input-group > .input-group-append > .hl-btn,
.input-group > .input-group-append > .input-group-text {
border-top-right-radius: var(--hl-border-radius-default);
border-bottom-right-radius: var(--hl-border-radius-default);
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.input-group > .input-group-prepend:not(:first-child) > .btn, .input-group > .input-group-prepend:not(:first-child) > .subnav__nav__item, .input-group > .input-group-prepend:not(:first-child) > .charger-btn,
.input-group > .input-group-prepend:not(:first-child) > .hl-btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .subnav__nav__item:not(:first-child),
.input-group > .input-group-prepend:first-child > .charger-btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .hl-btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.input-group .input-group-prepend .custom-select {
margin-right: var(--hl-spacer-xs); }
@media (max-width: 991.98px) {
.input-group--as-vertical-on-down-md > * {
width: 100%; }
.input-group--as-vertical-on-down-md .input-group-prepend,
.input-group--as-vertical-on-down-md .input-group-append {
margin: 0 0 calc(-1 * var(--hl-border-width-default)); }
.input-group--as-vertical-on-down-md .input-group-prepend > .input-group-text,
.input-group--as-vertical-on-down-md .input-group-prepend > .custom-select,
.input-group--as-vertical-on-down-md .input-group-append > .input-group-text,
.input-group--as-vertical-on-down-md .input-group-append > .custom-select {
border-radius: var(--hl-border-radius-default) var(--hl-border-radius-default) 0 0; }
.input-group--as-vertical-on-down-md.input-group:not(.has-validation) > .form-control:not(:last-child) .custom-select:not(:first-child), .input-group--as-vertical-on-down-md.input-group .form-control:not(:last-child) {
border-radius: 0 0 var(--hl-border-radius-default) var(--hl-border-radius-default); }
.input-group--as-vertical-on-down-md .input-group-append {
order: -1; }
.input-group--as-vertical-on-down-md .input-group-prepend .custom-select {
margin-right: 0; } }
@media (max-width: 767.98px) {
.input-group--as-vertical-on-down-sm > * {
width: 100%; }
.input-group--as-vertical-on-down-sm .input-group-prepend,
.input-group--as-vertical-on-down-sm .input-group-append {
margin: 0 0 calc(-1 * var(--hl-border-width-default)); }
.input-group--as-vertical-on-down-sm .input-group-prepend > .input-group-text,
.input-group--as-vertical-on-down-sm .input-group-prepend > .custom-select,
.input-group--as-vertical-on-down-sm .input-group-append > .input-group-text,
.input-group--as-vertical-on-down-sm .input-group-append > .custom-select {
border-radius: var(--hl-border-radius-default) var(--hl-border-radius-default) 0 0; }
.input-group--as-vertical-on-down-sm.input-group:not(.has-validation) > .form-control:not(:last-child) .custom-select:not(:first-child), .input-group--as-vertical-on-down-sm.input-group .form-control:not(:last-child) {
border-radius: 0 0 var(--hl-border-radius-default) var(--hl-border-radius-default); }
.input-group--as-vertical-on-down-sm .input-group-append {
order: -1; }
.input-group--as-vertical-on-down-sm .input-group-prepend .custom-select {
margin-right: 0; } }
@media (max-width: 575.98px) {
.input-group--as-vertical-on-down-xs > * {
width: 100%; }
.input-group--as-vertical-on-down-xs .input-group-prepend,
.input-group--as-vertical-on-down-xs .input-group-append {
margin: 0 0 calc(-1 * var(--hl-border-width-default)); }
.input-group--as-vertical-on-down-xs .input-group-prepend > .input-group-text,
.input-group--as-vertical-on-down-xs .input-group-prepend > .custom-select,
.input-group--as-vertical-on-down-xs .input-group-append > .input-group-text,
.input-group--as-vertical-on-down-xs .input-group-append > .custom-select {
border-radius: var(--hl-border-radius-default) var(--hl-border-radius-default) 0 0; }
.input-group--as-vertical-on-down-xs.input-group:not(.has-validation) > .form-control:not(:last-child) .custom-select:not(:first-child), .input-group--as-vertical-on-down-xs.input-group .form-control:not(:last-child) {
border-radius: 0 0 var(--hl-border-radius-default) var(--hl-border-radius-default); }
.input-group--as-vertical-on-down-xs .input-group-append {
order: -1; }
.input-group--as-vertical-on-down-xs .input-group-prepend .custom-select {
margin-right: 0; } }
input[type=radio]:not(.disabled):focus-visible,
input[type=checkbox]:not(.disabled):focus-visible {
animation: focus-outline-animation var(--hl-transition-normal) forwards; }
.custom-control {
position: relative;
z-index: 1;
display: block;
min-height: calc(var(--hl-font-size-md) * var(--hl-typography-line-height-very-increased));
padding-left: calc(var(--hl-spacer-xs) + var(--hl-spacer-lg));
print-color-adjust: exact; }
.custom-control-inline {
display: inline-flex;
margin-right: var(--hl-spacer-md); }
.custom-control-input {
position: absolute;
left: 0;
z-index: -1;
width: var(--hl-spacer-lg);
height: calc((var(--hl-font-size-md) * var(--hl-typography-line-height-very-increased) + var(--hl-spacer-lg)) * 0.5);
opacity: 0; }
.custom-control-input:checked:not(:disabled) ~ .custom-control-label::before, .custom-control-input:checked:not([disabled]) ~ .custom-control-label::before {
color: var(--hl-color-form-interaction-fg-light-active);
border-color: var(--hl-color-form-interaction-bg-light-active);
background-color: var(--hl-color-form-interaction-bg-light-active); }
.custom-control-input:focus ~ .custom-control-label::before {
box-shadow: var(--hl-color-box-shadow-hover); }
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
color: var(--hl-color-form-interaction-fg-light-active); }
.custom-control-input:not(.disabled):focus-visible + .custom-control-label::before {
animation: focus-outline-animation var(--hl-transition-normal) forwards; }
.custom-control-input.disabled:focus-visible {
outline: 0 !important; }
.custom-control-input[disabled], .custom-control-input:disabled {
pointer-events: none; }
.custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
color: var(--hl-color-form-fg-light-disabled);
pointer-events: none; }
.custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
background-color: var(--hl-color-form-bg-light-disabled); }
.custom-control-input[disabled] ~ .custom-control-label-disabled-on::before, .custom-control-input:disabled ~ .custom-control-label-disabled-on::before {
background-color: var(--hl-color-supporting-green-light); }
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none; }
.custom-control-label {
position: relative;
margin-bottom: 0;
vertical-align: top; }
.custom-control-label::before {
position: absolute;
top: calc((var(--hl-font-size-md) * var(--hl-typography-line-height-very-increased) - var(--hl-spacer-lg)) * 0.5);
left: calc(-1 * (var(--hl-spacer-xs) + var(--hl-spacer-lg)));
display: block;
width: var(--hl-spacer-lg);
height: var(--hl-spacer-lg);
pointer-events: none;
content: "";
background-color: var(--hl-color-bg-light-default);
border: var(--hl-border-width-default) solid #CCCCCC; }
.custom-control-label::after {
position: absolute;
top: calc((var(--hl-font-size-md) * var(--hl-typography-line-height-very-increased) - var(--hl-spacer-lg)) * 0.5);
left: calc(-1 * (var(--hl-spacer-xs) + var(--hl-spacer-lg)));
display: block;
width: var(--hl-spacer-lg);
height: var(--hl-spacer-lg);
content: "";
background: 50%/50% 50% no-repeat; }
.custom-control-label hl-star-rating {
font-weight: var(--hl-typography-font-weight-body-regular); }
.custom-control-label hl-star-rating:not([text]) {
height: var(--hl-spacer-lg);
display: flex;
align-items: center; }
.checkbox-list {
margin-top: var(--hl-spacer-sm);
padding-left: var(--hl-spacer-sm); }
.checkbox-list .custom-checkbox .custom-control-label {
font-weight: var(--hl-typography-font-weight-body-regular); }
.custom-checkbox + .custom-checkbox {
margin-top: var(--hl-spacer-xs); }
.custom-checkbox .custom-control-label-default:hover::before,
.custom-checkbox .custom-control-label-danger:hover::before {
border-color: var(--hl-color-border-light-interaction-hover); }
.custom-checkbox .custom-control-label::before {
background-color: transparent;
border-radius: var(--hl-border-radius-default); }
.custom-checkbox .custom-control-label::after {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-image: var(--hl-icon-form-indicator);
mask-image: var(--hl-icon-form-indicator);
height: calc(var(--hl-spacer-lg) - var(--hl-border-width-default));
width: calc(var(--hl-spacer-lg) - var(--hl-border-width-default));
position: absolute;
display: inline-block;
top: calc((var(--hl-spacer-lg) - (var(--hl-spacer-lg) - var(--hl-border-width-default))) / 2);
left: calc(-1 * (var(--hl-spacer-xs) + var(--hl-spacer-lg)) + (var(--hl-spacer-lg) - (var(--hl-spacer-lg) - var(--hl-border-width-default))) / 2); }
.custom-checkbox .custom-control-label-default:active::before, .custom-checkbox .custom-control-label-danger:active::before {
border-color: var(--hl-color-border-light-interaction-pressed); }
.custom-checkbox .custom-control-label-default:active::after, .custom-checkbox .custom-control-label-danger:active::after {
background-color: var(--hl-color-border-light-interaction-pressed); }
.custom-checkbox .custom-control-label-danger::before {
border-color: var(--hl-color-functional-danger); }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label {
position: relative; }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
background-color: var(--hl-color-form-interaction-fg-light-active); }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label-default:hover::before {
background-color: var(--hl-color-form-interaction-bg-light-hover);
border: transparent; }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label-danger::before {
border-color: var(--hl-color-functional-danger); }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label-default:active::before, .custom-checkbox .custom-control-input:checked ~ .custom-control-label-danger:active::before {
background-color: var(--hl-color-form-interaction-bg-light-pressed); }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label-default:active::after, .custom-checkbox .custom-control-input:checked ~ .custom-control-label-danger:active::after {
background-color: var(--hl-color-form-interaction-fg-light-pressed); }
.custom-checkbox .custom-control-input:checked:disabled ~ .custom-control-label::after {
background-color: var(--hl-color-form-fg-light-disabled); }
.custom-checkbox .custom-control-input[indeterminate] ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
border-color: var(--hl-color-form-interaction-bg-light-active);
background-color: var(--hl-color-form-interaction-bg-light-active); }
.custom-checkbox .custom-control-input[indeterminate] ~ .custom-control-label::after,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
background-image: url('data:image/svg+xml,%3csvg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M1 7H15V9H1V7Z" fill="black"/%3e%3c/svg%3e');
-webkit-mask: unset;
mask: unset; }
.custom-checkbox .custom-control-input[indeterminate] ~ .custom-control-label:hover::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label:hover::before {
background-color: var(--hl-color-form-interaction-bg-light-hover);
border: transparent; }
.custom-checkbox .custom-control-input[indeterminate] ~ .custom-control-label:active::after,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label:active::after {
background-image: var(--hl-icon-form-indicator); }
.custom-checkbox .custom-control-input:disabled {
pointer-events: none; }
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label {
color: var(--hl-color-form-fg-light-disabled);
pointer-events: none; }
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
background-color: var(--hl-color-form-bg-light-disabled); }
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
background-color: var(--hl-color-form-bg-light-disabled); }
.custom-radio-inline {
display: flex;
flex-wrap: wrap;
gap: var(--hl-spacer-sm); }
.custom-radio-inline .custom-radio {
margin-right: var(--hl-spacer-sm); }
.custom-radio-inline .custom-radio + .custom-radio {
margin-top: 0; }
.custom-radio + .custom-radio {
margin-top: var(--hl-spacer-xs); }
.custom-radio .custom-control-label-default:hover::before {
border-color: var(--hl-color-border-light-interaction-hover); }
.custom-radio .custom-control-label-danger:hover::before {
border-color: var(--hl-color-border-light-interaction-hover); }
.custom-radio .custom-control-label::before {
border-radius: 50%; }
.custom-radio .custom-control-label::after {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-image: var(--hl-icon-form-radio-indicator);
mask-image: var(--hl-icon-form-radio-indicator);
height: calc(var(--hl-spacer-md) - var(--hl-border-width-default));
width: calc(var(--hl-spacer-md) - var(--hl-border-width-default));
position: absolute;
display: inline-block;
top: calc((var(--hl-spacer-lg) - (var(--hl-spacer-md) - var(--hl-border-width-default))) / 2);
left: calc(-1 * (var(--hl-spacer-xs) + var(--hl-spacer-lg)) + (var(--hl-spacer-lg) - (var(--hl-spacer-md) - var(--hl-border-width-default))) / 2); }
.custom-radio .custom-control-label-default:active::before, .custom-radio .custom-control-label-danger:active::before {
border-color: var(--hl-color-border-light-interaction-pressed); }
.custom-radio .custom-control-label-default:active::after, .custom-radio .custom-control-label-danger:active::after {
background-color: var(--hl-color-border-light-interaction-pressed); }
.custom-radio .custom-control-label-danger::before {
border-color: var(--hl-color-functional-danger); }
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
background-color: var(--hl-color-form-interaction-fg-light-active); }
.custom-radio .custom-control-input:checked ~ .custom-control-label-danger::before {
border-color: var(--hl-color-functional-danger); }
.custom-radio .custom-control-input:checked ~ .custom-control-label-default:hover::before {
border: transparent; }
.custom-radio .custom-control-input:disabled {
pointer-events: none; }
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
background-color: var(--hl-color-form-bg-light-disabled); }
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::after {
background-color: var(--hl-color-form-fg-light-disabled); }
.custom-switch {
padding-left: calc(calc(var(--hl-spacer-lg) * 1.75) + var(--hl-spacer-xs)); }
.custom-switch .custom-control-label::before {
left: calc(-1 * (calc(var(--hl-spacer-lg) * 1.75) + var(--hl-spacer-xs)));
width: calc(var(--hl-spacer-lg) * 1.75);
pointer-events: all;
border-radius: calc(var(--hl-spacer-lg) * 0.5);
background-color: #DEDEDE;
border-color: #DEDEDE; }
.custom-switch .custom-control-label::after {
top: 0;
left: -50px;
width: var(--hl-spacer-lg);
height: var(--hl-spacer-lg);
border-radius: calc(var(--hl-spacer-lg) * 0.5);
transition: transform 0.15s ease-in-out, background-color var(--hl-transition-normal), border-color var(--hl-transition-normal), box-shadow var(--hl-transition-normal);
box-shadow: inset 0 0 0 calc(var(--hl-spacer-lg) * 1.75) var(--hl-color-bg-light-default); }
@media (prefers-reduced-motion: reduce) {
.custom-switch .custom-control-label::after {
transition: none; } }
.custom-switch .custom-control-label-error::after {
border: var(--hl-border-width-default) solid var(--hl-color-functional-danger); }
.custom-switch .custom-control-label-error:hover::after {
border-color: var(--hl-color-border-light-interaction-hover); }
.custom-switch .custom-control-label-error:active::after {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-pressed); }
.custom-switch .custom-control-label-default::after {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-standby); }
.custom-switch .custom-control-label-default:hover::after {
border-color: var(--hl-color-border-light-interaction-hover); }
.custom-switch .custom-control-label-default:active::after {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-pressed); }
.custom-switch .custom-control-label-good::after {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-standby); }
.custom-switch .custom-control-label-good:hover::after {
border-color: var(--hl-color-border-light-interaction-hover); }
.custom-switch .custom-control-label-good:active::after {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-pressed); }
.custom-switch .custom-control-label-bad::after {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-standby); }
.custom-switch .custom-control-label-bad:hover::after {
border-color: var(--hl-color-border-light-interaction-hover); }
.custom-switch .custom-control-label-bad:active::after {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-pressed); }
.custom-switch .custom-control-label-disabled::before {
border-color: #EDEDED; }
.custom-switch .custom-control-label-disabled::after {
border: var(--hl-border-width-default) solid #DEDEDE; }
.custom-switch .custom-control-label-disabled-on::before {
border-color: var(--hl-color-supporting-green-light); }
.custom-switch .custom-control-label-disabled-on::after {
border: var(--hl-border-width-default) solid var(--hl-color-supporting-green-light);
left: -30px; }
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(calc(calc(var(--hl-spacer-lg) * 1.75) - var(--hl-spacer-lg))); }
.custom-switch .custom-control-input:checked ~ .custom-control-label-default:hover::after {
border-color: var(--hl-color-border-light-interaction-hover); }
.custom-switch .custom-control-input:checked ~ .custom-control-label-default:active::after {
border-color: var(--hl-color-border-light-interaction-pressed); }
.custom-switch .custom-control-input:checked ~ .custom-control-label-default::before {
background-color: var(--hl-color-primary);
border-color: var(--hl-color-primary); }
.custom-switch .custom-control-input:checked ~ .custom-control-label-good:hover::after {
border-color: var(--hl-color-border-light-interaction-hover); }
.custom-switch .custom-control-input:checked ~ .custom-control-label-good:active::after {
border-color: var(--hl-color-border-light-interaction-pressed); }
.custom-switch .custom-control-input:checked ~ .custom-control-label-good::before {
background-color: var(--hl-color-functional-success);
border-color: var(--hl-color-functional-success); }
.custom-switch .custom-control-input:checked ~ .custom-control-label-bad:hover::after {
border-color: var(--hl-color-border-light-interaction-hover); }
.custom-switch .custom-control-input:checked ~ .custom-control-label-bad:active::after {
border-color: var(--hl-color-border-light-interaction-pressed); }
.custom-switch .custom-control-input:checked ~ .custom-control-label-bad::before {
background-color: var(--hl-color-functional-danger);
border-color: var(--hl-color-functional-danger); }
.custom-switch .custom-control-input:checked ~ .custom-control-label-error::before {
background-color: var(--hl-color-primary);
border-color: var(--hl-color-primary); }
.custom-switch .custom-control-input:disabled {
pointer-events: none; }
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
background-color: var(--hl-color-form-bg-light-disabled); }
.custom-select {
display: inline-block;
width: 100%;
height: calc(var(--hl-typography-line-height-very-decreased) * 1em + calc(var(--hl-spacer-sm)) * 2 + calc(var(--hl-border-width-default) * 2));
padding: calc(var(--hl-spacer-sm)) calc((var(--hl-spacer-sm)) + var(--hl-spacer-xl)) calc(var(--hl-spacer-sm)) calc(var(--hl-spacer-sm));
font-size: var(--hl-font-size-md);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-very-decreased);
color: var(--hl-color-fg-light-important);
vertical-align: middle;
background: var(--hl-color-bg-light-default) url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='40'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/mask%3E%3Cg mask='url%28%23mask0%29'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M39 11L1 11L20 30L39 11Z' fill='black'/%3E%3C/g%3E%3C/svg%3E%0A") right calc(var(--hl-spacer-sm)) center/14px 14px no-repeat;
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-standby);
border-radius: var(--hl-border-radius-default);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
.custom-select:hover {
border-color: #999999; }
.bg-dark .custom-select {
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='40'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M39 11L1 11L20 30L39 11Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A"); }
.custom-select option {
font-weight: var(--hl-typography-font-weight-body-bold); }
.custom-select:focus {
border-color: var(--hl-color-border-light-interaction-focus);
outline: 0; }
.custom-select:focus::-ms-value {
color: var(--hl-color-fg-light-important);
background-color: var(--hl-color-bg-light-default); }
.custom-select[multiple], .custom-select[size]:not([size="1"]) {
height: auto;
padding-right: calc(var(--hl-spacer-sm));
background-image: none; }
.custom-select:disabled {
color: var(--hl-color-form-fg-light-disabled);
background-color: var(--hl-color-form-bg-light-disabled);
pointer-events: none; }
.custom-select::-ms-expand {
display: none; }
.custom-select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 var(--hl-color-fg-light-important); }
.custom-select option:checked {
background-color: #1967d2;
color: var(--hl-color-fg-dark-important); }
.custom-select-sm {
height: calc(var(--hl-typography-line-height-very-decreased) * 1em + var(--hl-spacer-xs) * 2 + calc(var(--hl-border-width-default) * 2));
padding-top: var(--hl-spacer-xs);
padding-bottom: var(--hl-spacer-xs);
padding-left: var(--hl-spacer-xs);
font-size: var(--hl-font-size-sm); }
.custom-select-lg {
height: calc(var(--hl-typography-line-height-very-decreased) * 1em + var(--hl-spacer-md) * 2 + calc(var(--hl-border-width-default) * 2));
padding-top: var(--hl-spacer-md);
padding-bottom: var(--hl-spacer-md);
padding-left: var(--hl-spacer-md);
font-size: var(--hl-font-size-2xl); }
.custom-file {
position: relative;
display: inline-block;
width: 100%;
height: calc(var(--hl-typography-line-height-very-decreased) * 1em + calc(var(--hl-spacer-sm)) * 2 + calc(var(--hl-border-width-default) * 2));
margin-bottom: 0; }
.custom-file:hover {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-hover); }
.custom-file-input {
position: relative;
z-index: 2;
width: 100%;
height: calc(var(--hl-typography-line-height-very-decreased) * 1em + calc(var(--hl-spacer-sm)) * 2 + calc(var(--hl-border-width-default) * 2));
margin: 0;
overflow: hidden;
opacity: 0; }
.custom-file-input:focus ~ .custom-file-label {
border-color: var(--hl-color-border-light-interaction-focus);
box-shadow: var(--hl-color-box-shadow-hover); }
.custom-file-input[disabled] ~ .custom-file-label, .custom-file-input:disabled ~ .custom-file-label {
background-color: var(--hl-color-form-bg-light-disabled); }
.custom-file-input:lang(en) ~ .custom-file-label::after {
content: "Browse"; }
.custom-file-input ~ .custom-file-label[data-browse]::after {
content: attr(data-browse); }
.custom-file-label {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
height: calc(var(--hl-typography-line-height-very-decreased) * 1em + calc(var(--hl-spacer-sm)) * 2 + calc(var(--hl-border-width-default) * 2));
padding: calc(var(--hl-spacer-sm)) calc(var(--hl-spacer-sm));
overflow: hidden;
font-weight: var(--hl-typography-font-weight-body-regular);
line-height: var(--hl-typography-line-height-very-decreased);
color: var(--hl-color-fg-light-important);
background-color: var(--hl-color-bg-light-default);
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-standby);
border-radius: var(--hl-border-radius-default); }
.custom-file-label::after {
position: absolute;
top: 0;
font-weight: var(--hl-typography-font-weight-body-bold);
right: 0;
bottom: 0;
z-index: 3;
display: block;
height: calc(var(--hl-typography-line-height-very-decreased) * 1em + calc(var(--hl-spacer-sm)) * 2);
padding: calc(var(--hl-spacer-sm)) calc(var(--hl-spacer-sm));
line-height: var(--hl-typography-line-height-very-decreased);
color: var(--hl-color-fg-light-important);
content: "Browse";
background-color: var(--hl-color-bg-light-ultra-muted);
border-left: inherit;
border-radius: 0 var(--hl-border-radius-default) var(--hl-border-radius-default) 0; }
.custom-range {
width: 100%;
height: calc(var(--hl-spacer-md) + var(--hl-spacer-2xs) * 2);
padding: 0;
background-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
.custom-range:focus {
outline: 0; }
.custom-range:focus::-webkit-slider-thumb {
box-shadow: var(--hl-box-shadow-soft-hover); }
.custom-range:focus::-moz-range-thumb {
box-shadow: var(--hl-box-shadow-soft-hover); }
.custom-range:focus::-ms-thumb {
box-shadow: var(--hl-box-shadow-soft-hover); }
.custom-range::-moz-focus-outer {
border: 0; }
.custom-range::-webkit-slider-thumb {
width: var(--hl-spacer-md);
height: var(--hl-spacer-md);
margin-top: calc((var(--hl-spacer-xs) - var(--hl-spacer-md)) * 0.5);
background-color: var(--hl-color-form-interaction-bg-light-active);
border: var(--hl-border-width-none);
border-radius: var(--hl-border-radius-sm);
-webkit-transition: background-color var(--hl-transition-normal), border-color var(--hl-transition-normal), box-shadow var(--hl-transition-normal);
transition: background-color var(--hl-transition-normal), border-color var(--hl-transition-normal), box-shadow var(--hl-transition-normal);
-webkit-appearance: none;
appearance: none; }
@media (prefers-reduced-motion: reduce) {
.custom-range::-webkit-slider-thumb {
-webkit-transition: none;
transition: none; } }
.custom-range::-webkit-slider-thumb:active {
background-color: var(--hl-color-bg-light-primary); }
.custom-range::-webkit-slider-runnable-track {
width: 100%;
height: var(--hl-spacer-xs);
color: transparent;
cursor: pointer;
background-color: #EDEDED;
border-color: transparent;
border-radius: var(--hl-border-radius-sm); }
.custom-range::-moz-range-thumb {
width: var(--hl-spacer-md);
height: var(--hl-spacer-md);
background-color: var(--hl-color-form-interaction-bg-light-active);
border: var(--hl-border-width-none);
border-radius: var(--hl-border-radius-sm);
-moz-transition: background-color var(--hl-transition-normal), border-color var(--hl-transition-normal), box-shadow var(--hl-transition-normal);
transition: background-color var(--hl-transition-normal), border-color var(--hl-transition-normal), box-shadow var(--hl-transition-normal);
-moz-appearance: none;
appearance: none; }
@media (prefers-reduced-motion: reduce) {
.custom-range::-moz-range-thumb {
-moz-transition: none;
transition: none; } }
.custom-range::-moz-range-thumb:active {
background-color: var(--hl-color-bg-light-primary); }
.custom-range::-moz-range-track {
width: 100%;
height: var(--hl-spacer-xs);
color: transparent;
cursor: pointer;
background-color: #EDEDED;
border-color: transparent;
border-radius: var(--hl-border-radius-sm); }
.custom-range::-ms-thumb {
width: var(--hl-spacer-md);
height: var(--hl-spacer-md);
margin-top: 0;
margin-right: var(--hl-spacer-2xs);
margin-left: var(--hl-spacer-2xs);
background-color: var(--hl-color-form-interaction-bg-light-active);
border: var(--hl-border-width-none);
border-radius: var(--hl-border-radius-sm);
-ms-transition: background-color var(--hl-transition-normal), border-color var(--hl-transition-normal), box-shadow var(--hl-transition-normal);
transition: background-color var(--hl-transition-normal), border-color var(--hl-transition-normal), box-shadow var(--hl-transition-normal);
appearance: none; }
@media (prefers-reduced-motion: reduce) {
.custom-range::-ms-thumb {
-ms-transition: none;
transition: none; } }
.custom-range::-ms-thumb:active {
background-color: var(--hl-color-bg-light-primary); }
.custom-range::-ms-track {
width: 100%;
height: var(--hl-spacer-xs);
color: transparent;
cursor: pointer;
background-color: transparent;
border-color: transparent;
border-width: calc(var(--hl-spacer-md) * 0.5); }
.custom-range::-ms-fill-lower {
background-color: #EDEDED;
border-radius: var(--hl-border-radius-sm); }
.custom-range::-ms-fill-upper {
margin-right: 15px;
background-color: #EDEDED;
border-radius: var(--hl-border-radius-sm); }
.custom-range:disabled::-webkit-slider-thumb {
background-color: #CCCCCC; }
.custom-range:disabled::-webkit-slider-runnable-track {
cursor: default; }
.custom-range:disabled::-moz-range-thumb {
background-color: #CCCCCC; }
.custom-range:disabled::-moz-range-track {
cursor: default; }
.custom-range:disabled::-ms-thumb {
background-color: #CCCCCC; }
.custom-control-label::before,
.custom-file-label,
.custom-select {
transition: background-color var(--hl-transition-normal), border-color var(--hl-transition-normal), box-shadow var(--hl-transition-normal); }
@media (prefers-reduced-motion: reduce) {
.custom-control-label::before,
.custom-file-label,
.custom-select {
transition: none; } }
.custom-controls--column-v1 {
display: flex;
justify-content: space-between;
width: 100%;
flex-wrap: nowrap;
position: relative; }
.custom-controls--column-v1 .custom-control {
padding-left: 0;
margin-right: 0; }
.custom-controls--column-v1 .custom-control .custom-control-label {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
gap: 4px;
place-items: center;
grid-auto-flow: row;
grid-template-areas: "input-symbol" "input-text"; }
.custom-controls--column-v1 .custom-control .custom-control-label::before, .custom-controls--column-v1 .custom-control .custom-control-label::after {
grid-area: input-symbol;
position: static; }
.custom-controls--column-v1 .custom-control .custom-control-label__txt {
grid-area: input-text; }
.custom-controls--column-v1::before {
content: "";
width: 100%;
height: 2px;
position: absolute;
top: calc(var(--hl-spacer-lg) / 2);
background-color: var(--hl-color-fg-light-ultra-muted); }
.custom-controls--column-v2 {
display: flex;
justify-content: space-between;
width: 100%;
flex-wrap: nowrap;
position: relative; }
.custom-controls--column-v2 .custom-control {
padding-left: 0;
margin-right: 0; }
.custom-controls--column-v2 .custom-control .custom-control-label {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
gap: 4px;
place-items: center;
grid-auto-flow: row;
grid-template-areas: "input-symbol" "input-text"; }
.custom-controls--column-v2 .custom-control .custom-control-label::before, .custom-controls--column-v2 .custom-control .custom-control-label::after {
grid-area: input-symbol;
position: static; }
.custom-controls--column-v2 .custom-control .custom-control-label__txt {
grid-area: input-text; }
.custom-controls--column-v2 .custom-control .custom-control-label__txt {
display: grid;
place-items: center; }
.custom-controls--column-v2 .custom-control .custom-control-label__txt::before {
content: "";
border: 1px solid var(--hl-color-fg-light-ultra-muted);
height: 8px; }
.indeterminate-checkbox-group {
padding-inline-start: 0; }
.indeterminate-checkbox-group ul {
margin-top: var(--hl-spacer-xs);
padding-inline-start: 0; }
.custom-input-list {
display: flex;
flex-direction: column;
gap: var(--hl-spacer-xs);
margin-top: var(--hl-spacer-xs);
padding-left: var(--hl-spacer-md); }
.custom-input-list--inline {
flex-direction: row;
gap: var(--hl-spacer-lg); }
.custom-input-list .custom-radio,
.custom-input-list .custom-checkbox {
margin-top: 0; }
.custom-input-list .custom-radio .custom-control-label,
.custom-input-list .custom-checkbox .custom-control-label {
font-weight: var(--hl-typography-font-weight-body-regular); }
ol li::marker,
ul li::marker {
color: var(--hl-color-primary); }
ol ul li::marker,
ul ul li::marker {
color: var(--hl-color-bg-light-muted); }
ol ul ul li::marker,
ul ul ul li::marker {
color: var(--hl-color-bg-dark-ultra-muted); }
ol.list-no-indented,
ul.list-no-indented {
padding-left: 0; }
ol.list-no-indented-marker,
ul.list-no-indented-marker {
padding-left: 19px; }
ol.list-bullet-type-tick li,
ul.list-bullet-type-tick li {
display: table; }
ol.list-bullet-type-tick li::marker,
ul.list-bullet-type-tick li::marker {
content: none; }
ol.list-bullet-type-tick li:before,
ul.list-bullet-type-tick li:before {
content: "";
padding-right: 20px;
width: 5px;
height: 5px;
display: table-cell;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='40'%3E%3Crect x='2' y='2' width='36' height='36' fill='white' stroke='%2308A308' stroke-width='4'/%3E%3C/mask%3E%3Cg mask='url%28%23mask0%29'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M39.9999 6.4C40.0044 5.73854 39.8108 5.09034 39.4431 4.53585C39.0753 3.98136 38.5496 3.54498 37.9313 3.28088C37.3129 3.01678 36.6291 2.93658 35.9647 3.05023C35.3003 3.16388 34.6845 3.46638 34.1939 3.92019L34.1933 3.91956L13.7931 23.4L7.07166 16.0585L7.07108 16.0593C6.41301 15.5016 5.56371 15.2097 4.6947 15.2425C3.82569 15.2753 3.00174 15.6303 2.38927 16.2358L1.00997 17.5958C0.409541 18.189 0.0520232 18.9777 0.00524728 19.8124C-0.0415287 20.647 0.225692 21.4694 0.756208 22.1236L0.755621 22.124L11.7903 35.724L11.7908 35.7236C12.1124 36.1216 12.5216 36.4431 12.9878 36.6642C13.454 36.8852 13.9651 37 14.4829 37C15.0007 37 15.5118 36.8852 15.978 36.6642C16.4441 36.4431 16.8533 36.1216 17.175 35.7236L17.1755 35.724L39.2445 8.524L39.2439 8.52359C39.7346 7.92052 40.0012 7.17155 39.9999 6.4Z' fill='black'/%3E%3C/g%3E%3C/svg%3E%0A");
mask-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='40'%3E%3Crect x='2' y='2' width='36' height='36' fill='white' stroke='%2308A308' stroke-width='4'/%3E%3C/mask%3E%3Cg mask='url%28%23mask0%29'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M39.9999 6.4C40.0044 5.73854 39.8108 5.09034 39.4431 4.53585C39.0753 3.98136 38.5496 3.54498 37.9313 3.28088C37.3129 3.01678 36.6291 2.93658 35.9647 3.05023C35.3003 3.16388 34.6845 3.46638 34.1939 3.92019L34.1933 3.91956L13.7931 23.4L7.07166 16.0585L7.07108 16.0593C6.41301 15.5016 5.56371 15.2097 4.6947 15.2425C3.82569 15.2753 3.00174 15.6303 2.38927 16.2358L1.00997 17.5958C0.409541 18.189 0.0520232 18.9777 0.00524728 19.8124C-0.0415287 20.647 0.225692 21.4694 0.756208 22.1236L0.755621 22.124L11.7903 35.724L11.7908 35.7236C12.1124 36.1216 12.5216 36.4431 12.9878 36.6642C13.454 36.8852 13.9651 37 14.4829 37C15.0007 37 15.5118 36.8852 15.978 36.6642C16.4441 36.4431 16.8533 36.1216 17.175 35.7236L17.1755 35.724L39.2445 8.524L39.2439 8.52359C39.7346 7.92052 40.0012 7.17155 39.9999 6.4Z' fill='black'/%3E%3C/g%3E%3C/svg%3E%0A");
background-color: var(--hl-color-core-black);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 15px 15px;
mask-size: 15px 15px;
-webkit-mask-position: left 4px;
mask-position: left 4px; }
.bg-dark .list-bullet-type-tick li:before {
background-color: var(--hl-color-core-white); }
.nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style-type: ""; }
.nav button.nav-link {
border: 0; }
.nav-link {
display: block;
padding: var(--hl-spacer-xs) var(--hl-spacer-md);
text-decoration: none;
vertical-align: middle;
font-weight: var(--hl-typography-font-weight-body-bold); }
.nav-link:hover, .nav-link:focus {
text-decoration: none; }
.nav-link.disabled {
color: var(--hl-color-fg-light-disabled);
pointer-events: none;
cursor: default; }
.nav-tabs {
margin-bottom: var(--hl-spacer-2xl);
border-bottom: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden; }
@media (any-hover: none) {
.nav-tabs {
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none; } }
.nav-tabs .nav-item {
position: relative;
white-space: nowrap; }
.nav-tabs .nav-item:not(:last-child) {
margin-right: var(--hl-spacer-xs); }
.nav-tabs .nav-item .nav-link {
color: var(--hl-color-fg-light-important);
background-color: transparent;
border-bottom: var(--hl-border-width-default) solid transparent;
border-top-left-radius: var(--hl-border-radius-default);
border-top-right-radius: var(--hl-border-radius-default); }
.nav-tabs .nav-item .nav-link:before {
content: "";
bottom: -1px;
display: block;
left: 0;
position: absolute;
right: 0;
width: 100%;
background-color: var(--hl-color-border-light-default); }
.nav-tabs .nav-item .nav-link:hover {
color: var(--hl-color-fg-light-default); }
.nav-tabs .nav-item .nav-link:hover:before {
height: var(--hl-spacer-2xs);
transition: height 0.3s; }
.nav-tabs .nav-item .nav-link:before {
height: 1px;
transition: height 0.3s; }
.nav-tabs .nav-item .nav-link.disabled {
color: var(--hl-color-fg-light-disabled);
border-color: transparent; }
.nav-tabs .nav-link.active:before,
.nav-tabs .nav-item.show .nav-link:before {
height: 4px;
transition: height 0.3s;
background-color: var(--hl-color-border-light-interaction-active); }
.nav-tabs .dropdown-menu {
margin-top: calc(-1 * var(--hl-border-width-default));
border-top-left-radius: 0;
border-top-right-radius: 0; }
.nav-pills {
display: inline-flex; }
.nav-pills-wrap {
position: relative; }
.nav-pills-wrap .progress {
position: absolute;
top: var(--hl-border-width-default);
right: var(--hl-border-width-default);
left: var(--hl-border-width-default); }
.nav-pills-wrap--nav-padded .nav-pills {
background-color: var(--hl-color-bg-light-muted);
border: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
border-bottom: 0;
padding: var(--hl-spacer-xl) var(--hl-spacer-md) 0; }
.nav-pills-wrap .nav-pills {
display: flex;
flex-wrap: nowrap;
overflow: auto hidden;
margin-bottom: calc(-0.8 * var(--hl-border-width-default)); }
.nav-pills-wrap .nav-pills .nav-item:not(last-child) {
margin-right: var(--hl-spacer-xs); }
.nav-pills-wrap .nav-pills .nav-link {
color: var(--hl-color-link-fg-light-standby);
border: var(--hl-border-width-default) solid transparent;
border-bottom: 0;
height: 100%;
transition: color 0.3s linear, background-color 0.3s linear, border-color 0.3s linear; }
.nav-pills-wrap .nav-pills .nav-link.active {
background-color: var(--hl-color-bg-light-default);
border-color: var(--hl-color-border-light-default) var(--hl-color-border-light-default) transparent;
position: relative; }
.nav-pills-wrap .nav-pills .nav-link.active::before {
content: "";
position: absolute;
left: calc(-0.8 * var(--hl-border-width-default));
top: calc(-0.8 * var(--hl-border-width-default));
right: calc(-0.8 * var(--hl-border-width-default));
bottom: 0;
border: inherit; }
.nav-pills-wrap .nav-pills .nav-link:hover {
color: var(--hl-color-fg-light-interaction-hover); }
.nav-pills-wrap .nav-pills .nav-link:focus {
color: var(--hl-color-fg-light-interaction-focus); }
.nav-pills-wrap .nav-pills .nav-link:active {
color: var(--hl-color-fg-light-interaction-pressed); }
.nav-pills-wrap .nav-pills .nav-link:focus-visible {
animation: focus-outline-animation var(--hl-transition-normal) forwards; }
.nav-pills-wrap .tab-content {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-default); }
.nav-pills .nav-link {
border-radius: var(--hl-border-radius-default);
background: none;
border: 0; }
.nav-pills .nav-link:hover, .nav-pills .nav-link:focus {
border-color: transparent transparent var(--hl-color-border-light-default);
background-color: var(--hl-color-bg-light-ultra-muted); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
background: var(--hl-color-bg-light-default);
border: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
border-bottom: 0;
margin-bottom: calc(-1 * var(--hl-border-width-default)); }
.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
color: unset; }
.nav-fill > .nav-link,
.nav-fill .nav-item {
flex: 1 1 auto;
text-align: center; }
.nav-justified > .nav-link,
.nav-justified .nav-item {
flex-basis: 0;
flex-grow: 1;
text-align: center; }
.tab-content > .tab-pane {
display: none; }
.tab-content > .active {
display: block; }
.content-tabs-border {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-default); }
@media (min-width: 1200px) {
.tab--xl-remove .nav-tabs,
.tab--xl-remove .nav-pills {
display: none; }
.tab--xl-remove .tab-content {
display: grid;
gap: var(--hl-spacer-md);
grid-template-columns: 1fr 1fr; }
.tab--xl-remove .tab-content > .tab-pane {
display: block;
opacity: 1; } }
@media (max-width: 991.98px) {
.nav-tabs-scrollable {
position: relative;
margin-right: calc(var(--hl-grid-spacer) * var(--hl-factor-grid-gutter-width) * -1);
margin-left: calc(var(--hl-grid-spacer) * var(--hl-factor-grid-gutter-width) * -1);
margin-bottom: var(--hl-spacer-2xl); }
.nav-tabs-scrollable .nav-tabs {
padding-right: calc(var(--hl-grid-spacer) * var(--hl-factor-grid-gutter-width));
padding-left: calc(var(--hl-grid-spacer) * var(--hl-factor-grid-gutter-width));
margin-bottom: 0;
border-bottom: 0; }
.nav-tabs-scrollable .nav-tabs:before {
content: "";
position: absolute;
background-color: var(--hl-color-border-light-default);
height: var(--hl-border-width-default);
right: calc(var(--hl-grid-spacer) * var(--hl-factor-grid-gutter-width));
left: calc(var(--hl-grid-spacer) * var(--hl-factor-grid-gutter-width));
bottom: 0; } }
.nav-tabs-scrollable--no-border .nav-tabs {
border-bottom: 0; }
.nav-tabs-scrollable--no-border .nav-tabs:before {
content: none; }
.nav-tabs-scrollable--hide-scrollbar .nav-tabs {
-ms-overflow-style: none;
scrollbar-width: none; }
.nav-tabs-scrollable--hide-scrollbar .nav-tabs::-webkit-scrollbar {
display: none; }
.navbar {
--nav-logo-height: 30px; }
@media (min-width: 768px) {
.navbar {
--nav-logo-height: 50px; } }
.navbar .container,
.navbar .container-fluid,
.navbar .container-sm,
.navbar .container-md,
.navbar .container-lg,
.navbar .container-xl,
.navbar .container-xxl {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between; }
.navbar-brand {
display: inline-flex;
align-items: center;
font-size: var(--hl-font-size-lg);
line-height: inherit;
white-space: nowrap; }
.navbar-brand:hover, .navbar-brand:focus {
text-decoration: none; }
.navbar-brand a {
display: block;
text-decoration: none; }
.navbar-brand img,
.navbar-brand svg {
max-height: var(--nav-logo-height); }
.navbar-brand__text {
color: var(--hl-color-core-white);
margin-left: var(--hl-spacing-subatom);
font-weight: var(--hl-typography-font-weight-heading-bold);
font-size: var(--hl-font-size-md); }
.navbar-nav {
display: flex;
flex-direction: column;
gap: var(--hl-spacing-atom);
padding-left: 0;
margin-bottom: 0;
list-style-type: "";
position: relative; }
.navbar-nav .nav-link {
display: flex;
align-items: center;
gap: var(--hl-spacing-subatom);
height: 100%;
padding-right: var(--hl-spacing-subatom);
padding-left: var(--hl-spacing-subatom);
position: relative; }
.navbar-nav .dropdown-menu {
position: static;
float: none; }
.navbar-text {
display: inline-block;
padding-top: var(--hl-spacer-xs);
padding-bottom: var(--hl-spacer-xs); }
.navbar-nav-scroll {
max-height: 75vh;
overflow-y: auto; }
@media (max-width: 575.98px) {
.navbar-expand-sm > .container,
.navbar-expand-sm > .container-fluid,
.navbar-expand-sm > .container-sm,
.navbar-expand-sm > .container-md,
.navbar-expand-sm > .container-lg,
.navbar-expand-sm > .container-xl,
.navbar-expand-sm > .container-xxl {
padding-right: 0;
padding-left: 0; } }
@media (min-width: 576px) {
.navbar-expand-sm {
flex-flow: row nowrap;
justify-content: flex-start; }
.navbar-expand-sm .navbar-nav {
flex-direction: row;
align-items: center; }
.navbar-expand-sm .navbar-nav .dropdown-menu {
position: absolute; }
.navbar-expand-sm .navbar-nav .nav-link::before {
content: ""; }
.navbar-expand-sm > .container,
.navbar-expand-sm > .container-fluid,
.navbar-expand-sm > .container-sm,
.navbar-expand-sm > .container-md,
.navbar-expand-sm > .container-lg,
.navbar-expand-sm > .container-xl,
.navbar-expand-sm > .container-xxl {
flex-wrap: nowrap; }
.navbar-expand-sm .navbar-nav-scroll {
overflow: visible; }
.navbar-expand-sm .navbar-collapse {
display: grid !important;
align-items: stretch; }
.navbar-expand-sm .navbar-toggler {
display: none; } }
@media (max-width: 767.98px) {
.navbar-expand-md > .container,
.navbar-expand-md > .container-fluid,
.navbar-expand-md > .container-sm,
.navbar-expand-md > .container-md,
.navbar-expand-md > .container-lg,
.navbar-expand-md > .container-xl,
.navbar-expand-md > .container-xxl {
padding-right: 0;
padding-left: 0; } }
@media (min-width: 768px) {
.navbar-expand-md {
flex-flow: row nowrap;
justify-content: flex-start; }
.navbar-expand-md .navbar-nav {
flex-direction: row;
align-items: center; }
.navbar-expand-md .navbar-nav .dropdown-menu {
position: absolute; }
.navbar-expand-md .navbar-nav .nav-link::before {
content: ""; }
.navbar-expand-md > .container,
.navbar-expand-md > .container-fluid,
.navbar-expand-md > .container-sm,
.navbar-expand-md > .container-md,
.navbar-expand-md > .container-lg,
.navbar-expand-md > .container-xl,
.navbar-expand-md > .container-xxl {
flex-wrap: nowrap; }
.navbar-expand-md .navbar-nav-scroll {
overflow: visible; }
.navbar-expand-md .navbar-collapse {
display: grid !important;
align-items: stretch; }
.navbar-expand-md .navbar-toggler {
display: none; } }
@media (max-width: 991.98px) {
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid,
.navbar-expand-lg > .container-sm,
.navbar-expand-lg > .container-md,
.navbar-expand-lg > .container-lg,
.navbar-expand-lg > .container-xl,
.navbar-expand-lg > .container-xxl {
padding-right: 0;
padding-left: 0; } }
@media (min-width: 992px) {
.navbar-expand-lg {
flex-flow: row nowrap;
justify-content: flex-start; }
.navbar-expand-lg .navbar-nav {
flex-direction: row;
align-items: center; }
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute; }
.navbar-expand-lg .navbar-nav .nav-link::before {
content: ""; }
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid,
.navbar-expand-lg > .container-sm,
.navbar-expand-lg > .container-md,
.navbar-expand-lg > .container-lg,
.navbar-expand-lg > .container-xl,
.navbar-expand-lg > .container-xxl {
flex-wrap: nowrap; }
.navbar-expand-lg .navbar-nav-scroll {
overflow: visible; }
.navbar-expand-lg .navbar-collapse {
display: grid !important;
align-items: stretch; }
.navbar-expand-lg .navbar-toggler {
display: none; } }
@media (max-width: 1199.98px) {
.navbar-expand-xl > .container,
.navbar-expand-xl > .container-fluid,
.navbar-expand-xl > .container-sm,
.navbar-expand-xl > .container-md,
.navbar-expand-xl > .container-lg,
.navbar-expand-xl > .container-xl,
.navbar-expand-xl > .container-xxl {
padding-right: 0;
padding-left: 0; } }
@media (min-width: 1200px) {
.navbar-expand-xl {
flex-flow: row nowrap;
justify-content: flex-start; }
.navbar-expand-xl .navbar-nav {
flex-direction: row;
align-items: center; }
.navbar-expand-xl .navbar-nav .dropdown-menu {
position: absolute; }
.navbar-expand-xl .navbar-nav .nav-link::before {
content: ""; }
.navbar-expand-xl > .container,
.navbar-expand-xl > .container-fluid,
.navbar-expand-xl > .container-sm,
.navbar-expand-xl > .container-md,
.navbar-expand-xl > .container-lg,
.navbar-expand-xl > .container-xl,
.navbar-expand-xl > .container-xxl {
flex-wrap: nowrap; }
.navbar-expand-xl .navbar-nav-scroll {
overflow: visible; }
.navbar-expand-xl .navbar-collapse {
display: grid !important;
align-items: stretch; }
.navbar-expand-xl .navbar-toggler {
display: none; } }
@media (max-width: 1399.98px) {
.navbar-expand-xxl > .container,
.navbar-expand-xxl > .container-fluid,
.navbar-expand-xxl > .container-sm,
.navbar-expand-xxl > .container-md,
.navbar-expand-xxl > .container-lg,
.navbar-expand-xxl > .container-xl,
.navbar-expand-xxl > .container-xxl {
padding-right: 0;
padding-left: 0; } }
@media (min-width: 1400px) {
.navbar-expand-xxl {
flex-flow: row nowrap;
justify-content: flex-start; }
.navbar-expand-xxl .navbar-nav {
flex-direction: row;
align-items: center; }
.navbar-expand-xxl .navbar-nav .dropdown-menu {
position: absolute; }
.navbar-expand-xxl .navbar-nav .nav-link::before {
content: ""; }
.navbar-expand-xxl > .container,
.navbar-expand-xxl > .container-fluid,
.navbar-expand-xxl > .container-sm,
.navbar-expand-xxl > .container-md,
.navbar-expand-xxl > .container-lg,
.navbar-expand-xxl > .container-xl,
.navbar-expand-xxl > .container-xxl {
flex-wrap: nowrap; }
.navbar-expand-xxl .navbar-nav-scroll {
overflow: visible; }
.navbar-expand-xxl .navbar-collapse {
display: grid !important;
align-items: stretch; }
.navbar-expand-xxl .navbar-toggler {
display: none; } }
@media (max-width: 1879.98px) {
.navbar-expand-xxxl > .container,
.navbar-expand-xxxl > .container-fluid,
.navbar-expand-xxxl > .container-sm,
.navbar-expand-xxxl > .container-md,
.navbar-expand-xxxl > .container-lg,
.navbar-expand-xxxl > .container-xl,
.navbar-expand-xxxl > .container-xxl {
padding-right: 0;
padding-left: 0; } }
@media (min-width: 1880px) {
.navbar-expand-xxxl {
flex-flow: row nowrap;
justify-content: flex-start; }
.navbar-expand-xxxl .navbar-nav {
flex-direction: row;
align-items: center; }
.navbar-expand-xxxl .navbar-nav .dropdown-menu {
position: absolute; }
.navbar-expand-xxxl .navbar-nav .nav-link::before {
content: ""; }
.navbar-expand-xxxl > .container,
.navbar-expand-xxxl > .container-fluid,
.navbar-expand-xxxl > .container-sm,
.navbar-expand-xxxl > .container-md,
.navbar-expand-xxxl > .container-lg,
.navbar-expand-xxxl > .container-xl,
.navbar-expand-xxxl > .container-xxl {
flex-wrap: nowrap; }
.navbar-expand-xxxl .navbar-nav-scroll {
overflow: visible; }
.navbar-expand-xxxl .navbar-collapse {
display: grid !important;
align-items: stretch; }
.navbar-expand-xxxl .navbar-toggler {
display: none; } }
.navbar-expand {
flex-flow: row nowrap;
justify-content: flex-start; }
.navbar-expand > .container,
.navbar-expand > .container-fluid,
.navbar-expand > .container-sm,
.navbar-expand > .container-md,
.navbar-expand > .container-lg,
.navbar-expand > .container-xl,
.navbar-expand > .container-xxl {
padding-right: 0;
padding-left: 0; }
.navbar-expand .navbar-nav {
flex-direction: row;
align-items: center; }
.navbar-expand .navbar-nav .dropdown-menu {
position: absolute; }
.navbar-expand .navbar-nav .nav-link::before {
content: ""; }
.navbar-expand > .container,
.navbar-expand > .container-fluid,
.navbar-expand > .container-sm,
.navbar-expand > .container-md,
.navbar-expand > .container-lg,
.navbar-expand > .container-xl,
.navbar-expand > .container-xxl {
flex-wrap: nowrap; }
.navbar-expand .navbar-nav-scroll {
overflow: visible; }
.navbar-expand .navbar-collapse {
display: grid !important;
align-items: stretch; }
.navbar-expand .navbar-toggler {
display: none; }
.navbar .dropdown {
display: grid;
align-items: stretch; }
.navbar .dropdown-toggle {
border: 0;
padding-right: var(--hl-spacing-subatom);
padding-left: var(--hl-spacing-subatom);
gap: var(--hl-spacing-subatom); }
.navbar .dropdown-menu {
top: 100%;
margin: 0;
border: 0;
border-top: var(--hl-border-width-md) solid var(--hl-color-border-light-primary);
box-shadow: var(--hl-box-shadow-soft-active); }
.menu-link {
padding: var(--hl-spacing-module) 0 calc(var(--hl-spacing-module) - var(--hl-nav-padding-y)); }
@media (min-width: 992px) {
.menu-link {
padding: 0; } }
.menu-link > li {
height: 100%; }
.menu-link .nav-link::before {
content: none;
position: absolute;
left: 0;
width: 0;
bottom: calc(-1 * var(--hl-nav-padding-y));
height: var(--hl-spacer-2xs);
background-color: var(--hl-color-fg-light-interaction-active);
transition: all var(--hl-transition-normal); }
.menu-link .nav-link--active::before {
width: 100%; }
.menu-link .nav-link:hover::before, .menu-link .nav-link:focus::before {
width: 100%;
transition: all var(--hl-transition-normal); }
.nav-link:hover, .nav-link:focus {
color: var(--hl-color-fg-dark-interaction-hover); }
.nav-link:active {
color: var(--hl-color-fg-dark-interaction-pressed); }
.nav-link--active {
color: var(--hl-color-fg-light-interaction-active); }
.nav-link--disabled {
color: var(--hl-color-fg-dark-disabled); }
.show > .nav-link,
.nav-link.show {
color: var(--hl-color-fg-dark-interaction-active); }
.navbar {
display: grid;
grid-template-columns: auto auto 1fr auto;
grid-template-rows: min-content min-content;
grid-column-gap: var(--hl-spacing-grid);
align-items: stretch;
grid-auto-flow: row;
grid-template-areas: "navbar__brand navbar__segment navbar__secondary navbar__secondary" "navbar__primary navbar__primary navbar__primary navbar__primary";
padding: var(--hl-nav-padding-y) 0;
position: relative;
z-index: var(--hl-z-index-header); }
.navbar__brand {
grid-area: navbar__brand;
align-self: center; }
.navbar__segment {
grid-area: navbar__segment;
align-self: center;
display: grid;
align-items: stretch;
height: 100%; }
.navbar__primary {
grid-area: navbar__primary; }
.navbar__secondary {
grid-area: navbar__secondary;
justify-self: flex-end;
flex-direction: row;
align-items: center; }
.navbar img,
.navbar svg {
max-height: var(--nav-logo-height);
width: auto; }
@media (min-width: 992px) {
.navbar.navbar-expand-lg {
grid-template-areas: "navbar__brand navbar__segment navbar__primary navbar__secondary";
grid-template-rows: min-content; }
.navbar__brand + .navbar__primary {
grid-column-start: 2; } }
.navbar__project {
margin-left: auto; }
.navbar__brands {
display: flex;
justify-content: flex-end; }
.navbar__languague, .navbar__user {
margin-left: auto; }
.navbar__languague + .navbar__logout, .navbar__user + .navbar__logout {
margin-left: initial; }
.navbar__logout {
display: flex;
align-items: center;
margin-left: auto; }
.navbar__user {
display: flex;
align-items: center;
margin-left: auto;
font-weight: var(--hl-typography-font-weight-body-bold); }
@media (max-width: 991.98px) {
.navbar__project, .navbar__languague, .navbar__logout, .navbar__user {
margin-left: 0; } }
[data-notification-num] {
position: relative; }
[data-notification-num]::after {
align-items: center;
background-color: var(--hl-color-bg-light-primary);
border-radius: var(--hl-border-radius-lg);
color: var(--hl-color-fg-light-important);
content: attr(data-notification-num);
display: flex;
font-size: var(--hl-font-size-xs);
font-weight: var(--hl-typography-font-weight-body-bold);
height: var(--hl-size-icon-sm);
justify-content: center;
line-height: var(--hl-size-icon-sm);
position: absolute;
right: -3px;
top: -3px;
width: var(--hl-size-icon-sm); }
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: var(--hl-color-bg-light-default);
background-clip: border-box;
border: var(--hl-border-width-sm) solid var(--hl-color-border-light-default);
border-radius: var(--hl-border-radius-default); }
.card > hr {
margin-right: 0;
margin-left: 0; }
.card > .list-group {
border-top: inherit;
border-bottom: inherit; }
.card > .list-group:first-child {
border-top-width: 0;
border-top-left-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-sm));
border-top-right-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-sm)); }
.card > .list-group:last-child {
border-bottom-width: 0;
border-bottom-right-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-sm));
border-bottom-left-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-sm)); }
.card > .card-header + .list-group,
.card > .list-group + .card-footer {
border-top: 0; }
.card > .collapse:first-child > * {
border-top-left-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default));
border-top-right-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default)); }
.card-body {
flex: 1 1 auto;
min-height: 1px;
padding: var(--hl-spacer-lg); }
.card-title {
margin-bottom: var(--hl-spacer-lg); }
.card-subtitle {
margin-top: calc(var(--hl-spacer-lg) * -0.5);
margin-bottom: 0; }
.card-text:last-child {
margin-bottom: 0; }
.card-link:hover {
text-decoration: none; }
.card-link + .card-link {
margin-left: var(--hl-spacer-lg); }
.card-header {
padding: var(--hl-spacer-lg) var(--hl-spacer-lg);
margin-bottom: 0;
border-bottom: var(--hl-border-width-sm) solid var(--hl-color-border-light-default); }
.card-header:first-child {
border-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-sm)) calc(var(--hl-border-radius-default) - var(--hl-border-width-sm)) 0 0; }
.card-footer {
padding: var(--hl-spacer-lg) var(--hl-spacer-lg);
border-top: var(--hl-border-width-sm) solid var(--hl-color-border-light-default); }
.card-footer:last-child {
border-radius: 0 0 calc(var(--hl-border-radius-default) - var(--hl-border-width-sm)) calc(var(--hl-border-radius-default) - var(--hl-border-width-sm)); }
.card-header-tabs {
margin-right: calc(var(--hl-spacer-lg) * -0.5);
margin-bottom: calc(-1 * var(--hl-spacer-lg));
margin-left: calc(var(--hl-spacer-lg) * -0.5);
border-bottom: 0; }
.card-header-pills {
margin-right: calc(var(--hl-spacer-lg) * -0.5);
margin-left: calc(var(--hl-spacer-lg) * -0.5); }
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: var(--hl-spacer-lg);
border-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-sm)); }
.card-img,
.card-img-top,
.card-img-bottom {
flex-shrink: 0;
width: 100%; }
.card-img,
.card-img-top {
border-top-left-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-sm));
border-top-right-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-sm)); }
.card-img,
.card-img-bottom {
border-bottom-right-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-sm));
border-bottom-left-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-sm)); }
.card-deck .card {
margin-bottom: calc(var(--hl-grid-spacer) * 0.5); }
@media (min-width: 576px) {
.card-deck {
display: flex;
flex-flow: row wrap;
margin-right: calc(-1 * calc(var(--hl-grid-spacer) * 0.5));
margin-left: calc(-1 * calc(var(--hl-grid-spacer) * 0.5)); }
.card-deck .card {
flex: 1 0 0%;
margin-right: calc(var(--hl-grid-spacer) * 0.5);
margin-bottom: 0;
margin-left: calc(var(--hl-grid-spacer) * 0.5); } }
.card-group > .card {
margin-bottom: calc(var(--hl-grid-spacer) * 0.5); }
@media (min-width: 576px) {
.card-group {
display: flex;
flex-flow: row wrap; }
.card-group > .card {
flex: 1 0 0%;
margin-bottom: 0; }
.card-group > .card + .card {
margin-left: 0;
border-left: 0; }
.card-group > .card:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.card-group > .card:not(:last-child) .card-img-top,
.card-group > .card:not(:last-child) .card-header {
border-top-right-radius: 0; }
.card-group > .card:not(:last-child) .card-img-bottom,
.card-group > .card:not(:last-child) .card-footer {
border-bottom-right-radius: 0; }
.card-group > .card:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.card-group > .card:not(:first-child) .card-img-top,
.card-group > .card:not(:first-child) .card-header {
border-top-left-radius: 0; }
.card-group > .card:not(:first-child) .card-img-bottom,
.card-group > .card:not(:first-child) .card-footer {
border-bottom-left-radius: 0; } }
.card-columns .card {
margin-bottom: var(--hl-spacer-lg); }
@media (min-width: 576px) {
.card-columns {
-moz-column-count: 3;
column-count: 3;
-moz-column-gap: var(--hl-spacer-lg);
column-gap: var(--hl-spacer-lg);
orphans: 1;
widows: 1; }
.card-columns .card {
display: inline-block;
width: 100%; } }
.accordion {
overflow-anchor: none; }
.accordion > .card {
overflow: hidden;
border: transparent;
margin-bottom: var(--hl-spacer-md); }
.accordion > .card .card-body {
padding: 0; }
.accordion > .card .card-header {
border: transparent;
padding-top: 0;
padding-bottom: 1rem;
padding-left: 0;
padding-right: 0; }
.accordion > .card .card-header .card-header-title .card-header-title-btn-text {
font-size: var(--hl-font-size-lg);
padding-bottom: var(--hl-spacer-sm); }
.accordion > .card .card-header .card-header-title .collapsed .card-header-title-btn-icon {
transform: rotateZ(180deg); }
.accordion > .card .card-header .card-header-title .card-header-title-btn {
border-bottom: var(--hl-border-width-sm) solid var(--hl-color-core-black);
padding: 0;
font-weight: var(--hl-typography-font-weight-body-bold);
text-decoration: none;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--hl-color-fg-light-important); }
.accordion > .card .card-header .card-header-title .card-header-title-btn .card-header-title-btn-icon {
flex-shrink: 0; }
.card--border-t-blue-light::before {
content: "";
background: var(--hl-color-supporting-blue-light);
height: var(--hl-border-width-lg); }
.breadcrumbs {
--breadcrumbs-gap: var(--hl-spacer-xs);
--breadcrumbs-icon-color: var(--breadcrumbs-color);
--breadcrumbs-icon-size: var(--hl-spacer-lg);
--breadcrumbs-color: var(--hl-color-fg-light-important); }
.breadcrumbs .breadcrumb-list {
align-items: center;
display: flex;
gap: var(--breadcrumbs-gap);
flex-wrap: wrap; }
.breadcrumbs__item__child {
--link-with-icon-icon-size: var(--hl-size-icon-md);
align-items: center;
background: none;
border: 0;
color: var(--breadcrumbs-color);
display: flex;
font-family: var(--hl-typography-font-family-body);
font-weight: var(--hl-typography-font-weight-body-bold);
gap: var(--breadcrumbs-gap);
justify-content: center;
text-decoration: none;
vertical-align: middle;
width: -moz-fit-content;
width: fit-content; }
.breadcrumbs__item__child:not(.disabled):focus-visible, .breadcrumbs__item__child:not(.disabled):has(input):focus-within {
animation: focus-outline-animation var(--hl-transition-normal) forwards; }
.breadcrumbs__item__child.disabled:focus-visible, .breadcrumbs__item__child.disabled:focus-within {
outline: 0 !important; }
.breadcrumbs__item__child hl-icon,
.breadcrumbs__item__child .hl-icon,
.breadcrumbs__item__child svg {
--hl-icon-color: var(--breadcrumbs-icon-color);
--hl-icon-size: var(--breadcrumbs-icon-size) !important; }
.breadcrumbs__item__child:hover, .breadcrumbs__item__child:focus, .breadcrumbs__item__child:active {
text-decoration: none; }
.breadcrumbs--size-xs {
--breadcrumbs-gap: var(--hl-spacer-2xs);
--breadcrumbs-icon-size: var(--hl-spacer-sm); }
.breadcrumbs--size-xs .breadcrumbs__item__child {
font-size: var(--hl-font-size-xs);
line-height: var(--hl-typography-line-height-decreased);
font-weight: var(--hl-typography-font-weight-body-bold);
letter-spacing: var(--hl-typography-letter-spacing-default); }
.breadcrumbs--size-sm {
--breadcrumbs-icon-size: var(--hl-spacer-md); }
.breadcrumbs--size-sm .breadcrumbs__item__child {
font-size: var(--hl-font-size-sm);
line-height: var(--hl-typography-line-height-decreased);
font-weight: var(--hl-typography-font-weight-body-bold);
letter-spacing: var(--hl-typography-letter-spacing-default); }
.breadcrumbs--size-md .breadcrumbs__item__child {
font-size: var(--hl-font-size-md);
line-height: var(--hl-typography-line-height-decreased);
font-weight: var(--hl-typography-font-weight-body-bold);
letter-spacing: var(--hl-typography-letter-spacing-default); }
.breadcrumbs--size-lg {
--breadcrumbs-icon-size: var(--hl-spacer-xl); }
.breadcrumbs--size-lg .breadcrumbs__item__child {
font-size: var(--hl-font-size-2xl);
line-height: var(--hl-typography-line-height-decreased);
font-weight: var(--hl-typography-font-weight-body-bold);
letter-spacing: var(--hl-typography-letter-spacing-default); }
.breadcrumbs--single-line {
--breadcrumbs-fade-width: 2rem;
--breadcrumbs-fade-color: var(--hl-color-core-white);
display: flex;
align-items: center;
gap: var(--hl-spacer-xs); }
.breadcrumbs--single-line .breadcrumb-list-wrapper {
position: relative;
min-width: 0; }
.breadcrumbs--single-line .breadcrumb-list-wrapper::before, .breadcrumbs--single-line .breadcrumb-list-wrapper::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: var(--breadcrumbs-fade-width);
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 1; }
.breadcrumbs--single-line .breadcrumb-list-wrapper::before {
left: 0;
background: linear-gradient(to right, var(--breadcrumbs-fade-color), transparent); }
.breadcrumbs--single-line .breadcrumb-list-wrapper::after {
right: 0;
background: linear-gradient(to left, var(--breadcrumbs-fade-color), transparent); }
.breadcrumbs--single-line .breadcrumb-list-wrapper.can-scroll-left::before {
opacity: 1; }
.breadcrumbs--single-line .breadcrumb-list-wrapper.can-scroll-right::after {
opacity: 1; }
.breadcrumbs--single-line .breadcrumb-list {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none; }
.breadcrumbs--single-line .breadcrumb-list::-webkit-scrollbar {
display: none; }
.breadcrumbs--single-line .breadcrumbs__item,
.breadcrumbs--single-line .breadcrumbs__item__child {
white-space: nowrap; }
.breadcrumbs__nav-btn {
flex-shrink: 0; }
.breadcrumbs__nav-btn--left .breadcrumbs__nav-icon--left {
transform: rotate(180deg); }
.breadcrumbs--floating-buttons {
position: relative; }
.breadcrumbs--floating-buttons .breadcrumb-list-wrapper {
flex: 1; }
.breadcrumbs--floating-buttons .breadcrumbs__nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.2s ease;
z-index: 2; }
.breadcrumbs--floating-buttons .breadcrumbs__nav-btn--left {
left: 0; }
.breadcrumbs--floating-buttons .breadcrumbs__nav-btn--left .breadcrumbs__nav-icon--left {
transform: rotate(180deg); }
.breadcrumbs--floating-buttons .breadcrumbs__nav-btn--right {
right: 0; }
.breadcrumbs--floating-buttons .breadcrumbs__nav-btn:focus {
opacity: 1; }
.breadcrumbs--floating-buttons:hover .breadcrumbs__nav-btn:not(:disabled), .breadcrumbs--floating-buttons:focus-within .breadcrumbs__nav-btn:not(:disabled) {
opacity: 1; }
.pagination__list {
display: flex;
flex-wrap: wrap;
margin-bottom: 0;
padding-left: 0;
list-style-type: ""; }
.pagination--secondary .pagination__list {
margin-left: calc(1 * var(--hl-border-width-default));
margin-top: calc(1 * var(--hl-border-width-default)); }
.pagination--secondary .pagination__list li {
margin-left: calc(-1 * var(--hl-border-width-default));
margin-top: calc(-1 * var(--hl-border-width-default));
position: relative;
z-index: 2; }
@media (forced-colors: active) {
.pagination .btn.active, .pagination .active.subnav__nav__item, .pagination .active.charger-btn {
color: CanvasText;
border-color: CanvasText; }
.pagination--secondary .pagination__list {
gap: var(--hl-border-width-default); } }
.badge {
display: inline-block;
padding: var(--hl-spacer-2xs) var(--hl-spacer-xs);
font-size: var(--hl-font-size-sm);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-very-decreased);
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: var(--hl-border-radius-default);
transition: all var(--hl-transition-normal); }
@media (prefers-reduced-motion: reduce) {
.badge {
transition: none; } }
a.badge {
text-decoration: none; }
a.badge:hover, a.badge:focus {
text-decoration: none; }
.badge:empty {
display: none; }
.btn .badge, .subnav__nav__item .badge, .charger-btn .badge {
position: relative;
top: -1px; }
.badge-pill {
padding-right: var(--hl-spacer-xs);
padding-left: var(--hl-spacer-xs);
border-radius: var(--hl-border-radius-full); }
.badge-primary {
color: var(--hl-color-core-black);
background-color: var(--hl-color-primary); }
a.badge-primary:hover, a.badge-primary:focus {
color: var(--hl-color-core-black);
background-color: var(--hl-color-primary); }
a.badge-primary:focus, a.badge-primary.focus {
outline: 0;
box-shadow: 0 0 0 var(--hl-spacer-2xs) rgba(var(--hl-color-primary), 0.5); }
.badge-secondary {
color: var(--hl-color-core-white);
background-color: var(--hl-color-secondary); }
a.badge-secondary:hover, a.badge-secondary:focus {
color: var(--hl-color-core-white);
background-color: var(--hl-color-secondary); }
a.badge-secondary:focus, a.badge-secondary.focus {
outline: 0;
box-shadow: 0 0 0 var(--hl-spacer-2xs) rgba(var(--hl-color-secondary), 0.5); }
.badge-success {
color: var(--hl-color-core-black);
background-color: var(--hl-color-functional-success); }
a.badge-success:hover, a.badge-success:focus {
color: var(--hl-color-core-black);
background-color: var(--hl-color-functional-success); }
a.badge-success:focus, a.badge-success.focus {
outline: 0;
box-shadow: 0 0 0 var(--hl-spacer-2xs) rgba(var(--hl-color-functional-success), 0.5); }
.badge-info {
color: var(--hl-color-core-black);
background-color: var(--hl-color-functional-info); }
a.badge-info:hover, a.badge-info:focus {
color: var(--hl-color-core-black);
background-color: var(--hl-color-functional-info); }
a.badge-info:focus, a.badge-info.focus {
outline: 0;
box-shadow: 0 0 0 var(--hl-spacer-2xs) rgba(var(--hl-color-functional-info), 0.5); }
.badge-warning {
color: var(--hl-color-core-black);
background-color: var(--hl-color-functional-warning); }
a.badge-warning:hover, a.badge-warning:focus {
color: var(--hl-color-core-black);
background-color: var(--hl-color-functional-warning); }
a.badge-warning:focus, a.badge-warning.focus {
outline: 0;
box-shadow: 0 0 0 var(--hl-spacer-2xs) rgba(var(--hl-color-functional-warning), 0.5); }
.badge-danger {
color: var(--hl-color-core-white);
background-color: var(--hl-color-functional-danger); }
a.badge-danger:hover, a.badge-danger:focus {
color: var(--hl-color-core-white);
background-color: var(--hl-color-functional-danger); }
a.badge-danger:focus, a.badge-danger.focus {
outline: 0;
box-shadow: 0 0 0 var(--hl-spacer-2xs) rgba(var(--hl-color-functional-danger), 0.5); }
.badge-black {
color: var(--hl-color-core-black);
background-color: var(--hl-color-core-black); }
a.badge-black:hover, a.badge-black:focus {
color: var(--hl-color-core-black);
background-color: var(--hl-color-core-black); }
a.badge-black:focus, a.badge-black.focus {
outline: 0;
box-shadow: 0 0 0 var(--hl-spacer-2xs) rgba(var(--hl-color-core-black), 0.5); }
.badge-white {
color: var(--hl-color-core-black);
background-color: var(--hl-color-core-white); }
a.badge-white:hover, a.badge-white:focus {
color: var(--hl-color-core-black);
background-color: var(--hl-color-core-white); }
a.badge-white:focus, a.badge-white.focus {
outline: 0;
box-shadow: 0 0 0 var(--hl-spacer-2xs) rgba(var(--hl-color-core-white), 0.5); }
.badge-obs {
color: var(--hl-color-core-black);
background-color: #595959; }
a.badge-obs:hover, a.badge-obs:focus {
color: var(--hl-color-core-black);
background-color: #595959; }
a.badge-obs:focus, a.badge-obs.focus {
outline: 0;
box-shadow: 0 0 0 var(--hl-spacer-2xs) rgba(89, 89, 89, 0.5); }
.badge-disabled {
color: var(--hl-color-core-black);
background-color: #999; }
a.badge-disabled:hover, a.badge-disabled:focus {
color: var(--hl-color-core-black);
background-color: #999; }
a.badge-disabled:focus, a.badge-disabled.focus {
outline: 0;
box-shadow: 0 0 0 var(--hl-spacer-2xs) rgba(153, 153, 153, 0.5); }
.jumbotron {
padding: var(--hl-font-size-4xl) calc(var(--hl-font-size-4xl) * 0.5);
margin-bottom: var(--hl-font-size-4xl);
background-color: #F5F5F5;
border-radius: var(--hl-border-radius-default); }
@media (min-width: 576px) {
.jumbotron {
padding: calc(var(--hl-font-size-4xl) * 2) var(--hl-font-size-4xl); } }
.jumbotron-fluid {
padding-right: 0;
padding-left: 0;
border-radius: 0; }
hl-alert:empty {
display: none; }
hl-alert:not(.hydrated) {
display: flex;
visibility: visible;
justify-content: center;
align-items: center;
min-height: 52px; }
@media (min-width: 768px) {
hl-alert:not(.hydrated) {
min-height: 68px; } }
hl-alert:not(.hydrated)[variant=light-grey] {
background-color: var(--hl-color-bg-light-muted); }
.alert {
--alert-spacing-y: var(--hl-spacer-xs);
--alert-spacing-x: var(--hl-spacer-xs);
--alert-color: transparent;
--alert-icon-color: var(--alert-color);
--alert-text-color: var(--hl-color-fg-light-important);
--alert-text-body-color: var(--hl-color-fg-light-default);
--alert-icon-close-color: var(--alert-text-color); }
.alert__main {
background-color: transparent;
border: var(--hl-border-width-md) solid var(--alert-color);
color: var(--alert-text-color);
align-items: flex-start;
display: flex;
justify-content: space-between;
font-weight: var(--hl-typography-font-weight-body-bold);
margin-bottom: 0;
padding: var(--alert-spacing-y) var(--alert-spacing-x);
position: relative;
width: 100%;
border-radius: var(--hl-border-radius-default); }
@media (min-width: 768px) {
.alert__main {
--alert-spacing-y: var(--hl-spacer-md);
--alert-spacing-x: var(--hl-spacer-md); } }
.alert__body {
flex-grow: 1;
margin-left: var(--hl-spacer-xs);
margin-right: var(--hl-spacer-xs); }
.alert__body [slot=body-text] {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
color: var(--alert-text-body-color);
font-weight: var(--hl-typography-font-weight-body-regular);
margin-bottom: 0; }
.alert__body [slot=body-text] a {
color: inherit; }
.alert__body__info:empty {
display: none; }
.alert [slot=image] img {
max-width: 50px; }
.alert [slot=button-group] {
display: flex;
flex-wrap: wrap;
gap: var(--hl-spacer-xs);
margin-top: var(--hl-spacer-xs); }
.alert__icon {
color: var(--alert-icon-color); }
.alert__icon-close .hl-icon {
--hl-icon-size: var(--hl-size-icon-sm); }
.alert__sticky-wrapper {
background-color: var(--hl-color-bg-light-default); }
.alert__sticky-wrapper .alert__main {
border: 0; }
.alert--variant-success {
--alert-color: var(--hl-color-functional-success); }
.alert--variant-info {
--alert-color: var(--hl-color-functional-info); }
.alert--variant-warning {
--alert-color: var(--hl-color-functional-warning); }
.alert--variant-error {
--alert-color: var(--hl-color-functional-danger); }
.alert--variant-light-grey {
--alert-color: var(--hl-color-bg-light-muted); }
.alert--variant-dark-grey {
--alert-color: var(--hl-color-bg-dark-muted); }
.bg-dark .alert--variant-dark-grey.bg-dark, .bg-dark .alert--variant-dark-grey {
--alert-color: var(--hl-color-bg-dark-very-muted); }
.alert--variant-white {
--alert-color: var(--hl-color-bg-light-default); }
.alert--variant-black {
--alert-color: var(--hl-color-bg-dark-default); }
.bg-dark .alert--variant-black.bg-dark, .bg-dark .alert--variant-black {
--alert-color: var(--hl-color-bg-dark-ultra-muted); }
.alert--has-icon {
--alert-spacing-y: var(--hl-spacer-xs);
--alert-spacing-x: var(--hl-spacer-xs); }
@media (min-width: 768px) {
.alert--has-icon {
--alert-spacing-y: var(--hl-spacer-md);
--alert-spacing-x: var(--hl-spacer-md); } }
.alert--is-filled {
--alert-icon-color: var(--alert-text-color);
background-color: var(--alert-color); }
.alert--direction-row .alert__body {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: var(--hl-spacer-md);
justify-content: space-between; }
@media (min-width: 768px) {
.alert--direction-row .alert__body {
flex-direction: row; } }
.alert--direction-row .alert__body [slot=button-group] {
margin-top: 0; }
.alert--is-centered .alert__body {
align-items: center;
display: flex;
gap: var(--hl-spacer-md);
justify-content: center; }
.alert--is-centered.alert--direction-row .alert__body {
flex-direction: column; }
.alert--is-centered [slot=button-group] {
margin-top: 0; }
.alert--sticky-position-top, .alert--sticky-position-bottom {
border-bottom: var(--hl-border-width-md) solid var(--alert-color);
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: var(--hl-z-index-overlay); }
.alert--sticky-position-top .alert__main {
padding-top: calc(var(--alert-spacing-y) + var(--hl-spacer-xs)); }
.alert--sticky-position-bottom {
border-top: var(--hl-border-width-md) solid var(--alert-color);
border-bottom: 0;
top: auto;
bottom: 0; }
.alert--sticky-position-bottom .alert__main {
padding-bottom: calc(var(--alert-spacing-y) + var(--hl-spacer-xs)); }
@keyframes progress-bar-stripes {
from {
background-position: 1rem 0; }
to {
background-position: 0 0; } }
.progress {
display: flex;
height: 1rem;
overflow: hidden;
line-height: 0;
font-size: var(--hl-font-size-sm);
background-color: #F5F5F5;
border-radius: var(--hl-border-radius-default); }
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
color: var(--hl-color-core-white);
text-align: center;
white-space: nowrap;
background-color: var(--hl-color-primary);
transition: width 0.6s ease; }
@media (prefers-reduced-motion: reduce) {
.progress-bar {
transition: none; } }
.progress-bar-striped {
background-image: linear-gradient(45deg, rgba(var(--hl-color-core-white), 0.15) 25%, transparent 25%, transparent 50%, rgba(var(--hl-color-core-white), 0.15) 50%, rgba(var(--hl-color-core-white), 0.15) 75%, transparent 75%, transparent);
background-size: 1rem 1rem; }
.progress-bar-striped--custom {
background-image: linear-gradient(-45deg, var(--hl-color-core-black) 25%, transparent 25%, transparent 50%, var(--hl-color-core-black) 50%, var(--hl-color-core-black) 75%, transparent 75%, transparent);
background-size: var(--hl-spacer-4xl) var(--hl-spacer-4xl); }
.progress-bar-animated {
animation: 1s linear infinite progress-bar-stripes; }
@media (prefers-reduced-motion: reduce) {
.progress-bar-animated {
animation: none; } }
.media {
display: flex;
align-items: flex-start; }
.media-body {
flex: 1; }
.list-group {
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
border-radius: var(--hl-border-radius-default); }
.list-group-item-action {
width: 100%;
color: var(--hl-color-fg-light-default);
text-align: inherit; }
.list-group-item-action:hover, .list-group-item-action:focus {
z-index: 1;
color: var(--hl-color-fg-light-interaction-hover);
text-decoration: none;
background-color: var(--hl-color-bg-light-ultra-muted); }
.list-group-item-action:active {
color: var(--hl-color-fg-light-interaction-pressed);
background-color: var(--hl-color-bg-light-ultra-muted); }
.list-group-item {
position: relative;
display: block;
padding: var(--hl-spacer-sm) var(--hl-spacer-md);
text-decoration: none;
background-color: var(--hl-color-bg-light-default);
border: var(--hl-border-width-default) solid var(--hl-color-border-light-default); }
.list-group-item:first-child {
border-top-left-radius: inherit;
border-top-right-radius: inherit; }
.list-group-item:last-child {
border-bottom-right-radius: inherit;
border-bottom-left-radius: inherit; }
.list-group-item.disabled, .list-group-item:disabled {
color: var(--hl-color-fg-light-disabled);
pointer-events: none;
background-color: var(--hl-color-bg-light-disabled); }
.list-group-item.active {
z-index: 2;
color: var(--hl-color-form-interaction-fg-light-active);
background-color: var(--hl-color-form-interaction-bg-light-active);
border-color: var(--hl-color-form-interaction-bg-light-active); }
.list-group-item + .list-group-item {
border-top-width: 0; }
.list-group-item + .list-group-item.active {
margin-top: calc(-1 * var(--hl-border-width-default));
border-top-width: var(--hl-border-width-default); }
.list-group-horizontal {
flex-direction: row; }
.list-group-horizontal > .list-group-item:first-child {
border-bottom-left-radius: var(--hl-border-radius-default);
border-top-right-radius: 0; }
.list-group-horizontal > .list-group-item:last-child {
border-top-right-radius: var(--hl-border-radius-default);
border-bottom-left-radius: 0; }
.list-group-horizontal > .list-group-item.active {
margin-top: 0; }
.list-group-horizontal > .list-group-item + .list-group-item {
border-top-width: var(--hl-border-width-default);
border-left-width: 0; }
.list-group-horizontal > .list-group-item + .list-group-item.active {
margin-left: calc(-1 * var(--hl-border-width-default));
border-left-width: var(--hl-border-width-default); }
@media (min-width: 576px) {
.list-group-horizontal-sm {
flex-direction: row; }
.list-group-horizontal-sm > .list-group-item:first-child {
border-bottom-left-radius: var(--hl-border-radius-default);
border-top-right-radius: 0; }
.list-group-horizontal-sm > .list-group-item:last-child {
border-top-right-radius: var(--hl-border-radius-default);
border-bottom-left-radius: 0; }
.list-group-horizontal-sm > .list-group-item.active {
margin-top: 0; }
.list-group-horizontal-sm > .list-group-item + .list-group-item {
border-top-width: var(--hl-border-width-default);
border-left-width: 0; }
.list-group-horizontal-sm > .list-group-item + .list-group-item.active {
margin-left: calc(-1 * var(--hl-border-width-default));
border-left-width: var(--hl-border-width-default); } }
@media (min-width: 768px) {
.list-group-horizontal-md {
flex-direction: row; }
.list-group-horizontal-md > .list-group-item:first-child {
border-bottom-left-radius: var(--hl-border-radius-default);
border-top-right-radius: 0; }
.list-group-horizontal-md > .list-group-item:last-child {
border-top-right-radius: var(--hl-border-radius-default);
border-bottom-left-radius: 0; }
.list-group-horizontal-md > .list-group-item.active {
margin-top: 0; }
.list-group-horizontal-md > .list-group-item + .list-group-item {
border-top-width: var(--hl-border-width-default);
border-left-width: 0; }
.list-group-horizontal-md > .list-group-item + .list-group-item.active {
margin-left: calc(-1 * var(--hl-border-width-default));
border-left-width: var(--hl-border-width-default); } }
@media (min-width: 992px) {
.list-group-horizontal-lg {
flex-direction: row; }
.list-group-horizontal-lg > .list-group-item:first-child {
border-bottom-left-radius: var(--hl-border-radius-default);
border-top-right-radius: 0; }
.list-group-horizontal-lg > .list-group-item:last-child {
border-top-right-radius: var(--hl-border-radius-default);
border-bottom-left-radius: 0; }
.list-group-horizontal-lg > .list-group-item.active {
margin-top: 0; }
.list-group-horizontal-lg > .list-group-item + .list-group-item {
border-top-width: var(--hl-border-width-default);
border-left-width: 0; }
.list-group-horizontal-lg > .list-group-item + .list-group-item.active {
margin-left: calc(-1 * var(--hl-border-width-default));
border-left-width: var(--hl-border-width-default); } }
@media (min-width: 1200px) {
.list-group-horizontal-xl {
flex-direction: row; }
.list-group-horizontal-xl > .list-group-item:first-child {
border-bottom-left-radius: var(--hl-border-radius-default);
border-top-right-radius: 0; }
.list-group-horizontal-xl > .list-group-item:last-child {
border-top-right-radius: var(--hl-border-radius-default);
border-bottom-left-radius: 0; }
.list-group-horizontal-xl > .list-group-item.active {
margin-top: 0; }
.list-group-horizontal-xl > .list-group-item + .list-group-item {
border-top-width: var(--hl-border-width-default);
border-left-width: 0; }
.list-group-horizontal-xl > .list-group-item + .list-group-item.active {
margin-left: calc(-1 * var(--hl-border-width-default));
border-left-width: var(--hl-border-width-default); } }
@media (min-width: 1400px) {
.list-group-horizontal-xxl {
flex-direction: row; }
.list-group-horizontal-xxl > .list-group-item:first-child {
border-bottom-left-radius: var(--hl-border-radius-default);
border-top-right-radius: 0; }
.list-group-horizontal-xxl > .list-group-item:last-child {
border-top-right-radius: var(--hl-border-radius-default);
border-bottom-left-radius: 0; }
.list-group-horizontal-xxl > .list-group-item.active {
margin-top: 0; }
.list-group-horizontal-xxl > .list-group-item + .list-group-item {
border-top-width: var(--hl-border-width-default);
border-left-width: 0; }
.list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
margin-left: calc(-1 * var(--hl-border-width-default));
border-left-width: var(--hl-border-width-default); } }
@media (min-width: 1880px) {
.list-group-horizontal-xxxl {
flex-direction: row; }
.list-group-horizontal-xxxl > .list-group-item:first-child {
border-bottom-left-radius: var(--hl-border-radius-default);
border-top-right-radius: 0; }
.list-group-horizontal-xxxl > .list-group-item:last-child {
border-top-right-radius: var(--hl-border-radius-default);
border-bottom-left-radius: 0; }
.list-group-horizontal-xxxl > .list-group-item.active {
margin-top: 0; }
.list-group-horizontal-xxxl > .list-group-item + .list-group-item {
border-top-width: var(--hl-border-width-default);
border-left-width: 0; }
.list-group-horizontal-xxxl > .list-group-item + .list-group-item.active {
margin-left: calc(-1 * var(--hl-border-width-default));
border-left-width: var(--hl-border-width-default); } }
.list-group-flush {
border-radius: 0; }
.list-group-flush > .list-group-item {
border-width: 0 0 var(--hl-border-width-default); }
.list-group-flush > .list-group-item:last-child {
border-bottom-width: 0; }
.close {
float: right;
width: var(--hl-size-icon-md);
height: var(--hl-size-icon-md);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-very-decreased);
color: transparent;
opacity: 0.5;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath fill='var%28--hl-color-core-black%29' d='M3.12 18.556 18.678 3 20.8 5.12 5.242 20.677z'/%3e%3cpath fill='var%28--hl-color-core-black%29' d='m5.121 3 15.556 15.556-2.12 2.122L3 5.12z'/%3e%3c/svg%3e") no-repeat center;
background-size: 100%; }
.close:hover {
text-decoration: none; }
.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
opacity: 0.75; }
button.close {
padding: 0;
background-color: transparent;
border: 0; }
a.close.disabled {
pointer-events: none; }
.hl-toast {
flex-basis: 360px;
max-width: 360px;
box-shadow: 0 var(--hl-spacer-3xs) var(--hl-spacer-2xs) rgba(0, 0, 0, 0.13);
border-radius: var(--hl-border-radius-default);
opacity: 1;
position: relative;
z-index: var(--hl-z-index-toast); }
.hl-toast .alert__main {
--alert-spacing-y: var(--hl-spacer-xs) !important;
--alert-spacing-x: var(--hl-spacer-xs) !important; }
.hl-toast .alert__body__info {
font-size: var(--hl-typography-p3-font-size) !important; }
.hl-toast .alert__body [slot=body-text] {
font-size: var(--hl-typography-p4-font-size) !important; }
.hl-toast.showing {
opacity: 1; }
.hl-toast.show {
display: block;
opacity: 1; }
.hl-toast.hide {
display: none; }
.hl-toast-container {
--hl-toast-container-offset: var(--hl-spacer-md);
display: flex;
flex-direction: column;
position: fixed;
right: var(--hl-toast-container-offset);
z-index: var(--hl-z-index-toast); }
.hl-toast-container > *:not(:last-child) .hl-toast {
margin-bottom: var(--hl-spacer-md); }
@media (min-width: 768px) {
.hl-toast-container {
--hl-toast-container-offset: var(--hl-spacer-lg); } }
.hl-toast-container--position-top {
top: var(--hl-toast-container-offset); }
.hl-toast-container--position-bottom {
bottom: var(--hl-toast-container-offset); }
:root {
--modal-padding: var(--hl-spacer-md); }
@media (min-width: 576px) {
:root {
--modal-padding: var(--hl-spacer-xl); } }
.modal-open {
overflow: hidden !important; }
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto; }
.modal {
color: var(--hl-color-fg-light-default);
position: fixed;
top: 0;
left: 0;
z-index: var(--hl-z-index-modal);
display: none;
width: 100%;
height: 100%;
overflow: hidden;
outline: 0; }
.modal--drawer .modal-header {
border-bottom: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-standby);
padding: var(--hl-spacer-md) var(--hl-spacer-lg); }
.modal--drawer .modal-body {
padding: var(--hl-spacer-xl) var(--hl-spacer-lg); }
.modal--drawer .modal-footer {
border-top: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-standby);
padding: var(--hl-spacer-md) var(--hl-spacer-lg); }
.modal--drawer .modal-footer:empty {
display: none; }
.modal--drawer .modal-dialog {
margin: 0;
position: absolute;
max-width: unset;
width: 100%;
height: 100%;
right: -100%;
transform: translate(50px, 0);
transition: right var(--hl-transition-slowly); }
@media (min-width: 1200px) {
.modal--drawer .modal-dialog {
width: 95%;
max-width: 84rem; } }
.modal--drawer .modal-content {
height: 100%; }
@media (min-width: 1200px) {
.modal--drawer .modal-header {
padding-left: var(--hl-spacer-5xl); } }
.modal--drawer .modal-body {
overflow-y: auto; }
@media (min-width: 1200px) {
.modal--drawer .modal-body {
padding-left: var(--hl-spacer-5xl);
padding-right: var(--hl-spacer-5xl); } }
@media (min-width: 1200px) {
.modal--drawer .modal-footer {
padding-left: var(--hl-spacer-5xl);
padding-right: var(--hl-spacer-5xl); } }
.modal--drawer.show .modal-dialog {
transition: right var(--hl-transition-slowly);
right: 0; }
.modal--full-width .modal-header {
padding-left: var(--hl-spacer-lg); }
@media (min-width: 992px) {
.modal--full-width .modal-header {
padding-left: var(--hl-spacer-3xl); } }
.modal--full-width .modal-body {
padding-left: 0;
padding-right: 0; }
.modal--contains-swiper .modal-body {
align-items: center;
display: flex; }
.modal--contains-swiper .modal-body .swiper-module {
width: 100%; }
.modal--contains-swiper .swiper-slide__img {
max-height: calc(100vh - 200px); }
.modal-cart .modal-dialog-scrollable .modal-content {
min-height: 450px; }
@media (min-width: 768px) {
.modal-cart .modal-dialog-scrollable .modal-content {
max-height: 450px; } }
.modal-dialog {
position: relative;
width: auto;
margin: var(--hl-spacer-xs);
pointer-events: none; }
.modal.fade .modal-dialog {
transition: transform 0.3s ease-out;
transform: translate(0, -50px); }
@media (prefers-reduced-motion: reduce) {
.modal.fade .modal-dialog {
transition: none; } }
.modal.show .modal-dialog {
transform: none; }
.modal.modal-static .modal-dialog {
transform: scale(1.02); }
.modal-dialog-scrollable {
display: flex;
max-height: calc(100% - var(--hl-spacer-xs) * 2); }
.modal-dialog-scrollable .modal-content {
max-height: calc(100vh - var(--hl-spacer-xs) * 2);
overflow: hidden; }
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
flex-shrink: 0; }
.modal-dialog-scrollable .modal-body {
overflow-y: auto; }
.modal-dialog-scrollable .modal-footer:empty {
display: none; }
.modal-dialog-centered {
display: flex;
align-items: center;
min-height: calc(100vh - var(--hl-spacer-xs) * 2);
min-height: calc(100svh - var(--hl-spacer-xs) * 2); }
.modal-dialog-centered::before {
display: block;
height: calc(100vh - var(--hl-spacer-xs) * 2);
height: -moz-min-content;
height: min-content;
content: ""; }
.modal-dialog-centered.modal-dialog-scrollable {
flex-direction: column;
justify-content: center;
height: 100%; }
.modal-dialog-centered.modal-dialog-scrollable .modal-content {
max-height: none; }
.modal-dialog-centered.modal-dialog-scrollable::before {
content: none; }
.modal-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: var(--hl-color-bg-light-default);
background-clip: padding-box;
border: var(--hl-border-width-none) solid var(--hl-color-border-light-default);
border-radius: var(--hl-border-radius-default);
box-shadow: 0 var(--hl-spacer-md) var(--hl-spacer-3xl) rgba(0, 0, 0, 0.13);
outline: 0; }
.bg-dark .modal-content {
background-color: var(--hl-color-bg-light-very-muted); }
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: var(--hl-z-index-overlay);
width: 100vw;
height: 100vh;
background-color: var(--hl-color-core-black); }
.modal-backdrop.fade {
opacity: 0; }
.modal-backdrop.show {
opacity: 0.5; }
.modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: var(--modal-padding) var(--modal-padding) calc(0.5 * var(--modal-padding));
-moz-column-gap: var(--hl-spacer-md);
column-gap: var(--hl-spacer-md);
border-bottom: var(--hl-border-width-none) solid var(--hl-color-border-light-default);
border-top-left-radius: calc(var(--hl-border-radius-default) - (var(--hl-border-width-none)));
border-top-right-radius: calc(var(--hl-border-radius-default) - (var(--hl-border-width-none))); }
.modal-header--no-content {
padding-bottom: 0; }
.modal-header .close {
margin-left: var(--hl-spacer-xl); }
.modal-header-title {
align-self: center; }
.modal-title {
margin-bottom: 0;
margin-top: 0;
line-height: var(--hl-typography-line-height-default); }
.modal-body {
position: relative;
flex: 1 1 auto;
padding: calc(0.5 * var(--modal-padding)) var(--modal-padding); }
.modal-body__my-address ul {
list-style-type: "";
padding: 0;
margin: 0; }
.modal-body__my-address .item-result {
padding: var(--hl-spacer-sm);
margin-bottom: var(--hl-spacer-md);
border: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
display: flex;
justify-content: space-between;
align-items: flex-end;
cursor: pointer; }
.modal-body__my-address .item-result .hl-icon {
color: var(--hl-color-fg-light-primary);
margin-left: var(--hl-spacer-sm); }
.modal-body__my-address .item-result .hl-icon path {
fill: currentColor; }
.modal-body__my-address .item-result:hover, .modal-body__my-address .item-result:focus {
border-color: var(--hl-color-border-light-interaction-hover);
color: var(--hl-color-fg-light-interaction-hover); }
.modal-body__my-address .item-result:hover .hl-icon, .modal-body__my-address .item-result:focus .hl-icon {
color: currentColor; }
.modal-body__my-address .item-result:active, .modal-body__my-address .item-result.active {
border-color: var(--hl-color-border-light-interaction-pressed);
color: var(--hl-color-fg-light-interaction-pressed); }
.modal-body__my-address .item-result:active .hl-icon, .modal-body__my-address .item-result.active .hl-icon {
color: currentColor; }
.modal-body__my-address .item-result.active {
color: var(--hl-color-fg-light-interaction-active); }
.modal-body__my-address--mask-chevron .item-result::after {
color: var(--hl-color-fg-light-primary);
margin-left: var(--hl-spacer-sm);
content: "";
height: var(--hl-size-icon-md);
width: var(--hl-size-icon-md);
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 19L15 14L17 12L15 10L10 5L8 7L13 12L8 17L10 19Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain; }
.modal-body__my-address--mask-chevron .item-result:hover::after, .modal-body__my-address--mask-chevron .item-result:focus::after, .modal-body__my-address--mask-chevron .item-result:active::after, .modal-body__my-address--mask-chevron .item-result.active::after {
color: currentColor; }
.modal-body__my-address--border-bottom .item-result {
padding: var(--hl-spacer-sm) 0;
margin-bottom: 0;
border: none;
border-top: var(--hl-border-width-default) solid var(--hl-color-border-light-default); }
.modal-body__my-address--border-bottom .item-result:last-child {
border-bottom: var(--hl-border-width-default) solid var(--hl-color-border-light-default); }
.modal-body__my-address--border-bottom .item-result:hover, .modal-body__my-address--border-bottom .item-result:focus {
border-color: var(--hl-color-border-light-interaction-hover); }
.modal-body__my-address--border-bottom .item-result:hover + .item-result, .modal-body__my-address--border-bottom .item-result:hover + .item-result, .modal-body__my-address--border-bottom .item-result:focus + .item-result, .modal-body__my-address--border-bottom .item-result:focus + .item-result {
border-top-color: var(--hl-color-border-light-interaction-hover); }
.modal-body__my-address--border-bottom .item-result:active, .modal-body__my-address--border-bottom .item-result.active {
border-color: var(--hl-color-border-light-interaction-pressed); }
.modal-body__my-address--border-bottom .item-result:active + .item-result, .modal-body__my-address--border-bottom .item-result:active + .item-result, .modal-body__my-address--border-bottom .item-result.active + .item-result, .modal-body__my-address--border-bottom .item-result.active + .item-result {
border-top-color: var(--hl-color-border-light-interaction-pressed); }
.modal-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
padding: calc(0.5 * var(--modal-padding)) var(--modal-padding) var(--modal-padding);
border-top: var(--hl-border-width-none) solid var(--hl-color-border-light-default);
border-bottom-right-radius: calc(var(--hl-border-radius-default) - (var(--hl-border-width-none)));
border-bottom-left-radius: calc(var(--hl-border-radius-default) - (var(--hl-border-width-none))); }
.modal-footer:empty {
padding-bottom: 0; }
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll; }
.modal-sm {
--modal-padding: var(--hl-spacer-md); }
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: var(--hl-spacer-xl) auto; }
.modal-dialog-scrollable {
max-height: calc(100% - var(--hl-spacer-xl) * 2); }
.modal-dialog-scrollable .modal-content {
max-height: calc(100vh - var(--hl-spacer-xl) * 2); }
.modal-dialog-centered {
min-height: calc(100% - var(--hl-spacer-xl) * 2); }
.modal-dialog-centered::before {
height: calc(100vh - var(--hl-spacer-xl) * 2);
height: -moz-min-content;
height: min-content; }
.modal-sm {
max-width: 300px; } }
@media (min-width: 992px) {
.modal-lg,
.modal-xl {
max-width: 800px; } }
@media (min-width: 1200px) {
.modal-xl {
max-width: 1140px; } }
.modal-xxl {
max-width: 95vw; }
.modal-xxl .modal-content {
height: 100vh; }
.nested-modal .modal {
z-index: calc(var(--hl-z-index-modal) + 2); }
.modal-backdrop.show + .modal-backdrop {
z-index: calc(var(--hl-z-index-modal) + 1); }
.modal-bordered .modal-footer {
position: relative; }
.modal-bordered .modal-footer:before {
content: "";
position: absolute;
top: 0;
left: var(--modal-padding);
right: var(--modal-padding);
border-top: var(--hl-border-width-xs) solid var(--hl-color-fg-light-very-muted); }
.tooltip {
--tooltip-max-width: 160px;
--tooltip-color: var(--hl-color-fg-light-important);
--tooltip-bg: var(--hl-color-bg-light-ultra-muted);
--tooltip-arrow-color: var(--hl-color-bg-light-ultra-muted);
--tooltip-arrow-display: block;
position: absolute;
z-index: var(--hl-z-index-mars);
display: block;
margin: 0;
font-family: var(--hl-typography-font-family-body);
font-style: normal;
font-weight: var(--hl-typography-font-weight-body-regular);
line-height: var(--hl-typography-line-height-very-increased);
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
white-space: normal;
word-spacing: normal;
line-break: auto;
font-size: var(--hl-font-size-xs);
word-wrap: break-word;
opacity: 0; }
.tooltip--bg-dark {
--tooltip-color: var(--hl-color-fg-dark-important);
--tooltip-bg: var(--hl-color-bg-dark-ultra-muted);
--tooltip-arrow-color: var(--hl-color-bg-dark-ultra-muted); }
.tooltip--no-arrow {
--tooltip-arrow-display: none; }
.tooltip.show {
opacity: 1; }
.tooltip .arrow {
position: absolute;
display: var(--tooltip-arrow-display);
width: var(--hl-spacer-xs);
height: var(--hl-spacer-2xs); }
.tooltip .arrow::before {
position: absolute;
content: "";
border-color: transparent;
border-style: solid; }
.bs-tooltip-top, .bs-tooltip-auto[x-placement^=top] {
--tooltip-max-width: 200px;
padding: var(--hl-spacer-2xs) 0; }
.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^=top] .arrow {
bottom: 0; }
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^=top] .arrow::before {
top: 0;
border-width: var(--hl-spacer-2xs) calc(var(--hl-spacer-xs) * 0.5) 0;
border-top-color: var(--tooltip-arrow-color); }
.bs-tooltip-right, .bs-tooltip-auto[x-placement^=right] {
padding: 0 var(--hl-spacer-2xs); }
.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^=right] .arrow {
left: 0;
width: var(--hl-spacer-2xs);
height: var(--hl-spacer-xs); }
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^=right] .arrow::before {
right: 0;
border-width: calc(var(--hl-spacer-xs) * 0.5) var(--hl-spacer-2xs) calc(var(--hl-spacer-xs) * 0.5) 0;
border-right-color: var(--tooltip-arrow-color); }
.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^=bottom] {
--tooltip-max-width: 200px;
padding: var(--hl-spacer-2xs) 0; }
.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^=bottom] .arrow {
top: 0; }
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^=bottom] .arrow::before {
bottom: 0;
border-width: 0 calc(var(--hl-spacer-xs) * 0.5) var(--hl-spacer-2xs);
border-bottom-color: var(--tooltip-arrow-color); }
.bs-tooltip-left, .bs-tooltip-auto[x-placement^=left] {
padding: 0 var(--hl-spacer-2xs); }
.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^=left] .arrow {
right: 0;
width: var(--hl-spacer-2xs);
height: var(--hl-spacer-xs); }
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^=left] .arrow::before {
left: 0;
border-width: calc(var(--hl-spacer-xs) * 0.5) 0 calc(var(--hl-spacer-xs) * 0.5) var(--hl-spacer-2xs);
border-left-color: var(--tooltip-arrow-color); }
.tooltip-inner {
max-width: var(--tooltip-max-width);
padding: var(--hl-spacer-2xs) var(--hl-spacer-xs);
color: var(--tooltip-color);
text-align: left;
background-color: var(--tooltip-bg);
border-radius: var(--hl-border-radius-sm); }
.popover {
position: absolute;
top: 0;
left: 0;
z-index: var(--hl-z-index-popup);
display: block;
max-width: 276px;
font-family: var(--hl-typography-font-family-body);
font-style: normal;
font-weight: var(--hl-typography-font-weight-body-regular);
line-height: var(--hl-typography-line-height-very-increased);
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
white-space: normal;
word-spacing: normal;
line-break: auto;
font-size: var(--hl-font-size-sm);
word-wrap: break-word;
background-color: var(--hl-color-bg-light-default);
background-clip: padding-box;
border: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
border-radius: var(--hl-border-radius-default); }
.popover .arrow {
position: absolute;
display: block;
width: var(--hl-spacer-md);
height: var(--hl-spacer-xs);
margin: 0 var(--hl-border-radius-default); }
.popover .arrow::before, .popover .arrow::after {
position: absolute;
display: block;
content: "";
border-color: transparent;
border-style: solid; }
.bs-popover-top, .bs-popover-auto[x-placement^=top] {
margin-bottom: var(--hl-spacer-xs); }
.bs-popover-top > .arrow, .bs-popover-auto[x-placement^=top] > .arrow {
bottom: calc(-1 * var(--hl-spacer-xs) - var(--hl-border-width-default)); }
.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^=top] > .arrow::before {
bottom: 0;
border-width: var(--hl-spacer-xs) calc(var(--hl-spacer-md) * 0.5) 0;
border-top-color: var(--hl-color-border-light-default); }
.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^=top] > .arrow::after {
bottom: var(--hl-border-width-default);
border-width: var(--hl-spacer-xs) calc(var(--hl-spacer-md) * 0.5) 0;
border-top-color: var(--hl-color-bg-light-default); }
.bs-popover-right, .bs-popover-auto[x-placement^=right] {
margin-left: var(--hl-spacer-xs); }
.bs-popover-right > .arrow, .bs-popover-auto[x-placement^=right] > .arrow {
left: calc(-1 * var(--hl-spacer-xs) - var(--hl-border-width-default));
width: var(--hl-spacer-xs);
height: var(--hl-spacer-md);
margin: var(--hl-border-radius-default) 0; }
.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^=right] > .arrow::before {
left: 0;
border-width: calc(var(--hl-spacer-md) * 0.5) var(--hl-spacer-xs) calc(var(--hl-spacer-md) * 0.5) 0;
border-right-color: var(--hl-color-border-light-default); }
.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^=right] > .arrow::after {
left: var(--hl-border-width-default);
border-width: calc(var(--hl-spacer-md) * 0.5) var(--hl-spacer-xs) calc(var(--hl-spacer-md) * 0.5) 0;
border-right-color: var(--hl-color-bg-light-default); }
.bs-popover-bottom, .bs-popover-auto[x-placement^=bottom] {
margin-top: var(--hl-spacer-xs); }
.bs-popover-bottom > .arrow, .bs-popover-auto[x-placement^=bottom] > .arrow {
top: calc(-1 * var(--hl-spacer-xs) - var(--hl-border-width-default)); }
.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^=bottom] > .arrow::before {
top: 0;
border-width: 0 calc(var(--hl-spacer-md) * 0.5) var(--hl-spacer-xs) calc(var(--hl-spacer-md) * 0.5);
border-bottom-color: var(--hl-color-border-light-default); }
.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^=bottom] > .arrow::after {
top: var(--hl-border-width-default);
border-width: 0 calc(var(--hl-spacer-md) * 0.5) var(--hl-spacer-xs) calc(var(--hl-spacer-md) * 0.5);
border-bottom-color: var(--hl-color-bg-light-very-muted); }
.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^=bottom] .popover-header::before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: var(--hl-spacer-md);
margin-left: calc(var(--hl-spacer-md) * -0.5);
content: "";
border-bottom: var(--hl-border-width-default) solid var(--hl-color-bg-light-very-muted); }
.bs-popover-left, .bs-popover-auto[x-placement^=left] {
margin-right: var(--hl-spacer-xs); }
.bs-popover-left > .arrow, .bs-popover-auto[x-placement^=left] > .arrow {
right: calc(-1 * var(--hl-spacer-xs) - var(--hl-border-width-default));
width: var(--hl-spacer-xs);
height: var(--hl-spacer-md);
margin: var(--hl-border-radius-default) 0; }
.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^=left] > .arrow::before {
right: 0;
border-width: calc(var(--hl-spacer-md) * 0.5) 0 calc(var(--hl-spacer-md) * 0.5) var(--hl-spacer-xs);
border-left-color: var(--hl-color-border-light-default); }
.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^=left] > .arrow::after {
right: var(--hl-border-width-default);
border-width: calc(var(--hl-spacer-md) * 0.5) 0 calc(var(--hl-spacer-md) * 0.5) var(--hl-spacer-xs);
border-left-color: var(--hl-color-bg-light-default); }
.popover-header {
padding: var(--hl-spacer-xs) var(--hl-spacer-sm);
margin-top: 0;
margin-bottom: 0;
font-size: var(--hl-font-size-md);
color: var(--hl-color-fg-light-important);
background-color: var(--hl-color-bg-light-very-muted);
border-bottom: var(--hl-border-width-default) solid var(--hl-color-bg-light-very-muted);
border-top-left-radius: calc(var(--hl-border-radius-default) - (var(--hl-border-width-default)));
border-top-right-radius: calc(var(--hl-border-radius-default) - (var(--hl-border-width-default))); }
.popover-header:empty {
display: none; }
.popover-body {
padding: var(--hl-spacer-xs) var(--hl-spacer-sm);
color: var(--hl-color-fg-light-default); }
.carousel {
position: relative; }
.carousel.pointer-event {
touch-action: pan-y; }
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden; }
.carousel-inner::after {
display: block;
clear: both;
content: ""; }
.carousel-item {
position: relative;
display: none;
float: left;
width: 100%;
margin-right: -100%;
backface-visibility: hidden;
transition: transform 0.6s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
.carousel-item {
transition: none; } }
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: block; }
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
transform: translateX(100%); }
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
transform: translateX(-100%); }
.carousel-fade .carousel-item {
opacity: 0;
transition-property: opacity;
transform: none; }
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
z-index: 1;
opacity: 1; }
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
z-index: 0;
opacity: 0;
transition: opacity 0s 0.6s; }
@media (prefers-reduced-motion: reduce) {
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
transition: none; } }
.carousel-control-prev,
.carousel-control-next {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: auto;
padding: 0;
color: var(--hl-color-core-white);
text-align: center;
background: none;
border: 0;
opacity: 0.5;
transition: opacity 0.15s ease; }
@media (prefers-reduced-motion: reduce) {
.carousel-control-prev,
.carousel-control-next {
transition: none; } }
.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
color: var(--hl-color-core-white);
text-decoration: none;
outline: 0;
opacity: 0.9; }
.carousel-control-prev {
left: 0; }
.carousel-control-next {
right: 0; }
.carousel-control-prev-icon,
.carousel-control-next-icon {
display: inline-block;
width: 20px;
height: 20px;
background: 50%/100% 100% no-repeat; }
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40.12 63.25'%3e%3cpolygon points='0 31.63 32.47 63.25 40.12 55.8 15.3 31.63 40.12 7.45 32.47 0 0 31.63' fill='var%28--hl-color-core-white%29' /%3e%3c/svg%3e"); }
.carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40.12 63.25'%3e%3cpolygon points='7.65 0 0 7.45 24.82 31.63 0 55.8 7.65 63.25 40.12 31.63 7.65 0' fill='var%28--hl-color-core-white%29' /%3e%3c/svg%3e"); }
.carousel-indicators {
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: -moz-min-content;
width: min-content;
max-width: 100%;
z-index: 15;
display: flex;
justify-content: center;
padding-left: 0;
margin-right: auto;
margin-left: auto;
padding-left: 4px;
padding-right: 4px;
list-style-type: "";
background-color: rgba(255, 255, 255, 0.3);
border-radius: var(--hl-border-radius-full); }
.carousel-indicators li {
box-sizing: content-box;
flex: 0 1 auto;
width: 95px;
height: 5px;
margin-right: var(--hl-spacer-2xs);
margin-left: var(--hl-spacer-2xs);
text-indent: -999px;
cursor: pointer;
background-color: var(--hl-color-core-white);
background-clip: padding-box;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
opacity: 0.5;
transition: opacity 0.6s ease; }
@media (prefers-reduced-motion: reduce) {
.carousel-indicators li {
transition: none; } }
.carousel-indicators .active {
opacity: 1; }
.carousel-caption {
position: absolute;
right: 15%;
bottom: 20px;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: var(--hl-color-core-white);
text-align: center; }
@keyframes spinner-border {
to {
transform: rotate(360deg); } }
.spinner-border {
display: inline-block;
width: var(--hl-spacer-xl);
height: var(--hl-spacer-xl);
vertical-align: -0.125em;
border: 0.25em solid currentcolor;
border-right-color: transparent;
border-radius: 50%;
animation: 0.75s linear infinite spinner-border; }
.spinner-border-sm {
width: var(--hl-spacer-md);
height: var(--hl-spacer-md);
border-width: 0.2em; }
@keyframes spinner-grow {
0% {
transform: scale(0); }
50% {
opacity: 1;
transform: none; } }
.spinner-grow {
display: inline-block;
width: var(--hl-spacer-xl);
height: var(--hl-spacer-xl);
vertical-align: -0.125em;
background-color: currentcolor;
border-radius: 50%;
opacity: 0;
animation: 0.75s linear infinite spinner-grow; }
.spinner-grow-sm {
width: var(--hl-spacer-md);
height: var(--hl-spacer-md); }
@media (prefers-reduced-motion: reduce) {
.spinner-border,
.spinner-grow {
animation-duration: 1.5s; } }
.align-baseline {
vertical-align: baseline !important; }
.align-top {
vertical-align: top !important; }
.align-middle {
vertical-align: middle !important; }
.align-bottom {
vertical-align: bottom !important; }
.align-text-bottom {
vertical-align: text-bottom !important; }
.align-text-top {
vertical-align: text-top !important; }
.bg-blue {
background-color: var(--hl-color-supporting-blue) !important; }
.bg-blue-light {
background-color: var(--hl-color-supporting-blue-light) !important; }
.bg-blue-dark {
background-color: var(--hl-color-supporting-blue-dark) !important; }
.bg-purple {
background-color: var(--hl-color-supporting-purple) !important; }
.bg-purple-light {
background-color: var(--hl-color-supporting-purple-light) !important; }
.bg-purple-dark {
background-color: var(--hl-color-supporting-purple-dark) !important; }
.bg-pink {
background-color: var(--hl-color-supporting-pink) !important; }
.bg-pink-light {
background-color: var(--hl-color-supporting-pink-light) !important; }
.bg-pink-dark {
background-color: var(--hl-color-supporting-pink-dark) !important; }
.bg-orange {
background-color: #FF7900 !important; }
.bg-yellow {
background-color: var(--hl-color-supporting-yellow) !important; }
.bg-yellow-light {
background-color: var(--hl-color-supporting-yellow-light) !important; }
.bg-yellow-dark {
background-color: var(--hl-color-supporting-yellow-dark) !important; }
.bg-green {
background-color: var(--hl-color-supporting-green) !important; }
.bg-green-light {
background-color: var(--hl-color-supporting-green-light) !important; }
.bg-green-dark {
background-color: var(--hl-color-supporting-green-dark) !important; }
.bg-white {
background-color: var(--hl-color-core-white) !important; }
.bg-gray {
background-color: #999999 !important; }
.bg-gray-dark {
background-color: #333333 !important; }
.bg-red {
background-color: var(--hl-color-functional-danger) !important; }
.bg-primary {
background-color: var(--hl-color-bg-light-primary) !important; }
.bg-secondary {
background-color: var(--hl-color-secondary) !important; }
.bg-success {
background-color: var(--hl-color-functional-success) !important; }
.bg-info {
background-color: var(--hl-color-functional-info) !important; }
.bg-warning {
background-color: var(--hl-color-functional-warning) !important; }
.bg-danger {
background-color: var(--hl-color-functional-danger) !important; }
.bg-black {
background-color: var(--hl-color-core-black) !important; }
.bg-obs {
background-color: #595959 !important; }
.bg-default {
background-color: var(--hl-color-bg-light-default) !important; }
.bg-muted {
background-color: var(--hl-color-bg-light-muted) !important; }
.bg-very-muted {
background-color: var(--hl-color-bg-light-very-muted) !important; }
.bg-ultra-muted {
background-color: var(--hl-color-bg-light-ultra-muted) !important; }
.bg-dark-default {
background-color: var(--hl-color-bg-dark-default) !important; }
.bg-dark-primary {
background-color: var(--hl-color-bg-dark-primary) !important; }
.bg-dark-muted {
background-color: var(--hl-color-bg-dark-muted) !important; }
.bg-dark-very-muted {
background-color: var(--hl-color-bg-dark-very-muted) !important; }
.bg-dark-ultra-muted {
background-color: var(--hl-color-bg-dark-ultra-muted) !important; }
.border {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-default) !important; }
.border-top {
border-top: var(--hl-border-width-default) solid var(--hl-color-border-light-default) !important; }
.border-right {
border-right: var(--hl-border-width-default) solid var(--hl-color-border-light-default) !important; }
.border-bottom {
border-bottom: var(--hl-border-width-default) solid var(--hl-color-border-light-default) !important; }
.border-left {
border-left: var(--hl-border-width-default) solid var(--hl-color-border-light-default) !important; }
.border-0, .charger-btn {
border: 0 !important; }
.border-top-0 {
border-top: 0 !important; }
.border-right-0 {
border-right: 0 !important; }
.border-bottom-0 {
border-bottom: 0 !important; }
.border-left-0 {
border-left: 0 !important; }
.border-primary {
border-color: var(--hl-color-border-light-primary) !important; }
.border-secondary {
border-color: var(--hl-color-border-light-secondary) !important; }
.border-success {
border-color: var(--hl-color-border-light-success) !important; }
.border-info {
border-color: var(--hl-color-border-light-info) !important; }
.border-warning {
border-color: var(--hl-color-border-light-warning) !important; }
.border-danger {
border-color: var(--hl-color-border-light-danger) !important; }
.border-black {
border-color: var(--hl-color-core-black) !important; }
.border-white {
border-color: var(--hl-color-core-white) !important; }
.border-obs {
border-color: #595959 !important; }
.border-blue {
border-color: var(--hl-color-supporting-blue) !important; }
.border-blue-light {
border-color: var(--hl-color-supporting-blue-light) !important; }
.border-blue-dark {
border-color: var(--hl-color-supporting-blue-dark) !important; }
.border-purple {
border-color: var(--hl-color-supporting-purple) !important; }
.border-purple-light {
border-color: var(--hl-color-supporting-purple-light) !important; }
.border-purple-dark {
border-color: var(--hl-color-supporting-purple-dark) !important; }
.border-pink {
border-color: var(--hl-color-supporting-pink) !important; }
.border-pink-light {
border-color: var(--hl-color-supporting-pink-light) !important; }
.border-pink-dark {
border-color: var(--hl-color-supporting-pink-dark) !important; }
.border-orange {
border-color: #FF7900 !important; }
.border-yellow {
border-color: var(--hl-color-supporting-yellow) !important; }
.border-yellow-light {
border-color: var(--hl-color-supporting-yellow-light) !important; }
.border-yellow-dark {
border-color: var(--hl-color-supporting-yellow-dark) !important; }
.border-green {
border-color: var(--hl-color-supporting-green) !important; }
.border-green-light {
border-color: var(--hl-color-supporting-green-light) !important; }
.border-green-dark {
border-color: var(--hl-color-supporting-green-dark) !important; }
.border-gray {
border-color: #999999 !important; }
.border-gray-dark {
border-color: #333333 !important; }
.border-red {
border-color: var(--hl-color-functional-danger) !important; }
.border-default {
border-color: var(--hl-color-border-light-default) !important; }
.border-interaction-hover {
border-color: var(--hl-color-border-light-interaction-hover) !important; }
.border-interaction-active {
border-color: var(--hl-color-border-light-interaction-pressed) !important; }
.border-muted {
border-color: var(--hl-color-border-light-muted) !important; }
.border-very-muted {
border-color: var(--hl-color-border-light-very-muted) !important; }
.border-ultra-muted {
border-color: var(--hl-color-border-light-ultra-muted) !important; }
.border-form {
border-color: var(--hl-color-border-light-form) !important; }
.border-dark-default {
border-color: var(--hl-color-border-dark-default) !important; }
.border-dark-interaction-hover {
border-color: var(--hl-color-border-dark-interaction-hover) !important; }
.border-dark-interaction-active {
border-color: var(--hl-color-border-dark-interaction-pressed) !important; }
.border-dark-muted {
border-color: var(--hl-color-border-dark-muted) !important; }
.border-dark-very-muted {
border-color: var(--hl-color-border-dark-very-muted) !important; }
.border-dark-ultra-muted {
border-color: var(--hl-color-border-dark-ultra-muted) !important; }
.border-dark-primary {
border-color: var(--hl-color-border-dark-primary) !important; }
.border-dark-secondary {
border-color: var(--hl-color-border-dark-secondary) !important; }
.border-dark-form {
border-color: var(--hl-color-border-dark-form) !important; }
.border-dark-info {
border-color: var(--hl-color-border-dark-info) !important; }
.border-dark-success {
border-color: var(--hl-color-border-dark-success) !important; }
.border-dark-warning {
border-color: var(--hl-color-border-dark-warning) !important; }
.border-dark-danger {
border-color: var(--hl-color-border-dark-danger) !important; }
.border-white {
border-color: var(--hl-color-core-white) !important; }
.border-separator {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-default); }
.border-separator--lg {
border-width: var(--hl-border-width-lg); }
.border-interactive-default {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-default); }
.border-interactive-default:hover, .border-interactive-default:focus {
border-color: var(--hl-color-border-light-interaction-hover); }
.border-interactive-default:active, .border-interactive-default.active {
border-color: var(--hl-color-border-light-interaction-pressed); }
.rounded-sm {
border-radius: var(--hl-border-radius-default) !important; }
.rounded {
border-radius: var(--hl-border-radius-default) !important; }
.rounded-top {
border-top-left-radius: var(--hl-border-radius-default) !important;
border-top-right-radius: var(--hl-border-radius-default) !important; }
.rounded-right {
border-top-right-radius: var(--hl-border-radius-default) !important;
border-bottom-right-radius: var(--hl-border-radius-default) !important; }
.rounded-bottom {
border-bottom-right-radius: var(--hl-border-radius-default) !important;
border-bottom-left-radius: var(--hl-border-radius-default) !important; }
.rounded-left {
border-top-left-radius: var(--hl-border-radius-default) !important;
border-bottom-left-radius: var(--hl-border-radius-default) !important; }
.rounded-lg {
border-radius: var(--hl-border-radius-default) !important; }
.rounded-circle {
border-radius: 50% !important; }
.rounded-pill {
border-radius: var(--hl-border-radius-full) !important; }
.rounded-0 {
border-radius: 0 !important; }
.clearfix::after {
display: block;
clear: both;
content: ""; }
.cursor-alias {
cursor: alias !important; }
.cursor-all-scroll {
cursor: all-scroll !important; }
.cursor-auto {
cursor: auto !important; }
.cursor-cell {
cursor: cell !important; }
.cursor-col-resize {
cursor: col-resize !important; }
.cursor-context-menu {
cursor: context-menu !important; }
.cursor-copy {
cursor: copy !important; }
.cursor-crosshair {
cursor: crosshair !important; }
.cursor-default {
cursor: default !important; }
.cursor-e-resize {
cursor: e-resize !important; }
.cursor-ew-resize {
cursor: ew-resize !important; }
.cursor-grab {
cursor: grab !important; }
.cursor-grabbing {
cursor: grabbing !important; }
.cursor-help {
cursor: help !important; }
.cursor-move {
cursor: move !important; }
.cursor-n-resize {
cursor: n-resize !important; }
.cursor-ne-resize {
cursor: ne-resize !important; }
.cursor-nesw-resize {
cursor: nesw-resize !important; }
.cursor-ns-resize {
cursor: ns-resize !important; }
.cursor-nw-resize {
cursor: nw-resize !important; }
.cursor-nwse-resize {
cursor: nwse-resize !important; }
.cursor-no-drop {
cursor: no-drop !important; }
.cursor-none {
cursor: none !important; }
.cursor-not-allowed {
cursor: not-allowed !important; }
.cursor-pointer {
cursor: pointer !important; }
.cursor-progress {
cursor: progress !important; }
.cursor-row-resize {
cursor: row-resize !important; }
.cursor-s-resize {
cursor: s-resize !important; }
.cursor-se-resize {
cursor: se-resize !important; }
.cursor-sw-resize {
cursor: sw-resize !important; }
.cursor-text {
cursor: text !important; }
.cursor-url {
cursor: url !important; }
.cursor-w-resize {
cursor: w-resize !important; }
.cursor-wait {
cursor: wait !important; }
.cursor-zoom-in {
cursor: zoom-in !important; }
.cursor-zoom-out {
cursor: zoom-out !important; }
.d-none {
display: none !important; }
.d-inline {
display: inline !important; }
.d-inline-block {
display: inline-block !important; }
.d-block {
display: block !important; }
.d-table {
display: table !important; }
.d-table-row {
display: table-row !important; }
.d-table-cell {
display: table-cell !important; }
.d-flex {
display: flex !important; }
.d-inline-flex {
display: inline-flex !important; }
@media (min-width: 576px) {
.d-sm-none {
display: none !important; }
.d-sm-inline {
display: inline !important; }
.d-sm-inline-block {
display: inline-block !important; }
.d-sm-block {
display: block !important; }
.d-sm-table {
display: table !important; }
.d-sm-table-row {
display: table-row !important; }
.d-sm-table-cell {
display: table-cell !important; }
.d-sm-flex {
display: flex !important; }
.d-sm-inline-flex {
display: inline-flex !important; } }
@media (min-width: 768px) {
.d-md-none {
display: none !important; }
.d-md-inline {
display: inline !important; }
.d-md-inline-block {
display: inline-block !important; }
.d-md-block {
display: block !important; }
.d-md-table {
display: table !important; }
.d-md-table-row {
display: table-row !important; }
.d-md-table-cell {
display: table-cell !important; }
.d-md-flex {
display: flex !important; }
.d-md-inline-flex {
display: inline-flex !important; } }
@media (min-width: 992px) {
.d-lg-none {
display: none !important; }
.d-lg-inline {
display: inline !important; }
.d-lg-inline-block {
display: inline-block !important; }
.d-lg-block {
display: block !important; }
.d-lg-table {
display: table !important; }
.d-lg-table-row {
display: table-row !important; }
.d-lg-table-cell {
display: table-cell !important; }
.d-lg-flex {
display: flex !important; }
.d-lg-inline-flex {
display: inline-flex !important; } }
@media (min-width: 1200px) {
.d-xl-none {
display: none !important; }
.d-xl-inline {
display: inline !important; }
.d-xl-inline-block {
display: inline-block !important; }
.d-xl-block {
display: block !important; }
.d-xl-table {
display: table !important; }
.d-xl-table-row {
display: table-row !important; }
.d-xl-table-cell {
display: table-cell !important; }
.d-xl-flex {
display: flex !important; }
.d-xl-inline-flex {
display: inline-flex !important; } }
@media (min-width: 1400px) {
.d-xxl-none {
display: none !important; }
.d-xxl-inline {
display: inline !important; }
.d-xxl-inline-block {
display: inline-block !important; }
.d-xxl-block {
display: block !important; }
.d-xxl-table {
display: table !important; }
.d-xxl-table-row {
display: table-row !important; }
.d-xxl-table-cell {
display: table-cell !important; }
.d-xxl-flex {
display: flex !important; }
.d-xxl-inline-flex {
display: inline-flex !important; } }
@media (min-width: 1880px) {
.d-xxxl-none {
display: none !important; }
.d-xxxl-inline {
display: inline !important; }
.d-xxxl-inline-block {
display: inline-block !important; }
.d-xxxl-block {
display: block !important; }
.d-xxxl-table {
display: table !important; }
.d-xxxl-table-row {
display: table-row !important; }
.d-xxxl-table-cell {
display: table-cell !important; }
.d-xxxl-flex {
display: flex !important; }
.d-xxxl-inline-flex {
display: inline-flex !important; } }
@media print {
.d-print-none {
display: none !important; }
.d-print-inline {
display: inline !important; }
.d-print-inline-block {
display: inline-block !important; }
.d-print-block {
display: block !important; }
.d-print-table {
display: table !important; }
.d-print-table-row {
display: table-row !important; }
.d-print-table-cell {
display: table-cell !important; }
.d-print-flex {
display: flex !important; }
.d-print-inline-flex {
display: inline-flex !important; } }
.embed-responsive {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden; }
.embed-responsive::before {
display: block;
content: ""; }
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0; }
.embed-responsive-21by9::before {
padding-top: 42.85714286%; }
.embed-responsive-16by9::before {
padding-top: 56.25%; }
.embed-responsive-4by3::before {
padding-top: 75%; }
.embed-responsive-1by1::before {
padding-top: 100%; }
.flex-row {
flex-direction: row !important; }
.flex-column {
flex-direction: column !important; }
.flex-row-reverse {
flex-direction: row-reverse !important; }
.flex-column-reverse {
flex-direction: column-reverse !important; }
.flex-wrap {
flex-wrap: wrap !important; }
.flex-nowrap {
flex-wrap: nowrap !important; }
.flex-wrap-reverse {
flex-wrap: wrap-reverse !important; }
.flex-fill {
flex: 1 1 auto !important; }
.flex-grow-0 {
flex-grow: 0 !important; }
.flex-grow-1 {
flex-grow: 1 !important; }
.flex-shrink-0 {
flex-shrink: 0 !important; }
.flex-shrink-1 {
flex-shrink: 1 !important; }
.justify-content-start {
justify-content: flex-start !important; }
.justify-content-end {
justify-content: flex-end !important; }
.justify-content-center {
justify-content: center !important; }
.justify-content-between {
justify-content: space-between !important; }
.justify-content-around {
justify-content: space-around !important; }
.align-items-start {
align-items: flex-start !important; }
.align-items-end {
align-items: flex-end !important; }
.align-items-center {
align-items: center !important; }
.align-items-baseline {
align-items: baseline !important; }
.align-items-stretch {
align-items: stretch !important; }
.align-content-start {
align-content: flex-start !important; }
.align-content-end {
align-content: flex-end !important; }
.align-content-center {
align-content: center !important; }
.align-content-between {
align-content: space-between !important; }
.align-content-around {
align-content: space-around !important; }
.align-content-stretch {
align-content: stretch !important; }
.align-self-auto {
align-self: auto !important; }
.align-self-start {
align-self: flex-start !important; }
.align-self-end {
align-self: flex-end !important; }
.align-self-center {
align-self: center !important; }
.align-self-baseline {
align-self: baseline !important; }
.align-self-stretch {
align-self: stretch !important; }
@media (min-width: 576px) {
.flex-sm-row {
flex-direction: row !important; }
.flex-sm-column {
flex-direction: column !important; }
.flex-sm-row-reverse {
flex-direction: row-reverse !important; }
.flex-sm-column-reverse {
flex-direction: column-reverse !important; }
.flex-sm-wrap {
flex-wrap: wrap !important; }
.flex-sm-nowrap {
flex-wrap: nowrap !important; }
.flex-sm-wrap-reverse {
flex-wrap: wrap-reverse !important; }
.flex-sm-fill {
flex: 1 1 auto !important; }
.flex-sm-grow-0 {
flex-grow: 0 !important; }
.flex-sm-grow-1 {
flex-grow: 1 !important; }
.flex-sm-shrink-0 {
flex-shrink: 0 !important; }
.flex-sm-shrink-1 {
flex-shrink: 1 !important; }
.justify-content-sm-start {
justify-content: flex-start !important; }
.justify-content-sm-end {
justify-content: flex-end !important; }
.justify-content-sm-center {
justify-content: center !important; }
.justify-content-sm-between {
justify-content: space-between !important; }
.justify-content-sm-around {
justify-content: space-around !important; }
.align-items-sm-start {
align-items: flex-start !important; }
.align-items-sm-end {
align-items: flex-end !important; }
.align-items-sm-center {
align-items: center !important; }
.align-items-sm-baseline {
align-items: baseline !important; }
.align-items-sm-stretch {
align-items: stretch !important; }
.align-content-sm-start {
align-content: flex-start !important; }
.align-content-sm-end {
align-content: flex-end !important; }
.align-content-sm-center {
align-content: center !important; }
.align-content-sm-between {
align-content: space-between !important; }
.align-content-sm-around {
align-content: space-around !important; }
.align-content-sm-stretch {
align-content: stretch !important; }
.align-self-sm-auto {
align-self: auto !important; }
.align-self-sm-start {
align-self: flex-start !important; }
.align-self-sm-end {
align-self: flex-end !important; }
.align-self-sm-center {
align-self: center !important; }
.align-self-sm-baseline {
align-self: baseline !important; }
.align-self-sm-stretch {
align-self: stretch !important; } }
@media (min-width: 768px) {
.flex-md-row {
flex-direction: row !important; }
.flex-md-column {
flex-direction: column !important; }
.flex-md-row-reverse {
flex-direction: row-reverse !important; }
.flex-md-column-reverse {
flex-direction: column-reverse !important; }
.flex-md-wrap {
flex-wrap: wrap !important; }
.flex-md-nowrap {
flex-wrap: nowrap !important; }
.flex-md-wrap-reverse {
flex-wrap: wrap-reverse !important; }
.flex-md-fill {
flex: 1 1 auto !important; }
.flex-md-grow-0 {
flex-grow: 0 !important; }
.flex-md-grow-1 {
flex-grow: 1 !important; }
.flex-md-shrink-0 {
flex-shrink: 0 !important; }
.flex-md-shrink-1 {
flex-shrink: 1 !important; }
.justify-content-md-start {
justify-content: flex-start !important; }
.justify-content-md-end {
justify-content: flex-end !important; }
.justify-content-md-center {
justify-content: center !important; }
.justify-content-md-between {
justify-content: space-between !important; }
.justify-content-md-around {
justify-content: space-around !important; }
.align-items-md-start {
align-items: flex-start !important; }
.align-items-md-end {
align-items: flex-end !important; }
.align-items-md-center {
align-items: center !important; }
.align-items-md-baseline {
align-items: baseline !important; }
.align-items-md-stretch {
align-items: stretch !important; }
.align-content-md-start {
align-content: flex-start !important; }
.align-content-md-end {
align-content: flex-end !important; }
.align-content-md-center {
align-content: center !important; }
.align-content-md-between {
align-content: space-between !important; }
.align-content-md-around {
align-content: space-around !important; }
.align-content-md-stretch {
align-content: stretch !important; }
.align-self-md-auto {
align-self: auto !important; }
.align-self-md-start {
align-self: flex-start !important; }
.align-self-md-end {
align-self: flex-end !important; }
.align-self-md-center {
align-self: center !important; }
.align-self-md-baseline {
align-self: baseline !important; }
.align-self-md-stretch {
align-self: stretch !important; } }
@media (min-width: 992px) {
.flex-lg-row {
flex-direction: row !important; }
.flex-lg-column {
flex-direction: column !important; }
.flex-lg-row-reverse {
flex-direction: row-reverse !important; }
.flex-lg-column-reverse {
flex-direction: column-reverse !important; }
.flex-lg-wrap {
flex-wrap: wrap !important; }
.flex-lg-nowrap {
flex-wrap: nowrap !important; }
.flex-lg-wrap-reverse {
flex-wrap: wrap-reverse !important; }
.flex-lg-fill {
flex: 1 1 auto !important; }
.flex-lg-grow-0 {
flex-grow: 0 !important; }
.flex-lg-grow-1 {
flex-grow: 1 !important; }
.flex-lg-shrink-0 {
flex-shrink: 0 !important; }
.flex-lg-shrink-1 {
flex-shrink: 1 !important; }
.justify-content-lg-start {
justify-content: flex-start !important; }
.justify-content-lg-end {
justify-content: flex-end !important; }
.justify-content-lg-center {
justify-content: center !important; }
.justify-content-lg-between {
justify-content: space-between !important; }
.justify-content-lg-around {
justify-content: space-around !important; }
.align-items-lg-start {
align-items: flex-start !important; }
.align-items-lg-end {
align-items: flex-end !important; }
.align-items-lg-center {
align-items: center !important; }
.align-items-lg-baseline {
align-items: baseline !important; }
.align-items-lg-stretch {
align-items: stretch !important; }
.align-content-lg-start {
align-content: flex-start !important; }
.align-content-lg-end {
align-content: flex-end !important; }
.align-content-lg-center {
align-content: center !important; }
.align-content-lg-between {
align-content: space-between !important; }
.align-content-lg-around {
align-content: space-around !important; }
.align-content-lg-stretch {
align-content: stretch !important; }
.align-self-lg-auto {
align-self: auto !important; }
.align-self-lg-start {
align-self: flex-start !important; }
.align-self-lg-end {
align-self: flex-end !important; }
.align-self-lg-center {
align-self: center !important; }
.align-self-lg-baseline {
align-self: baseline !important; }
.align-self-lg-stretch {
align-self: stretch !important; } }
@media (min-width: 1200px) {
.flex-xl-row {
flex-direction: row !important; }
.flex-xl-column {
flex-direction: column !important; }
.flex-xl-row-reverse {
flex-direction: row-reverse !important; }
.flex-xl-column-reverse {
flex-direction: column-reverse !important; }
.flex-xl-wrap {
flex-wrap: wrap !important; }
.flex-xl-nowrap {
flex-wrap: nowrap !important; }
.flex-xl-wrap-reverse {
flex-wrap: wrap-reverse !important; }
.flex-xl-fill {
flex: 1 1 auto !important; }
.flex-xl-grow-0 {
flex-grow: 0 !important; }
.flex-xl-grow-1 {
flex-grow: 1 !important; }
.flex-xl-shrink-0 {
flex-shrink: 0 !important; }
.flex-xl-shrink-1 {
flex-shrink: 1 !important; }
.justify-content-xl-start {
justify-content: flex-start !important; }
.justify-content-xl-end {
justify-content: flex-end !important; }
.justify-content-xl-center {
justify-content: center !important; }
.justify-content-xl-between {
justify-content: space-between !important; }
.justify-content-xl-around {
justify-content: space-around !important; }
.align-items-xl-start {
align-items: flex-start !important; }
.align-items-xl-end {
align-items: flex-end !important; }
.align-items-xl-center {
align-items: center !important; }
.align-items-xl-baseline {
align-items: baseline !important; }
.align-items-xl-stretch {
align-items: stretch !important; }
.align-content-xl-start {
align-content: flex-start !important; }
.align-content-xl-end {
align-content: flex-end !important; }
.align-content-xl-center {
align-content: center !important; }
.align-content-xl-between {
align-content: space-between !important; }
.align-content-xl-around {
align-content: space-around !important; }
.align-content-xl-stretch {
align-content: stretch !important; }
.align-self-xl-auto {
align-self: auto !important; }
.align-self-xl-start {
align-self: flex-start !important; }
.align-self-xl-end {
align-self: flex-end !important; }
.align-self-xl-center {
align-self: center !important; }
.align-self-xl-baseline {
align-self: baseline !important; }
.align-self-xl-stretch {
align-self: stretch !important; } }
@media (min-width: 1400px) {
.flex-xxl-row {
flex-direction: row !important; }
.flex-xxl-column {
flex-direction: column !important; }
.flex-xxl-row-reverse {
flex-direction: row-reverse !important; }
.flex-xxl-column-reverse {
flex-direction: column-reverse !important; }
.flex-xxl-wrap {
flex-wrap: wrap !important; }
.flex-xxl-nowrap {
flex-wrap: nowrap !important; }
.flex-xxl-wrap-reverse {
flex-wrap: wrap-reverse !important; }
.flex-xxl-fill {
flex: 1 1 auto !important; }
.flex-xxl-grow-0 {
flex-grow: 0 !important; }
.flex-xxl-grow-1 {
flex-grow: 1 !important; }
.flex-xxl-shrink-0 {
flex-shrink: 0 !important; }
.flex-xxl-shrink-1 {
flex-shrink: 1 !important; }
.justify-content-xxl-start {
justify-content: flex-start !important; }
.justify-content-xxl-end {
justify-content: flex-end !important; }
.justify-content-xxl-center {
justify-content: center !important; }
.justify-content-xxl-between {
justify-content: space-between !important; }
.justify-content-xxl-around {
justify-content: space-around !important; }
.align-items-xxl-start {
align-items: flex-start !important; }
.align-items-xxl-end {
align-items: flex-end !important; }
.align-items-xxl-center {
align-items: center !important; }
.align-items-xxl-baseline {
align-items: baseline !important; }
.align-items-xxl-stretch {
align-items: stretch !important; }
.align-content-xxl-start {
align-content: flex-start !important; }
.align-content-xxl-end {
align-content: flex-end !important; }
.align-content-xxl-center {
align-content: center !important; }
.align-content-xxl-between {
align-content: space-between !important; }
.align-content-xxl-around {
align-content: space-around !important; }
.align-content-xxl-stretch {
align-content: stretch !important; }
.align-self-xxl-auto {
align-self: auto !important; }
.align-self-xxl-start {
align-self: flex-start !important; }
.align-self-xxl-end {
align-self: flex-end !important; }
.align-self-xxl-center {
align-self: center !important; }
.align-self-xxl-baseline {
align-self: baseline !important; }
.align-self-xxl-stretch {
align-self: stretch !important; } }
@media (min-width: 1880px) {
.flex-xxxl-row {
flex-direction: row !important; }
.flex-xxxl-column {
flex-direction: column !important; }
.flex-xxxl-row-reverse {
flex-direction: row-reverse !important; }
.flex-xxxl-column-reverse {
flex-direction: column-reverse !important; }
.flex-xxxl-wrap {
flex-wrap: wrap !important; }
.flex-xxxl-nowrap {
flex-wrap: nowrap !important; }
.flex-xxxl-wrap-reverse {
flex-wrap: wrap-reverse !important; }
.flex-xxxl-fill {
flex: 1 1 auto !important; }
.flex-xxxl-grow-0 {
flex-grow: 0 !important; }
.flex-xxxl-grow-1 {
flex-grow: 1 !important; }
.flex-xxxl-shrink-0 {
flex-shrink: 0 !important; }
.flex-xxxl-shrink-1 {
flex-shrink: 1 !important; }
.justify-content-xxxl-start {
justify-content: flex-start !important; }
.justify-content-xxxl-end {
justify-content: flex-end !important; }
.justify-content-xxxl-center {
justify-content: center !important; }
.justify-content-xxxl-between {
justify-content: space-between !important; }
.justify-content-xxxl-around {
justify-content: space-around !important; }
.align-items-xxxl-start {
align-items: flex-start !important; }
.align-items-xxxl-end {
align-items: flex-end !important; }
.align-items-xxxl-center {
align-items: center !important; }
.align-items-xxxl-baseline {
align-items: baseline !important; }
.align-items-xxxl-stretch {
align-items: stretch !important; }
.align-content-xxxl-start {
align-content: flex-start !important; }
.align-content-xxxl-end {
align-content: flex-end !important; }
.align-content-xxxl-center {
align-content: center !important; }
.align-content-xxxl-between {
align-content: space-between !important; }
.align-content-xxxl-around {
align-content: space-around !important; }
.align-content-xxxl-stretch {
align-content: stretch !important; }
.align-self-xxxl-auto {
align-self: auto !important; }
.align-self-xxxl-start {
align-self: flex-start !important; }
.align-self-xxxl-end {
align-self: flex-end !important; }
.align-self-xxxl-center {
align-self: center !important; }
.align-self-xxxl-baseline {
align-self: baseline !important; }
.align-self-xxxl-stretch {
align-self: stretch !important; } }
.float-left {
float: left !important; }
.float-right {
float: right !important; }
.float-none {
float: none !important; }
@media (min-width: 576px) {
.float-sm-left {
float: left !important; }
.float-sm-right {
float: right !important; }
.float-sm-none {
float: none !important; } }
@media (min-width: 768px) {
.float-md-left {
float: left !important; }
.float-md-right {
float: right !important; }
.float-md-none {
float: none !important; } }
@media (min-width: 992px) {
.float-lg-left {
float: left !important; }
.float-lg-right {
float: right !important; }
.float-lg-none {
float: none !important; } }
@media (min-width: 1200px) {
.float-xl-left {
float: left !important; }
.float-xl-right {
float: right !important; }
.float-xl-none {
float: none !important; } }
@media (min-width: 1400px) {
.float-xxl-left {
float: left !important; }
.float-xxl-right {
float: right !important; }
.float-xxl-none {
float: none !important; } }
@media (min-width: 1880px) {
.float-xxxl-left {
float: left !important; }
.float-xxxl-right {
float: right !important; }
.float-xxxl-none {
float: none !important; } }
.user-select-all {
-webkit-user-select: all !important;
-moz-user-select: all !important;
user-select: all !important; }
.user-select-auto {
-webkit-user-select: auto !important;
-moz-user-select: auto !important;
user-select: auto !important; }
.user-select-none {
-webkit-user-select: none !important;
-moz-user-select: none !important;
user-select: none !important; }
.overflow-auto {
overflow: auto !important; }
.overflow-hidden {
overflow: hidden !important; }
@media (min-width: 992px) {
.overflow-hidden-lg-up {
overflow: hidden; } }
.overflow-x-auto {
overflow-x: auto !important; }
.overflow-x-hidden {
overflow-x: hidden !important; }
@media (min-width: 576px) {
.overflow-x-sm-auto {
overflow-x: auto !important; }
.overflow-x-sm-hidden {
overflow-x: hidden !important; } }
@media (min-width: 768px) {
.overflow-x-md-auto {
overflow-x: auto !important; }
.overflow-x-md-hidden {
overflow-x: hidden !important; } }
@media (min-width: 992px) {
.overflow-x-lg-auto {
overflow-x: auto !important; }
.overflow-x-lg-hidden {
overflow-x: hidden !important; } }
@media (min-width: 1200px) {
.overflow-x-xl-auto {
overflow-x: auto !important; }
.overflow-x-xl-hidden {
overflow-x: hidden !important; } }
@media (min-width: 1400px) {
.overflow-x-xxl-auto {
overflow-x: auto !important; }
.overflow-x-xxl-hidden {
overflow-x: hidden !important; } }
@media (min-width: 1880px) {
.overflow-x-xxxl-auto {
overflow-x: auto !important; }
.overflow-x-xxxl-hidden {
overflow-x: hidden !important; } }
.position-static {
position: static !important; }
.position-relative {
position: relative !important; }
.position-absolute {
position: absolute !important; }
.position-fixed {
position: fixed !important; }
.position-sticky {
position: sticky !important; }
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: var(--hl-z-index-header); }
.fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: var(--hl-z-index-header); }
@supports (position: sticky) {
.sticky-top {
position: sticky;
top: 0;
z-index: calc(var(--hl-z-index-dropdown) + 2); } }
@supports (position: sticky) {
.sticky-top-header {
position: sticky;
top: calc(var(--header-orange-rebrand-height, 0px) + var(--hl-spacer-lg));
z-index: var(--hl-z-index-sticky); } }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0; }
.sr-only-focusable:active, .sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal; }
.skip-group-links:focus-within {
background: var(--hl-color-bg-dark-default);
background: linear-gradient(180deg, black 0%, black 146px, rgba(0, 0, 0, 0.3) 146px, rgba(0, 0, 0, 0.3) 100%);
position: fixed;
clip: initial;
overflow: auto;
width: auto;
height: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 0;
text-align: center;
z-index: 2; }
.skip-group-links:focus-within .accessible-menu {
margin: var(--hl-spacing-grid); }
.skip-group-links:focus-within button,
.skip-group-links:focus-within a {
position: static !important;
width: auto !important;
height: auto !important;
padding: 0.5rem !important;
margin: 0.25rem !important;
overflow: visible !important;
clip: auto !important;
white-space: normal !important;
animation: none;
transition: none; }
.shadow-sm {
box-shadow: 0 var(--hl-spacer-3xs) var(--hl-spacer-2xs) rgba(0, 0, 0, 0.13) !important; }
.shadow {
box-shadow: 0 var(--hl-spacer-xs) var(--hl-spacer-md) rgba(0, 0, 0, 0.13) !important; }
.shadow-lg {
box-shadow: 0 var(--hl-spacer-md) var(--hl-spacer-3xl) rgba(0, 0, 0, 0.13) !important; }
.shadow-none {
box-shadow: none !important; }
.w-25 {
width: 25% !important; }
.w-50 {
width: 50% !important; }
.w-75 {
width: 75% !important; }
.w-100 {
width: 100% !important; }
.w-auto {
width: auto !important; }
.h-25 {
height: 25% !important; }
.h-50 {
height: 50% !important; }
.h-75 {
height: 75% !important; }
.h-100 {
height: 100% !important; }
.h-auto {
height: auto !important; }
.mw-100 {
max-width: 100% !important; }
.mh-100 {
max-height: 100% !important; }
.min-vw-100 {
min-width: 100vw !important; }
.min-vh-100 {
min-height: 100vh !important; }
.vw-100 {
width: 100vw !important; }
.vh-100 {
height: 100vh !important; }
.icon-text-size {
width: 1em;
height: 1em; }
.row.row-h100-childs > .col > *,
.row.row-h100-childs > [class*=col-] > * {
height: 100%; }
.row.row-without-col-gap {
margin-left: 0;
margin-right: 0; }
.row.row-without-col-gap--bordered {
border-left: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
border-top: var(--hl-border-width-default) solid var(--hl-color-border-light-default); }
.row.row-without-col-gap > .col,
.row.row-without-col-gap > [class*=col-] {
padding-left: 0;
padding-right: 0; }
.row.row-without-col-gap > .col > .muu.muu--bordered,
.row.row-without-col-gap > [class*=col-] > .muu.muu--bordered {
border-left: transparent;
border-top: transparent;
border-radius: 0; }
.row.row--negative-margin-top {
margin-top: calc(var(--hl-spacer-4xl) * -1);
position: relative;
z-index: var(--hl-z-index-mask); }
@media (min-width: 768px) {
.row.row--negative-margin-top {
margin-top: calc(var(--hl-spacer-6xl) * -1); } }
.padding-bottom-swing {
padding-bottom: var(--hl-spacer-4xl); }
@media (min-width: 768px) {
.padding-bottom-swing {
padding-bottom: var(--hl-spacer-6xl); } }
.m-0 {
margin: 0 !important; }
.mt-0,
.my-0 {
margin-top: 0 !important; }
.mr-0,
.mx-0 {
margin-right: 0 !important; }
.mb-0,
.my-0 {
margin-bottom: 0 !important; }
.ml-0,
.mx-0 {
margin-left: 0 !important; }
.m-1 {
margin: var(--hl-spacer-2xs) !important; }
.mt-1,
.my-1 {
margin-top: var(--hl-spacer-2xs) !important; }
.mr-1,
.mx-1 {
margin-right: var(--hl-spacer-2xs) !important; }
.mb-1,
.my-1 {
margin-bottom: var(--hl-spacer-2xs) !important; }
.ml-1,
.mx-1 {
margin-left: var(--hl-spacer-2xs) !important; }
.m-2 {
margin: var(--hl-spacer-xs) !important; }
.mt-2,
.my-2 {
margin-top: var(--hl-spacer-xs) !important; }
.mr-2,
.mx-2 {
margin-right: var(--hl-spacer-xs) !important; }
.mb-2,
.my-2 {
margin-bottom: var(--hl-spacer-xs) !important; }
.ml-2,
.mx-2 {
margin-left: var(--hl-spacer-xs) !important; }
.m-3 {
margin: var(--hl-spacer-md) !important; }
.mt-3,
.my-3 {
margin-top: var(--hl-spacer-md) !important; }
.mr-3,
.mx-3 {
margin-right: var(--hl-spacer-md) !important; }
.mb-3,
.my-3 {
margin-bottom: var(--hl-spacer-md) !important; }
.ml-3,
.mx-3 {
margin-left: var(--hl-spacer-md) !important; }
.m-4 {
margin: var(--hl-spacer-lg) !important; }
.mt-4,
.my-4 {
margin-top: var(--hl-spacer-lg) !important; }
.mr-4,
.mx-4 {
margin-right: var(--hl-spacer-lg) !important; }
.mb-4,
.my-4 {
margin-bottom: var(--hl-spacer-lg) !important; }
.ml-4,
.mx-4 {
margin-left: var(--hl-spacer-lg) !important; }
.m-5 {
margin: var(--hl-spacer-3xl) !important; }
.mt-5,
.my-5 {
margin-top: var(--hl-spacer-3xl) !important; }
.mr-5,
.mx-5 {
margin-right: var(--hl-spacer-3xl) !important; }
.mb-5,
.my-5 {
margin-bottom: var(--hl-spacer-3xl) !important; }
.ml-5,
.mx-5 {
margin-left: var(--hl-spacer-3xl) !important; }
.m-3xs {
margin: var(--hl-spacer-3xs) !important; }
.mt-3xs,
.my-3xs {
margin-top: var(--hl-spacer-3xs) !important; }
.mr-3xs,
.mx-3xs {
margin-right: var(--hl-spacer-3xs) !important; }
.mb-3xs,
.my-3xs {
margin-bottom: var(--hl-spacer-3xs) !important; }
.ml-3xs,
.mx-3xs {
margin-left: var(--hl-spacer-3xs) !important; }
.m-2xs {
margin: var(--hl-spacer-2xs) !important; }
.mt-2xs,
.my-2xs {
margin-top: var(--hl-spacer-2xs) !important; }
.mr-2xs,
.mx-2xs {
margin-right: var(--hl-spacer-2xs) !important; }
.mb-2xs,
.my-2xs {
margin-bottom: var(--hl-spacer-2xs) !important; }
.ml-2xs,
.mx-2xs {
margin-left: var(--hl-spacer-2xs) !important; }
.m-xs {
margin: var(--hl-spacer-xs) !important; }
.mt-xs,
.my-xs {
margin-top: var(--hl-spacer-xs) !important; }
.mr-xs,
.mx-xs {
margin-right: var(--hl-spacer-xs) !important; }
.mb-xs,
.my-xs {
margin-bottom: var(--hl-spacer-xs) !important; }
.ml-xs,
.mx-xs {
margin-left: var(--hl-spacer-xs) !important; }
.m-sm {
margin: var(--hl-spacer-sm) !important; }
.mt-sm,
.my-sm {
margin-top: var(--hl-spacer-sm) !important; }
.mr-sm,
.mx-sm {
margin-right: var(--hl-spacer-sm) !important; }
.mb-sm,
.my-sm {
margin-bottom: var(--hl-spacer-sm) !important; }
.ml-sm,
.mx-sm {
margin-left: var(--hl-spacer-sm) !important; }
.m-md {
margin: var(--hl-spacer-md) !important; }
.mt-md,
.my-md {
margin-top: var(--hl-spacer-md) !important; }
.mr-md,
.mx-md {
margin-right: var(--hl-spacer-md) !important; }
.mb-md,
.my-md {
margin-bottom: var(--hl-spacer-md) !important; }
.ml-md,
.mx-md {
margin-left: var(--hl-spacer-md) !important; }
.m-lg {
margin: var(--hl-spacer-lg) !important; }
.mt-lg,
.my-lg {
margin-top: var(--hl-spacer-lg) !important; }
.mr-lg,
.mx-lg {
margin-right: var(--hl-spacer-lg) !important; }
.mb-lg,
.my-lg {
margin-bottom: var(--hl-spacer-lg) !important; }
.ml-lg,
.mx-lg {
margin-left: var(--hl-spacer-lg) !important; }
.m-xl {
margin: var(--hl-spacer-xl) !important; }
.mt-xl,
.my-xl {
margin-top: var(--hl-spacer-xl) !important; }
.mr-xl,
.mx-xl {
margin-right: var(--hl-spacer-xl) !important; }
.mb-xl,
.my-xl {
margin-bottom: var(--hl-spacer-xl) !important; }
.ml-xl,
.mx-xl {
margin-left: var(--hl-spacer-xl) !important; }
.m-2xl {
margin: var(--hl-spacer-2xl) !important; }
.mt-2xl,
.my-2xl {
margin-top: var(--hl-spacer-2xl) !important; }
.mr-2xl,
.mx-2xl {
margin-right: var(--hl-spacer-2xl) !important; }
.mb-2xl,
.my-2xl {
margin-bottom: var(--hl-spacer-2xl) !important; }
.ml-2xl,
.mx-2xl {
margin-left: var(--hl-spacer-2xl) !important; }
.m-3xl {
margin: var(--hl-spacer-3xl) !important; }
.mt-3xl,
.my-3xl {
margin-top: var(--hl-spacer-3xl) !important; }
.mr-3xl,
.mx-3xl {
margin-right: var(--hl-spacer-3xl) !important; }
.mb-3xl,
.my-3xl {
margin-bottom: var(--hl-spacer-3xl) !important; }
.ml-3xl,
.mx-3xl {
margin-left: var(--hl-spacer-3xl) !important; }
.m-4xl {
margin: var(--hl-spacer-4xl) !important; }
.mt-4xl,
.my-4xl {
margin-top: var(--hl-spacer-4xl) !important; }
.mr-4xl,
.mx-4xl {
margin-right: var(--hl-spacer-4xl) !important; }
.mb-4xl,
.my-4xl {
margin-bottom: var(--hl-spacer-4xl) !important; }
.ml-4xl,
.mx-4xl {
margin-left: var(--hl-spacer-4xl) !important; }
.m-5xl {
margin: var(--hl-spacer-5xl) !important; }
.mt-5xl,
.my-5xl {
margin-top: var(--hl-spacer-5xl) !important; }
.mr-5xl,
.mx-5xl {
margin-right: var(--hl-spacer-5xl) !important; }
.mb-5xl,
.my-5xl {
margin-bottom: var(--hl-spacer-5xl) !important; }
.ml-5xl,
.mx-5xl {
margin-left: var(--hl-spacer-5xl) !important; }
.m-6xl {
margin: var(--hl-spacer-6xl) !important; }
.mt-6xl,
.my-6xl {
margin-top: var(--hl-spacer-6xl) !important; }
.mr-6xl,
.mx-6xl {
margin-right: var(--hl-spacer-6xl) !important; }
.mb-6xl,
.my-6xl {
margin-bottom: var(--hl-spacer-6xl) !important; }
.ml-6xl,
.mx-6xl {
margin-left: var(--hl-spacer-6xl) !important; }
.m-7xl {
margin: var(--hl-spacer-7xl) !important; }
.mt-7xl,
.my-7xl {
margin-top: var(--hl-spacer-7xl) !important; }
.mr-7xl,
.mx-7xl {
margin-right: var(--hl-spacer-7xl) !important; }
.mb-7xl,
.my-7xl {
margin-bottom: var(--hl-spacer-7xl) !important; }
.ml-7xl,
.mx-7xl {
margin-left: var(--hl-spacer-7xl) !important; }
.p-0, .charger-btn {
padding: 0 !important; }
.pt-0,
.py-0 {
padding-top: 0 !important; }
.pr-0,
.px-0 {
padding-right: 0 !important; }
.pb-0,
.py-0 {
padding-bottom: 0 !important; }
.pl-0,
.px-0 {
padding-left: 0 !important; }
.p-1 {
padding: var(--hl-spacer-2xs) !important; }
.pt-1,
.py-1 {
padding-top: var(--hl-spacer-2xs) !important; }
.pr-1,
.px-1 {
padding-right: var(--hl-spacer-2xs) !important; }
.pb-1,
.py-1 {
padding-bottom: var(--hl-spacer-2xs) !important; }
.pl-1,
.px-1 {
padding-left: var(--hl-spacer-2xs) !important; }
.p-2 {
padding: var(--hl-spacer-xs) !important; }
.pt-2,
.py-2 {
padding-top: var(--hl-spacer-xs) !important; }
.pr-2,
.px-2 {
padding-right: var(--hl-spacer-xs) !important; }
.pb-2,
.py-2 {
padding-bottom: var(--hl-spacer-xs) !important; }
.pl-2,
.px-2 {
padding-left: var(--hl-spacer-xs) !important; }
.p-3 {
padding: var(--hl-spacer-md) !important; }
.pt-3,
.py-3 {
padding-top: var(--hl-spacer-md) !important; }
.pr-3,
.px-3 {
padding-right: var(--hl-spacer-md) !important; }
.pb-3,
.py-3 {
padding-bottom: var(--hl-spacer-md) !important; }
.pl-3,
.px-3 {
padding-left: var(--hl-spacer-md) !important; }
.p-4 {
padding: var(--hl-spacer-lg) !important; }
.pt-4,
.py-4 {
padding-top: var(--hl-spacer-lg) !important; }
.pr-4,
.px-4 {
padding-right: var(--hl-spacer-lg) !important; }
.pb-4,
.py-4 {
padding-bottom: var(--hl-spacer-lg) !important; }
.pl-4,
.px-4 {
padding-left: var(--hl-spacer-lg) !important; }
.p-5 {
padding: var(--hl-spacer-3xl) !important; }
.pt-5,
.py-5 {
padding-top: var(--hl-spacer-3xl) !important; }
.pr-5,
.px-5 {
padding-right: var(--hl-spacer-3xl) !important; }
.pb-5,
.py-5 {
padding-bottom: var(--hl-spacer-3xl) !important; }
.pl-5,
.px-5 {
padding-left: var(--hl-spacer-3xl) !important; }
.p-3xs {
padding: var(--hl-spacer-3xs) !important; }
.pt-3xs,
.py-3xs {
padding-top: var(--hl-spacer-3xs) !important; }
.pr-3xs,
.px-3xs {
padding-right: var(--hl-spacer-3xs) !important; }
.pb-3xs,
.py-3xs {
padding-bottom: var(--hl-spacer-3xs) !important; }
.pl-3xs,
.px-3xs {
padding-left: var(--hl-spacer-3xs) !important; }
.p-2xs {
padding: var(--hl-spacer-2xs) !important; }
.pt-2xs,
.py-2xs {
padding-top: var(--hl-spacer-2xs) !important; }
.pr-2xs,
.px-2xs {
padding-right: var(--hl-spacer-2xs) !important; }
.pb-2xs,
.py-2xs {
padding-bottom: var(--hl-spacer-2xs) !important; }
.pl-2xs,
.px-2xs {
padding-left: var(--hl-spacer-2xs) !important; }
.p-xs {
padding: var(--hl-spacer-xs) !important; }
.pt-xs,
.py-xs {
padding-top: var(--hl-spacer-xs) !important; }
.pr-xs,
.px-xs {
padding-right: var(--hl-spacer-xs) !important; }
.pb-xs,
.py-xs {
padding-bottom: var(--hl-spacer-xs) !important; }
.pl-xs,
.px-xs {
padding-left: var(--hl-spacer-xs) !important; }
.p-sm {
padding: var(--hl-spacer-sm) !important; }
.pt-sm,
.py-sm {
padding-top: var(--hl-spacer-sm) !important; }
.pr-sm,
.px-sm {
padding-right: var(--hl-spacer-sm) !important; }
.pb-sm,
.py-sm {
padding-bottom: var(--hl-spacer-sm) !important; }
.pl-sm,
.px-sm {
padding-left: var(--hl-spacer-sm) !important; }
.p-md {
padding: var(--hl-spacer-md) !important; }
.pt-md,
.py-md {
padding-top: var(--hl-spacer-md) !important; }
.pr-md,
.px-md {
padding-right: var(--hl-spacer-md) !important; }
.pb-md,
.py-md {
padding-bottom: var(--hl-spacer-md) !important; }
.pl-md,
.px-md {
padding-left: var(--hl-spacer-md) !important; }
.p-lg {
padding: var(--hl-spacer-lg) !important; }
.pt-lg,
.py-lg {
padding-top: var(--hl-spacer-lg) !important; }
.pr-lg,
.px-lg {
padding-right: var(--hl-spacer-lg) !important; }
.pb-lg,
.py-lg {
padding-bottom: var(--hl-spacer-lg) !important; }
.pl-lg,
.px-lg {
padding-left: var(--hl-spacer-lg) !important; }
.p-xl {
padding: var(--hl-spacer-xl) !important; }
.pt-xl,
.py-xl {
padding-top: var(--hl-spacer-xl) !important; }
.pr-xl,
.px-xl {
padding-right: var(--hl-spacer-xl) !important; }
.pb-xl,
.py-xl {
padding-bottom: var(--hl-spacer-xl) !important; }
.pl-xl,
.px-xl {
padding-left: var(--hl-spacer-xl) !important; }
.p-2xl {
padding: var(--hl-spacer-2xl) !important; }
.pt-2xl,
.py-2xl {
padding-top: var(--hl-spacer-2xl) !important; }
.pr-2xl,
.px-2xl {
padding-right: var(--hl-spacer-2xl) !important; }
.pb-2xl,
.py-2xl {
padding-bottom: var(--hl-spacer-2xl) !important; }
.pl-2xl,
.px-2xl {
padding-left: var(--hl-spacer-2xl) !important; }
.p-3xl {
padding: var(--hl-spacer-3xl) !important; }
.pt-3xl,
.py-3xl {
padding-top: var(--hl-spacer-3xl) !important; }
.pr-3xl,
.px-3xl {
padding-right: var(--hl-spacer-3xl) !important; }
.pb-3xl,
.py-3xl {
padding-bottom: var(--hl-spacer-3xl) !important; }
.pl-3xl,
.px-3xl {
padding-left: var(--hl-spacer-3xl) !important; }
.p-4xl {
padding: var(--hl-spacer-4xl) !important; }
.pt-4xl,
.py-4xl {
padding-top: var(--hl-spacer-4xl) !important; }
.pr-4xl,
.px-4xl {
padding-right: var(--hl-spacer-4xl) !important; }
.pb-4xl,
.py-4xl {
padding-bottom: var(--hl-spacer-4xl) !important; }
.pl-4xl,
.px-4xl {
padding-left: var(--hl-spacer-4xl) !important; }
.p-5xl {
padding: var(--hl-spacer-5xl) !important; }
.pt-5xl,
.py-5xl {
padding-top: var(--hl-spacer-5xl) !important; }
.pr-5xl,
.px-5xl {
padding-right: var(--hl-spacer-5xl) !important; }
.pb-5xl,
.py-5xl {
padding-bottom: var(--hl-spacer-5xl) !important; }
.pl-5xl,
.px-5xl {
padding-left: var(--hl-spacer-5xl) !important; }
.p-6xl {
padding: var(--hl-spacer-6xl) !important; }
.pt-6xl,
.py-6xl {
padding-top: var(--hl-spacer-6xl) !important; }
.pr-6xl,
.px-6xl {
padding-right: var(--hl-spacer-6xl) !important; }
.pb-6xl,
.py-6xl {
padding-bottom: var(--hl-spacer-6xl) !important; }
.pl-6xl,
.px-6xl {
padding-left: var(--hl-spacer-6xl) !important; }
.p-7xl {
padding: var(--hl-spacer-7xl) !important; }
.pt-7xl,
.py-7xl {
padding-top: var(--hl-spacer-7xl) !important; }
.pr-7xl,
.px-7xl {
padding-right: var(--hl-spacer-7xl) !important; }
.pb-7xl,
.py-7xl {
padding-bottom: var(--hl-spacer-7xl) !important; }
.pl-7xl,
.px-7xl {
padding-left: var(--hl-spacer-7xl) !important; }
.m-auto {
margin: auto !important; }
.mt-auto,
.my-auto {
margin-top: auto !important; }
.mr-auto,
.mx-auto {
margin-right: auto !important; }
.mb-auto,
.my-auto {
margin-bottom: auto !important; }
.ml-auto,
.mx-auto {
margin-left: auto !important; }
@media (min-width: 576px) {
.m-sm-0 {
margin: 0 !important; }
.mt-sm-0,
.my-sm-0 {
margin-top: 0 !important; }
.mr-sm-0,
.mx-sm-0 {
margin-right: 0 !important; }
.mb-sm-0,
.my-sm-0 {
margin-bottom: 0 !important; }
.ml-sm-0,
.mx-sm-0 {
margin-left: 0 !important; }
.m-sm-1 {
margin: var(--hl-spacer-2xs) !important; }
.mt-sm-1,
.my-sm-1 {
margin-top: var(--hl-spacer-2xs) !important; }
.mr-sm-1,
.mx-sm-1 {
margin-right: var(--hl-spacer-2xs) !important; }
.mb-sm-1,
.my-sm-1 {
margin-bottom: var(--hl-spacer-2xs) !important; }
.ml-sm-1,
.mx-sm-1 {
margin-left: var(--hl-spacer-2xs) !important; }
.m-sm-2 {
margin: var(--hl-spacer-xs) !important; }
.mt-sm-2,
.my-sm-2 {
margin-top: var(--hl-spacer-xs) !important; }
.mr-sm-2,
.mx-sm-2 {
margin-right: var(--hl-spacer-xs) !important; }
.mb-sm-2,
.my-sm-2 {
margin-bottom: var(--hl-spacer-xs) !important; }
.ml-sm-2,
.mx-sm-2 {
margin-left: var(--hl-spacer-xs) !important; }
.m-sm-3 {
margin: var(--hl-spacer-md) !important; }
.mt-sm-3,
.my-sm-3 {
margin-top: var(--hl-spacer-md) !important; }
.mr-sm-3,
.mx-sm-3 {
margin-right: var(--hl-spacer-md) !important; }
.mb-sm-3,
.my-sm-3 {
margin-bottom: var(--hl-spacer-md) !important; }
.ml-sm-3,
.mx-sm-3 {
margin-left: var(--hl-spacer-md) !important; }
.m-sm-4 {
margin: var(--hl-spacer-lg) !important; }
.mt-sm-4,
.my-sm-4 {
margin-top: var(--hl-spacer-lg) !important; }
.mr-sm-4,
.mx-sm-4 {
margin-right: var(--hl-spacer-lg) !important; }
.mb-sm-4,
.my-sm-4 {
margin-bottom: var(--hl-spacer-lg) !important; }
.ml-sm-4,
.mx-sm-4 {
margin-left: var(--hl-spacer-lg) !important; }
.m-sm-5 {
margin: var(--hl-spacer-3xl) !important; }
.mt-sm-5,
.my-sm-5 {
margin-top: var(--hl-spacer-3xl) !important; }
.mr-sm-5,
.mx-sm-5 {
margin-right: var(--hl-spacer-3xl) !important; }
.mb-sm-5,
.my-sm-5 {
margin-bottom: var(--hl-spacer-3xl) !important; }
.ml-sm-5,
.mx-sm-5 {
margin-left: var(--hl-spacer-3xl) !important; }
.m-sm-3xs {
margin: var(--hl-spacer-3xs) !important; }
.mt-sm-3xs,
.my-sm-3xs {
margin-top: var(--hl-spacer-3xs) !important; }
.mr-sm-3xs,
.mx-sm-3xs {
margin-right: var(--hl-spacer-3xs) !important; }
.mb-sm-3xs,
.my-sm-3xs {
margin-bottom: var(--hl-spacer-3xs) !important; }
.ml-sm-3xs,
.mx-sm-3xs {
margin-left: var(--hl-spacer-3xs) !important; }
.m-sm-2xs {
margin: var(--hl-spacer-2xs) !important; }
.mt-sm-2xs,
.my-sm-2xs {
margin-top: var(--hl-spacer-2xs) !important; }
.mr-sm-2xs,
.mx-sm-2xs {
margin-right: var(--hl-spacer-2xs) !important; }
.mb-sm-2xs,
.my-sm-2xs {
margin-bottom: var(--hl-spacer-2xs) !important; }
.ml-sm-2xs,
.mx-sm-2xs {
margin-left: var(--hl-spacer-2xs) !important; }
.m-sm-xs {
margin: var(--hl-spacer-xs) !important; }
.mt-sm-xs,
.my-sm-xs {
margin-top: var(--hl-spacer-xs) !important; }
.mr-sm-xs,
.mx-sm-xs {
margin-right: var(--hl-spacer-xs) !important; }
.mb-sm-xs,
.my-sm-xs {
margin-bottom: var(--hl-spacer-xs) !important; }
.ml-sm-xs,
.mx-sm-xs {
margin-left: var(--hl-spacer-xs) !important; }
.m-sm-sm {
margin: var(--hl-spacer-sm) !important; }
.mt-sm-sm,
.my-sm-sm {
margin-top: var(--hl-spacer-sm) !important; }
.mr-sm-sm,
.mx-sm-sm {
margin-right: var(--hl-spacer-sm) !important; }
.mb-sm-sm,
.my-sm-sm {
margin-bottom: var(--hl-spacer-sm) !important; }
.ml-sm-sm,
.mx-sm-sm {
margin-left: var(--hl-spacer-sm) !important; }
.m-sm-md {
margin: var(--hl-spacer-md) !important; }
.mt-sm-md,
.my-sm-md {
margin-top: var(--hl-spacer-md) !important; }
.mr-sm-md,
.mx-sm-md {
margin-right: var(--hl-spacer-md) !important; }
.mb-sm-md,
.my-sm-md {
margin-bottom: var(--hl-spacer-md) !important; }
.ml-sm-md,
.mx-sm-md {
margin-left: var(--hl-spacer-md) !important; }
.m-sm-lg {
margin: var(--hl-spacer-lg) !important; }
.mt-sm-lg,
.my-sm-lg {
margin-top: var(--hl-spacer-lg) !important; }
.mr-sm-lg,
.mx-sm-lg {
margin-right: var(--hl-spacer-lg) !important; }
.mb-sm-lg,
.my-sm-lg {
margin-bottom: var(--hl-spacer-lg) !important; }
.ml-sm-lg,
.mx-sm-lg {
margin-left: var(--hl-spacer-lg) !important; }
.m-sm-xl {
margin: var(--hl-spacer-xl) !important; }
.mt-sm-xl,
.my-sm-xl {
margin-top: var(--hl-spacer-xl) !important; }
.mr-sm-xl,
.mx-sm-xl {
margin-right: var(--hl-spacer-xl) !important; }
.mb-sm-xl,
.my-sm-xl {
margin-bottom: var(--hl-spacer-xl) !important; }
.ml-sm-xl,
.mx-sm-xl {
margin-left: var(--hl-spacer-xl) !important; }
.m-sm-2xl {
margin: var(--hl-spacer-2xl) !important; }
.mt-sm-2xl,
.my-sm-2xl {
margin-top: var(--hl-spacer-2xl) !important; }
.mr-sm-2xl,
.mx-sm-2xl {
margin-right: var(--hl-spacer-2xl) !important; }
.mb-sm-2xl,
.my-sm-2xl {
margin-bottom: var(--hl-spacer-2xl) !important; }
.ml-sm-2xl,
.mx-sm-2xl {
margin-left: var(--hl-spacer-2xl) !important; }
.m-sm-3xl {
margin: var(--hl-spacer-3xl) !important; }
.mt-sm-3xl,
.my-sm-3xl {
margin-top: var(--hl-spacer-3xl) !important; }
.mr-sm-3xl,
.mx-sm-3xl {
margin-right: var(--hl-spacer-3xl) !important; }
.mb-sm-3xl,
.my-sm-3xl {
margin-bottom: var(--hl-spacer-3xl) !important; }
.ml-sm-3xl,
.mx-sm-3xl {
margin-left: var(--hl-spacer-3xl) !important; }
.m-sm-4xl {
margin: var(--hl-spacer-4xl) !important; }
.mt-sm-4xl,
.my-sm-4xl {
margin-top: var(--hl-spacer-4xl) !important; }
.mr-sm-4xl,
.mx-sm-4xl {
margin-right: var(--hl-spacer-4xl) !important; }
.mb-sm-4xl,
.my-sm-4xl {
margin-bottom: var(--hl-spacer-4xl) !important; }
.ml-sm-4xl,
.mx-sm-4xl {
margin-left: var(--hl-spacer-4xl) !important; }
.m-sm-5xl {
margin: var(--hl-spacer-5xl) !important; }
.mt-sm-5xl,
.my-sm-5xl {
margin-top: var(--hl-spacer-5xl) !important; }
.mr-sm-5xl,
.mx-sm-5xl {
margin-right: var(--hl-spacer-5xl) !important; }
.mb-sm-5xl,
.my-sm-5xl {
margin-bottom: var(--hl-spacer-5xl) !important; }
.ml-sm-5xl,
.mx-sm-5xl {
margin-left: var(--hl-spacer-5xl) !important; }
.m-sm-6xl {
margin: var(--hl-spacer-6xl) !important; }
.mt-sm-6xl,
.my-sm-6xl {
margin-top: var(--hl-spacer-6xl) !important; }
.mr-sm-6xl,
.mx-sm-6xl {
margin-right: var(--hl-spacer-6xl) !important; }
.mb-sm-6xl,
.my-sm-6xl {
margin-bottom: var(--hl-spacer-6xl) !important; }
.ml-sm-6xl,
.mx-sm-6xl {
margin-left: var(--hl-spacer-6xl) !important; }
.m-sm-7xl {
margin: var(--hl-spacer-7xl) !important; }
.mt-sm-7xl,
.my-sm-7xl {
margin-top: var(--hl-spacer-7xl) !important; }
.mr-sm-7xl,
.mx-sm-7xl {
margin-right: var(--hl-spacer-7xl) !important; }
.mb-sm-7xl,
.my-sm-7xl {
margin-bottom: var(--hl-spacer-7xl) !important; }
.ml-sm-7xl,
.mx-sm-7xl {
margin-left: var(--hl-spacer-7xl) !important; }
.p-sm-0 {
padding: 0 !important; }
.pt-sm-0,
.py-sm-0 {
padding-top: 0 !important; }
.pr-sm-0,
.px-sm-0 {
padding-right: 0 !important; }
.pb-sm-0,
.py-sm-0 {
padding-bottom: 0 !important; }
.pl-sm-0,
.px-sm-0 {
padding-left: 0 !important; }
.p-sm-1 {
padding: var(--hl-spacer-2xs) !important; }
.pt-sm-1,
.py-sm-1 {
padding-top: var(--hl-spacer-2xs) !important; }
.pr-sm-1,
.px-sm-1 {
padding-right: var(--hl-spacer-2xs) !important; }
.pb-sm-1,
.py-sm-1 {
padding-bottom: var(--hl-spacer-2xs) !important; }
.pl-sm-1,
.px-sm-1 {
padding-left: var(--hl-spacer-2xs) !important; }
.p-sm-2 {
padding: var(--hl-spacer-xs) !important; }
.pt-sm-2,
.py-sm-2 {
padding-top: var(--hl-spacer-xs) !important; }
.pr-sm-2,
.px-sm-2 {
padding-right: var(--hl-spacer-xs) !important; }
.pb-sm-2,
.py-sm-2 {
padding-bottom: var(--hl-spacer-xs) !important; }
.pl-sm-2,
.px-sm-2 {
padding-left: var(--hl-spacer-xs) !important; }
.p-sm-3 {
padding: var(--hl-spacer-md) !important; }
.pt-sm-3,
.py-sm-3 {
padding-top: var(--hl-spacer-md) !important; }
.pr-sm-3,
.px-sm-3 {
padding-right: var(--hl-spacer-md) !important; }
.pb-sm-3,
.py-sm-3 {
padding-bottom: var(--hl-spacer-md) !important; }
.pl-sm-3,
.px-sm-3 {
padding-left: var(--hl-spacer-md) !important; }
.p-sm-4 {
padding: var(--hl-spacer-lg) !important; }
.pt-sm-4,
.py-sm-4 {
padding-top: var(--hl-spacer-lg) !important; }
.pr-sm-4,
.px-sm-4 {
padding-right: var(--hl-spacer-lg) !important; }
.pb-sm-4,
.py-sm-4 {
padding-bottom: var(--hl-spacer-lg) !important; }
.pl-sm-4,
.px-sm-4 {
padding-left: var(--hl-spacer-lg) !important; }
.p-sm-5 {
padding: var(--hl-spacer-3xl) !important; }
.pt-sm-5,
.py-sm-5 {
padding-top: var(--hl-spacer-3xl) !important; }
.pr-sm-5,
.px-sm-5 {
padding-right: var(--hl-spacer-3xl) !important; }
.pb-sm-5,
.py-sm-5 {
padding-bottom: var(--hl-spacer-3xl) !important; }
.pl-sm-5,
.px-sm-5 {
padding-left: var(--hl-spacer-3xl) !important; }
.p-sm-3xs {
padding: var(--hl-spacer-3xs) !important; }
.pt-sm-3xs,
.py-sm-3xs {
padding-top: var(--hl-spacer-3xs) !important; }
.pr-sm-3xs,
.px-sm-3xs {
padding-right: var(--hl-spacer-3xs) !important; }
.pb-sm-3xs,
.py-sm-3xs {
padding-bottom: var(--hl-spacer-3xs) !important; }
.pl-sm-3xs,
.px-sm-3xs {
padding-left: var(--hl-spacer-3xs) !important; }
.p-sm-2xs {
padding: var(--hl-spacer-2xs) !important; }
.pt-sm-2xs,
.py-sm-2xs {
padding-top: var(--hl-spacer-2xs) !important; }
.pr-sm-2xs,
.px-sm-2xs {
padding-right: var(--hl-spacer-2xs) !important; }
.pb-sm-2xs,
.py-sm-2xs {
padding-bottom: var(--hl-spacer-2xs) !important; }
.pl-sm-2xs,
.px-sm-2xs {
padding-left: var(--hl-spacer-2xs) !important; }
.p-sm-xs {
padding: var(--hl-spacer-xs) !important; }
.pt-sm-xs,
.py-sm-xs {
padding-top: var(--hl-spacer-xs) !important; }
.pr-sm-xs,
.px-sm-xs {
padding-right: var(--hl-spacer-xs) !important; }
.pb-sm-xs,
.py-sm-xs {
padding-bottom: var(--hl-spacer-xs) !important; }
.pl-sm-xs,
.px-sm-xs {
padding-left: var(--hl-spacer-xs) !important; }
.p-sm-sm {
padding: var(--hl-spacer-sm) !important; }
.pt-sm-sm,
.py-sm-sm {
padding-top: var(--hl-spacer-sm) !important; }
.pr-sm-sm,
.px-sm-sm {
padding-right: var(--hl-spacer-sm) !important; }
.pb-sm-sm,
.py-sm-sm {
padding-bottom: var(--hl-spacer-sm) !important; }
.pl-sm-sm,
.px-sm-sm {
padding-left: var(--hl-spacer-sm) !important; }
.p-sm-md {
padding: var(--hl-spacer-md) !important; }
.pt-sm-md,
.py-sm-md {
padding-top: var(--hl-spacer-md) !important; }
.pr-sm-md,
.px-sm-md {
padding-right: var(--hl-spacer-md) !important; }
.pb-sm-md,
.py-sm-md {
padding-bottom: var(--hl-spacer-md) !important; }
.pl-sm-md,
.px-sm-md {
padding-left: var(--hl-spacer-md) !important; }
.p-sm-lg {
padding: var(--hl-spacer-lg) !important; }
.pt-sm-lg,
.py-sm-lg {
padding-top: var(--hl-spacer-lg) !important; }
.pr-sm-lg,
.px-sm-lg {
padding-right: var(--hl-spacer-lg) !important; }
.pb-sm-lg,
.py-sm-lg {
padding-bottom: var(--hl-spacer-lg) !important; }
.pl-sm-lg,
.px-sm-lg {
padding-left: var(--hl-spacer-lg) !important; }
.p-sm-xl {
padding: var(--hl-spacer-xl) !important; }
.pt-sm-xl,
.py-sm-xl {
padding-top: var(--hl-spacer-xl) !important; }
.pr-sm-xl,
.px-sm-xl {
padding-right: var(--hl-spacer-xl) !important; }
.pb-sm-xl,
.py-sm-xl {
padding-bottom: var(--hl-spacer-xl) !important; }
.pl-sm-xl,
.px-sm-xl {
padding-left: var(--hl-spacer-xl) !important; }
.p-sm-2xl {
padding: var(--hl-spacer-2xl) !important; }
.pt-sm-2xl,
.py-sm-2xl {
padding-top: var(--hl-spacer-2xl) !important; }
.pr-sm-2xl,
.px-sm-2xl {
padding-right: var(--hl-spacer-2xl) !important; }
.pb-sm-2xl,
.py-sm-2xl {
padding-bottom: var(--hl-spacer-2xl) !important; }
.pl-sm-2xl,
.px-sm-2xl {
padding-left: var(--hl-spacer-2xl) !important; }
.p-sm-3xl {
padding: var(--hl-spacer-3xl) !important; }
.pt-sm-3xl,
.py-sm-3xl {
padding-top: var(--hl-spacer-3xl) !important; }
.pr-sm-3xl,
.px-sm-3xl {
padding-right: var(--hl-spacer-3xl) !important; }
.pb-sm-3xl,
.py-sm-3xl {
padding-bottom: var(--hl-spacer-3xl) !important; }
.pl-sm-3xl,
.px-sm-3xl {
padding-left: var(--hl-spacer-3xl) !important; }
.p-sm-4xl {
padding: var(--hl-spacer-4xl) !important; }
.pt-sm-4xl,
.py-sm-4xl {
padding-top: var(--hl-spacer-4xl) !important; }
.pr-sm-4xl,
.px-sm-4xl {
padding-right: var(--hl-spacer-4xl) !important; }
.pb-sm-4xl,
.py-sm-4xl {
padding-bottom: var(--hl-spacer-4xl) !important; }
.pl-sm-4xl,
.px-sm-4xl {
padding-left: var(--hl-spacer-4xl) !important; }
.p-sm-5xl {
padding: var(--hl-spacer-5xl) !important; }
.pt-sm-5xl,
.py-sm-5xl {
padding-top: var(--hl-spacer-5xl) !important; }
.pr-sm-5xl,
.px-sm-5xl {
padding-right: var(--hl-spacer-5xl) !important; }
.pb-sm-5xl,
.py-sm-5xl {
padding-bottom: var(--hl-spacer-5xl) !important; }
.pl-sm-5xl,
.px-sm-5xl {
padding-left: var(--hl-spacer-5xl) !important; }
.p-sm-6xl {
padding: var(--hl-spacer-6xl) !important; }
.pt-sm-6xl,
.py-sm-6xl {
padding-top: var(--hl-spacer-6xl) !important; }
.pr-sm-6xl,
.px-sm-6xl {
padding-right: var(--hl-spacer-6xl) !important; }
.pb-sm-6xl,
.py-sm-6xl {
padding-bottom: var(--hl-spacer-6xl) !important; }
.pl-sm-6xl,
.px-sm-6xl {
padding-left: var(--hl-spacer-6xl) !important; }
.p-sm-7xl {
padding: var(--hl-spacer-7xl) !important; }
.pt-sm-7xl,
.py-sm-7xl {
padding-top: var(--hl-spacer-7xl) !important; }
.pr-sm-7xl,
.px-sm-7xl {
padding-right: var(--hl-spacer-7xl) !important; }
.pb-sm-7xl,
.py-sm-7xl {
padding-bottom: var(--hl-spacer-7xl) !important; }
.pl-sm-7xl,
.px-sm-7xl {
padding-left: var(--hl-spacer-7xl) !important; }
.m-sm-auto {
margin: auto !important; }
.mt-sm-auto,
.my-sm-auto {
margin-top: auto !important; }
.mr-sm-auto,
.mx-sm-auto {
margin-right: auto !important; }
.mb-sm-auto,
.my-sm-auto {
margin-bottom: auto !important; }
.ml-sm-auto,
.mx-sm-auto {
margin-left: auto !important; } }
@media (min-width: 768px) {
.m-md-0 {
margin: 0 !important; }
.mt-md-0,
.my-md-0 {
margin-top: 0 !important; }
.mr-md-0,
.mx-md-0 {
margin-right: 0 !important; }
.mb-md-0,
.my-md-0 {
margin-bottom: 0 !important; }
.ml-md-0,
.mx-md-0 {
margin-left: 0 !important; }
.m-md-1 {
margin: var(--hl-spacer-2xs) !important; }
.mt-md-1,
.my-md-1 {
margin-top: var(--hl-spacer-2xs) !important; }
.mr-md-1,
.mx-md-1 {
margin-right: var(--hl-spacer-2xs) !important; }
.mb-md-1,
.my-md-1 {
margin-bottom: var(--hl-spacer-2xs) !important; }
.ml-md-1,
.mx-md-1 {
margin-left: var(--hl-spacer-2xs) !important; }
.m-md-2 {
margin: var(--hl-spacer-xs) !important; }
.mt-md-2,
.my-md-2 {
margin-top: var(--hl-spacer-xs) !important; }
.mr-md-2,
.mx-md-2 {
margin-right: var(--hl-spacer-xs) !important; }
.mb-md-2,
.my-md-2 {
margin-bottom: var(--hl-spacer-xs) !important; }
.ml-md-2,
.mx-md-2 {
margin-left: var(--hl-spacer-xs) !important; }
.m-md-3 {
margin: var(--hl-spacer-md) !important; }
.mt-md-3,
.my-md-3 {
margin-top: var(--hl-spacer-md) !important; }
.mr-md-3,
.mx-md-3 {
margin-right: var(--hl-spacer-md) !important; }
.mb-md-3,
.my-md-3 {
margin-bottom: var(--hl-spacer-md) !important; }
.ml-md-3,
.mx-md-3 {
margin-left: var(--hl-spacer-md) !important; }
.m-md-4 {
margin: var(--hl-spacer-lg) !important; }
.mt-md-4,
.my-md-4 {
margin-top: var(--hl-spacer-lg) !important; }
.mr-md-4,
.mx-md-4 {
margin-right: var(--hl-spacer-lg) !important; }
.mb-md-4,
.my-md-4 {
margin-bottom: var(--hl-spacer-lg) !important; }
.ml-md-4,
.mx-md-4 {
margin-left: var(--hl-spacer-lg) !important; }
.m-md-5 {
margin: var(--hl-spacer-3xl) !important; }
.mt-md-5,
.my-md-5 {
margin-top: var(--hl-spacer-3xl) !important; }
.mr-md-5,
.mx-md-5 {
margin-right: var(--hl-spacer-3xl) !important; }
.mb-md-5,
.my-md-5 {
margin-bottom: var(--hl-spacer-3xl) !important; }
.ml-md-5,
.mx-md-5 {
margin-left: var(--hl-spacer-3xl) !important; }
.m-md-3xs {
margin: var(--hl-spacer-3xs) !important; }
.mt-md-3xs,
.my-md-3xs {
margin-top: var(--hl-spacer-3xs) !important; }
.mr-md-3xs,
.mx-md-3xs {
margin-right: var(--hl-spacer-3xs) !important; }
.mb-md-3xs,
.my-md-3xs {
margin-bottom: var(--hl-spacer-3xs) !important; }
.ml-md-3xs,
.mx-md-3xs {
margin-left: var(--hl-spacer-3xs) !important; }
.m-md-2xs {
margin: var(--hl-spacer-2xs) !important; }
.mt-md-2xs,
.my-md-2xs {
margin-top: var(--hl-spacer-2xs) !important; }
.mr-md-2xs,
.mx-md-2xs {
margin-right: var(--hl-spacer-2xs) !important; }
.mb-md-2xs,
.my-md-2xs {
margin-bottom: var(--hl-spacer-2xs) !important; }
.ml-md-2xs,
.mx-md-2xs {
margin-left: var(--hl-spacer-2xs) !important; }
.m-md-xs {
margin: var(--hl-spacer-xs) !important; }
.mt-md-xs,
.my-md-xs {
margin-top: var(--hl-spacer-xs) !important; }
.mr-md-xs,
.mx-md-xs {
margin-right: var(--hl-spacer-xs) !important; }
.mb-md-xs,
.my-md-xs {
margin-bottom: var(--hl-spacer-xs) !important; }
.ml-md-xs,
.mx-md-xs {
margin-left: var(--hl-spacer-xs) !important; }
.m-md-sm {
margin: var(--hl-spacer-sm) !important; }
.mt-md-sm,
.my-md-sm {
margin-top: var(--hl-spacer-sm) !important; }
.mr-md-sm,
.mx-md-sm {
margin-right: var(--hl-spacer-sm) !important; }
.mb-md-sm,
.my-md-sm {
margin-bottom: var(--hl-spacer-sm) !important; }
.ml-md-sm,
.mx-md-sm {
margin-left: var(--hl-spacer-sm) !important; }
.m-md-md {
margin: var(--hl-spacer-md) !important; }
.mt-md-md,
.my-md-md {
margin-top: var(--hl-spacer-md) !important; }
.mr-md-md,
.mx-md-md {
margin-right: var(--hl-spacer-md) !important; }
.mb-md-md,
.my-md-md {
margin-bottom: var(--hl-spacer-md) !important; }
.ml-md-md,
.mx-md-md {
margin-left: var(--hl-spacer-md) !important; }
.m-md-lg {
margin: var(--hl-spacer-lg) !important; }
.mt-md-lg,
.my-md-lg {
margin-top: var(--hl-spacer-lg) !important; }
.mr-md-lg,
.mx-md-lg {
margin-right: var(--hl-spacer-lg) !important; }
.mb-md-lg,
.my-md-lg {
margin-bottom: var(--hl-spacer-lg) !important; }
.ml-md-lg,
.mx-md-lg {
margin-left: var(--hl-spacer-lg) !important; }
.m-md-xl {
margin: var(--hl-spacer-xl) !important; }
.mt-md-xl,
.my-md-xl {
margin-top: var(--hl-spacer-xl) !important; }
.mr-md-xl,
.mx-md-xl {
margin-right: var(--hl-spacer-xl) !important; }
.mb-md-xl,
.my-md-xl {
margin-bottom: var(--hl-spacer-xl) !important; }
.ml-md-xl,
.mx-md-xl {
margin-left: var(--hl-spacer-xl) !important; }
.m-md-2xl {
margin: var(--hl-spacer-2xl) !important; }
.mt-md-2xl,
.my-md-2xl {
margin-top: var(--hl-spacer-2xl) !important; }
.mr-md-2xl,
.mx-md-2xl {
margin-right: var(--hl-spacer-2xl) !important; }
.mb-md-2xl,
.my-md-2xl {
margin-bottom: var(--hl-spacer-2xl) !important; }
.ml-md-2xl,
.mx-md-2xl {
margin-left: var(--hl-spacer-2xl) !important; }
.m-md-3xl {
margin: var(--hl-spacer-3xl) !important; }
.mt-md-3xl,
.my-md-3xl {
margin-top: var(--hl-spacer-3xl) !important; }
.mr-md-3xl,
.mx-md-3xl {
margin-right: var(--hl-spacer-3xl) !important; }
.mb-md-3xl,
.my-md-3xl {
margin-bottom: var(--hl-spacer-3xl) !important; }
.ml-md-3xl,
.mx-md-3xl {
margin-left: var(--hl-spacer-3xl) !important; }
.m-md-4xl {
margin: var(--hl-spacer-4xl) !important; }
.mt-md-4xl,
.my-md-4xl {
margin-top: var(--hl-spacer-4xl) !important; }
.mr-md-4xl,
.mx-md-4xl {
margin-right: var(--hl-spacer-4xl) !important; }
.mb-md-4xl,
.my-md-4xl {
margin-bottom: var(--hl-spacer-4xl) !important; }
.ml-md-4xl,
.mx-md-4xl {
margin-left: var(--hl-spacer-4xl) !important; }
.m-md-5xl {
margin: var(--hl-spacer-5xl) !important; }
.mt-md-5xl,
.my-md-5xl {
margin-top: var(--hl-spacer-5xl) !important; }
.mr-md-5xl,
.mx-md-5xl {
margin-right: var(--hl-spacer-5xl) !important; }
.mb-md-5xl,
.my-md-5xl {
margin-bottom: var(--hl-spacer-5xl) !important; }
.ml-md-5xl,
.mx-md-5xl {
margin-left: var(--hl-spacer-5xl) !important; }
.m-md-6xl {
margin: var(--hl-spacer-6xl) !important; }
.mt-md-6xl,
.my-md-6xl {
margin-top: var(--hl-spacer-6xl) !important; }
.mr-md-6xl,
.mx-md-6xl {
margin-right: var(--hl-spacer-6xl) !important; }
.mb-md-6xl,
.my-md-6xl {
margin-bottom: var(--hl-spacer-6xl) !important; }
.ml-md-6xl,
.mx-md-6xl {
margin-left: var(--hl-spacer-6xl) !important; }
.m-md-7xl {
margin: var(--hl-spacer-7xl) !important; }
.mt-md-7xl,
.my-md-7xl {
margin-top: var(--hl-spacer-7xl) !important; }
.mr-md-7xl,
.mx-md-7xl {
margin-right: var(--hl-spacer-7xl) !important; }
.mb-md-7xl,
.my-md-7xl {
margin-bottom: var(--hl-spacer-7xl) !important; }
.ml-md-7xl,
.mx-md-7xl {
margin-left: var(--hl-spacer-7xl) !important; }
.p-md-0 {
padding: 0 !important; }
.pt-md-0,
.py-md-0 {
padding-top: 0 !important; }
.pr-md-0,
.px-md-0 {
padding-right: 0 !important; }
.pb-md-0,
.py-md-0 {
padding-bottom: 0 !important; }
.pl-md-0,
.px-md-0 {
padding-left: 0 !important; }
.p-md-1 {
padding: var(--hl-spacer-2xs) !important; }
.pt-md-1,
.py-md-1 {
padding-top: var(--hl-spacer-2xs) !important; }
.pr-md-1,
.px-md-1 {
padding-right: var(--hl-spacer-2xs) !important; }
.pb-md-1,
.py-md-1 {
padding-bottom: var(--hl-spacer-2xs) !important; }
.pl-md-1,
.px-md-1 {
padding-left: var(--hl-spacer-2xs) !important; }
.p-md-2 {
padding: var(--hl-spacer-xs) !important; }
.pt-md-2,
.py-md-2 {
padding-top: var(--hl-spacer-xs) !important; }
.pr-md-2,
.px-md-2 {
padding-right: var(--hl-spacer-xs) !important; }
.pb-md-2,
.py-md-2 {
padding-bottom: var(--hl-spacer-xs) !important; }
.pl-md-2,
.px-md-2 {
padding-left: var(--hl-spacer-xs) !important; }
.p-md-3 {
padding: var(--hl-spacer-md) !important; }
.pt-md-3,
.py-md-3 {
padding-top: var(--hl-spacer-md) !important; }
.pr-md-3,
.px-md-3 {
padding-right: var(--hl-spacer-md) !important; }
.pb-md-3,
.py-md-3 {
padding-bottom: var(--hl-spacer-md) !important; }
.pl-md-3,
.px-md-3 {
padding-left: var(--hl-spacer-md) !important; }
.p-md-4 {
padding: var(--hl-spacer-lg) !important; }
.pt-md-4,
.py-md-4 {
padding-top: var(--hl-spacer-lg) !important; }
.pr-md-4,
.px-md-4 {
padding-right: var(--hl-spacer-lg) !important; }
.pb-md-4,
.py-md-4 {
padding-bottom: var(--hl-spacer-lg) !important; }
.pl-md-4,
.px-md-4 {
padding-left: var(--hl-spacer-lg) !important; }
.p-md-5 {
padding: var(--hl-spacer-3xl) !important; }
.pt-md-5,
.py-md-5 {
padding-top: var(--hl-spacer-3xl) !important; }
.pr-md-5,
.px-md-5 {
padding-right: var(--hl-spacer-3xl) !important; }
.pb-md-5,
.py-md-5 {
padding-bottom: var(--hl-spacer-3xl) !important; }
.pl-md-5,
.px-md-5 {
padding-left: var(--hl-spacer-3xl) !important; }
.p-md-3xs {
padding: var(--hl-spacer-3xs) !important; }
.pt-md-3xs,
.py-md-3xs {
padding-top: var(--hl-spacer-3xs) !important; }
.pr-md-3xs,
.px-md-3xs {
padding-right: var(--hl-spacer-3xs) !important; }
.pb-md-3xs,
.py-md-3xs {
padding-bottom: var(--hl-spacer-3xs) !important; }
.pl-md-3xs,
.px-md-3xs {
padding-left: var(--hl-spacer-3xs) !important; }
.p-md-2xs {
padding: var(--hl-spacer-2xs) !important; }
.pt-md-2xs,
.py-md-2xs {
padding-top: var(--hl-spacer-2xs) !important; }
.pr-md-2xs,
.px-md-2xs {
padding-right: var(--hl-spacer-2xs) !important; }
.pb-md-2xs,
.py-md-2xs {
padding-bottom: var(--hl-spacer-2xs) !important; }
.pl-md-2xs,
.px-md-2xs {
padding-left: var(--hl-spacer-2xs) !important; }
.p-md-xs {
padding: var(--hl-spacer-xs) !important; }
.pt-md-xs,
.py-md-xs {
padding-top: var(--hl-spacer-xs) !important; }
.pr-md-xs,
.px-md-xs {
padding-right: var(--hl-spacer-xs) !important; }
.pb-md-xs,
.py-md-xs {
padding-bottom: var(--hl-spacer-xs) !important; }
.pl-md-xs,
.px-md-xs {
padding-left: var(--hl-spacer-xs) !important; }
.p-md-sm {
padding: var(--hl-spacer-sm) !important; }
.pt-md-sm,
.py-md-sm {
padding-top: var(--hl-spacer-sm) !important; }
.pr-md-sm,
.px-md-sm {
padding-right: var(--hl-spacer-sm) !important; }
.pb-md-sm,
.py-md-sm {
padding-bottom: var(--hl-spacer-sm) !important; }
.pl-md-sm,
.px-md-sm {
padding-left: var(--hl-spacer-sm) !important; }
.p-md-md {
padding: var(--hl-spacer-md) !important; }
.pt-md-md,
.py-md-md {
padding-top: var(--hl-spacer-md) !important; }
.pr-md-md,
.px-md-md {
padding-right: var(--hl-spacer-md) !important; }
.pb-md-md,
.py-md-md {
padding-bottom: var(--hl-spacer-md) !important; }
.pl-md-md,
.px-md-md {
padding-left: var(--hl-spacer-md) !important; }
.p-md-lg {
padding: var(--hl-spacer-lg) !important; }
.pt-md-lg,
.py-md-lg {
padding-top: var(--hl-spacer-lg) !important; }
.pr-md-lg,
.px-md-lg {
padding-right: var(--hl-spacer-lg) !important; }
.pb-md-lg,
.py-md-lg {
padding-bottom: var(--hl-spacer-lg) !important; }
.pl-md-lg,
.px-md-lg {
padding-left: var(--hl-spacer-lg) !important; }
.p-md-xl {
padding: var(--hl-spacer-xl) !important; }
.pt-md-xl,
.py-md-xl {
padding-top: var(--hl-spacer-xl) !important; }
.pr-md-xl,
.px-md-xl {
padding-right: var(--hl-spacer-xl) !important; }
.pb-md-xl,
.py-md-xl {
padding-bottom: var(--hl-spacer-xl) !important; }
.pl-md-xl,
.px-md-xl {
padding-left: var(--hl-spacer-xl) !important; }
.p-md-2xl {
padding: var(--hl-spacer-2xl) !important; }
.pt-md-2xl,
.py-md-2xl {
padding-top: var(--hl-spacer-2xl) !important; }
.pr-md-2xl,
.px-md-2xl {
padding-right: var(--hl-spacer-2xl) !important; }
.pb-md-2xl,
.py-md-2xl {
padding-bottom: var(--hl-spacer-2xl) !important; }
.pl-md-2xl,
.px-md-2xl {
padding-left: var(--hl-spacer-2xl) !important; }
.p-md-3xl {
padding: var(--hl-spacer-3xl) !important; }
.pt-md-3xl,
.py-md-3xl {
padding-top: var(--hl-spacer-3xl) !important; }
.pr-md-3xl,
.px-md-3xl {
padding-right: var(--hl-spacer-3xl) !important; }
.pb-md-3xl,
.py-md-3xl {
padding-bottom: var(--hl-spacer-3xl) !important; }
.pl-md-3xl,
.px-md-3xl {
padding-left: var(--hl-spacer-3xl) !important; }
.p-md-4xl {
padding: var(--hl-spacer-4xl) !important; }
.pt-md-4xl,
.py-md-4xl {
padding-top: var(--hl-spacer-4xl) !important; }
.pr-md-4xl,
.px-md-4xl {
padding-right: var(--hl-spacer-4xl) !important; }
.pb-md-4xl,
.py-md-4xl {
padding-bottom: var(--hl-spacer-4xl) !important; }
.pl-md-4xl,
.px-md-4xl {
padding-left: var(--hl-spacer-4xl) !important; }
.p-md-5xl {
padding: var(--hl-spacer-5xl) !important; }
.pt-md-5xl,
.py-md-5xl {
padding-top: var(--hl-spacer-5xl) !important; }
.pr-md-5xl,
.px-md-5xl {
padding-right: var(--hl-spacer-5xl) !important; }
.pb-md-5xl,
.py-md-5xl {
padding-bottom: var(--hl-spacer-5xl) !important; }
.pl-md-5xl,
.px-md-5xl {
padding-left: var(--hl-spacer-5xl) !important; }
.p-md-6xl {
padding: var(--hl-spacer-6xl) !important; }
.pt-md-6xl,
.py-md-6xl {
padding-top: var(--hl-spacer-6xl) !important; }
.pr-md-6xl,
.px-md-6xl {
padding-right: var(--hl-spacer-6xl) !important; }
.pb-md-6xl,
.py-md-6xl {
padding-bottom: var(--hl-spacer-6xl) !important; }
.pl-md-6xl,
.px-md-6xl {
padding-left: var(--hl-spacer-6xl) !important; }
.p-md-7xl {
padding: var(--hl-spacer-7xl) !important; }
.pt-md-7xl,
.py-md-7xl {
padding-top: var(--hl-spacer-7xl) !important; }
.pr-md-7xl,
.px-md-7xl {
padding-right: var(--hl-spacer-7xl) !important; }
.pb-md-7xl,
.py-md-7xl {
padding-bottom: var(--hl-spacer-7xl) !important; }
.pl-md-7xl,
.px-md-7xl {
padding-left: var(--hl-spacer-7xl) !important; }
.m-md-auto {
margin: auto !important; }
.mt-md-auto,
.my-md-auto {
margin-top: auto !important; }
.mr-md-auto,
.mx-md-auto {
margin-right: auto !important; }
.mb-md-auto,
.my-md-auto {
margin-bottom: auto !important; }
.ml-md-auto,
.mx-md-auto {
margin-left: auto !important; } }
@media (min-width: 992px) {
.m-lg-0 {
margin: 0 !important; }
.mt-lg-0,
.my-lg-0 {
margin-top: 0 !important; }
.mr-lg-0,
.mx-lg-0 {
margin-right: 0 !important; }
.mb-lg-0,
.my-lg-0 {
margin-bottom: 0 !important; }
.ml-lg-0,
.mx-lg-0 {
margin-left: 0 !important; }
.m-lg-1 {
margin: var(--hl-spacer-2xs) !important; }
.mt-lg-1,
.my-lg-1 {
margin-top: var(--hl-spacer-2xs) !important; }
.mr-lg-1,
.mx-lg-1 {
margin-right: var(--hl-spacer-2xs) !important; }
.mb-lg-1,
.my-lg-1 {
margin-bottom: var(--hl-spacer-2xs) !important; }
.ml-lg-1,
.mx-lg-1 {
margin-left: var(--hl-spacer-2xs) !important; }
.m-lg-2 {
margin: var(--hl-spacer-xs) !important; }
.mt-lg-2,
.my-lg-2 {
margin-top: var(--hl-spacer-xs) !important; }
.mr-lg-2,
.mx-lg-2 {
margin-right: var(--hl-spacer-xs) !important; }
.mb-lg-2,
.my-lg-2 {
margin-bottom: var(--hl-spacer-xs) !important; }
.ml-lg-2,
.mx-lg-2 {
margin-left: var(--hl-spacer-xs) !important; }
.m-lg-3 {
margin: var(--hl-spacer-md) !important; }
.mt-lg-3,
.my-lg-3 {
margin-top: var(--hl-spacer-md) !important; }
.mr-lg-3,
.mx-lg-3 {
margin-right: var(--hl-spacer-md) !important; }
.mb-lg-3,
.my-lg-3 {
margin-bottom: var(--hl-spacer-md) !important; }
.ml-lg-3,
.mx-lg-3 {
margin-left: var(--hl-spacer-md) !important; }
.m-lg-4 {
margin: var(--hl-spacer-lg) !important; }
.mt-lg-4,
.my-lg-4 {
margin-top: var(--hl-spacer-lg) !important; }
.mr-lg-4,
.mx-lg-4 {
margin-right: var(--hl-spacer-lg) !important; }
.mb-lg-4,
.my-lg-4 {
margin-bottom: var(--hl-spacer-lg) !important; }
.ml-lg-4,
.mx-lg-4 {
margin-left: var(--hl-spacer-lg) !important; }
.m-lg-5 {
margin: var(--hl-spacer-3xl) !important; }
.mt-lg-5,
.my-lg-5 {
margin-top: var(--hl-spacer-3xl) !important; }
.mr-lg-5,
.mx-lg-5 {
margin-right: var(--hl-spacer-3xl) !important; }
.mb-lg-5,
.my-lg-5 {
margin-bottom: var(--hl-spacer-3xl) !important; }
.ml-lg-5,
.mx-lg-5 {
margin-left: var(--hl-spacer-3xl) !important; }
.m-lg-3xs {
margin: var(--hl-spacer-3xs) !important; }
.mt-lg-3xs,
.my-lg-3xs {
margin-top: var(--hl-spacer-3xs) !important; }
.mr-lg-3xs,
.mx-lg-3xs {
margin-right: var(--hl-spacer-3xs) !important; }
.mb-lg-3xs,
.my-lg-3xs {
margin-bottom: var(--hl-spacer-3xs) !important; }
.ml-lg-3xs,
.mx-lg-3xs {
margin-left: var(--hl-spacer-3xs) !important; }
.m-lg-2xs {
margin: var(--hl-spacer-2xs) !important; }
.mt-lg-2xs,
.my-lg-2xs {
margin-top: var(--hl-spacer-2xs) !important; }
.mr-lg-2xs,
.mx-lg-2xs {
margin-right: var(--hl-spacer-2xs) !important; }
.mb-lg-2xs,
.my-lg-2xs {
margin-bottom: var(--hl-spacer-2xs) !important; }
.ml-lg-2xs,
.mx-lg-2xs {
margin-left: var(--hl-spacer-2xs) !important; }
.m-lg-xs {
margin: var(--hl-spacer-xs) !important; }
.mt-lg-xs,
.my-lg-xs {
margin-top: var(--hl-spacer-xs) !important; }
.mr-lg-xs,
.mx-lg-xs {
margin-right: var(--hl-spacer-xs) !important; }
.mb-lg-xs,
.my-lg-xs {
margin-bottom: var(--hl-spacer-xs) !important; }
.ml-lg-xs,
.mx-lg-xs {
margin-left: var(--hl-spacer-xs) !important; }
.m-lg-sm {
margin: var(--hl-spacer-sm) !important; }
.mt-lg-sm,
.my-lg-sm {
margin-top: var(--hl-spacer-sm) !important; }
.mr-lg-sm,
.mx-lg-sm {
margin-right: var(--hl-spacer-sm) !important; }
.mb-lg-sm,
.my-lg-sm {
margin-bottom: var(--hl-spacer-sm) !important; }
.ml-lg-sm,
.mx-lg-sm {
margin-left: var(--hl-spacer-sm) !important; }
.m-lg-md {
margin: var(--hl-spacer-md) !important; }
.mt-lg-md,
.my-lg-md {
margin-top: var(--hl-spacer-md) !important; }
.mr-lg-md,
.mx-lg-md {
margin-right: var(--hl-spacer-md) !important; }
.mb-lg-md,
.my-lg-md {
margin-bottom: var(--hl-spacer-md) !important; }
.ml-lg-md,
.mx-lg-md {
margin-left: var(--hl-spacer-md) !important; }
.m-lg-lg {
margin: var(--hl-spacer-lg) !important; }
.mt-lg-lg,
.my-lg-lg {
margin-top: var(--hl-spacer-lg) !important; }
.mr-lg-lg,
.mx-lg-lg {
margin-right: var(--hl-spacer-lg) !important; }
.mb-lg-lg,
.my-lg-lg {
margin-bottom: var(--hl-spacer-lg) !important; }
.ml-lg-lg,
.mx-lg-lg {
margin-left: var(--hl-spacer-lg) !important; }
.m-lg-xl {
margin: var(--hl-spacer-xl) !important; }
.mt-lg-xl,
.my-lg-xl {
margin-top: var(--hl-spacer-xl) !important; }
.mr-lg-xl,
.mx-lg-xl {
margin-right: var(--hl-spacer-xl) !important; }
.mb-lg-xl,
.my-lg-xl {
margin-bottom: var(--hl-spacer-xl) !important; }
.ml-lg-xl,
.mx-lg-xl {
margin-left: var(--hl-spacer-xl) !important; }
.m-lg-2xl {
margin: var(--hl-spacer-2xl) !important; }
.mt-lg-2xl,
.my-lg-2xl {
margin-top: var(--hl-spacer-2xl) !important; }
.mr-lg-2xl,
.mx-lg-2xl {
margin-right: var(--hl-spacer-2xl) !important; }
.mb-lg-2xl,
.my-lg-2xl {
margin-bottom: var(--hl-spacer-2xl) !important; }
.ml-lg-2xl,
.mx-lg-2xl {
margin-left: var(--hl-spacer-2xl) !important; }
.m-lg-3xl {
margin: var(--hl-spacer-3xl) !important; }
.mt-lg-3xl,
.my-lg-3xl {
margin-top: var(--hl-spacer-3xl) !important; }
.mr-lg-3xl,
.mx-lg-3xl {
margin-right: var(--hl-spacer-3xl) !important; }
.mb-lg-3xl,
.my-lg-3xl {
margin-bottom: var(--hl-spacer-3xl) !important; }
.ml-lg-3xl,
.mx-lg-3xl {
margin-left: var(--hl-spacer-3xl) !important; }
.m-lg-4xl {
margin: var(--hl-spacer-4xl) !important; }
.mt-lg-4xl,
.my-lg-4xl {
margin-top: var(--hl-spacer-4xl) !important; }
.mr-lg-4xl,
.mx-lg-4xl {
margin-right: var(--hl-spacer-4xl) !important; }
.mb-lg-4xl,
.my-lg-4xl {
margin-bottom: var(--hl-spacer-4xl) !important; }
.ml-lg-4xl,
.mx-lg-4xl {
margin-left: var(--hl-spacer-4xl) !important; }
.m-lg-5xl {
margin: var(--hl-spacer-5xl) !important; }
.mt-lg-5xl,
.my-lg-5xl {
margin-top: var(--hl-spacer-5xl) !important; }
.mr-lg-5xl,
.mx-lg-5xl {
margin-right: var(--hl-spacer-5xl) !important; }
.mb-lg-5xl,
.my-lg-5xl {
margin-bottom: var(--hl-spacer-5xl) !important; }
.ml-lg-5xl,
.mx-lg-5xl {
margin-left: var(--hl-spacer-5xl) !important; }
.m-lg-6xl {
margin: var(--hl-spacer-6xl) !important; }
.mt-lg-6xl,
.my-lg-6xl {
margin-top: var(--hl-spacer-6xl) !important; }
.mr-lg-6xl,
.mx-lg-6xl {
margin-right: var(--hl-spacer-6xl) !important; }
.mb-lg-6xl,
.my-lg-6xl {
margin-bottom: var(--hl-spacer-6xl) !important; }
.ml-lg-6xl,
.mx-lg-6xl {
margin-left: var(--hl-spacer-6xl) !important; }
.m-lg-7xl {
margin: var(--hl-spacer-7xl) !important; }
.mt-lg-7xl,
.my-lg-7xl {
margin-top: var(--hl-spacer-7xl) !important; }
.mr-lg-7xl,
.mx-lg-7xl {
margin-right: var(--hl-spacer-7xl) !important; }
.mb-lg-7xl,
.my-lg-7xl {
margin-bottom: var(--hl-spacer-7xl) !important; }
.ml-lg-7xl,
.mx-lg-7xl {
margin-left: var(--hl-spacer-7xl) !important; }
.p-lg-0 {
padding: 0 !important; }
.pt-lg-0,
.py-lg-0 {
padding-top: 0 !important; }
.pr-lg-0,
.px-lg-0 {
padding-right: 0 !important; }
.pb-lg-0,
.py-lg-0 {
padding-bottom: 0 !important; }
.pl-lg-0,
.px-lg-0 {
padding-left: 0 !important; }
.p-lg-1 {
padding: var(--hl-spacer-2xs) !important; }
.pt-lg-1,
.py-lg-1 {
padding-top: var(--hl-spacer-2xs) !important; }
.pr-lg-1,
.px-lg-1 {
padding-right: var(--hl-spacer-2xs) !important; }
.pb-lg-1,
.py-lg-1 {
padding-bottom: var(--hl-spacer-2xs) !important; }
.pl-lg-1,
.px-lg-1 {
padding-left: var(--hl-spacer-2xs) !important; }
.p-lg-2 {
padding: var(--hl-spacer-xs) !important; }
.pt-lg-2,
.py-lg-2 {
padding-top: var(--hl-spacer-xs) !important; }
.pr-lg-2,
.px-lg-2 {
padding-right: var(--hl-spacer-xs) !important; }
.pb-lg-2,
.py-lg-2 {
padding-bottom: var(--hl-spacer-xs) !important; }
.pl-lg-2,
.px-lg-2 {
padding-left: var(--hl-spacer-xs) !important; }
.p-lg-3 {
padding: var(--hl-spacer-md) !important; }
.pt-lg-3,
.py-lg-3 {
padding-top: var(--hl-spacer-md) !important; }
.pr-lg-3,
.px-lg-3 {
padding-right: var(--hl-spacer-md) !important; }
.pb-lg-3,
.py-lg-3 {
padding-bottom: var(--hl-spacer-md) !important; }
.pl-lg-3,
.px-lg-3 {
padding-left: var(--hl-spacer-md) !important; }
.p-lg-4 {
padding: var(--hl-spacer-lg) !important; }
.pt-lg-4,
.py-lg-4 {
padding-top: var(--hl-spacer-lg) !important; }
.pr-lg-4,
.px-lg-4 {
padding-right: var(--hl-spacer-lg) !important; }
.pb-lg-4,
.py-lg-4 {
padding-bottom: var(--hl-spacer-lg) !important; }
.pl-lg-4,
.px-lg-4 {
padding-left: var(--hl-spacer-lg) !important; }
.p-lg-5 {
padding: var(--hl-spacer-3xl) !important; }
.pt-lg-5,
.py-lg-5 {
padding-top: var(--hl-spacer-3xl) !important; }
.pr-lg-5,
.px-lg-5 {
padding-right: var(--hl-spacer-3xl) !important; }
.pb-lg-5,
.py-lg-5 {
padding-bottom: var(--hl-spacer-3xl) !important; }
.pl-lg-5,
.px-lg-5 {
padding-left: var(--hl-spacer-3xl) !important; }
.p-lg-3xs {
padding: var(--hl-spacer-3xs) !important; }
.pt-lg-3xs,
.py-lg-3xs {
padding-top: var(--hl-spacer-3xs) !important; }
.pr-lg-3xs,
.px-lg-3xs {
padding-right: var(--hl-spacer-3xs) !important; }
.pb-lg-3xs,
.py-lg-3xs {
padding-bottom: var(--hl-spacer-3xs) !important; }
.pl-lg-3xs,
.px-lg-3xs {
padding-left: var(--hl-spacer-3xs) !important; }
.p-lg-2xs {
padding: var(--hl-spacer-2xs) !important; }
.pt-lg-2xs,
.py-lg-2xs {
padding-top: var(--hl-spacer-2xs) !important; }
.pr-lg-2xs,
.px-lg-2xs {
padding-right: var(--hl-spacer-2xs) !important; }
.pb-lg-2xs,
.py-lg-2xs {
padding-bottom: var(--hl-spacer-2xs) !important; }
.pl-lg-2xs,
.px-lg-2xs {
padding-left: var(--hl-spacer-2xs) !important; }
.p-lg-xs {
padding: var(--hl-spacer-xs) !important; }
.pt-lg-xs,
.py-lg-xs {
padding-top: var(--hl-spacer-xs) !important; }
.pr-lg-xs,
.px-lg-xs {
padding-right: var(--hl-spacer-xs) !important; }
.pb-lg-xs,
.py-lg-xs {
padding-bottom: var(--hl-spacer-xs) !important; }
.pl-lg-xs,
.px-lg-xs {
padding-left: var(--hl-spacer-xs) !important; }
.p-lg-sm {
padding: var(--hl-spacer-sm) !important; }
.pt-lg-sm,
.py-lg-sm {
padding-top: var(--hl-spacer-sm) !important; }
.pr-lg-sm,
.px-lg-sm {
padding-right: var(--hl-spacer-sm) !important; }
.pb-lg-sm,
.py-lg-sm {
padding-bottom: var(--hl-spacer-sm) !important; }
.pl-lg-sm,
.px-lg-sm {
padding-left: var(--hl-spacer-sm) !important; }
.p-lg-md {
padding: var(--hl-spacer-md) !important; }
.pt-lg-md,
.py-lg-md {
padding-top: var(--hl-spacer-md) !important; }
.pr-lg-md,
.px-lg-md {
padding-right: var(--hl-spacer-md) !important; }
.pb-lg-md,
.py-lg-md {
padding-bottom: var(--hl-spacer-md) !important; }
.pl-lg-md,
.px-lg-md {
padding-left: var(--hl-spacer-md) !important; }
.p-lg-lg {
padding: var(--hl-spacer-lg) !important; }
.pt-lg-lg,
.py-lg-lg {
padding-top: var(--hl-spacer-lg) !important; }
.pr-lg-lg,
.px-lg-lg {
padding-right: var(--hl-spacer-lg) !important; }
.pb-lg-lg,
.py-lg-lg {
padding-bottom: var(--hl-spacer-lg) !important; }
.pl-lg-lg,
.px-lg-lg {
padding-left: var(--hl-spacer-lg) !important; }
.p-lg-xl {
padding: var(--hl-spacer-xl) !important; }
.pt-lg-xl,
.py-lg-xl {
padding-top: var(--hl-spacer-xl) !important; }
.pr-lg-xl,
.px-lg-xl {
padding-right: var(--hl-spacer-xl) !important; }
.pb-lg-xl,
.py-lg-xl {
padding-bottom: var(--hl-spacer-xl) !important; }
.pl-lg-xl,
.px-lg-xl {
padding-left: var(--hl-spacer-xl) !important; }
.p-lg-2xl {
padding: var(--hl-spacer-2xl) !important; }
.pt-lg-2xl,
.py-lg-2xl {
padding-top: var(--hl-spacer-2xl) !important; }
.pr-lg-2xl,
.px-lg-2xl {
padding-right: var(--hl-spacer-2xl) !important; }
.pb-lg-2xl,
.py-lg-2xl {
padding-bottom: var(--hl-spacer-2xl) !important; }
.pl-lg-2xl,
.px-lg-2xl {
padding-left: var(--hl-spacer-2xl) !important; }
.p-lg-3xl {
padding: var(--hl-spacer-3xl) !important; }
.pt-lg-3xl,
.py-lg-3xl {
padding-top: var(--hl-spacer-3xl) !important; }
.pr-lg-3xl,
.px-lg-3xl {
padding-right: var(--hl-spacer-3xl) !important; }
.pb-lg-3xl,
.py-lg-3xl {
padding-bottom: var(--hl-spacer-3xl) !important; }
.pl-lg-3xl,
.px-lg-3xl {
padding-left: var(--hl-spacer-3xl) !important; }
.p-lg-4xl {
padding: var(--hl-spacer-4xl) !important; }
.pt-lg-4xl,
.py-lg-4xl {
padding-top: var(--hl-spacer-4xl) !important; }
.pr-lg-4xl,
.px-lg-4xl {
padding-right: var(--hl-spacer-4xl) !important; }
.pb-lg-4xl,
.py-lg-4xl {
padding-bottom: var(--hl-spacer-4xl) !important; }
.pl-lg-4xl,
.px-lg-4xl {
padding-left: var(--hl-spacer-4xl) !important; }
.p-lg-5xl {
padding: var(--hl-spacer-5xl) !important; }
.pt-lg-5xl,
.py-lg-5xl {
padding-top: var(--hl-spacer-5xl) !important; }
.pr-lg-5xl,
.px-lg-5xl {
padding-right: var(--hl-spacer-5xl) !important; }
.pb-lg-5xl,
.py-lg-5xl {
padding-bottom: var(--hl-spacer-5xl) !important; }
.pl-lg-5xl,
.px-lg-5xl {
padding-left: var(--hl-spacer-5xl) !important; }
.p-lg-6xl {
padding: var(--hl-spacer-6xl) !important; }
.pt-lg-6xl,
.py-lg-6xl {
padding-top: var(--hl-spacer-6xl) !important; }
.pr-lg-6xl,
.px-lg-6xl {
padding-right: var(--hl-spacer-6xl) !important; }
.pb-lg-6xl,
.py-lg-6xl {
padding-bottom: var(--hl-spacer-6xl) !important; }
.pl-lg-6xl,
.px-lg-6xl {
padding-left: var(--hl-spacer-6xl) !important; }
.p-lg-7xl {
padding: var(--hl-spacer-7xl) !important; }
.pt-lg-7xl,
.py-lg-7xl {
padding-top: var(--hl-spacer-7xl) !important; }
.pr-lg-7xl,
.px-lg-7xl {
padding-right: var(--hl-spacer-7xl) !important; }
.pb-lg-7xl,
.py-lg-7xl {
padding-bottom: var(--hl-spacer-7xl) !important; }
.pl-lg-7xl,
.px-lg-7xl {
padding-left: var(--hl-spacer-7xl) !important; }
.m-lg-auto {
margin: auto !important; }
.mt-lg-auto,
.my-lg-auto {
margin-top: auto !important; }
.mr-lg-auto,
.mx-lg-auto {
margin-right: auto !important; }
.mb-lg-auto,
.my-lg-auto {
margin-bottom: auto !important; }
.ml-lg-auto,
.mx-lg-auto {
margin-left: auto !important; } }
@media (min-width: 1200px) {
.m-xl-0 {
margin: 0 !important; }
.mt-xl-0,
.my-xl-0 {
margin-top: 0 !important; }
.mr-xl-0,
.mx-xl-0 {
margin-right: 0 !important; }
.mb-xl-0,
.my-xl-0 {
margin-bottom: 0 !important; }
.ml-xl-0,
.mx-xl-0 {
margin-left: 0 !important; }
.m-xl-1 {
margin: var(--hl-spacer-2xs) !important; }
.mt-xl-1,
.my-xl-1 {
margin-top: var(--hl-spacer-2xs) !important; }
.mr-xl-1,
.mx-xl-1 {
margin-right: var(--hl-spacer-2xs) !important; }
.mb-xl-1,
.my-xl-1 {
margin-bottom: var(--hl-spacer-2xs) !important; }
.ml-xl-1,
.mx-xl-1 {
margin-left: var(--hl-spacer-2xs) !important; }
.m-xl-2 {
margin: var(--hl-spacer-xs) !important; }
.mt-xl-2,
.my-xl-2 {
margin-top: var(--hl-spacer-xs) !important; }
.mr-xl-2,
.mx-xl-2 {
margin-right: var(--hl-spacer-xs) !important; }
.mb-xl-2,
.my-xl-2 {
margin-bottom: var(--hl-spacer-xs) !important; }
.ml-xl-2,
.mx-xl-2 {
margin-left: var(--hl-spacer-xs) !important; }
.m-xl-3 {
margin: var(--hl-spacer-md) !important; }
.mt-xl-3,
.my-xl-3 {
margin-top: var(--hl-spacer-md) !important; }
.mr-xl-3,
.mx-xl-3 {
margin-right: var(--hl-spacer-md) !important; }
.mb-xl-3,
.my-xl-3 {
margin-bottom: var(--hl-spacer-md) !important; }
.ml-xl-3,
.mx-xl-3 {
margin-left: var(--hl-spacer-md) !important; }
.m-xl-4 {
margin: var(--hl-spacer-lg) !important; }
.mt-xl-4,
.my-xl-4 {
margin-top: var(--hl-spacer-lg) !important; }
.mr-xl-4,
.mx-xl-4 {
margin-right: var(--hl-spacer-lg) !important; }
.mb-xl-4,
.my-xl-4 {
margin-bottom: var(--hl-spacer-lg) !important; }
.ml-xl-4,
.mx-xl-4 {
margin-left: var(--hl-spacer-lg) !important; }
.m-xl-5 {
margin: var(--hl-spacer-3xl) !important; }
.mt-xl-5,
.my-xl-5 {
margin-top: var(--hl-spacer-3xl) !important; }
.mr-xl-5,
.mx-xl-5 {
margin-right: var(--hl-spacer-3xl) !important; }
.mb-xl-5,
.my-xl-5 {
margin-bottom: var(--hl-spacer-3xl) !important; }
.ml-xl-5,
.mx-xl-5 {
margin-left: var(--hl-spacer-3xl) !important; }
.m-xl-3xs {
margin: var(--hl-spacer-3xs) !important; }
.mt-xl-3xs,
.my-xl-3xs {
margin-top: var(--hl-spacer-3xs) !important; }
.mr-xl-3xs,
.mx-xl-3xs {
margin-right: var(--hl-spacer-3xs) !important; }
.mb-xl-3xs,
.my-xl-3xs {
margin-bottom: var(--hl-spacer-3xs) !important; }
.ml-xl-3xs,
.mx-xl-3xs {
margin-left: var(--hl-spacer-3xs) !important; }
.m-xl-2xs {
margin: var(--hl-spacer-2xs) !important; }
.mt-xl-2xs,
.my-xl-2xs {
margin-top: var(--hl-spacer-2xs) !important; }
.mr-xl-2xs,
.mx-xl-2xs {
margin-right: var(--hl-spacer-2xs) !important; }
.mb-xl-2xs,
.my-xl-2xs {
margin-bottom: var(--hl-spacer-2xs) !important; }
.ml-xl-2xs,
.mx-xl-2xs {
margin-left: var(--hl-spacer-2xs) !important; }
.m-xl-xs {
margin: var(--hl-spacer-xs) !important; }
.mt-xl-xs,
.my-xl-xs {
margin-top: var(--hl-spacer-xs) !important; }
.mr-xl-xs,
.mx-xl-xs {
margin-right: var(--hl-spacer-xs) !important; }
.mb-xl-xs,
.my-xl-xs {
margin-bottom: var(--hl-spacer-xs) !important; }
.ml-xl-xs,
.mx-xl-xs {
margin-left: var(--hl-spacer-xs) !important; }
.m-xl-sm {
margin: var(--hl-spacer-sm) !important; }
.mt-xl-sm,
.my-xl-sm {
margin-top: var(--hl-spacer-sm) !important; }
.mr-xl-sm,
.mx-xl-sm {
margin-right: var(--hl-spacer-sm) !important; }
.mb-xl-sm,
.my-xl-sm {
margin-bottom: var(--hl-spacer-sm) !important; }
.ml-xl-sm,
.mx-xl-sm {
margin-left: var(--hl-spacer-sm) !important; }
.m-xl-md {
margin: var(--hl-spacer-md) !important; }
.mt-xl-md,
.my-xl-md {
margin-top: var(--hl-spacer-md) !important; }
.mr-xl-md,
.mx-xl-md {
margin-right: var(--hl-spacer-md) !important; }
.mb-xl-md,
.my-xl-md {
margin-bottom: var(--hl-spacer-md) !important; }
.ml-xl-md,
.mx-xl-md {
margin-left: var(--hl-spacer-md) !important; }
.m-xl-lg {
margin: var(--hl-spacer-lg) !important; }
.mt-xl-lg,
.my-xl-lg {
margin-top: var(--hl-spacer-lg) !important; }
.mr-xl-lg,
.mx-xl-lg {
margin-right: var(--hl-spacer-lg) !important; }
.mb-xl-lg,
.my-xl-lg {
margin-bottom: var(--hl-spacer-lg) !important; }
.ml-xl-lg,
.mx-xl-lg {
margin-left: var(--hl-spacer-lg) !important; }
.m-xl-xl {
margin: var(--hl-spacer-xl) !important; }
.mt-xl-xl,
.my-xl-xl {
margin-top: var(--hl-spacer-xl) !important; }
.mr-xl-xl,
.mx-xl-xl {
margin-right: var(--hl-spacer-xl) !important; }
.mb-xl-xl,
.my-xl-xl {
margin-bottom: var(--hl-spacer-xl) !important; }
.ml-xl-xl,
.mx-xl-xl {
margin-left: var(--hl-spacer-xl) !important; }
.m-xl-2xl {
margin: var(--hl-spacer-2xl) !important; }
.mt-xl-2xl,
.my-xl-2xl {
margin-top: var(--hl-spacer-2xl) !important; }
.mr-xl-2xl,
.mx-xl-2xl {
margin-right: var(--hl-spacer-2xl) !important; }
.mb-xl-2xl,
.my-xl-2xl {
margin-bottom: var(--hl-spacer-2xl) !important; }
.ml-xl-2xl,
.mx-xl-2xl {
margin-left: var(--hl-spacer-2xl) !important; }
.m-xl-3xl {
margin: var(--hl-spacer-3xl) !important; }
.mt-xl-3xl,
.my-xl-3xl {
margin-top: var(--hl-spacer-3xl) !important; }
.mr-xl-3xl,
.mx-xl-3xl {
margin-right: var(--hl-spacer-3xl) !important; }
.mb-xl-3xl,
.my-xl-3xl {
margin-bottom: var(--hl-spacer-3xl) !important; }
.ml-xl-3xl,
.mx-xl-3xl {
margin-left: var(--hl-spacer-3xl) !important; }
.m-xl-4xl {
margin: var(--hl-spacer-4xl) !important; }
.mt-xl-4xl,
.my-xl-4xl {
margin-top: var(--hl-spacer-4xl) !important; }
.mr-xl-4xl,
.mx-xl-4xl {
margin-right: var(--hl-spacer-4xl) !important; }
.mb-xl-4xl,
.my-xl-4xl {
margin-bottom: var(--hl-spacer-4xl) !important; }
.ml-xl-4xl,
.mx-xl-4xl {
margin-left: var(--hl-spacer-4xl) !important; }
.m-xl-5xl {
margin: var(--hl-spacer-5xl) !important; }
.mt-xl-5xl,
.my-xl-5xl {
margin-top: var(--hl-spacer-5xl) !important; }
.mr-xl-5xl,
.mx-xl-5xl {
margin-right: var(--hl-spacer-5xl) !important; }
.mb-xl-5xl,
.my-xl-5xl {
margin-bottom: var(--hl-spacer-5xl) !important; }
.ml-xl-5xl,
.mx-xl-5xl {
margin-left: var(--hl-spacer-5xl) !important; }
.m-xl-6xl {
margin: var(--hl-spacer-6xl) !important; }
.mt-xl-6xl,
.my-xl-6xl {
margin-top: var(--hl-spacer-6xl) !important; }
.mr-xl-6xl,
.mx-xl-6xl {
margin-right: var(--hl-spacer-6xl) !important; }
.mb-xl-6xl,
.my-xl-6xl {
margin-bottom: var(--hl-spacer-6xl) !important; }
.ml-xl-6xl,
.mx-xl-6xl {
margin-left: var(--hl-spacer-6xl) !important; }
.m-xl-7xl {
margin: var(--hl-spacer-7xl) !important; }
.mt-xl-7xl,
.my-xl-7xl {
margin-top: var(--hl-spacer-7xl) !important; }
.mr-xl-7xl,
.mx-xl-7xl {
margin-right: var(--hl-spacer-7xl) !important; }
.mb-xl-7xl,
.my-xl-7xl {
margin-bottom: var(--hl-spacer-7xl) !important; }
.ml-xl-7xl,
.mx-xl-7xl {
margin-left: var(--hl-spacer-7xl) !important; }
.p-xl-0 {
padding: 0 !important; }
.pt-xl-0,
.py-xl-0 {
padding-top: 0 !important; }
.pr-xl-0,
.px-xl-0 {
padding-right: 0 !important; }
.pb-xl-0,
.py-xl-0 {
padding-bottom: 0 !important; }
.pl-xl-0,
.px-xl-0 {
padding-left: 0 !important; }
.p-xl-1 {
padding: var(--hl-spacer-2xs) !important; }
.pt-xl-1,
.py-xl-1 {
padding-top: var(--hl-spacer-2xs) !important; }
.pr-xl-1,
.px-xl-1 {
padding-right: var(--hl-spacer-2xs) !important; }
.pb-xl-1,
.py-xl-1 {
padding-bottom: var(--hl-spacer-2xs) !important; }
.pl-xl-1,
.px-xl-1 {
padding-left: var(--hl-spacer-2xs) !important; }
.p-xl-2 {
padding: var(--hl-spacer-xs) !important; }
.pt-xl-2,
.py-xl-2 {
padding-top: var(--hl-spacer-xs) !important; }
.pr-xl-2,
.px-xl-2 {
padding-right: var(--hl-spacer-xs) !important; }
.pb-xl-2,
.py-xl-2 {
padding-bottom: var(--hl-spacer-xs) !important; }
.pl-xl-2,
.px-xl-2 {
padding-left: var(--hl-spacer-xs) !important; }
.p-xl-3 {
padding: var(--hl-spacer-md) !important; }
.pt-xl-3,
.py-xl-3 {
padding-top: var(--hl-spacer-md) !important; }
.pr-xl-3,
.px-xl-3 {
padding-right: var(--hl-spacer-md) !important; }
.pb-xl-3,
.py-xl-3 {
padding-bottom: var(--hl-spacer-md) !important; }
.pl-xl-3,
.px-xl-3 {
padding-left: var(--hl-spacer-md) !important; }
.p-xl-4 {
padding: var(--hl-spacer-lg) !important; }
.pt-xl-4,
.py-xl-4 {
padding-top: var(--hl-spacer-lg) !important; }
.pr-xl-4,
.px-xl-4 {
padding-right: var(--hl-spacer-lg) !important; }
.pb-xl-4,
.py-xl-4 {
padding-bottom: var(--hl-spacer-lg) !important; }
.pl-xl-4,
.px-xl-4 {
padding-left: var(--hl-spacer-lg) !important; }
.p-xl-5 {
padding: var(--hl-spacer-3xl) !important; }
.pt-xl-5,
.py-xl-5 {
padding-top: var(--hl-spacer-3xl) !important; }
.pr-xl-5,
.px-xl-5 {
padding-right: var(--hl-spacer-3xl) !important; }
.pb-xl-5,
.py-xl-5 {
padding-bottom: var(--hl-spacer-3xl) !important; }
.pl-xl-5,
.px-xl-5 {
padding-left: var(--hl-spacer-3xl) !important; }
.p-xl-3xs {
padding: var(--hl-spacer-3xs) !important; }
.pt-xl-3xs,
.py-xl-3xs {
padding-top: var(--hl-spacer-3xs) !important; }
.pr-xl-3xs,
.px-xl-3xs {
padding-right: var(--hl-spacer-3xs) !important; }
.pb-xl-3xs,
.py-xl-3xs {
padding-bottom: var(--hl-spacer-3xs) !important; }
.pl-xl-3xs,
.px-xl-3xs {
padding-left: var(--hl-spacer-3xs) !important; }
.p-xl-2xs {
padding: var(--hl-spacer-2xs) !important; }
.pt-xl-2xs,
.py-xl-2xs {
padding-top: var(--hl-spacer-2xs) !important; }
.pr-xl-2xs,
.px-xl-2xs {
padding-right: var(--hl-spacer-2xs) !important; }
.pb-xl-2xs,
.py-xl-2xs {
padding-bottom: var(--hl-spacer-2xs) !important; }
.pl-xl-2xs,
.px-xl-2xs {
padding-left: var(--hl-spacer-2xs) !important; }
.p-xl-xs {
padding: var(--hl-spacer-xs) !important; }
.pt-xl-xs,
.py-xl-xs {
padding-top: var(--hl-spacer-xs) !important; }
.pr-xl-xs,
.px-xl-xs {
padding-right: var(--hl-spacer-xs) !important; }
.pb-xl-xs,
.py-xl-xs {
padding-bottom: var(--hl-spacer-xs) !important; }
.pl-xl-xs,
.px-xl-xs {
padding-left: var(--hl-spacer-xs) !important; }
.p-xl-sm {
padding: var(--hl-spacer-sm) !important; }
.pt-xl-sm,
.py-xl-sm {
padding-top: var(--hl-spacer-sm) !important; }
.pr-xl-sm,
.px-xl-sm {
padding-right: var(--hl-spacer-sm) !important; }
.pb-xl-sm,
.py-xl-sm {
padding-bottom: var(--hl-spacer-sm) !important; }
.pl-xl-sm,
.px-xl-sm {
padding-left: var(--hl-spacer-sm) !important; }
.p-xl-md {
padding: var(--hl-spacer-md) !important; }
.pt-xl-md,
.py-xl-md {
padding-top: var(--hl-spacer-md) !important; }
.pr-xl-md,
.px-xl-md {
padding-right: var(--hl-spacer-md) !important; }
.pb-xl-md,
.py-xl-md {
padding-bottom: var(--hl-spacer-md) !important; }
.pl-xl-md,
.px-xl-md {
padding-left: var(--hl-spacer-md) !important; }
.p-xl-lg {
padding: var(--hl-spacer-lg) !important; }
.pt-xl-lg,
.py-xl-lg {
padding-top: var(--hl-spacer-lg) !important; }
.pr-xl-lg,
.px-xl-lg {
padding-right: var(--hl-spacer-lg) !important; }
.pb-xl-lg,
.py-xl-lg {
padding-bottom: var(--hl-spacer-lg) !important; }
.pl-xl-lg,
.px-xl-lg {
padding-left: var(--hl-spacer-lg) !important; }
.p-xl-xl {
padding: var(--hl-spacer-xl) !important; }
.pt-xl-xl,
.py-xl-xl {
padding-top: var(--hl-spacer-xl) !important; }
.pr-xl-xl,
.px-xl-xl {
padding-right: var(--hl-spacer-xl) !important; }
.pb-xl-xl,
.py-xl-xl {
padding-bottom: var(--hl-spacer-xl) !important; }
.pl-xl-xl,
.px-xl-xl {
padding-left: var(--hl-spacer-xl) !important; }
.p-xl-2xl {
padding: var(--hl-spacer-2xl) !important; }
.pt-xl-2xl,
.py-xl-2xl {
padding-top: var(--hl-spacer-2xl) !important; }
.pr-xl-2xl,
.px-xl-2xl {
padding-right: var(--hl-spacer-2xl) !important; }
.pb-xl-2xl,
.py-xl-2xl {
padding-bottom: var(--hl-spacer-2xl) !important; }
.pl-xl-2xl,
.px-xl-2xl {
padding-left: var(--hl-spacer-2xl) !important; }
.p-xl-3xl {
padding: var(--hl-spacer-3xl) !important; }
.pt-xl-3xl,
.py-xl-3xl {
padding-top: var(--hl-spacer-3xl) !important; }
.pr-xl-3xl,
.px-xl-3xl {
padding-right: var(--hl-spacer-3xl) !important; }
.pb-xl-3xl,
.py-xl-3xl {
padding-bottom: var(--hl-spacer-3xl) !important; }
.pl-xl-3xl,
.px-xl-3xl {
padding-left: var(--hl-spacer-3xl) !important; }
.p-xl-4xl {
padding: var(--hl-spacer-4xl) !important; }
.pt-xl-4xl,
.py-xl-4xl {
padding-top: var(--hl-spacer-4xl) !important; }
.pr-xl-4xl,
.px-xl-4xl {
padding-right: var(--hl-spacer-4xl) !important; }
.pb-xl-4xl,
.py-xl-4xl {
padding-bottom: var(--hl-spacer-4xl) !important; }
.pl-xl-4xl,
.px-xl-4xl {
padding-left: var(--hl-spacer-4xl) !important; }
.p-xl-5xl {
padding: var(--hl-spacer-5xl) !important; }
.pt-xl-5xl,
.py-xl-5xl {
padding-top: var(--hl-spacer-5xl) !important; }
.pr-xl-5xl,
.px-xl-5xl {
padding-right: var(--hl-spacer-5xl) !important; }
.pb-xl-5xl,
.py-xl-5xl {
padding-bottom: var(--hl-spacer-5xl) !important; }
.pl-xl-5xl,
.px-xl-5xl {
padding-left: var(--hl-spacer-5xl) !important; }
.p-xl-6xl {
padding: var(--hl-spacer-6xl) !important; }
.pt-xl-6xl,
.py-xl-6xl {
padding-top: var(--hl-spacer-6xl) !important; }
.pr-xl-6xl,
.px-xl-6xl {
padding-right: var(--hl-spacer-6xl) !important; }
.pb-xl-6xl,
.py-xl-6xl {
padding-bottom: var(--hl-spacer-6xl) !important; }
.pl-xl-6xl,
.px-xl-6xl {
padding-left: var(--hl-spacer-6xl) !important; }
.p-xl-7xl {
padding: var(--hl-spacer-7xl) !important; }
.pt-xl-7xl,
.py-xl-7xl {
padding-top: var(--hl-spacer-7xl) !important; }
.pr-xl-7xl,
.px-xl-7xl {
padding-right: var(--hl-spacer-7xl) !important; }
.pb-xl-7xl,
.py-xl-7xl {
padding-bottom: var(--hl-spacer-7xl) !important; }
.pl-xl-7xl,
.px-xl-7xl {
padding-left: var(--hl-spacer-7xl) !important; }
.m-xl-auto {
margin: auto !important; }
.mt-xl-auto,
.my-xl-auto {
margin-top: auto !important; }
.mr-xl-auto,
.mx-xl-auto {
margin-right: auto !important; }
.mb-xl-auto,
.my-xl-auto {
margin-bottom: auto !important; }
.ml-xl-auto,
.mx-xl-auto {
margin-left: auto !important; } }
@media (min-width: 1400px) {
.m-xxl-0 {
margin: 0 !important; }
.mt-xxl-0,
.my-xxl-0 {
margin-top: 0 !important; }
.mr-xxl-0,
.mx-xxl-0 {
margin-right: 0 !important; }
.mb-xxl-0,
.my-xxl-0 {
margin-bottom: 0 !important; }
.ml-xxl-0,
.mx-xxl-0 {
margin-left: 0 !important; }
.m-xxl-1 {
margin: var(--hl-spacer-2xs) !important; }
.mt-xxl-1,
.my-xxl-1 {
margin-top: var(--hl-spacer-2xs) !important; }
.mr-xxl-1,
.mx-xxl-1 {
margin-right: var(--hl-spacer-2xs) !important; }
.mb-xxl-1,
.my-xxl-1 {
margin-bottom: var(--hl-spacer-2xs) !important; }
.ml-xxl-1,
.mx-xxl-1 {
margin-left: var(--hl-spacer-2xs) !important; }
.m-xxl-2 {
margin: var(--hl-spacer-xs) !important; }
.mt-xxl-2,
.my-xxl-2 {
margin-top: var(--hl-spacer-xs) !important; }
.mr-xxl-2,
.mx-xxl-2 {
margin-right: var(--hl-spacer-xs) !important; }
.mb-xxl-2,
.my-xxl-2 {
margin-bottom: var(--hl-spacer-xs) !important; }
.ml-xxl-2,
.mx-xxl-2 {
margin-left: var(--hl-spacer-xs) !important; }
.m-xxl-3 {
margin: var(--hl-spacer-md) !important; }
.mt-xxl-3,
.my-xxl-3 {
margin-top: var(--hl-spacer-md) !important; }
.mr-xxl-3,
.mx-xxl-3 {
margin-right: var(--hl-spacer-md) !important; }
.mb-xxl-3,
.my-xxl-3 {
margin-bottom: var(--hl-spacer-md) !important; }
.ml-xxl-3,
.mx-xxl-3 {
margin-left: var(--hl-spacer-md) !important; }
.m-xxl-4 {
margin: var(--hl-spacer-lg) !important; }
.mt-xxl-4,
.my-xxl-4 {
margin-top: var(--hl-spacer-lg) !important; }
.mr-xxl-4,
.mx-xxl-4 {
margin-right: var(--hl-spacer-lg) !important; }
.mb-xxl-4,
.my-xxl-4 {
margin-bottom: var(--hl-spacer-lg) !important; }
.ml-xxl-4,
.mx-xxl-4 {
margin-left: var(--hl-spacer-lg) !important; }
.m-xxl-5 {
margin: var(--hl-spacer-3xl) !important; }
.mt-xxl-5,
.my-xxl-5 {
margin-top: var(--hl-spacer-3xl) !important; }
.mr-xxl-5,
.mx-xxl-5 {
margin-right: var(--hl-spacer-3xl) !important; }
.mb-xxl-5,
.my-xxl-5 {
margin-bottom: var(--hl-spacer-3xl) !important; }
.ml-xxl-5,
.mx-xxl-5 {
margin-left: var(--hl-spacer-3xl) !important; }
.m-xxl-3xs {
margin: var(--hl-spacer-3xs) !important; }
.mt-xxl-3xs,
.my-xxl-3xs {
margin-top: var(--hl-spacer-3xs) !important; }
.mr-xxl-3xs,
.mx-xxl-3xs {
margin-right: var(--hl-spacer-3xs) !important; }
.mb-xxl-3xs,
.my-xxl-3xs {
margin-bottom: var(--hl-spacer-3xs) !important; }
.ml-xxl-3xs,
.mx-xxl-3xs {
margin-left: var(--hl-spacer-3xs) !important; }
.m-xxl-2xs {
margin: var(--hl-spacer-2xs) !important; }
.mt-xxl-2xs,
.my-xxl-2xs {
margin-top: var(--hl-spacer-2xs) !important; }
.mr-xxl-2xs,
.mx-xxl-2xs {
margin-right: var(--hl-spacer-2xs) !important; }
.mb-xxl-2xs,
.my-xxl-2xs {
margin-bottom: var(--hl-spacer-2xs) !important; }
.ml-xxl-2xs,
.mx-xxl-2xs {
margin-left: var(--hl-spacer-2xs) !important; }
.m-xxl-xs {
margin: var(--hl-spacer-xs) !important; }
.mt-xxl-xs,
.my-xxl-xs {
margin-top: var(--hl-spacer-xs) !important; }
.mr-xxl-xs,
.mx-xxl-xs {
margin-right: var(--hl-spacer-xs) !important; }
.mb-xxl-xs,
.my-xxl-xs {
margin-bottom: var(--hl-spacer-xs) !important; }
.ml-xxl-xs,
.mx-xxl-xs {
margin-left: var(--hl-spacer-xs) !important; }
.m-xxl-sm {
margin: var(--hl-spacer-sm) !important; }
.mt-xxl-sm,
.my-xxl-sm {
margin-top: var(--hl-spacer-sm) !important; }
.mr-xxl-sm,
.mx-xxl-sm {
margin-right: var(--hl-spacer-sm) !important; }
.mb-xxl-sm,
.my-xxl-sm {
margin-bottom: var(--hl-spacer-sm) !important; }
.ml-xxl-sm,
.mx-xxl-sm {
margin-left: var(--hl-spacer-sm) !important; }
.m-xxl-md {
margin: var(--hl-spacer-md) !important; }
.mt-xxl-md,
.my-xxl-md {
margin-top: var(--hl-spacer-md) !important; }
.mr-xxl-md,
.mx-xxl-md {
margin-right: var(--hl-spacer-md) !important; }
.mb-xxl-md,
.my-xxl-md {
margin-bottom: var(--hl-spacer-md) !important; }
.ml-xxl-md,
.mx-xxl-md {
margin-left: var(--hl-spacer-md) !important; }
.m-xxl-lg {
margin: var(--hl-spacer-lg) !important; }
.mt-xxl-lg,
.my-xxl-lg {
margin-top: var(--hl-spacer-lg) !important; }
.mr-xxl-lg,
.mx-xxl-lg {
margin-right: var(--hl-spacer-lg) !important; }
.mb-xxl-lg,
.my-xxl-lg {
margin-bottom: var(--hl-spacer-lg) !important; }
.ml-xxl-lg,
.mx-xxl-lg {
margin-left: var(--hl-spacer-lg) !important; }
.m-xxl-xl {
margin: var(--hl-spacer-xl) !important; }
.mt-xxl-xl,
.my-xxl-xl {
margin-top: var(--hl-spacer-xl) !important; }
.mr-xxl-xl,
.mx-xxl-xl {
margin-right: var(--hl-spacer-xl) !important; }
.mb-xxl-xl,
.my-xxl-xl {
margin-bottom: var(--hl-spacer-xl) !important; }
.ml-xxl-xl,
.mx-xxl-xl {
margin-left: var(--hl-spacer-xl) !important; }
.m-xxl-2xl {
margin: var(--hl-spacer-2xl) !important; }
.mt-xxl-2xl,
.my-xxl-2xl {
margin-top: var(--hl-spacer-2xl) !important; }
.mr-xxl-2xl,
.mx-xxl-2xl {
margin-right: var(--hl-spacer-2xl) !important; }
.mb-xxl-2xl,
.my-xxl-2xl {
margin-bottom: var(--hl-spacer-2xl) !important; }
.ml-xxl-2xl,
.mx-xxl-2xl {
margin-left: var(--hl-spacer-2xl) !important; }
.m-xxl-3xl {
margin: var(--hl-spacer-3xl) !important; }
.mt-xxl-3xl,
.my-xxl-3xl {
margin-top: var(--hl-spacer-3xl) !important; }
.mr-xxl-3xl,
.mx-xxl-3xl {
margin-right: var(--hl-spacer-3xl) !important; }
.mb-xxl-3xl,
.my-xxl-3xl {
margin-bottom: var(--hl-spacer-3xl) !important; }
.ml-xxl-3xl,
.mx-xxl-3xl {
margin-left: var(--hl-spacer-3xl) !important; }
.m-xxl-4xl {
margin: var(--hl-spacer-4xl) !important; }
.mt-xxl-4xl,
.my-xxl-4xl {
margin-top: var(--hl-spacer-4xl) !important; }
.mr-xxl-4xl,
.mx-xxl-4xl {
margin-right: var(--hl-spacer-4xl) !important; }
.mb-xxl-4xl,
.my-xxl-4xl {
margin-bottom: var(--hl-spacer-4xl) !important; }
.ml-xxl-4xl,
.mx-xxl-4xl {
margin-left: var(--hl-spacer-4xl) !important; }
.m-xxl-5xl {
margin: var(--hl-spacer-5xl) !important; }
.mt-xxl-5xl,
.my-xxl-5xl {
margin-top: var(--hl-spacer-5xl) !important; }
.mr-xxl-5xl,
.mx-xxl-5xl {
margin-right: var(--hl-spacer-5xl) !important; }
.mb-xxl-5xl,
.my-xxl-5xl {
margin-bottom: var(--hl-spacer-5xl) !important; }
.ml-xxl-5xl,
.mx-xxl-5xl {
margin-left: var(--hl-spacer-5xl) !important; }
.m-xxl-6xl {
margin: var(--hl-spacer-6xl) !important; }
.mt-xxl-6xl,
.my-xxl-6xl {
margin-top: var(--hl-spacer-6xl) !important; }
.mr-xxl-6xl,
.mx-xxl-6xl {
margin-right: var(--hl-spacer-6xl) !important; }
.mb-xxl-6xl,
.my-xxl-6xl {
margin-bottom: var(--hl-spacer-6xl) !important; }
.ml-xxl-6xl,
.mx-xxl-6xl {
margin-left: var(--hl-spacer-6xl) !important; }
.m-xxl-7xl {
margin: var(--hl-spacer-7xl) !important; }
.mt-xxl-7xl,
.my-xxl-7xl {
margin-top: var(--hl-spacer-7xl) !important; }
.mr-xxl-7xl,
.mx-xxl-7xl {
margin-right: var(--hl-spacer-7xl) !important; }
.mb-xxl-7xl,
.my-xxl-7xl {
margin-bottom: var(--hl-spacer-7xl) !important; }
.ml-xxl-7xl,
.mx-xxl-7xl {
margin-left: var(--hl-spacer-7xl) !important; }
.p-xxl-0 {
padding: 0 !important; }
.pt-xxl-0,
.py-xxl-0 {
padding-top: 0 !important; }
.pr-xxl-0,
.px-xxl-0 {
padding-right: 0 !important; }
.pb-xxl-0,
.py-xxl-0 {
padding-bottom: 0 !important; }
.pl-xxl-0,
.px-xxl-0 {
padding-left: 0 !important; }
.p-xxl-1 {
padding: var(--hl-spacer-2xs) !important; }
.pt-xxl-1,
.py-xxl-1 {
padding-top: var(--hl-spacer-2xs) !important; }
.pr-xxl-1,
.px-xxl-1 {
padding-right: var(--hl-spacer-2xs) !important; }
.pb-xxl-1,
.py-xxl-1 {
padding-bottom: var(--hl-spacer-2xs) !important; }
.pl-xxl-1,
.px-xxl-1 {
padding-left: var(--hl-spacer-2xs) !important; }
.p-xxl-2 {
padding: var(--hl-spacer-xs) !important; }
.pt-xxl-2,
.py-xxl-2 {
padding-top: var(--hl-spacer-xs) !important; }
.pr-xxl-2,
.px-xxl-2 {
padding-right: var(--hl-spacer-xs) !important; }
.pb-xxl-2,
.py-xxl-2 {
padding-bottom: var(--hl-spacer-xs) !important; }
.pl-xxl-2,
.px-xxl-2 {
padding-left: var(--hl-spacer-xs) !important; }
.p-xxl-3 {
padding: var(--hl-spacer-md) !important; }
.pt-xxl-3,
.py-xxl-3 {
padding-top: var(--hl-spacer-md) !important; }
.pr-xxl-3,
.px-xxl-3 {
padding-right: var(--hl-spacer-md) !important; }
.pb-xxl-3,
.py-xxl-3 {
padding-bottom: var(--hl-spacer-md) !important; }
.pl-xxl-3,
.px-xxl-3 {
padding-left: var(--hl-spacer-md) !important; }
.p-xxl-4 {
padding: var(--hl-spacer-lg) !important; }
.pt-xxl-4,
.py-xxl-4 {
padding-top: var(--hl-spacer-lg) !important; }
.pr-xxl-4,
.px-xxl-4 {
padding-right: var(--hl-spacer-lg) !important; }
.pb-xxl-4,
.py-xxl-4 {
padding-bottom: var(--hl-spacer-lg) !important; }
.pl-xxl-4,
.px-xxl-4 {
padding-left: var(--hl-spacer-lg) !important; }
.p-xxl-5 {
padding: var(--hl-spacer-3xl) !important; }
.pt-xxl-5,
.py-xxl-5 {
padding-top: var(--hl-spacer-3xl) !important; }
.pr-xxl-5,
.px-xxl-5 {
padding-right: var(--hl-spacer-3xl) !important; }
.pb-xxl-5,
.py-xxl-5 {
padding-bottom: var(--hl-spacer-3xl) !important; }
.pl-xxl-5,
.px-xxl-5 {
padding-left: var(--hl-spacer-3xl) !important; }
.p-xxl-3xs {
padding: var(--hl-spacer-3xs) !important; }
.pt-xxl-3xs,
.py-xxl-3xs {
padding-top: var(--hl-spacer-3xs) !important; }
.pr-xxl-3xs,
.px-xxl-3xs {
padding-right: var(--hl-spacer-3xs) !important; }
.pb-xxl-3xs,
.py-xxl-3xs {
padding-bottom: var(--hl-spacer-3xs) !important; }
.pl-xxl-3xs,
.px-xxl-3xs {
padding-left: var(--hl-spacer-3xs) !important; }
.p-xxl-2xs {
padding: var(--hl-spacer-2xs) !important; }
.pt-xxl-2xs,
.py-xxl-2xs {
padding-top: var(--hl-spacer-2xs) !important; }
.pr-xxl-2xs,
.px-xxl-2xs {
padding-right: var(--hl-spacer-2xs) !important; }
.pb-xxl-2xs,
.py-xxl-2xs {
padding-bottom: var(--hl-spacer-2xs) !important; }
.pl-xxl-2xs,
.px-xxl-2xs {
padding-left: var(--hl-spacer-2xs) !important; }
.p-xxl-xs {
padding: var(--hl-spacer-xs) !important; }
.pt-xxl-xs,
.py-xxl-xs {
padding-top: var(--hl-spacer-xs) !important; }
.pr-xxl-xs,
.px-xxl-xs {
padding-right: var(--hl-spacer-xs) !important; }
.pb-xxl-xs,
.py-xxl-xs {
padding-bottom: var(--hl-spacer-xs) !important; }
.pl-xxl-xs,
.px-xxl-xs {
padding-left: var(--hl-spacer-xs) !important; }
.p-xxl-sm {
padding: var(--hl-spacer-sm) !important; }
.pt-xxl-sm,
.py-xxl-sm {
padding-top: var(--hl-spacer-sm) !important; }
.pr-xxl-sm,
.px-xxl-sm {
padding-right: var(--hl-spacer-sm) !important; }
.pb-xxl-sm,
.py-xxl-sm {
padding-bottom: var(--hl-spacer-sm) !important; }
.pl-xxl-sm,
.px-xxl-sm {
padding-left: var(--hl-spacer-sm) !important; }
.p-xxl-md {
padding: var(--hl-spacer-md) !important; }
.pt-xxl-md,
.py-xxl-md {
padding-top: var(--hl-spacer-md) !important; }
.pr-xxl-md,
.px-xxl-md {
padding-right: var(--hl-spacer-md) !important; }
.pb-xxl-md,
.py-xxl-md {
padding-bottom: var(--hl-spacer-md) !important; }
.pl-xxl-md,
.px-xxl-md {
padding-left: var(--hl-spacer-md) !important; }
.p-xxl-lg {
padding: var(--hl-spacer-lg) !important; }
.pt-xxl-lg,
.py-xxl-lg {
padding-top: var(--hl-spacer-lg) !important; }
.pr-xxl-lg,
.px-xxl-lg {
padding-right: var(--hl-spacer-lg) !important; }
.pb-xxl-lg,
.py-xxl-lg {
padding-bottom: var(--hl-spacer-lg) !important; }
.pl-xxl-lg,
.px-xxl-lg {
padding-left: var(--hl-spacer-lg) !important; }
.p-xxl-xl {
padding: var(--hl-spacer-xl) !important; }
.pt-xxl-xl,
.py-xxl-xl {
padding-top: var(--hl-spacer-xl) !important; }
.pr-xxl-xl,
.px-xxl-xl {
padding-right: var(--hl-spacer-xl) !important; }
.pb-xxl-xl,
.py-xxl-xl {
padding-bottom: var(--hl-spacer-xl) !important; }
.pl-xxl-xl,
.px-xxl-xl {
padding-left: var(--hl-spacer-xl) !important; }
.p-xxl-2xl {
padding: var(--hl-spacer-2xl) !important; }
.pt-xxl-2xl,
.py-xxl-2xl {
padding-top: var(--hl-spacer-2xl) !important; }
.pr-xxl-2xl,
.px-xxl-2xl {
padding-right: var(--hl-spacer-2xl) !important; }
.pb-xxl-2xl,
.py-xxl-2xl {
padding-bottom: var(--hl-spacer-2xl) !important; }
.pl-xxl-2xl,
.px-xxl-2xl {
padding-left: var(--hl-spacer-2xl) !important; }
.p-xxl-3xl {
padding: var(--hl-spacer-3xl) !important; }
.pt-xxl-3xl,
.py-xxl-3xl {
padding-top: var(--hl-spacer-3xl) !important; }
.pr-xxl-3xl,
.px-xxl-3xl {
padding-right: var(--hl-spacer-3xl) !important; }
.pb-xxl-3xl,
.py-xxl-3xl {
padding-bottom: var(--hl-spacer-3xl) !important; }
.pl-xxl-3xl,
.px-xxl-3xl {
padding-left: var(--hl-spacer-3xl) !important; }
.p-xxl-4xl {
padding: var(--hl-spacer-4xl) !important; }
.pt-xxl-4xl,
.py-xxl-4xl {
padding-top: var(--hl-spacer-4xl) !important; }
.pr-xxl-4xl,
.px-xxl-4xl {
padding-right: var(--hl-spacer-4xl) !important; }
.pb-xxl-4xl,
.py-xxl-4xl {
padding-bottom: var(--hl-spacer-4xl) !important; }
.pl-xxl-4xl,
.px-xxl-4xl {
padding-left: var(--hl-spacer-4xl) !important; }
.p-xxl-5xl {
padding: var(--hl-spacer-5xl) !important; }
.pt-xxl-5xl,
.py-xxl-5xl {
padding-top: var(--hl-spacer-5xl) !important; }
.pr-xxl-5xl,
.px-xxl-5xl {
padding-right: var(--hl-spacer-5xl) !important; }
.pb-xxl-5xl,
.py-xxl-5xl {
padding-bottom: var(--hl-spacer-5xl) !important; }
.pl-xxl-5xl,
.px-xxl-5xl {
padding-left: var(--hl-spacer-5xl) !important; }
.p-xxl-6xl {
padding: var(--hl-spacer-6xl) !important; }
.pt-xxl-6xl,
.py-xxl-6xl {
padding-top: var(--hl-spacer-6xl) !important; }
.pr-xxl-6xl,
.px-xxl-6xl {
padding-right: var(--hl-spacer-6xl) !important; }
.pb-xxl-6xl,
.py-xxl-6xl {
padding-bottom: var(--hl-spacer-6xl) !important; }
.pl-xxl-6xl,
.px-xxl-6xl {
padding-left: var(--hl-spacer-6xl) !important; }
.p-xxl-7xl {
padding: var(--hl-spacer-7xl) !important; }
.pt-xxl-7xl,
.py-xxl-7xl {
padding-top: var(--hl-spacer-7xl) !important; }
.pr-xxl-7xl,
.px-xxl-7xl {
padding-right: var(--hl-spacer-7xl) !important; }
.pb-xxl-7xl,
.py-xxl-7xl {
padding-bottom: var(--hl-spacer-7xl) !important; }
.pl-xxl-7xl,
.px-xxl-7xl {
padding-left: var(--hl-spacer-7xl) !important; }
.m-xxl-auto {
margin: auto !important; }
.mt-xxl-auto,
.my-xxl-auto {
margin-top: auto !important; }
.mr-xxl-auto,
.mx-xxl-auto {
margin-right: auto !important; }
.mb-xxl-auto,
.my-xxl-auto {
margin-bottom: auto !important; }
.ml-xxl-auto,
.mx-xxl-auto {
margin-left: auto !important; } }
@media (min-width: 1880px) {
.m-xxxl-0 {
margin: 0 !important; }
.mt-xxxl-0,
.my-xxxl-0 {
margin-top: 0 !important; }
.mr-xxxl-0,
.mx-xxxl-0 {
margin-right: 0 !important; }
.mb-xxxl-0,
.my-xxxl-0 {
margin-bottom: 0 !important; }
.ml-xxxl-0,
.mx-xxxl-0 {
margin-left: 0 !important; }
.m-xxxl-1 {
margin: var(--hl-spacer-2xs) !important; }
.mt-xxxl-1,
.my-xxxl-1 {
margin-top: var(--hl-spacer-2xs) !important; }
.mr-xxxl-1,
.mx-xxxl-1 {
margin-right: var(--hl-spacer-2xs) !important; }
.mb-xxxl-1,
.my-xxxl-1 {
margin-bottom: var(--hl-spacer-2xs) !important; }
.ml-xxxl-1,
.mx-xxxl-1 {
margin-left: var(--hl-spacer-2xs) !important; }
.m-xxxl-2 {
margin: var(--hl-spacer-xs) !important; }
.mt-xxxl-2,
.my-xxxl-2 {
margin-top: var(--hl-spacer-xs) !important; }
.mr-xxxl-2,
.mx-xxxl-2 {
margin-right: var(--hl-spacer-xs) !important; }
.mb-xxxl-2,
.my-xxxl-2 {
margin-bottom: var(--hl-spacer-xs) !important; }
.ml-xxxl-2,
.mx-xxxl-2 {
margin-left: var(--hl-spacer-xs) !important; }
.m-xxxl-3 {
margin: var(--hl-spacer-md) !important; }
.mt-xxxl-3,
.my-xxxl-3 {
margin-top: var(--hl-spacer-md) !important; }
.mr-xxxl-3,
.mx-xxxl-3 {
margin-right: var(--hl-spacer-md) !important; }
.mb-xxxl-3,
.my-xxxl-3 {
margin-bottom: var(--hl-spacer-md) !important; }
.ml-xxxl-3,
.mx-xxxl-3 {
margin-left: var(--hl-spacer-md) !important; }
.m-xxxl-4 {
margin: var(--hl-spacer-lg) !important; }
.mt-xxxl-4,
.my-xxxl-4 {
margin-top: var(--hl-spacer-lg) !important; }
.mr-xxxl-4,
.mx-xxxl-4 {
margin-right: var(--hl-spacer-lg) !important; }
.mb-xxxl-4,
.my-xxxl-4 {
margin-bottom: var(--hl-spacer-lg) !important; }
.ml-xxxl-4,
.mx-xxxl-4 {
margin-left: var(--hl-spacer-lg) !important; }
.m-xxxl-5 {
margin: var(--hl-spacer-3xl) !important; }
.mt-xxxl-5,
.my-xxxl-5 {
margin-top: var(--hl-spacer-3xl) !important; }
.mr-xxxl-5,
.mx-xxxl-5 {
margin-right: var(--hl-spacer-3xl) !important; }
.mb-xxxl-5,
.my-xxxl-5 {
margin-bottom: var(--hl-spacer-3xl) !important; }
.ml-xxxl-5,
.mx-xxxl-5 {
margin-left: var(--hl-spacer-3xl) !important; }
.m-xxxl-3xs {
margin: var(--hl-spacer-3xs) !important; }
.mt-xxxl-3xs,
.my-xxxl-3xs {
margin-top: var(--hl-spacer-3xs) !important; }
.mr-xxxl-3xs,
.mx-xxxl-3xs {
margin-right: var(--hl-spacer-3xs) !important; }
.mb-xxxl-3xs,
.my-xxxl-3xs {
margin-bottom: var(--hl-spacer-3xs) !important; }
.ml-xxxl-3xs,
.mx-xxxl-3xs {
margin-left: var(--hl-spacer-3xs) !important; }
.m-xxxl-2xs {
margin: var(--hl-spacer-2xs) !important; }
.mt-xxxl-2xs,
.my-xxxl-2xs {
margin-top: var(--hl-spacer-2xs) !important; }
.mr-xxxl-2xs,
.mx-xxxl-2xs {
margin-right: var(--hl-spacer-2xs) !important; }
.mb-xxxl-2xs,
.my-xxxl-2xs {
margin-bottom: var(--hl-spacer-2xs) !important; }
.ml-xxxl-2xs,
.mx-xxxl-2xs {
margin-left: var(--hl-spacer-2xs) !important; }
.m-xxxl-xs {
margin: var(--hl-spacer-xs) !important; }
.mt-xxxl-xs,
.my-xxxl-xs {
margin-top: var(--hl-spacer-xs) !important; }
.mr-xxxl-xs,
.mx-xxxl-xs {
margin-right: var(--hl-spacer-xs) !important; }
.mb-xxxl-xs,
.my-xxxl-xs {
margin-bottom: var(--hl-spacer-xs) !important; }
.ml-xxxl-xs,
.mx-xxxl-xs {
margin-left: var(--hl-spacer-xs) !important; }
.m-xxxl-sm {
margin: var(--hl-spacer-sm) !important; }
.mt-xxxl-sm,
.my-xxxl-sm {
margin-top: var(--hl-spacer-sm) !important; }
.mr-xxxl-sm,
.mx-xxxl-sm {
margin-right: var(--hl-spacer-sm) !important; }
.mb-xxxl-sm,
.my-xxxl-sm {
margin-bottom: var(--hl-spacer-sm) !important; }
.ml-xxxl-sm,
.mx-xxxl-sm {
margin-left: var(--hl-spacer-sm) !important; }
.m-xxxl-md {
margin: var(--hl-spacer-md) !important; }
.mt-xxxl-md,
.my-xxxl-md {
margin-top: var(--hl-spacer-md) !important; }
.mr-xxxl-md,
.mx-xxxl-md {
margin-right: var(--hl-spacer-md) !important; }
.mb-xxxl-md,
.my-xxxl-md {
margin-bottom: var(--hl-spacer-md) !important; }
.ml-xxxl-md,
.mx-xxxl-md {
margin-left: var(--hl-spacer-md) !important; }
.m-xxxl-lg {
margin: var(--hl-spacer-lg) !important; }
.mt-xxxl-lg,
.my-xxxl-lg {
margin-top: var(--hl-spacer-lg) !important; }
.mr-xxxl-lg,
.mx-xxxl-lg {
margin-right: var(--hl-spacer-lg) !important; }
.mb-xxxl-lg,
.my-xxxl-lg {
margin-bottom: var(--hl-spacer-lg) !important; }
.ml-xxxl-lg,
.mx-xxxl-lg {
margin-left: var(--hl-spacer-lg) !important; }
.m-xxxl-xl {
margin: var(--hl-spacer-xl) !important; }
.mt-xxxl-xl,
.my-xxxl-xl {
margin-top: var(--hl-spacer-xl) !important; }
.mr-xxxl-xl,
.mx-xxxl-xl {
margin-right: var(--hl-spacer-xl) !important; }
.mb-xxxl-xl,
.my-xxxl-xl {
margin-bottom: var(--hl-spacer-xl) !important; }
.ml-xxxl-xl,
.mx-xxxl-xl {
margin-left: var(--hl-spacer-xl) !important; }
.m-xxxl-2xl {
margin: var(--hl-spacer-2xl) !important; }
.mt-xxxl-2xl,
.my-xxxl-2xl {
margin-top: var(--hl-spacer-2xl) !important; }
.mr-xxxl-2xl,
.mx-xxxl-2xl {
margin-right: var(--hl-spacer-2xl) !important; }
.mb-xxxl-2xl,
.my-xxxl-2xl {
margin-bottom: var(--hl-spacer-2xl) !important; }
.ml-xxxl-2xl,
.mx-xxxl-2xl {
margin-left: var(--hl-spacer-2xl) !important; }
.m-xxxl-3xl {
margin: var(--hl-spacer-3xl) !important; }
.mt-xxxl-3xl,
.my-xxxl-3xl {
margin-top: var(--hl-spacer-3xl) !important; }
.mr-xxxl-3xl,
.mx-xxxl-3xl {
margin-right: var(--hl-spacer-3xl) !important; }
.mb-xxxl-3xl,
.my-xxxl-3xl {
margin-bottom: var(--hl-spacer-3xl) !important; }
.ml-xxxl-3xl,
.mx-xxxl-3xl {
margin-left: var(--hl-spacer-3xl) !important; }
.m-xxxl-4xl {
margin: var(--hl-spacer-4xl) !important; }
.mt-xxxl-4xl,
.my-xxxl-4xl {
margin-top: var(--hl-spacer-4xl) !important; }
.mr-xxxl-4xl,
.mx-xxxl-4xl {
margin-right: var(--hl-spacer-4xl) !important; }
.mb-xxxl-4xl,
.my-xxxl-4xl {
margin-bottom: var(--hl-spacer-4xl) !important; }
.ml-xxxl-4xl,
.mx-xxxl-4xl {
margin-left: var(--hl-spacer-4xl) !important; }
.m-xxxl-5xl {
margin: var(--hl-spacer-5xl) !important; }
.mt-xxxl-5xl,
.my-xxxl-5xl {
margin-top: var(--hl-spacer-5xl) !important; }
.mr-xxxl-5xl,
.mx-xxxl-5xl {
margin-right: var(--hl-spacer-5xl) !important; }
.mb-xxxl-5xl,
.my-xxxl-5xl {
margin-bottom: var(--hl-spacer-5xl) !important; }
.ml-xxxl-5xl,
.mx-xxxl-5xl {
margin-left: var(--hl-spacer-5xl) !important; }
.m-xxxl-6xl {
margin: var(--hl-spacer-6xl) !important; }
.mt-xxxl-6xl,
.my-xxxl-6xl {
margin-top: var(--hl-spacer-6xl) !important; }
.mr-xxxl-6xl,
.mx-xxxl-6xl {
margin-right: var(--hl-spacer-6xl) !important; }
.mb-xxxl-6xl,
.my-xxxl-6xl {
margin-bottom: var(--hl-spacer-6xl) !important; }
.ml-xxxl-6xl,
.mx-xxxl-6xl {
margin-left: var(--hl-spacer-6xl) !important; }
.m-xxxl-7xl {
margin: var(--hl-spacer-7xl) !important; }
.mt-xxxl-7xl,
.my-xxxl-7xl {
margin-top: var(--hl-spacer-7xl) !important; }
.mr-xxxl-7xl,
.mx-xxxl-7xl {
margin-right: var(--hl-spacer-7xl) !important; }
.mb-xxxl-7xl,
.my-xxxl-7xl {
margin-bottom: var(--hl-spacer-7xl) !important; }
.ml-xxxl-7xl,
.mx-xxxl-7xl {
margin-left: var(--hl-spacer-7xl) !important; }
.p-xxxl-0 {
padding: 0 !important; }
.pt-xxxl-0,
.py-xxxl-0 {
padding-top: 0 !important; }
.pr-xxxl-0,
.px-xxxl-0 {
padding-right: 0 !important; }
.pb-xxxl-0,
.py-xxxl-0 {
padding-bottom: 0 !important; }
.pl-xxxl-0,
.px-xxxl-0 {
padding-left: 0 !important; }
.p-xxxl-1 {
padding: var(--hl-spacer-2xs) !important; }
.pt-xxxl-1,
.py-xxxl-1 {
padding-top: var(--hl-spacer-2xs) !important; }
.pr-xxxl-1,
.px-xxxl-1 {
padding-right: var(--hl-spacer-2xs) !important; }
.pb-xxxl-1,
.py-xxxl-1 {
padding-bottom: var(--hl-spacer-2xs) !important; }
.pl-xxxl-1,
.px-xxxl-1 {
padding-left: var(--hl-spacer-2xs) !important; }
.p-xxxl-2 {
padding: var(--hl-spacer-xs) !important; }
.pt-xxxl-2,
.py-xxxl-2 {
padding-top: var(--hl-spacer-xs) !important; }
.pr-xxxl-2,
.px-xxxl-2 {
padding-right: var(--hl-spacer-xs) !important; }
.pb-xxxl-2,
.py-xxxl-2 {
padding-bottom: var(--hl-spacer-xs) !important; }
.pl-xxxl-2,
.px-xxxl-2 {
padding-left: var(--hl-spacer-xs) !important; }
.p-xxxl-3 {
padding: var(--hl-spacer-md) !important; }
.pt-xxxl-3,
.py-xxxl-3 {
padding-top: var(--hl-spacer-md) !important; }
.pr-xxxl-3,
.px-xxxl-3 {
padding-right: var(--hl-spacer-md) !important; }
.pb-xxxl-3,
.py-xxxl-3 {
padding-bottom: var(--hl-spacer-md) !important; }
.pl-xxxl-3,
.px-xxxl-3 {
padding-left: var(--hl-spacer-md) !important; }
.p-xxxl-4 {
padding: var(--hl-spacer-lg) !important; }
.pt-xxxl-4,
.py-xxxl-4 {
padding-top: var(--hl-spacer-lg) !important; }
.pr-xxxl-4,
.px-xxxl-4 {
padding-right: var(--hl-spacer-lg) !important; }
.pb-xxxl-4,
.py-xxxl-4 {
padding-bottom: var(--hl-spacer-lg) !important; }
.pl-xxxl-4,
.px-xxxl-4 {
padding-left: var(--hl-spacer-lg) !important; }
.p-xxxl-5 {
padding: var(--hl-spacer-3xl) !important; }
.pt-xxxl-5,
.py-xxxl-5 {
padding-top: var(--hl-spacer-3xl) !important; }
.pr-xxxl-5,
.px-xxxl-5 {
padding-right: var(--hl-spacer-3xl) !important; }
.pb-xxxl-5,
.py-xxxl-5 {
padding-bottom: var(--hl-spacer-3xl) !important; }
.pl-xxxl-5,
.px-xxxl-5 {
padding-left: var(--hl-spacer-3xl) !important; }
.p-xxxl-3xs {
padding: var(--hl-spacer-3xs) !important; }
.pt-xxxl-3xs,
.py-xxxl-3xs {
padding-top: var(--hl-spacer-3xs) !important; }
.pr-xxxl-3xs,
.px-xxxl-3xs {
padding-right: var(--hl-spacer-3xs) !important; }
.pb-xxxl-3xs,
.py-xxxl-3xs {
padding-bottom: var(--hl-spacer-3xs) !important; }
.pl-xxxl-3xs,
.px-xxxl-3xs {
padding-left: var(--hl-spacer-3xs) !important; }
.p-xxxl-2xs {
padding: var(--hl-spacer-2xs) !important; }
.pt-xxxl-2xs,
.py-xxxl-2xs {
padding-top: var(--hl-spacer-2xs) !important; }
.pr-xxxl-2xs,
.px-xxxl-2xs {
padding-right: var(--hl-spacer-2xs) !important; }
.pb-xxxl-2xs,
.py-xxxl-2xs {
padding-bottom: var(--hl-spacer-2xs) !important; }
.pl-xxxl-2xs,
.px-xxxl-2xs {
padding-left: var(--hl-spacer-2xs) !important; }
.p-xxxl-xs {
padding: var(--hl-spacer-xs) !important; }
.pt-xxxl-xs,
.py-xxxl-xs {
padding-top: var(--hl-spacer-xs) !important; }
.pr-xxxl-xs,
.px-xxxl-xs {
padding-right: var(--hl-spacer-xs) !important; }
.pb-xxxl-xs,
.py-xxxl-xs {
padding-bottom: var(--hl-spacer-xs) !important; }
.pl-xxxl-xs,
.px-xxxl-xs {
padding-left: var(--hl-spacer-xs) !important; }
.p-xxxl-sm {
padding: var(--hl-spacer-sm) !important; }
.pt-xxxl-sm,
.py-xxxl-sm {
padding-top: var(--hl-spacer-sm) !important; }
.pr-xxxl-sm,
.px-xxxl-sm {
padding-right: var(--hl-spacer-sm) !important; }
.pb-xxxl-sm,
.py-xxxl-sm {
padding-bottom: var(--hl-spacer-sm) !important; }
.pl-xxxl-sm,
.px-xxxl-sm {
padding-left: var(--hl-spacer-sm) !important; }
.p-xxxl-md {
padding: var(--hl-spacer-md) !important; }
.pt-xxxl-md,
.py-xxxl-md {
padding-top: var(--hl-spacer-md) !important; }
.pr-xxxl-md,
.px-xxxl-md {
padding-right: var(--hl-spacer-md) !important; }
.pb-xxxl-md,
.py-xxxl-md {
padding-bottom: var(--hl-spacer-md) !important; }
.pl-xxxl-md,
.px-xxxl-md {
padding-left: var(--hl-spacer-md) !important; }
.p-xxxl-lg {
padding: var(--hl-spacer-lg) !important; }
.pt-xxxl-lg,
.py-xxxl-lg {
padding-top: var(--hl-spacer-lg) !important; }
.pr-xxxl-lg,
.px-xxxl-lg {
padding-right: var(--hl-spacer-lg) !important; }
.pb-xxxl-lg,
.py-xxxl-lg {
padding-bottom: var(--hl-spacer-lg) !important; }
.pl-xxxl-lg,
.px-xxxl-lg {
padding-left: var(--hl-spacer-lg) !important; }
.p-xxxl-xl {
padding: var(--hl-spacer-xl) !important; }
.pt-xxxl-xl,
.py-xxxl-xl {
padding-top: var(--hl-spacer-xl) !important; }
.pr-xxxl-xl,
.px-xxxl-xl {
padding-right: var(--hl-spacer-xl) !important; }
.pb-xxxl-xl,
.py-xxxl-xl {
padding-bottom: var(--hl-spacer-xl) !important; }
.pl-xxxl-xl,
.px-xxxl-xl {
padding-left: var(--hl-spacer-xl) !important; }
.p-xxxl-2xl {
padding: var(--hl-spacer-2xl) !important; }
.pt-xxxl-2xl,
.py-xxxl-2xl {
padding-top: var(--hl-spacer-2xl) !important; }
.pr-xxxl-2xl,
.px-xxxl-2xl {
padding-right: var(--hl-spacer-2xl) !important; }
.pb-xxxl-2xl,
.py-xxxl-2xl {
padding-bottom: var(--hl-spacer-2xl) !important; }
.pl-xxxl-2xl,
.px-xxxl-2xl {
padding-left: var(--hl-spacer-2xl) !important; }
.p-xxxl-3xl {
padding: var(--hl-spacer-3xl) !important; }
.pt-xxxl-3xl,
.py-xxxl-3xl {
padding-top: var(--hl-spacer-3xl) !important; }
.pr-xxxl-3xl,
.px-xxxl-3xl {
padding-right: var(--hl-spacer-3xl) !important; }
.pb-xxxl-3xl,
.py-xxxl-3xl {
padding-bottom: var(--hl-spacer-3xl) !important; }
.pl-xxxl-3xl,
.px-xxxl-3xl {
padding-left: var(--hl-spacer-3xl) !important; }
.p-xxxl-4xl {
padding: var(--hl-spacer-4xl) !important; }
.pt-xxxl-4xl,
.py-xxxl-4xl {
padding-top: var(--hl-spacer-4xl) !important; }
.pr-xxxl-4xl,
.px-xxxl-4xl {
padding-right: var(--hl-spacer-4xl) !important; }
.pb-xxxl-4xl,
.py-xxxl-4xl {
padding-bottom: var(--hl-spacer-4xl) !important; }
.pl-xxxl-4xl,
.px-xxxl-4xl {
padding-left: var(--hl-spacer-4xl) !important; }
.p-xxxl-5xl {
padding: var(--hl-spacer-5xl) !important; }
.pt-xxxl-5xl,
.py-xxxl-5xl {
padding-top: var(--hl-spacer-5xl) !important; }
.pr-xxxl-5xl,
.px-xxxl-5xl {
padding-right: var(--hl-spacer-5xl) !important; }
.pb-xxxl-5xl,
.py-xxxl-5xl {
padding-bottom: var(--hl-spacer-5xl) !important; }
.pl-xxxl-5xl,
.px-xxxl-5xl {
padding-left: var(--hl-spacer-5xl) !important; }
.p-xxxl-6xl {
padding: var(--hl-spacer-6xl) !important; }
.pt-xxxl-6xl,
.py-xxxl-6xl {
padding-top: var(--hl-spacer-6xl) !important; }
.pr-xxxl-6xl,
.px-xxxl-6xl {
padding-right: var(--hl-spacer-6xl) !important; }
.pb-xxxl-6xl,
.py-xxxl-6xl {
padding-bottom: var(--hl-spacer-6xl) !important; }
.pl-xxxl-6xl,
.px-xxxl-6xl {
padding-left: var(--hl-spacer-6xl) !important; }
.p-xxxl-7xl {
padding: var(--hl-spacer-7xl) !important; }
.pt-xxxl-7xl,
.py-xxxl-7xl {
padding-top: var(--hl-spacer-7xl) !important; }
.pr-xxxl-7xl,
.px-xxxl-7xl {
padding-right: var(--hl-spacer-7xl) !important; }
.pb-xxxl-7xl,
.py-xxxl-7xl {
padding-bottom: var(--hl-spacer-7xl) !important; }
.pl-xxxl-7xl,
.px-xxxl-7xl {
padding-left: var(--hl-spacer-7xl) !important; }
.m-xxxl-auto {
margin: auto !important; }
.mt-xxxl-auto,
.my-xxxl-auto {
margin-top: auto !important; }
.mr-xxxl-auto,
.mx-xxxl-auto {
margin-right: auto !important; }
.mb-xxxl-auto,
.my-xxxl-auto {
margin-bottom: auto !important; }
.ml-xxxl-auto,
.mx-xxxl-auto {
margin-left: auto !important; } }
.section {
color: var(--hl-section-color-fg-light-default);
padding-top: var(--hl-spacer-md);
padding-bottom: var(--hl-spacer-md); }
.section--big-padding {
padding-top: var(--hl-spacer-xl);
padding-bottom: var(--hl-spacer-xl); }
@media (min-width: 768px) {
.section--big-padding {
padding-top: var(--hl-spacer-3xl);
padding-bottom: var(--hl-spacer-3xl); } }
.section--big-padding:not([class*=bg-]) + .section--big-padding:not([class*=bg-]) {
padding-top: 0; }
.section--big-padding[class*=bg-blue]:not(.bg-dark) + .section--big-padding[class*=bg-blue]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-blue].bg-dark + .section--big-padding[class*=bg-blue].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-blue-light]:not(.bg-dark) + .section--big-padding[class*=bg-blue-light]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-blue-light].bg-dark + .section--big-padding[class*=bg-blue-light].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-blue-dark]:not(.bg-dark) + .section--big-padding[class*=bg-blue-dark]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-blue-dark].bg-dark + .section--big-padding[class*=bg-blue-dark].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-purple]:not(.bg-dark) + .section--big-padding[class*=bg-purple]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-purple].bg-dark + .section--big-padding[class*=bg-purple].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-purple-light]:not(.bg-dark) + .section--big-padding[class*=bg-purple-light]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-purple-light].bg-dark + .section--big-padding[class*=bg-purple-light].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-purple-dark]:not(.bg-dark) + .section--big-padding[class*=bg-purple-dark]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-purple-dark].bg-dark + .section--big-padding[class*=bg-purple-dark].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-pink]:not(.bg-dark) + .section--big-padding[class*=bg-pink]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-pink].bg-dark + .section--big-padding[class*=bg-pink].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-pink-light]:not(.bg-dark) + .section--big-padding[class*=bg-pink-light]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-pink-light].bg-dark + .section--big-padding[class*=bg-pink-light].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-pink-dark]:not(.bg-dark) + .section--big-padding[class*=bg-pink-dark]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-pink-dark].bg-dark + .section--big-padding[class*=bg-pink-dark].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-orange]:not(.bg-dark) + .section--big-padding[class*=bg-orange]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-orange].bg-dark + .section--big-padding[class*=bg-orange].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-yellow]:not(.bg-dark) + .section--big-padding[class*=bg-yellow]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-yellow].bg-dark + .section--big-padding[class*=bg-yellow].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-yellow-light]:not(.bg-dark) + .section--big-padding[class*=bg-yellow-light]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-yellow-light].bg-dark + .section--big-padding[class*=bg-yellow-light].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-yellow-dark]:not(.bg-dark) + .section--big-padding[class*=bg-yellow-dark]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-yellow-dark].bg-dark + .section--big-padding[class*=bg-yellow-dark].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-green]:not(.bg-dark) + .section--big-padding[class*=bg-green]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-green].bg-dark + .section--big-padding[class*=bg-green].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-green-light]:not(.bg-dark) + .section--big-padding[class*=bg-green-light]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-green-light].bg-dark + .section--big-padding[class*=bg-green-light].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-green-dark]:not(.bg-dark) + .section--big-padding[class*=bg-green-dark]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-green-dark].bg-dark + .section--big-padding[class*=bg-green-dark].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-white]:not(.bg-dark) + .section--big-padding[class*=bg-white]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-white].bg-dark + .section--big-padding[class*=bg-white].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-gray]:not(.bg-dark) + .section--big-padding[class*=bg-gray]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-gray].bg-dark + .section--big-padding[class*=bg-gray].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-gray-dark]:not(.bg-dark) + .section--big-padding[class*=bg-gray-dark]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-gray-dark].bg-dark + .section--big-padding[class*=bg-gray-dark].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-red]:not(.bg-dark) + .section--big-padding[class*=bg-red]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-red].bg-dark + .section--big-padding[class*=bg-red].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-primary]:not(.bg-dark) + .section--big-padding[class*=bg-primary]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-primary].bg-dark + .section--big-padding[class*=bg-primary].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-secondary]:not(.bg-dark) + .section--big-padding[class*=bg-secondary]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-secondary].bg-dark + .section--big-padding[class*=bg-secondary].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-success]:not(.bg-dark) + .section--big-padding[class*=bg-success]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-success].bg-dark + .section--big-padding[class*=bg-success].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-info]:not(.bg-dark) + .section--big-padding[class*=bg-info]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-info].bg-dark + .section--big-padding[class*=bg-info].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-warning]:not(.bg-dark) + .section--big-padding[class*=bg-warning]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-warning].bg-dark + .section--big-padding[class*=bg-warning].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-danger]:not(.bg-dark) + .section--big-padding[class*=bg-danger]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-danger].bg-dark + .section--big-padding[class*=bg-danger].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-black]:not(.bg-dark) + .section--big-padding[class*=bg-black]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-black].bg-dark + .section--big-padding[class*=bg-black].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-obs]:not(.bg-dark) + .section--big-padding[class*=bg-obs]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-obs].bg-dark + .section--big-padding[class*=bg-obs].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-default]:not(.bg-dark) + .section--big-padding[class*=bg-default]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-default].bg-dark + .section--big-padding[class*=bg-default].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-muted]:not(.bg-dark) + .section--big-padding[class*=bg-muted]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-muted].bg-dark + .section--big-padding[class*=bg-muted].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-very-muted]:not(.bg-dark) + .section--big-padding[class*=bg-very-muted]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-very-muted].bg-dark + .section--big-padding[class*=bg-very-muted].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-ultra-muted]:not(.bg-dark) + .section--big-padding[class*=bg-ultra-muted]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-ultra-muted].bg-dark + .section--big-padding[class*=bg-ultra-muted].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-dark-default]:not(.bg-dark) + .section--big-padding[class*=bg-dark-default]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-dark-default].bg-dark + .section--big-padding[class*=bg-dark-default].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-dark-primary]:not(.bg-dark) + .section--big-padding[class*=bg-dark-primary]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-dark-primary].bg-dark + .section--big-padding[class*=bg-dark-primary].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-dark-muted]:not(.bg-dark) + .section--big-padding[class*=bg-dark-muted]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-dark-muted].bg-dark + .section--big-padding[class*=bg-dark-muted].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-dark-very-muted]:not(.bg-dark) + .section--big-padding[class*=bg-dark-very-muted]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-dark-very-muted].bg-dark + .section--big-padding[class*=bg-dark-very-muted].bg-dark {
padding-top: 0; }
.section--big-padding[class*=bg-dark-ultra-muted]:not(.bg-dark) + .section--big-padding[class*=bg-dark-ultra-muted]:not(.bg-dark) {
padding-top: 0; }
.section--big-padding[class*=bg-dark-ultra-muted].bg-dark + .section--big-padding[class*=bg-dark-ultra-muted].bg-dark {
padding-top: 0; }
.section--fill-screen {
min-height: calc(100vh - 100px); }
hl-section-example:has(.section--big-padding:not([class*=bg-])) + hl-section-example:has(.section--big-padding:not([class*=bg-])) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-blue]) + hl-section-example:has(.section--big-padding[class*=bg-blue]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-blue-light]) + hl-section-example:has(.section--big-padding[class*=bg-blue-light]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-blue-dark]) + hl-section-example:has(.section--big-padding[class*=bg-blue-dark]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-purple]) + hl-section-example:has(.section--big-padding[class*=bg-purple]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-purple-light]) + hl-section-example:has(.section--big-padding[class*=bg-purple-light]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-purple-dark]) + hl-section-example:has(.section--big-padding[class*=bg-purple-dark]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-pink]) + hl-section-example:has(.section--big-padding[class*=bg-pink]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-pink-light]) + hl-section-example:has(.section--big-padding[class*=bg-pink-light]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-pink-dark]) + hl-section-example:has(.section--big-padding[class*=bg-pink-dark]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-orange]) + hl-section-example:has(.section--big-padding[class*=bg-orange]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-yellow]) + hl-section-example:has(.section--big-padding[class*=bg-yellow]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-yellow-light]) + hl-section-example:has(.section--big-padding[class*=bg-yellow-light]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-yellow-dark]) + hl-section-example:has(.section--big-padding[class*=bg-yellow-dark]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-green]) + hl-section-example:has(.section--big-padding[class*=bg-green]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-green-light]) + hl-section-example:has(.section--big-padding[class*=bg-green-light]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-green-dark]) + hl-section-example:has(.section--big-padding[class*=bg-green-dark]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-white]) + hl-section-example:has(.section--big-padding[class*=bg-white]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-gray]) + hl-section-example:has(.section--big-padding[class*=bg-gray]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-gray-dark]) + hl-section-example:has(.section--big-padding[class*=bg-gray-dark]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-red]) + hl-section-example:has(.section--big-padding[class*=bg-red]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-primary]) + hl-section-example:has(.section--big-padding[class*=bg-primary]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-secondary]) + hl-section-example:has(.section--big-padding[class*=bg-secondary]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-success]) + hl-section-example:has(.section--big-padding[class*=bg-success]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-info]) + hl-section-example:has(.section--big-padding[class*=bg-info]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-warning]) + hl-section-example:has(.section--big-padding[class*=bg-warning]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-danger]) + hl-section-example:has(.section--big-padding[class*=bg-danger]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-black]) + hl-section-example:has(.section--big-padding[class*=bg-black]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-obs]) + hl-section-example:has(.section--big-padding[class*=bg-obs]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-default]) + hl-section-example:has(.section--big-padding[class*=bg-default]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-muted]) + hl-section-example:has(.section--big-padding[class*=bg-muted]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-very-muted]) + hl-section-example:has(.section--big-padding[class*=bg-very-muted]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-ultra-muted]) + hl-section-example:has(.section--big-padding[class*=bg-ultra-muted]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-dark-default]) + hl-section-example:has(.section--big-padding[class*=bg-dark-default]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-dark-primary]) + hl-section-example:has(.section--big-padding[class*=bg-dark-primary]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-dark-muted]) + hl-section-example:has(.section--big-padding[class*=bg-dark-muted]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-dark-very-muted]) + hl-section-example:has(.section--big-padding[class*=bg-dark-very-muted]) .section--big-padding {
padding-top: 0; }
hl-section-example:has(.section--big-padding[class*=bg-dark-ultra-muted]) + hl-section-example:has(.section--big-padding[class*=bg-dark-ultra-muted]) .section--big-padding {
padding-top: 0; }
.u-stack {
--stack-align-items: stretch;
--stack-direction: row;
--stack-gap: 8px;
--stack-justify-content: start;
--stack-wrap: nowrap;
align-items: var(--stack-align-items);
display: flex;
flex-direction: var(--stack-direction);
flex-wrap: var(--stack-wrap);
gap: var(--stack-gap);
justify-content: var(--stack-justify-content); }
.u-stack ::slotted(*) {
margin: 0; }
.u-stack--is-column {
--stack-direction: column; }
.u-gap-2xs {
gap: var(--hl-spacer-2xs); }
.u-gap-xs {
gap: var(--hl-spacer-xs); }
.u-gap-sm {
gap: var(--hl-spacer-sm); }
.u-gap-md {
gap: var(--hl-spacer-md); }
.u-gap-lg {
gap: var(--hl-spacer-lg); }
.stretched-link::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: auto;
content: "";
background-color: rgba(0, 0, 0, 0); }
.text-monospace {
font-family: var(--hl-typography-font-family-monospaced) !important; }
.text-justify {
text-align: justify !important; }
.text-wrap {
white-space: normal !important; }
.text-nowrap {
white-space: nowrap !important; }
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.text-left {
text-align: left !important; }
.text-right {
text-align: right !important; }
.text-center {
text-align: center !important; }
@media (min-width: 576px) {
.text-sm-left {
text-align: left !important; }
.text-sm-right {
text-align: right !important; }
.text-sm-center {
text-align: center !important; } }
@media (min-width: 768px) {
.text-md-left {
text-align: left !important; }
.text-md-right {
text-align: right !important; }
.text-md-center {
text-align: center !important; } }
@media (min-width: 992px) {
.text-lg-left {
text-align: left !important; }
.text-lg-right {
text-align: right !important; }
.text-lg-center {
text-align: center !important; } }
@media (min-width: 1200px) {
.text-xl-left {
text-align: left !important; }
.text-xl-right {
text-align: right !important; }
.text-xl-center {
text-align: center !important; } }
@media (min-width: 1400px) {
.text-xxl-left {
text-align: left !important; }
.text-xxl-right {
text-align: right !important; }
.text-xxl-center {
text-align: center !important; } }
@media (min-width: 1880px) {
.text-xxxl-left {
text-align: left !important; }
.text-xxxl-right {
text-align: right !important; }
.text-xxxl-center {
text-align: center !important; } }
.text-lowercase {
text-transform: lowercase !important; }
.text-uppercase {
text-transform: uppercase !important; }
.text-capitalize {
text-transform: capitalize !important; }
.font-weight-light {
font-weight: var(--hl-typography-font-weight-body-regular) !important; }
.font-weight-lighter {
font-weight: var(--hl-typography-font-weight-body-regular) !important; }
.font-weight-normal {
font-weight: var(--hl-typography-font-weight-body-regular) !important; }
.font-weight-bold {
font-weight: var(--hl-typography-font-weight-body-bold) !important; }
.font-weight-bolder {
font-weight: var(--hl-typography-font-weight-body-bold) !important; }
.font-italic {
font-style: italic !important; }
.text-primary {
color: var(--hl-color-fg-light-primary) !important; }
.text-primary svg.icon {
fill: var(--hl-color-fg-light-primary) !important;
stroke: transparent; }
a.text-primary:hover, a.text-primary:focus {
color: var(--hl-color-fg-light-interaction-hover) !important; }
a.text-primary:active {
color: var(--hl-color-fg-light-interaction-pressed) !important; }
.text-secondary {
color: var(--hl-color-secondary) !important; }
.text-secondary svg.icon {
fill: var(--hl-color-secondary) !important;
stroke: transparent; }
.text-success {
color: var(--hl-color-functional-success) !important; }
.text-success svg.icon {
fill: var(--hl-color-functional-success) !important;
stroke: transparent; }
.text-info {
color: var(--hl-color-functional-info) !important; }
.text-info svg.icon {
fill: var(--hl-color-functional-info) !important;
stroke: transparent; }
.text-warning {
color: var(--hl-color-functional-warning) !important; }
.text-warning svg.icon {
fill: var(--hl-color-functional-warning) !important;
stroke: transparent; }
.text-danger {
color: var(--hl-color-functional-danger) !important; }
.text-danger svg.icon {
fill: var(--hl-color-functional-danger) !important;
stroke: transparent; }
.text-black {
color: var(--hl-color-fg-light-default) !important; }
.text-black svg.icon {
fill: var(--hl-color-fg-light-default) !important;
stroke: transparent; }
.text-white {
color: var(--hl-color-fg-dark-default) !important; }
.text-white svg.icon {
fill: var(--hl-color-fg-dark-default) !important;
stroke: transparent; }
.text-obs {
color: #595959 !important; }
.text-obs svg.icon {
fill: #595959 !important;
stroke: transparent; }
.text-default {
color: var(--hl-color-fg-light-default) !important; }
.text-default svg.icon {
fill: var(--hl-color-fg-light-default) !important;
stroke: transparent; }
.text-fg {
color: var(--hl-color-fg-light-default) !important; }
.text-fg svg.icon {
fill: var(--hl-color-fg-light-default) !important;
stroke: transparent; }
.text-important {
color: var(--hl-color-fg-light-important) !important; }
.text-important svg.icon {
fill: var(--hl-color-fg-light-important) !important;
stroke: transparent; }
.text-disabled {
color: var(--hl-color-fg-light-disabled) !important; }
.text-disabled svg.icon {
fill: var(--hl-color-fg-light-disabled) !important;
stroke: transparent; }
.text-muted {
color: var(--hl-color-fg-light-muted) !important; }
.text-muted svg.icon {
fill: var(--hl-color-fg-light-muted) !important;
stroke: transparent; }
.text-very-muted {
color: var(--hl-color-fg-light-very-muted) !important; }
.text-very-muted svg.icon {
fill: var(--hl-color-fg-light-very-muted) !important;
stroke: transparent; }
.text-ultra-muted {
color: var(--hl-color-fg-light-ultra-muted) !important; }
.text-ultra-muted svg.icon {
fill: var(--hl-color-fg-light-ultra-muted) !important;
stroke: transparent; }
.text-interaction {
color: var(--hl-color-fg-light-interaction-standby) !important; }
.text-interaction svg.icon {
fill: var(--hl-color-fg-light-interaction-standby) !important;
stroke: transparent; }
.text-interaction-hover {
color: var(--hl-color-fg-light-interaction-hover) !important; }
.text-interaction-hover svg.icon {
fill: var(--hl-color-fg-light-interaction-hover) !important;
stroke: transparent; }
.text-interaction-active {
color: var(--hl-color-fg-light-interaction-pressed) !important; }
.text-interaction-active svg.icon {
fill: var(--hl-color-fg-light-interaction-pressed) !important;
stroke: transparent; }
.text-dark-default {
color: var(--hl-color-fg-dark-default) !important; }
.text-dark-default svg.icon {
fill: var(--hl-color-fg-dark-default) !important;
stroke: transparent; }
.text-dark-fg {
color: var(--hl-color-fg-dark-default) !important; }
.text-dark-fg svg.icon {
fill: var(--hl-color-fg-dark-default) !important;
stroke: transparent; }
.text-dark-important {
color: var(--hl-color-fg-dark-important) !important; }
.text-dark-important svg.icon {
fill: var(--hl-color-fg-dark-important) !important;
stroke: transparent; }
.text-dark-primary {
color: var(--hl-color-fg-dark-primary) !important; }
.text-dark-primary svg.icon {
fill: var(--hl-color-fg-dark-primary) !important;
stroke: transparent; }
.text-dark-disabled {
color: var(--hl-color-fg-dark-disabled) !important; }
.text-dark-disabled svg.icon {
fill: var(--hl-color-fg-dark-disabled) !important;
stroke: transparent; }
.text-light-disabled {
color: var(--hl-color-fg-light-disabled) !important; }
.text-light-disabled svg.icon {
fill: var(--hl-color-fg-light-disabled) !important;
stroke: transparent; }
.text-dark-muted {
color: var(--hl-color-fg-dark-muted) !important; }
.text-dark-muted svg.icon {
fill: var(--hl-color-fg-dark-muted) !important;
stroke: transparent; }
.text-dark-very-muted {
color: var(--hl-color-fg-dark-very-muted) !important; }
.text-dark-very-muted svg.icon {
fill: var(--hl-color-fg-dark-very-muted) !important;
stroke: transparent; }
.text-dark-ultra-muted {
color: var(--hl-color-fg-dark-ultra-muted) !important; }
.text-dark-ultra-muted svg.icon {
fill: var(--hl-color-fg-dark-ultra-muted) !important;
stroke: transparent; }
.text-dark-interaction {
color: var(--hl-color-fg-dark-interaction-standby) !important; }
.text-dark-interaction svg.icon {
fill: var(--hl-color-fg-dark-interaction-standby) !important;
stroke: transparent; }
.text-dark-interaction-hover {
color: var(--hl-color-fg-dark-interaction-hover) !important; }
.text-dark-interaction-hover svg.icon {
fill: var(--hl-color-fg-dark-interaction-hover) !important;
stroke: transparent; }
.text-dark-interaction-active {
color: var(--hl-color-fg-dark-interaction-pressed) !important; }
.text-dark-interaction-active svg.icon {
fill: var(--hl-color-fg-dark-interaction-pressed) !important;
stroke: transparent; }
.text-body {
color: var(--hl-color-fg-light-default) !important; }
.text-black-50 {
color: rgba(var(--hl-color-core-black), 0.5) !important; }
.text-white-50 {
color: rgba(var(--hl-color-core-white), 0.5) !important; }
.text-very-muted {
color: var(--oms-color-text-light-very-muted) !important; }
.text-very-muted > * {
color: inherit !important; }
.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0; }
.text-decoration-none {
text-decoration: none !important; }
.text-break {
word-break: break-word !important;
word-wrap: break-word !important; }
.text-reset {
color: inherit !important; }
.text-line-through {
text-decoration: line-through; }
.text-line-through--danger {
-webkit-text-decoration-color: var(--danger);
text-decoration-color: var(--danger); }
svg.icon-blue,
.icon-blue svg {
fill: var(--hl-color-supporting-blue) !important;
stroke: transparent !important; }
svg.icon-blue-light,
.icon-blue-light svg {
fill: var(--hl-color-supporting-blue-light) !important;
stroke: transparent !important; }
svg.icon-blue-dark,
.icon-blue-dark svg {
fill: var(--hl-color-supporting-blue-dark) !important;
stroke: transparent !important; }
svg.icon-purple,
.icon-purple svg {
fill: var(--hl-color-supporting-purple) !important;
stroke: transparent !important; }
svg.icon-purple-light,
.icon-purple-light svg {
fill: var(--hl-color-supporting-purple-light) !important;
stroke: transparent !important; }
svg.icon-purple-dark,
.icon-purple-dark svg {
fill: var(--hl-color-supporting-purple-dark) !important;
stroke: transparent !important; }
svg.icon-pink,
.icon-pink svg {
fill: var(--hl-color-supporting-pink) !important;
stroke: transparent !important; }
svg.icon-pink-light,
.icon-pink-light svg {
fill: var(--hl-color-supporting-pink-light) !important;
stroke: transparent !important; }
svg.icon-pink-dark,
.icon-pink-dark svg {
fill: var(--hl-color-supporting-pink-dark) !important;
stroke: transparent !important; }
svg.icon-orange,
.icon-orange svg {
fill: #FF7900 !important;
stroke: transparent !important; }
svg.icon-yellow,
.icon-yellow svg {
fill: var(--hl-color-supporting-yellow) !important;
stroke: transparent !important; }
svg.icon-yellow-light,
.icon-yellow-light svg {
fill: var(--hl-color-supporting-yellow-light) !important;
stroke: transparent !important; }
svg.icon-yellow-dark,
.icon-yellow-dark svg {
fill: var(--hl-color-supporting-yellow-dark) !important;
stroke: transparent !important; }
svg.icon-green,
.icon-green svg {
fill: var(--hl-color-supporting-green) !important;
stroke: transparent !important; }
svg.icon-green-light,
.icon-green-light svg {
fill: var(--hl-color-supporting-green-light) !important;
stroke: transparent !important; }
svg.icon-green-dark,
.icon-green-dark svg {
fill: var(--hl-color-supporting-green-dark) !important;
stroke: transparent !important; }
svg.icon-white,
.icon-white svg {
fill: var(--hl-color-fg-dark-default) !important;
stroke: transparent !important; }
svg.icon-gray,
.icon-gray svg {
fill: #999999 !important;
stroke: transparent !important; }
svg.icon-gray-dark,
.icon-gray-dark svg {
fill: #333333 !important;
stroke: transparent !important; }
svg.icon-red,
.icon-red svg {
fill: var(--hl-color-functional-danger) !important;
stroke: transparent !important; }
svg.icon-primary,
.icon-primary svg {
fill: var(--hl-color-fg-light-primary) !important;
stroke: transparent !important; }
svg.icon-secondary,
.icon-secondary svg {
fill: var(--hl-color-secondary) !important;
stroke: transparent !important; }
svg.icon-success,
.icon-success svg {
fill: var(--hl-color-functional-success) !important;
stroke: transparent !important; }
svg.icon-info,
.icon-info svg {
fill: var(--hl-color-functional-info) !important;
stroke: transparent !important; }
svg.icon-warning,
.icon-warning svg {
fill: var(--hl-color-functional-warning) !important;
stroke: transparent !important; }
svg.icon-danger,
.icon-danger svg {
fill: var(--hl-color-functional-danger) !important;
stroke: transparent !important; }
svg.icon-black,
.icon-black svg {
fill: var(--hl-color-fg-light-default) !important;
stroke: transparent !important; }
svg.icon-obs,
.icon-obs svg {
fill: #595959 !important;
stroke: transparent !important; }
svg.icon-default,
.icon-default svg {
fill: var(--hl-color-fg-light-default) !important;
stroke: transparent !important; }
svg.icon-muted,
.icon-muted svg {
fill: var(--hl-color-fg-light-muted) !important;
stroke: transparent !important; }
svg.icon-very-muted,
.icon-very-muted svg {
fill: var(--hl-color-fg-light-very-muted) !important;
stroke: transparent !important; }
svg.icon-ultra-muted,
.icon-ultra-muted svg {
fill: var(--hl-color-fg-light-ultra-muted) !important;
stroke: transparent !important; }
svg.icon-dark-default,
.icon-dark-default svg {
fill: var(--hl-color-fg-dark-default) !important;
stroke: transparent !important; }
svg.icon-dark-primary,
.icon-dark-primary svg {
fill: var(--hl-color-fg-dark-primary) !important;
stroke: transparent !important; }
svg.icon-dark-muted,
.icon-dark-muted svg {
fill: var(--hl-color-fg-dark-muted) !important;
stroke: transparent !important; }
svg.icon-dark-very-muted,
.icon-dark-very-muted svg {
fill: var(--hl-color-fg-dark-very-muted) !important;
stroke: transparent !important; }
svg.icon-dark-ultra-muted,
.icon-dark-ultra-muted svg {
fill: var(--hl-color-fg-dark-ultra-muted) !important;
stroke: transparent !important; }
svg.icon-fg,
.icon-fg svg {
fill: var(--hl-color-fg-light-default) !important;
stroke: transparent !important; }
svg.icon-important,
.icon-important svg {
fill: var(--hl-color-fg-light-important) !important;
stroke: transparent !important; }
svg.icon-disabled,
.icon-disabled svg {
fill: var(--hl-color-fg-light-disabled) !important;
stroke: transparent !important; }
svg.icon-interaction,
.icon-interaction svg {
fill: var(--hl-color-fg-light-interaction-standby) !important;
stroke: transparent !important; }
svg.icon-interaction-hover,
.icon-interaction-hover svg {
fill: var(--hl-color-fg-light-interaction-hover) !important;
stroke: transparent !important; }
svg.icon-interaction-active,
.icon-interaction-active svg {
fill: var(--hl-color-fg-light-interaction-pressed) !important;
stroke: transparent !important; }
svg.icon-dark-fg,
.icon-dark-fg svg {
fill: var(--hl-color-fg-dark-default) !important;
stroke: transparent !important; }
svg.icon-dark-important,
.icon-dark-important svg {
fill: var(--hl-color-fg-dark-important) !important;
stroke: transparent !important; }
svg.icon-dark-disabled,
.icon-dark-disabled svg {
fill: var(--hl-color-fg-dark-disabled) !important;
stroke: transparent !important; }
svg.icon-light-disabled,
.icon-light-disabled svg {
fill: var(--hl-color-fg-light-disabled) !important;
stroke: transparent !important; }
svg.icon-dark-interaction,
.icon-dark-interaction svg {
fill: var(--hl-color-fg-dark-interaction-standby) !important;
stroke: transparent !important; }
svg.icon-dark-interaction-hover,
.icon-dark-interaction-hover svg {
fill: var(--hl-color-fg-dark-interaction-hover) !important;
stroke: transparent !important; }
svg.icon-dark-interaction-active,
.icon-dark-interaction-active svg {
fill: var(--hl-color-fg-dark-interaction-pressed) !important;
stroke: transparent !important; }
.icon-color-auto {
fill: currentcolor !important; }
.icon-2xs {
width: var(--hl-spacer-sm) !important;
height: var(--hl-spacer-sm) !important; }
.icon-xs {
width: var(--hl-spacer-md) !important;
height: var(--hl-spacer-md) !important; }
.icon-sm {
width: var(--hl-spacer-lg) !important;
height: var(--hl-spacer-lg) !important; }
.icon-md {
width: var(--hl-spacer-xl) !important;
height: var(--hl-spacer-xl) !important; }
.icon-lg {
width: var(--hl-spacer-2xl) !important;
height: var(--hl-spacer-2xl) !important; }
.icon-xl {
width: var(--hl-spacer-3xl) !important;
height: var(--hl-spacer-3xl) !important; }
.visible {
visibility: visible !important; }
.invisible {
visibility: hidden !important; }
.scroll-margin-top-center {
scroll-snap-margin-top: 50vh;
scroll-margin-top: 50vh; }
@media (prefers-reduced-motion: no-preference) {
.scroll-margin-top-center:target {
opacity: 0;
animation: fade-in-bottom 0.6s ease 1s both; } }
.gap-0, .charger-btn {
gap: 0 !important; }
@media (min-width: 576px) {
.gap-sm-0 {
gap: 0 !important; } }
@media (min-width: 768px) {
.gap-md-0 {
gap: 0 !important; } }
@media (min-width: 992px) {
.gap-lg-0 {
gap: 0 !important; } }
@media (min-width: 1200px) {
.gap-xl-0 {
gap: 0 !important; } }
.gap-1 {
gap: var(--hl-spacer-2xs) !important; }
@media (min-width: 576px) {
.gap-sm-1 {
gap: var(--hl-spacer-2xs) !important; } }
@media (min-width: 768px) {
.gap-md-1 {
gap: var(--hl-spacer-2xs) !important; } }
@media (min-width: 992px) {
.gap-lg-1 {
gap: var(--hl-spacer-2xs) !important; } }
@media (min-width: 1200px) {
.gap-xl-1 {
gap: var(--hl-spacer-2xs) !important; } }
.gap-2 {
gap: var(--hl-spacer-xs) !important; }
@media (min-width: 576px) {
.gap-sm-2 {
gap: var(--hl-spacer-xs) !important; } }
@media (min-width: 768px) {
.gap-md-2 {
gap: var(--hl-spacer-xs) !important; } }
@media (min-width: 992px) {
.gap-lg-2 {
gap: var(--hl-spacer-xs) !important; } }
@media (min-width: 1200px) {
.gap-xl-2 {
gap: var(--hl-spacer-xs) !important; } }
.gap-3 {
gap: var(--hl-spacer-sm) !important; }
@media (min-width: 576px) {
.gap-sm-3 {
gap: var(--hl-spacer-sm) !important; } }
@media (min-width: 768px) {
.gap-md-3 {
gap: var(--hl-spacer-sm) !important; } }
@media (min-width: 992px) {
.gap-lg-3 {
gap: var(--hl-spacer-sm) !important; } }
@media (min-width: 1200px) {
.gap-xl-3 {
gap: var(--hl-spacer-sm) !important; } }
.gap-4 {
gap: var(--hl-spacer-md) !important; }
@media (min-width: 576px) {
.gap-sm-4 {
gap: var(--hl-spacer-md) !important; } }
@media (min-width: 768px) {
.gap-md-4 {
gap: var(--hl-spacer-md) !important; } }
@media (min-width: 992px) {
.gap-lg-4 {
gap: var(--hl-spacer-md) !important; } }
@media (min-width: 1200px) {
.gap-xl-4 {
gap: var(--hl-spacer-md) !important; } }
.gap-5 {
gap: var(--hl-spacer-lg) !important; }
@media (min-width: 576px) {
.gap-sm-5 {
gap: var(--hl-spacer-lg) !important; } }
@media (min-width: 768px) {
.gap-md-5 {
gap: var(--hl-spacer-lg) !important; } }
@media (min-width: 992px) {
.gap-lg-5 {
gap: var(--hl-spacer-lg) !important; } }
@media (min-width: 1200px) {
.gap-xl-5 {
gap: var(--hl-spacer-lg) !important; } }
.z-0 {
z-index: 0 !important; }
.z-1 {
z-index: 1 !important; }
.z-2 {
z-index: 2 !important; }
.z-3 {
z-index: 3 !important; }
.z-4 {
z-index: 4 !important; }
.z-5 {
z-index: 5 !important; }
@media print {
*,
*::before,
*::after {
text-shadow: none !important;
box-shadow: none !important; }
a:not(.btn):not(.subnav__nav__item):not(.charger-btn) {
text-decoration: underline; }
abbr[title]::after {
content: " (" attr(title) ")"; }
pre {
white-space: pre-wrap !important; }
pre,
blockquote {
border: var(--hl-border-width-default) solid #CCCCCC;
page-break-inside: avoid; }
tr,
img {
page-break-inside: avoid; }
p,
h2,
h3 {
orphans: 3;
widows: 3; }
h2,
h3 {
page-break-after: avoid; }
@page {
size: a3; }
body {
min-width: 992px !important; }
.container {
min-width: 992px !important; }
.navbar {
display: none; }
.badge {
border: var(--hl-border-width-default) solid var(--hl-color-core-black); }
.table {
border-collapse: collapse !important; }
.table td,
.table th {
background-color: var(--hl-color-core-white) !important; }
.table-bordered th,
.table-bordered td {
border: 1px solid #EDEDED !important; }
.table-dark {
color: inherit; }
.table-dark th,
.table-dark td,
.table-dark thead th,
.table-dark tbody + tbody {
border-color: var(--hl-color-bg-light-muted); }
.table .thead-dark th {
color: inherit;
border-color: var(--hl-color-bg-light-muted); } }
@font-face {
font-family: "Helvetica-Neue-Family";
font-style: normal;
font-weight: 200;
src: url("../fonts/helvetica-neue/HelvNeue35.eot?") format("eot"), url("../fonts/helvetica-neue/HelvNeue35.woff") format("woff"), url("../fonts/helvetica-neue/HelvNeue35.woff2") format("woff2"), url("../fonts/helvetica-neue/HelvNeue35.ttf") format("truetype"), url("../fonts/helvetica-neue/HelvNeue35.svg#Helvetica-Neue-Family") format("svg");
font-display: swap; }
@font-face {
font-family: "Helvetica-Neue-Family";
font-style: normal;
font-weight: 300;
src: url("../fonts/helvetica-neue/HelvNeue45.eot?") format("eot"), url("../fonts/helvetica-neue/HelvNeue45.woff") format("woff"), url("../fonts/helvetica-neue/HelvNeue45.woff2") format("woff2"), url("../fonts/helvetica-neue/HelvNeue45.ttf") format("truetype"), url("../fonts/helvetica-neue/HelvNeue45.svg#Helvetica-Neue-Family") format("svg");
font-display: swap; }
@font-face {
font-family: "Helvetica-Neue-Family";
font-style: normal;
font-weight: 400;
src: url("../fonts/helvetica-neue/HelvNeue55.eot?") format("eot"), url("../fonts/helvetica-neue/HelvNeue55.woff") format("woff"), url("../fonts/helvetica-neue/HelvNeue55.woff2") format("woff2"), url("../fonts/helvetica-neue/HelvNeue55.ttf") format("truetype"), url("../fonts/helvetica-neue/HelvNeue55.svg#Helvetica-Neue-Family") format("svg");
font-display: swap; }
@font-face {
font-family: "Helvetica-Neue-Family";
font-style: normal;
font-weight: 500;
src: url("../fonts/helvetica-neue/HelvNeue55.eot?") format("eot"), url("../fonts/helvetica-neue/HelvNeue55.woff") format("woff"), url("../fonts/helvetica-neue/HelvNeue55.woff2") format("woff2"), url("../fonts/helvetica-neue/HelvNeue55.ttf") format("truetype"), url("../fonts/helvetica-neue/HelvNeue55.svg#Helvetica-Neue-Family") format("svg");
font-display: swap; }
@font-face {
font-family: "Helvetica-Neue-Family";
font-style: normal;
font-weight: 600;
src: url("../fonts/helvetica-neue/HelvNeue65.eot?") format("eot"), url("../fonts/helvetica-neue/HelvNeue65.woff") format("woff"), url("../fonts/helvetica-neue/HelvNeue65.woff2") format("woff2"), url("../fonts/helvetica-neue/HelvNeue65.ttf") format("truetype"), url("../fonts/helvetica-neue/HelvNeue65.svg#Helvetica-Neue-Family") format("svg");
font-display: swap; }
@font-face {
font-family: "Helvetica-Neue-Family";
font-style: normal;
font-weight: 700;
src: url("../fonts/helvetica-neue/HelvNeue75.eot?") format("eot"), url("../fonts/helvetica-neue/HelvNeue75.woff") format("woff"), url("../fonts/helvetica-neue/HelvNeue75.woff2") format("woff2"), url("../fonts/helvetica-neue/HelvNeue75.ttf") format("truetype"), url("../fonts/helvetica-neue/HelvNeue75.svg#Helvetica-Neue-Family") format("svg");
font-display: swap; }
hl-modal:not(:defined), hl-modal:not(.hydrated) {
display: none; }
@media (min-width: 992px) {
.configurator {
max-width: 570px; } }
@media (min-width: 1200px) {
.configurator {
max-width: 700px; } }
@media (forced-colors: active) {
.configurator .btn-group, .configurator .btn-group-vertical {
border: var(--hl-border-width-default) solid ButtonText; }
.configurator .btn-group label.active, .configurator .btn-group-vertical label.active {
background-color: Highlight;
outline-color: Highlight !important; } }
.configurator-tariff {
overflow-x: hidden; }
.configurator-tariff__option {
background-color: var(--hl-color-bg-light-default);
padding: var(--hl-spacer-md) var(--hl-spacer-lg);
box-shadow: 0 var(--hl-border-width-default) 0 0 var(--hl-color-border-light-default);
margin-bottom: var(--hl-border-width-default); }
.configurator-tariff__option:not(:last-child) {
margin-bottom: calc(var(--hl-spacer-xs) + var(--hl-border-width-default) * 2); }
.configurator-tariff__option > *:not(:last-child) {
margin-bottom: var(--hl-spacer-xs); }
.configurator-tariff .swiper-slide {
--slide-width: 180px; }
.configurator-tariff .swiper {
overflow: initial; }
@media (max-width: 767.98px) {
.configurator-tariff {
margin-left: calc(var(--hl-grid-spacer) * var(--hl-factor-grid-gutter-width) * -1);
margin-right: calc(var(--hl-grid-spacer) * var(--hl-factor-grid-gutter-width) * -1); } }
hl-icon {
display: inline-flex;
vertical-align: inherit; }
hl-icon:not(.hydrated) {
min-width: 16px;
min-height: 16px; }
.hl-icon {
--hl-icon-color: currentColor;
--hl-icon-size: var(--hl-size-icon-md);
display: inline-flex;
height: var(--hl-icon-size);
vertical-align: inherit;
width: var(--hl-icon-size); }
.hl-icon--color-primary {
--hl-icon-color: var(--hl-color-fg-light-primary); }
.hl-icon--color-secondary {
--hl-icon-color: var(--hl-color-secondary); }
.hl-icon--color-success {
--hl-icon-color: var(--hl-color-functional-success); }
.hl-icon--color-info {
--hl-icon-color: var(--hl-color-functional-info); }
.hl-icon--color-warning {
--hl-icon-color: var(--hl-color-functional-warning); }
.hl-icon--color-danger {
--hl-icon-color: var(--hl-color-functional-danger); }
.hl-icon--color-black {
--hl-icon-color: var(--hl-color-fg-light-default); }
.hl-icon--color-white {
--hl-icon-color: var(--hl-color-fg-dark-default); }
.hl-icon--color-obs {
--hl-icon-color: #595959; }
.hl-icon--color-default {
--hl-icon-color: var(--hl-color-fg-light-default); }
.hl-icon--color-fg {
--hl-icon-color: var(--hl-color-fg-light-default); }
.hl-icon--color-important {
--hl-icon-color: var(--hl-color-fg-light-important); }
.hl-icon--color-disabled {
--hl-icon-color: var(--hl-color-fg-light-disabled); }
.hl-icon--color-muted {
--hl-icon-color: var(--hl-color-fg-light-muted); }
.hl-icon--color-very-muted {
--hl-icon-color: var(--hl-color-fg-light-very-muted); }
.hl-icon--color-ultra-muted {
--hl-icon-color: var(--hl-color-fg-light-ultra-muted); }
.hl-icon--color-interaction {
--hl-icon-color: var(--hl-color-fg-light-interaction-standby); }
.hl-icon--color-interaction-hover {
--hl-icon-color: var(--hl-color-fg-light-interaction-hover); }
.hl-icon--color-interaction-active {
--hl-icon-color: var(--hl-color-fg-light-interaction-pressed); }
.hl-icon--color-dark-default {
--hl-icon-color: var(--hl-color-fg-dark-default); }
.hl-icon--color-dark-fg {
--hl-icon-color: var(--hl-color-fg-dark-default); }
.hl-icon--color-dark-important {
--hl-icon-color: var(--hl-color-fg-dark-important); }
.hl-icon--color-dark-primary {
--hl-icon-color: var(--hl-color-fg-dark-primary); }
.hl-icon--color-dark-disabled {
--hl-icon-color: var(--hl-color-fg-dark-disabled); }
.hl-icon--color-light-disabled {
--hl-icon-color: var(--hl-color-fg-light-disabled); }
.hl-icon--color-dark-muted {
--hl-icon-color: var(--hl-color-fg-dark-muted); }
.hl-icon--color-dark-very-muted {
--hl-icon-color: var(--hl-color-fg-dark-very-muted); }
.hl-icon--color-dark-ultra-muted {
--hl-icon-color: var(--hl-color-fg-dark-ultra-muted); }
.hl-icon--color-dark-interaction {
--hl-icon-color: var(--hl-color-fg-dark-interaction-standby); }
.hl-icon--color-dark-interaction-hover {
--hl-icon-color: var(--hl-color-fg-dark-interaction-hover); }
.hl-icon--color-dark-interaction-active {
--hl-icon-color: var(--hl-color-fg-dark-interaction-pressed); }
.hl-btn .hl-icon, .btn .hl-icon, .subnav__nav__item .hl-icon, .charger-btn .hl-icon {
display: block; }
.hl-icon svg {
display: flex;
height: auto;
max-height: 100%;
max-width: 100%;
outline: none;
width: 100%; }
.hl-icon:not(.hl-icon--keep-color) svg path {
fill: var(--hl-icon-color); }
.hl-icon--size-xs {
--hl-icon-size: var(--hl-size-icon-xs); }
.hl-icon--size-sm {
--hl-icon-size: var(--hl-size-icon-sm); }
.hl-icon--size-md {
--hl-icon-size: var(--hl-size-icon-md); }
.hl-icon--size-lg {
--hl-icon-size: var(--hl-size-icon-lg); }
.hl-icon--size-xl {
--hl-icon-size: var(--hl-size-icon-xl); }
.hl-icon--size-2xl {
--hl-icon-size: var(--hl-size-icon-2xl); }
@media (forced-colors: active) {
.hl-icon .hl-icon--color-primary {
--hl-icon-color: CanvasText; }
.hl-icon .hl-icon--color-very-muted {
--hl-icon-color: GrayText;
opacity: 0.5; } }
@media (max-width: 1399.98px) {
.hl-icon--xs-on-xl {
--hl-icon-size: var(--hl-size-icon-xs); }
.hl-icon--sm-on-xl {
--hl-icon-size: var(--hl-size-icon-sm); }
.hl-icon--md-on-xl {
--hl-icon-size: var(--hl-size-icon-md); }
.hl-icon--lg-on-xl {
--hl-icon-size: var(--hl-size-icon-lg); }
.hl-icon--xl-on-xl {
--hl-icon-size: var(--hl-size-icon-xl); }
.hl-icon--2xl-on-xl {
--hl-icon-size: var(--hl-size-icon-2xl); } }
@media (max-width: 1199.98px) {
.hl-icon--xs-on-lg {
--hl-icon-size: var(--hl-size-icon-xs); }
.hl-icon--sm-on-lg {
--hl-icon-size: var(--hl-size-icon-sm); }
.hl-icon--md-on-lg {
--hl-icon-size: var(--hl-size-icon-md); }
.hl-icon--lg-on-lg {
--hl-icon-size: var(--hl-size-icon-lg); }
.hl-icon--xl-on-lg {
--hl-icon-size: var(--hl-size-icon-xl); }
.hl-icon--2xl-on-lg {
--hl-icon-size: var(--hl-size-icon-2xl); } }
@media (max-width: 991.98px) {
.hl-icon--xs-on-md {
--hl-icon-size: var(--hl-size-icon-xs); }
.hl-icon--sm-on-md {
--hl-icon-size: var(--hl-size-icon-sm); }
.hl-icon--md-on-md {
--hl-icon-size: var(--hl-size-icon-md); }
.hl-icon--lg-on-md {
--hl-icon-size: var(--hl-size-icon-lg); }
.hl-icon--xl-on-md {
--hl-icon-size: var(--hl-size-icon-xl); }
.hl-icon--2xl-on-md {
--hl-icon-size: var(--hl-size-icon-2xl); } }
@media (max-width: 767.98px) {
.hl-icon--xs-on-sm {
--hl-icon-size: var(--hl-size-icon-xs); }
.hl-icon--sm-on-sm {
--hl-icon-size: var(--hl-size-icon-sm); }
.hl-icon--md-on-sm {
--hl-icon-size: var(--hl-size-icon-md); }
.hl-icon--lg-on-sm {
--hl-icon-size: var(--hl-size-icon-lg); }
.hl-icon--xl-on-sm {
--hl-icon-size: var(--hl-size-icon-xl); }
.hl-icon--2xl-on-sm {
--hl-icon-size: var(--hl-size-icon-2xl); } }
@media (max-width: 575.98px) {
.hl-icon--xs-on-xs {
--hl-icon-size: var(--hl-size-icon-xs); }
.hl-icon--sm-on-xs {
--hl-icon-size: var(--hl-size-icon-sm); }
.hl-icon--md-on-xs {
--hl-icon-size: var(--hl-size-icon-md); }
.hl-icon--lg-on-xs {
--hl-icon-size: var(--hl-size-icon-lg); }
.hl-icon--xl-on-xs {
--hl-icon-size: var(--hl-size-icon-xl); }
.hl-icon--2xl-on-xs {
--hl-icon-size: var(--hl-size-icon-2xl); } }
.link-icon {
--link-with-icon-color-disabled: var(--hl-color-fg-light-disabled);
--link-with-icon-color: var(--hl-color-fg-light-important);
--link-with-icon-icon-color: var(--link-with-icon-color);
--link-with-icon-icon-size: var(--hl-size-icon-md);
--link-with-icon-icon-margin: calc((var(--link-with-icon-icon-size) - 1em) * -.5);
--link-with-icon-gap: var(--hl-spacer-xs);
--link-with-icon-surface-bg-standby: var(--hl-color-button-bg-light-link-standby);
--link-with-icon-surface-bg-hover: var(--hl-color-button-bg-light-link-hover);
--link-with-icon-surface-bg-focus: var(--hl-color-button-bg-light-link-focus);
--link-with-icon-surface-bg-pressed: var(--hl-color-button-bg-light-link-pressed);
--link-with-icon-surface-bg-active: var(--hl-color-button-bg-light-link-active);
--link-with-icon-surface-text-hover: var(--hl-color-button-fg-light-link-hover);
--link-with-icon-surface-text-focus: var(--hl-color-button-fg-light-link-focus);
--link-with-icon-surface-text-pressed: var(--hl-color-button-fg-light-link-pressed);
--link-with-icon-surface-visible-text-pressed: var(--hl-color-button-fg-light-link-pressed);
--link-with-icon-surface-text-active: var(--hl-color-button-fg-light-link-active);
--link-with-icon-border-size: var(--hl-border-width-sm);
--link-with-icon-border-color: var(--hl-color-fg-light-very-muted);
align-items: center;
background: none;
border: 0;
color: var(--link-with-icon-color);
display: flex;
font-family: var(--hl-typography-font-family-body);
font-weight: var(--hl-typography-font-weight-body-bold);
gap: var(--link-with-icon-gap);
justify-content: center;
padding: 0;
text-decoration: none;
vertical-align: middle;
width: -moz-fit-content;
width: fit-content;
text-align: left; }
.link-icon--variant-primary {
--link-with-icon-color: var(--hl-color-primary); }
.link-icon--variant-icon-primary {
--link-with-icon-icon-color: var(--hl-color-primary); }
.link-icon:not(.disabled):focus-visible, .link-icon:not(.disabled):has(input):focus-within {
animation: focus-outline-animation var(--hl-transition-normal) forwards; }
.link-icon.disabled:focus-visible, .link-icon.disabled:focus-within {
outline: 0 !important; }
.link-icon .hl-icon,
.link-icon svg {
color: var(--link-with-icon-icon-color);
height: var(--link-with-icon-icon-size);
width: var(--link-with-icon-icon-size); }
.link-icon > .link-icon-wrap {
padding-top: 2px;
padding-bottom: 2px; }
.link-icon--xs {
--link-with-icon-icon-size: var(--hl-size-icon-sm);
font-size: var(--hl-font-size-xs);
line-height: var(--hl-typography-line-height-decreased);
font-weight: var(--hl-typography-font-weight-body-bold);
letter-spacing: var(--hl-typography-letter-spacing-default); }
.link-icon--sm {
--link-with-icon-icon-size: var(--hl-size-icon-sm);
font-size: var(--hl-font-size-sm);
line-height: var(--hl-typography-line-height-decreased);
font-weight: var(--hl-typography-font-weight-body-bold);
letter-spacing: var(--hl-typography-letter-spacing-default); }
.link-icon--md {
font-size: var(--hl-font-size-md);
line-height: var(--hl-typography-line-height-decreased);
font-weight: var(--hl-typography-font-weight-body-bold);
letter-spacing: var(--hl-typography-letter-spacing-default); }
.link-icon--lg {
font-size: var(--hl-font-size-2xl);
line-height: var(--hl-typography-line-height-decreased);
font-weight: var(--hl-typography-font-weight-body-bold);
letter-spacing: var(--hl-typography-letter-spacing-default);
--link-with-icon-gap: var(--hl-spacer-xs); }
.link-icon--full-width {
width: 100%;
justify-content: space-between; }
.link-icon--full-width hl-icon:nth-child(3) {
margin-left: auto; }
.link-icon--surface {
padding: var(--hl-spacer-sm); }
.link-icon--surface:hover {
color: var(--link-with-icon-surface-text-hover); }
.link-icon--surface:focus {
color: var(--link-with-icon-surface-text-hover); }
.link-icon--surface:active {
color: var(--link-with-icon-surface-text-pressed); }
.link-icon--surface.active {
color: var(--link-with-icon-surface-text-active); }
.link-icon--surface.active.link-icon .hl-icon, .link-icon--surface.active.link-icon svg {
color: currentColor; }
.link-icon--surface .hl-icon {
margin: var(--link-with-icon-icon-margin); }
.link-icon--surface--visible {
--link-with-icon-surface-bg-standby: var(--hl-color-button-bg-light-link-surface-standby);
--link-with-icon-surface-bg-hover: var(--hl-color-button-bg-light-link-surface-hover);
--link-with-icon-surface-bg-focus: var(--hl-color-button-bg-light-link-surface-focus);
--link-with-icon-surface-bg-pressed: var(--hl-color-button-bg-light-link-surface-pressed);
--link-with-icon-surface-bg-active: var(--hl-color-button-bg-light-link-surface-active);
--link-with-icon-surface-text-hover: var(--hl-color-button-fg-light-link-surface-hover);
--link-with-icon-surface-text-focus: var(--hl-color-button-fg-light-link-surface-focus);
--link-with-icon-surface-text-pressed: var(--hl-color-button-fg-light-link-surface-pressed);
--link-with-icon-surface-visible-text-pressed: var(--hl-color-button-fg-light-link-surface-pressed);
--link-with-icon-surface-text-active: var(--hl-color-button-fg-light-link-surface-active);
background-color: var(--link-with-icon-surface-bg-standby); }
.link-icon--surface--visible:hover {
background-color: var(--link-with-icon-surface-bg-hover); }
.link-icon--surface--visible:focus {
background-color: var(--link-with-icon-surface-bg-focus); }
.link-icon--surface--visible:active {
background-color: var(--link-with-icon-surface-bg-pressed);
color: var(--link-with-icon-surface-visible-text-pressed); }
.link-icon--surface--visible.active {
background-color: var(--link-with-icon-surface-bg-active); }
.link-icon--border-bottom .link-icon {
border-bottom: var(--link-with-icon-border-size) solid var(--link-with-icon-border-color); }
.link-icon:hover, .link-icon:focus, .link-icon:active {
text-decoration: none; }
.link-icon:hover .hl-icon,
.link-icon:hover svg, .link-icon:focus .hl-icon,
.link-icon:focus svg, .link-icon:active .hl-icon,
.link-icon:active svg {
--link-with-icon-icon-color: currentColor; }
.link-icon:not(.link-icon--disabled):hover, .link-icon:not(.link-icon--disabled):focus {
--link-with-icon-color: var(--hl-color-fg-light-interaction-hover); }
.link-icon:not(.link-icon--disabled):active {
--link-with-icon-color: var(--hl-color-fg-light-interaction-pressed); }
.link-icon.link-icon--disabled, .link-icon[aria-disabled] {
--link-with-icon-icon-color: var(--hl-color-fg-light-disabled);
color: var(--link-with-icon-color-disabled);
cursor: default;
pointer-events: none; }
.btn-ripple {
position: relative;
overflow: hidden;
--ripple-background: #fff;
--ripple-distance: 60;
--ripple-duration: 1s;
--ripple-scale: 5;
--ripple-opacity: 0; }
.btn-ripple::before {
content: "";
position: absolute;
display: block;
background: var(--ripple-background);
border-radius: 50%;
pointer-events: none;
top: 50%;
left: 50%;
width: calc(var(--ripple-distance) * 1px);
height: calc(var(--ripple-distance) * 1px);
opacity: var(--ripple-opacity);
transform: translate(-50%, -50%) scale(var(--ripple-scale));
transform-origin: center;
transition: opacity var(--ripple-duration), transform var(--ripple-duration); }
.btn-ripple:active::before {
--ripple-scale: 0;
--ripple-opacity: .9;
opacity: var(--ripple-opacity);
transform: translate(-50%, -50%) scale(var(--ripple-scale));
transition: opacity 0s, transform 0s; }
.hl-slider {
--hl-slider-bgcolor: var(--hl-color-bg-light-alpha);
--hl-slider-bgcolor-selected: var(--hl-color-form-interaction-bg-light-active);
--hl-slider-handler-border-color: var(--hl-color-border-light-interaction-standby);
--hl-slider-track-progress: 0%;
--hl-slider-track-progress-dual: 50%;
--hl-slider-track-steps-num: 1;
--hl-slider-height: var(--hl-spacer-sm);
--hl-slider-thumb-size: var(--hl-spacer-lg); }
.hl-slider output {
display: block; }
.hl-slider input[type=range] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: linear-gradient(to right, var(--hl-slider-bgcolor-selected) var(--hl-slider-track-progress), var(--hl-slider-bgcolor) var(--hl-slider-track-progress));
border-radius: var(--hl-border-radius-full);
color: currentColor;
cursor: pointer;
font: inherit;
height: var(--hl-slider-height);
margin: 0;
position: relative;
width: 100%; }
.hl-slider input[type=range]:focus {
outline: 0; }
.hl-slider input[type=range]::-moz-focus-outer {
border: 0; }
.hl-slider input[type=range]::-webkit-slider-runnable-track {
border-color: transparent;
border-radius: var(--hl-border-radius-full);
color: transparent;
cursor: pointer;
height: var(--hl-slider-height);
width: 100%; }
.hl-slider input[type=range]::-moz-range-track {
border-color: transparent;
border-radius: var(--hl-border-radius-full);
color: transparent;
cursor: pointer;
height: var(--hl-slider-height);
width: 100%; }
.hl-slider input[type=range]::-ms-track {
border-color: transparent;
border-radius: var(--hl-border-radius-full);
color: transparent;
cursor: pointer;
height: var(--hl-slider-height);
width: 100%; }
.hl-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border-radius: var(--hl-border-radius-full);
border: var(--hl-border-width-default) solid var(--hl-slider-handler-border-color);
box-shadow: inset 0 0 0 var(--hl-slider-thumb-size) var(--hl-color-bg-light-default);
content: "";
height: var(--hl-slider-thumb-size);
transform: translateY(calc(-0.5 * var(--hl-slider-height)));
-webkit-transition: all var(--hl-transition-quickly);
transition: all var(--hl-transition-quickly);
width: var(--hl-slider-thumb-size);
pointer-events: all; }
.hl-slider input[type=range]:not([aria-disabled])::-webkit-slider-thumb:hover {
border-color: var(--hl-color-border-light-interaction-hover); }
.hl-slider input[type=range]:not([aria-disabled]):focus::-webkit-slider-thumb {
border-color: var(--hl-color-border-light-interaction-hover); }
.hl-slider input[type=range]:not([aria-disabled]):active::-webkit-slider-thumb {
border-color: var(--hl-color-border-light-interaction-pressed); }
.hl-slider input[type=range]::-moz-range-thumb {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: var(--hl-border-radius-full);
border: var(--hl-border-width-default) solid var(--hl-slider-handler-border-color);
box-shadow: inset 0 0 0 var(--hl-slider-thumb-size) var(--hl-color-bg-light-default);
content: "";
height: var(--hl-slider-thumb-size);
-moz-transition: all var(--hl-transition-quickly);
transition: all var(--hl-transition-quickly);
width: var(--hl-slider-thumb-size);
pointer-events: all; }
.hl-slider input[type=range]:not([aria-disabled])::-moz-range-thumb:hover {
border-color: var(--hl-color-border-light-interaction-hover); }
.hl-slider input[type=range]:not([aria-disabled]):focus::-moz-range-thumb {
border-color: var(--hl-color-border-light-interaction-hover); }
.hl-slider input[type=range]:not([aria-disabled]):active::-moz-range-thumb {
border-color: var(--hl-color-border-light-interaction-pressed); }
.hl-slider input[type=range]::-ms-thumb {
-webkit-appearance: none;
appearance: none;
border-radius: var(--hl-border-radius-full);
border: var(--hl-border-width-default) solid var(--hl-slider-handler-border-color);
box-shadow: inset 0 0 0 var(--hl-slider-thumb-size) var(--hl-color-bg-light-default);
content: "";
height: var(--hl-slider-thumb-size);
-ms-transition: all var(--hl-transition-quickly);
transition: all var(--hl-transition-quickly);
width: var(--hl-slider-thumb-size);
pointer-events: all; }
.hl-slider input[type=range]:not([aria-disabled])::-ms-thumb:hover {
border-color: var(--hl-color-border-light-interaction-hover); }
.hl-slider input[type=range]:not([aria-disabled]):focus::-ms-thumb {
border-color: var(--hl-color-border-light-interaction-hover); }
.hl-slider input[type=range]:not([aria-disabled]):active::-ms-thumb {
border-color: var(--hl-color-border-light-interaction-pressed); }
.hl-slider input[type=range][aria-disabled],
.hl-slider input[type=range] + *[aria-disabled] {
cursor: not-allowed;
opacity: 0.45;
pointer-events: none; }
.hl-slider input[type=range][aria-disabled]::-webkit-slider-thumb,
.hl-slider input[type=range] + *[aria-disabled]::-webkit-slider-thumb {
pointer-events: none; }
.hl-slider input[type=range][aria-disabled]::-moz-range-thumb,
.hl-slider input[type=range] + *[aria-disabled]::-moz-range-thumb {
pointer-events: none; }
.hl-slider input[type=range][aria-disabled]::-ms-thumb,
.hl-slider input[type=range] + *[aria-disabled]::-ms-thumb {
pointer-events: none; }
.hl-slider [slot=label-bottom] {
display: block;
height: 20px;
margin-left: calc(0.5 * var(--hl-slider-thumb-size));
margin-top: var(--hl-spacer-sm);
position: relative;
width: calc(100% - 1 * var(--hl-slider-thumb-size)); }
.hl-slider [slot=label-bottom]:empty {
display: none; }
.hl-slider [slot=label-bottom] > * {
text-align: center;
font-weight: bold;
position: absolute;
transform: translate(-50%) !important;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
white-space: nowrap; }
.hl-slider [slot=label-bottom] > *::before {
background-color: var(--hl-slider-bgcolor);
content: "";
display: block;
height: var(--hl-spacer-xs);
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
transform: translateY(-100%);
width: 1px; }
.hl-slider [slot=label-bottom] > *:nth-child(1) {
left: calc(100% / (var(--hl-slider-track-steps-num) - 1) * 0); }
.hl-slider [slot=label-bottom] > *:nth-child(2) {
left: calc(100% / (var(--hl-slider-track-steps-num) - 1) * 1); }
.hl-slider [slot=label-bottom] > *:nth-child(3) {
left: calc(100% / (var(--hl-slider-track-steps-num) - 1) * 2); }
.hl-slider [slot=label-bottom] > *:nth-child(4) {
left: calc(100% / (var(--hl-slider-track-steps-num) - 1) * 3); }
.hl-slider [slot=label-bottom] > *:nth-child(5) {
left: calc(100% / (var(--hl-slider-track-steps-num) - 1) * 4); }
.hl-slider [slot=label-bottom] > *:nth-child(6) {
left: calc(100% / (var(--hl-slider-track-steps-num) - 1) * 5); }
.hl-slider [slot=label-bottom] > *:nth-child(7) {
left: calc(100% / (var(--hl-slider-track-steps-num) - 1) * 6); }
.hl-slider [slot=label-bottom] > *:nth-child(8) {
left: calc(100% / (var(--hl-slider-track-steps-num) - 1) * 7); }
.hl-slider [slot=label-bottom] > *:nth-child(9) {
left: calc(100% / (var(--hl-slider-track-steps-num) - 1) * 8); }
.hl-slider [slot=label-bottom] > *:nth-child(10) {
left: calc(100% / (var(--hl-slider-track-steps-num) - 1) * 9); }
.hl-slider [slot=label-bottom] > *:first-child {
text-align: left;
transform: translateX(0%) !important; }
.hl-slider [slot=label-bottom] > *:first-child::before {
right: auto;
margin: initial; }
.hl-slider [slot=label-bottom] > *:last-child {
text-align: right;
transform: translateX(-100%) !important; }
.hl-slider [slot=label-bottom] > *:last-child::before {
left: auto;
margin: initial; }
@media (max-width: 767.98px) {
.hl-slider [slot=label-bottom] > *:not(:first-child):not(:last-child) {
color: transparent; } }
.hl-slider__controls {
margin-top: var(--hl-spacer-xs);
position: relative; }
.hl-slider--is-dual input[type=range] {
pointer-events: none;
background: linear-gradient(to right, var(--hl-slider-bgcolor) 0%, var(--hl-slider-bgcolor) var(--hl-slider-track-progress), var(--hl-slider-bgcolor-selected) var(--hl-slider-track-progress), var(--hl-slider-bgcolor-selected) var(--hl-slider-track-progress-dual), var(--hl-slider-bgcolor) var(--hl-slider-track-progress-dual), var(--hl-slider-bgcolor) 100%); }
.hl-slider--is-dual input[type=range] + input[type=range] {
background: none;
z-index: 1;
position: absolute;
bottom: 0;
left: 0;
transform: translateY(calc(-0.5 * var(--hl-slider-height))); }
@media (forced-colors: active) {
.hl-slider {
--hl-slider-bgcolor: HighlightText;
--hl-slider-bgcolor-selected: Highlight;
--hl-slider-handler-border-color: ButtonText; }
.hl-slider input[type=range] {
forced-color-adjust: none; }
.hl-slider input[type=range]:disabled {
opacity: 0.5; }
.hl-slider input[type=range]::-webkit-slider-thumb {
box-shadow: inset 0 0 0 var(--hl-slider-thumb-size) Canvas; }
.hl-slider input[type=range]::-moz-range-thumb {
box-shadow: inset 0 0 0 var(--hl-slider-thumb-size) Canvas; }
.hl-slider input[type=range]:focus-visible::-webkit-slider-thumb {
outline: var(--hl-border-width-default) solid Highlight;
outline-offset: var(--hl-border-width-default); }
.hl-slider input[type=range]:focus-visible::-moz-range-thumb {
outline: var(--hl-border-width-default) solid Highlight;
outline-offset: var(--hl-border-width-default); } }
.sticker {
--sticker-color: var(--hl-color-fg-light-important);
--sticker-padding: var(--hl-spacer-xs);
--sticker-size: 100px;
--sticker-top-bottom-size: var(--hl-size-icon-sm);
align-items: center;
background-color: var(--hl-color-bg-light-primary);
border-radius: var(--hl-border-radius-full);
color: var(--sticker-color);
display: flex;
flex-direction: column;
height: var(--sticker-size);
justify-content: center;
padding: var(--sticker-padding);
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: var(--sticker-size);
font-size: var(--hl-typography-h3-font-size);
line-height: var(--hl-typography-h3-line-height);
letter-spacing: var(--hl-typography-h3-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
margin: 0; }
@media (min-width: 576px) {
.sticker {
--sticker-size: 140px; } }
@media (min-width: 768px) {
.sticker {
--sticker-padding: var(--hl-spacer-lg);
--sticker-top-bottom-size: var(--hl-size-icon-md); } }
@media (min-width: 1200px) {
.sticker {
--sticker-size: 160px; } }
.sticker .hl-icon {
--hl-icon-size: var(--hl-size-icon-xl) !important; }
.sticker [slot=top] {
font-size: var(--hl-typography-p1-font-size);
line-height: var(--hl-typography-p1-line-height);
letter-spacing: var(--hl-typography-p1-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold); }
.sticker [slot=bottom] {
font-size: var(--hl-typography-p4-font-size);
line-height: var(--hl-typography-p4-line-height);
letter-spacing: var(--hl-typography-p4-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular); }
.sticker [slot=top],
.sticker [slot=bottom] {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden; }
.sticker [slot=top]:empty,
.sticker [slot=bottom]:empty {
display: none; }
.sticker [slot=top] .hl-icon,
.sticker [slot=bottom] .hl-icon {
--hl-icon-size: var(--sticker-top-bottom-size) !important; }
@media (max-width: 767.98px) {
.sticker *:not([slot=top]):not([slot=bottom]) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%; } }
.is-dev {
overflow: auto !important; }
.is-dev #__tealiumGDPRecModal {
display: none; }
.sticky-container {
position: sticky;
top: calc(var(--header-orange-rebrand-height) - 0.2px);
width: 100%;
z-index: calc(var(--hl-z-index-dropdown) + 1);
transition: all var(--hl-transition-normal); }
@media (prefers-reduced-motion: reduce) {
.sticky-container {
transition: none; } }
.sticky-container--subnav-hidden .subnav {
transition: visibility 0s linear 0.3s;
visibility: hidden;
box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
@media (prefers-reduced-motion: preference) {
.sticky-container--subnav-hidden .subnav:target {
transition-delay: 0s; } }
.sticky-container[data-sticky-attach-to=body] {
top: 0; }
html[style*="--hlx-header-height"] .sticky-container {
top: calc(var(--hlx-header-height) - 0.2px); }
html[style*="--hlx-header-height"] .sticky-container[data-sticky-attach-to=body] {
top: 0; }
[data-observe-intersecting] {
display: none; }
[data-observe-intersecting].is-absolute {
position: absolute;
width: 100%;
left: 0;
right: 0; }
@keyframes rotation {
from {
transform: translate(50%, -50%) rotate(0deg); }
to {
transform: translate(50%, -50%) rotate(359deg); } }
.hl-switch {
--hl-switch-bgcolor: var(--hl-color-bg-light-alpha);
--hl-switch-bgcolor-selected: var(--hl-color-form-interaction-bg-light-active);
--hl-switch-handler-border-color: var(--hl-color-border-light-interaction-standby);
--hl-switch-height: var(--hl-spacer-lg);
--hl-switch-width: var(--hl-spacer-3xl);
--hl-switch-gap: var(--hl-spacer-xs);
--hl-switch-loader-size: var(--hl-spacer-sm);
align-items: center;
cursor: pointer;
display: flex;
font-size: var(--hl-typography-p2-font-size);
gap: var(--hl-switch-gap);
line-height: var(--hl-typography-line-height-increased);
position: relative; }
.hl-switch .base-tag,
.hl-switch hl-tag {
transform: translateY(2px); }
.hl-switch__text {
flex-grow: 1; }
.hl-switch[aria-disabled] {
--hl-switch-handler-border-color: transparent;
cursor: not-allowed; }
.hl-switch[aria-disabled] input[type=checkbox],
.hl-switch[aria-disabled] input[type=radio] {
cursor: not-allowed;
opacity: 0.45;
pointer-events: none; }
.hl-switch[aria-disabled] input[type=checkbox]::before,
.hl-switch[aria-disabled] input[type=radio]::before {
box-shadow: inset 0 0 0 var(--hl-switch-height) var(--hl-color-form-fg-dark-disabled); }
.hl-switch:not([aria-disabled]):hover, .hl-switch:not([aria-disabled]):focus {
--hl-switch-handler-border-color: var(--hl-color-border-light-interaction-hover); }
.hl-switch:not([aria-disabled]):active {
--hl-switch-handler-border-color: var(--hl-color-border-light-interaction-pressed); }
.hl-switch input[type=checkbox],
.hl-switch input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--hl-switch-bgcolor);
border-radius: var(--hl-border-radius-full);
color: currentColor;
cursor: pointer;
display: grid;
font: inherit;
height: var(--hl-switch-height);
position: relative;
margin: 0;
transition: all var(--hl-transition-quickly);
width: var(--hl-switch-width);
flex-shrink: 0; }
.hl-switch input[type=checkbox]::before,
.hl-switch input[type=radio]::before {
border-radius: var(--hl-border-radius-full);
border: var(--hl-border-width-default) solid var(--hl-switch-handler-border-color);
box-shadow: inset 0 0 0 var(--hl-switch-height) var(--hl-color-core-white);
content: "";
height: var(--hl-switch-height);
transform: translateX(0);
transition: all var(--hl-transition-quickly);
width: var(--hl-switch-height); }
.hl-switch input[type=checkbox]:checked,
.hl-switch input[type=radio]:checked {
--hl-switch-bgcolor: var(--hl-switch-bgcolor-selected); }
.hl-switch input[type=checkbox]:checked::before,
.hl-switch input[type=radio]:checked::before {
transform: translateX(100%); }
.hl-switch__pending-tag {
position: absolute;
right: calc(var(--hl-switch-width) + var(--hl-switch-gap));
opacity: 0;
pointer-events: none; }
.hl-switch__container {
position: relative; }
.hl-switch__loader {
animation: rotation 2s infinite linear;
height: var(--hl-switch-loader-size);
opacity: 0;
pointer-events: none;
position: absolute;
right: calc(var(--hl-switch-width) - var(--hl-switch-height) * 0.5);
top: calc(var(--hl-switch-height) * 0.5);
transition: all var(--hl-transition-quickly);
width: var(--hl-switch-loader-size);
border: var(--hl-border-width-sm) solid rgba(255, 121, 0, 0.2);
border-bottom-color: var(--hl-switch-bgcolor-selected);
border-radius: var(--hl-border-radius-full);
display: inline-block;
box-sizing: border-box; }
input[type=checkbox]:checked + .hl-switch__loader, input[type=radio]:checked + .hl-switch__loader {
transition: all var(--hl-transition-quickly);
right: calc(var(--hl-switch-height) * 0.5); }
input[type=checkbox]:first-child + .hl-switch__loader, input[type=radio]:first-child + .hl-switch__loader {
right: auto;
left: 0; }
input[type=checkbox]:first-child:checked + .hl-switch__loader, input[type=radio]:first-child:checked + .hl-switch__loader {
right: auto;
left: calc(var(--hl-switch-width) - var(--hl-switch-height) * 1); }
.hl-switch--variant-success {
--hl-switch-bgcolor-selected: var(--hl-color-functional-success); }
.hl-switch--variant-danger {
--hl-switch-bgcolor-selected: var(--hl-color-functional-danger); }
.hl-switch--has-error {
--hl-switch-handler-border-color: var(--hl-color-border-light-danger); }
.hl-switch--with-interactive-message {
position: relative; }
.hl-switch--with-interactive-message[aria-disabled] {
cursor: default;
pointer-events: auto; }
.hl-switch--with-interactive-message .base-tag,
.hl-switch--with-interactive-message hl-tag {
position: absolute;
right: calc(var(--hl-switch-width) + var(--hl-switch-gap));
opacity: 0;
pointer-events: none; }
.hl-switch--with-interactive-message.show-message .base-tag,
.hl-switch--with-interactive-message.show-message hl-tag {
opacity: 1; }
.hl-switch--is-pending .hl-switch__loader {
opacity: 1; }
.hl-switch--is-pending .hl-switch__pending-tag {
opacity: 1; }
.hl-switch--not-available input[type=checkbox]::before,
.hl-switch--not-available input[type=radio]::before {
height: var(--hl-spacer-xs);
width: 18px;
transform: translate(-50%, -50%) !important;
top: 50%;
left: 50%;
position: relative; }
.hl-switch--indeterminate input[type=checkbox]::before,
.hl-switch--indeterminate input[type=radio]::before {
transition: none; }
.hl-switch--indeterminate input[type=checkbox]:checked::before,
.hl-switch--indeterminate input[type=radio]:checked::before {
transition: none;
height: var(--hl-spacer-xs);
width: var(--hl-spacer-lg);
transform: translate(-50%, -50%) !important;
top: 50%;
left: 50%;
position: relative; }
@media (forced-colors: active) {
.hl-switch {
--hl-switch-bgcolor: HighlightText;
--hl-switch-bgcolor-selected: Highlight;
--hl-switch-handler-border-color: ButtonText; }
.hl-switch input::before {
background-color: Canvas; } }
.hl-switch-group {
margin-bottom: var(--hl-spacer-xl); }
.hl-switch-group__label {
padding: var(--hl-spacer-xs) var(--hl-spacer-2xs);
border-bottom: var(--hl-border-width-default) solid var(--hl-color-border-light-default); }
.hl-switch-group__label:first-of-type {
border-top: var(--hl-border-width-default) solid var(--hl-color-border-light-default); }
.hl-switch-group__label label {
align-items: center; }
.bordered-content {
border: var(--hl-border-width-sm) solid var(--hl-color-border-light-interaction-standby);
border-width: var(--hl-border-width-sm) var(--hl-border-width-sm) var(--hl-border-width-sm) var(--hl-border-width-lg);
padding: var(--hl-spacer-md); }
.container-stacks .stack:not(:last-of-type) {
margin-bottom: var(--hl-spacing-module); }
.container-stacks .stack > *:not(:last-child, .section-title) {
margin-bottom: var(--hl-spacing-grid); }
.container-stacks .stack-group .stack:first-of-type {
margin-top: var(--hl-spacing-grid); }
.c-section:not(:last-child) {
margin-bottom: var(--hl-spacing-section); }
.c-module:not(:last-child) {
margin-bottom: var(--hl-spacing-module); }
.c-submodule:not(:last-child) {
margin-bottom: var(--hl-spacing-submodule); }
.c-grid:not(:last-child) {
margin-bottom: var(--hl-spacing-grid); }
.c-atom:not(:last-child) {
margin-bottom: var(--hl-spacing-atom); }
.c-subatom:not(:last-child) {
margin-bottom: var(--hl-spacing-subatom); }
.c-border:not(:last-child) {
margin-bottom: var(--hl-spacing-border); }
.separator {
display: grid;
place-items: center;
grid-template-areas: "separator"; }
.separator > * {
grid-area: separator; }
.separator__line {
height: var(--hl-border-width-default);
background: var(--hl-color-border-light-default);
width: 100%; }
.separator__icon {
display: inline-flex;
justify-content: center;
padding-left: var(--hl-spacing-atom);
padding-right: var(--hl-spacing-atom);
background: var(--hl-color-bg-light-default); }
.accordion > *:not(:last-child) .collapsible {
margin-bottom: var(--hl-spacer-xs); }
.app-icon-list {
--size-app-icon: var(--hl-spacer-3xl);
padding-left: 0;
list-style-type: "";
margin-bottom: 0;
display: flex;
flex-wrap: wrap;
gap: var(--hl-size-gap); }
.app-icon-list__txt {
display: inline-flex;
align-items: center;
gap: var(--hl-spacer-2xs); }
.app-icon-list__txt > span {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
padding-top: 2px;
padding-bottom: 2px; }
.app-icon-list a {
display: flex; }
.app-icon-list img {
width: var(--size-app-icon);
height: var(--size-app-icon);
-o-object-fit: contain;
object-fit: contain;
flex: 0 0 auto; }
.app-icon-list--vertical {
flex-direction: column;
gap: calc(var(--hl-size-gap) * 2); }
.app-icon-list--vertical .app-icon-list__item,
.app-icon-list--vertical .app-icon-list__container {
display: flex;
gap: var(--hl-spacer-sm); }
.app-icon-list--vertical .app-icon-list__item > a,
.app-icon-list--vertical .app-icon-list__container > a {
display: inline-flex;
gap: var(--hl-spacer-sm); }
.banner {
--banner-bgcolor: var(--hl-color-bg-light-muted);
--banner-connector-size: calc(0.25 * var(--banner-icon-size));
--banner-icon-color: var(--banner-text-color);
--banner-icon-size: var(--hl-spacer-xl);
--banner-spacing-x: var(--hl-spacer-xs);
--banner-spacing-y: var(--hl-spacer-xs);
--banner-text-body-color: var(--hl-color-fg-light-default);
--banner-text-color: var(--hl-color-fg-light-important);
background-color: var(--banner-bgcolor);
color: var(--banner-text-color);
padding: var(--banner-spacing-y) var(--banner-spacing-x);
position: relative;
width: 100%;
border-radius: var(--hl-border-radius-default); }
@media (min-width: 768px) {
.banner {
--banner-icon-size: var(--hl-spacer-3xl); } }
@media (min-width: 768px) {
.banner {
--banner-spacing-x: var(--hl-spacer-md);
--banner-spacing-y: var(--hl-spacer-md); } }
.banner__body {
align-items: flex-start;
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: var(--banner-spacing-y);
justify-content: space-between;
width: 100%;
font-size: var(--hl-typography-p1-font-size);
line-height: var(--hl-typography-p1-line-height);
letter-spacing: var(--hl-typography-p1-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold); }
@media (min-width: 576px) {
.banner__body {
align-items: center;
flex-direction: row; } }
.banner__body [slot=image] img {
max-width: 50px; }
.banner__body [slot=button-group] {
display: flex;
flex-wrap: wrap;
gap: var(--hl-spacer-xs);
margin-top: 0; }
.banner__body [slot=body-text] {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
color: var(--banner-text-body-color);
font-weight: var(--hl-typography-font-weight-body-regular);
margin-bottom: 0; }
.banner__body__info {
flex-grow: 1; }
.banner__body__main {
align-items: center;
display: flex;
gap: var(--banner-spacing-y); }
.banner__icon {
color: var(--banner-icon-color); }
.banner__icon .hl-icon {
--hl-icon-size: var(--banner-icon-size) !important; }
.banner [slot=promo-tag] {
margin-bottom: var(--banner-spacing-y); }
.banner--variant-primary {
--banner-bgcolor: var(--hl-color-bg-light-primary);
--banner-text-body-color: var(--hl-color-button-fg-light-primary-standby);
--banner-text-color: var(--hl-color-button-fg-light-primary-standby); }
.banner--variant-warning {
--banner-bgcolor: var(--hl-color-functional-warning); }
.banner--variant-light-grey {
--banner-bgcolor: var(--hl-color-bg-light-muted); }
.banner--variant-dark-grey {
--banner-bgcolor: var(--hl-color-bg-dark-muted); }
.bg-dark .banner--variant-dark-grey.bg-dark {
--banner-bgcolor: var(--hl-color-bg-dark-very-muted); }
.banner--variant-dark {
--banner-bgcolor: var(--hl-color-bg-dark-default); }
.bg-dark .banner--variant-dark.bg-dark {
--banner-bgcolor: var(--hl-color-bg-dark-ultra-muted); }
.banner--variant-ultra-muted {
--banner-bgcolor: var(--hl-color-bg-light-ultra-muted); }
.banner--size-sm {
--banner-spacing-x: var(--hl-spacer-sm);
--banner-spacing-y: var(--hl-spacer-xs);
--banner-icon-size: var(--hl-spacer-lg); }
.banner--size-sm .banner__body [slot=body-text] {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular); }
.banner--has-connector:after {
content: "";
border-color: transparent transparent var(--banner-bgcolor) transparent;
border-style: solid;
border-width: 0 var(--banner-connector-size) var(--banner-connector-size) var(--banner-connector-size);
display: block;
left: calc(var(--banner-spacing-x) + 0.5 * var(--banner-icon-size));
margin-left: calc(-1 * var(--banner-connector-size));
position: absolute;
top: calc(-1 * var(--banner-connector-size)); }
.banner--has-icon-top-right .banner__body {
flex-direction: initial; }
.banner--connector-position-top-center:after {
left: 50%; }
.banner--connector-position-top-right:after {
left: auto;
right: calc(var(--banner-spacing-x) + 0.5 * var(--banner-icon-size)); }
.banner--connector-position-bottom-left:after {
border-color: var(--banner-bgcolor) transparent transparent transparent;
border-width: var(--banner-connector-size) var(--banner-connector-size) 0 var(--banner-connector-size);
bottom: calc(-1 * var(--banner-connector-size));
top: auto; }
.banner--connector-position-bottom-center:after {
border-color: var(--banner-bgcolor) transparent transparent transparent;
border-width: var(--banner-connector-size) var(--banner-connector-size) 0 var(--banner-connector-size);
bottom: calc(-1 * var(--banner-connector-size));
left: 50%;
top: auto; }
.banner--connector-position-bottom-right:after {
border-color: var(--banner-bgcolor) transparent transparent transparent;
border-width: var(--banner-connector-size) var(--banner-connector-size) 0 var(--banner-connector-size);
bottom: calc(-1 * var(--banner-connector-size));
left: auto;
right: calc(var(--banner-spacing-x) + 0.5 * var(--banner-icon-size));
top: auto; }
.card .banner {
border-radius: 0; }
.channel-list {
display: flex;
flex-direction: column; }
.channel-list__title {
font-size: var(--hl-typography-h6-font-size);
line-height: var(--hl-typography-h6-line-height);
letter-spacing: var(--hl-typography-h6-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
flex-basis: 100%; }
.channel-list__block {
display: flex;
flex-wrap: wrap;
-moz-column-gap: var(--hl-spacer-xl);
column-gap: var(--hl-spacer-xl);
row-gap: var(--hl-spacer-md); }
.channel-list__item {
display: flex;
width: var(--hl-spacer-4xl); }
.channel-list__item * {
margin-top: auto;
margin-bottom: auto; }
.collapsible {
--collapsible-chevron-direction: 180deg; }
.collapsible .panel__heading {
padding: 0; }
.collapsible__trigger {
border: var(--hl-border-width-default) solid var(--panel-heading-border-color);
justify-content: flex-start;
max-width: initial;
letter-spacing: var(--hl-typography-letter-spacing-default);
padding-left: var(--panel-padding-x);
padding-right: var(--panel-padding-x);
text-align: left;
white-space: normal;
width: 100%;
margin-top: 0;
margin-bottom: 0; }
.collapsible__trigger-chevron {
margin-left: auto; }
.collapsible__trigger-chevron .hl-btn__icon,
.collapsible__trigger-chevron .btn__icon,
.collapsible__trigger-chevron svg:last-child {
transform: rotate(var(--collapsible-chevron-direction)); }
.collapsible__trigger-chevron--position-left {
--collapsible-chevron-direction: 90deg;
margin-left: 0; }
.collapsible__trigger[aria-expanded=true] {
--collapsible-chevron-direction: 0deg; }
.collapsible__trigger[aria-expanded=true] .collapsible__trigger-chevron--position-left {
--collapsible-chevron-direction: 180deg; }
.collapsible__trigger[aria-expanded=true].hl-btn-link, .collapsible__trigger[aria-expanded=true].btn-link {
color: var(--hl-color-fg-light-interaction-standby); }
[data-toggle=collapse].js-radio-one-collapse-open[aria-expanded=true] {
pointer-events: none; }
.disney-box {
background: linear-gradient(#30323e, #1e1f2a);
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px;
display: block;
overflow: hidden;
padding-top: 56.25%;
position: relative;
width: 100%; }
.disney-box__image {
inset: 0px;
display: block;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
opacity: 1;
position: absolute;
width: 100%; }
.example-title {
padding: var(--hl-spacer-md) 0; }
.example-title h1,
.example-title h2,
.example-title h3,
.example-title h4,
.example-title h5,
.example-title h6 {
margin: 0; }
.hl-feature-item {
--feature-item-icon-size: var(--hl-size-icon-md);
--feature-item-gap: var(--hl-spacer-xs);
display: inline-grid;
grid-template-columns: var(--feature-item-icon-size) auto;
grid-gap: var(--feature-item-gap); }
@media (min-width: 576px) {
.hl-feature-item {
--feature-item-icon-size: var(--hl-size-icon-lg);
--feature-item-gap: var(--hl-spacer-md); } }
.hl-feature-item__icon {
margin-top: var(--hl-spacer-2xs); }
.hl-feature-item__icon .hl-icon {
--hl-icon-size: var(--feature-item-icon-size) !important; }
.hl-feature-item__headline {
color: var(--hl-color-fg-light-important);
margin-top: 0;
margin-bottom: var(--hl-spacer-sm); }
.hl-feature-item__text {
color: var(--hl-color-fg-light-muted);
margin-bottom: 0; }
.icon-group {
display: inline-flex; }
.icon-group > *:not(:first-child) {
margin-left: calc(-1 * var(--hl-spacer-2xs)); }
.link-group {
padding-left: 0;
margin-bottom: 0;
border-radius: var(--hl-border-radius-default); }
.link-group__item {
display: block;
border: var(--hl-border-width-default) solid var(--hl-color-border-light-default); }
.link-group__item + .link-group__item {
border-top-width: 0; }
.link-group__item:first-of-type {
border-top-left-radius: var(--hl-border-radius-default);
border-top-right-radius: var(--hl-border-radius-default); }
.link-group__item:last-of-type {
border-bottom-left-radius: var(--hl-border-radius-default);
border-bottom-right-radius: var(--hl-border-radius-default); }
.link-group__item hl-link-icon,
.link-group__item .link-icon {
border-radius: inherit; }
.link-group--remove-outer-border .link-group__item {
border-width: 0 0 var(--hl-border-width-default) 0; }
.link-group--remove-outer-border .link-group__item:last-of-type {
border-width: 0; }
.omnicanal-iadvize {
--iadvize-width-overlap-img: 10px;
position: fixed;
bottom: 0px;
right: 40px;
display: none;
width: 300px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
z-index: calc(var(--hl-z-index-sticky) + 1); }
@media (min-width: 768px) {
.omnicanal-iadvize {
display: block; } }
.omnicanal-iadvize__header {
height: 88px;
background: linear-gradient(to bottom, var(--hl-color-bg-light-primary) 50%, var(--hl-color-bg-light-default) 50%);
border-radius: 10px 10px 0 0;
display: flex;
align-items: center;
gap: var(--hl-spacer-md);
padding: 0 var(--hl-spacer-lg);
cursor: pointer; }
.omnicanal-iadvize__close {
position: absolute;
top: 0;
right: 0; }
.omnicanal-iadvize__images {
flex-basis: 100%;
display: flex;
margin-left: var(--iadvize-width-overlap-img);
justify-content: center; }
.omnicanal-iadvize__images .omnicanal-iadvize__img {
width: 60px;
border-radius: var(--hl-border-radius-full);
border: var(--hl-border-width-default) solid var(--hl-color-core-white);
margin-left: calc(-1 * var(--iadvize-width-overlap-img)); }
.omnicanal-iadvize__body {
background-color: var(--hl-color-bg-light-default);
padding-left: var(--hl-spacer-lg);
padding-right: var(--hl-spacer-lg);
padding-bottom: var(--hl-spacer-lg);
display: flex;
flex-direction: column;
gap: var(--hl-spacer-md); }
.omnicanal-iadvize__title {
text-align: center; }
.omnicanal-iadvize-mobile {
position: fixed;
bottom: 80px;
right: 20px;
display: flex;
gap: var(--hl-spacer-md);
flex-direction: column;
z-index: calc(var(--hl-z-index-sticky) + 1); }
.omnicanal-iadvize-mobile__trigger {
display: flex;
align-items: center;
justify-content: center;
height: 56px;
width: 56px;
background-color: var(--hl-color-bg-light-primary);
padding: 0;
border: 0;
border-radius: 56px;
z-index: 1; }
.omnicanal-iadvize-mobile__option {
display: flex;
height: 56px;
width: 56px;
padding: 0;
border: 0;
border-radius: 56px;
z-index: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); }
.omnicanal-iadvize-mobile__option:nth-of-type(1) {
bottom: 120px; }
.omnicanal-iadvize-mobile__option:nth-of-type(2) {
bottom: 60px; }
.omnicanal-iadvize-mobile__option--whatsapp {
--hl-color-button-bg-primary-standby: #3ec350;
--hl-color-button-bg-primary-hover: #3ec350;
--hl-color-button-bg-primary-focus: #3ec350;
--hl-color-button-bg-primary-pressed: #3ec350;
--hl-color-button-bg-primary-active: #3ec350; }
@media (min-width: 768px) {
.omnicanal-iadvize-mobile {
display: none; } }
.card-tariff-new {
--card-tariff-new-sticky-top: calc(var(--header-orange-rebrand-height) + var(--hl-spacer-lg));
position: relative;
border-top: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
border-right: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
border-bottom: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
border-left: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
display: flex;
flex-direction: column;
z-index: calc(var(--hl-z-index-default) + 1); }
.card-tariff-new:not(.card-tariff-new--sticky) {
border-radius: var(--hl-border-radius-default);
max-width: var(--card-tariff-max-width, 360px);
margin-left: auto;
margin-right: auto; }
@media (min-width: 992px) {
.card-tariff-new:not(.card-tariff-new--sticky) {
width: 360px; } }
.card-tariff-new--shadow {
box-shadow: 0 var(--hl-spacer-md) var(--hl-spacer-3xl) rgba(0, 0, 0, 0.13); }
.card-tariff-new--blue {
--card-dark-color: var(--hl-color-supporting-blue);
--card-light-color: var(--hl-color-supporting-blue-light); }
.card-tariff-new--green {
--card-dark-color: var(--hl-color-supporting-green);
--card-light-color: var(--hl-color-supporting-green-light); }
.card-tariff-new--purple {
--card-dark-color: var(--hl-color-supporting-purple);
--card-light-color: var(--hl-color-supporting-purple-light); }
.card-tariff-new--neutral {
--card-light-color: var(--hl-color-bg-light-very-muted);
--card-dark-color: var(--hl-color-bg-light-muted); }
.card-tariff-new--neutral .card-tariff-new__top-side {
border-bottom: none; }
.card-tariff-new--sticky {
position: relative;
width: 100%;
border-top: none;
border-right: none;
border-bottom: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
border-left: none; }
.card-tariff-new--sticky .card-tariff-new__header,
.card-tariff-new--sticky .card-tariff-new__subheader__item,
.card-tariff-new--sticky .card-tariff-new__content {
padding-left: 0;
padding-right: 0; }
.card-tariff-new--sticky .card-tariff-new__top-side {
border-bottom: none; }
.card-tariff-new--sticky .card-tariff-new__content__price {
margin-top: 0;
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
justify-content: flex-start;
align-items: center; }
.card-tariff-new--sticky .card-tariff-new__content__price__int {
font-size: var(--hl-font-size-4xl);
line-height: var(--hl-font-size-4xl); }
.card-tariff-new--sticky .card-tariff-new__content__price__data {
font-size: var(--hl-typography-p4-font-size);
line-height: var(--hl-typography-p4-line-height);
letter-spacing: var(--hl-typography-p4-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold); }
.card-tariff-new--sticky .card-tariff-new__content__buttons {
margin-top: 0;
flex-grow: 1;
justify-content: flex-end; }
.card-tariff-new--sticky .card-tariff-new__content__buttons .btn, .card-tariff-new--sticky .card-tariff-new__content__buttons .subnav__nav__item, .card-tariff-new--sticky .card-tariff-new__content__buttons .charger-btn {
width: auto;
min-width: unset;
flex-grow: 0; }
.card-tariff-new--sticky__container {
display: flex;
justify-content: space-between; }
.card-tariff-new--is-sticky {
margin-top: -180px; }
@media (min-width: 992px) {
.card-tariff-new--is-sticky {
position: sticky;
top: var(--card-tariff-new-sticky-top); } }
.card-tariff-new--summary .card-tariff-new__header {
background-color: transparent;
padding-top: var(--hl-spacer-xs); }
.card-tariff-new--summary .card-tariff-new__top-side {
border-bottom: none; }
.card-tariff-new--summary .card-tariff-new__dropdown-input + .card-tariff-new__dropdown-label:not(.card-tariff-new__dropdown-label--standard) {
border-bottom-width: var(--hl-spacer-2xs);
border-bottom-color: white;
border-bottom-style: solid;
padding-right: var(--hl-spacer-3xl);
background-color: var(--card-light-color); }
.card-tariff-new--summary .card-tariff-new__dropdown-input + .card-tariff-new__dropdown-label:not(.card-tariff-new__dropdown-label--standard):nth-last-child(2) {
border-bottom: none; }
.card-tariff-new--summary .card-tariff-new__dropdown-input + .card-tariff-new__dropdown-label:not(.card-tariff-new__dropdown-label--standard):after {
content: "";
opacity: 0;
background-color: var(--hl-color-bg-dark-default);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all var(--hl-transition-normal); }
.card-tariff-new--summary .card-tariff-new__dropdown-input + .card-tariff-new__dropdown-label:not(.card-tariff-new__dropdown-label--standard):hover:after {
opacity: 0.1;
transition: all var(--hl-transition-normal); }
.card-tariff-new--summary .card-tariff-new__dropdown-input + .card-tariff-new__dropdown-label:not(.card-tariff-new__dropdown-label--standard):active {
background-color: var(--card-light-color); }
.card-tariff-new--summary .card-tariff-new__dropdown-input + .card-tariff-new__dropdown-label:not(.card-tariff-new__dropdown-label--standard):active * {
color: var(--hl-color-fg-dark-default);
z-index: 1; }
.card-tariff-new--summary .card-tariff-new__dropdown-input + .card-tariff-new__dropdown-label:not(.card-tariff-new__dropdown-label--standard):active:after {
opacity: 0.65;
transition: all var(--hl-transition-normal); }
.card-tariff-new--summary .card-tariff-new__dropdown-input:checked + .card-tariff-new__dropdown-label:after {
content: ""; }
.card-tariff-new--simple {
background-color: var(--hl-color-bg-light-default); }
.card-tariff-new--simple .card-tariff-new__features {
background-color: transparent;
border: none;
padding: var(--hl-spacer-sm) 0; }
.card-tariff-new--simple .card-tariff-new__features__row {
background-color: transparent;
border-bottom: none;
padding-top: 0;
padding-bottom: 0; }
.card-tariff-new--simple .card-tariff-new__features__row--yellow {
background-color: var(--hl-color-supporting-yellow);
color: var(--hl-color-fg-light-important); }
.card-tariff-new--simple .card-tariff-new__features__row--yellow .card-tariff-new__features__item {
padding-top: var(--hl-spacer-xs);
padding-bottom: var(--hl-spacer-xs); }
.card-tariff-new--simple .card-tariff-new__features__row--inline {
padding-top: 0;
padding-bottom: 0;
flex-wrap: wrap;
gap: var(--hl-spacer-xs);
margin-top: var(--hl-spacer-sm); }
.card-tariff-new--simple .card-tariff-new__features__row--inline .card-tariff-new__features__item {
flex: 0;
background-color: var(--card-light-color, var(--hl-color-bg-light-ultra-muted));
border-radius: var(--hl-spacer-xs);
width: var(--hl-spacer-3xl);
height: var(--hl-spacer-3xl);
padding: var(--hl-spacer-xs); }
.card-tariff-new--simple .card-tariff-new__features__row--inline .card-tariff-new__features__item--disabled {
background-color: unset;
outline: var(--hl-border-width-default) dashed var(--card-light-color, var(--hl-color-border-light-muted));
outline-offset: calc(var(--hl-border-width-default) * -1); }
.card-tariff-new--simple .card-tariff-new__features__item {
padding-top: 0;
padding-bottom: var(--hl-spacer-xs); }
.card-tariff-new--simple .card-tariff-new__content {
justify-content: space-between;
gap: var(--hl-spacer-xs);
display: flex;
flex-wrap: wrap;
margin-top: auto;
border-top: var(--hl-border-width-lg) solid var(--card-light-color); }
.card-tariff-new--simple .card-tariff-new__content-container {
flex: 1; }
.card-tariff-new--simple .card-tariff-new__content__item {
text-align: left; }
.card-tariff-new--simple .card-tariff-new__content__price {
order: 1;
justify-content: flex-start;
margin-top: 0; }
.card-tariff-new--simple .card-tariff-new__content__buttons {
width: 100%; }
.card-tariff-new--simple .card-tariff-new__top-side {
border-bottom: none; }
.card-tariff-new--simple-col:not(.card-tariff-new--sticky), .card-tariff-new--simple-fix--col:not(.card-tariff-new--sticky) {
width: auto;
max-width: none; }
@media (max-width: 991.98px) {
.card-tariff-new--simple .card-tariff-new__features__desc__feat {
display: none; } }
.card-tariff-new--simple-tv .card-tariff-new__features {
background-color: transparent;
border: none;
padding: var(--hl-spacer-sm) 0; }
.card-tariff-new--simple-tv .card-tariff-new__features__row {
background-color: transparent;
border-bottom: none;
padding-top: 0;
padding-bottom: 0; }
.card-tariff-new--simple-tv .card-tariff-new__features__row--yellow {
background-color: var(--hl-color-supporting-yellow);
color: var(--hl-color-fg-light-important); }
.card-tariff-new--simple-tv .card-tariff-new__features__row--yellow .card-tariff-new__features__item {
padding-top: var(--hl-spacer-xs);
padding-bottom: var(--hl-spacer-xs); }
.card-tariff-new--simple-tv .card-tariff-new__features__row--inline {
padding-top: 0;
padding-bottom: 0;
flex-wrap: wrap;
gap: var(--hl-spacer-xs);
margin-top: var(--hl-spacer-sm); }
.card-tariff-new--simple-tv .card-tariff-new__features__row--inline .card-tariff-new__features__item {
flex: 0;
background-color: var(--hl-color-border-light-primary, var(--hl-color-bg-light-ultra-muted));
border-radius: var(--hl-spacer-xs);
width: var(--hl-spacer-3xl);
height: var(--hl-spacer-3xl);
padding: var(--hl-spacer-xs); }
.card-tariff-new--simple-tv .card-tariff-new__features__row--inline .card-tariff-new__features__item--disabled {
background-color: unset;
outline: var(--hl-border-width-default) dashed var(--hl-color-border-light-primary, var(--hl-color-border-light-muted));
outline-offset: calc(var(--hl-border-width-default) * -1); }
.card-tariff-new--simple-tv .card-tariff-new__features__item {
padding-top: 0;
padding-bottom: var(--hl-spacer-xs); }
.card-tariff-new--simple-tv .card-tariff-new__content {
justify-content: space-between;
gap: var(--hl-spacer-xs);
display: flex;
flex-wrap: wrap;
margin-top: auto;
border-top: var(--hl-border-width-lg) solid var(--hl-color-border-light-primary); }
.card-tariff-new--simple-tv .card-tariff-new__content-container {
flex: 1; }
.card-tariff-new--simple-tv .card-tariff-new__content__item {
text-align: left; }
.card-tariff-new--simple-tv .card-tariff-new__content__price {
order: 1;
justify-content: flex-start;
margin-top: 0; }
.card-tariff-new--simple-tv .card-tariff-new__content__buttons {
width: 100%; }
.card-tariff-new--simple-tv .card-tariff-new__top-side {
border-bottom: none; }
.card-tariff-new--simple-tv-col:not(.card-tariff-new--sticky), .card-tariff-new--simple-tv-fix--col:not(.card-tariff-new--sticky) {
width: auto;
max-width: none; }
.card-tariff-new--simple-tv .card-tariff-new__header {
font-size: var(--hl-typography-h6-font-size);
line-height: var(--hl-typography-h6-line-height);
letter-spacing: var(--hl-typography-h6-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
margin: 0;
color: var(--hl-color-fg-light-primary); }
@media (max-width: 991.98px) {
.card-tariff-new--simple-tv .card-tariff-new__features__desc__feat {
display: none; } }
.card-tariff-new--simple-tv-fix .card-tariff-new__content {
align-items: flex-end;
flex-direction: row; }
.card-tariff-new--simple-tv-fix .card-tariff-new__content__buttons {
flex-basis: content; }
.card-tariff-new--simple-tv-fix--col .card-tariff-new__content {
align-items: flex-end;
flex-direction: row; }
.card-tariff-new--simple-tv-fix--col .card-tariff-new__content__buttons {
flex-basis: content; }
.card-tariff-new--simple-fix .card-tariff-new__content {
align-items: flex-end;
flex-direction: row; }
.card-tariff-new--simple-fix .card-tariff-new__content__buttons {
flex-basis: content; }
@media (max-width: 991.98px) {
.card-tariff-new--simple-fix--col .card-tariff-new__features__desc__feat {
display: none; } }
.card-tariff-new--simple-fix--col .card-tariff-new__content {
align-items: flex-end;
flex-direction: row; }
.card-tariff-new--simple-fix--col .card-tariff-new__content__buttons {
flex-basis: content; }
.card-tariff-new__top-side {
position: relative;
background-color: var(--hl-color-bg-light-default);
border-bottom: var(--hl-border-width-lg) solid var(--card-light-color); }
.card-tariff-new:not(.card-tariff-new--sticky) .card-tariff-new__top-side {
border-top-left-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default));
border-top-right-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default)); }
.card-tariff-new:not(.card-tariff-new--sticky) .card-tariff-new__top-side:only-child {
border-bottom-left-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default));
border-bottom-right-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default)); }
.card-tariff-new__header {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
padding: var(--hl-spacer-2xs) var(--hl-spacer-md);
display: block;
text-align: left;
background-color: var(--card-dark-color);
color: var(--hl-color-fg-light-important); }
.card-tariff-new__subheader {
color: var(--hl-color-fg-light-important);
display: flex;
flex-direction: column; }
.card-tariff-new__subheader__item {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
text-align: left;
position: relative;
padding-top: var(--hl-spacer-2xs);
padding-right: var(--hl-spacer-md);
padding-bottom: var(--hl-spacer-2xs);
padding-left: var(--hl-spacer-md);
display: block;
width: 100%;
background-color: var(--card-light-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
order: 1;
border: none; }
@keyframes bouncing-text {
0% {
transform: translateX(0%); }
100% {
transform: translateX(-100%); } }
.card-tariff-new__subheader__item__text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.card-tariff-new__subheader__item__text--on {
position: relative;
width: 100%;
height: 100%;
margin: 0;
text-align: center;
transform: translateX(0%);
animation: bouncing-text 10s linear infinite;
white-space: unset;
overflow: unset;
text-overflow: unset; }
.card-tariff-new__subheader__item--featured {
width: 100%;
font-weight: 700;
background-color: var(--hl-color-bg-dark-default);
color: var(--hl-color-fg-dark-default); }
.card-tariff-new__subheader__item--info {
width: 100%;
padding-right: calc(var(--hl-spacer-md) + var(--hl-spacer-lg));
border-top: none;
border-right: none;
border-left: none; }
.card-tariff-new__subheader__item--info:after {
content: "";
position: absolute;
margin-top: auto;
margin-bottom: auto;
right: var(--hl-spacer-md);
top: 0;
bottom: 0;
width: var(--hl-spacer-md);
height: var(--hl-spacer-md);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0.25C4.615 0.25 0.25 4.615 0.25 10C0.25 15.385 4.615 19.75 10 19.75C15.385 19.75 19.75 15.385 19.75 10C19.75 4.615 15.385 0.25 10 0.25ZM11.5292 13.5873C10.7935 14.692 10.045 15.5433 8.78575 15.5433C7.92625 15.403 7.573 14.7872 7.759 14.1595L9.379 8.794C9.41875 8.66275 9.35275 8.5225 9.23275 8.47975C9.1135 8.43775 8.8795 8.593 8.677 8.815L7.6975 9.99325C7.67125 9.79525 7.6945 9.46825 7.6945 9.33625C8.43025 8.2315 9.63925 7.36 10.459 7.36C11.2382 7.4395 11.6073 8.06275 11.4715 8.7475L9.84025 14.1392C9.8185 14.2607 9.883 14.3845 9.99325 14.4235C10.1132 14.4655 10.3652 14.3103 10.5685 14.0883L11.5472 12.9108C11.5735 13.1088 11.5292 13.4553 11.5292 13.5873ZM11.311 6.57925C10.6915 6.57925 10.189 6.12775 10.189 5.46325C10.189 4.79875 10.6915 4.348 11.311 4.348C11.9305 4.348 12.433 4.7995 12.433 5.46325C12.433 6.1285 11.9305 6.57925 11.311 6.57925Z' fill='white'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat; }
.card-tariff-new__subheader__item:empty {
background-color: var(--hl-color-bg-light-default);
order: 2; }
.card-tariff-new__subheader__item:empty:after {
content: " "; }
.card-tariff-new__content {
display: flex;
flex-wrap: wrap;
padding: var(--hl-spacer-md); }
.card-tariff-new__content__item {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
text-align: right;
color: var(--hl-color-fg-light-muted);
flex-basis: 100%;
order: 2; }
.card-tariff-new__content__item--featured {
color: var(--hl-color-fg-light-important); }
.card-tariff-new__content__item:empty {
order: 1; }
.card-tariff-new__content__item:empty:after {
content: " "; }
.card-tariff-new__content__item .custom-control-label {
font-size: var(--hl-typography-p1-font-size); }
.card-tariff-new__content__price {
margin-top: var(--hl-spacer-xs);
display: flex;
justify-content: flex-end;
font-weight: 700;
gap: 5px;
flex-basis: 50%;
flex-grow: 1;
color: var(--hl-color-fg-light-important);
order: 3; }
.card-tariff-new__content__price.shakeItem {
animation: animationShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
transform: translate3d(0, 0, 0);
perspective: 1000px; }
@keyframes animationShake {
0%, 10% {
color: #FF7900; }
20%, 30% {
color: #d86704; }
40%, 50% {
color: #a7560f; }
60%, 70% {
color: #7c3a00; }
80%, 90% {
color: #502500; }
100% {
color: #000; }
10%, 90% {
transform: translate3d(-1px, 0, 0); }
20%, 80% {
transform: translate3d(2px, 0, 0); }
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0); }
40%, 60% {
transform: translate3d(4px, 0, 0); } }
.card-tariff-new__content__price__int {
font-size: var(--hl-font-size-9xl);
line-height: var(--hl-font-size-9xl); }
.card-tariff-new__content__price__info {
display: flex;
flex-wrap: wrap;
flex-direction: column;
margin-top: auto;
margin-bottom: auto;
justify-content: flex-end; }
.card-tariff-new__content__price__data {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold); }
.card-tariff-new__content__buttons {
margin-top: var(--hl-spacer-xs);
display: flex;
flex-wrap: wrap;
flex-basis: 100%;
gap: var(--hl-spacer-xs);
order: 4; }
.card-tariff-new__content__buttons .btn, .card-tariff-new__content__buttons .subnav__nav__item, .card-tariff-new__content__buttons .charger-btn {
min-width: 120px;
flex: 1 0 auto; }
.card-tariff-new__content + .card-tariff-new__features__row:last-of-type {
border-bottom-left-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default));
border-bottom-right-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default)); }
.card-tariff-new__panel {
margin-bottom: var(--hl-spacer-2xs);
padding-top: var(--hl-spacer-sm);
padding-bottom: var(--hl-spacer-sm);
padding-left: var(--hl-spacer-md);
padding-right: var(--hl-spacer-md);
background-color: var(--hl-color-bg-light-default);
display: flex;
justify-content: flex-end; }
.card-tariff-new__panel:only-child {
margin-bottom: 0; }
.card-tariff-new__panel--lightgrey {
background-color: var(--hl-color-bg-light-ultra-muted); }
.card-tariff-new__dropdown-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0; }
.card-tariff-new__dropdown-input:focus-visible + .card-tariff-new__dropdown-label {
animation: focus-outline-animation var(--hl-transition-normal) forwards; }
.card-tariff-new__dropdown-input + .card-tariff-new__dropdown-label:not(:nth-last-child(2)) {
border-bottom: var(--hl-border-width-default) solid var(--hl-color-border-light-default); }
.card-tariff-new__dropdown-input + .card-tariff-new__dropdown-label:empty:after {
content: "Ver m\E1s"; }
.card-tariff-new__dropdown-input + .card-tariff-new__dropdown-label + .card-tariff-new__features {
display: none; }
.card-tariff-new__dropdown-input + .card-tariff-new__dropdown-label .card-tariff-new__dropdown-label__less {
display: none; }
.card-tariff-new__dropdown-input:checked + .card-tariff-new__dropdown-label {
border-bottom: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
z-index: 1; }
.card-tariff-new__dropdown-input:checked + .card-tariff-new__dropdown-label + .card-tariff-new__features {
display: block; }
.card-tariff-new__dropdown-input:checked + .card-tariff-new__dropdown-label + .card-tariff-new__features + .card-tariff-new__features__note {
margin-top: var(--hl-spacer-2xs); }
.card-tariff-new__dropdown-input:checked + .card-tariff-new__dropdown-label:before {
transform: rotate(180deg);
transition: all var(--hl-transition-normal); }
.card-tariff-new__dropdown-input:checked + .card-tariff-new__dropdown-label:empty:after {
content: "Ver menos"; }
.card-tariff-new__dropdown-input:checked + .card-tariff-new__dropdown-label .card-tariff-new__dropdown-label__less {
display: block; }
.card-tariff-new__dropdown-input:checked + .card-tariff-new__dropdown-label .card-tariff-new__dropdown-label__more {
display: none; }
.card-tariff-new__base-details {
position: relative;
margin-bottom: var(--hl-spacer-2xs);
padding-top: var(--hl-spacer-sm);
padding-right: var(--hl-spacer-md);
padding-bottom: var(--hl-spacer-sm);
padding-left: var(--hl-spacer-md);
background-color: var(--hl-color-bg-light-default);
transition: all var(--hl-transition-normal);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: var(--card-light-color); }
.card-tariff-new__dropdown-label {
position: relative;
margin-bottom: 0;
padding-top: var(--hl-spacer-sm);
padding-right: var(--hl-spacer-md);
padding-bottom: var(--hl-spacer-sm);
padding-left: var(--hl-spacer-md);
background-color: var(--hl-color-bg-light-default);
cursor: pointer;
transition: all var(--hl-transition-normal);
display: flex;
flex-wrap: wrap;
justify-content: space-between; }
.card-tariff-new__dropdown-label:hover {
background-color: var(--hl-color-bg-light-very-muted);
transition: all var(--hl-transition-normal); }
.card-tariff-new__dropdown-label:active {
background-color: var(--hl-color-bg-light-muted);
transition: all var(--hl-transition-normal);
color: var(--hl-color-fg-dark-default); }
.card-tariff-new__dropdown-label:active:before {
background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='40'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/mask%3E%3Cg mask='url%28%23mask0%29'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M39 11L1 11L20 30L39 11Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
background-size: 100%;
transition: all var(--hl-transition-normal); }
.card-tariff-new__dropdown-label:before {
content: "";
position: absolute;
top: 0;
right: var(--hl-spacer-md);
bottom: 0;
margin-top: auto;
margin-bottom: auto;
width: var(--hl-spacer-md);
height: var(--hl-spacer-md);
background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='40'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/mask%3E%3Cg mask='url%28%23mask0%29'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M39 11L1 11L20 30L39 11Z' fill='black'/%3E%3C/g%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
transform: rotate(0deg);
transition: all var(--hl-transition-normal);
z-index: 1; }
.card-tariff-new__details {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-top: auto;
margin-bottom: 0; }
.card-tariff-new__details hl-icon {
position: relative;
top: 2px;
margin-right: var(--hl-spacer-2xs); }
.card-tariff-new__details:first-child {
flex-grow: 1; }
.card-tariff-new__details:nth-child(2) {
text-align: right; }
.card-tariff-new__details:nth-child(2) .card-tariff-new__details__important,
.card-tariff-new__details:nth-child(2) .card-tariff-new__details__note {
margin-left: auto;
margin-right: 0; }
.card-tariff-new__details:only-child {
text-align: left; }
.card-tariff-new__details__row {
display: flex;
flex-basis: 100%;
-moz-column-gap: var(--hl-spacer-sm);
column-gap: var(--hl-spacer-sm); }
.card-tariff-new__details__item {
font-size: var(--hl-typography-p4-font-size);
line-height: var(--hl-typography-p4-line-height);
letter-spacing: var(--hl-typography-p4-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
flex-basis: 100%;
color: var(--hl-color-fg-light-muted); }
.card-tariff-new__details__important {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
color: var(--hl-color-fg-light-important); }
.card-tariff-new__details__note {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
color: var(--hl-color-fg-light-muted);
white-space: nowrap; }
.card-tariff-new__details__feature {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
width: 100%;
display: block;
color: var(--hl-color-fg-light-muted);
border-bottom: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
padding-top: var(--hl-spacer-2xs);
padding-bottom: var(--hl-spacer-2xs); }
.card-tariff-new__details__feature:last-child {
border-bottom: none; }
.card-tariff-new__features {
background-color: var(--hl-color-bg-light-ultra-muted);
border-bottom: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
border-bottom-left-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default));
border-bottom-right-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default)); }
@media (min-width: 576px) {
.card-tariff-new__features {
flex-grow: 1; } }
.card-tariff-new__features:last-child {
border-bottom: 0; }
.card-tariff-new__features .card-tariff-new__features__note:last-child {
border-bottom: none; }
.card-tariff-new__features > .card-tariff-new__features__row:last-child {
border-bottom: 0;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit; }
.card-tariff-new__features__row {
position: relative;
padding-top: var(--hl-spacer-sm);
padding-bottom: var(--hl-spacer-sm);
padding-left: var(--hl-spacer-md);
padding-right: var(--hl-spacer-md);
height: auto;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
border-bottom: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
-moz-column-gap: 0;
column-gap: 0;
row-gap: var(--hl-spacer-sm);
background-color: var(--hl-color-bg-light-ultra-muted);
text-decoration: none;
border-top: none;
border-left: none;
border-right: none; }
.card-tariff-new__features__row--yellow {
background-color: var(--hl-color-supporting-yellow);
color: var(--hl-color-fg-light-important); }
.card-tariff-new__features__row--link {
width: 100%;
border-top: none;
border-left: none;
border-right: none; }
.card-tariff-new__features__row--link .card-tariff-new__features__main {
transition: all var(--hl-transition-normal); }
.card-tariff-new__features__row--link .card-tariff-new__features__chevron {
margin-top: auto;
margin-bottom: auto;
width: var(--hl-spacer-md);
fill: var(--hl-color-fg-light-important);
transition: all var(--hl-transition-normal); }
.card-tariff-new__features__row--link:hover {
text-decoration: none;
background-color: var(--hl-color-bg-light-very-muted);
transition: all var(--hl-transition-normal); }
.card-tariff-new__features__row--link:hover .card-tariff-new__features__main {
color: var(--hl-color-fg-light-interaction-hover);
transition: all var(--hl-transition-normal); }
.card-tariff-new__features__row--link:hover .card-tariff-new__features__chevron {
fill: var(--hl-color-fg-light-interaction-hover);
transition: all var(--hl-transition-normal); }
.card-tariff-new__features__row--link:active {
text-decoration: none;
background-color: var(--hl-color-bg-light-muted);
transition: all var(--hl-transition-normal); }
.card-tariff-new__features__row--link:active .card-tariff-new__features__main {
color: var(--hl-color-fg-light-interaction-pressed);
transition: all var(--hl-transition-normal); }
.card-tariff-new__features__row--link:active .card-tariff-new__features__chevron {
fill: var(--hl-color-fg-light-interaction-pressed);
transition: all var(--hl-transition-normal); }
.card-tariff-new__features__row--info {
width: 100%;
padding-right: calc(var(--hl-spacer-md) + var(--hl-spacer-lg));
border-top: none;
border-right: none;
border-left: none; }
.card-tariff-new__features__row--info:after {
content: "";
position: absolute;
margin-top: auto;
margin-bottom: auto;
right: var(--hl-spacer-md);
top: 0;
bottom: 0;
width: var(--hl-spacer-lg);
height: var(--hl-spacer-lg);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0.25C4.615 0.25 0.25 4.615 0.25 10C0.25 15.385 4.615 19.75 10 19.75C15.385 19.75 19.75 15.385 19.75 10C19.75 4.615 15.385 0.25 10 0.25ZM11.5292 13.5873C10.7935 14.692 10.045 15.5433 8.78575 15.5433C7.92625 15.403 7.573 14.7872 7.759 14.1595L9.379 8.794C9.41875 8.66275 9.35275 8.5225 9.23275 8.47975C9.1135 8.43775 8.8795 8.593 8.677 8.815L7.6975 9.99325C7.67125 9.79525 7.6945 9.46825 7.6945 9.33625C8.43025 8.2315 9.63925 7.36 10.459 7.36C11.2382 7.4395 11.6073 8.06275 11.4715 8.7475L9.84025 14.1392C9.8185 14.2607 9.883 14.3845 9.99325 14.4235C10.1132 14.4655 10.3652 14.3103 10.5685 14.0883L11.5472 12.9108C11.5735 13.1088 11.5292 13.4553 11.5292 13.5873ZM11.311 6.57925C10.6915 6.57925 10.189 6.12775 10.189 5.46325C10.189 4.79875 10.6915 4.348 11.311 4.348C11.9305 4.348 12.433 4.7995 12.433 5.46325C12.433 6.1285 11.9305 6.57925 11.311 6.57925Z' fill='%23085EBD'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat; }
.card-tariff-new__features__row--info:hover {
background-color: var(--hl-color-bg-light-very-muted);
transition: all var(--hl-transition-normal); }
.card-tariff-new__features__row--info:active {
background-color: var(--hl-color-bg-light-muted);
transition: all var(--hl-transition-normal);
color: var(--hl-color-fg-dark-default); }
.card-tariff-new__features__row--info .card-tariff-new__features__box {
margin-right: var(--hl-spacer-lg); }
.card-tariff-new__features__row--inline {
flex-wrap: nowrap;
-moz-column-gap: var(--hl-spacer-sm);
column-gap: var(--hl-spacer-sm); }
.card-tariff-new__features__row--inline .card-tariff-new__features__item {
margin-right: 0;
flex: 0 1 50%; }
.card-tariff-new__features__row--image .card-tariff-new__features__box {
margin-top: unset;
margin-bottom: unset;
flex: 1 1 70%; }
.card-tariff-new__features__item {
display: flex;
align-self: flex-start;
flex: 1 0 50%;
margin-right: var(--hl-spacer-lg);
gap: var(--hl-spacer-sm); }
.card-tariff-new__features__item:only-child {
flex: 0 1 100%;
margin-right: 0; }
.card-tariff-new__features__item hl-icon:last-child,
.card-tariff-new__features__item .hl-icon:last-child {
align-self: center; }
.card-tariff-new__features__note {
background-color: var(--hl-color-bg-light-default);
padding-top: var(--hl-spacer-sm);
padding-bottom: var(--hl-spacer-sm);
padding-left: var(--hl-spacer-md);
padding-right: var(--hl-spacer-md);
display: flex;
flex-wrap: wrap;
flex-direction: row;
-moz-column-gap: 0;
column-gap: 0;
row-gap: var(--hl-spacer-sm);
align-self: flex-start;
flex: 1 0 40%;
border-top: var(--hl-border-width-default) solid var(--hl-color-border-light-default); }
.card-tariff-new__features__note:only-child {
width: 100%; }
.card-tariff-new__features__note__item {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
display: flex;
flex: 0 1 100%;
color: var(--hl-color-fg-light-muted);
align-items: self-start;
gap: var(--hl-spacer-2xs); }
.card-tariff-new__features__note__item hl-icon {
position: relative;
top: 2px; }
.card-tariff-new__features__note__icon {
position: relative;
top: 3px;
margin-right: var(--hl-spacer-2xs);
color: var(--hl-color-fg-light-muted);
flex-shrink: 0; }
.card-tariff-new__features__note__text {
margin-top: auto;
margin-bottom: auto; }
.card-tariff-new__features__icon {
margin-right: var(--hl-spacer-2xs);
width: var(--hl-spacer-xl);
min-width: var(--hl-spacer-xl); }
.card-tariff-new__features__box {
margin-top: auto;
margin-bottom: auto;
flex: 1 0 70%; }
.card-tariff-new__features__main {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
flex: 0 1 100%;
display: flex;
position: relative;
color: var(--hl-color-fg-light-important);
text-align: left; }
.card-tariff-new__features__main--link {
text-decoration: underline;
border: none;
padding: 0;
color: var(--hl-color-fg-light-important); }
.card-tariff-new__features__desc {
display: flex;
gap: var(--hl-spacer-sm); }
.card-tariff-new__features__desc__feat {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
color: var(--hl-color-fg-light-muted);
display: flex;
font-style: normal;
text-align: left;
align-items: center;
gap: var(--hl-spacer-2xs); }
.card-tariff-new__features__desc__icon {
margin-right: var(--hl-spacer-2xs); }
.card-tariff-new__features__image {
margin-right: 0;
flex: 1 0 65px;
height: auto; }
.card-tariff-new__features__link {
border-width: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
text-indent: -9999px; }
.card-tariff-new__features__form {
flex-basis: 100%; }
.card-tariff-new > .card-tariff-new__features__row:last-child {
border-bottom: 0; }
.card-tariff-new-appendix, .card-tariff-new-pretitle {
max-width: var(--card-tariff-max-width, 360px);
margin-left: auto;
margin-right: auto; }
.card-tariff-new-appendix {
padding-top: var(--hl-spacer-md); }
.card-tariff-new-pretitle {
padding-bottom: var(--hl-spacer-xs); }
@media (forced-colors: active) {
.card-tariff-new .card-tariff-new__features__row--link {
--hl-transition-normal: 0s linear;
background-color: Canvas; } }
html[style*="--hlx-header-height"] .sticky-top-header {
top: calc(var(--hlx-header-height, 0px) + var(--hl-spacer-lg)); }
.modal--card-tariff__close {
margin-left: 0;
margin-right: auto; }
.modal--card-tariff .modal-content {
max-height: 96vh; }
.modal--card-tariff .modal-header {
display: block;
padding-bottom: 0; }
.modal--card-tariff .modal-header .close {
position: absolute;
right: 25px;
top: 20px;
z-index: 1; }
.modal--card-tariff .modal-header .card-tariff-new__top-side {
border-bottom: none; }
.modal--card-tariff .modal-body {
padding-top: 0;
overflow-y: auto; }
.card-tariff-simple {
--card-tariff-simple-sticky-top: calc(var(--header-orange-rebrand-height) + var(--hl-spacer-lg));
position: relative;
border: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
display: flex;
flex-direction: column;
z-index: calc(var(--hl-z-index-default) + 1);
background-color: var(--hl-color-bg-light-default); }
.card-tariff-simple:not(.card-tariff-simple--sticky) {
border-radius: var(--hl-border-radius-default);
max-width: var(--card-tariff-max-width, 360px);
margin-left: auto;
margin-right: auto; }
@media (min-width: 992px) {
.card-tariff-simple:not(.card-tariff-simple--sticky) {
width: 360px; } }
.card-tariff-simple:not(:has(.card-tariff-simple__features)) .card-tariff-simple__content {
border-top: none; }
.card-tariff-simple--shadow {
box-shadow: 0 var(--hl-spacer-md) var(--hl-spacer-3xl) rgba(0, 0, 0, 0.13); }
.card-tariff-simple--blue {
--card-dark-color: var(--hl-color-supporting-blue);
--card-light-color: var(--hl-color-supporting-blue-light); }
.card-tariff-simple--green {
--card-dark-color: var(--hl-color-supporting-green);
--card-light-color: var(--hl-color-supporting-green-light); }
.card-tariff-simple--purple {
--card-dark-color: var(--hl-color-supporting-purple);
--card-light-color: var(--hl-color-supporting-purple-light); }
.card-tariff-simple--neutral {
--card-light-color: var(--hl-color-bg-light-very-muted);
--card-dark-color: var(--hl-color-bg-light-muted); }
.card-tariff-simple--neutral .card-tariff-simple__top-side {
border-bottom: none; }
.card-tariff-simple--tv {
--card-light-color: var(--hl-color-fg-light-accent);
--card-dark-color: var(--hl-color-bg-light-default); }
.card-tariff-simple--tv .card-tariff-simple__header {
font-size: var(--hl-typography-h6-font-size);
line-height: var(--hl-typography-h6-line-height);
letter-spacing: var(--hl-typography-h6-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
margin-top: 0;
margin-bottom: 0;
color: var(--card-light-color); }
.card-tariff-simple__header {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
margin-top: 0;
margin-bottom: 0;
padding: var(--hl-spacer-2xs) var(--hl-spacer-md);
display: block;
text-align: left;
background-color: var(--card-dark-color);
color: var(--hl-color-fg-light-important);
border-top-left-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default));
border-top-right-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default)); }
.card-tariff-simple__subheader {
color: var(--hl-color-fg-light-important);
display: flex;
flex-direction: column; }
.card-tariff-simple__subheader__item {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
text-align: left;
position: relative;
padding: var(--hl-spacer-xs) var(--hl-spacer-md);
display: block;
width: 100%;
background-color: var(--card-light-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
order: 1;
border: none; }
@keyframes bouncing-text {
0% {
transform: translateX(0%); }
100% {
transform: translateX(-100%); } }
.card-tariff-simple__subheader__item__text {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
margin-top: 0;
margin-bottom: 0;
white-space: normal; }
.card-tariff-simple__subheader__item__text--on {
position: relative;
width: 100%;
height: 100%;
margin: 0;
text-align: center;
transform: translateX(0%);
animation: bouncing-text 10s linear infinite;
white-space: unset;
overflow: unset;
text-overflow: unset; }
.card-tariff-simple__subheader__item--featured {
width: 100%;
font-weight: 700;
background-color: var(--hl-color-bg-dark-default);
color: var(--hl-color-fg-dark-default); }
.card-tariff-simple__subheader__item--info {
width: 100%;
padding-right: calc(var(--hl-spacer-md) + var(--hl-spacer-lg)); }
.card-tariff-simple__subheader__item--info:focus-visible {
animation: focus-outline-animation var(--hl-transition-normal) forwards; }
.card-tariff-simple__subheader__item--info:after {
content: "";
position: absolute;
margin-top: auto;
margin-bottom: auto;
right: var(--hl-spacer-md);
top: 0;
bottom: 0;
width: var(--hl-spacer-md);
height: var(--hl-spacer-md);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0.25C4.615 0.25 0.25 4.615 0.25 10C0.25 15.385 4.615 19.75 10 19.75C15.385 19.75 19.75 15.385 19.75 10C19.75 4.615 15.385 0.25 10 0.25ZM11.5292 13.5873C10.7935 14.692 10.045 15.5433 8.78575 15.5433C7.92625 15.403 7.573 14.7872 7.759 14.1595L9.379 8.794C9.41875 8.66275 9.35275 8.5225 9.23275 8.47975C9.1135 8.43775 8.8795 8.593 8.677 8.815L7.6975 9.99325C7.67125 9.79525 7.6945 9.46825 7.6945 9.33625C8.43025 8.2315 9.63925 7.36 10.459 7.36C11.2382 7.4395 11.6073 8.06275 11.4715 8.7475L9.84025 14.1392C9.8185 14.2607 9.883 14.3845 9.99325 14.4235C10.1132 14.4655 10.3652 14.3103 10.5685 14.0883L11.5472 12.9108C11.5735 13.1088 11.5292 13.4553 11.5292 13.5873ZM11.311 6.57925C10.6915 6.57925 10.189 6.12775 10.189 5.46325C10.189 4.79875 10.6915 4.348 11.311 4.348C11.9305 4.348 12.433 4.7995 12.433 5.46325C12.433 6.1285 11.9305 6.57925 11.311 6.57925Z' fill='white'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat; }
.card-tariff-simple__subheader__item:empty {
background-color: var(--hl-color-bg-light-default);
order: 2; }
.card-tariff-simple__subheader__item:empty:after {
content: " "; }
.card-tariff-simple__content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: var(--hl-spacer-md);
justify-content: space-between;
gap: var(--hl-spacer-md);
align-items: flex-end;
margin-top: auto;
border-top: var(--hl-border-width-lg) solid var(--card-light-color); }
.card-tariff-simple__content-container {
margin: 0;
padding: 0;
list-style-type: ""; }
.card-tariff-simple__content-container > *:not(:last-child) {
margin-bottom: var(--hl-spacer-2xs); }
.card-tariff-simple__content__item {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
text-align: left;
color: var(--hl-color-fg-light-muted);
flex-basis: 100%;
order: 2; }
.card-tariff-simple__content__item--featured {
color: var(--hl-color-fg-light-important); }
.card-tariff-simple__content__item:empty {
order: 1; }
.card-tariff-simple__content__item:empty:after {
content: " "; }
.card-tariff-simple__content + .card-tariff-simple__features__row:last-child {
border-bottom-left-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default));
border-bottom-right-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default)); }
.card-tariff-simple__content__buttons {
display: flex;
gap: var(--hl-spacer-xs);
margin-left: auto;
flex-wrap: wrap;
justify-content: flex-end; }
.card-tariff-simple__features {
padding: var(--hl-spacer-md) 0;
margin-bottom: 0; }
@media (min-width: 576px) {
.card-tariff-simple__features {
flex-grow: 1; } }
.card-tariff-simple__features:last-child {
border-bottom: 0; }
.card-tariff-simple__features .card-tariff-simple__features__note:last-child {
border-bottom: 0; }
.card-tariff-simple__features > .card-tariff-simple__features__row:last-child {
border-bottom: 0; }
.card-tariff-simple__features__row {
position: relative;
padding: 0 var(--hl-spacer-md);
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
-moz-column-gap: 0;
column-gap: 0;
row-gap: var(--hl-spacer-sm);
text-decoration: none; }
.card-tariff-simple__features__row--yellow {
background-color: var(--hl-color-supporting-yellow);
color: var(--hl-color-fg-light-important); }
.card-tariff-simple__features__row--yellow .card-tariff-simple__features__item {
padding-top: var(--hl-spacer-xs);
padding-bottom: var(--hl-spacer-xs); }
.card-tariff-simple__features__row--inline {
gap: var(--hl-spacer-xs);
margin-top: var(--hl-spacer-sm); }
.card-tariff-simple__features__row--inline ul {
display: flex;
flex-wrap: wrap;
gap: var(--hl-spacer-xs);
margin: 0;
padding: 0; }
.card-tariff-simple__features__row--inline ul .card-tariff-simple__features__item {
display: grid;
place-content: center;
flex: unset;
width: 52px;
height: 52px;
background-color: var(--card-light-color, var(--hl-color-bg-light-ultra-muted));
border-radius: var(--hl-border-radius-md);
padding: 0; }
.card-tariff-simple__features__row--inline ul .card-tariff-simple__features__item > hl-icon {
min-width: 32px;
min-height: 32px; }
.card-tariff-simple__features__row--inline ul .card-tariff-simple__features__item--disabled {
background-color: unset;
border: var(--hl-border-width-default) dashed var(--card-light-color, var(--hl-color-border-light-muted)); }
.card-tariff-simple__features__row--inline .card-tariff-simple__features__title {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
color: var(--hl-color-fg-light-muted);
width: 100%;
list-style-type: ""; }
.card-tariff-simple__features__item {
display: flex;
align-self: flex-start;
flex: 0;
gap: var(--hl-spacer-xs);
padding-top: 0;
padding-bottom: var(--hl-spacer-xs); }
.card-tariff-simple__features__item hl-icon {
min-width: 24px;
min-height: 24px; }
.card-tariff-simple__features__item:only-child {
flex: 0 1 100%;
margin-right: 0; }
.card-tariff-simple__features__box {
margin-top: auto;
margin-bottom: auto;
flex: 1 0 70%; }
.card-tariff-simple__features__main {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
flex: 0 1 100%;
display: flex;
position: relative;
color: var(--hl-color-fg-light-important);
text-align: left; }
.card-tariff-simple__features__main--link {
text-decoration: underline;
border: none;
padding: 0;
color: var(--hl-color-fg-light-important); }
.card-tariff-simple__features__desc {
display: flex;
gap: var(--hl-spacer-sm); }
.card-tariff-simple__features__desc__feat {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
color: var(--hl-color-fg-light-muted);
display: flex;
font-style: normal;
text-align: left;
align-items: center;
gap: var(--hl-spacer-2xs); }
.card-tariff-simple > .card-tariff-simple__features__row:last-child {
border-bottom: 0; }
.card-tariff-simple--col:not(.card-tariff-simple--sticky) {
width: auto;
max-width: none; }
@media (max-width: 991.98px) {
.card-tariff-simple .card-tariff-simple__features__desc__feat {
display: none; } }
.card-tariff-simple--sticky .card-tariff-simple__header,
.card-tariff-simple--sticky .card-tariff-simple__content {
padding-left: 0;
padding-right: 0; }
.card-tariff-simple--sticky .card-tariff-simple__content {
border-top: 0; }
@media (forced-colors: active) {
.card-tariff-simple .card-tariff-simple__header {
forced-color-adjust: none; }
.card-tariff-simple .card-tariff-simple__content {
forced-color-adjust: none; }
.card-tariff-simple .card-tariff-simple__content * {
forced-color-adjust: auto; } }
html[style*="--hlx-header-height"] .card-tariff-new--is-sticky {
--card-tariff-new-sticky-top: calc(var(--hlx-header-height) + var(--hl-spacer-lg)); }
.modal--card-tariff__close {
margin-left: 0;
margin-right: auto; }
.modal--card-tariff .modal-content {
max-height: 96vh; }
.modal--card-tariff .modal-header {
display: block;
padding-bottom: 0; }
.modal--card-tariff .modal-header .close {
position: absolute;
right: 25px;
top: 20px;
z-index: 1; }
.modal--card-tariff .modal-header .card-tariff-simple__top-side {
border-bottom: none; }
.modal--card-tariff .modal-body {
padding-top: 0;
overflow-y: auto; }
.page-intro-tariff {
padding-bottom: 180px; }
@media (min-width: 992px) {
.page-intro-tariff {
padding-top: var(--hl-spacer-6xl);
padding-bottom: var(--hl-spacer-2xl); } }
.page-intro-tariff__tag {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
margin: 0; }
.page-intro-tariff__title {
font-size: var(--hl-typography-h1-font-size);
line-height: var(--hl-typography-h1-line-height);
letter-spacing: var(--hl-typography-h1-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
margin-top: var(--hl-spacer-md);
margin-bottom: 0; }
.panel {
--panel-padding-x: var(--hl-spacer-sm);
--panel-padding-y: var(--hl-spacer-xs);
--panel-border-color: transparent;
--panel-heading-color: var(--hl-color-fg-light-important);
--panel-heading-bgcolor: var(--hl-color-bg-light-default);
--panel-heading-border-color: transparent;
--panel-footer-color: var(--hl-color-fg-light-important);
--panel-footer-bgcolor: var(--hl-color-bg-light-default);
--panel-footer-border-color: transparent;
--panel-body-bgcolor: transparent;
background-color: var(--panel-body-bgcolor);
border: var(--hl-border-width-default) solid var(--panel-border-color);
border-radius: var(--hl-border-radius-default); }
.panel__heading {
background-color: var(--panel-heading-bgcolor);
color: var(--panel-heading-color);
font-weight: var(--hl-typography-font-weight-body-bold);
margin: calc(-1 * var(--hl-border-width-default));
padding: var(--panel-padding-y) var(--panel-padding-x);
border: 0;
border-radius: inherit; }
.panel__heading .btn, .panel__heading .subnav__nav__item, .panel__heading .charger-btn {
border: var(--hl-border-width-default) solid var(--panel-heading-border-color); }
.panel__body {
padding: var(--panel-padding-x); }
.panel__body p:last-child {
margin-bottom: 0; }
.panel__footer {
background-color: var(--panel-footer-bgcolor);
border-color: var(--panel-footer-border-color);
border-top: var(--hl-border-width-default) solid var(--panel-footer-border-color);
color: var(--panel-footer-color);
font-weight: var(--hl-typography-font-weight-body-bold);
padding: var(--panel-padding-y) var(--panel-padding-x); }
.panel--primary {
--panel-heading-bgcolor: var(--hl-color-primary);
--panel-heading-border-color: var(--hl-color-primary);
--panel-heading-color: var(--hl-color-fg-dark-important); }
.panel--secondary {
--panel-heading-bgcolor: var(--hl-color-secondary);
--panel-heading-border-color: var(--hl-color-secondary);
--panel-heading-color: var(--hl-color-fg-dark-important); }
.panel--grey {
--panel-heading-bgcolor: var(--hl-color-bg-light-very-muted);
--panel-heading-color: var(--hl-color-fg-light-important); }
.panel--muted {
--panel-heading-bgcolor: var(--hl-color-bg-light-muted);
--panel-border-color: var(--hl-color-bg-light-muted);
--panel-heading-color: var(--hl-color-fg-light-important); }
.panel--default {
--panel-heading-bgcolor: var(--hl-color-bg-light-default);
--panel-border-color: var(--hl-color-bg-light-default);
--panel-heading-color: var(--hl-color-fg-light-important); }
.panel--very-muted {
--panel-heading-bgcolor: var(--hl-color-bg-light-very-muted);
--panel-border-color: var(--hl-color-bg-light-very-muted);
--panel-heading-color: var(--hl-color-fg-light-important); }
.panel--success {
--panel-border-color: var(--hl-color-functional-success);
--panel-footer-border-color: var(--hl-color-functional-success);
--panel-heading-bgcolor: var(--hl-color-functional-success);
--panel-heading-border-color: var(--hl-color-functional-success);
--panel-heading-color: var(--hl-color-fg-light-important); }
.panel--warning {
--panel-border-color: var(--hl-color-functional-warning);
--panel-footer-border-color: var(--hl-color-functional-warning);
--panel-heading-bgcolor: var(--hl-color-functional-warning);
--panel-heading-border-color: var(--hl-color-functional-warning);
--panel-heading-color: var(--hl-color-fg-light-important); }
.panel--info {
--panel-border-color: var(--hl-color-functional-info);
--panel-footer-border-color: var(--hl-color-functional-info);
--panel-heading-bgcolor: var(--hl-color-functional-info);
--panel-heading-border-color: var(--hl-color-functional-info);
--panel-heading-color: var(--hl-color-fg-light-important); }
.panel--danger {
--panel-border-color: var(--hl-color-functional-danger);
--panel-footer-border-color: var(--hl-color-functional-danger);
--panel-heading-bgcolor: var(--hl-color-functional-danger);
--panel-heading-border-color: var(--hl-color-functional-danger);
--panel-heading-color: var(--hl-color-fg-dark-important); }
.panel--borderless {
--panel-border-color: transparent;
--panel-heading-border-color: transparent;
--panel-footer-border-color: transparent; }
.panel--bordered {
--panel-border-color: var(--hl-color-border-light-default);
--panel-heading-border-color: var(--hl-color-border-light-default);
--panel-footer-border-color: var(--hl-color-border-light-default); }
.panel--underlined {
--panel-heading-border-color: transparent;
--panel-border-color: transparent; }
.panel--underlined .panel__heading {
box-shadow: 0 calc(-1 * var(--hl-border-width-default)) 0 inset var(--hl-color-border-light-default); }
.panel--body-no-padding .panel__body {
padding: 0; }
.panel--background {
background-color: var(--panel-heading-bgcolor); }
.panel--background .panel__body {
color: var(--panel-heading-color); }
.price-block {
--price-block-color: var(--hl-color-fg-light-important);
display: inline-flex;
color: var(--price-block-color); }
.price-block.price-block--currency-bottom {
--hl-typography-line-height-very-decreased: .8; }
.price-block__more {
margin-top: auto;
margin-bottom: auto;
display: flex; }
.price-block__currency {
width: -moz-max-content;
width: max-content; }
.price-block .price-block__unit {
position: relative;
z-index: 1; }
.price-block--size-2xs .price-block__unit {
font-size: var(--hl-typography-h5-font-size);
line-height: var(--hl-typography-h5-line-height);
letter-spacing: var(--hl-typography-h5-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
margin-top: 0;
margin-bottom: 0; }
.price-block--size-2xs.price-block--currency-md .price-block__more, .price-block--size-2xs.price-block--currency-bottom .price-block__more {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-very-decreased);
align-self: flex-end;
margin-top: 0;
margin-bottom: 0; }
.price-block--size-2xs.price-block--currency-lg .price-block__more, .price-block--size-2xs.price-block--currency-default .price-block__more {
font-size: var(--hl-typography-h5-font-size);
line-height: var(--hl-typography-h5-line-height);
letter-spacing: var(--hl-typography-h5-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
gap: var(--hl-spacer-3xs);
margin-top: 0;
margin-bottom: 0; }
.price-block--size-xs .price-block__unit {
font-size: var(--hl-typography-h4-font-size);
line-height: var(--hl-typography-h4-line-height);
letter-spacing: var(--hl-typography-h4-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
margin-top: 0;
margin-bottom: 0; }
.price-block--size-xs.price-block--currency-md .price-block__more, .price-block--size-xs.price-block--currency-bottom .price-block__more {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-very-decreased);
align-self: flex-end;
margin-top: 0;
margin-bottom: 0; }
.price-block--size-xs.price-block--currency-lg .price-block__more, .price-block--size-xs.price-block--currency-default .price-block__more {
font-size: var(--hl-typography-h4-font-size);
line-height: var(--hl-typography-h4-line-height);
letter-spacing: var(--hl-typography-h4-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
gap: var(--hl-spacer-3xs);
margin-top: 0;
margin-bottom: 0; }
.price-block--size-sm .price-block__unit {
font-size: var(--hl-typography-h3-font-size);
line-height: var(--hl-typography-h3-line-height);
letter-spacing: var(--hl-typography-h3-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
margin-top: 0;
margin-bottom: 0; }
.price-block--size-sm.price-block--currency-sm, .price-block--size-sm.price-block--currency-top {
gap: var(--hl-spacer-3xs);
inline-size: -moz-min-content;
inline-size: min-content; }
.price-block--size-sm.price-block--currency-sm .price-block__more, .price-block--size-sm.price-block--currency-top .price-block__more {
flex-wrap: wrap; }
.price-block--size-sm.price-block--currency-sm .price-block__dec, .price-block--size-sm.price-block--currency-top .price-block__dec {
font-size: var(--hl-typography-p4-font-size);
line-height: var(--hl-typography-p4-line-height);
letter-spacing: var(--hl-typography-p4-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-very-decreased);
margin-top: 0;
margin-bottom: 0; }
.price-block--size-sm.price-block--currency-sm .price-block__currency, .price-block--size-sm.price-block--currency-top .price-block__currency {
font-size: var(--hl-typography-p4-font-size);
line-height: var(--hl-typography-p4-line-height);
letter-spacing: var(--hl-typography-p4-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-very-decreased);
margin-top: 0;
margin-bottom: 0; }
.price-block--size-sm.price-block--currency-md .price-block__more, .price-block--size-sm.price-block--currency-bottom .price-block__more {
font-size: var(--hl-typography-p1-font-size);
line-height: var(--hl-typography-p1-line-height);
letter-spacing: var(--hl-typography-p1-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-very-decreased);
align-self: flex-end;
margin-top: 0;
margin-bottom: 0; }
.price-block--size-sm.price-block--currency-lg .price-block__more, .price-block--size-sm.price-block--currency-default .price-block__more {
font-size: var(--hl-typography-h3-font-size);
line-height: var(--hl-typography-h3-line-height);
letter-spacing: var(--hl-typography-h3-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
gap: var(--hl-spacer-3xs);
margin-top: 0;
margin-bottom: 0; }
.price-block--size-md .price-block__unit {
font-size: var(--hl-typography-h2-font-size);
line-height: var(--hl-typography-h2-line-height);
letter-spacing: var(--hl-typography-h2-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
margin-top: 0;
margin-bottom: 0; }
.price-block--size-md.price-block--currency-sm, .price-block--size-md.price-block--currency-top {
gap: var(--hl-spacer-3xs);
inline-size: -moz-min-content;
inline-size: min-content; }
.price-block--size-md.price-block--currency-sm .price-block__more, .price-block--size-md.price-block--currency-top .price-block__more {
flex-wrap: wrap; }
.price-block--size-md.price-block--currency-sm .price-block__dec, .price-block--size-md.price-block--currency-top .price-block__dec {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-very-decreased);
margin-top: 0;
margin-bottom: 0; }
.price-block--size-md.price-block--currency-sm .price-block__currency, .price-block--size-md.price-block--currency-top .price-block__currency {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-very-decreased);
margin-top: 0;
margin-bottom: 0; }
.price-block--size-md.price-block--currency-md .price-block__more, .price-block--size-md.price-block--currency-bottom .price-block__more {
font-size: var(--hl-typography-h6-font-size);
line-height: var(--hl-typography-h6-line-height);
letter-spacing: var(--hl-typography-h6-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
align-self: flex-end;
gap: var(--hl-spacer-3xs);
margin-top: 0;
margin-bottom: 0; }
.price-block--size-md.price-block--currency-lg .price-block__more, .price-block--size-md.price-block--currency-default .price-block__more {
font-size: var(--hl-typography-h2-font-size);
line-height: var(--hl-typography-h2-line-height);
letter-spacing: var(--hl-typography-h2-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
gap: var(--hl-spacer-2xs);
margin-top: 0;
margin-bottom: 0; }
.price-block--size-lg .price-block__unit {
font-size: var(--hl-typography-h1-font-size);
line-height: var(--hl-typography-h1-line-height);
letter-spacing: var(--hl-typography-h1-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
margin-top: 0;
margin-bottom: 0; }
.price-block--size-lg.price-block--currency-sm, .price-block--size-lg.price-block--currency-top {
gap: var(--hl-spacer-2xs);
inline-size: -moz-min-content;
inline-size: min-content; }
.price-block--size-lg.price-block--currency-sm .price-block__more, .price-block--size-lg.price-block--currency-top .price-block__more {
flex-wrap: wrap; }
.price-block--size-lg.price-block--currency-sm .price-block__dec, .price-block--size-lg.price-block--currency-top .price-block__dec {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-very-decreased);
margin-top: 0;
margin-bottom: 0; }
.price-block--size-lg.price-block--currency-sm .price-block__currency, .price-block--size-lg.price-block--currency-top .price-block__currency {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-very-decreased);
margin-top: 0;
margin-bottom: 0; }
.price-block--size-lg.price-block--currency-md .price-block__more, .price-block--size-lg.price-block--currency-bottom .price-block__more {
font-size: var(--hl-typography-h5-font-size);
line-height: var(--hl-typography-h5-line-height);
letter-spacing: var(--hl-typography-h5-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
align-self: flex-end;
gap: var(--hl-spacer-2xs);
margin-top: 0;
margin-bottom: 0; }
.price-block--size-lg.price-block--currency-lg .price-block__more, .price-block--size-lg.price-block--currency-default .price-block__more {
font-size: var(--hl-typography-h1-font-size);
line-height: var(--hl-typography-h1-line-height);
letter-spacing: var(--hl-typography-h1-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
gap: var(--hl-spacer-xs);
margin-top: 0;
margin-bottom: 0; }
.price-block--currency-sm .price-block__dec:empty:after, .price-block--currency-top .price-block__dec:empty:after {
content: " "; }
.price-block--is-old {
--price-block-color: var(--hl-color-fg-light-disabled);
position: relative; }
.price-block--is-old::before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 4px;
top: calc(50% - 2px);
bottom: 0;
left: 0;
background-color: var(--danger);
transform: rotate(-8deg) translateY(0px);
transform-origin: center center;
z-index: 3; }
@media (forced-colors: active) {
.price-block--is-old::before {
forced-color-adjust: none; } }
.base-tag {
--tag-radius: var(--hl-border-radius-default);
display: inline-flex;
align-items: center;
height: var(--tag-height);
border-radius: var(--tag-radius);
cursor: default; }
.base-tag-group {
display: flex;
flex-wrap: wrap;
gap: var(--hl-spacer-xs); }
.base-tag__label {
white-space: nowrap; }
.base-tag .hl-icon,
.base-tag .btn .hl-icon {
height: var(--tag-iconsize);
width: var(--tag-iconsize); }
.base-tag .btn, .base-tag .subnav__nav__item, .base-tag .charger-btn {
padding: 0;
padding-left: var(--padding-hack);
width: var(--tag-height);
height: var(--tag-height);
border-top-right-radius: var(--tag-radius);
border-bottom-right-radius: var(--tag-radius); }
.base-tag__container {
display: inline-flex;
align-items: center;
gap: var(--tag-exterior-gap);
max-width: 100%;
height: 100%;
width: -moz-fit-content;
width: fit-content;
padding-left: var(--tag-padding-x);
padding-right: var(--tag-padding-x);
border-radius: var(--tag-radius);
background-color: var(--hl-color-button-bg-primary-standby); }
.base-tag__container + .btn, .base-tag__container + .subnav__nav__item, .base-tag__container + .charger-btn {
padding-right: var(--padding-hack);
padding-left: 0; }
.base-tag--action {
--tag-radius: var(--hl-border-radius-full);
--tag-border-width: var(--hl-border-width-none);
--tag-interior-gap: var(--hl-spacer-3xs);
--tag-gap-color: var(--hl-color-border-dark-secondary);
--tag-bg-color: var(--hl-color-button-bg-primary-standby);
--tag-text-color: var(--hl-color-button-fg-light-primary-standby);
color: var(--tag-text-color);
gap: var(--tag-interior-gap); }
.base-tag--action--outline {
--tag-radius: var(--hl-border-radius-full);
--tag-border-width: var(--hl-border-width-default);
--tag-border-color: var(--hl-color-border-light-secondary);
--tag-interior-gap: 0;
--tag-gap-color: var(--tag-border-color);
--tag-bg-color: transparent;
--tag-text-color: var(--hl-color-button-text-light-standby); }
.base-tag--action .btn, .base-tag--action .subnav__nav__item, .base-tag--action .charger-btn {
border-radius: var(--tag-radius);
border-top-right-radius: var(--hl-border-radius-none);
border-bottom-right-radius: var(--hl-border-radius-none); }
.base-tag--action .btn + .base-tag__container, .base-tag--action .subnav__nav__item + .base-tag__container, .base-tag--action .charger-btn + .base-tag__container {
border-radius: var(--hl-border-radius-none); }
.base-tag--action .base-tag__container {
border: var(--tag-border-width);
border-style: solid;
border-color: var(--tag-border-color);
background-color: var(--tag-bg-color);
border-left: 0;
border-right: 0; }
.base-tag--action .base-tag__container + .btn, .base-tag--action .base-tag__container + .subnav__nav__item, .base-tag--action .base-tag__container + .charger-btn {
border-top-left-radius: var(--hl-border-radius-none);
border-bottom-left-radius: var(--hl-border-radius-none);
border-top-right-radius: var(--tag-radius);
border-bottom-right-radius: var(--tag-radius); }
.base-tag--action .base-tag__container + .btn .hl-icon, .base-tag--action .base-tag__container + .subnav__nav__item .hl-icon, .base-tag--action .base-tag__container + .charger-btn .hl-icon {
color: currentColor; }
.base-tag--interaction {
--tag-radius: var(--hl-border-radius-full);
--tag-border-width: var(--hl-border-width-default);
--tag-border-color: var(--hl-color-border-light-secondary);
--tag-interior-gap: 0;
--tag-gap-color: var(--tag-border-color);
--tag-bg-color: transparent;
--tag-text-color: var(--hl-color-button-text-light-standby);
color: var(--tag-text-color);
gap: var(--tag-interior-gap); }
.base-tag--interaction--secondary {
--tag-border-width: var(--hl-border-width-none);
--tag-interior-gap: var(--hl-spacer-3xs);
--tag-gap-color: var(--hl-color-border-dark-secondary);
--tag-bg-color: var(--hl-color-button-bg-light-black-standby);
--tag-text-color: var(--hl-color-button-text-dark-standby); }
.base-tag--interaction--orange {
--tag-border-width: var(--hl-border-width-none);
--tag-interior-gap: var(--hl-spacer-3xs);
--tag-gap-color: var(--hl-color-border-dark-secondary);
--tag-bg-color: var(--hl-color-button-bg-primary-standby);
--tag-text-color: var(--hl-color-button-text-light-standby); }
.base-tag--interaction:not(.base-tag--interaction--secondary) .base-tag__container {
border-right: 0; }
.base-tag--interaction .base-tag__container {
border: var(--tag-border-width);
border-style: solid;
border-color: var(--tag-border-color);
background-color: var(--tag-bg-color);
border-top-right-radius: var(--hl-border-width-none);
border-bottom-right-radius: var(--hl-border-width-none); }
.base-tag--interaction .base-tag__container + .btn .hl-icon, .base-tag--interaction .base-tag__container + .subnav__nav__item .hl-icon, .base-tag--interaction .base-tag__container + .charger-btn .hl-icon {
color: currentColor; }
.base-tag--functional {
--tag-radius: var(--hl-border-radius-full);
--tag-bg-color: var(--hl-color-bg-light-muted);
--tag-text-color: var(--hl-color-core-black); }
.base-tag--functional--success {
--tag-bg-color: var(--hl-color-functional-success);
--tag-text-color: var(--hl-color-core-black); }
.base-tag--functional--danger {
--tag-bg-color: var(--hl-color-functional-danger);
--tag-text-color: var(--hl-color-core-white); }
.base-tag--functional--warning {
--tag-bg-color: var(--hl-color-functional-warning);
--tag-text-color: var(--hl-color-core-black); }
.base-tag--functional--info {
--tag-bg-color: var(--hl-color-functional-info);
--tag-text-color: var(--hl-color-core-black); }
.base-tag--functional .base-tag__container {
background-color: var(--tag-bg-color);
color: var(--tag-text-color); }
.base-tag--promotional {
--tag-radius: var(--hl-border-radius-full);
--tag-bg-color: var(--hl-color-supporting-yellow);
--tag-text-color: var(--hl-color-core-black); }
.base-tag--promotional--black {
--tag-bg-color: var(--hl-color-core-black);
--tag-text-color: var(--hl-color-core-white); }
.base-tag--promotional--white {
--tag-bg-color: var(--hl-color-core-white);
--tag-text-color: var(--hl-color-core-black); }
.base-tag--promotional .base-tag__container {
background-color: var(--tag-bg-color);
color: var(--tag-text-color); }
.base-tag--sm {
--tag-padding-x: 8px;
--tag-padding-y: 2px;
--tag-height: 20px;
--tag-exterior-gap: 2px;
--tag-iconsize: 12px;
--padding-hack: 2px;
font-size: var(--hl-font-size-xs);
line-height: var(--hl-typography-line-height-decreased);
font-weight: var(--hl-typography-font-weight-body-bold);
letter-spacing: var(--hl-typography-letter-spacing-default); }
.base-tag--md {
--tag-padding-x: 12px;
--tag-padding-y: 4px;
--tag-height: 26px;
--tag-exterior-gap: 4px;
--tag-iconsize: 14px;
--padding-hack: 3px;
font-size: var(--hl-font-size-sm);
line-height: var(--hl-typography-line-height-decreased);
font-weight: var(--hl-typography-font-weight-body-bold);
letter-spacing: var(--hl-typography-letter-spacing-default); }
.base-tag--lg {
--tag-padding-x: 12px;
--tag-padding-y: 8px;
--tag-height: 36px;
--tag-exterior-gap: 8px;
--tag-iconsize: 16px;
--padding-hack: 3px;
font-size: var(--hl-font-size-md);
line-height: var(--hl-typography-line-height-decreased);
font-weight: var(--hl-typography-font-weight-body-bold);
letter-spacing: var(--hl-typography-letter-spacing-default); }
.base-tag--xl {
--tag-padding-x: 16px;
--tag-padding-y: 12px;
--tag-height: 52px;
--tag-exterior-gap: 12px;
--tag-iconsize: 24px;
--padding-hack: 4px;
font-size: var(--hl-font-size-2xl);
line-height: var(--hl-typography-line-height-decreased);
font-weight: var(--hl-typography-font-weight-body-bold);
letter-spacing: var(--hl-typography-letter-spacing-default); }
.base-tag--disabled {
--tag-border-color: var(--hl-color-border-light-secondary);
--tag-gap-color: var(--tag-border-color);
--tag-bg-color: var(--hl-color-button-bg-light-disabled);
--tag-text-color: var(--hl-color-button-text-dark-standby);
opacity: var(--hl-opacity-disabled); }
.base-tag--disabled .btn, .base-tag--disabled .subnav__nav__item, .base-tag--disabled .charger-btn {
opacity: 1; }
.base-tag--disabled:not(.base-tag--interaction--secondary) {
--tag-border-color: var(--hl-color-button-border-light-disabled);
--tag-gap-color: var(--tag-border-color);
--tag-bg-color: var(--hl-color-button-bg-dark-disabled);
--tag-text-color: var(--hl-color-button-fg-light-disabled); }
.review {
border-radius: var(--hl-border-radius-default); }
.review__author {
align-items: center;
display: flex;
gap: var(--hl-spacer-lg);
margin-bottom: var(--hl-spacer-md); }
.review__author__image img {
aspect-ratio: 1/1;
border-radius: var(--hl-border-radius-full);
-o-object-fit: cover;
object-fit: cover;
overflow: hidden; }
.review__author__name {
font-size: var(--hl-typography-h3-font-size);
line-height: var(--hl-typography-h3-line-height);
letter-spacing: var(--hl-typography-h3-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
margin: 0; }
.review__author__date {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
color: var(--hl-color-fg-light-muted); }
.review__author__detail {
display: flex;
flex-direction: column; }
.review__title {
font-size: var(--hl-typography-h6-font-size);
line-height: var(--hl-typography-h6-line-height);
letter-spacing: var(--hl-typography-h6-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
margin: 0; }
.review__rating {
display: inline-flex;
margin-bottom: var(--hl-spacer-sm); }
.review__show-more {
display: flex;
margin-top: var(--hl-spacer-sm); }
.review--has-bg {
padding: var(--hl-spacer-md);
background: var(--hl-color-bg-light-very-muted); }
.section-title {
display: flex;
flex-direction: column;
gap: var(--hl-spacer-md);
justify-content: space-between;
margin-bottom: var(--hl-spacer-lg); }
@media (min-width: 768px) {
.section-title {
flex-direction: row; } }
.section-title__two-columns {
display: grid;
grid-template-columns: 1fr;
gap: 0 10px; }
@media (min-width: 992px) {
.section-title__two-columns {
grid-template-columns: 1fr 1fr; } }
.section-title__title {
margin-bottom: 0;
margin-top: 0; }
.section-title__pre-title {
margin-bottom: 0;
font-weight: var(--hl-typography-font-weight-body-bold);
color: var(--hl-color-core-black); }
.section-title__subtitle {
margin-bottom: 0;
margin-top: var(--hl-spacer-sm); }
@media (min-width: 992px) {
.section-title__subtitle {
margin-top: var(--hl-spacer-md); } }
.section-title__action {
align-items: flex-end;
display: flex;
flex-shrink: 0;
justify-content: flex-end; }
.section-title__action--left {
justify-content: flex-start; }
.section-title__action--image {
justify-content: center;
align-items: center; }
@media (min-width: 768px) {
.section-title--direction-column {
flex-direction: column; } }
.section-title--inner ~ .section-title--inner, .section-title--inner:not(:first-child) {
padding-top: var(--hl-spacer-2xl); }
.section-title--only-title {
margin-bottom: 0; }
.bg-dark strong {
color: var(--hl-color-fg-dark-default); }
.sticker-box {
--sticker-box-background-color: var(--hl-color-bg-light-default);
--sticker-box-background-opacity: 40%;
--sticker-box-label-color: var(--hl-color-fg-light-important);
--sticker-box-heading: var(--hl-color-fg-light-primary);
display: flex; }
.sticker-box--vertical {
display: inline-block;
width: -moz-fit-content;
width: fit-content; }
.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child) {
background-size: 100%, 100%, 0, 100%; }
.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child):has(+ .sticker-box__block--plus) {
padding-right: var(--hl-spacer-md);
padding-bottom: calc(var(--hl-spacer-xs) + 10px); }
@media (min-width: 768px) {
.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child):has(+ .sticker-box__block--plus) {
padding-right: var(--hl-spacer-lg);
padding-bottom: calc(var(--hl-spacer-xs) + 11px); } }
@media (min-width: 992px) {
.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child):has(+ .sticker-box__block--plus) {
padding-bottom: calc(var(--hl-spacer-xs) + 12px); } }
.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-left: var(--hl-spacer-md);
padding-top: calc(var(--hl-spacer-xs) + 10px);
background-image: linear-gradient(var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to left, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to right, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to top, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0);
background-position: 0% 0px, 100% 0px, 0 0, 0 0, 0 0px;
background-size: 40%, 40%, 100%, 100%, 0%;
background-repeat: no-repeat; }
@media (min-width: 768px) {
.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-left: var(--hl-spacer-lg);
padding-top: calc(var(--hl-spacer-xs) + 11px); } }
@media (min-width: 992px) {
.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-top: calc(var(--hl-spacer-xs) + 12px); } }
.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
content: "";
top: -9px;
left: 50%;
right: 50%;
transform: translate(-50%, 0%); }
@media (min-width: 992px) {
.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
top: -10px; } }
.sticker-box--dark {
--sticker-box-background-color: var(--hl-color-bg-dark-default);
--sticker-box-label-color: var(--hl-color-fg-dark-important);
--sticker-box-heading: var(--hl-color-fg-dark-primary); }
.sticker-box--dark .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
background-image: url('data:image/svg+xml,'); }
.sticker-box--md .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
background-image: linear-gradient(to right, var(--hl-color-border-light-primary) 100%, transparent 0), linear-gradient(to right, var(--hl-color-border-light-primary) 100%, transparent 0), linear-gradient(to bottom, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to bottom, var(--hl-color-border-light-primary) calc(50% - 20px), transparent 0%, transparent calc(50% + 20px), var(--hl-color-border-light-primary) 0%); }
.sticker-box--md .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
background-image: url('data:image/svg+xml,');
width: 18px;
height: 18px;
background-size: 18px; }
@media (min-width: 768px) {
.sticker-box--md .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
width: 20px;
height: 20px;
background-size: 20px; } }
@media (min-width: 992px) {
.sticker-box--md .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
width: 22px;
height: 22px;
background-size: 22px; } }
.sticker-box--md.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
background-image: linear-gradient(var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to left, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to right, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to top, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0);
background-position: 0% 0px, 100% 0px, 0 0, 0 0, 0 0px;
background-size: 40%, 40%, 100%, 100%, 0%;
background-repeat: no-repeat; }
.sticker-box--md.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
top: -8px; }
@media (min-width: 992px) {
.sticker-box--md.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
top: -10px; } }
.sticker-box--md .sticker-box__label {
font-size: var(--hl-typography-h5-font-size);
line-height: var(--hl-typography-h5-line-height);
letter-spacing: var(--hl-typography-h5-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
margin-top: 0;
margin-bottom: 0; }
.sticker-box--md .sticker-box__heading {
font-size: var(--hl-typography-h2-font-size);
line-height: var(--hl-typography-h2-line-height);
letter-spacing: var(--hl-typography-h2-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
margin-top: 0;
margin-bottom: 0; }
.sticker-box--md.sticker-box--dark .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
background-image: url('data:image/svg+xml,'); }
.sticker-box--sm .sticker-box__block {
padding-left: var(--hl-spacer-md);
padding-right: var(--hl-spacer-md);
padding-top: var(--hl-spacer-xs);
padding-bottom: var(--hl-spacer-xs); }
.sticker-box--sm .sticker-box__block:not(:last-child, :only-child):has(+ .sticker-box__block--plus) {
padding-right: calc(var(--hl-spacer-md) + 8px); }
@media (min-width: 768px) {
.sticker-box--sm .sticker-box__block:not(:last-child, :only-child):has(+ .sticker-box__block--plus) {
padding-right: calc(var(--hl-spacer-md) + 9px); } }
@media (min-width: 992px) {
.sticker-box--sm .sticker-box__block:not(:last-child, :only-child):has(+ .sticker-box__block--plus) {
padding-right: calc(var(--hl-spacer-md) + 10px); } }
.sticker-box--sm .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-left: calc(var(--hl-spacer-md) + 8px);
background-image: linear-gradient(to right, var(--hl-color-border-light-primary) 100%, transparent 0), linear-gradient(to right, var(--hl-color-border-light-primary) 100%, transparent 0), linear-gradient(to bottom, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to bottom, var(--hl-color-border-light-primary) calc(50% - 20px), transparent 0%, transparent calc(50% + 20px), var(--hl-color-border-light-primary) 0%); }
@media (min-width: 768px) {
.sticker-box--sm .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-left: calc(var(--hl-spacer-md) + 9px); } }
@media (min-width: 992px) {
.sticker-box--sm .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-left: calc(var(--hl-spacer-md) + 10px); } }
.sticker-box--sm .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
width: 16px;
height: 16px;
background-size: 16px; }
@media (min-width: 768px) {
.sticker-box--sm .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
width: 18px;
height: 18px;
background-size: 18px; } }
@media (min-width: 992px) {
.sticker-box--sm .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
width: 20px;
height: 20px;
background-size: 20px; } }
.sticker-box--sm.sticker-box--vertical .sticker-box__block:has(+ .sticker-box__block--plus) {
padding-right: var(--hl-spacer-md);
padding-bottom: calc(var(--hl-spacer-xs) + 8px); }
@media (min-width: 768px) {
.sticker-box--sm.sticker-box--vertical .sticker-box__block:has(+ .sticker-box__block--plus) {
padding-bottom: calc(var(--hl-spacer-xs) + 9px); } }
@media (min-width: 992px) {
.sticker-box--sm.sticker-box--vertical .sticker-box__block:has(+ .sticker-box__block--plus) {
padding-bottom: calc(var(--hl-spacer-xs) + 10px); } }
.sticker-box--sm.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-left: var(--hl-spacer-md);
padding-top: calc(var(--hl-spacer-xs) + 8px);
background-image: linear-gradient(var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to left, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to right, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to top, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0);
background-position: 0% 0px, 100% 0px, 0 0, 0 0, 0 0px;
background-size: 40%, 40%, 100%, 100%, 0%;
background-repeat: no-repeat; }
@media (min-width: 768px) {
.sticker-box--sm.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-top: calc(var(--hl-spacer-xs) + 9px); } }
@media (min-width: 992px) {
.sticker-box--sm.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-top: calc(var(--hl-spacer-xs) + 10px); } }
.sticker-box--sm.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
top: -7px; }
@media (min-width: 992px) {
.sticker-box--sm.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
top: -8px; } }
.sticker-box--sm .sticker-box__label {
font-size: var(--hl-typography-h6-font-size);
line-height: var(--hl-typography-h6-line-height);
letter-spacing: var(--hl-typography-h6-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
margin-top: 0;
margin-bottom: 0; }
.sticker-box--sm .sticker-box__heading {
font-size: var(--hl-typography-h3-font-size);
line-height: var(--hl-typography-h3-line-height);
letter-spacing: var(--hl-typography-h3-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
margin-top: 0;
margin-bottom: 0; }
.sticker-box--sm.sticker-box--dark .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
background-image: url('data:image/svg+xml,'); }
.sticker-box--xs .sticker-box__block {
padding-left: var(--hl-spacer-md);
padding-right: var(--hl-spacer-md);
padding-top: var(--hl-spacer-xs);
padding-bottom: var(--hl-spacer-xs); }
.sticker-box--xs .sticker-box__block:not(:last-child, :only-child):has(+ .sticker-box__block--plus) {
padding-right: calc(var(--hl-spacer-md) + 7px); }
@media (min-width: 768px) {
.sticker-box--xs .sticker-box__block:not(:last-child, :only-child):has(+ .sticker-box__block--plus) {
padding-right: calc(var(--hl-spacer-md) + 8px); } }
@media (min-width: 992px) {
.sticker-box--xs .sticker-box__block:not(:last-child, :only-child):has(+ .sticker-box__block--plus) {
padding-right: calc(var(--hl-spacer-md) + 9px); } }
.sticker-box--xs .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-left: calc(var(--hl-spacer-md) + 7px);
background-image: linear-gradient(to right, var(--hl-color-border-light-primary) 100%, transparent 0), linear-gradient(to right, var(--hl-color-border-light-primary) 100%, transparent 0), linear-gradient(to bottom, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to bottom, var(--hl-color-border-light-primary) calc(50% - 20px), transparent 0%, transparent calc(50% + 20px), var(--hl-color-border-light-primary) 0%); }
@media (min-width: 768px) {
.sticker-box--xs .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-left: calc(var(--hl-spacer-md) + 8px); } }
@media (min-width: 992px) {
.sticker-box--xs .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-left: calc(var(--hl-spacer-md) + 9px); } }
.sticker-box--xs .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
width: 14px;
height: 14px;
background-size: 14px; }
@media (min-width: 768px) {
.sticker-box--xs .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
width: 16px;
height: 16px;
background-size: 16px; } }
@media (min-width: 992px) {
.sticker-box--xs .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
width: 18px;
height: 18px;
background-size: 18px; } }
.sticker-box--xs.sticker-box--vertical .sticker-box__block:has(+ .sticker-box__block--plus) {
padding-right: var(--hl-spacer-md);
padding-bottom: calc(var(--hl-spacer-xs) + 7px); }
@media (min-width: 768px) {
.sticker-box--xs.sticker-box--vertical .sticker-box__block:has(+ .sticker-box__block--plus) {
padding-bottom: calc(var(--hl-spacer-xs) + 8px); } }
@media (min-width: 992px) {
.sticker-box--xs.sticker-box--vertical .sticker-box__block:has(+ .sticker-box__block--plus) {
padding-bottom: calc(var(--hl-spacer-xs) + 9px); } }
.sticker-box--xs.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-left: var(--hl-spacer-md);
padding-top: calc(var(--hl-spacer-xs) + 7px);
background-image: linear-gradient(var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to left, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to right, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to top, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0);
background-position: 0% 0px, 100% 0px, 0 0, 0 0, 0 0px;
background-size: 40%, 40%, 100%, 100%, 0%;
background-repeat: no-repeat; }
@media (min-width: 768px) {
.sticker-box--xs.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-top: calc(var(--hl-spacer-xs) + 8px); } }
@media (min-width: 992px) {
.sticker-box--xs.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-top: calc(var(--hl-spacer-xs) + 9px); } }
.sticker-box--xs.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
top: -6px; }
@media (min-width: 992px) {
.sticker-box--xs.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
top: -8px; } }
.sticker-box--xs .sticker-box__label {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-very-decreased);
margin-top: 0;
margin-bottom: 0; }
.sticker-box--xs .sticker-box__heading {
font-size: var(--hl-typography-h4-font-size);
line-height: var(--hl-typography-h4-line-height);
letter-spacing: var(--hl-typography-h4-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
margin-top: 0;
margin-bottom: 0; }
.sticker-box--xs.sticker-box--dark .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
background-image: url('data:image/svg+xml,'); }
.sticker-box--2xs .sticker-box__block {
padding-left: var(--hl-spacer-md);
padding-right: var(--hl-spacer-md);
padding-top: var(--hl-spacer-xs);
padding-bottom: var(--hl-spacer-xs); }
.sticker-box--2xs .sticker-box__block:not(:last-child, :only-child):has(+ .sticker-box__block--plus) {
padding-right: calc(var(--hl-spacer-md) + 6px); }
@media (min-width: 768px) {
.sticker-box--2xs .sticker-box__block:not(:last-child, :only-child):has(+ .sticker-box__block--plus) {
padding-right: calc(var(--hl-spacer-md) + 7px); } }
@media (min-width: 992px) {
.sticker-box--2xs .sticker-box__block:not(:last-child, :only-child):has(+ .sticker-box__block--plus) {
padding-right: calc(var(--hl-spacer-md) + 8px); } }
.sticker-box--2xs .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-left: calc(var(--hl-spacer-md) + 6px);
background-image: linear-gradient(to right, var(--hl-color-border-light-primary) 100%, transparent 0), linear-gradient(to right, var(--hl-color-border-light-primary) 100%, transparent 0), linear-gradient(to bottom, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to bottom, var(--hl-color-border-light-primary) calc(50% - 20px), transparent 0%, transparent calc(50% + 20px), var(--hl-color-border-light-primary) 0%); }
@media (min-width: 768px) {
.sticker-box--2xs .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-left: calc(var(--hl-spacer-md) + 7px); } }
@media (min-width: 992px) {
.sticker-box--2xs .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-left: calc(var(--hl-spacer-md) + 8px); } }
.sticker-box--2xs .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
width: 12px;
height: 12px;
background-size: 12px; }
@media (min-width: 768px) {
.sticker-box--2xs .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
width: 14px;
height: 14px;
background-size: 14px; } }
@media (min-width: 992px) {
.sticker-box--2xs .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
width: 16px;
height: 16px;
background-size: 16px; } }
.sticker-box--2xs.sticker-box--vertical .sticker-box__block:has(+ .sticker-box__block--plus) {
padding-right: var(--hl-spacer-md);
padding-bottom: calc(var(--hl-spacer-xs) + 6px); }
@media (min-width: 768px) {
.sticker-box--2xs.sticker-box--vertical .sticker-box__block:has(+ .sticker-box__block--plus) {
padding-bottom: calc(var(--hl-spacer-xs) + 7px); } }
@media (min-width: 992px) {
.sticker-box--2xs.sticker-box--vertical .sticker-box__block:has(+ .sticker-box__block--plus) {
padding-bottom: calc(var(--hl-spacer-xs) + 8px); } }
.sticker-box--2xs.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-left: var(--hl-spacer-md);
padding-top: calc(var(--hl-spacer-xs) + 6px);
background-image: linear-gradient(var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to left, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to right, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to top, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0);
background-position: 0% 0px, 100% 0px, 0 0, 0 0, 0 0px;
background-size: 40%, 40%, 100%, 100%, 0%;
background-repeat: no-repeat; }
@media (min-width: 768px) {
.sticker-box--2xs.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-top: calc(var(--hl-spacer-xs) + 7px); } }
@media (min-width: 992px) {
.sticker-box--2xs.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-top: calc(var(--hl-spacer-xs) + 8px); } }
.sticker-box--2xs.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
top: -5px; }
@media (min-width: 992px) {
.sticker-box--2xs.sticker-box--vertical .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
top: -7px; } }
.sticker-box--2xs .sticker-box__label {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-very-decreased);
margin-top: 0;
margin-bottom: 0; }
.sticker-box--2xs .sticker-box__heading {
font-size: var(--hl-typography-h5-font-size);
line-height: var(--hl-typography-h5-line-height);
letter-spacing: var(--hl-typography-h5-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
margin-top: 0;
margin-bottom: 0; }
.sticker-box--2xs.sticker-box--dark .sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
background-image: url('data:image/svg+xml,'); }
.sticker-box--last-primary .sticker-box__block:last-child:not(:only-child) {
--sticker-box-background-color: var(--hl-color-bg-light-primary);
--sticker-box-heading: var(--hl-color-core-black);
--sticker-box-label-color: var(--hl-color-core-black);
--sticker-box-background-opacity: 100%; }
.sticker-box--last-primary .sticker-box__block:last-child:not(:only-child) .price-block {
--price-block-color: var(--hl-color-core-black); }
.sticker-box--last-primary.sticker-box--dark .sticker-box__block:last-child:not(:only-child) {
--sticker-box-background-color: var(--hl-color-bg-dark-primary);
--sticker-box-label-color: var(--hl-color-core-black);
--sticker-box-heading: var(--hl-color-core-black); }
.sticker-box--last-primary.sticker-box--dark .sticker-box__block:last-child:not(:only-child) .price-block:not(.price-block--is-old) {
color: var(--sticker-box-heading); }
.sticker-box__block {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: var(--hl-spacer-md);
padding-right: var(--hl-spacer-md);
padding-top: var(--hl-spacer-xs);
padding-bottom: var(--hl-spacer-xs);
background-color: color-mix(in srgb, var(--sticker-box-background-color) var(--sticker-box-background-opacity), transparent);
text-align: center;
background-image: linear-gradient(to left, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to right, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to top, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to bottom, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0);
background-size: 100%, 100%, 100%, 100%, 100%;
background-repeat: no-repeat;
max-width: 17em; }
@media (min-width: 768px) {
.sticker-box__block {
padding-left: var(--hl-spacer-lg);
padding-right: var(--hl-spacer-lg);
padding-top: var(--hl-spacer-md);
padding-bottom: var(--hl-spacer-md); } }
.sticker-box__block:not(:last-child, :only-child) {
background-image: linear-gradient(to left, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to right, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to top, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to bottom, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0);
background-size: 0%, 100%, 100%, 100%;
background-repeat: no-repeat; }
.sticker-box__block:not(:last-child, :only-child):has(+ .sticker-box__block--plus) {
padding-right: calc(var(--hl-spacer-md) + 10px); }
@media (min-width: 768px) {
.sticker-box__block:not(:last-child, :only-child):has(+ .sticker-box__block--plus) {
padding-right: calc(var(--hl-spacer-lg) + 11px); } }
@media (min-width: 992px) {
.sticker-box__block:not(:last-child, :only-child):has(+ .sticker-box__block--plus) {
padding-right: calc(var(--hl-spacer-lg) + 12px); } }
.sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-left: calc(var(--hl-spacer-md) + 10px);
background-image: linear-gradient(to right, var(--hl-color-border-light-primary) 100%, transparent 0), linear-gradient(to right, var(--hl-color-border-light-primary) 100%, transparent 0), linear-gradient(to bottom, var(--hl-color-border-light-primary) var(--hl-border-width-default), transparent 0), linear-gradient(to bottom, var(--hl-color-border-light-primary) calc(50% - 20px), transparent 0%, transparent calc(50% + 20px), var(--hl-color-border-light-primary) 0%);
background-position: top left, bottom left, right top, left center;
background-size: 100% var(--hl-border-width-default), 100% var(--hl-border-width-default), var(--hl-border-width-default) 100%, var(--hl-border-width-default) 100%;
background-repeat: no-repeat; }
@media (min-width: 768px) {
.sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-left: calc(var(--hl-spacer-lg) + 11px); } }
@media (min-width: 992px) {
.sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus {
padding-left: calc(var(--hl-spacer-lg) + 12px); } }
.sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
content: "";
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
position: absolute;
top: 50%;
bottom: 50%;
left: 1px;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-size: 20px; }
@media (min-width: 768px) {
.sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
width: 22px;
height: 22px;
background-size: 22px; } }
@media (min-width: 992px) {
.sticker-box__block:not(:last-child, :only-child).sticker-box__block--plus:before {
width: 24px;
height: 24px;
background-size: 24px; } }
.sticker-box__label {
font-size: var(--hl-typography-h4-font-size);
line-height: var(--hl-typography-h4-line-height);
letter-spacing: var(--hl-typography-h4-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
color: var(--sticker-box-label-color);
margin-top: 0;
margin-bottom: 0; }
.sticker-box__heading {
font-size: var(--hl-typography-h1-font-size);
line-height: var(--hl-typography-h1-line-height);
letter-spacing: var(--hl-typography-h1-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-very-decreased);
color: var(--sticker-box-heading);
margin-top: 0;
margin-bottom: 0; }
.sticker-box__price {
display: flex;
justify-content: center; }
@media (forced-colors: active) {
.sticker-box {
forced-color-adjust: none; } }
.subnav {
background-color: var(--hl-color-bg-light-default);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); }
.subnav__nav {
background-image: linear-gradient(to right, white, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), white), linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0));
background-position: left center, right center, left center, right center;
background-repeat: no-repeat;
background-size: 20px 100%, 20px 100%, 20px 100%, 20px 100%;
background-attachment: local, local, scroll, scroll;
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
padding: var(--hl-spacer-xs) 0; }
@media (min-width: 992px) {
.subnav__nav {
background-image: none;
width: initial;
margin-left: initial; } }
@media (min-width: 1200px) {
.subnav__nav {
padding: var(--hl-spacer-md) 0; }
.subnav__nav__item:first-child {
margin-left: auto; }
.subnav__nav__item:last-child {
margin-right: auto; } }
.subnav__nav__item {
align-items: center;
flex-direction: column;
gap: var(--hl-spacer-xs);
scroll-snap-align: start;
max-width: initial;
min-width: initial;
font-size: var(--hl-typography-p4-font-size);
line-height: var(--hl-typography-p4-line-height);
letter-spacing: var(--hl-typography-p4-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular); }
.subnav__nav__item .hl-icon {
margin: initial; }
.hl-tag {
--tag-radius: var(--hl-border-radius-full);
--tag-bg-color: var(--hl-color-supporting-yellow);
--tag-text-color: var(--hl-color-button-fg-white-standby);
align-items: center;
border-radius: var(--tag-radius);
cursor: default;
display: inline-flex;
height: var(--tag-height); }
.hl-tag .hl-icon,
.hl-tag .btn .hl-icon {
color: currentColor;
height: var(--tag-iconsize);
width: var(--tag-iconsize); }
.hl-tag .btn, .hl-tag .charger-btn, .hl-tag .subnav__nav__item {
padding: 0 var(--padding-hack) 0 0;
width: var(--tag-height);
height: var(--tag-height);
border-top-right-radius: var(--tag-radius);
border-bottom-right-radius: var(--tag-radius); }
.hl-tag__container {
align-items: center;
background-color: var(--tag-bg-color);
border-radius: var(--tag-radius);
color: var(--tag-text-color);
display: inline-flex;
gap: var(--tag-exterior-gap);
height: 100%;
max-width: 100%;
padding-left: var(--tag-padding-x);
padding-right: var(--tag-padding-x);
width: -moz-fit-content;
width: fit-content; }
.hl-tag__label {
white-space: nowrap; }
.hl-tag__label a, .hl-tag__label button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
background-color: transparent;
font: inherit;
color: inherit;
-webkit-text-decoration-color: transparent;
text-decoration-color: transparent;
outline: none !important; }
.hl-tag:has(.hl-tag__label :is(a, button)):focus-within {
outline: var(--hl-border-width-default) solid var(--tag-text-color);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--hl-color-core-white), 0 0 0 6px var(--tag-bg-color); }
.hl-tag--sm {
--tag-padding-x: 8px;
--tag-padding-y: 2px;
--tag-height: 20px;
--tag-exterior-gap: 2px;
--tag-iconsize: 12px;
--padding-hack: 2px;
font-size: var(--hl-font-size-xs);
line-height: var(--hl-typography-line-height-decreased);
font-weight: var(--hl-typography-font-weight-body-bold);
letter-spacing: var(--hl-typography-letter-spacing-default); }
.hl-tag--md {
--tag-padding-x: 12px;
--tag-padding-y: 4px;
--tag-height: 26px;
--tag-exterior-gap: 4px;
--tag-iconsize: 14px;
--padding-hack: 3px;
font-size: var(--hl-font-size-sm);
line-height: var(--hl-typography-line-height-decreased);
font-weight: var(--hl-typography-font-weight-body-bold);
letter-spacing: var(--hl-typography-letter-spacing-default); }
.hl-tag--lg {
--tag-padding-x: 12px;
--tag-padding-y: 8px;
--tag-height: 36px;
--tag-exterior-gap: 8px;
--tag-iconsize: 16px;
--padding-hack: 3px;
font-size: var(--hl-font-size-md);
line-height: var(--hl-typography-line-height-decreased);
font-weight: var(--hl-typography-font-weight-body-bold);
letter-spacing: var(--hl-typography-letter-spacing-default); }
.hl-tag--xl {
--tag-padding-x: 16px;
--tag-padding-y: 12px;
--tag-height: 52px;
--tag-exterior-gap: 12px;
--tag-iconsize: 24px;
--padding-hack: 4px;
font-size: var(--hl-font-size-2xl);
line-height: var(--hl-typography-line-height-decreased);
font-weight: var(--hl-typography-font-weight-body-bold);
letter-spacing: var(--hl-typography-letter-spacing-default); }
.hl-tag--promotional {
--tag-bg-color: var(--hl-color-supporting-yellow);
--tag-text-color: var(--hl-color-button-fg-white-standby); }
.hl-tag--promotional-secondary {
--tag-bg-color: var(--hl-color-button-bg-light-black-standby);
--tag-text-color: var(--hl-color-button-fg-light-black-standby); }
.bg-dark .hl-tag--promotional-secondary {
--tag-bg-color: var(--hl-color-button-bg-white-standby);
--tag-text-color: var(--hl-color-button-fg-white-standby); }
.hl-tag--functional {
--tag-bg-color: var(--hl-color-bg-light-muted);
--tag-text-color: var(--hl-color-button-fg-white-standby); }
.hl-tag--functional-success {
--tag-bg-color: var(--hl-color-functional-success);
--tag-text-color: var(--hl-color-button-fg-white-standby); }
.hl-tag--functional-danger {
--tag-bg-color: var(--hl-color-functional-danger);
--tag-text-color: var(--hl-color-button-fg-light-black-standby); }
.hl-tag--functional-warning {
--tag-bg-color: var(--hl-color-functional-warning);
--tag-text-color: var(--hl-color-button-fg-white-standby); }
.hl-tag--functional-info {
--tag-bg-color: var(--hl-color-functional-info);
--tag-text-color: var(--hl-color-button-fg-white-standby); }
.hl-tag--interactive, .hl-tag--interactive-secondary, .hl-tag--interactive-orange {
gap: var(--tag-interior-gap); }
.hl-tag--interactive .hl-tag__container, .hl-tag--interactive-secondary .hl-tag__container, .hl-tag--interactive-orange .hl-tag__container {
border: var(--tag-border-width) solid var(--tag-border-color);
border-right: 0;
border-top-right-radius: var(--hl-border-width-none);
border-bottom-right-radius: var(--hl-border-width-none); }
.hl-tag--interactive {
--tag-radius: var(--hl-border-radius-full);
--tag-border-width: var(--hl-border-width-default);
--tag-border-color: var(--hl-color-border-light-secondary);
--tag-interior-gap: 0;
--tag-gap-color: var(--tag-border-color);
--tag-bg-color: transparent;
--tag-text-color: var(--hl-color-button-fg-white-standby); }
.bg-dark .hl-tag--interactive {
--tag-border-color: var(--hl-color-border-dark-secondary);
--tag-text-color: var(--hl-color-button-fg-light-black-standby); }
.hl-tag--interactive-secondary {
--tag-border-width: var(--hl-border-width-none);
--tag-interior-gap: var(--hl-spacer-3xs);
--tag-gap-color: var(--hl-color-border-dark-secondary);
--tag-bg-color: var(--hl-color-button-bg-light-black-standby);
--tag-text-color: var(--hl-color-button-fg-light-black-standby); }
.hl-tag--interactive-secondary .hl-tag__container {
border: var(--tag-border-width) solid var(--tag-border-color); }
.bg-dark .hl-tag--interactive-secondary {
--tag-gap-color: var(--hl-color-border-light-secondary);
--tag-bg-color: var(--hl-color-button-bg-white-standby);
--tag-text-color: var(--hl-color-button-fg-white-standby); }
.hl-tag--interactive-orange {
--tag-border-width: var(--hl-border-width-none);
--tag-interior-gap: var(--hl-spacer-3xs);
--tag-gap-color: var(--hl-color-border-light-primary);
--tag-bg-color: var(--hl-color-button-bg-light-primary-standby);
--tag-text-color: var(--hl-color-button-fg-white-standby); }
.hl-tag[aria-disabled] {
--tag-border-color: var(--hl-color-border-light-secondary);
--tag-gap-color: var(--tag-border-color);
--tag-bg-color: var(--hl-color-button-bg-light-disabled);
--tag-text-color: var(--hl-color-button-fg-light-black-standby);
opacity: var(--hl-opacity-disabled); }
.hl-tag[aria-disabled] .btn, .hl-tag[aria-disabled] .charger-btn, .hl-tag[aria-disabled] .subnav__nav__item {
background-color: var(--tag-bg-color);
color: var(--tag-text-color);
border-color: transparent;
pointer-events: none; }
.hl-tag[aria-disabled].hl-tag--interactive {
--tag-border-color: var(--hl-color-button-border-light-disabled);
--tag-gap-color: var(--tag-border-color);
--tag-bg-color: transparent;
--tag-text-color: var(--hl-color-button-border-light-disabled); }
.hl-tag[aria-disabled].hl-tag--interactive .btn, .hl-tag[aria-disabled].hl-tag--interactive .charger-btn, .hl-tag[aria-disabled].hl-tag--interactive .subnav__nav__item {
border-color: var(--tag-border-color); }
.bg-dark .hl-tag[aria-disabled] {
--tag-border-color: var(--hl-color-border-dark-secondary);
--tag-bg-color: var(--hl-color-button-bg-dark-disabled);
--tag-text-color: var(--hl-color-button-fg-white-standby); }
.bg-dark .hl-tag[aria-disabled].hl-tag--interactive {
--tag-border-color: var(--hl-color-button-border-dark-disabled);
--tag-bg-color: transparent;
--tag-text-color: var(--hl-color-button-border-dark-disabled); }
@media (forced-colors: active) {
.hl-tag__container {
color: CanvasText;
border: var(--hl-border-width-default) solid CanvasText !important; } }
.tariff-links {
position: relative;
display: flex;
flex-direction: column; }
.tariff-links__header {
font-weight: var(--hl-typography-font-weight-heading-bold);
font-size: var(--hl-font-size-lg);
color: var(--hl-color-fg-light-important);
padding: var(--hl-spacer-xs) var(--hl-spacer-md); }
@media (min-width: 768px) {
.tariff-links__header {
font-size: var(--hl-font-size-2xl); } }
.tariff-links__body hl-link-icon {
display: block;
padding: var(--hl-spacer-sm);
border-bottom: var(--hl-border-width-default) solid var(--hl-color-border-light-default); }
.tariff-links--type-01 .tariff-links__header {
background-color: var(--hl-color-supporting-green-light); }
.tariff-links--type-02 .tariff-links__header {
background-color: var(--hl-color-supporting-purple-light); }
.tariff-links--type-03 .tariff-links__header {
background-color: var(--hl-color-supporting-blue-light); }
.treeview-folder {
--treeview-folder-color: var(--hl-color-fg-light-important); }
.treeview-folder::-webkit-details-marker {
display: none; }
.treeview-folder__container {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
height: 100%;
max-height: 300px;
overflow: auto;
padding: var(--hl-spacer-lg) var(--hl-spacing-grid);
position: relative; }
.treeview-folder__indicator {
transform: rotate(-90deg); }
.treeview-folder[open] > .treeview-folder__summary .treeview-folder__indicator {
transform: rotate(0deg); }
.treeview-folder__summary {
align-items: center;
color: var(--treeview-folder-color);
cursor: pointer;
display: inline-flex;
font-weight: var(--hl-typography-font-weight-body-bold);
gap: var(--hl-spacing-atom);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
.treeview-folder__summary:not(.disabled):focus-visible, .treeview-folder__summary:not(.disabled):has(input):focus-within {
animation: focus-outline-animation var(--hl-transition-normal) forwards; }
.treeview-folder__summary.disabled:focus-visible, .treeview-folder__summary.disabled:focus-within {
outline: 0 !important; }
.treeview-folder__summary:has(input:checked) {
background: var(--hl-color-bg-light-ultra-muted); }
.treeview-folder__content {
padding-left: calc(var(--hl-spacer-md) + var(--hl-spacing-atom) + (var(--hl-spacer-lg) - var(--hl-spacer-md)) / 2); }
.treeview-folder__radio {
display: none; }
.treeview-folder__radio + .treeview-folder__label {
align-items: center;
color: var(--treeview-folder-color);
cursor: pointer;
display: flex;
gap: var(--hl-spacing-atom);
margin-bottom: 0;
padding-right: var(--hl-spacing-grid); }
.treeview-folder__radio + .treeview-folder__label:hover {
--treeview-folder-color: var(--hl-color-fg-light-interaction-hover); }
.treeview-folder__radio:checked + .treeview-folder__label {
--treeview-folder-color: var(--hl-color-fg-light-interaction-active); }
.treeview-folder:has(> .treeview-folder__content:empty) .treeview-folder__indicator {
opacity: 0; }
.hl-stepper {
display: inline-grid;
grid-auto-flow: column; }
.hl-stepper input::-webkit-inner-spin-button,
.hl-stepper input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0; }
.hl-stepper input[type=number] {
-moz-appearance: textfield !important;
-webkit-appearance: textfield !important;
appearance: textfield !important;
all: unset;
display: grid;
text-align: center;
border: var(--hl-border-width-default) solid var(--hl-color-button-bg-light-black-standby);
font-size: var(--hl-typography-p4-font-size);
line-height: var(--hl-typography-p4-line-height);
letter-spacing: var(--hl-typography-p4-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
width: 4ch; }
.apple-card {
position: relative;
display: flex;
flex-direction: column;
word-wrap: break-word;
background-color: var(--hl-color-bg-light-default);
border: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
border-radius: var(--hl-border-radius-default); }
.apple-card [aria-expanded] svg {
transition: transform 0.3s, color 0.3s; }
.apple-card [aria-expanded=false] svg {
transform: rotate(90deg);
color: var(--hl-color-fg-light-muted); }
.apple-card [aria-expanded=true] svg {
transform: rotate(270deg);
color: var(--hl-color-fg-light-primary); }
@media (forced-colors: active) {
.apple-card svg {
--hl-color-fg-light-muted: currentColor;
--hl-color-fg-light-primary: currentColor; } }
.apple-card__body {
padding: var(--hl-spacer-lg) var(--hl-spacer-lg) 0; }
.apple-card__body__icon {
height: var(--hl-spacer-3xl);
width: var(--hl-spacer-3xl);
margin: 0 auto; }
.apple-card__body__title {
margin-bottom: var(--hl-spacer-lg);
text-align: center; }
.apple-card__body__text {
font-size: var(--hl-font-size-md);
font-weight: var(--hl-typography-font-weight-body-bold); }
.apple-card__body__img {
display: flex;
justify-content: center;
margin-bottom: var(--hl-spacer-md); }
.wrap-selectable {
display: flex;
flex-direction: column;
height: 100%; }
.wrap-selectable .selectable + .btn, .wrap-selectable .selectable + .charger-btn, .wrap-selectable .selectable + .subnav__nav__item {
z-index: 1; }
.wrap-selectable--relative {
position: relative; }
.wrap-selectable--relative .selectable__action {
position: absolute;
top: 0;
right: 0;
padding: var(--hl-spacer-md); }
.wrap-selectable--relative .selectable__title {
margin-right: var(--hl-spacer-lg); }
.list-selectable__item {
padding-top: var(--hl-spacer-sm);
padding-bottom: var(--hl-spacer-sm);
border-top: var(--hl-border-width-xs) solid var(--hl-color-border-light-default); }
.list-selectable__item:first-child {
padding-top: 0;
border-top: 0; }
.list-selectable__item:last-child {
padding-bottom: 0; }
.list-selectable__item .selectable {
padding-left: var(--hl-spacer-sm);
padding-right: var(--hl-spacer-sm); }
.selectable {
--input-size: 20px;
--container-gap: 0 var(--hl-spacer-xs);
--container-padding: var(--hl-spacer-xs);
--border-type: solid;
margin-bottom: 0;
width: 100%;
height: 100%;
display: block; }
.selectable--dashed {
--border-type: dashed; }
.selectable--dashed input:checked + .selectable__container {
border-style: solid; }
.selectable--dashed .selectable__container .selectable__header .selectable__title {
color: var(--hl-color-fg-light-muted); }
.selectable--dashed .selectable__container .selectable__header .hl-tag--promotional {
--tag-bg-color: var(--hl-color-bg-light-muted); }
.selectable--dashed .selectable__container .selectable__body .price-block,
.selectable--dashed .selectable__container .selectable__body .selectable__text {
color: var(--hl-color-fg-light-muted); }
.selectable--dashed.selectable--dark .selectable__container .selectable__header .selectable__title {
color: var(--hl-color-fg-dark-muted); }
.selectable--dashed.selectable--dark .selectable__container .selectable__body .price-block,
.selectable--dashed.selectable--dark .selectable__container .selectable__body .selectable__text {
color: var(--hl-color-fg-dark-muted); }
.selectable--custom-icon-size .selectable__icon {
width: unset;
height: unset; }
.selectable--custom-icon-size .selectable__icon .hl-icon {
width: unset;
height: unset; }
.selectable__icon {
--icon-size: 20px;
width: var(--icon-size);
height: var(--icon-size);
margin-bottom: var(--hl-spacer-2xs); }
.selectable__icon .hl-icon {
display: block;
width: var(--icon-size);
height: var(--icon-size); }
.selectable__color {
border-radius: var(--hl-border-radius-full);
box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.1);
margin-bottom: var(--hl-spacer-xs); }
.selectable__color::after {
content: "";
position: absolute;
height: inherit;
width: inherit;
background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 59%, rgba(255, 255, 255, 0.2) 60%, rgba(255, 255, 255, 0) 100%); }
.selectable__header {
display: flex;
flex-direction: column;
justify-content: center;
grid-area: selectable-header; }
.selectable__header span:not(.selectable__body, .base-tag__container, .hl-tag__container) {
display: block; }
.selectable__container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
grid-template-areas: "selectable-header" "selectable-body";
gap: var(--container-gap);
padding: var(--container-padding);
border: var(--hl-border-width-default) var(--border-type) var(--color-border-container);
border-radius: var(--hl-border-radius-default);
transition: all var(--hl-transition-normal);
background-color: var(--color-bg-container, transparent);
height: 100%;
cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
.selectable__container {
transition: none; } }
.selectable__container__input {
position: relative;
grid-area: selectable-icon;
height: var(--input-size);
width: var(--input-size);
border: var(--hl-border-width-default) solid var(--color-input-border-state);
background-color: var(--color-input-state);
transition: all var(--hl-transition-normal); }
@media (prefers-reduced-motion: reduce) {
.selectable__container__input {
transition: none; } }
.selectable__container__input hl-icon {
position: absolute;
inset: 0;
max-width: var(--input-size);
max-height: var(--input-size);
visibility: hidden; }
.selectable__container__input hl-icon .hl-icon {
display: block;
color: var(--color-input-dot-state);
transition: all var(--hl-transition-normal); }
@media (prefers-reduced-motion: reduce) {
.selectable__container__input hl-icon .hl-icon {
transition: none; } }
.selectable__title {
font-size: var(--hl-typography-p2-font-size);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-default);
margin-top: 0;
margin-bottom: var(--hl-spacer-2xs); }
.selectable__subtitle {
font-size: var(--hl-typography-p3-font-size);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-default);
margin-top: 0;
margin-bottom: var(--hl-spacer-xs); }
.selectable__text {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular); }
.selectable__body {
display: flex;
flex-direction: column;
grid-area: selectable-body; }
.selectable__header-figure {
--color-figcaption: var(--hl-color-text-light-fg);
margin-bottom: 0; }
.selectable__header-figure img {
width: 100%;
height: 96px;
-o-object-fit: cover;
object-fit: cover; }
.selectable__header-figure figcaption {
font-size: var(--hl-typography-p4-font-size);
line-height: var(--hl-typography-p4-line-height);
letter-spacing: var(--hl-typography-p4-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
color: var(--color-figcaption);
margin-top: var(--hl-spacing-subatom);
text-overflow: ellipsis;
overflow: hidden; }
.selectable__header-figure--caption-nowrap figcaption {
white-space: nowrap; }
.selectable.selectable--disabled input + .selectable__container .selectable__header-figure,
.selectable input[disabled] + .selectable__container .selectable__header-figure {
--color-figcaption: var(--hl-color-text-light-disabled); }
.selectable.selectable--disabled input + .selectable__container .selectable__header-figure img,
.selectable input[disabled] + .selectable__container .selectable__header-figure img {
filter: opacity(0.8); }
.selectable .base-tag,
.selectable hl-tag {
margin-bottom: var(--hl-spacer-xs);
cursor: inherit; }
.selectable .price-block {
margin-bottom: var(--hl-spacer-2xs); }
.selectable hl-price-block:only-child .price-block {
margin-bottom: 0; }
.selectable--body-to-bottom .selectable__body .selectable__text:first-of-type {
margin-top: auto; }
.selectable--xl {
--container-padding: var(--hl-spacer-md);
--container-gap: 0 var(--hl-spacer-md); }
.selectable--xl .selectable__title {
font-size: var(--hl-typography-p1-font-size);
margin-bottom: var(--hl-spacer-xs); }
.selectable--xl .selectable__subtitle {
font-size: var(--hl-typography-p2-font-size);
margin-bottom: var(--hl-spacer-sm); }
.selectable--xl .base-tag,
.selectable--xl hl-tag {
margin-bottom: var(--hl-spacer-sm); }
.selectable--xl .selectable__icon {
--icon-size: 24px; }
.selectable--airless {
--container-padding: var(--hl-spacer-none); }
.selectable--airless .selectable__container {
border: var(--hl-border-width-none); }
.selectable--input-right .selectable__container {
grid-template-columns: 1fr var(--input-size);
grid-template-areas: "selectable-header selectable-icon" "selectable-body selectable-body"; }
.selectable--input-left .selectable__container {
grid-template-columns: var(--input-size) 1fr;
grid-template-areas: "selectable-icon selectable-header" ". selectable-body"; }
.selectable--radio {
--input-size: 24px; }
.selectable--radio .selectable__container__input {
position: relative;
border-radius: 100%; }
.selectable--radio .selectable__container__input hl-icon {
display: none; }
.selectable--radio .selectable__container__input::after {
content: "";
background-color: var(--color-input-dot-state);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-image: var(--hl-icon-form-radio-indicator);
mask-image: var(--hl-icon-form-radio-indicator);
height: calc(var(--hl-spacer-md) - var(--hl-border-width-default));
width: calc(var(--hl-spacer-md) - var(--hl-border-width-default));
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute; }
.selectable--checkbox {
--input-size: 20px; }
.selectable--checkbox .selectable__container__input hl-icon {
display: none; }
.selectable--checkbox .selectable__container__input::after {
content: "";
background-color: var(--color-input-dot-state);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-image: var(--hl-icon-form-indicator);
mask-image: var(--hl-icon-form-indicator);
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center; }
.selectable--special {
--input-size: 24px; }
.selectable--special .selectable__container__input {
border-radius: 100%; }
.selectable--special .selectable__container__input hl-icon {
display: none; }
.selectable--special .selectable__container__input::after {
content: "";
background-color: var(--color-input-dot-state);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-image: var(--hl-icon-form-indicator);
mask-image: var(--hl-icon-form-indicator);
height: 100%;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute; }
.selectable--special input:checked + .selectable__container hl-icon {
visibility: visible; }
.selectable--height-auto {
height: auto; }
.selectable__container :only-child .selectable__title:only-child {
margin-bottom: 0; }
.selectable__container *:last-child:not(.hydrated) *:last-child {
margin-bottom: 0; }
.selectable input:not(:disabled):focus-visible + .selectable__container,
.selectable input:not(:disabled):has(input):focus-within + .selectable__container {
animation: focus-outline-animation var(--hl-transition-normal) forwards; }
.selectable:not(.selectable--dark) input:not(:checked):focus + .selectable__container {
--color-border-container: var(--hl-color-border-light-interaction-hover);
--color-input-state: transparent;
--color-input-border-state: var(--hl-color-border-light-interaction-hover);
--color-input-dot-state: transparent;
--border-type: solid; }
.selectable:not(.selectable--dark) input:not(:checked) + .selectable__container {
--color-border-container: var(--hl-color-border-light-interaction-standby);
--color-input-state: transparent;
--color-input-border-state: var(--hl-color-border-light-interaction-standby);
--color-input-dot-state: transparent; }
.selectable:not(.selectable--dark) input:not(:checked) + .selectable__container:hover {
--color-border-container: var(--hl-color-border-light-interaction-hover);
--color-input-state: transparent;
--color-input-border-state: var(--hl-color-border-light-interaction-hover);
--color-input-dot-state: transparent;
--border-type: solid; }
.selectable:not(.selectable--dark) input:not(:checked) + .selectable__container:active {
--color-border-container: var(--hl-color-border-light-interaction-pressed);
--color-input-state: transparent;
--color-input-border-state: var(--hl-color-border-light-interaction-pressed);
--color-input-dot-state: var(--hl-color-border-light-interaction-pressed); }
.selectable:not(.selectable--dark) input:checked + .selectable__container {
--color-border-container: var(--hl-color-border-light-interaction-active);
--color-input-state: var(--hl-color-form-interaction-bg-light-active);
--color-input-dot-state: var(--hl-color-form-interaction-fg-light-active);
--color-input-border-state: var(--hl-color-form-interaction-bg-light-active);
--color-bg-container: var(--hl-color-bg-light-default); }
.selectable:not(.selectable--dark) input:checked + .selectable__container:hover {
--color-input-state: var(--hl-color-form-interaction-bg-light-focus);
--color-input-border-state: var(--hl-color-form-interaction-bg-light-hover);
--color-input-dot-state: var(--hl-color-form-interaction-fg-light-hover); }
.selectable:not(.selectable--dark) input:checked + .selectable__container:active {
--color-input-state: var(--hl-color-form-interaction-bg-light-pressed);
--color-input-border-state: var(--hl-color-form-interaction-bg-light-pressed);
--color-input-dot-state: var(--hl-color-form-interaction-fg-light-pressed); }
.selectable:not(.selectable--dark) input:checked + .selectable__container .selectable__container__input hl-icon .hl-icon {
color: var(--color-input-dot-state); }
.selectable:not(.selectable--dark).selectable--disabled input:not(:checked) + .selectable__container,
.selectable:not(.selectable--dark) input[disabled]:not(:checked) + .selectable__container {
--color-bg-container: var(--hl-color-bg-light-ultra-muted);
--color-border-container: var(--hl-color-border-light-very-muted);
--color-input-state: var(--hl-color-form-light-disabled-bg);
--color-input-border-state: var(--hl-color-form-border-light-disabled);
pointer-events: none;
cursor: default; }
.selectable:not(.selectable--dark).selectable--disabled input:checked + .selectable__container,
.selectable:not(.selectable--dark) input[disabled]:checked + .selectable__container {
--color-bg-container: var(--hl-color-bg-light-ultra-muted);
--color-border-container: var(--hl-color-border-light-very-muted);
--color-input-state: var(--hl-color-form-bg-light-disabled);
--color-input-border-state: var(--hl-color-form-border-light-disabled);
--color-input-dot-state: var(--hl-color-form-fg-light-disabled);
pointer-events: none;
cursor: default; }
.selectable:not(.selectable--dark).selectable--disabled input + .selectable__container .selectable__title,
.selectable:not(.selectable--dark) input[disabled] + .selectable__container .selectable__title {
color: var(--hl-color-fg-light-disabled); }
.selectable:not(.selectable--dark).selectable--disabled input + .selectable__container .selectable__subtitle,
.selectable:not(.selectable--dark) input[disabled] + .selectable__container .selectable__subtitle {
color: var(--hl-color-fg-light-very-muted); }
.selectable:not(.selectable--dark).selectable--disabled input + .selectable__container .selectable__subtitle.text-primary,
.selectable:not(.selectable--dark) input[disabled] + .selectable__container .selectable__subtitle.text-primary {
color: var(--hl-color-fg-light-very-muted) !important; }
.selectable:not(.selectable--dark).selectable--disabled input + .selectable__container .selectable__text,
.selectable:not(.selectable--dark) input[disabled] + .selectable__container .selectable__text {
color: var(--hl-color-fg-light-disabled); }
.selectable:not(.selectable--dark).selectable--disabled input + .selectable__container .selectable__icon .hl-icon svg path,
.selectable:not(.selectable--dark) input[disabled] + .selectable__container .selectable__icon .hl-icon svg path {
fill: var(--hl-color-fg-light-disabled); }
.selectable:not(.selectable--dark).selectable--disabled input + .selectable__container .price-block,
.selectable:not(.selectable--dark) input[disabled] + .selectable__container .price-block {
color: var(--hl-color-fg-light-disabled); }
.selectable:not(.selectable--dark).selectable--special.selectable--disabled input:not(:checked) + .selectable__container,
.selectable:not(.selectable--dark).selectable--special input[disabled]:not(:checked) + .selectable__container {
--color-bg-container: var(--hl-color-bg-light-ultra-muted);
--color-border-container: var(--hl-color-border-light-interaction-standby);
--color-input-state: var(--hl-color-form-bg-light-disabled);
--color-input-border-state: var(--hl-color-border-light-interaction-standby);
--color-input-dot-state: transparent; }
.selectable:not(.selectable--dark).selectable--special.selectable--disabled input:checked + .selectable__container,
.selectable:not(.selectable--dark).selectable--special input[disabled]:checked + .selectable__container {
--color-bg-container: var(--hl-color-bg-light-ultra-muted);
--color-border-container: var(--hl-color-border-light-interaction-standby);
--color-input-state: var(--hl-color-form-light-disabled-bg);
--color-input-border-state: var(--hl-color-border-light-interaction-standby);
--color-input-dot-state: var(--hl-color-form-fg-light-disabled); }
.selectable:not(.selectable--dark).selectable--special input:not(:checked) + .selectable__container {
--color-border-container: var(--hl-color-border-light-interaction-standby);
--color-input-state: transparent;
--color-input-border-state: var(--hl-color-border-light-interaction-standby);
--color-input-dot-state: transparent; }
.selectable:not(.selectable--dark).selectable--special input:not(:checked) + .selectable__container:hover {
--color-border-container: var(--hl-color-border-light-interaction-hover);
--color-input-state: transparent;
--color-input-border-state: var(--hl-color-border-light-interaction-hover);
--color-input-dot-state: transparent;
--border-type: solid; }
.selectable:not(.selectable--dark).selectable--special input:not(:checked) + .selectable__container:active {
--color-border-container: var(--hl-color-border-light-interaction-pressed);
--color-input-state: transparent;
--color-input-border-state: var(--hl-color-border-light-interaction-pressed);
--color-input-dot-state: var(--hl-color-border-light-interaction-pressed); }
.selectable:not(.selectable--dark).selectable--special input:checked + .selectable__container {
--color-input-state: var(--hl-color-functional-success);
--color-input-dot-state: var(--hl-color-core-white);
--color-input-border-state: var(--hl-color-border-light-success); }
.selectable:not(.selectable--dark).selectable--special input:checked + .selectable__container:hover {
--color-input-state: var(--hl-color-functional-success);
--color-input-dot-state: var(--hl-color-core-white);
--color-input-border-state: var(--hl-color-border-light-success); }
.selectable:not(.selectable--dark).selectable--special input:checked + .selectable__container:active {
--color-input-state: var(--hl-color-functional-success);
--color-input-dot-state: var(--hl-color-core-white);
--color-input-border-state: var(--hl-color-border-light-success); }
.selectable:not(.selectable--dark) .selectable__title {
color: var(--hl-color-fg-light-important); }
.selectable:not(.selectable--dark) .selectable__subtitle {
color: var(--hl-color-fg-light-muted); }
.selectable:not(.selectable--dark) .selectable__text {
color: var(--hl-color-fg-light-default); }
.selectable--dark input:not(:checked):focus + .selectable__container {
--color-border-container: var(--hl-color-border-dark-interaction-hover);
--color-input-state: transparent;
--color-input-border-state: var(--hl-color-border-dark-interaction-hover);
--color-input-dot-state: transparent;
--border-type: solid; }
.selectable--dark input:not(:checked) + .selectable__container {
--color-border-container: var(--hl-color-border-dark-interaction-standby);
--color-input-state: transparent;
--color-input-border-state: var(--hl-color-border-dark-interaction-standby);
--color-input-dot-state: transparent; }
.selectable--dark input:not(:checked) + .selectable__container:hover {
--color-border-container: var(--hl-color-border-dark-interaction-hover);
--color-input-state: transparent;
--color-input-border-state: var(--hl-color-border-dark-interaction-hover);
--color-input-dot-state: transparent;
--border-type: solid; }
.selectable--dark input:not(:checked) + .selectable__container:active {
--color-border-container: var(--hl-color-border-dark-interaction-pressed);
--color-input-state: transparent;
--color-input-border-state: var(--hl-color-border-dark-interaction-pressed);
--color-input-dot-state: var(--hl-color-border-dark-interaction-pressed); }
.selectable--dark input:checked + .selectable__container {
--color-border-container: var(--hl-color-border-light-interaction-active);
--color-input-state: var(--hl-color-form-interaction-bg-light-active);
--color-input-dot-state: var(--hl-color-form-interaction-fg-light-active);
--color-input-border-state: var(--hl-color-form-interaction-bg-light-active);
--color-bg-container: var(--hl-color-bg-dark-default); }
.selectable--dark input:checked + .selectable__container:hover {
--color-input-state: var(--hl-color-form-interaction-bg-light-focus);
--color-input-border-state: var(--hl-color-form-interaction-bg-light-hover);
--color-input-dot-state: var(--hl-color-form-interaction-fg-light-hover); }
.selectable--dark input:checked + .selectable__container:active {
--color-input-state: var(--hl-color-form-interaction-bg-light-pressed);
--color-input-border-state: var(--hl-color-form-interaction-bg-light-pressed);
--color-input-dot-state: var(--hl-color-form-interaction-fg-light-pressed); }
.selectable--dark input:checked + .selectable__container .selectable__container__input hl-icon .hl-icon {
color: var(--color-input-dot-state); }
.selectable--dark.selectable--disabled input:not(:checked) + .selectable__container,
.selectable--dark input[disabled]:not(:checked) + .selectable__container {
--color-border-container: var(--hl-color-border-dark-very-muted);
--color-input-state: var(--hl-color-form-bg-dark-disabled);
--color-input-border-state: var(--hl-color-form-border-dark-disabled);
--color-bg-container: var(--hl-color-bg-dark-ultra-muted);
pointer-events: none; }
.selectable--dark.selectable--disabled input:checked + .selectable__container,
.selectable--dark input[disabled]:checked + .selectable__container {
--color-bg-container: var(--hl-color-bg-dark-ultra-muted);
--color-border-container: var(--hl-color-border-dark-very-muted);
--color-input-state: var(--hl-color-form-bg-dark-disabled);
--color-input-border-state: var(--hl-color-form-border-dark-disabled);
--color-input-dot-state: var(--hl-color-form-fg-dark-disabled);
pointer-events: none; }
.selectable--dark.selectable--disabled input + .selectable__container .selectable__title,
.selectable--dark input[disabled] + .selectable__container .selectable__title {
color: var(--hl-color-fg-dark-disabled); }
.selectable--dark.selectable--disabled input + .selectable__container .selectable__subtitle,
.selectable--dark input[disabled] + .selectable__container .selectable__subtitle {
color: var(--hl-color-fg-dark-very-muted); }
.selectable--dark.selectable--disabled input + .selectable__container .selectable__subtitle.text-primary,
.selectable--dark input[disabled] + .selectable__container .selectable__subtitle.text-primary {
color: var(--hl-color-fg-dark-very-muted) !important; }
.selectable--dark.selectable--disabled input + .selectable__container .selectable__text,
.selectable--dark input[disabled] + .selectable__container .selectable__text {
color: var(--hl-color-fg-dark-disabled); }
.selectable--dark.selectable--disabled input + .selectable__container .selectable__icon .hl-icon svg path,
.selectable--dark input[disabled] + .selectable__container .selectable__icon .hl-icon svg path {
fill: var(--hl-color-fg-dark-disabled); }
.selectable--dark.selectable--disabled input + .selectable__container .price-block,
.selectable--dark input[disabled] + .selectable__container .price-block {
color: var(--hl-color-fg-dark-disabled); }
.selectable--dark.selectable--special input:not(:checked) + .selectable__container {
--color-border-container: var(--hl-color-border-dark-interaction-standby);
--color-input-state: transparent;
--color-input-border-state: var(--hl-color-border-dark-interaction-standby);
--color-input-dot-state: transparent; }
.selectable--dark.selectable--special input:not(:checked) + .selectable__container:hover {
--color-border-container: var(--hl-color-border-dark-interaction-hover);
--color-input-state: transparent;
--color-input-border-state: var(--hl-color-border-dark-interaction-hover);
--color-input-dot-state: transparent;
--border-type: solid; }
.selectable--dark.selectable--special input:not(:checked) + .selectable__container:active {
--color-border-container: var(--hl-color-border-dark-interaction-pressed);
--color-input-state: transparent;
--color-input-border-state: var(--hl-color-border-dark-interaction-pressed);
--color-input-dot-state: var(--hl-color-border-dark-interaction-pressed); }
.selectable--dark.selectable--special input:checked + .selectable__container {
--color-input-state: var(--hl-color-functional-success);
--color-input-dot-state: var(--hl-color-core-white);
--color-input-border-state: var(--hl-color-border-light-success); }
.selectable--dark.selectable--special input:checked + .selectable__container:hover {
--color-input-state: var(--hl-color-functional-success);
--color-input-dot-state: var(--hl-color-core-white);
--color-input-border-state: var(--hl-color-border-light-success); }
.selectable--dark.selectable--special input:checked + .selectable__container:active {
--color-input-state: var(--hl-color-functional-success);
--color-input-dot-state: var(--hl-color-core-white);
--color-input-border-state: var(--hl-color-border-light-success); }
.selectable--dark.selectable--special.selectable--disabled input:not(:checked) + .selectable__container,
.selectable--dark.selectable--special input[disabled]:not(:checked) + .selectable__container {
--color-border-container: var(--hl-color-border-dark-very-muted);
--color-input-state: var(--hl-color-form-bg-dark-disabled);
--color-input-border-state: var(--hl-color-border-dark-very-muted);
--color-input-dot-state: transparent;
--color-bg-container: var(--hl-color-bg-dark-ultra-muted); }
.selectable--dark.selectable--special.selectable--disabled input:checked + .selectable__container,
.selectable--dark.selectable--special input[disabled]:checked + .selectable__container {
--color-bg-container: var(--hl-color-bg-dark-ultra-muted);
--color-border-container: var(--hl-color-border-dark-very-muted);
--color-input-state: var(--hl-color-form-bg-dark-disabled);
--color-input-border-state: var(--hl-color-border-dark-very-muted);
--color-input-dot-state: var(--hl-color-form-fg-dark-disabled); }
.selectable--dark .selectable__title {
color: var(--hl-color-fg-dark-important); }
.selectable--dark .selectable__subtitle {
color: var(--hl-color-fg-dark-muted); }
.selectable--dark .selectable__text {
color: var(--hl-color-fg-dark-default); }
.selectable--dark .price-block {
color: var(--hl-color-fg-dark-important); }
.selectable--disabled input {
display: none; }
.selectable input {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none; }
@media (forced-colors: active) {
.selectable__container {
color: ButtonText;
--hl-transition-normal: 0s linear;
--hl-color-border-light-interaction-standby: ButtonText !important;
--hl-color-border-light-interaction-active: Highlight;
--hl-color-form-interaction-bg-light-active: Highlight;
--hl-color-form-interaction-bg-light-focus: Highlight;
--hl-color-form-interaction-bg-light-hover: Highlight;
--hl-color-form-interaction-fg-light-active: ButtonFace;
--hl-color-form-interaction-fg-light-focus: ButtonFace;
--hl-color-form-interaction-fg-light-hover: ButtonFace;
--hl-color-bg-light-default: transparent;
--hl-color-fg-light-disabled: GrayText;
--hl-color-form-bg-light-disabled: GrayText;
--hl-color-form-border-light-disabled: GrayText;
--hl-color-form-fg-light-disabled: GrayText;
--hl-color-functional-success: Highlight;
--hl-color-border-light-success: Highlight; }
.selectable__color {
forced-color-adjust: none; }
.selectable__color::after {
outline: var(--hl-border-width-default) solid ButtonText;
border-radius: var(--hl-border-radius-full); }
.selectable[aria-disabled=true], .selectable.selectable--disabled,
.selectable [disabled] + * {
forced-color-adjust: none; }
.selectable[aria-disabled=true] .hl-tag__container, .selectable.selectable--disabled .hl-tag__container,
.selectable [disabled] + * .hl-tag__container {
color: GrayText; } }
.checkbox-list-filter .form-group.hidden {
display: none; }
.comparator-tariff__button {
display: flex;
margin: 0 auto;
width: 90%; }
.comparator-tariff .card-tariff-new {
margin-bottom: var(--hl-spacer-xl); }
.flip-card {
position: relative;
perspective: 1500px;
width: 100%;
border-radius: var(--hl-border-radius-default); }
.flip-card__inner {
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s ease-in-out;
will-change: transform;
height: 100%; }
.flip-card__front, .flip-card__back {
top: 0;
width: 100%;
height: 100%;
z-index: 0;
backface-visibility: hidden; }
.flip-card__front {
position: absolute; }
.flip-card__front .btn-link {
color: var(--muu-text-color); }
.flip-card__front .btn-link:hover {
color: var(--hl-color-fg-light-interaction-hover); }
.flip-card__back {
position: static;
transform: rotateY(180deg);
overflow: hidden; }
.flip-card--flipped .flip-card__inner {
transform: rotateY(180deg); }
.flip-card--flipped .flip-card__front {
position: absolute; }
.flip-card--flipped .flip-card__back {
position: static; }
.flip-card--alt .muu {
padding-bottom: 0; }
.flip-card--alt .muu .picture-cover {
position: relative; }
.flip-card--alt .muu .muu__content {
position: absolute;
bottom: 0;
top: auto;
left: 0;
right: 0; }
.flip-card--alt .muu .muu__content .muu__footer {
padding-bottom: var(--muu-padding); }
.flip-card--alt .flip-card__front {
position: static; }
.flip-card--alt .flip-card__back {
position: absolute; }
.list-icons {
margin: 0;
padding: 0; }
.list-icons .list-icon:not(:last-child) {
margin-bottom: var(--hl-spacing-atom); }
.list-icon {
--list-icon-color: var(--hl-color-fg-light-muted);
--list-icon-color-strong: var(--hl-color-fg-light-default);
display: grid;
gap: 0 var(--hl-spacing-atom);
grid-template-columns: auto 1fr;
align-items: center;
color: var(--list-icon-color);
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular); }
.list-icon > hl-icon {
align-self: baseline;
vertical-align: middle; }
.list-icon > hl-icon[size=sm] {
display: block; }
.list-icon strong {
color: var(--list-icon-color-strong); }
.list-icon .link-icon {
font-size: inherit; }
.list-icon .breakline-small {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
display: block;
grid-column-start: 2; }
.list-icon--variant-success {
--list-icon-color: var(--hl-color-fg-light-success);
--list-icon-color-strong: var(--list-icon-color); }
.list-icon--variant-danger {
--list-icon-color: var(--hl-color-fg-light-danger);
--list-icon-color-strong: var(--list-icon-color); }
.mosaic-devices {
display: flex;
flex-direction: column; }
@media (min-width: 768px) {
.mosaic-devices {
flex-direction: row; } }
.mosaic-devices__block {
flex-basis: 100%; }
@media (min-width: 768px) {
.mosaic-devices__block {
flex-basis: 33.3333333333%;
flex-grow: 1; } }
.mosaic-devices__double {
display: flex;
flex-wrap: wrap; }
.mosaic-devices__double .muu {
flex-basis: 100%; }
@media (min-width: 768px) {
.mosaic-devices__double .muu {
flex-grow: 1;
flex-basis: 50%; } }
.mosaic-devices .muu:only-child {
height: 100%; }
.mosaic-devices .muu__footer {
position: absolute;
height: 100%;
width: 100%;
top: 0; }
.muu {
--muu-padding: var(--hl-spacer-md);
--muu-bg-color: var(--hl-color-bg-light-default);
--muu-text-color: var(--hl-color-fg-light-default);
--muu-title-color: var(--hl-color-fg-light-important);
--muu-text-muted-color: var(--hl-color-fg-light-muted);
--muu-text-shadow-color: rgba(var(--hl-color-fg-dark-important), 0.3);
display: flex;
flex-direction: column;
border: 0;
background: var(--muu-bg-color);
padding: 0;
padding-bottom: var(--muu-padding);
border-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default)); }
.muu--float-img .muu__content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto 0.6fr;
gap: 10px 0px;
grid-auto-flow: row;
grid-template-areas: "muu__header muu__header" "muu__body muu__promo-image" "muu__footer muu__footer"; }
@media (min-width: 768px) {
.muu--float-img .muu__content {
grid-template-areas: "muu__header muu__header" "muu__body muu__promo-image" "muu__footer muu__footer"; } }
@media (min-width: 992px) {
.muu--float-img .muu__content {
grid-template-areas: "muu__header muu__header" "muu__body muu__promo-image" "muu__footer muu__promo-image"; } }
.muu--float-img .muu__content .muu__header {
grid-area: muu__header; }
.muu--float-img .muu__content .muu__body {
grid-area: muu__body;
padding-right: var(--hl-spacer-sm); }
.muu--float-img .muu__content .muu__promo-image {
grid-area: muu__promo-image;
text-align: center;
align-self: center; }
@media (min-width: 992px) {
.muu--float-img .muu__content .muu__promo-image {
padding-left: var(--hl-grid-spacer); } }
.muu--float-img .muu__content .muu__promo-image img {
width: 100%; }
.muu--float-img .muu__content .muu__footer {
grid-area: muu__footer;
padding-top: 0; }
@media (max-width: 575.98px) {
.muu--float-img--w100-xs-screen .muu__content {
grid-template-areas: "muu__header muu__header" "muu__body muu__body" "muu__promo-image muu__promo-image" "muu__footer muu__footer"; }
.muu--float-img--w100-xs-screen .muu__content .muu__body {
padding: 0 var(--muu-padding); } }
@media (min-width: 992px) {
.muu--float-img--h100-lg-screen .muu__content {
grid-template-areas: "muu__header muu__promo-image" "muu__body muu__promo-image" "muu__footer muu__promo-image"; } }
.muu--float-img-no-image .muu__content {
grid-template-areas: "muu__header muu__header" "muu__body muu__body" "muu__footer muu__footer"; }
.muu--float-img-no-image .muu__content .muu__body {
padding: 0 var(--muu-padding); }
.muu--float-img-no-image .muu__content .muu__promo-image {
display: none; }
.muu--float-img--align-center.muu--float-img--h100-lg-screen .muu__content {
grid-template-areas: "muu__header muu__header" "muu__body muu__body" "muu__promo-image muu__promo-image" "muu__footer muu__footer"; }
@media (min-width: 768px) {
.muu--float-img--align-center.muu--float-img--h100-lg-screen .muu__content {
grid-template-areas: "muu__header muu__promo-image" "muu__body muu__promo-image" "muu__footer muu__promo-image"; } }
.muu--float-img--align-center.muu--float-img--h100-lg-screen .muu__content .muu__promo-image {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--hl-spacer-md); }
.muu--float-img--align-center.muu--float-img--h100-lg-screen .muu__content .muu__promo-image picture {
flex-basis: 100%; }
.muu--float-img--align-center.muu--float-img--h100-lg-screen .muu__content .muu__promo-image img {
width: unset; }
.muu .text-muted {
color: var(--muu-text-muted-color) !important; }
.muu > *:not(:first-child) {
margin-top: var(--hl-spacer-2xs); }
.muu__content {
display: flex;
flex-direction: column;
height: 100%; }
.muu__hero {
padding: 0;
overflow: hidden;
position: relative;
border-top-left-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default));
border-top-right-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default)); }
.muu__hero.picture:only-child {
border-bottom-left-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default));
border-bottom-right-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default)); }
.muu__header {
padding: var(--muu-padding);
padding-bottom: 0;
color: var(--muu-title-color);
text-shadow: 0 0 2px var(--muu-text-shadow-color); }
.muu__header:empty {
display: none; }
.muu__body {
padding: 0 var(--muu-padding);
color: var(--muu-text-color); }
.muu__body:empty {
display: none; }
.muu__body p:last-child,
.muu__body ul:last-child {
margin-bottom: 0; }
.muu__footer {
margin-top: auto;
padding: 0 var(--muu-padding);
padding-top: var(--hl-spacer-md); }
.muu__footer > * {
margin-top: var(--hl-spacer-md); }
.muu__footer:empty {
display: none; }
.muu--centered-header .muu__header, .muu--centered-header .muu__header *, .muu--centered-body .muu__body, .muu--centered-body .muu__body * {
text-align: center; }
.muu--centered-header .muu__icon, .muu--centered-header .muu__hero__img {
margin-left: auto;
margin-right: auto; }
.muu--centered-header .muu__hero__img {
display: block; }
.muu--bg-img {
--muu-padding: var(--hl-spacer-md);
position: relative;
overflow: hidden; }
.muu--bg-img .muu__content {
z-index: 0; }
.muu--bg-img .muu__header {
margin-right: var(--hl-spacer-3xl); }
.muu--promo .muu__footer, .muu--big-promo .muu__footer {
padding-top: var(--hl-spacer-3xl); }
.muu--promo .muu__header, .muu--promo .muu__body, .muu--big-promo .muu__header, .muu--big-promo .muu__body {
max-width: 580px; }
.muu--promo .muu__header.text-center, .muu--promo .muu__body.text-center, .muu--big-promo .muu__header.text-center, .muu--big-promo .muu__body.text-center {
margin: 0 auto; }
.muu--bg-overlay .muu__bg {
opacity: 0.7; }
.muu__pretitle {
font-size: var(--hl-typography-p4-font-size);
line-height: var(--hl-typography-p4-line-height);
letter-spacing: var(--hl-typography-p4-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
color: var(--muu-text-muted-color); }
.muu__pretitle-1 {
font-size: var(--hl-typography-h5-font-size);
line-height: var(--hl-typography-h5-line-height);
letter-spacing: var(--hl-typography-h5-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
margin-top: 0;
margin-bottom: var(--hl-spacer-sm);
color: var(--muu-text-muted-color); }
.muu__pretitle-2 {
font-size: var(--hl-typography-p1-font-size);
line-height: var(--hl-typography-p1-line-height);
letter-spacing: var(--hl-typography-p1-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
margin-top: 0;
margin-bottom: var(--hl-spacer-sm);
color: var(--muu-text-muted-color); }
.muu__title-0 {
font-size: var(--hl-typography-h1-font-size);
line-height: var(--hl-typography-h1-line-height);
letter-spacing: var(--hl-typography-h1-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
margin-top: 0; }
.muu__title-1 {
font-size: var(--hl-typography-h3-font-size);
line-height: var(--hl-typography-h3-line-height);
letter-spacing: var(--hl-typography-h3-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
text-wrap: balance;
margin-top: 0; }
.muu__title-2 {
font-size: var(--hl-typography-h5-font-size);
line-height: var(--hl-typography-h5-line-height);
letter-spacing: var(--hl-typography-h5-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
text-wrap: balance;
line-height: var(--hl-typography-line-height-default);
margin-top: 0; }
.muu__title-3 {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
text-wrap: balance;
margin-top: 0;
margin-bottom: 0; }
.muu [class^=muu__title-] h1,
.muu [class^=muu__title-] h2,
.muu [class^=muu__title-] h3,
.muu [class^=muu__title-] h4,
.muu [class^=muu__title-] h5,
.muu [class^=muu__title-] h6 {
all: unset;
display: revert; }
.muu h1[class^=muu__title-],
.muu h2[class^=muu__title-],
.muu h3[class^=muu__title-],
.muu h4[class^=muu__title-],
.muu h5[class^=muu__title-],
.muu h6[class^=muu__title-] {
color: var(--muu-title-color); }
.muu__text {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular); }
.muu__icon {
width: var(--hl-spacer-xl);
height: var(--hl-spacer-xl); }
.muu__header .muu__icon {
margin-bottom: var(--hl-spacer-sm); }
.muu--big-icon .muu__icon {
width: var(--hl-spacer-3xl);
height: var(--hl-spacer-3xl); }
.muu__tag {
display: none; }
.muu__apps-horizontal {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--hl-spacer-md) var(--hl-spacer-lg); }
@media (min-width: 992px) {
.muu__apps-horizontal--is-fullwidth {
display: grid;
grid-template-columns: auto auto; } }
.muu--promo .muu__tag, .muu--big-promo .muu__tag, .muu--bg-img .muu__tag {
display: block;
position: absolute;
top: var(--hl-spacer-2xl);
left: var(--hl-spacer-2xl);
text-shadow: none; }
.muu--transparent {
--muu-padding: 0;
background: transparent; }
.muu--bordered {
--muu-padding: var(--hl-spacer-md);
border: var(--hl-border-width-default) solid var(--hl-color-border-light-default); }
.muu--big-promo {
--muu-padding: var(--hl-spacer-2xl);
padding-top: var(--hl-spacer-2xl); }
@media (min-width: 992px) {
.muu--big-promo {
padding-top: var(--hl-spacer-5xl); } }
.muu--promo {
--muu-padding: var(--hl-spacer-xl); }
.muu .stretched-link {
display: none; }
.muu--linked {
--muu-padding: var(--hl-spacer-md);
border: none;
position: relative; }
.muu--linked .stretched-link {
display: inline-flex;
text-decoration: none;
font-weight: var(--hl-typography-font-weight-body-bold); }
.muu--linked .stretched-link::after {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-default);
border-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default)); }
.muu--linked .stretched-link:hover::after {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-hover);
color: var(--hl-color-fg-light-interaction-hover); }
.muu--linked .stretched-link:hover .icon-primary {
fill: var(--hl-color-fg-light-interaction-hover) !important; }
.muu--linked .stretched-link:active::after {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-pressed);
color: var(--hl-color-fg-light-interaction-pressed); }
.muu--linked .stretched-link:active .icon-primary {
fill: var(--hl-color-fg-light-interaction-hover) !important; }
.muu--muusaic {
--muu-padding: var(--hl-spacer-md);
--muu-bg-color: var(--hl-color-button-bg-light-borderless-standby);
--muu-muusaic-bg-color: var(--hl-color-button-bg-white-standby);
--muu-muusaic-bg-hover: var(--hl-color-button-bg-light-borderless-hover);
--muu-muusaic-bg-active: var(--hl-color-button-bg-light-borderless-pressed);
--muu-muusaic-color-text-standby: var(--hl-color-button-fg-light-borderless-standby);
--muu-muusaic-color-text-active: var(--hl-color-button-fg-light-borderless-pressed);
border: none;
position: relative; }
.muu--muusaic--primary {
--muu-muusaic-bg-color: var(--hl-color-button-bg-light-primary-standby);
--muu-muusaic-bg-hover: var(--hl-color-button-bg-light-primary-hover);
--muu-muusaic-bg-active: var(--hl-color-button-bg-light-primary-pressed);
--muu-muusaic-color-text-standby: var(--hl-color-button-fg-light-primary-standby);
--muu-muusaic-color-text-active: var(--hl-color-button-fg-light-primary-pressed); }
.muu--muusaic--black {
--muu-muusaic-bg-color: var(--hl-color-button-bg-light-black-standby);
--muu-muusaic-bg-hover: var(--hl-color-button-bg-light-black-hover);
--muu-muusaic-bg-active: var(--hl-color-button-bg-light-black-pressed);
--muu-muusaic-color-text-standby: var(--hl-color-button-fg-light-black-standby);
--muu-muusaic-color-text-active: var(--hl-color-button-fg-light-black-pressed); }
.muu--muusaic--very-muted {
--muu-muusaic-bg-color: var(--hl-color-bg-light-very-muted);
--muu-muusaic-bg-hover: var(--hl-color-bg-light-muted);
--muu-muusaic-bg-active: var(--hl-color-button-bg-light-borderless-pressed);
--muu-muusaic-color-text-standby: var(--hl-color-button-fg-light-borderless-standby);
--muu-muusaic-color-text-active: var(--hl-color-button-fg-light-borderless-pressed); }
.muu--muusaic:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--muu-muusaic-bg-color);
transition: var(--hl-transition-normal); }
.muu--muusaic:hover:before, .muu--muusaic:focus:before {
background-color: var(--muu-muusaic-bg-hover);
transition: var(--hl-transition-normal); }
.muu--muusaic:active:before {
color: var(--muu-muusaic-color-text-active);
background-color: var(--muu-muusaic-bg-active); }
.muu--muusaic:active .muu__header,
.muu--muusaic:active h1[class^=muu__title-],
.muu--muusaic:active h2[class^=muu__title-],
.muu--muusaic:active h3[class^=muu__title-],
.muu--muusaic:active h4[class^=muu__title-],
.muu--muusaic:active h5[class^=muu__title-],
.muu--muusaic:active h6[class^=muu__title-],
.muu--muusaic:active .link-icon .hl-icon,
.muu--muusaic:active .hl-icon,
.muu--muusaic:active .link-icon svg {
color: var(--muu-muusaic-color-text-active); }
.muu--muusaic .muu__header,
.muu--muusaic h1[class^=muu__title-],
.muu--muusaic h2[class^=muu__title-],
.muu--muusaic h3[class^=muu__title-],
.muu--muusaic h4[class^=muu__title-],
.muu--muusaic h5[class^=muu__title-],
.muu--muusaic h6[class^=muu__title-],
.muu--muusaic .link-icon .hl-icon,
.muu--muusaic .hl-icon,
.muu--muusaic .link-icon svg {
color: var(--muu-muusaic-color-text-standby); }
.muu--muusaic .muu__content {
position: relative;
z-index: 0; }
.muu--muusaic .picture-bg img {
top: auto;
bottom: 0;
right: 0;
transform-origin: right;
transition: transform var(--hl-transition-normal);
max-width: 50%;
max-height: 50%;
transform: scale(1); }
.muu--muusaic a:hover, .muu--muusaic a:focus {
color: currentColor; }
.muu--muusaic .stretched-link {
display: block; }
.muu--muusaic .stretched-link:after {
border: none; }
.muu--muusaic:not(.muu--disabled):hover .picture-bg img, .muu--muusaic:not(.muu--disabled):focus-within .picture-bg img {
transform-origin: right;
transition: transform var(--hl-transition-normal);
transform: scale(1.3); }
.muu--disabled {
background-color: var(--hl-color-bg-light-very-muted);
--muu-title-color: var(--hl-color-fg-light-muted);
--muu-text-color: var(--hl-color-bg-light-disabled); }
.muu--disabled .muu__icon svg[class^=icon-] {
fill: var(--hl-color-fg-light-disabled) !important; }
.muu--disabled .link-icon {
color: var(--hl-color-fg-light-disabled);
cursor: default; }
.muu--disabled .link-icon hl-icon .hl-icon svg {
color: var(--hl-color-fg-light-disabled); }
.muu--disabled span.stretched-link,
.muu--disabled .link-icon:not(.link-icon--disabled):hover,
.muu--disabled .link-icon:not(.link-icon--disabled):focus {
color: var(--hl-color-fg-light-disabled); }
.muu--disabled .stretched-link::after,
.muu--disabled .stretched-link:hover::after {
border: none; }
.muu--disabled.muu--linked--animated .picture-bg__img {
opacity: 0.7;
filter: grayscale(1); }
.muu--collapsible [aria-expanded] svg {
transition: transform 0.3s, color 0.3s; }
.muu--collapsible [aria-expanded=false] svg {
transform: rotate(90deg);
color: var(--hl-color-fg-light-muted); }
.muu--collapsible [aria-expanded=true] svg {
transform: rotate(270deg);
color: var(--hl-color-fg-light-primary); }
@media (forced-colors: active) {
.muu--collapsible svg {
--hl-color-fg-light-muted: currentColor;
--hl-color-fg-light-primary: currentColor; } }
.muu--collapsible .muu__body .btn-toolbar {
position: relative;
z-index: 1;
padding-top: var(--hl-spacer-md); }
.muu--collapsible .muu__footer:not(:empty) {
position: relative;
z-index: 1; }
.muu--collapsible .muu__footer:not(:empty) [data-toggle] {
margin-top: 0; }
.muu--collapsible .muu__footer:not(:empty) > [id] {
margin-top: 0; }
.muu--collapsible .muu__footer:not(:empty) > [id] .btn-toolbar {
margin-top: var(--hl-spacer-md); }
.muu--collapsible p {
padding-bottom: 1rem;
margin-bottom: 0; }
.muu--header-centered-x .muu__header {
text-align: center;
margin-right: 0;
max-width: 100%; }
.muu--header-centered-x .muu__header .muu__icon {
margin-left: auto;
margin-right: auto; }
.muu--img {
padding: var(--muu-padding); }
.muu--img .muu__footer {
padding: 0;
margin-top: 0; }
.muu--img .stretched-link {
display: initial; }
.muu--img .stretched-link:focus-visible:after {
animation: focus-outline-animation var(--hl-transition-normal) forwards; }
.muu--header-equal-margin-bottom .muu__header > * {
margin-bottom: var(--hl-spacer-sm); }
.muu--linked:hover .muu__title-0 {
color: var(--hl-color-primary); }
.order-summarys .order-summary {
--order-summary-img-height: 120px;
display: grid;
grid-template-columns: 120px 1fr auto;
gap: var(--hl-spacing-grid);
padding: var(--hl-spacing-grid) 0;
border-top: var(--hl-border-width-xs) solid var(--hl-color-fg-light-very-muted); }
@media (max-width: 575.98px) {
.order-summarys .order-summary {
grid-template-columns: 72px 1fr auto; } }
.order-summarys .order-summary:last-child {
padding-bottom: 0; }
.order-summarys .order-summary__content {
display: flex;
flex-direction: column; }
.order-summarys .order-summary__content-pretitle {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
margin: 0; }
.order-summarys .order-summary__content-title {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
margin: 0; }
.order-summarys .order-summary__content-text {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
color: var(--hl-color-fg-light-muted);
padding-top: var(--hl-spacing-atom);
margin-top: auto; }
.order-summarys .order-summary__price {
display: flex;
justify-content: flex-end;
font-size: var(--hl-typography-p2-font-size);
font-weight: var(--hl-typography-font-weight-body-bold);
color: var(--product-order-color-title); }
.order-summarys .order-summary__img {
margin: 0;
background-color: var(--hl-color-bg-light-very-muted); }
.order-summarys .order-summary__img img {
display: block;
-o-object-fit: contain;
object-fit: contain;
margin: auto;
max-height: var(--order-summary-img-height);
height: 100%;
width: 100%; }
.order-summarys .order-summary__details {
grid-column: 1/-1;
display: grid;
grid-template-columns: auto 1fr;
padding: var(--hl-spacing-grid);
border: var(--hl-border-width-xs) solid var(--hl-color-fg-light-very-muted); }
.order-summarys .order-summary__details:not(:only-child) {
gap: var(--hl-spacing-atom); }
.order-summarys .order-summary__details-pretitle {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
margin: 0; }
.order-summarys .order-summary__details-title {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
margin: 0; }
.order-summarys .order-summary__details-text {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
color: var(--hl-color-fg-light-muted); }
.order-summarys .order-summary--only-content {
grid-template-columns: 1fr auto; }
.order-summarys .order-summary--only-content .order-summary__content {
gap: 0; }
.order-summarys .order-summary--with-tag {
display: grid;
grid-template-columns: auto 1fr auto auto;
grid-template-rows: auto 1fr;
grid-column-gap: var(--hl-spacing-grid);
grid-row-gap: var(--hl-spacing-grid); }
.order-summarys .order-summary--with-tag .order-summary__tag {
grid-column: span 2/span 2; }
.order-summarys .order-summary--with-tag .order-summary__img {
grid-row: span 2/span 2;
grid-row-start: 2; }
.order-summarys .order-summary--with-tag .order-summary__content {
grid-column: span 4/span 4;
grid-row: span 2/span 2;
grid-row-start: 2; }
.order-summarys .order-summary--with-tag .order-summary__price {
justify-content: flex-start;
gap: var(--hl-spacing-atom); }
.seller-card {
--seller-card-color-title: var(--hl-color-fg-light-important);
--seller-card-color-text: var(--hl-color-fg-light-default);
--seller-card-muted-color: var(--hl-color-fg-light-muted);
--product-card-icon-color: currentColor;
--seller-card-border-color: var(--hl-color-border-light-default);
position: relative;
display: flex;
flex-direction: column;
max-width: var(--seller-card-max-width, 360px);
height: 100%;
color: var(--seller-card-color-text);
border: var(--hl-border-width-default) solid var(--seller-card-border-color);
transition: all var(--hl-transition-normal);
text-decoration: none; }
.seller-card hl-icon[name=solaris__form-chevron-right] .hl-icon {
--hl-icon-color: var(--seller-card-icon-color); }
.seller-card hl-icon[name=solaris__form-chevron-right] .hl-icon path {
transition: all var(--hl-transition-normal); }
@media (prefers-reduced-motion: reduce) {
.seller-card hl-icon[name=solaris__form-chevron-right] .hl-icon path {
transition: none; } }
@media (prefers-reduced-motion: reduce) {
.seller-card {
transition: none; } }
.seller-card:hover {
--seller-card-icon-color: var(--hl-color-fg-light-interaction-hover);
--seller-card-border-color: var(--hl-color-border-light-interaction-hover);
text-decoration: none;
color: inherit; }
.seller-card:hover .product-card__header__image img {
transform: scale(1.1); }
.seller-card:active {
--seller-card-icon-color: var(--hl-color-fg-light-interaction-pressed);
--seller-card-border-color: var(--hl-color-border-light-interaction-pressed);
text-decoration: none;
color: inherit; }
.seller-card__header {
position: relative;
z-index: 0;
background-color: var(--hl-color-bg-light-very-muted); }
.seller-card__body {
display: flex;
flex-direction: column;
gap: var(--hl-spacing-grid);
height: 100%;
padding: var(--hl-spacing-grid); }
.seller-card__body .btn-toolbar {
margin-top: var(--hl-spacing-grid);
align-items: flex-end;
margin-left: auto; }
.seller-card__footer {
display: grid;
grid-auto-flow: row;
gap: var(--hl-spacing-grid);
margin-top: auto;
padding: 0 var(--hl-spacing-grid) var(--hl-spacing-grid); }
.seller-card__info {
display: grid;
grid-auto-flow: row;
gap: var(--hl-spacing-grid); }
.seller-card .btn-toolbar a {
display: flex; }
.seller-card__name {
overflow: hidden; }
.seller-card__name-title {
color: var(--seller-card-color-title);
font-size: var(--hl-typography-h5-font-size);
line-height: var(--hl-typography-h5-line-height);
letter-spacing: var(--hl-typography-h5-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap; }
.seller-card__name-subtitle {
color: var(--seller-card-color-text);
font-size: var(--hl-typography-p1-font-size);
line-height: var(--hl-typography-p1-line-height);
letter-spacing: var(--hl-typography-p1-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; }
.seller-card__name > * {
margin-top: 0;
margin-bottom: 0; }
.seller-card__price {
margin-top: auto; }
.seller-card__price-title {
color: var(--seller-card-muted-color);
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
margin-bottom: 0; }
.seller-card__note {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
display: grid;
gap: var(--hl-spacing-subatom);
grid-template-columns: auto 1fr;
align-items: baseline; }
.seller-card__note strong {
color: var(--seller-card-color-title); }
.seller-card__note-others {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
display: block; }
.product-card {
--product-card-color-title: var(--hl-color-fg-light-important);
--product-card-color-text: var(--hl-color-fg-light-default);
--product-card-muted-color: var(--hl-color-fg-light-muted);
--product-card-icon-color: currentColor;
--product-card-border-color: var(--hl-color-border-light-default);
position: relative;
display: flex;
flex-direction: column;
max-width: var(--product-card-max-width, 100%);
height: 100%;
color: var(--product-card-color-text);
border: var(--hl-border-width-default) solid var(--product-card-border-color);
border-radius: var(--hl-border-radius-default);
transition: all var(--hl-transition-normal);
text-decoration: none;
background-color: var(--hl-color-bg-light-default);
margin-bottom: 0;
gap: 0; }
.product-card hl-icon[name=solaris__form-chevron-right] .hl-icon {
--hl-icon-color: var(--product-card-icon-color); }
.product-card hl-icon[name=solaris__form-chevron-right] .hl-icon path {
transition: all var(--hl-transition-normal); }
@media (prefers-reduced-motion: reduce) {
.product-card hl-icon[name=solaris__form-chevron-right] .hl-icon path {
transition: none; } }
@media (prefers-reduced-motion: reduce) {
.product-card {
transition: none; } }
.product-card:hover {
text-decoration: none;
color: var(--product-card-color-text); }
.product-card:hover:not(.product-card--disabled) {
--product-card-icon-color: var(--hl-color-fg-light-interaction-hover);
--product-card-border-color: var(--hl-color-border-light-interaction-hover); }
.product-card:hover:not(.product-card--disabled) .product-card__header__image img {
transform: scale(1.1); }
.product-card:active {
text-decoration: none;
color: var(--product-card-color-text); }
.product-card:active:not(.product-card--disabled) {
--product-card-icon-color: var(--hl-color-fg-light-interaction-pressed);
--product-card-border-color: var(--hl-color-border-light-interaction-pressed); }
@media (forced-colors: active) {
.product-card:has(.stretched-link) {
--product-card-border-color: LinkText !important; } }
.product-card__header {
position: relative;
z-index: 0;
background-color: var(--hl-color-bg-light-very-muted);
border-top-left-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default));
border-top-right-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default)); }
.product-card__header__tag {
position: absolute;
left: var(--hl-spacer-sm);
top: var(--hl-spacer-sm);
right: var(--hl-spacer-sm);
z-index: 2;
display: flex;
flex-direction: row;
justify-content: space-between;
gap: var(--hl-spacer-2xs);
flex-wrap: wrap; }
.product-card__header__tag hl-icon:only-child {
margin-left: auto; }
.product-card__header__image {
width: 100%;
height: auto;
display: block;
overflow: hidden;
position: relative;
padding-top: 100% !important; }
.product-card__header__image img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
transition: all var(--hl-transition-normal);
z-index: 1; }
@media (prefers-reduced-motion: reduce) {
.product-card__header__image img {
transition: none; } }
.product-card__header__services {
position: absolute;
bottom: 0;
right: 0;
z-index: 3;
width: 80px; }
.product-card__header__services img {
width: 100%;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center; }
@media (min-width: 576px) {
.product-card__header__services {
width: 110px;
max-width: 80%;
bottom: var(--hl-spacer-sm);
right: var(--hl-spacer-sm); } }
.product-card__body {
display: flex;
flex-direction: column;
gap: var(--hl-spacing-grid);
height: 100%;
padding: var(--hl-spacing-grid); }
.product-card__body .btn-toolbar {
margin-top: var(--hl-spacing-grid);
align-items: flex-end;
margin-left: auto; }
.product-card__footer {
display: grid;
grid-auto-flow: row;
gap: var(--hl-spacing-grid);
margin-top: auto;
padding: 0 var(--hl-spacing-grid) var(--hl-spacing-grid); }
.product-card__footer:empty {
display: none; }
.product-card__info {
display: grid;
grid-auto-flow: row;
gap: var(--hl-spacing-grid); }
.product-card .btn-toolbar a {
display: flex; }
.product-card__name {
overflow: hidden; }
.product-card__name-title {
color: var(--product-card-muted-color);
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap; }
.product-card__name-subtitle {
color: var(--product-card-color-title);
font-size: var(--hl-typography-h5-font-size);
line-height: var(--hl-typography-h5-line-height);
letter-spacing: var(--hl-typography-h5-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; }
.product-card__name-subtitle2 {
color: var(--product-card-muted-color);
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap; }
.product-card__name > * {
margin-top: 0;
margin-bottom: 0; }
.product-card__price {
margin-top: auto; }
.product-card__price-title {
color: var(--product-card-muted-color);
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
margin-bottom: 0;
position: relative;
z-index: 2;
pointer-events: none; }
.product-card__price-items {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
flex-direction: row;
gap: var(--hl-spacing-atom); }
.product-card__price-custom-offer {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
font-weight: var(--hl-typography-font-weight-body-bold);
margin-bottom: 0; }
.product-card__colors {
margin-top: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--hl-spacing-border) var(--hl-spacing-atom); }
@media (forced-colors: active) {
.product-card__colors {
forced-color-adjust: none; } }
.product-card__color {
position: relative;
height: 16px;
width: 16px;
border-radius: var(--hl-border-radius-full);
box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.1); }
.product-card__color::after {
content: "";
position: absolute;
height: inherit;
width: inherit;
border-radius: inherit;
background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 59%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0) 100%); }
.product-card__rating {
display: flex;
flex-wrap: wrap;
color: var(--product-card-muted-color); }
.product-card__note {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
display: grid;
gap: var(--hl-spacing-subatom);
grid-template-columns: auto 1fr;
align-items: baseline; }
.product-card__note strong {
color: var(--product-card-color-text); }
.product-card__note-others {
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
display: block; }
.product-card[aria-disabled=true] {
pointer-events: none; }
.product-card--disabled {
--hl-color-fg-light-important: var(--hl-color-fg-light-disabled);
--hl-color-fg-light-default: var(--hl-color-fg-light-disabled);
--hl-color-fg-light-muted: var(--hl-color-fg-light-very-muted);
--hl-link-color-fg: var(--hl-color-fg-light-disabled);
--hl-color-border-light-default: var(--hl-color-border-light-muted);
--hl-color-bg-light-very-muted: var(--hl-color-bg-light-ultra-muted); }
.product-card--disabled .product-card__header {
position: relative; }
.product-card--disabled .product-card__header::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--hl-color-bg-light-very-muted);
z-index: 3;
opacity: 0.5;
border-top-left-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default));
border-top-right-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default)); }
.product-card--disabled .product-card__header .product-card__header__tag {
z-index: 4; }
.product-card--disabled .product-card__note strong {
color: var(--hl-color-fg-light-disabled); }
.product-card--disabled .product-card__colors {
opacity: 0.3; }
.product-card--disabled .hl-icon--color-primary {
opacity: 0.3; }
.product-card--disabled .price-block--is-old {
--price-block-color: var(--hl-color-fg-light-very-muted);
--danger: var(--hl-color-fg-light-very-muted); }
.product-card--disabled .text-primary {
--hl-color-fg-light-primary: var(--hl-color-fg-light-disabled); }
.product-card--disabled .text-disabled {
--hl-color-fg-light-disabled: var(--hl-color-fg-light-very-muted); }
a.product-card--disabled {
pointer-events: none; }
.product-card--disabled a {
pointer-events: none; }
.product-card--discontinued .product-card__header {
position: relative; }
.product-card--discontinued .product-card__header::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 3;
border-top-left-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default));
border-top-right-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default)); }
.product-card--discontinued .product-card__header .product-card__header__tag {
bottom: var(--hl-spacer-sm);
z-index: 4;
align-items: center;
justify-content: center;
bottom: var(--hl-spacer-sm); }
.product-card--selectable {
border-color: transparent;
--color-border-container: var(--hl-color-border-light-interaction-standby);
--color-input-state: transparent;
--color-input-border-state: var(--hl-color-border-light-interaction-standby);
--color-input-dot-state: transparent;
--_inset: calc(var(--hl-border-width-default) * -1); }
.product-card--selectable input[type=checkbox],
.product-card--selectable input[type=radio] {
cursor: pointer;
position: absolute;
top: var(--_inset);
right: var(--_inset);
bottom: var(--_inset);
left: var(--_inset);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
z-index: 5;
border: var(--hl-border-width-default) solid var(--color-border-container);
border-radius: var(--hl-border-radius-default);
transition: all var(--hl-transition-normal); }
@media (prefers-reduced-motion: reduce) {
.product-card--selectable input[type=checkbox],
.product-card--selectable input[type=radio] {
transition: none; } }
.product-card--selectable input[type=checkbox]:not(:checked):hover, .product-card--selectable input[type=checkbox]:not(:checked):focus, .product-card--selectable input[type=checkbox]:not(:checked):hover ~ *, .product-card--selectable input[type=checkbox]:not(:checked):focus ~ *,
.product-card--selectable input[type=radio]:not(:checked):hover,
.product-card--selectable input[type=radio]:not(:checked):focus,
.product-card--selectable input[type=radio]:not(:checked):hover ~ *,
.product-card--selectable input[type=radio]:not(:checked):focus ~ * {
--color-border-container: var(--hl-color-border-light-interaction-hover);
--color-input-state: transparent;
--color-input-border-state: var(--hl-color-border-light-interaction-hover);
--color-input-dot-state: transparent;
--border-type: solid; }
.product-card--selectable input[type=checkbox]:not(:checked):active, .product-card--selectable input[type=checkbox]:not(:checked):active ~ *,
.product-card--selectable input[type=radio]:not(:checked):active,
.product-card--selectable input[type=radio]:not(:checked):active ~ * {
--color-border-container: var(--hl-color-border-light-interaction-pressed);
--color-input-state: transparent;
--color-input-border-state: var(--hl-color-border-light-interaction-pressed);
--color-input-dot-state: var(--hl-color-border-light-interaction-pressed); }
.product-card--selectable input[type=checkbox]:checked, .product-card--selectable input[type=checkbox]:checked ~ *,
.product-card--selectable input[type=radio]:checked,
.product-card--selectable input[type=radio]:checked ~ * {
--color-border-container: var(--hl-color-border-light-interaction-active);
--color-input-state: var(--hl-color-form-interaction-bg-light-active);
--color-input-dot-state: var(--hl-color-form-interaction-fg-light-active);
--color-input-border-state: var(--hl-color-form-interaction-bg-light-active);
--color-bg-container: var(--hl-color-bg-light-default); }
.product-card--selectable input[type=checkbox]:checked:hover ~ *,
.product-card--selectable input[type=radio]:checked:hover ~ * {
--color-input-state: var(--hl-color-form-interaction-bg-light-focus);
--color-input-border-state: var(--hl-color-form-interaction-bg-light-hover);
--color-input-dot-state: var(--hl-color-form-interaction-fg-light-hover); }
.product-card--selectable input[type=checkbox]:checked:active ~ *,
.product-card--selectable input[type=radio]:checked:active ~ * {
--color-input-state: var(--hl-color-form-interaction-bg-light-pressed);
--color-input-border-state: var(--hl-color-form-interaction-bg-light-pressed);
--color-input-dot-state: var(--hl-color-form-interaction-fg-light-pressed); }
.product-card--selectable input[type=checkbox][disabled],
.product-card--selectable input[type=radio][disabled] {
pointer-events: none; }
.product-card--selectable input[type=checkbox][disabled]:not(:checked),
.product-card--selectable input[type=radio][disabled]:not(:checked) {
--color-border-container: var(--hl-color-form-bg-light-disabled); }
.product-card--selectable input[type=checkbox][disabled]:checked,
.product-card--selectable input[type=radio][disabled]:checked {
--color-border-container: var(--hl-color-border-light-very-muted); }
.product-card--selectable input[type=checkbox][disabled]:not(:checked) ~ *,
.product-card--selectable input[type=radio][disabled]:not(:checked) ~ * {
--color-bg-container: var(--hl-color-bg-light-ultra-muted);
--color-border-container: var(--hl-color-border-light-very-muted);
--color-input-state: var(--hl-color-form-light-disabled-bg);
--color-input-border-state: var(--hl-color-form-border-light-disabled); }
.product-card--selectable input[type=checkbox][disabled]:checked ~ *,
.product-card--selectable input[type=radio][disabled]:checked ~ * {
--color-bg-container: var(--hl-color-bg-light-ultra-muted);
--color-border-container: var(--hl-color-border-light-very-muted);
--color-input-state: var(--hl-color-form-bg-light-disabled);
--color-input-border-state: var(--hl-color-form-border-light-disabled);
--color-input-dot-state: var(--hl-color-form-fg-light-disabled); }
.product-card--selectable input[type=checkbox]:not(:disabled):focus-visible,
.product-card--selectable input[type=radio]:not(:disabled):focus-visible {
animation: focus-outline-animation var(--hl-transition-normal) forwards; }
@media (forced-colors: active) {
.product-card--selectable input[type=checkbox]:not(:checked) ~ .product-card__footer,
.product-card--selectable input[type=radio]:not(:checked) ~ .product-card__footer {
--color-input-border-state: ButtonText; }
.product-card--selectable input[type=checkbox]:not(:checked) ~ .product-card__footer svg, .product-card--selectable input[type=checkbox]:not(:checked) ~ .product-card__footer svg *,
.product-card--selectable input[type=radio]:not(:checked) ~ .product-card__footer svg,
.product-card--selectable input[type=radio]:not(:checked) ~ .product-card__footer svg * {
fill: Canvas !important; }
.product-card--selectable input[type=checkbox]:not(:checked):hover ~ .product-card__footer,
.product-card--selectable input[type=radio]:not(:checked):hover ~ .product-card__footer {
--color-input-border-state: Highlight; }
.product-card--selectable input[type=checkbox]:checked ~ .product-card__footer,
.product-card--selectable input[type=radio]:checked ~ .product-card__footer {
--color-input-border-state: Highlight;
--color-input-state: Highlight;
--color-input-dot-state: Canvas; }
.product-card--selectable input[type=checkbox]:focus ~ .product-card__footer, .product-card--selectable input[type=checkbox]:hover ~ .product-card__footer,
.product-card--selectable input[type=radio]:focus ~ .product-card__footer,
.product-card--selectable input[type=radio]:hover ~ .product-card__footer {
--color-input-border-state: Highlight; }
.product-card--selectable input[type=checkbox][disabled], .product-card--selectable input[type=checkbox][disabled] ~ .product-card__footer,
.product-card--selectable input[type=radio][disabled],
.product-card--selectable input[type=radio][disabled] ~ .product-card__footer {
--color-input-border-state: GrayText;
--color-border-container: GrayText !important; }
.product-card--selectable input[type=checkbox][disabled]:checked ~ .product-card__footer,
.product-card--selectable input[type=radio][disabled]:checked ~ .product-card__footer {
--color-input-state: Canvas; }
.product-card--selectable input[type=checkbox][type=radio][disabled]:checked ~ .product-card__footer,
.product-card--selectable input[type=radio][type=radio][disabled]:checked ~ .product-card__footer {
--color-input-state: GrayText; } }
.product-card--selectable input[type=radio] ~ .product-card__footer .product-card__input {
position: relative;
border-radius: var(--hl-border-radius-full);
--input-size: 24px; }
.product-card--selectable input[type=radio] ~ .product-card__footer .product-card__input::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
height: 12px;
width: 12px;
background-color: var(--color-input-dot-state);
border-radius: var(--hl-border-radius-full); }
.product-card--selectable .product-card__input {
--input-size: 20px;
position: relative;
height: var(--input-size);
width: var(--input-size);
border: var(--hl-border-width-default) solid var(--color-input-border-state);
background-color: var(--color-input-state);
transition: all var(--hl-transition-normal); }
@media (prefers-reduced-motion: reduce) {
.product-card--selectable .product-card__input {
transition: none; } }
.product-card--selectable .product-card__input hl-icon {
position: absolute;
inset: 0;
max-width: var(--input-size);
max-height: var(--input-size);
color: var(--color-input-dot-state); }
.product-card--selectable .product-card__input hl-icon .hl-icon {
display: block; }
.section-swiper .product-card img {
height: 100%; }
.swiper-slide > a.product-card::before {
content: "";
position: absolute;
top: var(--hl-inset-outline-focus);
left: var(--hl-inset-outline-focus);
right: var(--hl-inset-outline-focus);
bottom: var(--hl-inset-outline-focus);
background: transparent;
outline: var(--hl-color-primary) solid var(--hl-border-width-default);
transition: none;
visibility: hidden;
z-index: 1; }
.swiper-slide > a.product-card:focus-visible {
--hl-inset-outline-focus: 0;
animation: none;
outline: none;
overflow: hidden; }
.swiper-slide > a.product-card:focus-visible::before {
visibility: visible;
transition: all 0.3s linear; }
.product-features__header {
align-items: center;
display: flex;
gap: var(--hl-spacer-md);
justify-content: space-between;
margin-top: var(--hl-spacer-lg);
margin-bottom: var(--hl-spacer-lg); }
.product-features__title {
font-size: var(--hl-typography-p1-font-size);
line-height: var(--hl-typography-p1-line-height);
letter-spacing: var(--hl-typography-p1-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
margin: 0; }
.product-features__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--hl-spacer-md); }
.product-features__list:first-child {
margin-top: var(--hl-spacer-xl); }
.product-features__list__item {
align-items: center;
display: inline-flex;
flex-direction: column;
gap: var(--hl-spacer-xs);
padding-bottom: var(--hl-spacer-xs);
padding-top: var(--hl-spacer-xs);
text-align: center;
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold); }
.product-order {
--product-order-color-title: var(--hl-color-fg-light-important);
--product-order-color-text: var(--hl-color-fg-light-default);
--product-order-muted-color: var(--hl-color-fg-light-muted);
--product-order-border-color: var(--hl-color-fg-light-very-muted);
border: var(--hl-border-width-default) solid var(--product-order-border-color);
border-radius: var(--hl-border-radius-default);
padding: var(--hl-spacing-grid); }
@media (min-width: 576px) {
.product-order {
padding: var(--hl-spacing-submodule); } }
.product-order__header {
display: grid;
gap: var(--hl-spacing-atom);
padding-bottom: var(--hl-spacing-grid); }
.product-order__header-title {
display: flex;
align-items: center;
color: var(--product-order-color-title);
font-size: var(--hl-typography-h6-font-size);
line-height: var(--hl-typography-h6-line-height);
letter-spacing: var(--hl-typography-h6-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
margin: 0; }
.product-order__header-title hl-tag {
display: flex; }
.product-order__header-title .hl-tag {
margin-right: var(--hl-spacing-atom); }
.product-order__header-title--price .price-cost {
margin-left: auto;
padding-left: var(--hl-spacing-atom);
flex-shrink: 0; }
.product-order__header-title--price .price-cost__key {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular); }
.product-order__header-title--price .price-cost__value {
font-size: var(--hl-typography-h6-font-size);
line-height: var(--hl-typography-h6-line-height);
letter-spacing: var(--hl-typography-h6-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold); }
.product-order__header-text {
color: var(--product-order-color-text);
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-regular);
margin: 0; }
.product-order__header + .product-order__link {
padding-bottom: var(--hl-spacing-grid); }
.product-order__link {
display: flex;
justify-content: flex-end; }
.product-grid {
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto 1fr;
row-gap: var(--hl-spacer-lg);
-moz-column-gap: var(--hl-spacer-2xl);
column-gap: var(--hl-spacer-2xl); }
@media (min-width: 992px) {
.product-grid {
grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr);
-moz-column-gap: var(--hl-spacer-4xl);
column-gap: var(--hl-spacer-4xl); } }
.product-grid__header {
display: grid;
gap: var(--hl-spacer-lg); }
.product-grid__notes {
display: grid;
gap: var(--hl-spacer-lg); }
.product-grid__notes .text-muted strong {
color: var(--hl-section-color-fg-light-default); }
.product-grid__actions {
margin-top: var(--hl-spacer-xs); }
@media (min-width: 992px) {
.product-grid__features {
grid-row: 1/span 2; } }
.product-grid__features .product-tag {
display: none; }
.product-grid__price-details {
display: flex;
flex-direction: column;
gap: var(--hl-spacer-xs); }
.product-grid__price-details__list {
display: flex;
flex-direction: column;
gap: var(--hl-spacer-xs);
padding-left: 0;
list-style-type: "";
margin-bottom: var(--hl-spacer-xs); }
.product-grid--out-stock .sticky-top-header .container-image-modal .swiper-slide:first-child::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--hl-color-bg-dark-default);
z-index: 3;
opacity: 0.5; }
.product-grid--out-stock .sticky-top-header .container-image-modal .swiper-slide:first-child .product-tag {
position: absolute;
display: flex;
left: var(--hl-spacer-6xl);
top: 0;
right: var(--hl-spacer-6xl);
bottom: var(--hl-spacer-3xl);
z-index: 4;
align-items: center;
justify-content: center; }
.product-header {
display: grid;
grid-template-columns: 1fr;
gap: var(--hl-spacing-atom);
margin-top: 0;
margin-bottom: 0; }
.product-header__title {
font-size: var(--hl-typography-h3-font-size);
line-height: var(--hl-typography-h3-line-height);
letter-spacing: var(--hl-typography-h3-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
color: var(--hl-color-fg-light-muted);
font-weight: var(--hl-typography-font-weight-heading-regular);
margin: 0; }
.product-header__subtitle {
font-size: var(--hl-typography-h2-font-size);
line-height: var(--hl-typography-h2-line-height);
letter-spacing: var(--hl-typography-h2-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
margin: 0; }
.product-header__subtitle--as-title {
font-size: var(--hl-typography-h3-font-size);
line-height: var(--hl-typography-h3-line-height);
letter-spacing: var(--hl-typography-h3-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
color: var(--hl-color-fg-light-muted);
display: block;
font-weight: var(--hl-typography-font-weight-heading-regular);
margin: 0 0 var(--hl-spacing-atom); }
.product-header__reconditioned {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
color: var(--hl-color-fg-light-muted);
margin: 0;
display: flex;
align-items: center;
gap: var(--hl-spacing-atom); }
.product-label-variant {
font-size: var(--hl-typography-h5-font-size);
line-height: var(--hl-typography-h5-line-height);
letter-spacing: var(--hl-typography-h5-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
margin-top: 0;
margin-bottom: var(--hl-spacer-md); }
.container-image-modal {
background-color: var(--hl-color-bg-light-very-muted);
width: 100%;
height: auto;
position: relative;
display: flex;
justify-content: center;
border-radius: var(--hl-border-radius-default); }
.container-image-modal__img {
margin: 0 auto;
max-width: 50%; }
.container-image-modal__icon {
bottom: var(--hl-spacer-md);
right: var(--hl-spacer-md);
position: absolute;
pointer-events: none; }
.container-image-modal__button {
right: 0;
left: 0;
top: 0;
bottom: 0;
width: 100%;
position: absolute;
z-index: 2; }
.container-image-modal__button:hover + .swiper-wrapper .swiper-slide--video::after {
--bg-icon-play: var(--hl-color-border-dark-interaction-hover); }
.container-image-modal__button:active + .swiper-wrapper .swiper-slide--video::after {
--bg-icon-play: var(--hl-color-border-dark-interaction-pressed); }
.container-image-modal .swiper-product .swiper-slide--video {
--size-icon-play: 60px;
--bg-icon-play: var(--hl-color-bg-light-default);
display: grid;
grid-template-areas: "icon-frame"; }
.container-image-modal .swiper-product .swiper-slide--video::after,
.container-image-modal .swiper-product .swiper-slide--video figure {
grid-area: icon-frame; }
.container-image-modal .swiper-product .swiper-slide--video::after {
content: "";
background-color: var(--bg-icon-play);
background-image: url('data:image/svg+xml,');
background-position: center;
background-repeat: no-repeat;
border-radius: var(--hl-border-radius-full);
width: var(--size-icon-play);
height: var(--size-icon-play);
margin: auto; }
.container-image-modal .swiper-thumb .swiper-slide--video {
display: grid;
grid-template-areas: "icon-frame";
place-items: center; }
.container-image-modal .swiper-thumb .swiper-slide--video > * {
grid-area: icon-frame; }
.container-image-modal .modal-body {
display: flex;
align-items: center; }
.container-image-modal .modal-body .swiper-module {
width: 100%; }
.container-image-modal .swiper-slide__img {
max-height: calc(100vh - 200px); }
.container-image-modal .swiper-slide .embed-responsive {
max-width: 900px;
margin: auto; }
.product-order-card-images {
display: grid;
grid-template-columns: 0.2fr 1fr 0.2fr;
grid-template-rows: 40px 1fr 8px;
gap: 0;
grid-auto-flow: row; }
.product-order-card-images__tag {
grid-area: 1/1/2/4;
justify-self: flex-start;
padding: var(--hl-spacer-sm); }
.product-order-card-images__icon {
grid-area: 1/3/2/4;
justify-self: flex-end;
align-self: flex-start;
padding: var(--hl-spacer-sm); }
.product-order-card-images__product {
grid-area: 2/2/3/3;
place-self: center; }
.product-order-card-images__product img {
max-width: 100%;
max-height: 250px; }
.product-order-card-images__services {
grid-area: 2/2/3/3;
display: grid;
place-items: flex-end; }
.product-order-card-images__services img {
width: 110px;
max-width: 80%; }
.promo-hero {
--promo-hero-container-min-height: 380px;
--promo-hero-container-padding: var(--hl-spacer-3xl) 0;
--promo-hero-bg-color: var(--hl-color-bg-light-default);
--promo-hero-bg-color-blurred: rgba(255, 255, 255, 0.2);
--promo-hero-title-color: var(--hl-color-fg-light-important);
--promo-hero-text-muted-color: var(--hl-color-fg-light-muted);
max-width: 1920px;
position: relative;
margin: 0 auto;
width: 100%;
background-color: var(--promo-hero-bg-color); }
.promo-hero > :has([data-aos=fade-left]),
.promo-hero > :has([data-aos=fade-right]) {
overflow-x: hidden; }
.bg-dark .promo-hero, .promo-hero--dark {
--promo-hero-bg-color: var(--hl-color-bg-dark-default);
--promo-hero-bg-color-blurred: rgba(0, 0, 0, 0.2);
--promo-hero-title-color: var(--hl-color-fg-dark-important);
--promo-hero-text-muted-color: var(--hl-color-fg-dark-muted); }
@media (min-width: 576px) {
.promo-hero {
--promo-hero-container-min-height: 400px; } }
@media (min-width: 992px) {
.promo-hero {
--promo-hero-container-min-height: 480px;
--promo-hero-container-padding: var(--hl-spacer-6xl) 0; } }
@media (min-width: 1880px) {
.promo-hero {
max-width: calc(var(--breakpoint-xxl) - var(--hl-grid-spacer) * var(--hl-factor-grid-gutter-width) * 2); } }
.promo-hero--float-img .promo-hero__container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto 0.6fr;
gap: 10px 0px;
grid-auto-flow: row;
z-index: 2;
grid-template-areas: "promo-hero__header promo-hero__header" "promo-hero__body promo-hero__image" "promo-hero__footer promo-hero__footer"; }
@media (min-width: 768px) {
.promo-hero--float-img .promo-hero__container {
grid-template-areas: "promo-hero__header promo-hero__header" "promo-hero__body promo-hero__image" "promo-hero__footer promo-hero__footer"; } }
@media (min-width: 992px) {
.promo-hero--float-img .promo-hero__container {
grid-template-areas: "promo-hero__header promo-hero__header" "promo-hero__body promo-hero__image" "promo-hero__footer promo-hero__image"; } }
.promo-hero--float-img .promo-hero__container .promo-hero__header {
grid-area: promo-hero__header; }
.promo-hero--float-img .promo-hero__container .promo-hero__body {
grid-area: promo-hero__body;
grid-template-rows: auto; }
.promo-hero--float-img .promo-hero__container .promo-hero__image {
grid-area: promo-hero__image;
text-align: center;
align-self: center;
z-index: 2; }
@media (min-width: 992px) {
.promo-hero--float-img .promo-hero__container .promo-hero__image {
padding-left: var(--hl-grid-spacer); } }
.promo-hero--float-img .promo-hero__container .promo-hero__image img {
width: 100%; }
.promo-hero--float-img .promo-hero__container .promo-hero__footer {
grid-area: promo-hero__footer; }
@media (max-width: 575.98px) {
.promo-hero--float-img--w100-xs-screen .promo-hero__container {
grid-template-areas: "promo-hero__header promo-hero__header" "promo-hero__body promo-hero__body" "promo-hero__image promo-hero__image" "promo-hero__footer promo-hero__footer"; } }
@media (min-width: 992px) {
.promo-hero--float-img--h100-lg-screen .promo-hero__container {
grid-template-areas: "promo-hero__header promo-hero__image" "promo-hero__body promo-hero__image" "promo-hero__footer promo-hero__image"; } }
.promo-hero--float-img-no-image .promo-hero__container {
grid-template-areas: "promo-hero__header promo-hero__header" "promo-hero__body promo-hero__body" "promo-hero__footer promo-hero__footer"; }
.promo-hero--float-img-no-image .promo-hero__container .promo-hero__image {
display: none; }
.promo-hero .text-muted {
color: var(--promo-hero-text-muted-color) !important; }
.promo-hero__container {
justify-content: center;
display: flex;
flex-direction: column;
height: auto;
min-height: var(--promo-hero-container-min-height);
padding: var(--promo-hero-container-padding);
position: relative; }
.promo-hero__info, .promo-hero__header, .promo-hero__body, .promo-hero__footer {
color: var(--promo-hero-title-color);
flex-grow: 1;
position: relative;
z-index: 2; }
@media (min-width: 576px) {
.promo-hero__info, .promo-hero__header, .promo-hero__body, .promo-hero__footer {
max-width: 400px; } }
@media (min-width: 992px) {
.promo-hero__info, .promo-hero__header, .promo-hero__body, .promo-hero__footer {
max-width: 670px; } }
.promo-hero__info > *, .promo-hero__header > *, .promo-hero__body > *, .promo-hero__footer > * {
color: inherit; }
.promo-hero__info img:first-child + .promo-hero__subtitle, .promo-hero__header img:first-child + .promo-hero__subtitle, .promo-hero__body img:first-child + .promo-hero__subtitle, .promo-hero__footer img:first-child + .promo-hero__subtitle {
margin-top: var(--hl-spacer-lg); }
.promo-hero__pretitle {
font-size: var(--hl-typography-h5-font-size);
line-height: var(--hl-typography-h5-line-height);
letter-spacing: var(--hl-typography-h5-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
margin-top: 0; }
.promo-hero__title {
font-size: var(--hl-typography-h1-font-size);
line-height: var(--hl-typography-h1-line-height);
letter-spacing: var(--hl-typography-h1-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold); }
.promo-hero__subtitle {
font-size: var(--hl-typography-p1-font-size);
line-height: var(--hl-typography-p1-line-height);
letter-spacing: var(--hl-typography-p1-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold); }
.promo-hero__meta {
align-items: flex-start;
display: flex;
flex-direction: column-reverse;
gap: var(--hl-spacer-md);
justify-content: space-between;
margin-top: var(--hl-spacer-md);
position: relative;
z-index: 2; }
@media (min-width: 576px) {
.promo-hero__meta {
align-items: flex-end;
flex-direction: row; } }
.promo-hero__meta:empty {
display: none; }
.promo-hero__promo-img {
z-index: 2;
width: 100%; }
.promo-hero__promo-img__content {
width: 100%;
display: flex;
justify-content: space-between;
align-content: flex-start;
flex-wrap: wrap;
flex-direction: column-reverse; }
@media (min-width: 576px) {
.promo-hero__promo-img__content {
align-items: flex-end;
flex-direction: row; } }
.promo-hero__overlay {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--promo-hero-bg-color) 100%);
height: 100%;
inset: 0;
position: absolute;
width: 100%;
z-index: 1; }
.promo-hero--blur .promo-hero__overlay {
background: linear-gradient(180deg, black 0%, var(--promo-hero-bg-color-blurred) 110%); }
@media (min-width: 992px) {
.promo-hero--blur .promo-hero__overlay {
background: linear-gradient(45deg, black 0%, var(--promo-hero-bg-color-blurred) 110%); } }
.promo-hero--blur .picture-cover__img {
filter: blur(60px) opacity(0.8) brightness(0.7);
position: absolute;
top: -100px;
left: -100px;
right: -100px;
bottom: -100px;
width: calc(100% + 300px);
height: calc(100% + 300px); }
.promo-hero--two-column {
overflow: hidden; }
.promo-hero--two-column .promo-hero__container {
display: grid;
grid-template-columns: 1fr;
gap: var(--hl-spacer-lg);
grid-auto-flow: row;
grid-template-areas: "hero__info" "hero__content" "hero__meta"; }
.promo-hero--two-column .promo-hero__info {
grid-area: hero__info; }
@media (min-width: 576px) {
.promo-hero--two-column .promo-hero__info {
max-width: initial; } }
@media (min-width: 992px) {
.promo-hero--two-column .promo-hero__info {
max-width: 400px; } }
@media (min-width: 1200px) {
.promo-hero--two-column .promo-hero__info {
max-width: 500px; } }
.promo-hero--two-column .promo-hero__content {
grid-area: hero__content;
z-index: 2; }
.promo-hero--two-column .promo-hero__content img {
max-width: 100%; }
.promo-hero--two-column .promo-hero__meta {
grid-area: hero__meta; }
.promo-hero--two-column .promo-hero__apps {
margin-bottom: var(--hl-spacer-md); }
.promo-hero--two-column .promo-hero__link {
margin-top: var(--hl-spacer-2xl); }
@media (min-width: 992px) {
.promo-hero--two-column .promo-hero__container {
grid-template-columns: auto 1fr;
grid-template-areas: "hero__info hero__content" "hero__meta hero__meta"; } }
.promo-hero--empty > .container-fluid, .promo-hero--empty > .container-sm, .promo-hero--empty > .container-md, .promo-hero--empty > .container-lg, .promo-hero--empty > .container-xl, .promo-hero--empty > .container-xxl,
.promo-hero--empty > .promo-hero__overlay {
display: none; }
.promo-hero--empty .picture-cover {
position: static; }
.promo-hero--empty .picture-cover__img {
height: auto; }
.swiper-module--equal-height .promo-hero .container-fluid, .swiper-module--equal-height .promo-hero .container-sm, .swiper-module--equal-height .promo-hero .container-md, .swiper-module--equal-height .promo-hero .container-lg, .swiper-module--equal-height .promo-hero .container-xl, .swiper-module--equal-height .promo-hero .container-xxl,
.swiper-module--equal-height .promo-hero .row,
.swiper-module--equal-height .promo-hero .promo-hero__container,
.swiper-module--equal-height .promo-hero .picture-cover__img {
height: 100%; }
:root {
--pagination-y-spacing: 32px; }
.section-swiper {
width: 100%;
position: relative; }
.section-swiper .swiper-slide {
width: var(--slide-width, auto);
min-width: var(--slide-min-width, initial); }
.section-swiper figure {
all: unset;
display: block; }
.section-swiper img {
max-width: 100%;
height: auto; }
.section-swiper .swiper-button-prev,
.section-swiper .swiper-button-next {
opacity: 0;
transition: opacity var(--hl-transition-normal); }
.section-swiper:hover .swiper-button-prev, .section-swiper:hover .swiper-button-next {
opacity: 1;
transition: opacity var(--hl-transition-normal); }
.section-swiper .swiper-button-prev.swiper-button-disabled,
.section-swiper .swiper-button-next.swiper-button-disabled {
opacity: 0; }
.section-swiper .swiper-container {
visibility: hidden; }
.section-swiper .swiper-container.swiper-initialized {
visibility: visible; }
.swiper-module--slide-width-25 .swiper-slide {
--space-between: 16px;
--slide-width: calc((100% / 4) - (var(--space-between) / 4) * 3);
--slide-min-width: 320px; }
.swiper-module--slide-width-33 .swiper-slide {
--space-between: 16px;
--slide-width: calc((100% / 3) - (var(--space-between) / 3) * 2);
--slide-min-width: 320px; }
.swiper-module--slide-width-50 .swiper-slide {
--space-between: 16px;
--slide-width: calc((100% / 2) - (var(--space-between) / 2) * 1);
--slide-min-width: 320px; }
.swiper-module--slide-width-100 .swiper-slide {
--slide-width: 100%;
--slide-min-width: initial;
display: flex;
flex-direction: column; }
.swiper-module--slide-width-100 .swiper-slide > figure > img {
display: block;
margin-left: auto;
margin-right: auto; }
.swiper-module--full-width {
--slide-width: min(300px, 100%); }
@media (min-width: 992px) {
.swiper-module--full-width {
--slide-width: 360px; } }
.swiper-module--full-width .overflowing-swiper {
overflow-x: hidden; }
.swiper-module--full-width .swiper-module-container {
margin: 0 calc(-50vw + 50%);
width: 100vw; }
.swiper-module--full-width .swiper-container {
padding-left: var(--swiper-offset, 16px);
padding-right: var(--swiper-offset, 16px); }
.swiper-module--full-width--left-invisible .swiper-container {
padding-left: unset;
margin-left: var(--swiper-offset, 16px); }
@media (min-width: 1400px) {
.swiper-module--center.swiper-module--center--controls-outside-up-xxl .swiper-controls {
padding: 0; }
.swiper-module--center.swiper-module--center--controls-outside-up-xxl .swiper-controls .swiper-control-left {
transform: translateX(-100%); }
.swiper-module--center.swiper-module--center--controls-outside-up-xxl .swiper-controls .swiper-control-right {
transform: translateX(100%); } }
.swiper-module--navigation-pulse .swiper-control.btn:not(:disabled), .swiper-module--navigation-pulse .swiper-control.charger-btn:not(:disabled), .swiper-module--navigation-pulse .swiper-control.subnav__nav__item:not(:disabled) {
opacity: 1;
animation: swiper-navigation-pulse 2s infinite; }
.swiper-module--center--progress-bullets {
--pagination-y-spacing: 0;
--bullets-bottom: 10px; }
.swiper-module--equal-height .swiper-slide {
height: auto; }
.swiper-module--equal-height .swiper-slide > * {
height: 100%; }
.swiper-module--one-slide-perview {
--card-tariff-max-width: 360px;
--navigation-one-slide-spacing-arrows: 48px; }
.swiper-module--one-slide-perview .section-swiper {
padding: 0 var(--navigation-one-slide-spacing-arrows); }
.swiper-module--one-slide-perview .section-swiper .swiper-controls {
padding: 0; }
.swiper-module--one-slide-perview .card-tariff-new:not(.card-tariff-new--sticky) {
width: auto; }
@media (max-width: 1199.98px) {
.swiper-module--one-slide-perview .swiper-controls {
max-width: calc(var(--card-tariff-max-width) + var(--navigation-one-slide-spacing-arrows) * 2);
margin-left: auto;
margin-right: auto; } }
.section-swiper .swiper-controls {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
padding: 0 calc(12px + 0.4vw);
z-index: 2;
pointer-events: none; }
.section-swiper .swiper-controls * {
pointer-events: initial; }
@media (hover: hover) {
.section-swiper .swiper-control {
opacity: 0;
pointer-events: initial; }
.section-swiper .swiper-control.btn:disabled, .section-swiper .swiper-control.charger-btn:disabled, .section-swiper .swiper-control.subnav__nav__item:disabled, .section-swiper .swiper-control.btn.disabled, .section-swiper .swiper-control.disabled.charger-btn, .section-swiper .swiper-control.disabled.subnav__nav__item {
opacity: 0.35; } }
.section-swiper:hover .swiper-controls .swiper-control {
opacity: 1; }
.section-swiper:hover .swiper-controls .swiper-control.btn:disabled, .section-swiper:hover .swiper-controls .swiper-control.charger-btn:disabled, .section-swiper:hover .swiper-controls .swiper-control.subnav__nav__item:disabled, .section-swiper:hover .swiper-controls .swiper-control.btn.disabled, .section-swiper:hover .swiper-controls .swiper-control.disabled.charger-btn, .section-swiper:hover .swiper-controls .swiper-control.disabled.subnav__nav__item {
opacity: var(--hl-opacity-disabled); }
.swiper-module {
--swiper-theme-color: var(--hl-color-primary);
--swiper-pagination-bullet-size: 18px;
--swiper-pagination-bullet-padding: 6px;
--_swiper-pagination-bullet-size-computed: 30;
--swiper-pagination-max-bullet: 5;
--swiper-pagination-bullet-horizontal-gap: 0;
--swiper-pagination-bullet-inactive-color: var(--hl-color-button-bg-light-black-standby);
--swiper-pagination-bullet-inactive-opacity: 1; }
.swiper-module .swiper-horizontal > .swiper-pagination-bullets,
.swiper-module .swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-module .swiper-pagination-custom,
.swiper-module .swiper-pagination-fraction {
bottom: var(--bullets-bottom, 0); }
.bg-dark .swiper-module {
--swiper-pagination-bullet-inactive-color: var(--hl-color-button-bg-white-standby); }
.swiper-pagination.swiper-pagination-navigation {
margin-top: var(--hl-spacer-md);
position: static;
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: auto;
justify-content: center; }
.swiper-pagination.swiper-pagination-navigation:has(> .swiper-pagination-lock) {
margin-top: 0; }
.swiper-pagination.swiper-pagination-navigation .swiper-control {
opacity: 1; }
.swiper-pagination.swiper-pagination-navigation .swiper-control .disabled {
opacity: 0; }
.swiper-pagination.swiper-pagination-navigation .swiper-control[aria-disabled=false]:focus-visible {
outline: 2px solid var(--hl-color-button-bg-light-primary-active);
outline-offset: -2px; }
.swiper-pagination.swiper-pagination-navigation .swiper-control[aria-disabled=true]:focus-visible {
outline: none; }
.swiper-pagination.swiper-pagination-navigation .swiper-button-disabled {
pointer-events: none; }
.swiper-pagination.swiper-pagination-navigation .swiper-button-disabled .btn:not(.swiper-dots), .swiper-pagination.swiper-pagination-navigation .swiper-button-disabled .charger-btn:not(.swiper-dots), .swiper-pagination.swiper-pagination-navigation .swiper-button-disabled .subnav__nav__item:not(.swiper-dots) {
pointer-events: none;
opacity: var(--hl-opacity-disabled); }
.swiper-pagination.swiper-pagination-navigation .swiper-pagination-container {
display: flex;
justify-content: start;
align-items: center;
max-width: calc(var(--swiper-pagination-max-bullet) * (var(--swiper-pagination-bullet-size) + var(--swiper-pagination-bullet-padding) * 2));
margin: auto;
overflow-x: hidden;
position: relative; }
.swiper-pagination.swiper-pagination-navigation .swiper-pagination-bullet {
background-color: transparent;
width: initial;
height: initial;
padding: var(--swiper-pagination-bullet-padding);
outline-offset: -2px !important; }
.swiper-pagination.swiper-pagination-navigation .swiper-pagination-bullet:not(.disabled):focus-visible, .swiper-pagination.swiper-pagination-navigation .swiper-pagination-bullet:not(.disabled):has(input):focus-within {
animation: focus-outline-animation var(--hl-transition-normal) forwards; }
.swiper-pagination.swiper-pagination-navigation .swiper-pagination-bullet.disabled:focus-visible, .swiper-pagination.swiper-pagination-navigation .swiper-pagination-bullet.disabled:focus-within {
outline: 0 !important; }
.swiper-pagination.swiper-pagination-navigation .swiper-pagination-bullet .swiper-pagination-circle {
display: block;
background: var(--swiper-pagination-bullet-inactive-color);
width: var(--swiper-pagination-bullet-size);
height: var(--swiper-pagination-bullet-size);
border-radius: 50%;
transition: all var(--hl-transition-normal);
outline: 2px solid transparent;
outline-offset: 3px; }
.swiper-pagination.swiper-pagination-navigation .swiper-pagination-bullet-active .swiper-pagination-circle {
outline-color: var(--swiper-pagination-bullet-inactive-color); }
.swiper-pagination.swiper-pagination-navigation .swiper-pagination-bullet:hover {
--swiper-pagination-bullet-inactive-color: var(--hl-color-button-bg-light-primary-hover); }
.swiper-pagination.swiper-pagination-navigation .swiper-pagination-bullet:focus {
--swiper-pagination-bullet-inactive-color: var(--hl-color-button-bg-light-primary-focus); }
.swiper-pagination.swiper-pagination-navigation .swiper-pagination-bullet:active {
--swiper-pagination-bullet-inactive-color: var(--hl-color-button-bg-light-primary-pressed); }
.swiper-pagination.swiper-pagination-navigation .swiper-pagination-bullet-active {
--swiper-pagination-bullet-inactive-color: var(--hl-color-button-bg-light-primary-active); }
.swiper-module--center--progress-bullets {
--swiper-pagination-bullet-horizontal-gap: 4px; }
.swiper-module--center--progress-bullets .section-swiper {
background-color: var(--hl-color-bg-light-muted); }
.swiper-module--center--progress-bullets .swiper-pagination-bullets.swiper-pagination-horizontal {
width: 400px;
max-width: 90%;
bottom: 8px;
padding: 4px 2px;
background: var(--hl-color-border-dark-interaction-standby);
border-radius: 6px;
margin-left: 50%;
transform: translateX(-50%);
height: 12px;
display: flex;
flex-wrap: nowrap;
position: absolute;
flex: 1 1 0px; }
.swiper-module--center--progress-bullets .swiper-pagination-bullet {
width: 100%;
height: 4px;
position: relative;
overflow: hidden;
margin-top: 0;
vertical-align: top;
background-color: var(--hl-color-bg-dark-muted);
opacity: 1;
border-radius: 5px; }
.swiper-module--center--progress-bullets .swiper-pagination-bullet::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0; }
.swiper-module--center--progress-bullets .swiper-pagination-bullet-active::before {
background-color: var(--hl-color-bg-light-default);
animation: slide-progress 6s cubic-bezier(0.3, 0, 0.3, 1) forwards; }
.swiper-paused .swiper-module--center--progress-bullets .swiper-pagination-bullet-active::before {
animation-play-state: paused; }
@keyframes slide-progress {
0% {
transform: translateX(-100%); }
100% {
transform: translateX(0); } }
.swiper-module--center--progress-bullets.swiper-module--center--progress-bullets--pag-standard .swiper-pagination-bullets.swiper-pagination-horizontal {
position: static;
max-width: inherit;
transform: none;
height: inherit;
width: initial;
background: initial;
margin: initial; }
.swiper-module--center--progress-bullets.swiper-module--center--progress-bullets--pag-standard .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
content: none; }
.swiper-module--center--progress-bullets.swiper-module--center--progress-bullets--pag-standard .section-swiper {
background-color: transparent; }
@keyframes swiper-navigation-pulse {
0% {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4); }
60%, 100% {
box-shadow: 0 0 0 15px rgba(0, 0, 0, 0); } }
.swiper-products {
max-width: 100%;
overflow: hidden;
--swiper-product-bg: var(--hl-color-bg-light-very-muted);
--swiper-product-thumb-max-height: 80px; }
.swiper-products figure {
margin: 0; }
.swiper-products img {
max-width: 100%;
max-height: 300px;
height: auto;
display: block;
margin: auto; }
@media (min-width: 1200px) {
.swiper-products img {
max-height: 480px; } }
.swiper-products .swiper-slide {
align-self: center; }
.swiper-products .swiper-product {
background-color: var(--swiper-product-bg); }
.swiper-products .swiper-product .swiper-slide {
background-color: var(--swiper-product-bg); }
.swiper-products .swiper-thumb {
position: relative;
padding-top: var(--hl-spacer-xs);
padding-bottom: var(--hl-spacer-xs);
background-color: var(--swiper-product-bg); }
.swiper-products .swiper-thumb .swiper-controls {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: space-between; }
.swiper-products .swiper-thumb .swiper-controls-container-btn {
height: 100%;
display: flex;
align-items: center;
z-index: 1;
--gradient-size: calc(var(--hl-size-icon-md) + 6px);
--gradient-direction: 90deg;
background: var(--swiper-product-bg);
background: linear-gradient(var(--gradient-direction), var(--swiper-product-bg) 0%, var(--swiper-product-bg) var(--gradient-size), transparent 100%); }
.swiper-products .swiper-thumb .swiper-controls-container-btn + .swiper-controls-container-btn {
--gradient-direction: -90deg;
justify-content: flex-end; }
.swiper-products .swiper-thumb .swiper-slide {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-standby);
border-radius: var(--hl-border-radius-default);
max-width: 29%;
max-height: var(--swiper-product-thumb-max-height); }
.swiper-products .swiper-thumb .swiper-slide.swiper-slide-active {
border-color: var(--hl-color-button-bg-light-primary-standby); }
.swiper-products .swiper-thumb .swiper-slide:not(.swiper-slide-active) {
cursor: pointer; }
@media (min-width: 576px) {
.swiper-products .swiper-thumb .swiper-slide {
max-width: 21%; } }
.swiper-products .swiper-thumb img {
max-height: var(--swiper-product-thumb-max-height);
padding-top: var(--hl-spacer-2xs);
padding-bottom: var(--hl-spacer-2xs); }
.modal--contains-swiper .swiper-products {
--swiper-product-bg: var(--hl-color-bg-light-default); }
@media (min-width: 992px) {
.modal--contains-swiper .swiper-products .swiper-thumb .swiper-slide {
max-width: 16%; } }
@media (min-width: 1200px) {
.modal--contains-swiper .swiper-products .swiper-thumb .swiper-slide {
max-width: 14%; } }
.modal--contains-swiper .swiper-products .swiper-product img {
max-height: calc(100vh - var(--swiper-product-thumb-max-height) * 2 - var(--hl-spacer-xl) * 2 - var(--modal-padding));
min-height: 330px;
max-height: calc(100vh - var(--swiper-product-thumb-max-height) * 2 - var(--hl-spacer-xl) * 2 - var(--modal-padding) - var(--hl-spacer-lg)); }
.swiper-module--cards {
--swiper-card-title-color: var(--hl-color-fg-light-important);
--swiper-card-text-color: var(--hl-color-fg-light-default);
overflow: hidden; }
.swiper-module--cards .card-gallery-title {
color: var(--swiper-card-title-color);
font-size: var(--hl-typography-h3-font-size);
line-height: var(--hl-typography-h3-line-height);
letter-spacing: var(--hl-typography-h3-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
margin-top: 0;
font-weight: var(--hl-typography-font-weight-heading-bold); }
.swiper-module--cards .card-gallery__body {
color: var(--swiper-card-text-color); }
.swiper-module--cards .card-gallery > * {
opacity: 0;
transition: transform 0.5s ease 0.2s, opacity 0.2s ease 0.1s;
transform: translateY(60px); }
.swiper-module--cards .card-gallery-title {
transform: translateY(10px);
transition-delay: 0.15s; }
.swiper-module--cards .card-gallery__body {
transition-delay: 0.2s; }
.swiper-module--cards .card-gallery__footer {
margin-top: var(--hl-spacer-md);
transform: translateY(0);
transition-delay: 0.6s;
transition-duration: 0.4s; }
.swiper-module--cards .swiper-fade .swiper-slide-active .card-gallery > * {
opacity: 1;
transform: translateY(0); }
.swiper-module--cards .swiper-gallery-txt .gallery-txt-img {
display: none; }
.swiper-module--cards .swiper-gallery-thumbs {
margin-bottom: var(--hl-spacer-md);
width: 180px;
max-width: 58%; }
@media (min-width: 992px) {
.swiper-module--cards .swiper-gallery-thumbs {
width: 220px; } }
.swiper-module--cards .swiper-gallery-thumbs .gallery-txt-img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain; }
.swiper-module--tv {
max-width: 100%;
overflow: hidden; }
.swiper-module--tv .swiper-slide {
align-self: center; }
.swiper-module--tv .swiper-TV {
width: 520px;
height: auto;
margin: var(--hl-spacer-md) auto;
box-shadow: -8px 5px 8px -2px #000;
border: solid var(--hl-border-width-md) var(--hl-color-border-light-muted);
border-left: solid var(--hl-border-width-md) var(--hl-color-fg-dark-ultra-muted);
border-right: solid var(--hl-border-width-md) var(--hl-color-fg-dark-ultra-muted); }
@media (max-width: 991.98px) {
.swiper-module--tv .swiper-TV {
max-width: 50%; } }
@media (max-width: 767.98px) {
.swiper-module--tv .swiper-TV {
max-width: 60%; } }
.swiper-module--tv .swiper-TV img {
width: 100%;
height: 100%; }
.swiper-module--tv .swiper-TV-thumb {
position: relative;
padding: var(--hl-spacer-2xl) 0;
max-width: 100%; }
.swiper-module--tv .swiper-TV-thumb .swiper-slide {
padding: var(--hl-spacer-xs);
display: flex;
align-items: center;
gap: var(--hl-grid-spacer);
color: var(--hl-color-fg-light-default);
font-weight: var(--hl-typography-font-weight-body-bold);
margin: 0;
font-size: var(--hl-font-size-xs);
position: relative; }
.swiper-module--tv .swiper-TV-thumb .swiper-slide::before {
content: "";
border-left: var(--hl-border-width-default) solid var(--hl-color-border-light-very-muted);
position: absolute;
/* Agrega esta línea */
top: var(--hl-spacer-2xs);
left: 0;
bottom: var(--hl-spacer-2xs); }
.swiper-module--tv .swiper-TV-thumb .swiper-slide p {
margin-bottom: 0;
transition: transform 0.3s ease; }
.swiper-module--tv .swiper-TV-thumb .swiper-slide.swiper-slide-active {
color: var(--hl-color-fg-light-default);
background: var(--hl-color-bg-light-muted);
background: linear-gradient(90deg, rgba(0, 0, 0, var(--hl-opacity-md)) 0%, rgba(0, 0, 0, 0) 100%); }
@media (max-width: 991.98px) {
.swiper-module--tv .swiper-TV-thumb .swiper-slide.swiper-slide-active {
background: none; } }
.swiper-module--tv .swiper-TV-thumb .swiper-slide.swiper-slide-active p {
transform: translateX(-6px); }
.swiper-module--tv .swiper-TV-thumb .swiper-slide.swiper-slide-active::before {
border-color: var(--hl-color-border-light-default); }
.swiper-module--tv .swiper-TV-thumb .swiper-slide:not(.swiper-slide-active) {
cursor: pointer; }
@media (max-width: 991.98px) {
.swiper-module--tv .swiper-TV-thumb .swiper-slide:not(.swiper-slide-active) {
opacity: var(--hl-opacity-md); } }
.swiper-module--tv .swiper-TV-thumb .swiper-slide:not(.swiper-slide-active):hover {
background: var(--hl-color-bg-light-muted);
background: linear-gradient(90deg, rgba(0, 0, 0, var(--hl-opacity-md)) 0%, rgba(0, 0, 0, 0) 100%); }
.swiper-module--tv .swiper-TV-thumb .swiper-slide:not(.swiper-slide-active):hover p {
transform: translateX(-6px); }
.swiper-module--tv .swiper-TV-thumb img {
max-height: var(--swiper-product-thumb-max-height);
padding-top: var(--hl-spacer-2xs);
padding-bottom: var(--hl-spacer-2xs); }
@media (max-width: 991.98px) {
.swiper-module--tv .swiper-TV-thumb .swiper-slide {
max-width: 35%; } }
@media (max-width: 767.98px) {
.swiper-module--tv .swiper-TV-thumb .swiper-slide {
max-width: 50%; } }
@media (max-width: 575.98px) {
.swiper-module--tv .swiper-TV-thumb .swiper-slide {
max-width: 65%; } }
@media (min-width: 992px) {
.swiper-module--tv .swiper-TV-thumb .swiper-wrapper {
transform: none !important; } }
.swiper-module--tv__container {
position: relative; }
@media (max-width: 991.98px) {
.swiper-module--tv__container {
margin-left: calc(var(--hl-grid-spacer) * var(--hl-factor-grid-gutter-width) * -1);
margin-right: calc(var(--hl-grid-spacer) * var(--hl-factor-grid-gutter-width) * -1); }
.swiper-module--tv__container .picture-cover__img {
-o-object-position: 50% calc(50% + 8vw);
object-position: 50% calc(50% + 8vw); } }
.swiper-content-center {
display: flex;
align-items: center;
height: 100%; }
.swiper-module--img {
position: absolute; }
.bg-dark {
--swiper-pagination-bullet-inactive-color: var(--hl-color-button-bg-white-standby);
--swiper-card-text-color: var(--hl-color-fg-dark-default);
--swiper-card-title-color: var(--hl-color-fg-dark-important); }
.wrap-swiper-center-as-fullwidth {
--swiper-center-padding-container: var(--hl-spacer-lg);
overflow-x: hidden;
--slide-width: min(300px, 100%); }
.wrap-swiper-center-as-fullwidth .swiper {
overflow: initial; }
@media (min-width: 992px) {
.wrap-swiper-center-as-fullwidth {
--slide-width: 360px; }
.wrap-swiper-center-as-fullwidth .swiper-module {
padding: var(--swiper-center-padding-container) 0; } }
.wrap-swiper-center-as-fullwidth .swiper-module .carousel-wrapper {
padding: 0 var(--swiper-center-padding-container); }
@media (max-width: 991.98px) {
.wrap-swiper-center-as-fullwidth {
margin-left: calc(var(--hl-grid-spacer) * var(--hl-factor-grid-gutter-width) * -1);
margin-right: calc(var(--hl-grid-spacer) * var(--hl-factor-grid-gutter-width) * -1);
border: 0; }
.wrap-swiper-center-as-fullwidth .swiper-module {
padding-bottom: 0; } }
@media (forced-colors: active) {
.swiper-pagination-bullet:hover .swiper-pagination-circle,
.swiper-pagination-bullet-active .swiper-pagination-circle {
--swiper-pagination-bullet-inactive-color: Highlight; }
.swiper-products .swiper-thumb .swiper-slide {
--hl-color-border-light-interaction-standby: ButtonText; }
.swiper-products .swiper-thumb .swiper-slide.swiper-slide-active {
--hl-color-button-bg-light-primary-standby: Highlight; } }
.hl-table {
border: 0;
color: var(--hl-color-fg-light-default);
width: 100%; }
.hl-table thead th {
position: relative;
background-color: var(--hl-color-bg-light-default);
vertical-align: middle;
white-space: nowrap;
padding: var(--hl-spacer-md);
border: 0;
border-bottom: var(--hl-border-width-md) solid var(--hl-color-bg-light-muted); }
.hl-table tr {
border-bottom: var(--hl-border-width-default) solid var(--hl-color-bg-light-muted); }
.hl-table td {
padding: var(--hl-spacer-md);
border-bottom: 0; }
.hl-table__th-group {
display: flex;
justify-content: space-between;
align-items: stretch;
gap: var(--hl-spacer-2xs);
position: relative;
padding: 0; }
.hl-table__th-group span {
padding: var(--hl-spacer-sm); }
.hl-table__th-group.custom-control {
align-items: flex-start; }
.hl-table tbody + tbody {
border-top: calc(2 * var(--hl-border-width-default)) solid var(--hl-color-bg-light-muted); }
.hl-table tbody tr th {
padding: var(--hl-spacer-md); }
.hl-table__cell--important {
font-weight: var(--hl-typography-font-weight-body-bold); }
.hl-table__cell--text-right {
text-align: right; }
.hl-table__cell--text-left {
text-align: left; }
.hl-table__cell--text-center {
text-align: center; }
.hl-table__cell--top {
vertical-align: top; }
.hl-table__cell--bottom {
vertical-align: bottom; }
.hl-table__cell--middle {
vertical-align: middle; }
.hl-table__cell.hl-table__cell.hl-table__cell-responsive--desktop {
display: none; }
@media (min-width: 576px) {
.hl-table__cell.hl-table__cell.hl-table__cell-responsive--desktop {
display: table-cell; } }
@media (min-width: 576px) {
.hl-table__cell.hl-table__cell.hl-table__cell-responsive--mobile {
display: none; } }
.hl-table__cell-view {
display: none; }
.hl-table--view-1 .hl-table__cell-view.hl-table__cell-view--1 {
display: table-cell; }
.hl-table--view-2 .hl-table__cell-view.hl-table__cell-view--2 {
display: table-cell; }
@media (max-width: 767.98px) {
.hl-table__cell-view--mobile {
display: table-cell; } }
@media (min-width: 768px) and (max-width: 1199.98px) {
.hl-table__cell-view--tablet {
display: table-cell; } }
@media (min-width: 992px) {
.hl-table__cell-view--desktop {
display: table-cell; } }
.hl-table__row--disabled {
color: var(--hl-color-fg-light-disabled); }
.hl-table__row--disabled .hl-tag {
--tag-bg-color: var(--hl-color-bg-light-muted);
--tag-text-color: var(--hl-color-button-fg-light-black-standby); }
.hl-table__row--success {
background-color: var(--hl-table-color-bg-light-success); }
.hl-table__row--info {
background-color: var(--hl-table-color-bg-light-info); }
.hl-table__row--danger {
background-color: var(--hl-table-color-bg-light-danger); }
.hl-table__row--warning {
background-color: var(--hl-table-color-bg-light-warning); }
.hl-table__container {
background: var(--hl-color-bg-light-default);
padding: 0; }
.hl-table__footer {
display: flex;
gap: var(--hl-spacer-md);
flex-direction: row;
margin-top: var(--hl-spacer-lg);
flex-wrap: wrap;
justify-content: center; }
@media (min-width: 1200px) {
.hl-table__footer {
align-items: center;
justify-content: space-between; } }
.hl-table__footer__info {
flex-grow: 1;
color: var(--hl-color-fg-light-muted); }
.hl-table__footer__filter {
align-items: center;
display: flex;
flex-wrap: nowrap;
gap: var(--hl-spacer-sm); }
.hl-table__footer__filter label {
flex-shrink: 0; }
.hl-table__footer .pagination {
margin: 0 auto; }
@media (min-width: 576px) {
.hl-table__footer .pagination {
margin: 0; } }
.hl-table__scroll-x {
display: block;
position: relative;
overflow: auto;
border: var(--hl-border-width-default) solid var(--hl-color-bg-light-muted);
border-bottom: 0; }
.hl-table__scroll-x .hl-table {
border: 0; }
.hl-table__scroll-x .hl-table.hl-table--sortable thead {
border-top: 0;
border-left: 0;
border-right: 0; }
@media (max-width: 991.98px) {
.hl-table__scroll-x {
scrollbar-width: none;
background-image: linear-gradient(to right, var(--hl-color-bg-light-default), rgba(255, 255, 255, 0)), linear-gradient(to left, var(--hl-color-bg-light-default), rgba(255, 255, 255, 0)), linear-gradient(to right, var(--hl-color-bg-light-alpha), rgba(255, 255, 255, 0)), linear-gradient(to left, var(--hl-color-bg-light-alpha), rgba(255, 255, 255, 0));
background-position: left center, right center, left center, right center;
background-repeat: no-repeat;
background-size: 80px 100%, 80px 100%, 20px 100%, 20px 100%;
background-attachment: local, local, scroll, scroll; } }
.hl-table__scroll-x::-webkit-scrollbar {
display: none; }
@media (max-width: 575.98px) {
.hl-table__scroll-x-sm {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.hl-table__scroll-x-sm > .hl-table--bordered {
border: 0; } }
@media (max-width: 767.98px) {
.hl-table__scroll-x-md {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.hl-table__scroll-x-md > .hl-table--bordered {
border: 0; } }
@media (max-width: 991.98px) {
.hl-table__scroll-x-lg {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.hl-table__scroll-x-lg > .hl-table--bordered {
border: 0; } }
@media (max-width: 1199.98px) {
.hl-table__scroll-x-xl {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.hl-table__scroll-x-xl > .hl-table--bordered {
border: 0; } }
@media (max-width: 1399.98px) {
.hl-table__scroll-x-xxl {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.hl-table__scroll-x-xxl > .hl-table--bordered {
border: 0; } }
@media (max-width: 1879.98px) {
.hl-table__scroll-x-xxxl {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.hl-table__scroll-x-xxxl > .hl-table--bordered {
border: 0; } }
.hl-table__scroll-x {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.hl-table__scroll-x > .hl-table--bordered {
border: 0; }
.hl-table--height-75 {
display: block;
position: relative;
overflow: auto;
max-height: calc(75vh - (var(--hl-nav-padding-y) * 2 + var(--hl-nav-logo-height))); }
.hl-table--height-75:after {
content: "";
overflow: auto;
position: sticky;
display: block;
bottom: 0;
left: 0;
width: 100%;
margin-top: -20px;
height: 20px;
background-image: linear-gradient(to top, var(--hl-color-bg-light-alpha), rgba(255, 255, 255, 0));
background-attachment: local, local, scroll, scroll;
z-index: 2; }
.hl-table--height-75.table__content-border {
border-bottom: var(--hl-border-width-default) solid var(--hl-color-bg-light-muted); }
.hl-table-sticky-header thead th, .hl-table--sticky-header thead th {
position: sticky;
top: 0;
background: var(--hl-color-bg-light-default);
z-index: 2; }
.hl-table-sticky-header thead th::after, .hl-table--sticky-header thead th::after {
content: "";
position: absolute;
left: 0;
bottom: calc(-1 * var(--hl-border-width-md));
/* Ajusta según el grosor de la sombra */
width: 100%;
height: var(--hl-border-width-md);
background: var(--hl-color-bg-light-muted);
pointer-events: none; }
.hl-table-sticky-header thead th::before, .hl-table--sticky-header thead th::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: calc(-1 * var(--hl-border-width-md));
/* Ajusta según el grosor de la sombra */
height: calc(100% + var(--hl-border-width-md));
width: var(--hl-border-width-md);
background: var(--hl-color-bg-light-muted);
pointer-events: none; }
.hl-table-sticky-header thead tr,
.hl-table-sticky-header thead th, .hl-table--sticky-header thead tr,
.hl-table--sticky-header thead th {
border-bottom: 0; }
.hl-table-sticky-first-column tbody th:first-child,
.hl-table-sticky-first-column tbody td:first-child,
.hl-table-sticky-first-column thead th:first-child,
.hl-table-sticky-first-column thead td:first-child {
position: sticky;
left: 0;
background: var(--hl-color-bg-light-default); }
.hl-table--bordered thead th:not(:last-child) {
border-right: var(--hl-border-width-default) solid var(--hl-color-bg-light-muted); }
.hl-table--bordered thead td {
border-bottom-width: calc(2 * var(--hl-border-width-default)); }
.hl-table--bordered tbody td:not(:last-child),
.hl-table--bordered tbody th:not(:last-child) {
border-right: var(--hl-border-width-default) solid var(--hl-color-bg-light-muted); }
.hl-table--bordered tbody tr:last-child {
border-bottom: 0; }
.hl-table--borderless th,
.hl-table--borderless td,
.hl-table--borderless thead th,
.hl-table--borderless tbody + tbody {
border: 0; }
.hl-table--border-top {
--hl-table-border-top-box-shadow-color: var(--hl-table-color-border-top-success);
border-top: var(--hl-border-width-default) solid var(--hl-color-bg-light-muted);
margin-top: var(--hl-spacer-xs);
border-top: 0; }
.hl-table--border-top.hl-table {
border: var(--hl-border-width-default) solid var(--hl-color-bg-light-muted);
border-top: 0; }
.hl-table--border-top--success {
box-shadow: 0 calc(-1 * var(--hl-border-width-lg)) 0 0 var(--hl-table-color-border-top-success); }
.hl-table--border-top--info {
box-shadow: 0 calc(-1 * var(--hl-border-width-lg)) 0 0 var(--hl-table-color-border-top-info); }
.hl-table--border-top--warning {
box-shadow: 0 calc(-1 * var(--hl-border-width-lg)) 0 0 var(--hl-table-color-border-top-warning); }
.hl-table--border-top--danger {
box-shadow: 0 calc(-1 * var(--hl-border-width-lg)) 0 0 var(--hl-table-color-border-top-danger); }
.hl-table--border-top--blue-light {
box-shadow: 0 calc(-1 * var(--hl-border-width-lg)) 0 0 var(--hl-color-supporting-blue-light); }
.hl-table--border-top--purple-light {
box-shadow: 0 calc(-1 * var(--hl-border-width-lg)) 0 0 var(--hl-color-supporting-purple-light); }
.hl-table--striped tbody tr:nth-of-type(odd) {
background-color: var(--hl-color-border-light-muted); }
.hl-table--hover tr, .hl-table--hoverable tr {
position: relative; }
.hl-table--hover tr:hover td, .hl-table--hoverable tr:hover td {
background-color: var(--hl-color-border-light-very-muted); }
.hl-table--hover.table-striped tr:hover, .hl-table--hoverable.table-striped tr:hover {
background-color: var(--hl-color-bg-light-very-muted); }
.hl-table--hover.table-row-bg tbody tr:hover td, .hl-table--hoverable.table-row-bg tbody tr:hover td {
background-color: var(--hl-color-border-light-muted); }
.hl-table--clickable thead tr:not(.hl-table__row--disabled) {
cursor: inherit; }
.hl-table--clickable tr:not(.hl-table__row--disabled) {
cursor: pointer; }
.hl-table--clickable tr:not(.hl-table__row--disabled):hover td {
background-color: var(--hl-color-border-light-very-muted); }
.hl-table--clickable.table-striped tr:not(.hl-table__row--disabled):hover {
background-color: var(--hl-color-bg-light-very-muted); }
.hl-table--clickable.table-row-bg tbody tr:not(.hl-table__row--disabled):hover td {
background-color: var(--hl-color-border-light-muted); }
.hl-table--un-bordered tbody tr {
border-bottom: 0; }
.hl-table--text-right > thead > tr > th, .hl-table--text-right > tbody > tr > td {
text-align: right; }
.hl-table--text-left > thead > tr > th, .hl-table--text-left > tbody > tr > td {
text-align: left; }
.hl-table--text-center > thead > tr > th, .hl-table--text-center > tbody > tr > td {
text-align: center; }
.hl-table--align-bottom > thead > tr > th, .hl-table--align-bottom tbody > tr > td {
vertical-align: bottom; }
.hl-table--align-top > thead > tr > th, .hl-table--align-top > tbody > tr > td {
vertical-align: top; }
.hl-table--align-middle > thead > tr > th, .hl-table--align-middle > tbody > tr > td {
vertical-align: middle; }
.hl-table--expand > thead > tr > th.hl-table__cell--expand, .hl-table--expand > tbody > tr > td.hl-table__cell--expand {
width: 100%; }
.hl-table--sortable thead {
border: var(--hl-border-width-default) solid var(--hl-color-bg-light-muted); }
.hl-table--sortable thead .hl-table__th-group .btn:active, .hl-table--sortable thead .hl-table__th-group .charger-btn:active, .hl-table--sortable thead .hl-table__th-group .subnav__nav__item:active {
background-color: var(--hl-color-fg-light-muted); }
.hl-table--sortable thead .hl-table__th-group .btn:active svg path, .hl-table--sortable thead .hl-table__th-group .charger-btn:active svg path, .hl-table--sortable thead .hl-table__th-group .subnav__nav__item:active svg path {
fill: var(--hl-color-core-white); }
.hl-table--sortable thead th {
padding: 0; }
.hl-table--sortable thead th:not(:last-child) {
border-right: var(--hl-border-width-default) solid var(--hl-color-bg-light-muted); }
.hl-table-table-sm th,
.hl-table-table-sm td {
padding: var(--hl-spacer-2xs); }
.hl-table--skeleton td span,
.hl-table--skeleton th span {
float: left;
width: 100px;
height: 16px;
margin-top: 12px;
border-radius: 7px;
background-image: linear-gradient(90deg, var(--hl-color-bg-light-muted) 0px, rgba(229, 229, 229, 0.8) 40px, var(--hl-color-bg-light-muted) 80px);
background-size: 600px;
animation: shine-lines 2s infinite ease-out; }
.modal--drawer--tariff-comparator {
--padding-top-swiper-comparative: 3.1rem;
--padding-x-modal-swiper-comparative: calc(var(--hl-grid-spacer) * 1.5); }
.modal--drawer--tariff-comparator .modal-header .modal-title {
margin-top: var(--padding-top-swiper-comparative); }
.modal--drawer--tariff-comparator .modal-body {
padding-left: 0;
padding-right: 0; }
.modal--drawer--tariff-comparator .modal-body .modal-header {
padding-top: 0;
padding-left: var(--padding-x-modal-swiper-comparative); }
.modal--drawer--tariff-comparator .modal-dialog {
max-width: var(--breakpoint-xxl); }
@media (min-width: 768px) {
.modal--drawer--tariff-comparator {
--padding-top-swiper-comparative: 6.6rem;
--padding-x-modal-swiper-comparative: 22px; } }
@media (min-width: 1200px) {
.modal--drawer--tariff-comparator {
--padding-top-swiper-comparative: 4.8rem;
--padding-x-modal-swiper-comparative: 110px; } }
.modal--drawer--tariff-comparator .swiper-slide:not(:last-child) .comparative-table--values {
width: calc(100% + 16px); }
.modal--drawer--tariff-comparator .swiper-slide:not(:last-child) .comparative-table--values td {
padding-right: calc(var(--hl-spacer-md) * 2); }
@media (min-width: 768px) {
.modal--drawer--tariff-comparator-V01 .modal-body {
padding-left: var(--padding-x-modal-swiper-comparative); }
.modal--drawer--tariff-comparator-V01 .modal-body .modal-header {
padding-left: 0; } }
.modal--drawer--tariff-comparator-V01 .comparative-row {
--comparative-list-top-margin: unset;
display: flex;
flex-wrap: wrap;
align-items: stretch; }
.modal--drawer--tariff-comparator-V01 .comparative-row .comparative-col--keys {
align-self: flex-end;
padding-bottom: var(--pagination-y-spacing, 0);
flex: 0 0 10rem;
width: 10rem; }
.modal--drawer--tariff-comparator-V01 .comparative-row .comparative-col--values {
flex: 0 0 calc(100% - 10rem);
width: calc(100% - 10rem); }
@media (min-width: 768px) {
.modal--drawer--tariff-comparator-V01 .comparative-row .comparative-col--values .container-fluid, .modal--drawer--tariff-comparator-V01 .comparative-row .comparative-col--values .container-sm, .modal--drawer--tariff-comparator-V01 .comparative-row .comparative-col--values .container-md, .modal--drawer--tariff-comparator-V01 .comparative-row .comparative-col--values .container-lg, .modal--drawer--tariff-comparator-V01 .comparative-row .comparative-col--values .container-xl, .modal--drawer--tariff-comparator-V01 .comparative-row .comparative-col--values .container-xxl {
padding-left: 0; } }
@media (min-width: 768px) {
.modal--drawer--tariff-comparator-V01 .comparative-row .comparative-col--values tbody tr:nth-of-type(4n-2) {
background-color: var(--hl-color-bg-light-ultra-muted); } }
.modal--drawer--tariff-comparator-V01 .comparative-row .comparative-col--values tbody tr:nth-of-type(odd) {
visibility: hidden; }
@media (min-width: 768px) {
.modal--drawer--tariff-comparator-V01 .comparative-row .comparative-col--values tbody tr:nth-of-type(odd) {
display: none; } }
.modal--drawer--tariff-comparator-V01 .comparative-row .comparative-col--values tbody tr:nth-of-type(1n) {
visibility: visible; }
@media (max-width: 767.98px) {
.modal--drawer--tariff-comparator-V01 .comparative-row .comparative-col--values tbody tr:nth-of-type(1n) {
display: block; } }
@media (max-width: 767.98px) {
.modal--drawer--tariff-comparator-V01 .comparative-row .comparative-col--values tbody tr:nth-of-type(1n) {
background-color: var(--hl-color-bg-light-default); }
.modal--drawer--tariff-comparator-V01 .comparative-row .comparative-col--values tbody tr:nth-of-type(odd) {
background-color: var(--hl-color-bg-light-ultra-muted); } }
@media (max-width: 767.98px) {
.modal--drawer--tariff-comparator-V01 .comparative-row .comparative-col--keys, .modal--drawer--tariff-comparator-V01 .comparative-row .comparative-col--values {
flex: 0 0 100%;
width: 100%; }
.modal--drawer--tariff-comparator-V01 .comparative-row .comparative-col--keys {
position: absolute;
z-index: -1; } }
@media (max-width: 767.98px) {
.modal--drawer--tariff-comparator-V01 .comparative-row .comparative-table--keys {
display: none; } }
.modal--drawer--tariff-comparator-V01 .comparative-row .comparative-table--keys tbody tr:nth-of-type(2n-1) {
background-color: var(--hl-color-bg-light-ultra-muted); }
@media (max-width: 767.98px) {
.modal--drawer--tariff-comparator-V01 .comparative-row .comparative-table--keys tbody tr {
margin-bottom: calc(var(--hl-typography-line-height-very-increased) * var(--hl-spacer-md) * 2);
display: block;
background-color: var(--hl-color-bg-light-ultra-muted); } }
.modal--drawer--tariff-comparator-V01 .comparative-row .comparative-table--keys td {
font-weight: var(--hl-typography-font-weight-body-bold); }
.modal--drawer--tariff-comparator-V02 .comparative-row .comparative-col__table .table {
border: 0; }
.modal--drawer--tariff-comparator-V02 .comparative-row .comparative-col--values .container-fluid, .modal--drawer--tariff-comparator-V02 .comparative-row .comparative-col--values .container-sm, .modal--drawer--tariff-comparator-V02 .comparative-row .comparative-col--values .container-md, .modal--drawer--tariff-comparator-V02 .comparative-row .comparative-col--values .container-lg, .modal--drawer--tariff-comparator-V02 .comparative-row .comparative-col--values .container-xl, .modal--drawer--tariff-comparator-V02 .comparative-row .comparative-col--values .container-xxl {
padding-left: 0;
padding-right: 0; }
.modal--drawer--tariff-comparator-V02 .comparative-row .comparative-col--values .swiper-module--full-width .swiper-container {
padding-right: calc(var(--hl-grid-spacer) * 1.5);
padding-left: var(--modal-padding); }
@media (min-width: 1200px) {
.modal--drawer--tariff-comparator-V02 .comparative-row .comparative-col--values .swiper-module--full-width .swiper-container {
padding-left: var(--hl-spacer-5xl);
padding-top: 0; } }
.modal--drawer--tariff-comparator-V02 .comparative-row .comparative-col--values .swiper-module--full-width .swiper-module-container {
margin-left: initial;
margin-right: initial;
width: 100%; }
.modal--drawer--tariff-comparator-V02 .comparative-row .comparative-col--values tbody tr:nth-of-type(1n) {
background-color: var(--hl-color-bg-light-default); }
.modal--drawer--tariff-comparator-V02 .comparative-row .comparative-col--values tbody tr:nth-of-type(odd) {
background-color: var(--hl-color-bg-light-ultra-muted); }
.modal--drawer--tariff-comparator-V02 .comparative-row .comparative-col--values tbody td {
font-size: var(--hl-font-size-sm);
padding-top: var(--hl-spacer-xs);
padding-bottom: var(--hl-spacer-xs); }
.tariff-searcher {
position: relative; }
.tariff-searcher__close {
right: 0px;
top: 5px;
z-index: 3;
position: absolute;
display: block;
margin-left: auto; }
.video-container__video__embed-responsive {
position: relative;
display: block;
overflow: hidden;
height: 0;
padding: 0; }
.video-container__video__embed-responsive-padding {
padding: 30%; }
.video-container__video__item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0; }
.roadmap {
--roadmap-icon-size: 10px;
--roadmap-spacing-left: calc(var(--roadmap-icon-size) + 8px);
--roadmap-indent-left: var(--hl-spacer-md);
--roadmap-vertical-spacing: 10px;
--roadmap-bg-color: transparent;
--roadmap-horizontal-line-color: var(--hl-color-border-light-muted);
--roadmap-text-color: var(--hl-color-fg-light-default);
--roadmap-text-muted-color: var(--hl-color-fg-light-muted);
padding-top: var(--hl-spacer-xs);
background-color: var(--roadmap-bg-color); }
.roadmap-wrap {
margin-left: var(--hl-spacer-xs);
position: relative; }
.roadmap__vertical-line {
position: absolute;
top: 10px;
left: calc(var(--roadmap-icon-size) / 2);
height: calc(100% - 24px);
width: 2px;
border-radius: 2px 2px 0 0;
background-color: var(--hl-color-bg-light-primary);
transform: translateX(-50%); }
.roadmap__item {
margin-left: var(--roadmap-spacing-left);
padding-bottom: var(--roadmap-vertical-spacing);
position: relative;
color: var(--roadmap-text-color); }
.roadmap__item:not(:last-of-type) {
margin-bottom: var(--roadmap-vertical-spacing);
border-bottom: var(--hl-border-width-default) solid var(--roadmap-horizontal-line-color); }
.roadmap__item-icon {
position: absolute;
top: 6px;
left: calc(var(--roadmap-spacing-left) * -1);
background: var(--hl-color-bg-light-primary);
height: var(--roadmap-icon-size);
width: var(--roadmap-icon-size);
border-radius: 50%; }
.roadmap__item-details {
padding-left: var(--roadmap-indent-left);
padding-right: var(--hl-spacer-md); }
.roadmap__item-details__header {
display: flex;
justify-content: space-between;
gap: var(--hl-spacer-xs);
line-height: var(--hl-typography-line-height-default); }
.roadmap__item-details__header .roadmap-price {
flex-shrink: 0; }
.roadmap__item-details__body {
color: var(--roadmap-text-muted-color); }
.roadmap__item-details__body:not(:empty) {
padding-top: var(--hl-spacer-xs); }
.roadmap__item-details__body ul:last-child,
.roadmap__item-details__body p:last-child {
margin-bottom: 0; }
.roadmap--dark {
--roadmap-bg-color: var(--hl-color-bg-dark-default);
--roadmap-horizontal-line-color: var(--hl-color-border-dark-muted);
--roadmap-text-color: var(--hl-color-fg-dark-default);
--roadmap-text-muted-color: var(--hl-color-fg-dark-muted); }
.roadmap--dark .price-block {
--price-block-color: var(--hl-color-fg-dark-important); }
@media (forced-colors: active) {
.roadmap {
--roadmap-horizontal-line-color: GrayText; }
.roadmap__vertical-line {
background-color: CanvasText; }
.roadmap__item-icon {
background-color: CanvasText; } }
.checkout-card {
--checkout-padding: var(--hl-spacer-lg);
--checkout-bg-color: var(--hl-color-bg-light-default);
--checkout-text-color: var(--hl-color-fg-light-default);
--checkout-title-color: var(--hl-color-fg-light-important);
--checkout-text-muted-color: var(--hl-color-fg-light-muted);
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: var(--checkout-bg-color);
background-clip: border-box;
border: var(--hl-border-width-sm) solid var(--hl-color-border-light-default);
border-radius: var(--hl-border-radius-default); }
.checkout-card .text-muted {
color: var(--checkout-text-muted-color) !important; }
.checkout-card--dark {
--checkout-text-color: var(--hl-color-fg-dark-default);
--checkout-title-color: var(--hl-color-fg-dark-important);
--checkout-text-muted-color: var(--hl-color-fg-dark-muted);
--checkout-bg-color: var(--hl-color-bg-dark-default);
--checkout-text-shadow-color: rgba(var(--hl-color-fg-light-important), 0.3);
--hl-icon-color: var(--checkout-title-color); }
.checkout-card__header {
padding: var(--checkout-padding) var(--checkout-padding) 0;
color: var(--checkout-title-color); }
.checkout-card__header p {
margin: 0; }
.checkout-card__row {
display: grid;
grid-template-columns: 1fr auto; }
.checkout-card__row > *:nth-child(2) {
margin-left: var(--hl-spacer-xs); }
.checkout-card__row--align-center {
align-items: center; }
.checkout-card__row--align-end {
align-items: flex-end; }
.checkout-card__row--top-spacing {
margin-top: var(--hl-spacer-xs); }
.checkout-card__row--bottom-spacing {
margin-bottom: var(--hl-spacer-xs); }
.checkout-card__body {
padding: var(--checkout-padding);
color: var(--checkout-text-color); }
.checkout-card__body p:last-child,
.checkout-card__body ul:last-child {
margin-bottom: 0; }
.checkout-card__body + .checkout-card__footer:not([class*=bg-]) {
padding-top: 0; }
.checkout-card__footer {
padding: var(--checkout-padding);
border-bottom-left-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default));
border-bottom-right-radius: calc(var(--hl-border-radius-default) - var(--hl-border-width-default)); }
.checkout-card__footer:empty {
display: none; }
.checkout-card [class^=checkout-card__title-] {
color: var(--checkout-title-color);
margin-top: 0;
margin-bottom: 0; }
.checkout-card__title-0 {
font-size: var(--hl-typography-h1-font-size);
line-height: var(--hl-typography-h1-line-height);
letter-spacing: var(--hl-typography-h1-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold); }
.checkout-card__title-1 {
font-size: var(--hl-typography-h3-font-size);
line-height: var(--hl-typography-h3-line-height);
letter-spacing: var(--hl-typography-h3-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold); }
.checkout-card__title-2 {
font-size: var(--hl-typography-h5-font-size);
line-height: var(--hl-typography-h5-line-height);
letter-spacing: var(--hl-typography-h5-letter-spacing);
margin-top: var(--hl-spacer-2xl);
margin-bottom: var(--hl-spacer-lg);
font-weight: var(--hl-typography-font-weight-heading-bold);
line-height: var(--hl-typography-line-height-default); }
.checkout-card__title-3 {
font-size: var(--hl-typography-p2-font-size);
line-height: var(--hl-typography-p2-line-height);
letter-spacing: var(--hl-typography-p2-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold); }
.selectable--lines {
--color-bg-container: var(--hl-color-bg-light-default);
--background-color: var(--hl-color-supporting-green-light);
--foreground-color: var(--hl-color-supporting-green);
--box-outline-color: transparent;
--card-opacity: var(--hl-opacity-md); }
.selectable--lines--type-line-01 {
--background-color: var(--hl-color-supporting-green-light);
--foreground-color: var(--hl-color-supporting-green); }
.selectable--lines--type-line-02 {
--background-color: var(--hl-color-supporting-purple-light);
--foreground-color: var(--hl-color-supporting-purple); }
.selectable--lines--type-line-03 {
--background-color: var(--hl-color-supporting-blue-light);
--foreground-color: var(--hl-color-supporting-blue); }
.selectable--lines--type-line-all-lines {
--background-color: var(--hl-color-supporting-orange-light);
--foreground-color: var(--hl-color-supporting-orange); }
.selectable--lines .selectable__container {
position: relative;
grid-template-areas: "selectable-header"; }
.selectable--lines .selectable__container::after {
content: "";
bottom: 0;
left: 0;
right: 0;
height: var(--hl-border-width-lg);
background-color: var(--background-color);
position: absolute; }
.selectable--lines .selectable__header {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
gap: 0 var(--hl-spacer-xs);
align-items: center;
padding-bottom: var(--hl-border-width-lg); }
.selectable--lines .selectable__header .selectable__icon {
--icon-size: 34px;
padding: 3px;
box-sizing: content-box;
color: var(--foreground-color);
background: var(--background-color);
border-radius: 50%;
display: grid;
place-items: center; }
.selectable--lines .selectable__header .selectable__icon-txt {
font-size: 24px;
line-height: 1; }
.selectable--lines .selectable__header .selectable__icon-img {
border-radius: var(--hl-border-radius-full);
width: 100%;
height: 100%; }
.selectable--lines .selectable__header .selectable__icon .hl-icon {
width: initial;
height: initial; }
.selectable--lines .selectable__header .selectable__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px; }
.selectable--lines .selectable__header .selectable__subtitle {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px; }
@media (min-width: 576px) {
.selectable--lines .selectable__header {
grid-template-columns: auto 1fr;
grid-template-rows: auto; }
.selectable--lines .selectable__header .selectable__icon {
margin-bottom: 0; } }
.bg-dark .selectable--lines {
--color-bg-container: var(--hl-color-bg-dark-default); }
.swiper-slide .selectable--lines input:not(:checked) + .selectable__container {
opacity: var(--hl-opacity-md); }
@media (any-hover: none) {
.swiper-slide .selectable--lines:not(.swiper-slide .selectable--lines--dark) input:not(:checked) + .selectable__container:hover, .swiper-slide .selectable--lines:not(.swiper-slide .selectable--lines--dark) input:not(:checked) + .selectable__container:active {
--color-border-container: var(--hl-color-border-light-interaction-standby);
--color-input-state: transparent;
--color-input-border-state: var(--hl-color-border-light-interaction-standby);
--color-input-dot-state: transparent; } }
.swiper-slide .selectable__container {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
.input-group--radios .input-group-prepend .input-group-text {
border-right: 0; }
.input-group--radios .btn-group {
box-shadow: inset 0 0 0 var(--hl-border-width-default) var(--hl-color-border-light-default) !important; }
@media (forced-colors: active) {
.input-group--radios .btn-group {
border: var(--hl-border-width-default) solid ButtonText; }
.input-group--radios .btn-group .active {
position: relative; }
.input-group--radios .btn-group .active::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
outline: var(--hl-border-width-default) solid Highlight; } }
.container-icon-frame__title {
color: var(--hl-color-fg-light-muted);
font-size: var(--hl-typography-p3-font-size);
line-height: var(--hl-typography-p3-line-height);
letter-spacing: var(--hl-typography-p3-letter-spacing);
font-weight: var(--hl-typography-font-weight-body-bold);
margin-bottom: var(--hl-spacing-atom);
padding: 0; }
.container-icon-frame__list {
display: flex;
flex-wrap: wrap;
gap: var(--hl-spacing-atom);
padding: 0;
margin: 0;
list-style-type: ""; }
.icon-frame {
--frame-size: 40px;
--icon-size: 32px;
--frame-radius: 6px;
width: var(--frame-size);
height: var(--frame-size);
border-radius: var(--frame-radius);
margin: 0;
display: grid;
place-items: center; }
.icon-frame hl-icon i,
.icon-frame img {
display: block; }
.icon-frame > * {
max-width: var(--icon-size);
max-height: var(--icon-size); }
.icon-frame--sm {
--frame-size: 24px;
--frame-radius: 4px;
--icon-size: 16px; }
.icon-frame--md {
--frame-size: 48px;
--frame-radius: 8px;
--icon-size: 36px; }
.icon-frame--xl {
--frame-size: 56px;
--frame-radius: 12px;
--icon-size: 40px; }
.icon-frame--xxl {
--frame-size: 72px;
--frame-radius: 16px;
--icon-size: 48px; }
.icon-frame--img > * {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
border-radius: inherit;
-o-object-fit: cover;
object-fit: cover; }
.icon-frame--circled {
--frame-radius: 100000px; }
.icon-frame--circled.icon-frame {
--icon-size: 24px; }
.icon-frame--circled.icon-frame--md {
--icon-size: 32px; }
.icon-frame--circled.icon-frame--xl {
--icon-size: 40px; }
.icon-frame--circled.icon-frame--xxl {
--icon-size: 48px; }
.ecosistema-svg > svg {
max-width: 360px; }
.ecosistema-svg svg a {
cursor: pointer; }
.ecosistema-svg svg a g,
.ecosistema-svg svg a polygon,
.ecosistema-svg svg a rect {
fill: transparent; }
.ecosistema-svg svg a .interactive {
fill: var(--hl-color-primary);
opacity: 0;
transition: fill var(--hl-transition-normal), opacity var(--hl-transition-normal); }
.ecosistema-svg svg a .txt {
fill: var(--hl-color-fg-dark-important);
opacity: 0;
transition: fill var(--hl-transition-normal), opacity var(--hl-transition-normal); }
.ecosistema-svg svg a:hover .interactive, .ecosistema-svg svg a:focus .interactive {
fill: var(--hl-color-primary);
opacity: 0.75; }
.ecosistema-svg svg a:hover .txt, .ecosistema-svg svg a:focus .txt {
opacity: 1;
fill: var(--hl-color-core-black); }
.ecosistema-svg svg a:active .interactive {
opacity: 0.9; }
.ecosistema-svg svg a:active .txt {
opacity: 1;
fill: var(--hl-color-core-black); }
.ecosistema-svg svg a.active .interactive {
fill: var(--hl-color-primary);
opacity: 0.5; }
.ecosistema-svg svg a.active .txt {
opacity: 1;
fill: var(--hl-color-core-white); }
.modal-cookies-backdrop {
z-index: calc(var(--hl-z-index-dropdown) + 2); }
.header-orange-rebrand2022 {
z-index: calc(var(--hl-z-index-dropdown) + 2); }
.header-orange-rebrand2022 .header-orange-rebrand2022-nav {
max-width: var(--breakpoint-xxl); }
.header-orange-rebrand2022 .header-orange-rebrand2022-nav .header-orange-rebrand2022-container {
padding-left: calc(var(--hl-grid-spacer) * var(--hl-factor-grid-gutter-width));
padding-right: calc(var(--hl-grid-spacer) * var(--hl-factor-grid-gutter-width)); }
.footer-orange .container-flex-oms-external {
max-width: var(--breakpoint-xxl);
margin: auto;
padding-left: calc(var(--hl-grid-spacer) * 2 - 13px);
padding-right: calc(var(--hl-grid-spacer) * 2 - 13px); }
@media (min-width: 768px) {
.footer-orange .container-flex-oms-external {
padding-right: calc(var(--hl-grid-spacer) * 2 - 18px);
padding-left: calc(var(--hl-grid-spacer) * 2 - 18px); } }
@media (min-width: 992px) {
.footer-orange .container-flex-oms-external {
padding-right: calc(var(--hl-grid-spacer) * 3 - 10px);
padding-left: calc(var(--hl-grid-spacer) * 3 - 10px); } }
.orange-cms-ext .container-flex,
.orange-cms-ext div[class^=col-flex-] {
padding-left: 0;
padding-right: 0; }
.select2-container--custom {
--tag-radius: var(--hl-border-radius-full);
--tag-bg-color: var(--hl-color-button-bg-white-standby);
--tag-text-color: var(--hl-color-fg-light-important);
--tag-height: 26px;
--tag-padding-x: 12px;
--tag-padding-y: 4px;
--tag-iconsize: 14px;
--padding-hack: 3px;
--tag-border-color: var(--hl-color-border-light-secondary); }
.select2-container--custom .select2-selection {
display: inline-flex;
align-items: center;
gap: var(--hl-spacer-2xs);
width: 100%;
min-height: calc(var(--hl-typography-line-height-very-decreased) * 1em + calc(var(--hl-spacer-sm)) * 2 + calc(var(--hl-border-width-default) * 2));
padding: calc((var(--hl-spacer-sm)) / 2) calc((var(--hl-spacer-sm)) + var(--hl-spacer-xl)) calc((var(--hl-spacer-sm)) / 2) calc(var(--hl-spacer-sm));
font-size: var(--hl-font-size-md);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-very-decreased);
color: var(--hl-color-fg-light-important);
background: var(--hl-color-bg-light-default) url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='40'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/mask%3E%3Cg mask='url%28%23mask0%29'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M39 11L1 11L20 30L39 11Z' fill='black'/%3E%3C/g%3E%3C/svg%3E%0A") right calc(var(--hl-spacer-sm)) center/14px 14px no-repeat;
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-standby);
border-radius: var(--hl-border-radius-default);
transition: background-color var(--hl-transition-normal), border-color var(--hl-transition-normal); }
.bg-dark .select2-container--custom .select2-selection {
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='40'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M39 11L1 11L20 30L39 11Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A"); }
.select2-container--custom .select2-selection:hover {
border-color: var(--hl-color-border-light-interaction-hover); }
.select2-container--custom .select2-selection:focus-within {
border-color: var(--hl-color-border-light-interaction-pressed); }
.select2-container--custom .select2-selection:focus-visible {
outline: 0; }
.select2-container--custom.select2-container--open .select2-selection {
border-color: var(--hl-color-border-light-interaction-pressed); }
.select2-container--custom .select2-dropdown {
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-pressed);
border-radius: var(--hl-border-radius-default);
z-index: 600; }
.select2-container--custom .select2-dropdown--above {
border-bottom: 0; }
.select2-container--custom .select2-dropdown--below {
border-top: 0; }
.select2-container--custom .select2-selection__rendered {
display: inline-flex;
flex-wrap: wrap;
gap: var(--hl-spacer-2xs);
margin: 0;
padding: 0; }
.select2-container--custom .select2-selection--single .select2-selection__rendered {
padding-left: 0;
padding-right: 0; }
.select2-container--custom .select2-selection--multiple .select2-selection__rendered {
display: inline-flex; }
.select2-container--custom .select2-selection--multiple .select2-selection__rendered:empty {
display: none; }
.select2-container--custom .select2-selection--clearable {
background-position: top 14px right 50px;
padding: calc((var(--hl-spacer-md)) / 2) calc((var(--hl-spacer-sm)) + var(--hl-spacer-4xl)) calc((var(--hl-spacer-sm)) / 2) calc(var(--hl-spacer-sm)); }
.select2-container--custom .select2-selection__clear {
order: 1;
display: inline-flex;
background: url('data:image/svg+xml,') no-repeat center center;
color: var(--hl-color-fg-light-default);
border: var(--hl-border-width-default) solid var(--hl-color-core-black) !important;
width: var(--hl-size-icon-xs);
height: var(--hl-size-icon-xs);
position: absolute;
right: 0;
top: 0;
padding: 20px; }
.select2-container--custom .select2-selection__clear:not(.disabled):focus-visible, .select2-container--custom .select2-selection__clear:not(.disabled):has(input):focus-within {
animation: focus-outline-animation var(--hl-transition-normal) forwards; }
.select2-container--custom .select2-selection__clear.disabled:focus-visible, .select2-container--custom .select2-selection__clear.disabled:focus-within {
outline: 0 !important; }
.select2-container--custom .select2-selection__clear span {
display: none; }
.select2-container--custom .select2-selection__clear:hover, .select2-container--custom .select2-selection__clear:focus {
color: var(--hl-color-button-fg-light-hover);
background-color: var(--hl-color-button-bg-outline-black-hover);
border-color: var(--hl-color-button-bg-outline-black-standby); }
.select2-container--custom .select2-selection__clear:active {
background-color: var(--hl-color-button-bg-outline-black-pressed);
border-color: var(--hl-color-button-bg-outline-black-standby);
color: var(--hl-color-button-fg-light-pressed); }
.bg-dark .select2-container--custom .select2-selection__clear:hover, .bg-dark .select2-container--custom .select2-selection__clear:focus {
color: var(--hl-color-button-fg-dark-hover);
background-color: var(--hl-color-button-bg-outline-white-hover);
border-color: var(--hl-color-button-bg-outline-white-standby); }
.bg-dark .select2-container--custom .select2-selection__clear:active {
color: var(--hl-color-button-fg-dark-pressed);
background-color: var(--hl-color-button-bg-outline-white-pressed);
border-color: var(--hl-color-button-bg-outline-white-standby); }
.select2-container--custom .select2-selection__clear [aria-hidden=true] {
font-family: sans-serif; }
.select2-container--custom .select2-results__options {
max-height: 200px;
overflow-y: auto; }
.select2-container--custom .select2-results__group {
font-size: var(--hl-font-size-sm);
display: block;
color: var(--hl-color-fg-light-muted);
padding: var(--hl-spacer-xs) var(--hl-spacer-xs);
background-color: var(--hl-color-bg-light-ultra-muted); }
.select2-container--custom .select2-results__option {
color: var(--hl-color-fg-light-important);
background-color: var(--hl-color-bg-light-default);
font-weight: var(--hl-typography-font-weight-body-bold);
padding: var(--hl-spacer-xs) calc((var(--hl-spacer-sm)) + var(--hl-spacer-xl)) var(--hl-spacer-xs) var(--hl-spacer-sm); }
.select2-container--custom .select2-results__option--highlighted {
background-color: var(--hl-color-button-bg-light-secondary-hover); }
.select2-container--custom .select2-results__option--selected {
background: var(--hl-color-fg-light-default) url('data:image/svg+xml,') no-repeat calc(100% - var(--hl-spacer-sm)) center;
background-size: 14px;
color: var(--hl-color-core-white); }
.select2-container--custom .select2-results__option--disabled {
color: var(--hl-color-fg-light-disabled);
background-color: var(--hl-color-bg-light-ultra-muted); }
.select2-container--custom .select2-results__option--group {
padding: 0; }
.select2-container--custom .bg-dark .select2-results__option--selected {
background: var(--hl-color-fg-light-default) url('data:image/svg+xml,') no-repeat calc(100% - var(--hl-spacer-sm)) center;
color: var(--hl-color-core-black); }
.select2-container--custom .select2-search--dropdown {
background-color: var(--hl-color-bg-light-default);
padding: var(--hl-spacer-sm); }
.select2-container--custom .select2-search--dropdown .select2-search__field {
color: var(--hl-color-fg-light-important);
background-color: var(--hl-color-bg-light-default);
border: var(--hl-border-width-default) solid var(--hl-color-border-light-interaction-standby);
padding: var(--hl-spacer-2xs) var(--hl-spacer-sm);
transition: background-color var(--hl-transition-normal), border-color var(--hl-transition-normal); }
.select2-container--custom .select2-search--dropdown .select2-search__field:hover {
border-color: var(--hl-color-border-light-interaction-hover); }
.select2-container--custom .select2-search--dropdown .select2-search__field:focus {
border-color: var(--hl-color-border-light-interaction-pressed);
outline: 0; }
.select2-container--custom .select2-search--inline {
display: inline-block;
display: contents; }
.select2-container--custom .select2-search--inline .select2-search__field {
color: var(--hl-color-fg-light-important);
background: transparent;
border: none;
outline: 0;
box-shadow: none;
-webkit-appearance: textfield;
margin-top: 0;
vertical-align: middle; }
.select2-container--custom .select2-selection__rendered:empty + .select2-search .select2-search__field {
margin-left: 0; }
.select2-container--custom .select2-selection__choice {
display: inline-flex;
align-items: center;
margin: 0;
padding: 0;
font-size: var(--hl-font-size-sm);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-very-decreased);
letter-spacing: var(--hl-typography-letter-spacing-default);
border: var(--hl-border-width-default) solid var(--tag-border-color);
border-radius: var(--tag-radius);
min-height: var(--tag-height);
overflow: hidden; }
.select2-container--custom .select2-selection__choice .select2-selection__choice__display {
position: relative;
padding: var(--tag-padding-y) calc(var(--tag-padding-x) + var(--hl-border-width-default)) var(--tag-padding-y) var(--tag-padding-x);
display: flex;
align-items: center;
color: var(--tag-text-color);
background-color: var(--tag-bg-color);
height: 100%; }
.select2-container--custom .select2-selection__choice .select2-selection__choice__display::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
border-right: var(--hl-border-width-default) solid currentColor; }
.select2-container--custom .select2-selection__choice__remove {
all: unset;
order: 1;
min-width: var(--tag-height);
box-sizing: border-box;
height: 100%;
min-width: calc(var(--tag-height) - var(--hl-border-width-default) * 2);
color: var(--tag-text-color);
display: grid;
place-content: center;
align-items: center;
background-color: var(--tag-bg-color);
transition: background-color var(--hl-transition-normal), border-color var(--hl-transition-normal), color var(--hl-transition-normal); }
.select2-container--custom .select2-selection__choice__remove:hover, .select2-container--custom .select2-selection__choice__remove:focus {
background-color: var(--hl-color-button-bg-light-outline-hover);
color: var(--hl-color-button-fg-light-outline-hover);
border-color: var(--hl-color-button-border-light-outline-hover); }
.select2-container--custom .select2-selection__choice__remove:active {
background-color: var(--hl-color-button-bg-light-outline-pressed);
color: var(--hl-color-button-fg-light-outline-pressed);
border-color: var(--hl-color-button-border-light-outline-pressed); }
.select2-container--custom .select2-selection__choice__remove [aria-hidden=true] {
height: calc(100% + 4px);
text-indent: calc(var(--hl-border-width-default) * -1); }
.select2-container--custom .hl-tag--interactive-secondary .select2-selection__choice {
border: 0; }
.select2-container--custom .hl-tag--interactive-secondary .select2-selection__choice__remove {
min-width: var(--tag-height); }
.select2-container--custom .hl-tag--interactive-secondary .select2-selection__choice__remove:hover, .select2-container--custom .hl-tag--interactive-secondary .select2-selection__choice__remove:focus {
background-color: var(--hl-color-button-bg-light-black-hover);
color: var(--hl-color-button-fg-light-black-hover);
border-color: var(--hl-color-button-border-light-black-hover); }
.select2-container--custom .hl-tag--interactive-secondary .select2-selection__choice__remove:active {
background-color: var(--hl-color-button-bg-light-black-pressed);
color: var(--hl-color-button-fg-light-black-pressed);
border-color: var(--hl-color-button-border-light-black-pressed); }
.select2-container--custom .hl-tag--interactive-orange .select2-selection__choice__display::after {
color: var(--hl-color-background-light-default);
border-right: var(--hl-border-width-default) solid var(--hl-color-core-white); }
.select2-container--custom .hl-tag--interactive-orange .select2-selection__choice {
border: 0; }
.select2-container--custom .hl-tag--interactive-orange .select2-selection__choice__remove {
min-width: var(--tag-height); }
.select2-container--custom .hl-tag--interactive-orange .select2-selection__choice__remove:hover, .select2-container--custom .hl-tag--interactive-orange .select2-selection__choice__remove:focus {
background-color: var(--hl-color-button-bg-light-primary-hover);
color: var(--hl-color-button-fg-light-primary-hover);
border-color: var(--hl-color-button-border-light-primary-hover); }
.select2-container--custom .hl-tag--interactive-orange .select2-selection__choice__remove:active {
background-color: var(--hl-color-button-bg-light-primary-pressed);
color: var(--hl-color-button-fg-light-primary-pressed);
border-color: var(--hl-color-button-border-light-primary-pressed); }
.select2-container--custom textarea::-moz-placeholder {
color: var(--hl-color-fg-light-muted);
font-weight: var(--hl-typography-font-weight-body-bold);
opacity: 1; }
.select2-container--custom textarea::placeholder {
color: var(--hl-color-fg-light-muted);
font-weight: var(--hl-typography-font-weight-body-bold);
opacity: 1; }
@media (forced-colors: active) {
.select2-container--custom .select2-selection {
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='40'%3E%3Crect width='40' height='40' fill='CanvasText'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M39 11L1 11L20 30L39 11Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A"); }
.select2-container--custom .select2-selection:hover {
border-color: ButtonText; }
.select2-container--custom .select2-selection:focus-within {
border-color: ButtonText; }
.select2-container--custom .select2-results__option {
padding-right: var(--hl-spacer-sm); }
.select2-container--custom .select2-results__option--highlighted {
background-color: Highlight; }
.select2-container--custom .select2-results__option--selected {
background-color: Highlight; } }
.bg-dark .select2-container--custom:not(.hl-tag--interactive-secondary), .bg-dark .select2-container--custom:not(.hl-tag--interactive-orange) {
--tag-bg-color: transparent;
--tag-text-color: var(--hl-color-button-fg-light-black-standby); }
.bg-dark .select2-container--custom:not(.hl-tag--interactive-secondary) .select2-selection__choice__remove:hover, .bg-dark .select2-container--custom:not(.hl-tag--interactive-secondary) .select2-selection__choice__remove:focus, .bg-dark .select2-container--custom:not(.hl-tag--interactive-orange) .select2-selection__choice__remove:hover, .bg-dark .select2-container--custom:not(.hl-tag--interactive-orange) .select2-selection__choice__remove:focus {
--tag-text-color: var(--hl-color-button-fg-dark-hover);
--tag-bg-color: var(--hl-color-button-bg-outline-white-hover); }
.bg-dark .select2-container--custom:not(.hl-tag--interactive-secondary) .select2-selection__choice__remove:active, .bg-dark .select2-container--custom:not(.hl-tag--interactive-orange) .select2-selection__choice__remove:active {
--tag-text-color: var(--hl-color-button-fg-light-pressed);
--tag-bg-color: var(--hl-color-button-bg-outline-white-pressed); }
.bg-dark .select2-container--custom .hl-tag--interactive-secondary .select2-selection__choice__remove:hover, .bg-dark .select2-container--custom .hl-tag--interactive-secondary .select2-selection__choice__remove:focus {
--tag-text-color: var(--hl-color-button-fg-light-hover);
--tag-bg-color: var(--hl-color-button-bg-white-hover); }
.bg-dark .select2-container--custom .hl-tag--interactive-secondary .select2-selection__choice__remove:active {
--tag-text-color: var(--hl-color-button-fg-light-pressed);
--tag-bg-color: var(--hl-color-button-bg-white-pressed); }
.bg-dark .select2-container--custom .hl-tag--interactive-orange .select2-selection__choice__remove {
min-width: var(--tag-height); }
.bg-dark .select2-container--custom .hl-tag--interactive-orange .select2-selection__choice__remove:hover, .bg-dark .select2-container--custom .hl-tag--interactive-orange .select2-selection__choice__remove:focus {
--tag-text-color: var(--hl-color-button-fg-light-hover);
--tag-bg-color: var(--hl-color-button-bg-primary-hover);
border-color: var(--tag-bg-color); }
.bg-dark .select2-container--custom .hl-tag--interactive-orange .select2-selection__choice__remove:active {
--tag-text-color: var(--hl-color-button-fg-light-pressed);
--tag-bg-color: var(--hl-color-button-bg-primary-pressed);
border-color: var(--tag-bg-color); }
.bg-dark .select2-container--custom .hl-tag--interactive-orange .select2-selection__choice__display::after {
color: var(--hl-color-background-light-default);
border-right: var(--hl-border-width-default) solid var(--hl-color-core-black); }
.bg-dark .select2-container--custom .hl-tag--interactive-tag .select2-selection__choice__display {
color: var(--hl-color-core-white); }
.bg-dark .select2-container--custom .hl-tag--interactive-tag .select2-selection__choice__remove {
color: var(--hl-color-core-white); }
.select2-container .select2-search--inline .select2-search__field {
font-family: "Helvetica-Neue-Family";
min-width: 80px; }
.select2-container--custom.select2-container--tags-below .select2-selection {
align-items: center; }
.select2-container--custom.select2-container--tags-below .select2-selection__choice {
display: none; }
.select2-container--custom.select2-container--tags-below .select2-selection__rendered {
align-items: center;
flex: 1;
min-width: 0;
line-height: var(--hl-typography-line-height-very-decreased); }
.select2-container--custom.select2-container--tags-below .select2-tags-below-counter {
flex: 0 1 auto;
font-size: var(--hl-font-size-md);
line-height: var(--hl-typography-line-height-very-decreased);
font-weight: var(--hl-typography-font-weight-body-bold);
color: var(--hl-color-fg-light-important);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.select2-container--custom.select2-container--tags-below .select2-tags-below-counter.is-empty {
font-weight: var(--hl-typography-font-weight-body-bold);
color: var(--hl-color-fg-light-muted); }
.select2-container--custom.select2-container--tags-below .select2-search--inline {
flex: 1;
min-width: 0; }
.select2-container--custom.select2-container--tags-below .select2-search--inline .select2-search__field {
width: 0 !important;
min-width: 0;
height: 0;
margin: 0 !important;
padding: 0 !important;
border: 0;
opacity: 0; }
.select2-container--custom.select2-container--tags-below.select2-container--open .select2-tags-below-counter {
display: none; }
.select2-container--custom.select2-container--tags-below.select2-container--open .select2-search--inline .select2-search__field {
display: block;
width: 100% !important;
min-width: 80px;
height: 24px;
font-size: var(--hl-font-size-md);
line-height: 24px;
align-self: center;
box-sizing: border-box;
resize: none;
opacity: 1;
margin: 0 !important;
padding: 0 !important; }
.select2-tags-below {
display: inline-flex;
flex-wrap: wrap;
gap: var(--hl-spacer-2xs);
margin-top: var(--hl-spacer-xs); }
.select2-tags-below:empty {
display: none; }
.select2-tag-below {
--tag-radius: var(--hl-border-radius-full);
--tag-bg-color: var(--hl-color-button-bg-white-standby);
--tag-text-color: var(--hl-color-fg-light-important);
--tag-height: 26px;
--tag-padding-x: 12px;
--tag-padding-y: 4px;
--tag-border-color: var(--hl-color-border-light-secondary);
display: inline-flex;
align-items: center;
margin: 0;
padding: 0;
font-size: var(--hl-font-size-sm);
font-weight: var(--hl-typography-font-weight-body-bold);
line-height: var(--hl-typography-line-height-very-decreased);
letter-spacing: var(--hl-typography-letter-spacing-default);
border: var(--hl-border-width-default) solid var(--tag-border-color);
border-radius: var(--tag-radius);
min-height: var(--tag-height);
overflow: hidden; }
.select2-tag-below__label {
position: relative;
padding: var(--tag-padding-y) calc(var(--tag-padding-x) + var(--hl-border-width-default)) var(--tag-padding-y) var(--tag-padding-x);
display: flex;
align-items: center;
color: var(--tag-text-color);
background-color: var(--tag-bg-color); }
.select2-tag-below__label::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
border-right: var(--hl-border-width-default) solid currentColor; }
.select2-tag-below__remove {
all: unset;
order: 1;
box-sizing: border-box;
min-width: var(--tag-height);
height: 100%;
color: var(--tag-text-color);
background-color: var(--tag-bg-color);
display: grid;
place-content: center;
align-items: center;
cursor: pointer;
transition: background-color var(--hl-transition-normal), color var(--hl-transition-normal), border-color var(--hl-transition-normal); }
.select2-tag-below__remove:hover, .select2-tag-below__remove:focus-visible {
background-color: var(--hl-color-button-bg-light-outline-hover);
color: var(--hl-color-button-fg-light-outline-hover); }
.select2-tag-below__remove:active {
background-color: var(--hl-color-button-bg-light-outline-pressed);
color: var(--hl-color-button-fg-light-outline-pressed); }
.select2-tag-below__remove [aria-hidden=true] {
font-family: sans-serif;
line-height: 1;
font-size: 16px; }
.bg-dark .select2-tag-below {
--tag-bg-color: transparent;
--tag-text-color: var(--hl-color-button-fg-light-light-standby);
--tag-border-color: var(--hl-color-border-dark-secondary); }
@media (forced-colors: active) {
:root {
--hl-color-border-light-interaction-standby: ButtonText !important;
--hl-color-border-light-interaction-pressed: Highlight;
--hl-color-border-light-interaction-hover: Highlight;
--hl-color-form-interaction-bg-light-pressed: Highlight;
--hl-color-form-interaction-bg-light-hover: Highlight;
--hl-color-form-interaction-bg-light-active: Highlight; }
svg,
svg * {
fill: currentColor !important; }
a svg {
--link-with-icon-icon-color: LinkText; }
button svg {
--link-with-icon-icon-color: ButtonText; }
[aria-disabled=true],
[aria-disabled=true] *,
[disabled],
[disabled] * {
color: GrayText !important; }
div[role=button] .btn, div[role=button] .charger-btn, div[role=button] .subnav__nav__item {
color: ButtonText;
border-color: ButtonText; }
div[role=button][aria-disabled=true] .btn, div[role=button][aria-disabled=true] .charger-btn, div[role=button][aria-disabled=true] .subnav__nav__item {
color: GrayText;
border-color: ButtonText; }
.disabled label {
color: GrayText; }
.custom-control-label::after {
--hl-color-form-interaction-fg-light-active: ButtonFace; }
.custom-control-label::before {
transition-duration: 0s;
border-color: ButtonText;
color: Highlight; }
.card-tariff-new__dropdown-label::before,
.custom-select {
--hl-transition-normal: 0s linear;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='40'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M39 11L1 11L20 30L39 11Z' fill='CanvasText'/%3E%3C/g%3E%3C/svg%3E%0A"); } }
@font-face {
font-family: "Helvetica-Neue-Family";
font-style: normal;
font-weight: 200;
src: url("../fonts/helvetica-neue/HelvNeue35.eot?") format("eot"), url("../fonts/helvetica-neue/HelvNeue35.woff") format("woff"), url("../fonts/helvetica-neue/HelvNeue35.woff2") format("woff2"), url("../fonts/helvetica-neue/HelvNeue35.ttf") format("truetype"), url("../fonts/helvetica-neue/HelvNeue35.svg#Helvetica-Neue-Family") format("svg"); }
@font-face {
font-family: "Helvetica-Neue-Family";
font-style: normal;
font-weight: 300;
src: url("../fonts/helvetica-neue/HelvNeue45.eot?") format("eot"), url("../fonts/helvetica-neue/HelvNeue45.woff") format("woff"), url("../fonts/helvetica-neue/HelvNeue45.woff2") format("woff2"), url("../fonts/helvetica-neue/HelvNeue45.ttf") format("truetype"), url("../fonts/helvetica-neue/HelvNeue45.svg#Helvetica-Neue-Family") format("svg"); }
@font-face {
font-family: "Helvetica-Neue-Family";
font-style: normal;
font-weight: 400;
src: url("../fonts/helvetica-neue/HelvNeue55.eot?") format("eot"), url("../fonts/helvetica-neue/HelvNeue55.woff") format("woff"), url("../fonts/helvetica-neue/HelvNeue55.woff2") format("woff2"), url("../fonts/helvetica-neue/HelvNeue55.ttf") format("truetype"), url("../fonts/helvetica-neue/HelvNeue55.svg#Helvetica-Neue-Family") format("svg"); }
@font-face {
font-family: "Helvetica-Neue-Family";
font-style: normal;
font-weight: 500;
src: url("../fonts/helvetica-neue/HelvNeue55.eot?") format("eot"), url("../fonts/helvetica-neue/HelvNeue55.woff") format("woff"), url("../fonts/helvetica-neue/HelvNeue55.woff2") format("woff2"), url("../fonts/helvetica-neue/HelvNeue55.ttf") format("truetype"), url("../fonts/helvetica-neue/HelvNeue55.svg#Helvetica-Neue-Family") format("svg"); }
@font-face {
font-family: "Helvetica-Neue-Family";
font-style: normal;
font-weight: 600;
src: url("../fonts/helvetica-neue/HelvNeue65.eot?") format("eot"), url("../fonts/helvetica-neue/HelvNeue65.woff") format("woff"), url("../fonts/helvetica-neue/HelvNeue65.woff2") format("woff2"), url("../fonts/helvetica-neue/HelvNeue65.ttf") format("truetype"), url("../fonts/helvetica-neue/HelvNeue65.svg#Helvetica-Neue-Family") format("svg"); }
@font-face {
font-family: "Helvetica-Neue-Family";
font-style: normal;
font-weight: 700;
src: url("../fonts/helvetica-neue/HelvNeue75.eot?") format("eot"), url("../fonts/helvetica-neue/HelvNeue75.woff") format("woff"), url("../fonts/helvetica-neue/HelvNeue75.woff2") format("woff2"), url("../fonts/helvetica-neue/HelvNeue75.ttf") format("truetype"), url("../fonts/helvetica-neue/HelvNeue75.svg#Helvetica-Neue-Family") format("svg"); }
.veil {
position: fixed;
z-index: 601;
text-align: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center; }
.veil.js-renove-spinner {
z-index: 999; }
.veil .underlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
background-color: #fff; }
.veil .orange-spinner {
z-index: 302;
position: relative; }
.non-fixed-spinner .veil {
height: 100%;
position: relative;
width: 100%; }
.invisible-children-spinner * {
opacity: 0; }
.invisible-children-spinner *.veil {
opacity: 1;
position: absolute;
display: unset;
width: 100%;
height: 100%; }
.invisible-children-spinner *.veil * {
opacity: 1; }