@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap");

:root {
  --color-empty: unset;
  --gray-base: #5e636e;
  --gray-lighter: #979ba4;
  --gray-lighter-2: #acb0b9;
  --gray-lighter-3: #dee0e3;
  --gray-lighter-4: #efeff1;
  --gray-faded: #f7f7f8;
  --gray-darker: #17191c;
  --gray-gradient-start: #fcfaff;
  --gray-gradient-end: #f4ecfe;
  --gray-gradient-h: linear-gradient(90deg,
      var(--gray-gradient-start) 0%,
      var(--gray-gradient-end) 100%);
  --gray-gradient-v: linear-gradient(0deg,
      var(--gray-gradient-end) 0%,
      var(--gray-gradient-start) 100%);
  --brand-primary: #367de7;
  --brand-primary-lighter: #a96ef7;
  --brand-primary-lighter-2: #d7e7ff;
  --brand-primary-lighter-3: #c1d8fa;
  --brand-primary-lighter-4: #c5dcff;
  --brand-primary-darker: #542b97;
  --brand-primary-gradient-start: #7643c9;
  --brand-primary-gradient-end: #a96ef7;
  --brand-primary-gradient-h: linear-gradient(90deg,
      var(--brand-primary-gradient-start) 0%,
      var(--brand-primary-gradient-end) 100%);
  --brand-primary-gradient-v: linear-gradient(0deg,
      var(--brand-primary-gradient-end) 0%,
      var(--brand-primary-gradient-start) 100%);
  --brand-secondary: #690ac2;
  --brand-secondary-lighter: #a13dff;
  --brand-secondary-darker: #420679;
  --brand-secondary-gradient-start: #420679;
  --brand-secondary-gradient-end: #690ac2;
  --brand-secondary-gradient-h: linear-gradient(90deg,
      var(--brand-secondary-gradient-start) 0%,
      var(--brand-secondary-gradient-end) 100%);
  --brand-secondary-gradient-v: linear-gradient(0deg,
      var(--brand-secondary-gradient-end) 0%,
      var(--brand-secondary-gradient-start) 100%);
  --brand-info: #1062fe;
  --brand-info-lighter: #009aff;
  --brand-info-lighter-2: #b3ccff;
  --brand-info-lighter-3: #d6e4ff;
  --brand-info-lighter-4: #e0ebff;
  --brand-info-darker: #015abe;
  --brand-info-gradient-start: #015abe;
  --brand-info-gradient-end: #1062fe;
  --brand-info-gradient-h: linear-gradient(90deg,
      var(--brand-info-gradient-start) 0%,
      var(--brand-info-gradient-end) 100%);
  --brand-info-gradient-v: linear-gradient(0deg,
      var(--brand-info-gradient-end) 0%,
      var(--brand-info-gradient-start) 100%);
  --brand-success: #299341;
  --brand-success-lighter: #70d786;
  --brand-success-lighter-2: #bfeec9;
  --brand-success-lighter-3: #cff2d7;
  --brand-success-lighter-4: #dff6e5;
  --brand-success-darker: #26873c;
  --brand-success-gradient-start: #26873c;
  --brand-success-gradient-end: #299341;
  --brand-success-gradient-h: linear-gradient(90deg,
      var(--brand-success-gradient-start) 0%,
      var(--brand-success-gradient-end) 100%);
  --brand-success-gradient-v: linear-gradient(0deg,
      var(--brand-success-gradient-end) 0%,
      var(--brand-success-gradient-end) 100%);
  --brand-warning: #e07800;
  --brand-warning-lighter: #ffb866;
  --brand-warning-lighter-2: #ffdeb8;
  --brand-warning-lighter-3: #ffe7cc;
  --brand-warning-lighter-4: #fff1e0;
  --brand-warning-darker: #cc6d00;
  --brand-warning-gradient-start: #cc6d00;
  --brand-warning-gradient-end: #e07800;
  --brand-warning-gradient-h: linear-gradient(90deg,
      var(--brand-warning-gradient-start) 0%,
      var(--brand-warning-gradient-end) 100%);
  --brand-warning-gradient-v: linear-gradient(0deg,
      var(--brand-warning-gradient-end) 0%,
      var(--brand-warning-gradient-start) 100%);
  --brand-danger: #d92632;
  --brand-danger-lighter: #e56c74;
  --brand-danger-lighter-2: #f4c3c6;
  --brand-danger-lighter-3: #fae1e2;
  --brand-danger-lighter-4: #fceeef;
  --brand-danger-darker: #b6202a;
  --brand-danger-gradient-start: #b6202a;
  --brand-danger-gradient-end: #d92632;
  --brand-danger-gradient-h: linear-gradient(90deg,
      var(--brand-danger-gradient-start) 0%,
      var(--brand-danger-gradient-end) 100%);
  --brand-danger-gradient-v: linear-gradient(0deg,
      var(--brand-danger-gradient-end) 0%,
      var(--brand-danger-gradient-start) 100%);
  --gray-icons: #acafb9;
  --gray-icons-hover: #8552d7;
  --svg-illustration-color-0: #6a17d9;
  --svg-illustration-color-1: #8031e9;
  --svg-illustration-color-2: #a96ef7;
  --svg-illustration-color-3: #b481f8;
  --svg-illustration-color-4: #cba8fa;
  --svg-illustration-color-5: #dcc5fc;
  --svg-illustration-color-6: #e8d8fd;
  --svg-illustration-color-7: #ffffff;
  --svg-illustration-shadow: #000000;
  --svg-illustration-line-color: rgba(155, 232, 173, 0.24);
  --svg-banner-shape-left: var(--brand-primary);
  --svg-banner-shape-right: var(--brand-primary-lighter);
  --body-bg: #f7f7f8;
}

.lagom-dark-mode {
  --dark-mode-gray-base: #b3b3b3;
  --dark-mode-gray-lighter: #8c8c8c;
  --dark-mode-gray-lighter-2: #666666;
  --dark-mode-gray-lighter-3: #424242;
  --dark-mode-gray-lighter-4: #303030;
  --dark-mode-gray-faded: #2b2b2b;
  --dark-mode-gray-darker: #e0e0e0;
  --dark-mode-gray-gradient-start: #200f423d;
  --dark-mode-gray-gradient-end: #200f42;
  --dark-mode-gray-gradient-h: linear-gradient(90deg,
      var(--dark-mode-gray-gradient-start) 0%,
      var(--dark-mode-gray-gradient-end) 100%);
  --dark-mode-gray-gradient-v: linear-gradient(0deg,
      var(--dark-mode-gray-gradient-end) 0%,
      var(--dark-mode-gray-gradient-start) 100%);
  --gray-base: var(--dark-mode-gray-base);
  --gray-lighter: var(--dark-mode-gray-lighter);
  --gray-lighter-2: var(--dark-mode-gray-lighter-2);
  --gray-lighter-3: var(--dark-mode-gray-lighter-3);
  --gray-lighter-4: var(--dark-mode-gray-lighter-4);
  --gray-faded: var(--dark-mode-gray-faded);
  --gray-darker: var(--dark-mode-gray-darker);
  --gray-gradient-start: var(--dark-mode-gray-gradient-start);
  --gray-gradient-end: var(--dark-mode-gray-gradient-end);
  --gray-gradient-h: linear-gradient(90deg,
      var(--dark-mode-gray-gradient-start) 0%,
      var(--dark-mode-gray-gradient-end) 100%);
  --gray-gradient-v: linear-gradient(0deg,
      var(--dark-mode-gray-gradient-end) 0%,
      var(--dark-mode-gray-gradient-start) 100%);
  --dark-mode-brand-primary: #7643c9;
  --dark-mode-brand-primary-lighter: #a96ef7;
  --dark-mode-brand-primary-lighter-2: #3e2b5a;
  --dark-mode-brand-primary-lighter-3: #34244c;
  --dark-mode-brand-primary-lighter-4: #2a1e3e;
  --dark-mode-brand-primary-darker: #542b97;
  --dark-mode-brand-primary-gradient-start: #7643c9;
  --dark-mode-brand-primary-gradient-end: #a96ef7;
  --dark-mode-brand-primary-gradient-h: linear-gradient(90deg,
      var(--brand-primary-gradient-start) 0%,
      var(--brand-primary-gradient-end) 100%);
  --dark-mode-brand-primary-gradient-v: linear-gradient(0deg,
      var(--brand-primary-gradient-end) 0%,
      var(--brand-primary-gradient-start) 100%);
  --brand-primary: var(--dark-mode-brand-primary);
  --brand-primary-lighter: var(--dark-mode-brand-primary-lighter);
  --brand-primary-lighter-2: var(--dark-mode-brand-primary-lighter-2);
  --brand-primary-lighter-3: var(--dark-mode-brand-primary-lighter-3);
  --brand-primary-lighter-4: var(--dark-mode-brand-primary-lighter-4);
  --brand-primary-darker: var(--dark-mode-brand-primary-darker);
  --brand-primary-gradient-start: var(--dark-mode-brand-primary-gradient-start);
  --brand-primary-gradient-end: var(--dark-mode-brand-primary-gradient-end);
  --brand-primary-gradient-h: linear-gradient(90deg,
      var(--dark-mode-brand-primary-gradient-start) 0%,
      var(--dark-mode-brand-primary-gradient-end) 100%);
  --brand-primary-gradient-v: linear-gradient(0deg,
      var(--dark-mode-brand-primary-gradient-end) 0%,
      var(--dark-mode-brand-primary-gradient-start) 100%);
  --dark-mode-brand-secondary: #690ac2;
  --dark-mode-brand-secondary-lighter: #a13dff;
  --dark-mode-brand-secondary-darker: #420679;
  --dark-mode-brand-secondary-gradient-start: #420679;
  --dark-mode-brand-secondary-gradient-end: #690ac2;
  --dark-mode-brand-secondary-gradient-h: linear-gradient(90deg,
      var(--brand-secondary-gradient-start) 0%,
      var(--brand-secondary-gradient-end) 100%);
  --dark-mode-brand-secondary-gradient-v: linear-gradient(0deg,
      var(--brand-secondary-gradient-end) 0%,
      var(--brand-secondary-gradient-start) 100%);
  --brand-secondary: var(--dark-mode-brand-secondary);
  --brand-secondary-lighter: var(--dark-mode-brand-secondary-lighter);
  --brand-secondary-darker: var(--dark-mode-brand-secondary-darker);
  --brand-secondary-gradient-start: var(--dark-mode-brand-secondary-gradient-start);
  --brand-secondary-gradient-end: var(--dark-mode-brand-secondary-gradient-end);
  --brand-secondary-gradient-h: linear-gradient(90deg,
      var(--dark-mode-brand-secondary-gradient-start) 0%,
      var(--dark-mode-brand-secondary-gradient-end) 100%);
  --brand-secondary-gradient-v: linear-gradient(0deg,
      var(--dark-mode-brand-secondary-gradient-end) 0%,
      var(--dark-mode-brand-secondary-gradient-start) 100%);
  --dark-mode-brand-info: #1062fe;
  --dark-mode-brand-info-lighter: #337aff;
  --dark-mode-brand-info-lighter-2: #162e5a;
  --dark-mode-brand-info-lighter-3: #142a52;
  --dark-mode-brand-info-lighter-4: #102242;
  --dark-mode-brand-info-darker: #0143be;
  --dark-mode-brand-info-gradient-start: #0143be;
  --dark-mode-brand-info-gradient-end: #1062fe;
  --dark-mode-brand-info-gradient-h: linear-gradient(90deg,
      var(--brand-info-gradient-start) 0%,
      var(--brand-info-gradient-end) 100%);
  --dark-mode-brand-info-gradient-v: linear-gradient(0deg,
      var(--brand-info-gradient-end) 0%,
      var(--brand-info-gradient-start) 100%);
  --brand-info: var(--dark-mode-brand-info);
  --brand-info-lighter: var(--dark-mode-brand-info-lighter);
  --brand-info-lighter-2: var(--dark-mode-brand-info-lighter-2);
  --brand-info-lighter-3: var(--dark-mode-brand-info-lighter-3);
  --brand-info-darker: var(--dark-mode-brand-info-darker);
  --brand-info-gradient-start: var(--dark-mode-brand-info-gradient-start);
  --brand-info-gradient-end: var(--dark-mode-brand-info-gradient-end);
  --brand-info-gradient-h: linear-gradient(90deg,
      var(--dark-mode-brand-info-gradient-start) 0%,
      var(--dark-mode-brand-info-gradient-end) 100%);
  --brand-info-gradient-v: linear-gradient(0deg,
      var(--dark-mode-brand-info-gradient-end) 0%,
      var(--dark-mode-brand-info-gradient-start) 100%);
  --dark-mode-brand-success: #31af4e;
  --dark-mode-brand-success-lighter: #5cd175;
  --dark-mode-brand-success-lighter-2: #304b34;
  --dark-mode-brand-success-lighter-3: #2c4531;
  --dark-mode-brand-success-lighter-4: #203224;
  --dark-mode-brand-success-darker: #247f38;
  --dark-mode-brand-success-gradient-start: #247f38;
  --dark-mode-brand-success-gradient-end: #31af4e;
  --dark-mode-brand-success-gradient-h: linear-gradient(90deg,
      var(--brand-success-gradient-start) 0%,
      var(--brand-success-gradient-end) 100%);
  --dark-mode-brand-success-gradient-v: linear-gradient(0deg,
      var(--brand-success-gradient-end) 0%,
      var(--brand-success-gradient-start) 100%);
  --brand-success: var(--dark-mode-brand-success);
  --brand-success-lighter: var(--dark-mode-brand-success-lighter);
  --brand-success-lighter-2: var(--dark-mode-brand-success-lighter-2);
  --brand-success-lighter-3: var(--dark-mode-brand-success-lighter-3);
  --brand-success-lighter-4: var(--dark-mode-brand-success-lighter-4);
  --brand-success-darker: var(--dark-mode-brand-success-darker);
  --brand-success-gradient-start: var(--dark-mode-brand-success-gradient-start);
  --brand-success-gradient-end: var(--dark-mode-brand-success-gradient-end);
  --brand-success-gradient-h: linear-gradient(90deg,
      var(--dark-mode-brand-success-gradient-start) 0%,
      var(--dark-mode-brand-success-gradient-end) 100%);
  --brand-success-gradient-v: linear-gradient(0deg,
      var(--dark-mode-brand-success-gradient-end) 0%,
      var(--dark-mode-brand-success-gradient-start) 100%);
  --dark-mode-brand-warning: #eb7d00;
  --dark-mode-brand-warning-lighter: #ffae52;
  --dark-mode-brand-warning-lighter-2: #44392c;
  --dark-mode-brand-warning-lighter-3: #3e3428;
  --dark-mode-brand-warning-lighter-4: #322a20;
  --dark-mode-brand-warning-darker: #cc6d00;
  --dark-mode-brand-warning-gradient-start: #cc6d00;
  --dark-mode-brand-warning-gradient-end: #eb7d00;
  --dark-mode-brand-warning-gradient-h: linear-gradient(90deg,
      var(--brand-warning-gradient-start) 0%,
      var(--brand-warning-gradient-end) 100%);
  --dark-mode-brand-warning-gradient-v: linear-gradient(0deg,
      var(--brand-warning-gradient-end) 0%,
      var(--brand-warning-gradient-start) 100%);
  --brand-warning: var(--dark-mode-brand-warning);
  --brand-warning-lighter: var(--dark-mode-brand-warning-lighter);
  --brand-warning-lighter-2: var(--dark-mode-brand-warning-lighter-2);
  --brand-warning-lighter-3: var(--dark-mode-brand-warning-lighter-3);
  --brand-warning-lighter-4: var(--dark-mode-brand-warning-lighter-4);
  --brand-warning-darker: var(--dark-mode-brand-warning-darker);
  --brand-warning-gradient-start: var(--dark-mode-brand-warning-gradient-start);
  --brand-warning-gradient-end: var(--dark-mode-brand-warning-gradient-end);
  --brand-warning-gradient-h: linear-gradient(90deg,
      var(--dark-mode-brand-warning-gradient-start) 0%,
      var(--dark-mode-brand-warning-gradient-end) 100%);
  --brand-warning-gradient-v: linear-gradient(0deg,
      var(--dark-mode-brand-warning-gradient-end) 0%,
      var(--dark-mode-brand-warning-gradient-start) 100%);
  --dark-mode-brand-danger: #d92632;
  --dark-mode-brand-danger-lighter: #e56c74;
  --dark-mode-brand-danger-lighter-2: #663335;
  --dark-mode-brand-danger-lighter-3: #592c2f;
  --dark-mode-brand-danger-lighter-4: #4b2528;
  --dark-mode-brand-danger-darker: #b6202a;
  --dark-mode-brand-danger-gradient-start: #dd3c46;
  --dark-mode-brand-danger-gradient-end: #9c1b24;
  --dark-mode-brand-danger-gradient-h: linear-gradient(90deg,
      var(--brand-danger-gradient-start) 0%,
      var(--brand-danger-gradient-end) 100%);
  --dark-mode-brand-danger-gradient-v: linear-gradient(0deg,
      var(--brand-danger-gradient-end) 0%,
      var(--brand-danger-gradient-start) 100%);
  --brand-danger: var(--dark-mode-brand-danger);
  --brand-danger-lighter: var(--dark-mode-brand-danger-lighter);
  --brand-danger-lighter-2: var(--dark-mode-brand-danger-lighter-2);
  --brand-danger-lighter-3: var(--dark-mode-brand-danger-lighter-3);
  --brand-danger-lighter-4: var(--dark-mode-brand-danger-lighter-4);
  --brand-danger-darker: var(--dark-mode-brand-danger-darker);
  --brand-danger-gradient-start: var(--dark-mode-brand-danger-gradient-start);
  --brand-danger-gradient-end: var(--dark-mode-brand-danger-gradient-end);
  --brand-danger-gradient-h: linear-gradient(90deg,
      var(--dark-mode-brand-danger-gradient-start) 0%,
      var(--dark-mode-brand-danger-gradient-end) 100%);
  --brand-danger-gradient-v: linear-gradient(0deg,
      var(--dark-mode-brand-danger-gradient-end) 0%,
      var(--dark-mode-brand-danger-gradient-start) 100%);
  --dark-mode-gray-icons: #acafb9;
  --dark-mode-gray-icons-hover: #a96ef7;
  --gray-icons: var(--dark-mode-gray-icons);
  --gray-icons-hover: var(--dark-mode-gray-icons-hover);
  --dark-mode-svg-illustration-color-0: #6a17d9;
  --dark-mode-svg-illustration-color-1: #8031e9;
  --dark-mode-svg-illustration-color-2: #a96ef7;
  --dark-mode-svg-illustration-color-3: #b481f8;
  --dark-mode-svg-illustration-color-4: #cba8fa;
  --dark-mode-svg-illustration-color-5: #dcc5fc;
  --dark-mode-svg-illustration-color-6: #e8d8fd;
  --dark-mode-svg-illustration-color-7: #ffffff;
  --dark-mode-svg-illustration-shadow: #000000;
  --dark-mode-svg-banner-shape-left: var(--dark-mode-brand-primary);
  --dark-mode-svg-banner-shape-right: var(--dark-mode-brand-primary-lighter);
  --svg-illustration-color-0: var(--dark-mode-svg-illustration-color-0);
  --svg-illustration-color-1: var(--dark-mode-svg-illustration-color-1);
  --svg-illustration-color-2: var(--dark-mode-svg-illustration-color-2);
  --svg-illustration-color-3: var(--dark-mode-svg-illustration-color-3);
  --svg-illustration-color-4: var(--dark-mode-svg-illustration-color-4);
  --svg-illustration-color-5: var(--dark-mode-svg-illustration-color-5);
  --svg-illustration-color-6: var(--dark-mode-svg-illustration-color-6);
  --svg-illustration-color-7: var(--dark-mode-svg-illustration-color-7);
  --svg-illustration-shadow: var(--dark-mode-svg-illustration-color-shadow);
  --svg-banner-shape-left: var(--dark-mode-svg-banner-shape-left);
  --svg-banner-shape-right: var(--dark-mode-svg-banner-shape-right);
  --dark-mode-body-bg: #121212;
  --body-bg: var(--dark-mode-body-bg);
}

:root {
  --primary-block-bg: var(--brand-primary-gradient-v);
  --primary-block-border: none;
  --primary-block-bg-h: var(--brand-primary-gradient-h);
  --primary-block-divider-color: var(--ui-block-secondary-divider-border-color);
  --primary-block-divider-active-color: #fff;
  --primary-block-title-color: var(--text-secondary-heading-color);
  --primary-block-subtitle-color: var(--text-secondary-lighter-color);
  --primary-block-text-color: var(--text-secondary-lighter-color);
  --primary-block-text-faded-color: var(--text-secondary-faded-color);
  --primary-block-total-font-color: #fff;
  --primary-block-link-color: hsla(0, 0%, 100%, 80%);
  --primary-block-link-hover-color: hsla(0, 0%, 100%, 100%);
  --primary-block-link-active-color: hsla(0, 0%, 100%, 100%);
  --primary-block-link-bg: transparent;
  --primary-block-link-hover-bg: transparent;
  --primary-block-link-active-bg: hsla(0, 0%, 100%, 6%);
  --primary-block-link-icon-color: hsla(0, 0%, 100%, 56%);
  --primary-block-link-icon-hover-color: hsla(0, 0%, 100%, 80%);
  --primary-block-link-icon-active-color: hsla(0, 0%, 100%, 80%);
  --primary-block-dot-nav-bg: rgba(255, 255, 255, 0.32);
  --primary-block-dot-nav-hover-bg: rgba(255, 255, 255, 0.56);
  --primary-block-dot-nav-active-bg: rgba(255, 255, 255, 1);
  --primary-block-btn-bg: var(--btn-primary-faded-bg);
  --primary-block-btn-border-color: var(--btn-primary-faded-border);
  --primary-block-btn-color: var(--btn-primary-faded-color);
  --primary-block-btn-hover-bg: var(--btn-primary-faded-hover-bg);
  --primary-block-btn-hover-border-color: var(--btn-primary-faded-hover-border);
  --primary-block-btn-hover-color: var(--btn-primary-faded-hover-color);
  --primary-block-btn-active-bg: var(--btn-primary-faded-active-bg);
  --primary-block-btn-active-border-color: var(--btn-primary-faded-active-border);
  --primary-block-btn-outline-border-color: rgba(255, 255, 255, 0.16);
  --primary-block-btn-outline-color: #fff;
  --primary-block-btn-outline-hover-bg: rgba(255, 255, 255, 0.16);
  --primary-block-btn-outline-hover-border-color: rgba(255, 255, 255, 0.16);
  --primary-block-btn-outline-hover-color: #fff;
  --primary-block-btn-outline-active-bg: rgba(255, 255, 255, 0.16);
  --primary-block-btn-outline-active-border-color: rgba(255, 255, 255, 0.16);
  --primary-block-input-bg: #fff;
  --primary-block-input-border: #fff;
  --primary-block-input-color: var(--input-color);
  --primary-block-input-placeholder-color: var(--input-color-placeholder);
  --primary-block-input-icon-color: var(--brand-primary);
  --primary-block-input-caret-color: var(--gray-icons);
  --secondary-block-bg: var(--brand-secondary-gradient-v);
  --secondary-block-border: var(--primary-block-border);
  --secondary-block-bg-h: var(--brand-secondary-gradient-h);
  --secondary-block-divider-color: var(--primary-block-divider-color);
  --secondary-block-divider-active-color: var(--primary-block-divider-active-color);
  --secondary-block-title-color: var(--primary-block-title-color);
  --secondary-block-subtitle-color: var(--primary-block-subtitle-color);
  --secondary-block-text-color: var(--primary-block-text-color);
  --secondary-block-text-faded-color: var(--primary-block-text-faded-color);
  --secondary-block-total-font-color: var(--primary-block-total-font-color);
  --secondary-block-link-color: var(--primary-block-link-color);
  --secondary-block-link-hover-color: var(--primary-block-link-hover-color);
  --secondary-block-link-active-color: var(--primary-block-link-active-color);
  --secondary-block-link-bg: var(--primary-block-link-bg);
  --secondary-block-link-hover-bg: var(--primary-block-link-hover-bg);
  --secondary-block-link-active-bg: var(--primary-block-link-active-bg);
  --secondary-block-link-icon-color: var(--primary-block-link-icon-color);
  --secondary-block-link-icon-hover-color: var(--primary-block-link-icon-hover-color);
  --secondary-block-link-icon-active-color: var(--primary-block-link-icon-active-color);
  --secondary-block-dot-nav-bg: var(--primary-block-dot-nav-bg);
  --secondary-block-dot-nav-hover-bg: var(--primary-block-dot-nav-hover-bg);
  --secondary-block-dot-nav-active-bg: var(--primary-block-dot-nav-active-bg);
  --secondary-block-btn-bg: var(--primary-block-btn-bg);
  --secondary-block-btn-border-color: var(--primary-block-btn-border-color);
  --secondary-block-btn-color: var(--primary-block-btn-color);
  --secondary-block-btn-hover-bg: var(--primary-block-btn-hover-bg);
  --secondary-block-btn-hover-border-color: var(--primary-block-btn-hover-border-color);
  --secondary-block-btn-hover-color: var(--primary-block-btn-hover-color);
  --secondary-block-btn-active-bg: var(--primary-block-btn-active-bg);
  --secondary-block-btn-active-border-color: var(--primary-block-btn-active-border-color);
  --secondary-block-btn-outline-border-color: var(--primary-block-btn-outline-border-color);
  --secondary-block-btn-outline-color: var(--primary-block-btn-outline-color);
  --secondary-block-btn-outline-hover-bg: var(--primary-block-btn-outline-hover-bg);
  --secondary-block-btn-outline-hover-border-color: var(--primary-block-btn-outline-hover-border-color);
  --secondary-block-btn-outline-hover-color: var(--primary-block-btn-outline-hover-color);
  --secondary-block-btn-outline-active-bg: var(--primary-block-btn-outline-active-bg);
  --secondary-block-btn-outline-active-border-color: var(--primary-block-btn-outline-active-border-color);
  --secondary-block-input-bg: var(--primary-block-input-bg);
  --secondary-block-input-border: var(--primary-block-input-border);
  --secondary-block-input-color: var(--primary-block-input-color);
  --secondary-block-input-placeholder-color: var(--primary-block-input-placeholder-color);
  --secondary-block-input-icon-color: var(--primary-block-input-icon-color);
  --secondary-block-input-caret-color: var(--primary-block-input-caret-color);
  --gray-block-bg: var(--gray-gradient-v);
  --gray-block-bg-h: var(--gray-gradient-h);
}

.lagom-dark-mode {
  --primary-block-input-bg: var(--ui-block-bg);
  --primary-block-input-border: var(--ui-block-bg);
}

:root {
  --btn-white-space: nowrap;
  --btn-transition: var(--transition-base);
  --btn-font-family: var(--font-family-base);
  --btn-border-width: 1px;
  --btn-block-spacing-y: var(--spacing-1x);
  --btn-box-shadow: none;
  --btn-focus-box-shadow: 0 0 0 .var(--spacing-2x) rgba(var(--brand-primary) 0.25);
  --btn-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --btn-spacing-between: var(--spacing-2x);
  --btn-spacing-between-sm: var(--spacing-1x);
  --btn-link-font-weight: var(--font-weight-base);
  --btn-xs-font-size: var(--font-size-xs);
  --btn-xs-font-weight: var(--font-weight-base);
  --btn-xs-line-height: var(--line-height-xs);
  --btn-xs-border-radius: var(--border-radius-xs);
  --btn-xs-icon-spacing: 6px;
  --btn-sm-font-size: var(--font-size-sm);
  --btn-sm-font-weight: var(--font-weight-medium);
  --btn-sm-line-height: var(--line-height-sm);
  --btn-sm-border-radius: var(--border-radius-xs);
  --btn-sm-icon-spacing: 8px;
  --btn-base-font-size: var(--font-size-base);
  --btn-base-font-weight: var(--font-weight-medium);
  --btn-base-line-height: var(--line-height-base);
  --btn-base-border-radius: var(--border-radius-xs);
  --btn-base-icon-spacing: 12px;
  --btn-lg-font-size: var(--font-size-lg);
  --btn-lg-font-weight: var(--font-weight-medium);
  --btn-lg-line-height: var(--line-height-lg);
  --btn-lg-border-radius: var(--border-radius-sm);
  --btn-lg-icon-spacing: 16px;
  --btn-xlg-font-size: var(--font-size-xlg);
  --btn-xlg-font-weight: var(--font-weight-medium);
  --btn-xlg-line-height: var(--line-height-xlg);
  --btn-xlg-border-radius: var(--border-radius-base);
  --btn-xlg-icon-spacing: 20px;
  --btn-default-bg: transparent;
  --btn-default-border: var(--gray-lighter-3);
  --btn-default-color: var(--gray-darker);
  --btn-default-hover-bg: var(--gray-faded);
  --btn-default-hover-border: var(--gray-lighter-2);
  --btn-default-hover-color: var(--gray-darker);
  --btn-default-active-bg: var(--gray-lighter-3);
  --btn-default-active-border: transparent;
  --btn-primary-bg: var(--brand-primary);
  --btn-primary-border: var(--brand-primary);
  --btn-primary-color: #fff;
  --btn-primary-hover-bg: var(--brand-primary-lighter);
  --btn-primary-hover-border: var(--brand-primary-lighter);
  --btn-primary-hover-color: #fff;
  --btn-primary-active-bg: var(--brand-primary-darker);
  --btn-primary-active-border: var(--brand-primary-darker);
  --btn-primary-faded-bg: var(--brand-primary-lighter-3);
  --btn-primary-faded-border: var(--brand-primary-lighter-3);
  --btn-primary-faded-color: var(--brand-primary);
  --btn-primary-faded-hover-bg: var(--brand-primary-lighter-2);
  --btn-primary-faded-hover-border: var(--brand-primary-lighter-2);
  --btn-primary-faded-hover-color: var(--brand-primary);
  --btn-primary-faded-active-bg: var(--brand-primary-lighter-2);
  --btn-primary-faded-active-border: var(--brand-primary-lighter-2);
  --btn-secondary-bg: var(--brand-secondary);
  --btn-secondary-border: var(--brand-secondary);
  --btn-secondary-color: #fff;
  --btn-secondary-hover-bg: var(--brand-secondary-lighter);
  --btn-secondary-hover-border: var(--brand-secondary-lighter);
  --btn-secondary-hover-color: #fff;
  --btn-secondary-active-bg: var(--brand-secondary-darker);
  --btn-secondary-active-border: var(--brand-secondary-darker);
  --btn-success-bg: var(--brand-success-darker);
  --btn-success-border: var(--brand-success-darker);
  --btn-success-color: #fff;
  --btn-success-hover-bg: var(--brand-success);
  --btn-success-hover-border: var(--brand-success);
  --btn-success-hover-color: #fff;
  --btn-success-active-bg: var(--brand-success-lighter-2);
  --btn-success-active-border: var(--brand-success-lighter-2);
  --btn-info-bg: var(--brand-info-darker);
  --btn-info-border: var(--brand-info-darker);
  --btn-info-color: #fff;
  --btn-info-hover-bg: var(--brand-info);
  --btn-info-hover-border: var(--brand-info);
  --btn-info-hover-color: #fff;
  --btn-info-active-bg: var(--brand-info-lighter-2);
  --btn-info-active-border: var(--brand-info-lighter-2);
  --btn-warning-bg: var(--brand-warning-darker);
  --btn-warning-border: var(--brand-warning-darker);
  --btn-warning-color: #fff;
  --btn-warning-hover-bg: var(--brand-warning);
  --btn-warning-hover-border: var(--brand-warning);
  --btn-warning-hover-color: #fff;
  --btn-warning-active-bg: var(--brand-warning-lighter-2);
  --btn-warning-active-border: var(--brand-warning-lighter-2);
  --btn-danger-bg: var(--brand-danger-darker);
  --btn-danger-border: var(--brand-danger-darker);
  --btn-danger-color: #fff;
  --btn-danger-hover-bg: var(--brand-danger);
  --btn-danger-hover-border: var(--brand-danger);
  --btn-danger-hover-color: #fff;
  --btn-danger-active-bg: var(--brand-danger-lighter-2);
  --btn-danger-active-border: var(--brand-danger-lighter-2);
  --btn-light-bg: rgba(255, 255, 255, 0.08);
  --btn-light-border: rgba(255, 255, 255, 0.16);
  --btn-light-color: #fff;
  --btn-light-hover-bg: rgba(255, 255, 255, 0.16);
  --btn-light-hover-border: rgba(255, 255, 255, 0.24);
  --btn-light-hover-color: #fff;
  --btn-light-active-bg: rgba(255, 255, 255, 0.24);
  --btn-light-active-border: rgba(255, 255, 255, 0.32);
  --btn-disabled-color: var(--gray-lighter);
  --btn-disabled-bg: var(--gray-faded);
  --btn-disabled-border: transparent;
  --btn-link-disabled-color: var(--gray-lighter-4);
  --btn-disabled-opacity: 0.65;
  --btn-social-height: 40px;
  --btn-social-font-size: var(--font-size-sm);
  --btn-social-padding-h: var(--spacing-2x);
  --btn-social-border-radius: var(--border-radius-xs);
  --btn-social-facebook-bg: #4267b2;
  --btn-social-facebook-hover-bg: #30487b;
  --btn-social-facebook-border-color: var(--btn-social-facebook-bg);
  --btn-social-facebook-hover-border: var(--btn-social-facebook-bg);
  --btn-social-facebook-color: #fff;
  --btn-social-facebook-hover-color: var(--btn-social-facebook-color);
  --btn-social-google-bg: #fff;
  --btn-social-google-hover-bg: #fff;
  --btn-social-google-border-color: #e6e8ec;
  --btn-social-google-border-hover-color: #bec0c4;
  --btn-social-google-color: #2a2e36;
  --btn-social-twitter-bg: #1da1f2;
  --btn-social-twitter-hover-bg: #0597f2;
  --btn-social-twitter-border-color: var(--btn-social-twitter-bg);
  --btn-social-twitter-border-hover-color: var(--btn-social-twitter-bg);
  --btn-social-twitter-color: #fff;
  --btn-social-twitter-hover-color: var(--btn-social-twitter-color);
  --btn-social-linkedin-bg: #0077b5;
}

.lagom-dark-mode {
  --btn-primary-faded-bg: var(--gray-lighter-3);
  --btn-primary-faded-border: transparent;
  --btn-primary-faded-color: #fff;
  --btn-primary-faded-hover-bg: var(--gray-lighter-4);
  --btn-primary-faded-hover-border: transparent;
  --btn-primary-faded-hover-color: #fff;
  --btn-primary-faded-active-bg: var(--gray-lighter-5);
  --btn-primary-faded-active-border: transparent;
}

:root {
  --table-font-size-small: var(--font-size-sm);
  --table-bg: transparent;
  --table-bg-accent: var(--gray-faded);
  --table-bg-hover: var(--ui-block-link-hover-bg);
  --table-bg-active: var(--ui-block-link-hover-bg);
  --table-border-color: var(--ui-block-divider-color);
  --table-caption-color: var(--text-muted);
  --table-vertical-align: middle;
  --table-horizontal-align: left;
  --table-horizontal-rtl: right;
  --table-th-bg: transparent;
  --table-th-padding: 12px 8px;
  --table-th-first-last-padding: var(--ui-block-padding-base);
  --table-th-height: 40px;
  --table-th-font-color: var(--text-body-color);
  --table-th-font-size: var(--font-size-sm);
  --table-th-font-weight: var(--font-weight-base);
  --table-td-bg: transparent;
  --table-td-padding: var(--ui-block-padding-base-v) 8px;
  --table-td-first-last-padding: var(--ui-block-padding-base);
  --table-td-height: 58px;
  --table-td-font-color: var(--text-heading-color);
  --table-td-font-size: var(--font-size-base);
  --table-condensed-cell-padding: var(--ui-block-padding-sm-v) var(--ui-block-padding-sm);
  --table-condensed-cell-th-padding: var(--ui-block-padding-sm-v) var(--ui-block-padding-sm);
  --table-container-header-bg: var(--ui-block-header-bg);
  --table-container-header-height: 48px;
  --table-container-pagination-bg: var(--ui-block-header-bg);
  --table-container-bg: var(--ui-block-bg);
  --table-container-border: var(--ui-block-border);
  --table-container-box-shadow: var(--ui-block-shadow);
  --table-container-border-radius: var(--ui-block-border-radius);
  --table-container-table-padding: 0px;
  --table-container-table-bg-filter: var(--ui-block-header-bg);
  --table-container-table-bg-pagination: var(--ui-block-header-bg);
  --dropdown-bg: #fff;
  --dropdown-border: var(--ui-block-border);
  --dropdown-border-radius: var(--ui-block-border-radius);
  --dropdown-box-shadow: var(--box-shadow-lg);
  --dropdown-divider-bg: var(--ui-block-divider-color);
  --dropdown-link-padding-h: var(--ui-block-padding-base);
  --dropdown-link-padding-v: var(--ui-nav-v-link-padding-v);
  --dropdown-collapse-link-padding-h: 16px;
  --dropdown-collapse-link-padding-v: 8px;
  --dropdown-collapse-bg: var(--gray-faded);
  --dropdown-link-color: var(--ui-nav-link-color);
  --dropdown-link-hover-color: var(--ui-nav-link-hover-color);
  --dropdown-link-hover-bg: var(--ui-nav-link-hover-bg);
  --dropdown-link-hover-padding-h: calc(var(--dropdown-link-padding-h) + var(--ui-nav-v-link-hover-padding-h));
  --dropdown-link-active-color: var(--ui-nav-link-active-color);
  --dropdown-link-active-bg: var(--ui-nav-link-active-bg);
  --dropdown-link-disabled-color: var(--ui-nav-link-disabled-bg);
  --dropdown-link-icon-color: var(--ui-nav-link-icon-color);
  --dropdown-link-icon-hover-color: var(--ui-nav-link-icon-hover-color);
  --dropdown-link-icon-active-color: var(--ui-nav-link-icon-active-color);
  --dropdown-header-color: var(--text-heading-color);
  --dropdown-caret-color: var(--icons-color);
  --dropdown-min-width: 200px;
  --navbar-height: 50px;
  --navbar-border-radius: var(--border-radius-base);
  --navbar-padding-h: calc(var(--ui-gutter-base) / 2);
  --navbar-padding-v: calc(var(--navbar-height) - var(--line-height-computed) / 2);
  --navbar-dropdown-max-height: 660px;
  --navbar-nav-link-padding-x: var(--spacing-2x);
  --navbar-toggler-padding-y: var(--spacing-1x);
  --navbar-toggler-padding-x: var(--spacing-2x);
  --navbar-toggler-font-size: var(--font-size-lg);
  --navbar-toggler-border-radius: var(--border-radius-base);
  --navbar-toggler-border-width: 1px;
  --navbar-toggler-icon-width: var(--spacing-1x);
  --navbar-toggler-icon-height: var(--spacing-1x);
  --navbar-toggler-icon-content: "";
  --navbar-nav-scroll-max-height: 75vh;
  --nav-link-height: 64px;
  --nav-link-padding-h: var(--ui-padding-base-h);
  --nav-link-padding-v: var(--ui-padding-base-v);
  --nav-link-color: var(--ui-nav-link-color);
  --nav-link-hover-bg: null;
  --nav-link-hover-color: var(--ui-nav-link-hover-color);
  --nav-disabled-link-color: var(--ui-nav-link-disabled-color);
  --nav-disabled-link-hover-color: var(--ui-nav-link-disabled-color);
  --nav-condensed-link-height: var(--ui-height-sm);
  --nav-condensed-link-padding-h: var(--ui-padding-sm-h);
  --nav-condensed-link-padding-v: var(--ui-padding-sm-v);
  --nav-divider-color: var(--ui-block-divider-color);
  --nav-divider-margin-y: 8px;
  --nav-tabs-border-color: var(--ui-block-divider-color);
  --nav-tabs-border-radius: var(--border-radius-base);
  --nav-tabs-border-width: 1px;
  --nav-tabs-link-color: var(--ui-nav-secondary-link-color);
  --nav-tabs-link-icon-color: var(--ui-nav-secondary-link-icon-color);
  --nav-tabs-link-padding: var(--ui-padding-base-h) 0;
  --nav-tabs-link-negative-margin: calc(-1 * var(--nav-tabs-border-width));
  --nav-tabs-item-margin-right: var(--spacing-1x);
  --nav-tabs-link-active-color: var(--ui-nav-link-active-color);
  --nav-tabs-link-active-icon-color: var(--ui-nav-link-icon-active-color);
  --nav-tabs-link-active-bg: transparent;
  --nav-tabs-link-active-border-color: var(--brand-primary-lighter);
  --nav-tabs-link-active-border-width: 3px;
  --nav-tabs-link-hover-color: var(--ui-nav-link-hover-color);
  --nav-tabs-link-hover-icon-color: var(--ui-nav-link-icon-hover-color);
  --nav-tabs-link-hover-bg: transparent;
  --nav-tabs-link-hover-border-color: var(--gray-lighter-4);
  --nav-pills-border-radius: var(--border-radius-base);
  --nav-pills-active-link-hover-bg: var(--ui-block-link-active-bg);
  --nav-pills-active-link-hover-color: var(--ui-nav-link-active-color);
  --nav-pills-link-active-color: #fff;
  --nav-pills-link-active-bg: var(--brand-primary);
  --nav-pills-link-active-color: #fff;
  --nav-pills-link-active-bg: var(--brand-primary);
  --pagination-color: var(--btn-default-color);
  --pagination-bg: var(--btn-default-bg);
  --pagination-border: var(--btn-default-border);
  --pagination-hover-color: var(--btn-default-hover-color);
  --pagination-hover-bg: var(--btn-default-hover-bg);
  --pagination-hover-border: var(--btn-default-hover-border);
  --pagination-active-color: var(--btn-primary-faded-color);
  --pagination-active-bg: var(--btn-primary-faded-bg);
  --pagination-active-border: var(--btn-primary-faded-border);
  --pagination-disabled-color: var(--btn-disabled-color);
  --pagination-disabled-bg: var(--btn-disabled-bg);
  --pagination-disabled-border: var(--btn-disabled-border);
  --jumbotron-padding-h: var(--spacing-2x);
  --jumbotron-padding-v: var(--spacing-4x);
  --jumbotron-color: inherit;
  --jumbotron-bg: var(--gray-lighter-4);
  --jumbotron-heading-color: inherit;
  --jumbotron-font-size: calc(var(--font-size-base) * 1.5);
  --jumbotron-heading-font-size: calc(var(--font-size-base) * 4.5);
  --tooltip-max-width: 268px;
  --tooltip-color: var(--gray-base);
  --tooltip-bg: #fff;
  --tooltip-opacity: 1;
  --tooltip-arrow-width: 5px;
  --tooltip-arrow-color: var(--tooltip-bg);
  --tooltip-font-size: var(--font-size-sm);
  --tooltip-border-radius: var(--border-radius-xs);
  --tooltip-padding-y: var(--spacing-2x);
  --tooltip-padding-x: var(--spacing-2x);
  --tooltip-margin: 0;
  --tooltip-arrow-height: 3px;
  --tooltip-box-shadow: var(--box-shadow-lg);
  --popover-bg: #fff;
  --popover-max-width: 288px;
  --popover-border-color: var(--gray-lighter-4);
  --popover-title-bg: var(--gray-lighter-4);
  --popover-arrow-width: 10px;
  --popover-arrow-height: 5px;
  --popover-arrow-color: var(--popover-bg);
  --popover-arrow-outer-width: calc(var(--popover-arrow-width) + 1);
  --popover-arrow-outer-color: var(--popover-bg);
  --popover-arrow-outer-fallback-color: var(--popover-fallback-border-color);
  --popover-header-bg: brightness(var(--popover-bg), 97%);
  --popover-header-color: null;
  --popover-header-padding-y: var(--spacing-1x);
  --popover-header-padding-x: 0.75rem;
  --popover-border-color: var(--gray-lighter-4);
  --popover-header-border-bottom-color: brightness(var(--popover-header-bg),
      92%);
  --popover-border-radius: var(--border-radius-base);
  --popover-border-width: 1px;
  --popover-inner-border-radius: calc(var(--popover-border-radius) - var(--popover-border-width));
  --popover-body-color: #212529;
  --popover-body-padding-y: var(--popover-header-padding-y);
  --popover-body-padding-x: var(--popover-header-padding-x);
  --toast-max-width: 350px;
  --toast-padding-x: 0.75rem;
  --toast-padding-y: var(--spacing-1x);
  --toast-font-size: 0.875rem;
  --toast-color: null;
  --toast-background-color: rgba(#fff, 0.85);
  --toast-border-width: 1px;
  --toast-border-color: rgba(0, 0, 0, 0.1);
  --toast-border-radius: var(--spacing-1x);
  --toast-box-shadow: 0 var(--spacing-1x) 0.75rem rgba(#000, 0.1);
  --toast-header-color: #6c757d;
  --toast-header-background-color: rgba(#fff, 0.85);
  --toast-header-border-color: rgba(0, 0, 0, 0.05);
  --modal-inner-padding: var(--ui-block-padding-base);
  --modal-title-padding: var(--ui-block-padding-base-v) var(--ui-block-padding-base);
  --modal-footer-padding: 0 var(--ui-block-padding-base) var(--ui-block-padding-base) var(--ui-block-padding-base);
  --modal-footer-margin-between: var(--spacing-2x);
  --modal-title-font-size: var(--font-size-h5);
  --modal-title-font-weight: var(--font-weight-light);
  --modal-title-line-height: var(--line-height-h5);
  --modal-content-bg: var(--ui-block-bg);
  --modal-content-border-color: var(--ui-block-border-color);
  --modal-content-fallback-border-color: var(--ui-block-border-color);
  --modal-content-max-height: calc(100vh - (var(--modal-dialog-margin) * 2));
  --modal-content-min-height-sm: calc(100vh - (var(--modal-dialog-margin-y-sm-up) * 2));
  --modal-content-color: null;
  --modal-content-border-radius: var(--ui-block-border-radius);
  --modal-content-inner-border-radius: calc(var(--modal-content-border-radius) - var(--modal-content-border-width));
  --modal-content-box-shadow: var(--box-shadow-xlg);
  --modal-content-box-shadow-sm-up: var(--box-shadow-lg);
  --modal-body-max-height: calc(100vh - 200px);
  --modal-backdrop-bg: var(--ui-block-overlay-bg);
  --modal-header-background-color: transparent;
  --modal-header-border-color: var(--ui-block-divider-color);
  --modal-footer-border-color: var(--ui-block-divider-color);
  --modal-xl: 800px;
  --modal-lg: 560px;
  --modal-md: 448px;
  --modal-sm: 300px;
  --modal-transition: all var(--transition-base);
  --modal-fade-transform: scale(0.5);
  --modal-show-transform: none;
  --modal-scale-transform: scale(1.02);
  --modal-dialog-margin: var(--spacing-1x);
  --modal-dialog-margin-y-sm-up: var(--spacing-3x);
  --modal-dialog-max-height: calc(100% - (var(--modal-dialog-margin) * 2));
  --modal-dialog-centered-min-height: var(--modal-dialog-max-height);
  --modal-dialog-centered-before-height: var(--modal-content-max-height);
  --modal-dialog-scrollable-max-height-sm: calc(100% - (var(--modal-dialog-margin-y-sm-up) * 2));
  --modal-dialog-centered-min-height-sm: var(--modal-dialog-scrollable-max-height-sm);
  --modal-dialog-centered-before-height-sm: var(--modal-content-min-height-sm);
  --modal-btn-close-padding: var(--ui-block-padding-base-v);
  --alert-padding-v: var(--ui-block-padding-base-v);
  --alert-padding-h: var(--ui-block-padding-base);
  --alert-padding-2x: var(--ui-block-padding-base);
  --alert-border-radius: var(--ui-block-border-radius);
  --alert-link-font-weight: var(--font-weight-bold);
  --alert-success-bg: var(--state-success-bg);
  --alert-success-text: var(--state-success-text);
  --alert-success-border: var(--state-success-border);
  --alert-info-bg: var(--state-info-bg);
  --alert-info-text: var(--state-info-text);
  --alert-info-border: var(--state-info-border);
  --alert-warning-bg: var(--state-warning-bg);
  --alert-warning-text: var(--state-warning-text);
  --alert-warning-border: var(--state-warning-border);
  --alert-danger-bg: var(--state-danger-bg);
  --alert-danger-text: var(--state-danger-text);
  --alert-danger-border: var(--state-danger-border);
  --alert-gray-bg: var(--gray-faded);
  --alert-gray-text: var(--gray-darker);
  --alert-gray-border: var(--gray-lighter-3);
  --alert-primary-bg: var(--brand-primary);
  --alert-primary-text: var(--text-secondary-heading-color);
  --alert-primary-border: var(--brand-primary);
  --alert-secondary-bg: var(--brand-secondary);
  --alert-secondary-text: var(--text-secondary-heading-color);
  --alert-secondary-border: var(--brand-secondary);
  --alert-icon-font-family: "FontAwesome";
  --alert-success-icon: "\f058";
  --alert-info-icon: "\f05a";
  --alert-warning-icon: "\f071";
  --alert-danger-icon: "\f06a";
  --alert-gray-icon: "\f05a";
  --alert-primary-icon: "\f05a";
  --alert-secondary-icon: "\f05a";
  --alert-variants-title-color: var(--text-heading-color);
  --progress-bg: var(--gray-lighter-4);
  --progress-bar-color: #fff;
  --progress-font-size: var(--font-size-base) * 0.75;
  --progress-height: var(--spacing-1x);
  --progress-width: 76px;
  --progress-border-radius: var(--border-radius-sm);
  --progress-bar-bg: var(--gray-lighter);
  --progress-bar-success-bg: var(--brand-success);
  --progress-bar-warning-bg: var(--brand-warning);
  --progress-bar-danger-bg: var(--brand-danger);
  --progress-bar-info-bg: var(--brand-info);
  --progress-bar-transition: var(--transition-base);
  --panel-bg: var(--ui-block-bg);
  --panel-box-shadow: var(--ui-block-shadow);
  --panel-border: var(--ui-block-border);
  --panel-border-radius: var(--ui-block-border-radius);
  --panel-border-divider-color: var(--ui-block-divider-color);
  --panel-padding-v: var(--ui-block-padding-base);
  --panel-padding-h: var(--ui-block-padding-base);
  --panel-body-padding: var(--ui-block-padding-base);
  --panel-heading-height: 56px;
  --panel-heading-padding: var(--ui-block-padding-base-v) var(--ui-block-padding-base);
  --panel-footer-bg: var(--ui-block-header-bg);
  --panel-footer-padding: var(--ui-block-padding-base-v) var(--ui-block-padding-base);
  --panel-title-color: var(--text-heading-color);
  --panel-title-font-size: var(--font-size-h6);
  --panel-title-font-weight: var(--font-weight-h6);
  --panel-title-line-height: var(--line-height-h6);
  --panel-default-bg: var(--panel-bg);
  --panel-default-text: var(--text-heading-color);
  --panel-default-border: var(--ui-block-divider-color);
  --panel-default-heading-bg: var(--ui-block-header-bg);
  --panel-active-bg: var(--ui-block-bg-form);
  --panel-active-border-color: var(--input-focus-border-color);
  --panel-hover-bg: var(--panel-bg);
  --panel-hover-shadow: var(--ui-block-shadow-lg);
  --panel-hover-border-color: var(--input-hover-border-color);
  --panel-lg-border-radius: var(--border-radius-xlg);
  --panel-lg-heading-padding: 10px var(--ui-block-padding-lg);
  --panel-lg-body-padding: var(--ui-block-padding-lg);
  --panel-lg-footer-padding: 10px var(--ui-block-padding-lg);
  --panel-success-bg: var(--state-success-bg);
  --panel-success-text: var(--state-success-text);
  --panel-success-border: var(--state-success-border);
  --panel-success-heading-bg: var(--state-success-bg);
  --panel-info-bg: var(--state-info-bg);
  --panel-info-text: var(--state-info-text);
  --panel-info-border: var(--state-info-border);
  --panel-info-heading-bg: var(--state-info-bg);
  --panel-warning-bg: var(--state-warning-bg);
  --panel-warning-text: var(--state-warning-text);
  --panel-warning-border: var(--state-warning-border);
  --panel-warning-heading-bg: var(--state-warning-bg);
  --panel-danger-bg: var(--state-danger-bg);
  --panel-danger-text: var(--state-danger-text);
  --panel-danger-border: var(--state-danger-border);
  --panel-danger-heading-bg: var(--state-danger-bg);
  --panel-check-padding: 16px;
  --card-spacer-y: var(--panel-padding-v);
  --card-spacer-x: var(--panel-padding-h);
  --card-border: var(--panel-border);
  --card-border-radius: var(--panel-border-radius);
  --card-inner-border-radius: calc(var(--panel-border-radius) - var(--panel-border-width));
  --card-cap-bg: var(--panel-footer-bg);
  --card-cap-color: var(--panel-title-color);
  --card-bg: var(--panel-bg);
  --card-img-overlay-padding: var(--spacing-1x);
  --card-group-margin: var(--ui-gutter-base) / 2;
  --card-deck-margin: var(--card-group-margin);
  --card-columns-count: 3;
  --card-columns-gap: var(--spacing-1x);
  --card-columns-margin: var(--card-spacer-y);
  --card-body-padding: var(--panel-body-padding);
  --card-footer-padding: var(--panel-footer-padding);
  --card-heading-padding: var(--panel-heading-padding);
  --thumbnail-padding: 4px;
  --thumbnail-bg: var(--body-bg);
  --thumbnail-border: var(--gray-lighter-4);
  --thumbnail-border-colo: #dee2e6;
  --thumbnail-border-width: 1px;
  --thumbnail-border-radius: var(--border-radius-base);
  --thumbnail-caption-color: var(--text-lighter-color);
  --thumbnail-caption-padding: var(--spacing-1x);
  --well-bg: var(--gray-faded);
  --well-border: var(--ui-block-border-color);
  --badge-color: #fff;
  --badge-link-hover-color: #fff;
  --badge-bg: var(--gray-lighter-4);
  --badge-active-color: var(--link-color);
  --badge-active-bg: #fff;
  --badge-font-size: var(--font-size-xs);
  --badge-font-weight: var(--font-weight-base);
  --badge-line-height: 1;
  --badge-border-radius: 10px;
  --badge-padding-y: 3px;
  --badge-padding-x: 6px;
  --badge-margin: 0 0 0 auto;
  --badge-transition: var(--transition-base);
  --badge-focus-width: var(--input-btn-focus-width);
  --badge-default-bg: var(--gray-lighter-3);
  --badge-default-color: var(--text-lighter-color);
  --badge-primary-bg: var(--brand-primary);
  --badge-primary-hover-bg: var(--brand-primary-darker);
  --badge-primary-color: var(--badge-color);
  --badge-primary-faded-bg: var(--brand-primary-lighter-3);
  --badge-primary-faded-hover-bg: var(--brand-primary-lighter-2);
  --badge-primary-faded-color: var(--brand-primary);
  --badge-success-bg: var(--state-success-bg);
  --badge-success-hover-bg: var(--brand-success-darker);
  --badge-success-color: var(--state-success-text);
  --badge-info-bg: var(--state-info-bg);
  --badge-info-hover-bg: var(--brand-primary-darker);
  --badge-info-color: var(--state-info-text);
  --badge-warning-bg: var(--state-warning-bg);
  --badge-warning-hover-bg: var(--brand-warning-darker);
  --badge-warning-color: var(--state-warning-text);
  --badge-danger-bg: var(--state-danger-bg);
  --badge-danger-hover-bg: var(--brand-danger-darker);
  --badge-danger-color: var(--state-danger-text);
  --badge-text-transform: none;
  --breadcrumb-padding-vertical: var(--ui-padding-base-v);
  --breadcrumb-padding-horizontal: var(--ui-padding-base-h);
  --breadcrumb-item-padding-vertical: 0px;
  --breadcrumb-item-padding-horizontal: 5px;
  --breadcrumb-bg: #fff;
  --breadcrumb-color: var(--gray-lighter-3);
  --breadcrumb-active-color: #001eff;
  --breadcrumb-separator: "/";
  --breadcrumb-font-size: null;
  --carousel-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  --carousel-control-color: #fff;
  --carousel-control-width: 15%;
  --carousel-control-opacity: 0.5;
  --carousel-control-hover-opacity: 0.9;
  --carousel-control-font-size: 20px;
  --carousel-indicator-active-bg: #fff;
  --carousel-indicator-border-color: #fff;
  --carousel-indicator-width: 30px;
  --carousel-indicator-height: 3px;
  --carousel-indicator-hit-area-height: 10px;
  --carousel-indicator-spacer: 3px;
  --carousel-caption-color: #fff;
  --carousel-caption-width: 70%;
  --carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>");
  --carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>");
  --carousel-control-icon-width: 20px;
  --spinner-width: var(--spacing-2x);
  --spinner-height: var(--spinner-width);
  --spinner-border-width: var(--spacing-1x);
  --spinner-width-sm: var(--spacing-2x);
  --spinner-height-sm: var(--spinner-width-sm);
  --spinner-border-width-sm: var(--spacing-1x);
  --close-font-weight: var(--font-weight-bold);
  --close-font-size: 22px;
  --close-color: var(--gray-icons);
  --close-color-hover: var(--brand-primary);
  --close-text-shadow: 0 1px 0 #fff;
  --code-color: #c7254e;
  --code-bg: #f9f2f4;
  --code-font-size: 90%;
  --code-font-family: Menlo, Monaco, Consolas, Courier New, monospace;
  --kbd-color: #fff;
  --kbd-bg: #333;
  --kbd-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  --kbd-padding-y: 2px;
  --kbd-padding-x: 4px;
  --nested-kbd-font-size: 100%;
  --nested-kbd-font-weight: bold;
  --pre-bg: var(--gray-faded);
  --pre-padding: var(--ui-block-padding-sm);
  --pre-color: var(--text-body-color);
  --pre-font-size: var(--font-size-sm);
  --pre-border-color: var(--ui-block-border-color);
  --pre-border-radius: var(--ui-block-border-radius);
  --pre-scrollable-max-height: 340px;
  --blockquote-bg: var(--gray-faded);
  --blockquote-border-color: var(--gray-lighter-4);
  --blockquote-font-color: var(--text-heading-color);
  --blockquote-font-size: var(--font-size-lg);
  --blockquote-line-height: var(--line-height-lg);
  --blockquote-small-color: var(--gray-lighter-4);
  --blockquote-small-font-size: var(--font-size-sm);
  --blockquote-padding: 32px 32px 32px 72px;
  --hr-border: var(--gray-lighter-4);
  --show-animation: transform 0.32s cubic-bezier(0, 0, 0, 1), opacity 0.08s;
  --dt-font-weight: var(--font-weight-bold);
  --previews-img-height: 240px;
  --print-page-size: a3;
  --print-body-min-width: 992px;
  --hr-margin-y: var(--spacing-1x);
  --hr-border-color: rgba(#000, 0.1);
  --hr-border-width: var(--border-width-base);
  --list-inline-padding: var(--spacing-1x);
}

@media (max-width: 991px) {
  :root {
    --navbar-dropdown-max-height: 560px;
  }
}

.lagom-dark-mode {
  --dropdown-bg: #242424;
  --modal-backdrop-bg: rgba(18, 18, 18, 0.78);
  --popover-bg: var(--dropdown-bg);
  --tooltip-arrow-color: var(--dropdown-bg);
  --tooltip-bg: var(--dropdown-bg);
  --dropdown-collapse-bg: #1a1a1a;
  --dropdown-link-color: var(--text-body-color);
  --badge-success-bg: var(--state-success-bg);
  --badge-success-hover-bg: var(--brand-success-darker);
  --badge-success-color: var(--state-success-text);
  --badge-info-bg: var(--state-info-bg);
  --badge-info-hover-bg: var(--brand-primary-darker);
  --badge-info-color: var(--state-info-text);
  --badge-warning-bg: var(--state-warning-bg);
  --badge-warning-hover-bg: var(--brand-warning-darker);
  --badge-warning-color: var(--state-warning-text);
  --badge-danger-bg: var(--state-danger-bg);
  --badge-danger-hover-bg: var(--brand-danger-darker);
  --badge-danger-color: var(--state-danger-text);
}

:root {
  --list-group-bg: var(--ui-block-bg);
  --list-group-color: null;
  --list-group-border: var(--ui-block-border);
  --list-group-box-shadow: var(--ui-block-shadow);
  --list-group-border-radius: var(--ui-block-border-radius);
  --list-group-active-color: var(--ui-nav-link-active-color);
  --list-group-active-bg: var(--ui-block-link-active-bg);
  --list-group-active-border: var(--list-group-active-bg);
  --list-group-active-text-color: var(--list-group-active-bg);
  --list-group-disabled-color: #6c757d;
  --list-group-action-color: var(--gray-base);
  --list-group-action-hover-color: var(--list-group-action-color);
  --list-group-action-active-color: var(--gray-darker);
  --list-group-action-active-bg: var(--gray-lighter-3);
  --list-group-item-padding: var(--ui-block-padding-base-v) var(--ui-block-padding-base);
  --list-group-item-lg-padding: var(--ui-block-padding-lg);
  --list-group-item-border-color: var(--ui-block-divider-color);
  --list-group-item-heading-color: var(--text-heading-color);
  --list-group-item-text-color: var(--text-body-color);
  --list-group-item-icon-color: var(--text-primary-color);
  --list-group-item-disabled-color: var(--gray-lighter);
  --list-group-item-disabled-bg: var(--list-group-bg);
  --list-group-item-disabled-text-color: var(--list-group-disabled-color);
  --list-group-item-link-color: var(--ui-block-link-color);
  --list-group-item-link-heading-color: var(--brand-primary);
  --list-group-item-link-text-color: var(--list-group-item-text-color);
  --list-group-item-link-hover-bg: var(--ui-block-link-hover-bg);
  --list-group-item-link-hover-color: var(--ui-nav-link-hover-color);
  --list-group-item-link-active-color: var(--ui-nav-link-active-color);
  --list-group-item-link-active-bg: var(--ui-block-link-active-bg);
  --list-group-item-link-active-border: var(--brand-primary-lighter-4);
  --list-group-item-link-disabled-color: var(--text-lighter-color);
  --list-group-item-link-disabled-bg: var(--gray-lighter-4);
  --list-group-item-link-disabled-border: var(--gray-lighter-3);
  --list-group-item-link-icon-color: var(--ui-icon-color);
  --promo-slider-min-height: 314px;
  --promo-slider-caption-font-size: var(--font-size-h6);
  --promo-slider-caption-line-height: var(--line-height-h6);
  --promo-slider-caption-font-weight: var(--font-weight-h6);
  --promo-slider-title-font-size: var(--font-size-h4);
  --promo-slider-title-line-height: var(--line-height-h4);
  --promo-slider-title-font-weight: var(--font-weight-bold);
  --promo-slider-body-padding: var(--spacing-7x) 0px var(--spacing-5x) var(--spacing-3x);
  --promo-slider-content-padding: var(--spacing-4x) 0 var(--spacing-5x) var(--spacing-3x);
  --promo-slider-header-padding: var(--spacing-1x) var(--spacing-1x) 0 var(--spacing-3x);
  --promo-slider-body-padding-rtl: var(--spacing-7x) var(--spacing-3x) var(--spacing-5x) 0px;
  --promo-slider-content-padding-rtl: var(--spacing-4x) var(--spacing-3x) var(--spacing-5x) 0;
  --promo-slider-header-padding-rtl: var(--spacing-1x) var(--spacing-3x) 0 var(--spacing-1x);
  --promo-slider-illustration-width: 400px;
  --promo-slider-sm-title-font-size: var(--font-size-h4);
  --promo-slider-sm-title-line-height: var(--line-height-h4);
  --promo-slider-xs-title-font-size: var(--font-size-h5);
  --promo-slider-xs-title-line-height: var(--line-height-h5);
  --promo-slider-xs-illustration-height: 326px;
  --promo-slider-xs-illustration-width: 376px;
  --panel-summary-shadow: var(--box-shadow-base);
  --panel-summary-border-radius: var(--ui-block-border-radius);
  --panel-summary-padding: var(--ui-block-padding-base);
  --panel-summary-title-font-size: var(--font-size-h4);
  --panel-summary-title-font-weight: var(--font-weight-h4);
  --panel-summary-title-line-height: var(--line-height-h4);
  --panel-summary-text-font-size: var(--font-size-sm);
  --panel-summary-text-font-weight: var(--font-weight-light);
  --panel-summary-text-line-height: var(--line-height-sm);
  --panel-summary-list-padding-v: 3px;
  --panel-summary-list-item-padding-v: var(--spacing-2x);
  --panel-summary-list-title-font-size: var(--font-size-xs);
  --panel-summary-list-color-faded: var(--text-body-color);
  --panel-summary-total-text-font-color: var(--text-body-color);
  --panel-summary-content-max-height: 500px;
  --panel-summary-main-item-font-size: var(--font-size-base);
  --panel-summary-main-item-line-height: var(--line-height-sm);
  --panel-summary-main-item-font-weight: var(--font-weight-medium);
  --panel-sidebar-bg: transparent;
  --panel-sidebar-footer-bg: transparent;
  --panel-sidebar-border: none;
  --panel-sidebar-box-shadow: none;
  --panel-sidebar-heading-bg: transparent;
  --panel-sidebar-heading-height: unset;
  --panel-sidebar-heading-padding: 0 0 var(--ui-block-padding-sm);
  --panel-sidebar-title-size: var(--font-size-h6);
  --panel-sidebar-title-weight: var(--font-weight-h6);
  --panel-sidebar-body-padding: 0;
  --panel-sidebar-footer-padding: var(--ui-block-padding-sm) 0 0;
  --panel-sidebar-margin-bottom: var(--spacing-4x);
  --panel-sidebar-link-bg: transparent;
  --panel-sidebar-link-color: var(--link-color);
  --panel-sidebar-link-icon-color: var(--link-color);
  --panel-sidebar-link-margin: 1px;
  --panel-sidebar-link-padding: var(--ui-nav-v-link-padding-v) 0;
  --panel-sidebar-link-border-radius: var(--ui-nav-link-border-radius);
  --panel-sidebar-link-hover-bg: var(--ui-nav-link-hover-bg);
  --panel-sidebar-link-hover-color: var(--ui-nav-link-hover-color);
  --panel-sidebar-link-hover-padding-h: var(--ui-nav-v-link-hover-padding-h);
  --panel-sidebar-link-hover-icon-color: var(--ui-nav-link-icon-hover-color);
  --panel-sidebar-link-active-bg: var(--ui-nav-link-active-bg);
  --panel-sidebar-link-active-color: var(--ui-nav-link-active-color);
  --panel-sidebar-link-active-padding-h: var(--ui-nav-v-link-active-padding-h);
  --panel-sidebar-link-active-icon-color: var(--ui-nav-link-icon-active-color);
  --panel-sidebar-list-group-bg: var(--ui-block-bg);
  --panel-sidebar-list-group-border: var(--ui-block-border);
  --panel-sidebar-list-group-box-shadow: var(--ui-block-shadow);
  --panel-sidebar-list-group-border-radius: var(--ui-block-border-radius);
  --panel-home-domain-bg: var(--secondary-block-bg);
  --panel-home-domain-border: none;
  --panel-home-domain-title-color: var(--secondary-block-title-color);
  --panel-home-domain-text-color: var(--text-body-color);
  --product-details-bg: var(--primary-block-bg);
  --product-details-title-color: var(--text-secondary-heading-color);
  --product-details-title-font-size: var(--font-size-h4);
  --product-details-title-font-weight: var(--font-weight-h4);
  --product-details-title-line-height: var(--line-height-h4);
  --product-details-text-color: var(--text-secondary-body-color);
  --panel-accordion-heading-bg: transparent;
  --panel-accordion-hover-border-color: var(--brand-primary);
  --panel-accordion-active-border-color: var(--brand-primary);
  --panel-accordion-active-heading-color: var(--ui-nav-link-active-color);
  --search-field-icon-color: var(--gray-icons);
  --search-field-combined-icon-color: var(--brand-primary);
  --search-group-max-width: var(--max-width-md);
  --tile-min-height: 182px;
  --tile-padding: var(--ui-padding-base-v) var(--ui-block-padding-base);
  --tile-bg: var(--ui-block-bg);
  --tile-bg-color: var(--ui-block-bg);
  --tile-border-radius: var(--ui-block-border-radius);
  --tile-box-shadow: var(--ui-block-shadow);
  --tile-border: var(--ui-block-border);
  --tile-border-color-hover: var(--brand-primary);
  --tile-icon-font-size: var(--font-size-h3);
  --tile-icon-color: var(--gray-icons);
  --tile-stat-color: var(--text-primary-color);
  --tile-stat-font-size: 62px;
  --tile-stat-sm-font-size: 48px;
  --tile-stat-font-weight: var(--font-weight-light);
  --tile-title-color: var(--text-heading-color);
  --tile-title-font-size: var(--font-size-h6);
  --tile-title-font-weight: var(--font-weight-base);
  --tile-title-line-height: var(--line-height-h6);
  --tile-sm-stat-font-size: var(--font-size-h2);
  --tile-sm-title-font-size: var(--font-size-base);
  --tile-hover-bg: var(--ui-block-bg);
  --tile-hover-shadow: var(--box-shadow-base);
  --tile-hover-transform: translate3d(0, -8px, 0);
  --tile-mob-stat-font-size: var(--font-size-h2);
  --tile-mob-title-font-size: var(--font-size-base);
  --tile-sm-mob-stat-font-size: var(--font-size-xxlg);
  --tile-sm-mob-title-font-size: var(--font-size-sm);
  --tile-loader-bg: var(--gray-lighter-4);
  --tile-loader-progress-bg: var(--brand-primary);
  --login-logo-height: 56px;
  --login-width: var(--max-width-xs);
  --login-lg-width: var(--max-width-md);
  --login-bg: var(--ui-block-bg);
  --login-footer-bg: transparent;
  --login-border: var(--ui-block-border);
  --login-border-radius: var(--ui-block-border-radius);
  --login-box-shadow: var(--ui-block-shadow);
  --login-padding: var(--spacing-4x);
  --login-mob-padding: var(--spacing-3x);
  --login-header-margin-bottom: var(--spacing-6x);
  --login-title-color: var(--text-heading-color);
  --login-title-font-size: var(--font-size-h3);
  --login-title-font-weight: var(--font-weight-h3);
  --login-title-line-height: var(--line-height-h3);
  --login-desc-color: var(--text-lighter-color);
  --login-desc-font-size: var(--font-size-base);
  --login-desc-font-weight: var(--font-weight-base);
  --login-link-color: var(--link-color);
  --error-page-bg: var(--brand-secondary-gradient-h);
  --login-sidebar-box-shadow: var(--ui-block-shadow-lg);
  --login-sidebar-desc-lighter-color: var(--primary-block-text-faded-color);
  --login-sidebar-desc-font-size: var(--font-size-lg);
  --login-sidebar-desc-font-weight: var(--font-weight-light);
  --login-sidebar-desc-line-height: var(--line-height-lg);
  --login-sidebar-bullet-bg: var(--primary-block-dot-nav-bg);
  --login-sidebar-bullet-hover-bg: var(--primary-block-dot-nav-hover-bg);
  --login-sidebar-bullet-active-bg: var(--primary-block-dot-nav-active-bg);
  --package-bg: var(--ui-block-bg);
  --package-border: var(--ui-block-border);
  --package-border-radius: var(--ui-block-border-radius);
  --package-block-shadow: var(--ui-block-shadow-lg);
  --package-title-font-size: var(--font-size-h4);
  --package-title-font-weight: var(--font-weight-h4);
  --package-title-line-height: var(--line-height-h4);
  --package-title-spacing-bottom: var(--spacing-2x);
  --package-desc-color: var(--font-size-lg);
  --package-desc-font-size: var(--font-size-lg);
  --package-desc-line-height: var(--line-height-lg);
  --package-desc-font-weight: var(--font-weight-light);
  --package-hover-block-shadow: var(--ui-block-shadow-xlg);
  --package-active-border-color: var(--panel-active-border-color);
  --package-active-shadow-inset: inset 0 0 0 1px var(--package-active-border-color);
  --package-btn-min-width: 168px;
  --package-padding: var(--spacing-4x);
  --package-element-spacing: var(--spacing-3x);
  --package-sm-title-font-size: var(--font-size-h6);
  --package-sm-title-line-height: var(--line-height-h6);
  --package-sm-title-font-weight: var(--font-weight-h6);
  --package-desc-sm-font-size: var(--font-size-base);
  --package-desc-sm-line-height: var(--line-height-md);
  --package-desc-sm-font-weight: var(--font-weight-base);
  --package-sm-padding: var(--spacing-3x);
  --package-sm-element-spacing: var(--spacing-2x);
  --price-color: var(--text-heading-color);
  --price-font-size: var(--font-size-h3);
  --price-font-weight: var(--font-weight-bold);
  --price-line-height: var(--line-height-h3);
  --price-currency-font-size: var(--font-size-xlg);
  --price-currency-font-weight: var(--font-weight-light);
  --price-currency-line-height: var(--line-height-xlg);
  --price-cycle-color: var(--text-body-color);
  --price-cycle-font-size: var(--font-size-xs);
  --price-cycle-line-height: var(--line-height-xs);
  --price-cycle-font-weight: var(--font-weight-base);
  --price-savings-color: #f12f75;
  --price-savings-background: #ffe7ec;
  --price-savings-font-size: var(--font-size-xs);
  --price-savings-font-weight: var(--font-weight-base);
  --price-savings-line-height: var(--line-height-xs);
  --price-title-color: var(--text-body-color);
  --price-title-font-size: var(--font-size-sm);
  --price-title-line-height: var(--line-height-sm);
  --price-title-font-weight: var(--font-weight-base);
  --price-lg-font-size: var(--font-size-h2);
  --price-lg-font-weight: var(--font-weight-bold);
  --price-lg-line-height: var(--line-height-h2);
  --price-lg-currency-font-size: var(--font-size-xxlg);
  --price-lg-currency-font-weight: var(--font-weight-light);
  --price-lg-currency-line-height: var(--line-height-xxlg);
  --price-sm-font-size: var(--font-size-h4);
  --price-sm-font-weight: var(--font-weight-bold);
  --price-sm-line-height: var(--line-height-h4);
  --price-sm-currency-font-size: var(--font-size-md);
  --price-sm-currency-font-weight: var(--font-weight-light);
  --price-sm-currency-line-height: var(--line-height-md);
  --price-xs-font-size: var(--font-size-h5);
  --price-xs-font-weight: var(--font-weight-light);
  --price-xs-line-height: var(--line-height-h5);
  --price-xs-currency-font-size: var(--font-size-xlg);
  --price-xs-currency-font-weight: var(--font-weight-light);
  --price-xs-currency-line-height: var(--line-height-xlg);
  --range-slider-height: 18px;
  --range-slider-bg: var(--gray-lighter-4);
  --range-slider-fill-bg: var(--brand-primary);
  --range-slider-border-radius: var(--border-radius-sm);
  --range-slider-spacing-h: var(--spacing-3x);
  --range-slider-handle-bg: #fff;
  --range-slider-handle-box-shadow: var(--box-shadow-base);
  --range-slider-handle-height: 32px;
  --range-slider-handle-width: 42px;
  --range-slider-handle-border-radius: var(--border-radius-sm);
  --range-slider-handle-border: none;
  --range-slider-handle-hover-bg: var(--gray-lighter-4);
  --range-slider-handle-hover-border: none;
  --range-slider-handle-hover-shadow: var(--box-shadow-lg);
  --range-slider-value-bg: var(--brand-secondary);
  --range-slider-value-color: var(--text-secondary-body-color);
  --range-slider-value-font-size: var(--font-size-lg);
  --range-slider-value-sm-color: var(--text-lighter-color);
  --range-slider-value-sm-font-size: var(--font-size-xs);
  --range-slider-value-sm-line-height: var(--line-height-xs);
  --range-slider-value-min-width: 28px;
  --range-slider-value-active-color: var(--brand-primary);
  --range-slider-value-active-border: var(--brand-primary);
  --range-slider-price-font-size: var(--font-size-xxlg);
  --range-slider-price-line-height: var(--line-height-md);
  --range-slider-price-spacing: var(--spacing-2x) 0;
  --range-slider-price-font-weight: var(--font-weight-base);
  --range-slider-price-color: var(--brand-primary);
  --range-slider-price-suffix-opacity: 0.64;
  --range-slider-actions-height: 32px;
  --range-slider-actions-border-color: var(--ui-block-border-color);
  --range-slider-actions-border-radius: var(--border-radius-sm);
  --range-slider-actions-active-border-color: var(--brand-primary-lighter);
  --cokie-bg: var(--ui-block-overlay-bg);
  --cookie-width: 310px;
  --cookie-position: 30px;
  --ticket-reply-staff-bg: var(--ui-block-overlay-bg);
  --ticket-reply-staff-border: var(--ui-block-divider-color);
  --ticket-reply-staff-header-bg: transparent;
  --ticket-reply-staff-header-border: transparent;
  --ticket-reply-staff-header-border: var(--ui-block-divider-color);
  --bg-color-transparent: transparent;
  --loader-bg: var(--brand-primary);
  --loader-light-bg: #fff;
  --loader-bars-height: 40px;
  --loader-bars-width: 4px;
  --loader-bars-sm-height: 20px;
  --loader-bars-sm-width: 2px;
}

@media (max-width: 767px) {
  :root {
    --login-logo-height: 44px;
  }
}

.lagom-dark-mode {
  --error-page-bg: #121212;
  --list-group-item-link-heading-color: var(--brand-primary-lighter);
  --price-savings-color: #f01a67;
  --price-savings-background: #ffd6df;
  --panel-sidebar-link-color: var(--text-body-color);
  --panel-sidebar-link-icon-color: var(--text-body-color);
}

:root {
  --input-font-family: var(--font-family-base);
  --input-font-weight: var(--font-weight-base);
  --input-font-size: var(--btn-base-font-size);
  --input-line-height: var(--btn-base-line-height);
  --input-xs-font-size: var(--btn-xs-font-size);
  --input-xs-line-height: var(--btn-xs-line-height);
  --input-xs-border-radius: var(--btn-xs-border-radius);
  --input-sm-font-size: var(--btn-sm-font-size);
  --input-sm-line-height: var(--btn-sm-line-height);
  --input-sm-border-radius: var(--btn-sm-border-radius);
  --input-lg-border-radius: var(--btn-lg-border-radius);
  --input-lg-font-weight: var(--font-weight-light);
  --input-lg-font-size: var(--btn-lg-font-size);
  --input-lg-line-height: var(--btn-lg-line-height);
  --input-xlg-border-radius: var(--btn-xlg-border-radius);
  --input-xlg-font-weight: var(--font-weight-light);
  --input-xlg-font-size: var(--btn-xlg-font-size);
  --input-xlg-line-height: var(--btn-xlg-line-height);
  --input-border-width: 1px;
  --input-border: var(--input-border-width) solid var(--input-border-color);
  --input-border-radius: var(--btn-base-border-radius);
  --input-focus-box-shadow: var(--input-btn-focus-box-shadow);
  --input-box-shadow: inset 0 1px 1px rgba(#000, 0.075);
  --input-focus-width: var(--input-btn-focus-box-shadow);
  --input-btn-focus-width: 4px;
  --input-btn-focus-color: #000;
  --input-btn-focus-box-shadow: 0 0 0 var(--input-btn-focus-width) var(--input-btn-focus-color);
  --input-label-color: var(--gray-base);
  --input-label-font-size: var(--font-size-base);
  --input-label-font-weight: var(--font-weight-base);
  --input-label-margin-bottom: var(--spacing-1x);
  --input-bg: #fff;
  --input-border-color: var(--gray-lighter-3);
  --input-color: var(--text-heading-color);
  --input-color-placeholder: var(--text-lighter-color);
  --input-hover-bg: #fff;
  --input-hover-border-color: var(--gray-lighter-2);
  --input-hover-color: var(--text-heading-color);
  --input-hover-placeholder-color: var(--text-lighter-color);
  --input-focus-bg: #fff;
  --input-focus-border-color: var(--brand-primary);
  --input-focus-color: var(--text-heading-color);
  --input-focus-placeholder-color: var(--text-lighter-color);
  --input-disabled-bg: var(--gray-faded);
  --input-disabled-border-color: var(--gray-lighter-3);
  --input-disabled-color: var(--text-heading-color);
  --input-disabled-color-placeholder: var(--text-lighter-color);
  --icheck-bg: #fff;
  --icheck-border-width: 2px;
  --icheck-size: 18px;
  --icheck-border-color: var(--gray-lighter-3);
  --icheck-hover-bg: #fff;
  --icheck-hover-border-color: var(--brand-primary);
  --icheck-active-bg: var(--brand-primary);
  --icheck-active-border-color: var(--brand-primary);
  --icheck-active-icon-color: #fff;
  --icheck-disabled-bg: var(--gray-lighter-4);
  --icheck-disabled-border-color: var(--gray-lighter-4);
  --icheck-border-radius: var(--border-radius-sm);
  --icheck-border: var(--icheck-border-width) solid var(--icheck-border-color);
  --checkbox-spacing: var(--spacing-2x);
  --input-group-addon-bg: var(--gray-lighter-4);
  --input-group-addon-border-color: var(--input-border);
  --input-group-spacing-base: var(--spacing-2x);
  --input-group-spacing-lg: var(--spacing-3x);
  --input-group-spacing-sm: var(--spacing-1x);
  --form-group-margin-bottom: 12px;
  --form-check-input-gutter: 20px;
  --form-check-input-margin-y: 5px;
  --form-check-inline-margin-x: 12px;
  --form-check-inline-input-margin-x: 5px;
  --legend-color: var(--gray-darker);
  --legend-border-color: #e5e5e5;
  --cursor-disabled: not-allowed;
  --form-text-margin-top: var(--spacing-1x);
  --form-feedback-margin-top: var(--form-text-margin-top);
  --form-feedback-font-size: var(--font-size-sm);
  --form-feedback-valid-color: var(--brand-success);
  --form-feedback-invalid-color: var(--brand-danger);
  --form-feedback-icon-valid-color: var(--form-feedback-valid-color);
  --form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#36C055' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
  --form-feedback-icon-invalid-color: var(--form-feedback-invalid-color);
  --form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#d92632' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>");
  --form-feedback-tooltip-padding-y: var(--tooltip-padding-y);
  --form-feedback-tooltip-padding-x: var(--tooltip-padding-x);
  --form-feedback-tooltip-font-size: var(--tooltip-font-size);
  --form-feedback-tooltip-line-height: var(--line-height-base);
  --form-feedback-tooltip-opacity: var(--tooltip-opacity);
  --form-feedback-tooltip-border-radius: var(--tooltip-border-radius);
  --form-grid-gutter-width: 10px;
  --select-option-color: var(--text-body-color);
  --select-option-bg: #fff;
}

.lagom-dark-mode {
  --input-bg: var(--ui-block-bg);
  --input-hover-bg: var(--ui-block-bg);
  --input-focus-bg: var(--ui-block-bg);
  --icheck-bg: transparent;
  --icheck-hover-bg: transparent;
  --select-option-bg: #262626;
}

:root {
  --spacing-0x: 0px;
  --spacing-1x: 8px;
  --spacing-2x: calc(2 * var(--spacing-1x));
  --spacing-3x: calc(3 * var(--spacing-1x));
  --spacing-4x: calc(4 * var(--spacing-1x));
  --spacing-5x: calc(5 * var(--spacing-1x));
  --spacing-6x: calc(6 * var(--spacing-1x));
  --spacing-7x: calc(7 * var(--spacing-1x));
  --spacing-8x: calc(8 * var(--spacing-1x));
  --spacing-9x: calc(9 * var(--spacing-1x));
  --spacing-10x: calc(10 * var(--spacing-1x));
  --spacing-11x: calc(11 * var(--spacing-1x));
  --spacing-12x: calc(12 * var(--spacing-1x));
  --spacing-13x: calc(13 * var(--spacing-1x));
  --spacing-14x: calc(14 * var(--spacing-1x));
  --spacing-15x: calc(15 * var(--spacing-1x));
  --border-radius-none: 0px;
  --border-radius-xs: 3px;
  --border-radius-sm: 4px;
  --border-radius-base: 6px;
  --border-radius-lg: 8px;
  --border-radius-xlg: 12px;
  --border-width-base: 1px;
  --box-shadow-none: unset;
  --box-shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.05);
  --box-shadow-sm: 0px 0px 1px rgba(0, 0, 0, 0.04),
    0px 2px 16px rgba(0, 0, 0, 0.08);
  --box-shadow-base: 0px 0px 1px rgba(0, 0, 0, 0.04),
    0px 2px 24px rgba(0, 0, 0, 0.08);
  --box-shadow-lg: 0px 0px 1px rgba(0, 0, 0, 0.04),
    0px 8px 40px rgba(0, 0, 0, 0.08);
  --box-shadow-xlg: 0px 0px 1px rgba(0, 0, 0, 0.04),
    0px 8px 56px rgba(0, 0, 0, 0.08);
  --ui-height-xs: 30px;
  --ui-height-sm: 36px;
  --ui-height-base: 44px;
  --ui-height-lg: 56px;
  --ui-height-xlg: 64px;
  --ui-padding-base-v: var(--spacing-1x);
  --ui-padding-base-h: var(--spacing-2x);
  --ui-padding-xs-v: 2px;
  --ui-padding-xs-h: var(--spacing-1x);
  --ui-padding-sm-v: 4px;
  --ui-padding-sm-h: var(--spacing-2x);
  --ui-padding-lg-v: var(--spacing-1x);
  --ui-padding-lg-h: var(--spacing-3x);
  --ui-padding-xlg-v: var(--spacing-1x);
  --ui-padding-xlg-h: var(--spacing-4x);
  --ui-block-bg: #fff;
  --ui-block-overlay-bg: rgba(255, 255, 255, 0.78);
  --ui-block-overlay-bg-2: #fff;
  --ui-block-bg-form: #fff;
  --ui-block-border-color: transparent;
  --ui-block-border-radius: var(--border-radius-base);
  --ui-block-border-radius-lg: var(--border-radius-lg);
  --ui-block-shadow: var(--box-shadow-sm);
  --ui-block-shadow-lg: var(--box-shadow-lg);
  --ui-block-shadow-xlg: var(--box-shadow-xlg);
  --ui-block-border: none;
  --ui-block-header-height: 56px;
  --ui-block-header-bg: #fff;
  --ui-block-secondary-divider-border-color: hsla(0, 0%, 100%, 12%);
  --ui-block-divider-color: var(--gray-lighter-4);
  --ui-block-divider-border: 1px solid var(--ui-block-divider-color);
  --ui-block-link-hover-bg: var(--brand-primary-lighter-4);
  --ui-block-link-active-bg: var(--brand-primary-lighter-4);
  --ui-block-link-disabled-color: var(--text-lighter-color);
  --ui-block-overlay-shadow: var(--box-shadow-lg);
  --ui-nav-link-bg: transparent;
  --ui-nav-link-border-radius: var(--border-radius-sm);
  --ui-nav-link-hover-bg: transparent;
  --ui-nav-link-active-bg: var(--brand-primary-lighter-4);
  --dropdown-link-disabled-color: #acb0b9;
  --ui-nav-link-icon-size: 18px;
  --ui-nav-link-icon-size-sm: 12px;
  --ui-nav-link-icon-spacing: 10px;
  --ui-nav-link-icon-spacing-lg: 16px;
  --ui-nav-h-link-padding-h: var(--spacing-2x);
  --ui-nav-v-link-padding-v: 6px;
  --ui-nav-v-link-padding-h: 0px;
  --ui-nav-v-link-hover-padding-h: 12px;
  --ui-nav-v-link-active-padding-h: 12px;
  --ui-block-padding-base: var(--spacing-3x);
  --ui-block-padding-base-v: var(--spacing-2x);
  --ui-block-padding-sm: var(--spacing-2x);
  --ui-block-padding-sm-v: var(--spacing-1x);
  --ui-block-padding-lg: var(--spacing-4x);
  --ui-block-padding-lg-v: var(--spacing-3x);
  --ui-block-padding-xlg: var(--spacing-6x);
  --ui-block-padding-xlg-v: var(--spacing-4x);
  --ui-block-spacing-xs: var(--spacing-1x);
  --ui-block-spacing-sm: var(--spacing-2x);
  --ui-block-spacing-base: var(--spacing-3x);
  --ui-block-spacing-lg: var(--spacing-4x);
  --ui-block-spacing-xlg: var(--spacing-5x);
  --state-primary-bg: var(--brand-primary-lighter-3);
  --state-primary-text: var(--brand-primary);
  --state-primary-border: var(--brand-primary-lighter-2);
  --state-info-bg: var(--brand-info-lighter-4);
  --state-info-text: var(--brand-info);
  --state-info-border: var(--brand-info-lighter-2);
  --state-success-bg: var(--brand-success-lighter-4);
  --state-success-text: var(--brand-success);
  --state-success-border: var(--brand-success-lighter-2);
  --state-warning-bg: var(--brand-warning-lighter-4);
  --state-warning-text: var(--brand-warning);
  --state-warning-border: var(--brand-warning-lighter-2);
  --state-danger-bg: var(--brand-danger-lighter-4);
  --state-danger-text: var(--brand-danger);
  --state-danger-border: var(--brand-danger-lighter-2);
  --label-color: #fff;
  --label-link-hover-color: #fff;
  --label-default-bg: var(--gray-faded);
  --label-default-color: var(--gray-base);
  --label-primary-bg: var(--brand-primary);
  --label-primary-color: #fff;
  --label-primary-faded-bg: var(--brand-primary-lighter-3);
  --label-primary-faded-color: var(--brand-primary);
  --label-secondary-bg: var(--brand-secondary);
  --label-secondary-color: #fff;
  --label-success-bg: var(--state-success-bg);
  --label-success-color: var(--state-success-text);
  --label-info-bg: var(--state-info-bg);
  --label-info-color: var(--state-info-text);
  --label-warning-bg: var(--state-warning-bg);
  --label-warning-color: var(--state-warning-text);
  --label-danger-bg: var(--state-danger-bg);
  --label-danger-color: var(--state-danger-text);
  --label-purple-bg: #b3a3de;
  --label-purple-color: #fff;
  --label-savings-bg: #ffe7ec;
  --label-savings-color: #f01a67;
  --label-savings-border: #fccfdf;
  --label-text-transform: uppercase;
  --label-margin-bottom: 5px;
  --tickets-label-color: #fff;
  --label-xxs-font-size: 10px;
  --label-xs-font-size: var(--font-size-xs);
  --label-sm-font-size: var(--font-size-xs);
  --label-font-size: var(--font-size-sm);
  --label-lg-font-size: var(--font-size-base);
  --label-xxs-line-height: var(--line-height-xs);
  --label-xs-line-height: var(--line-height-xs);
  --label-sm-line-height: var(--line-height-xs);
  --label-line-height: var(--line-height-sm);
  --label-lg-line-height: var(--line-height-base);
  --label-xxs-padding: 1px 6px;
  --label-xs-padding: 1px 6px;
  --label-sm-padding: 3px 6px;
  --label-padding: 4px 6px;
  --label-lg-padding: 6px 8px;
  --label-xxs-border-radius: var(--border-radius-xs);
  --label-xs-border-radius: var(--border-radius-xs);
  --label-sm-border-radius: var(--border-radius-sm);
  --label-border-radius: var(--border-radius-sm);
  --label-lg-border-radius: var(--border-radius-base);
  --label-icon-size: 10px;
  --status-pending-transfer: var(--brand-warning-darker);
  --status-pending: var(--brand-warning-darker);
  --status-active: var(--brand-success);
  --status-suspended: var(--brand-danger-lighter);
  --status-customer-reply: var(--brand-warning-darker);
  --status-fraud: var(--gray-darker);
  --status-answered: #7b4f9d;
  --status-expired: #004258;
  --status-grace: var(--brand-warning-darker);
  --status-terminated: var(--gray-lighter);
  --status-onhold: var(--brand-info);
  --status-inprogress: var(--brand-danger-lighter);
  --status-closed: var(--gray-lighter-2);
  --status-paid: var(--brand-success);
  --status-unpaid: var(--brand-danger);
  --status-cancelled: var(--gray-lighter-2);
  --status-collections: #2c3e50;
  --status-refunded: var(--brand-warning);
  --status-payment-pending: var(--brand-info);
  --status-accepted: var(--brand-success);
  --status-delivered: var(--brand-warning);
  --status-lost: var(--gray-darker);
  --status-default: var(--gray-base);
  --status-type-operator: var(--label-info-bg);
  --status-type-operator-text-color: var(--label-info-color);
  --status-type-owner: var(--label-success-bg);
  --status-type-owner-text-color: var(--label-success-color);
  --status-type-authorizeduser: var(--label-default-bg);
  --status-type-authorizeduser-text-color: var(--label-default-color);
  --status-type-registereduser: var(--label-warning-bg);
  --status-type-registereduser-text-color: var(--label-warning-color);
  --status-type-guest: var(--label-default-bg);
  --status-type-guest-text-color: var(--label-default-color);
  --transition-base: 0.24s ease;
  --transition-fade: opacity 0.15s linear;
  --transition-collapse: height 0.35s ease;
  --zindex-navbar: 1000;
  --zindex-dropdown: 1000;
  --zindex-popover: 1001;
  --zindex-tooltip: 1001;
  --zindex-sticky: 1020;
  --zindex-navbar-fixed: 1030;
  --zindex-fixed: 1030;
  --zindex-modal-background: 1040;
  --zindex-modal-backdrop: 1040;
  --zindex-modal: 1050;
  --zindex-popover: 1060;
  --zindex-tooltip: 1070;
  --caret-width-base: 4px;
  --caret-width-large: 5px;
  --caret-width: 0.3em;
  --caret-vertical-align: var(--caret-width) * 0.85;
  --caret-spacing: var(--caret-width) * 0.85;
  --ui-icon-color: var(--gray-icons);
  --ui-icon-size-base: 18px;
  --ui-icon-size-small: 12px;
  --scrollbar-width: 6px;
  --scrollbar-track-bg: var(--gray-lighter-4);
  --scrollbar-thumb-bg: var(--gray-lighter-3);
  --scrollbar-thumb-hover-bg: var(--gray-lighter-2);
  --scrollbar-secondary-track-bg: rgba(255, 255, 255, 0.1);
  --scrollbar-secondary-thumb-bg: rgba(255, 255, 255, 0.32);
  --scrollbar-secondary-thumb-hover-bg: rgba(255, 255, 255, 0.48);
  --max-width-xs: 380px;
  --max-width-sm: 548px;
  --max-width-md: 768px;
  --max-width-lg: 928px;
  --container-xl-max-width: 1288px;
  --container-lg-max-width: 960px;
  --container-md-max-width: 720px;
  --container-sm-max-width: 540px;
  --ui-gutter-base: var(--spacing-3x);
  --ui-gutter-sm: var(--spacing-2x);
  --ui-gutter-lg: var(--spacing-4x);
  --ui-gutter-xlg: var(--spacing-5x);
}

@media (max-width: 767px) {
  :root {
    --ui-gutter-base: var(--spacing-2x);
    --ui-gutter-sm: var(--spacing-1x);
    --ui-gutter-lg: var(--spacing-3x);
    --ui-gutter-xlg: var(--spacing-4x);
    --ui-block-spacing-sm: calc(var(--spacing-1x) 2 /);
    --ui-block-spacing-sm: var(--spacing-1x);
    --ui-block-spacing-base: var(--spacing-2x);
    --ui-block-spacing-lg: var(--spacing-3x);
    --ui-block-spacing-xlg: var(--spacing-4x);
    --ui-block-padding-base: var(--spacing-2x);
    --ui-block-padding-base-v: var(--spacing-2x);
    --ui-block-padding-sm: var(--spacing-2x);
    --ui-block-padding-sm-v: var(--spacing-1x);
    --ui-block-padding-lg: var(--spacing-3x);
    --ui-block-padding-lg-v: var(--spacing-2x);
    --ui-block-padding-xlg: var(--spacing-4x);
    --ui-block-padding-xlg-v: var(--spacing-3x);
  }
}

.lagom-dark-mode {
  --ui-block-bg: #242424;
  --ui-block-bg-form: var(--gray-lighter-4);
  --ui-block-link-hover-bg: var(--gray-faded);
  --ui-block-link-active-bg: var(--gray-faded);
  --ui-block-header-bg: transparent;
  --ui-block-divider-color: #2e2e2e;
  --dropdown-link-disabled-color: #666666;
  --status-answered: #9871b7;
  --status-expired: #3fa1b8;
  --status-onhold: var(--brand-info-ligher);
  --status-collections: #6185a8;
  --status-payment-pending: var(--brand-info-lighter);
  --box-shadow-base: 0px 0px 1px rgba(0, 0, 0, 0.16),
    0px 2px 24px rgba(0, 0, 0, 0.24);
  --box-shadow-lg: 0px 0px 1px rgba(0, 0, 0, 0.16),
    0px 8px 40px rgba(0, 0, 0, 0.24);
  --box-shadow-xlg: 0px 0px 1px rgba(0, 0, 0, 0.16),
    0px 8px 56px rgba(0, 0, 0, 0.24);
  --state-pirmary-bg: var(--dark-mode-brand-primary-lighter-3);
  --state-pirmary-text: var(--dark-mode-brand-primary-lighter);
  --state-pirmary-border: var(--dark-mode-brand-primary-lighter-2);
  --state-info-bg: var(--dark-mode-brand-info-lighter-4);
  --state-info-text: var(--dark-mode-brand-info-lighter);
  --state-info-border: var(--dark-mode-brand-info-lighter-2);
  --state-success-bg: var(--dark-mode-brand-success-lighter-4);
  --state-success-text: var(--dark-mode-brand-success);
  --state-success-border: var(--dark-mode-brand-success-lighter-2);
  --state-warning-bg: var(--dark-mode-brand-warning-lighter-4);
  --state-warning-text: var(--dark-mode-brand-warning);
  --state-warning-border: var(--dark-mode-brand-warning-lighter-2);
  --state-danger-bg: var(--dark-mode-brand-danger-lighter-4);
  --state-danger-text: var(--dark-mode-brand-danger);
  --state-danger-border: var(--dark-mode-brand-danger-lighter-2);
  --label-success-bg: var(--dark-mode-brand-success-lighter-3);
  --label-success-color: var(--dark-mode-brand-success);
  --label-info-bg: var(--dark-mode-brand-info-lighter-3);
  --label-info-color: var(--dark-mode-brand-info);
  --label-warning-bg: var(--dark-mode-brand-warning-lighter-3);
  --label-warning-color: var(--dark-mode-brand-warning);
  --label-danger-bg: var(--dark-mode-brand-danger-lighter-4);
  --label-danger-color: var(--dark-mode-brand-danger);
  --label-savings-bg: #4d2830;
  --label-savings-color: #f2367a;
  --label-savings-border: #6b3843;
  --label-primary-faded-color: var(--brand-primary-lighter);
}

:root {
  --svg-icon-stroke-width: 2px;
  --svg-illustration-shadow-color: #000;
  --svg-illustration-shadow-opacity-start: 0.15;
  --svg-icon-color-base: var(--brand-primary);
  --svg-icon-color-lighter: var(--brand-primary-lighter);
  --svg-icon-color-secondary: var(--gray-darker);
  --svg-icon-color-icon: #ffffff;
  --svg-icon-on-dark-color-secondary: #ffffff;
  --svg-icon-on-primary-color-base: #ffffff;
  --svg-icon-on-primary-color-lighter: #dee0e3;
  --svg-icon-on-primary-color-secondary: #ffffff;
  --svg-icon-on-primary-color-icon: var(--brand-primary);
  --svg-screen-top-bg: var(--svg-illustration-color-1);
  --svg-screen-top-front: var(--svg-illustration-color-5);
  --svg-screen-top-back: var(--svg-illustration-color-2);
  --svg-screen-top-logo: var(--svg-illustration-color-7);
  --svg-screen-top-logo-el: var(--svg-illustration-color-1);
  --svg-screen-bottom-button: var(--svg-illustration-color-2);
  --svg-screen-bottom-front: var(--svg-illustration-color-4);
  --svg-screen-bottom-back: var(--svg-illustration-color-2);
  --svg-screen-leg-front: var(--svg-illustration-color-4);
  --svg-screen-leg-back: var(--svg-illustration-color-2);
  --svg-smartphone-border: var(--svg-illustration-color-2);
  --svg-smartphone-front: var(--svg-illustration-color-4);
  --svg-smartphone-screen: var(--svg-illustration-color-1);
  --svg-smartphone-icon: var(--svg-illustration-color-1);
  --svg-smartphone-icon-bg: var(--svg-illustration-color-7);
  --svg-tablet-back: var(--svg-illustration-color-2);
  --svg-tablet-front: var(--svg-illustration-color-3);
  --svg-tablet-screen: var(--svg-illustration-color-1);
  --svg-browser-body: var(--svg-illustration-color-7);
  --svg-browser-top: var(--svg-illustration-color-1);
  --svg-browser-top-1: var(--svg-illustration-color-7);
  --svg-browser-text: var(--svg-illustration-color-5);
  --svg-browser-banner: var(--svg-illustration-color-5);
  --svg-laptop-bottom-back: var(--svg-illustration-color-2);
  --svg-laptop-bottom-top: var(--svg-illustration-color-4);
  --svg-laptop-touchpad-inside: var(--svg-illustration-color-3);
  --svg-laptop-touchpad-outside: var(--svg-illustration-color-2);
  --svg-laptop-screen: var(--svg-illustration-color-1);
  --svg-laptop-screen-logo: var(--svg-illustration-color-7);
  --svg-laptop-screen-back: var(--svg-illustration-color-2);
  --svg-laptop-screen-front: var(--svg-illustration-color-5);
  --svg-keyboard-keys-bottom: var(--svg-illustration-color-2);
  --svg-keyboard-keys-top: var(--svg-illustration-color-6);
  --svg-keyboard-body-bottom: var(--svg-illustration-color-4);
  --svg-keyboard-body-top: var(--svg-illustration-color-2);
  --svg-weebly-cup-body: var(--svg-illustration-color-4);
  --svg-weebly-cup-top: var(--svg-illustration-color-6);
  --svg-weebly-cup-inside: var(--svg-illustration-color-1);
  --svg-weebly-left-elements: var(--svg-illustration-color-7);
  --svg-weebly-left-elements-bottom: var(--svg-illustration-color-5);
  --svg-weebly-left-body: var(--svg-illustration-color-5);
  --svg-weebly-colors-bottom: var(--svg-illustration-color-1);
  --svg-weebly-colors-top: var(--svg-illustration-color-6);
  --svg-weebly-colors-top-1: var(--svg-illustration-color-7);
  --svg-weebly-colors-top-2: var(--svg-illustration-color-3);
  --svg-weebly-colors-top-3: var(--svg-illustration-color-1);
  --svg-graphic-shadow: var(--box-shadow-lg);
  --svg-graphic-bg-primary: var(--brand-primary);
  --svg-graphic-bg-secondary: #4f5357;
  --svg-graphic-bg-body: #fff;
  --svg-graphic-bg-browser-top: #eaeef3;
  --svg-graphic-bg-browser-actions: #cbcfd5;
  --svg-graphic-bg-browser-search: #fff;
  --svg-graphic-bg-banner: #eaeef3;
  --svg-graphic-bg-faded: #eaeef3;
  --svg-graphic-bg-faded-2: #e9ebee;
  --svg-graphic-bg-faded-3: #cbcfd5;
  --svg-graphic-bg-white: #fff;
  --svg-graphic-bg-green: var(--brand-success);
  --svg-graphic-bg-red: var(--brand-danger);
  --svg-graphic-bg-red-darker: var(--brand-danger-darker);
  --svg-graphic-stroke-primary: var(--brand-primary);
  --svg-graphic-stroke-white: #fff;
  --svg-graphic-stroke-faded: #cbcfd5;
  --svg-graphic-stroke-faded-2: #cbcfd5;
  --svg-icon-color-1: var(--brand-primary-lighter);
  --svg-icon-color-2: var(--brand-primary);
  --svg-icon-color-3: var(--gray-darker);
  --svg-icon-color-4: #ffffff;
  --svg-icon-color-5: var(--gray-lighter-3);
  --svg-icon-on-dark-color-1: var(--svg-icon-color-4);
  --svg-icon-on-dark-color-2: var(--svg-icon-color-5);
  --svg-icon-on-dark-color-3: var(--svg-icon-color-4);
  --svg-icon-on-dark-color-4: var(--svg-icon-color-2);
}

.lagom-dark-mode {
  --svg-icon-color-3: #ffffff;
  --svg-icon-on-dark-color-2: var(--gray-darker);
}

:root {
  --main-top-bg: transparent;
  --main-top-border-bottom: 1px solid var(--ui-block-divider-color);
  --main-top-box-shadow: none;
  --main-top-padding: 4px 0;
  --main-body-padding-v: var(--spacing-6x);
  --main-body-sidebar-width: 32%;
  --main-body-sidebar-padding-h: var(--spacing-6x);
  --main-body-sidebar-padding-v: var(--spacing-6x);
  --main-body-sidebar-content-bg: #fff;
  --main-header-padding-v: var(--spacing-6x);
  --main-header-title-color: var(--text-heading-color);
  --main-header-title-font-size: var(--font-size-h2);
  --main-header-title-font-weight: var(--font-weight-h2);
  --main-header-title-line-height: var(--line-height-h2);
  --main-header-breadcrumb-font-size: var(--font-size-sm);
  --main-header-breadcrumb-color: var(--text-lighter-color);
  --main-header-breadcrumb-color-active: var(--gray-base);
  --main-header-label-bg: var(--gray-lighter-4);
  --main-header-label-desc-color: var(--gray-base);
  --main-header-label-name-color: var(--gray-darker);
  --main-header-banner-bg: var(--brand-primary-gradient-h);
  --main-header-banner-title-color: var(--text-secondary-heading-color);
  --main-header-banner-breadcrumb-color: var(--text-secondary-lighter-color);
  --main-header-banner-breadcrumb-color-active: var(--text-secondary-body-color);
  --main-header-banner-label-bg: rgba(255, 255, 255, 0.08);
  --main-header-banner-label-desc-color: var(--text-secondary-lighter-color);
  --main-header-banner-label-name-color: var(--text-secondary-heading-color);
  --main-header-banner-save-label-bg: #ffe7ec;
  --main-header-banner-save-label-color: #f01a67;
  --main-header-banner-save-label-border: #fccfdf;
  --main-sidebar-sticky-top: var(--spacing-3x);
  --main-sidebar-width: 280px;
  --main-sidebar-spacing-h: var(--spacing-5x);
  --main-sidebar-right-spacing-h: var(--spacing-5x);
  --main-sidebar-lg-width: 340px;
  --main-footer-bg: #fff;
  --main-footer-border-top: var(--ui-block-divider-border);
  --main-footer-box-shadow: none;
  --main-footer-link-font-size: var(--font-size-lg);
  --main-footer-link-line-height: var(--line-height-lg);
  --main-footer-link-font-weight: var(--font-weight-light);
  --main-footer-link-padding-h: 0;
  --main-footer-link-padding-v: var(--ui-nav-v-link-padding-v);
  --main-footer-link-color: var(--ui-nav-secondary-link-color);
  --main-footer-link-hover-color: var(--ui-nav-secondary-link-hover-color);
  --main-footer-link-hover-padding-h: var(--ui-nav-v-link-hover-padding-h);
  --main-footer-link-icon-color: var(--ui-nav-secondary-link-icon-color);
  --main-footer-link-icon-hover-color: var(--ui-nav-secondary-link-icon-hover-color);
  --main-footer-link-icon-size: 18px;
  --main-footer-h-link-padding-v: var(--spacing-1x);
  --main-footer-h-link-padding-h: var(--spacing-2x);
  --main-footer-extended-padding: var(--spacing-9x);
  --main-footer-extended-border-top: var(--main-footer-border-top);
  --main-footer-extended-spacing: var(--spacing-3x);
  --main-footer-extended-company-margin-right: var(--spacing-8x);
  --main-footer-extended-title-color: var(--text-heading-color);
  --main-footer-extended-title-font-size: var(--font-size-xlg);
  --main-footer-extended-title-line-height: var(--line-height-lg);
  --main-footer-extended-title-font-weight: var(--font-weight-base);
  --main-footer-extended-title-margin-bottom: var(--spacing-2x);
  --main-footer-extended-desc-color: var(--text-body-color);
  --main-footer-extended-desc-font-size: var(--font-size-base);
  --main-footer-extended-desc-line-height: var(--line-height-base);
  --main-footer-extended-desc-font-weight: var(--font-weight-light);
  --main-footer-extended-desc-margin: var(--spacing-5x) 0 var(--spacing-2x) 0;
  --main-footer-extended-link-hover-padding-h: var(--ui-nav-v-link-hover-padding-h);
  --main-footer-extended-side-min-width: 240px;
  --layout-container-gutter: 40px;
  --layout-left-container-gutter: 40px;
  --ca-section-spacing: var(--spacing-6x);
  --ca-section-header-margin-bottom: var(--spacing-3x);
  --ca-section-title-color: var(--text-heading-color);
  --ca-section-title-font-size: var(--font-size-h4);
  --ca-section-title-font-weight: var(--font-weight-h4);
  --ca-section-title-line-height: var(--line-height-h4);
  --ca-section-desc-color: var(--text-body-color);
  --ca-section-desc-font-size: var(--font-size-base);
  --ca-section-desc-font-weight: var(--font-weight-base);
  --ca-section-desc-line-height: var(--line-height-base);
  --ca-section-sm-spacing: var(--spacing-4x);
  --ca-section-sm-title-font-size: var(--font-size-h5);
  --ca-section-sm-title-font-weight: var(--font-weight-h5);
  --ca-section-sm-title-line-height: var(--line-height-h5);
}

@media (max-width: 1319px) {
  :root {
    --main-sidebar-spacing-h: var(--spacing-4x);
    --main-body-sidebar-width: 40%;
    --main-footer-extended-side-min-width: 160px;
  }
}

@media (max-width: 991px) {
  :root {
    --main-footer-extended-desc-margin: var(--spacing-1x) 0 0 0;
    --main-footer-extended-spacing: var(--spacing-2x);
  }
}

@media (max-width: 767px) {
  :root {
    --main-body-padding-v: var(--spacing-5x);
    --main-header-padding-v: var(--spacing-5x);
    --main-body-sidebar-padding-h: var(--spacing-4x);
    --main-body-sidebar-padding-v: var(--spacing-4x);
    --ca-section-spacing: var(--spacing-4x);
    --main-footer-extended-padding: var(--spacing-6x);
  }
}

@media (max-width: 479px) {
  :root {
    --layout-container-gutter: 24px;
  }
}

.lagom-dark-mode {
  --main-header-banner-save-label-bg: #4d2830;
  --main-header-banner-save-label-color: #f2367a;
  --main-header-banner-save-label-border: #6b3843;
  --main-footer-bg: #121212;
  --main-top-bg: transparent;
  --main-body-sidebar-content-bg: transparent;
}

:root {
  --app-nav-logo-height: 35px;
  --app-nav-logo-width: 100%;
  --app-nav-header-height: calc(var(--app-nav-logo-height) + var(--spacing-4x));
  --app-nav-top-bg: #fff;
  --app-nav-navbar-bg: var(--app-nav-top-bg);
  --app-nav-top-box-shadow: var(--box-shadow-sm);
  --app-nav-top-border-bottom: none;
  --app-nav-top-menu-link-color: var(--ui-nav-link-color);
  --app-nav-top-menu-link-hover-color: var(--ui-nav-link-hover-color);
  --app-nav-top-menu-link-font-size: var(--font-size-lg);
  --app-nav-top-menu-link-font-weight: var(--font-weight-base);
  --app-nav-top-menu-link-line-height: var(--line-height-base);
  --app-nav-top-menu-icon-size: 18px;
  --app-nav-top-menu-svg-icon-size: 32px;
  --app-nav-top-menu-icon-color: var(--ui-nav-link-icon-color);
  --app-nav-top-menu-icon-hover-color: var(--ui-nav-link-icon-hover-color);
  --app-nav-top-menu-link-padding-h: var(--spacing-3x);
  --app-nav-top-menu-link-padding-v: var(--spacing-2x);
  --app-nav-top-menu-dropdown-width: 250px;
  --app-nav-top-menu-dropdown-icon-size: 40px;
  --top-nav-link-padding-h: 8px;
  --top-nav-link-padding-v: 6px;
  --top-nav-link-spacing: 8px;
  --top-nav-link-color: var(--ui-nav-secondary-link-color);
  --top-nav-link-hover-color: var(--ui-nav-secondary-link-hover-color);
  --top-nav-link-active-color: var(--ui-nav-secondary-link-active-color);
  --top-nav-link-icon-color: var(--ui-nav-secondary-link-icon-color);
  --top-nav-link-icon-hover-color: var(--ui-nav-secondary-link-icon-hover-color);
  --top-nav-link-icon-active-color: var(--ui-nav-secondary-link-icon-active-color);
  --app-nav-top-condensed-header-height: 36px;
  --app-nav-top-condensed-header-border-bottom: 1px solid var(--ui-block-divider-color);
  --app-nav-top-condensed-menu-link-padding-h: var(--spacing-2x);
  --app-nav-top-condensed-menu-link-padding-v: var(--app-nav-top-menu-link-padding-v);
  --app-nav-top-condensed-logo-spacing: var(--spacing-4x);
  --app-nav-left-width: 140px;
  --app-nav-left-bg: #fff;
  --app-nav-left-box-shadow: var(--box-shadow-lg);
  --app-nav-left-link-hover-bg: transparent;
  --app-nav-left-link-active-bg: var(--ui-nav-link-active-bg);
  --app-nav-left-link-color: var(--text-heading-color);
  --app-nav-left-link-hover-color: var(--ui-nav-link-hover-color);
  --app-nav-left-link-active-color: var(--ui-nav-link-active-color);
  --app-nav-left-link-font-size: var(--font-size-lg);
  --app-nav-left-link-font-weight: var(--font-weight-base);
  --app-nav-left-link-padding-h: var(--spacing-2x);
  --app-nav-left-link-padding-v: var(--spacing-2x);
  --app-nav-left-icon-size: 18px;
  --app-nav-left-svg-icon-size: 40px;
  --app-nav-left-icon-color: var(--ui-nav-link-icon-color);
  --app-nav-left-icon-hover-color: var(--ui-nav-link-icon-hover-color);
  --app-nav-left-icon-active-color: var(--ui-nav-link-icon-active-color);
  --app-nav-left-dropdown-icon-size: 12px;
  --app-nav-left-dropdown-width: 240px;
  --app-nav-left-wide-width: 280px;
  --app-nav-left-wide-link-padding-h: var(--spacing-3x);
  --app-nav-left-wide-link-padding-v: var(--spacing-2x);
  --app-nav-left-wide-link-color: var(--ui-nav-link-color);
  --app-nav-left-wide-link-hover-color: var(--ui-nav-link-hover-color);
  --app-nav-left-wide-link-hover-bg: transparent;
  --app-nav-left-wide-link-hover-padding-h: var(--ui-nav-v-link-hover-padding-h);
  --app-nav-left-wide-link-active-padding-h: var(--ui-nav-v-link-active-padding-h);
  --app-nav-left-wide-link-active-color: var(--ui-nav-link-active-color);
  --app-nav-left-wide-link-active-bg: var(--ui-nav-link-active-bg);
  --app-nav-left-wide-icon-color: var(--ui-nav-link-icon-color);
  --app-nav-left-wide-icon-hover-color: var(--ui-nav-link-icon-hover-color);
  --app-nav-left-wide-icon-active-color: var(--ui-nav-link-icon-active-color);
  --app-nav-left-wide-svg-icon-size: 32px;
  --app-nav-left-wide-dropdown-border-left: 1px solid var(--ui-block-divider-color);
  --app-nav-left-wide-dropdown-padding-h: var(--app-nav-left-wide-link-padding-h);
  --app-nav-left-wide-dropdown-padding-v: 16px;
  --app-nav-left-wide-dropdown-link-color: var(--ui-nav-link-color);
  --app-nav-left-wide-dropdown-link-hover-bg: var(--ui-nav-link-hover-bg);
  --app-nav-left-wide-dropdown-link-hover-color: var(--ui-nav-link-hover-color);
  --app-nav-left-wide-dropdown-link-hover-padding-h: var(--ui-nav-v-link-hover-padding-h);
  --app-nav-left-wide-dropdown-link-active-padding-h: 0;
  --app-nav-left-wide-dropdown-link-active-color: var(--ui-nav-link-active-color);
  --app-nav-left-wide-dropdown-link-active-bg: var(--ui-nav-link-active-bg);
  --app-nav-left-wide-dropdown-icon-color: var(--app-nav-left-icon-color);
  --app-nav-left-wide-dropdown-icon-hover-color: var(--app-nav-left-icon-hover-color);
  --app-nav-left-wide-dropdown-icon-active-color: var(--app-nav-left-icon-active-color);
  --app-nav-left-wide-dropdown-open-bg: transparent;
  --app-nav-left-wide-dropdown-open-bg-on-primary: rgba(0, 0, 0, 0.08);
  --app-nav-left-wide-dropdown-open-bg-on-secondary: rgba(0, 0, 0, 0.08);
  --extended-nav-dropdown-width: 364px;
  --extended-nav-link-hover-bg: var(--brand-primary-lighter-4);
  --extended-nav-link-hover-color: var(--brand-primary);
  --app-nav-top-new-spacing-h: var(--spacing-3x);
  --app-nav-top-new-spacing-v: var(--spacing-3x);
  --mob-app-nav-bg: #fff;
  --mob-app-nav-width: 270px;
  --mob-app-nav-logo-height: 40px;
  --mob-app-nav-menu-padding-h: var(--spacing-2x);
  --mob-dropdown-nav-bg: var(--ui-block-overlay-bg-2);
  --mob-dropdown-nav-bg-filter: unset;
  --mob-dropdown-nav-bg-hover: transparent;
  --mob-dropdown-nav-bg-active: transparent;
  --mob-dropdown-nav-border-radius: var(--border-radius-lg);
  --mob-dropdown-nav-width: 270px;
  --mob-dropdown-nav-logo-height: 40px;
  --mob-dropdown-nav-padding-h: 0px;
  --mob-dropdown-nav-padding-v: var(--spacing-1x);
  --mob-dropdown-nav-margin-h: var(--spacing-3x);
  --mob-dropdown-nav-box-shadow: var(--box-shadow-lg);
  --mob-dropdown-nav-link-bg: transparent;
  --mob-dropdown-nav-link-hover-bg: transparent;
  --mob-dropdown-nav-link-active-bg: transparent;
  --mob-dropdown-nav-link-color: var(--text-heading-color);
  --mob-dropdown-nav-link-hover-color: var(--ui-nav-link-hover-color);
  --mob-dropdown-nav-link-active-color: var(--ui-nav-link-active-color);
  --mob-dropdown-nav-link-font-size: var(--font-size-lg);
  --mob-dropdown-nav-link-font-weight: var(--font-weight-medium);
  --mob-dropdown-nav-link-padding-h: var(--spacing-3x);
  --mob-dropdown-nav-link-padding-v: var(--spacing-2x);
  --mob-dropdown-nav-link-list-padding-h: var(--spacing-2x);
  --mob-dropdown-nav-link-list-padding-v: 6px;
  --mob-dropdown-nav-caret-color: var(--gray-icons);
  --mob-dropdown-nav-list-bg: var(--gray-faded);
  --mob-dropdown-nav-list-box-shadow: none;
  --mob-dropdown-nav-list-padding-h: var(--spacing-3x);
  --mob-dropdown-nav-list-padding-v: 0;
  --mob-dropdown-nav-list-sidebar-bg: var(--gray-lighter-4);
  --mob-dropdown-nav-svg-icon-size: 40px;
  --mob-app-nav-header-bg: #fff;
  --mob-app-nav-header-border-bottom: var(--ui-block-border);
  --mob-app-nav-header-box-shadow: var(--box-shadow-lg);
  --mob-app-nav-header-height: 74px;
}

@media (min-width: 992px) and (max-width: 1320px) {
  :root {
    --app-nav-top-menu-link-padding-h: var(--spacing-2x);
  }
}

.lagom-dark-mode {
  --app-nav-top-menu-link-color: var(--text-heading-color);
  --app-nav-top-bg: #242424;
  --app-nav-left-bg: #242424;
  --mob-app-nav-header-bg: #242424;
  --mob-app-nav-bg: #242424;
  --mob-dropdown-nav-bg: #242424;
  --extended-nav-link-hover-bg: var(--gray-faded);
  --extended-nav-link-hover-color: var(--brand-primary-lighter);
}

:root {
  --site-text-font-size: var(--font-size-lg);
  --site-text-font-weight: var(--font-weight-light);
  --site-text-line-height: var(--line-height-lg);
  --site-text-sm-font-size: var(--font-size-md);
  --site-text-sm-line-height: var(--line-height-md);
  --site-text-xs-font-size: var(--font-size-base);
  --site-text-xs-line-height: var(--line-height-base);
  --site-banner-title-font-size: var(--font-size-h1);
  --site-banner-title-font-weight: var(--font-weight-h1);
  --site-banner-title-line-height: var(--line-height-h1);
  --site-banner-desc-font-size: var(--font-size-xxlg);
  --site-banner-desc-font-weight: var(--font-weight-light);
  --site-banner-desc-line-height: var(--line-height-xxlg);
  --site-banner-height: 562px;
  --site-banner-padding-v: 200px;
  --site-banner-content-width: 496px;
  --site-banner-element-spacing: var(--spacing-4x);
  --site-banner-graphic-width: 562px;
  --site-banner-graphic-position-right: -40px;
  --site-banner-graphic-position-top: -40px;
  --site-banner-graphic-position-bottom: -20px;
  --svg-banner-primary-shape-left: rgba(0, 0, 0, 0.24);
  --svg-banner-primary-shape-right: rgba(0, 0, 0, 0.16);
  --site-banner-home-tile-height: 172px;
  --site-banner-tile-bg: var(--ui-block-bg);
  --site-banner-tile-color: #fff;
  --site-banner-tile-font-weight: var(--font-weight-bold);
  --site-banner-tile-overlay-height: var(--spacing-10x);
  --site-section-bg: transparent;
  --site-section-border-color: var(--ui-block-divider-color);
  --site-section-border: 1px solid var(--site-section-border-color);
  --site-section-title-color: var(--text-heading-color);
  --site-section-title-font-size: var(--font-size-h2);
  --site-section-title-font-weight: var(--font-weight-bold);
  --site-section-title-line-height: var(--line-height-h2);
  --site-section-title-max-width: var(--max-width-md);
  --site-section-title-margin-bottom: var(--spacing-9x);
  --site-section-title-subtitle-spacing: var(--spacing-4x);
  --site-section-title-sm-font-size: var(--font-size-h3);
  --site-section-title-sm-font-weight: var(--font-weight-bold);
  --site-section-title-sm-line-height: var(--line-height-h3);
  --site-section-title-sm-margin-bottom: var(--spacing-6x);
  --site-section-subtitle-color: var(--text-body-color);
  --site-section-subtitle-font-size: var(--font-size-xlg);
  --site-section-subtitle-font-weight: var(--font-weight-light);
  --site-section-subtitle-line-height: var(--line-height-xlg);
  --site-section-spacing: var(--spacing-5x);
  --site-section-padding-v: var(--spacing-13x);
  --site-section-padding-sm: var(--spacing-8x);
  --site-section-sides-spacing: var(--spacing-8x);
  --site-section-illustration-width: 592px;
  --site-section-illustration-height: 513px;
  --site-section-illustration-width-sm: 376px;
  --site-section-illustration-height-sm: 324px;
  --site-section-secondary-bg: transparent;
  --site-section-secondary-title-color: var(--site-section-title-color);
  --site-section-secondary-subtitle-color: var(--site-section-subtitle-color);
  --site-section-secondary-desc-color: var(--site-section-title-color);
  --site-section-secondary-border: 1px solid var(--site-section-border-color);
  --feature-title-font-size: var(--font-size-h5);
  --feature-title-font-weight: var(--font-weight-base);
  --feature-title-line-height: var(--line-height-h5);
  --feature-desc-font-size: var(--font-size-lg);
  --feature-desc-line-height: var(--line-height-lg);
  --feature-desc-font-weight: var(--font-weight-light);
  --feature-margin-bottom: var(--ui-block-spacing-xlg);
  --feature-row-margin-bottom: var(--spacing-8x);
  --feature-icon-margin-bottom: var(--ui-block-spacing-base);
  --feature-boxed-bg: var(--ui-block-bg);
  --feature-boxed-border: 1px solid var(--ui-block-divider-color);
  --feature-boxed-border-radius: var(--ui-block-border-radius);
  --feature-boxed-padding: var(--ui-block-padding-lg);
  --feature-boxed-shadow: var(--ui-block-shadow);
  --feature-lg-title-font-size: var(--font-size-xxlg);
  --feature-lg-title-font-weight: var(--font-weight-light);
  --feature-lg-title-line-height: var(--line-height-xlg);
  --feature-lg-desc-font-size: var(--font-size-lg);
  --feature-lg-desc-font-weight: var(--font-weight-light);
  --feature-lg-desc-line-height: var(--line-height-lg);
  --feature-lg-icon-margin-bottom: var(--ui-block-spacing-lg);
  --feature-lg-boxed-padding: var(--ui-block-padding-xlg);
  --feature-sm-title-font-size: var(--font-size-h6);
  --feature-sm-title-font-weight: var(--font-weight-base);
  --feature-sm-title-line-height: var(--line-height-h6);
  --feature-sm-desc-font-size: var(--font-size-md);
  --feature-sm-desc-font-weight: var(--font-weight-light);
  --feature-sm-desc-line-height: var(--line-height-md);
  --feature-sm-svg-icon-size: 40px;
  --feature-sm-boxed-padding: var(--ui-block-padding-base);
  --site-browser-actions-dot-bg: rgba(0, 0, 0, 0.1);
  --site-shadow-default: var(--box-shadow-xlg);
}

@media (max-width: 991px) {
  :root {
    --site-banner-content-width-desktop: 496px;
    --site-banner-content-width: calc(0.8 * var(--site-banner-content-width-desktop));
  }
}

@media (max-width: 767px) {
  :root {
    --site-banner-padding-v: var(--spacing-8x);
    --site-section-sides-spacing: var(--spacing-5x);
    --feature-row-margin-bottom: var(--spacing-4x);
    --site-section-padding-v: var(--spacing-8x);
    --site-section-title-margin-bottom: var(--spacing-5x);
    --site-section-title-sm-margin-bottom: var(--spacing-3x);
  }
}

:root {
  --font-family-base: Roboto;
  --font-family-custom: unset;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --font-family-icons-medium: "lagom-medium-icons";
  --font-family-icons-small: "lagom-small-icons";
  --text-body-color: var(--gray-base);
  --text-lighter-color: var(--gray-lighter);
  --text-faded-color: var(--gray-lighter-2);
  --text-heading-color: var(--gray-darker);
  --text-primary-color: var(--brand-primary);
  --text-success-color: var(--brand-success);
  --text-warning-color: var(--brand-warning);
  --text-danger-color: var(--brand-danger);
  --text-secondary-body-color: hsla(0, 0%, 100%, 92%);
  --text-secondary-lighter-color: hsla(0, 0%, 100%, 80%);
  --text-secondary-faded-color: hsla(0, 0%, 100%, 56%);
  --text-secondary-heading-color: #fff;
  --text-secondary-primary-color: var(--brand-primary-lighter);
  --text-secondary-success-color: var(--brand-success-lighter);
  --text-secondary-warning-color: var(--brand-warning-lighter);
  --text-secondary-danger-color: var(--brand-danger-lighter);
  --link-color: var(--text-primary-color);
  --link-hover-color: var(--text-primary-color);
  --ui-nav-link-color: var(--text-heading-color);
  --ui-nav-link-hover-color: var(--text-primary-color);
  --ui-nav-link-active-color: var(--text-primary-color);
  --ui-nav-link-icon-color: var(--gray-icons);
  --ui-nav-link-icon-hover-color: var(--gray-icons-hover);
  --ui-nav-link-icon-active-color: var(--gray-icons-hover);
  --ui-nav-secondary-link-color: var(--text-body-color);
  --ui-nav-secondary-link-hover-color: var(--text-primary-color);
  --ui-nav-secondary-link-active-color: var(--text-primary-color);
  --ui-nav-secondary-link-icon-color: var(--gray-icons);
  --ui-nav-secondary-link-icon-hover-color: var(--gray-icons-hover);
  --ui-nav-secondary-link-icon-active-color: var(--gray-icons-hover);
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xlg: 20px;
  --font-size-xxlg: 24px;
  --font-size-h6: 18px;
  --font-size-h5: 20px;
  --font-size-h4: 26px;
  --font-size-h3: 36px;
  --font-size-h2: 40px;
  --font-size-h1: 48px;
  --line-height-xs: 18px;
  --line-height-sm: 20px;
  --line-height-base: 24px;
  --line-height-md: 24px;
  --line-height-lg: 28px;
  --line-height-xlg: 32px;
  --line-height-xxlg: 40px;
  --line-height-h6: 24px;
  --line-height-h5: 28px;
  --line-height-h4: 34px;
  --line-height-h3: 46px;
  --line-height-h2: 52px;
  --line-height-h1: 56px;
  --font-weight-light: 300;
  --font-weight-base: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  --font-weight-bolder: bolder;
  --font-weight-h6: var(--font-weight-medium);
  --font-weight-h5: var(--font-weight-base);
  --font-weight-h4: var(--font-weight-light);
  --font-weight-h3: var(--font-weight-bold);
  --font-weight-h2: var(--font-weight-light);
  --font-weight-h1: var(--font-weight-black);
  --paragraph-margin-bottom: var(--spacing-2x);
  --headings-margin-bottom: var(--spacing-2x);
  --link-decoration: none;
  --article-font-color: var(--text-body-color);
  --article-font-size-base: var(--font-size-lg);
  --article-font-weight-base: var(--font-weight-base);
  --article-line-height-base: var(--line-height-lg);
  --article-h1-margin-top: var(--spacing-8x);
  --article-h1-margin-bottom: var(--spacing-6x);
  --article-h2-margin-top: var(--spacing-6x);
  --article-h2-margin-bottom: var(--spacing-4x);
  --article-h3-margin-top: var(--spacing-5x);
  --article-h3-margin-bottom: var(--spacing-4x);
  --article-h4-margin-top: var(--spacing-5x);
  --article-h4-margin-bottom: var(--spacing-4x);
  --article-h5-margin-top: var(--spacing-4x);
  --article-h5-margin-bottom: var(--spacing-2x);
  --article-h6-margin-top: var(--spacing-3x);
  --article-h6-margin-bottom: var(--spacing-2x);
}

@media (max-width: 767px) {
  :root {
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
    --font-size-xlg: 18px;
    --font-size-xxlg: 21px;
    --font-size-h6: 16px;
    --font-size-h5: 18px;
    --font-size-h4: 21px;
    --font-size-h3: 26px;
    --font-size-h2: 32px;
    --font-size-h1: 40px;
    --line-height-xs: 18px;
    --line-height-sm: 20px;
    --line-height-base: 24px;
    --line-height-md: 24px;
    --line-height-lg: 28px;
    --line-height-xlg: 32px;
    --line-height-xxlg: 40px;
    --line-height-h6: 22px;
    --line-height-h5: 28px;
    --line-height-h4: 30px;
    --line-height-h3: 34px;
    --line-height-h2: 40px;
    --line-height-h1: 48px;
  }
}

.lagom-dark-mode {
  --text-primary-color: var(--brand-primary-lighter);
  --text-heading-color: #fff;
}

h3.package-name {
  line-height: unset;
}

.lagom-layout-banner .main-header,
.main-header-banner {
  padding: 15px !important;
}

.panel-sidebar:not(.panel-summary) .panel-heading {
  padding: 15px !important;
  background: #e2d7f4 !important;
}

.panel-sidebar:not(.panel-summary) .panel-body {
  padding: 8px 0 0 8px !important;
}

.app-nav-header {
  display: none;
}

.footer-widget-disabled {
  margin-top: 100px;
  padding-top: 0;
}

.footer-widget-disabled:before {
  display: none;
  background-color: transparent;
}

.footer-widget {
  margin-bottom: 10px;
}

.footer-widget .widget-title {
  font-weight: 400;
  padding-top: 40px;
  font-size: 24px;
}

.footer-widget .widget-title:before {
  background-color: #fff;
  width: 30px;
}

.footer-widget form .form-row {
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: 0;
  padding: 0;
}

.top-footer .row {
  width: 100%;
}

.main-footer .footer-bottom {
  border-top: 2px solid #5906c2 !important;
  padding: unset !important;
}

.main-footer {
  background-color: #ebf3f9 !important;
  border-top: 1px solid #e6e8ec !important;
}

.footer-contacts ul li {
  position: relative;
  padding-left: 90px;
}

.footer-contacts ul li span {
  position: absolute;
  left: 0;
  width: 75px;
}

.footer-contacts ul li span i {
  float: right;
  font-style: normal;
  margin-right: 5px;
}

.footer-contacts ul li address {
  font-size: smaller;
  margin-bottom: 0;
  margin-left: -5px;
}

.footer-contacts ul li a {
  font-family: karla, sans-serif;
  margin-bottom: 0;
  margin-left: -5px;
}

.footer-contacts ul li:last-child a+a {
  margin-left: 12px;
  font-size: 12px;
}

.pm-amex,
.pm-bkash,
.pm-ibbl,
.pm-ipay,
.pm-masterdcard,
.pm-nexus,
.pm-paypal,
.pm-rocket,
.pm-visa,
.pm-nagad {
  display: inline-block;
  background: url(https://www.hostever.com/wp-content/uploads/2020/04/payment.png) no-repeat;
  overflow: hidden;
  text-indent: -9999px;
  text-align: left;
}

.pm-amex {
  background-position: 0 0;
  width: 45px;
  height: 45px;
}

.pm-bkash {
  background-position: -45px 0;
  width: 45px;
  height: 45px;
}

.pm-ibbl {
  background-position: -90px 0;
  width: 45px;
  height: 45px;
}

.pm-ipay {
  background-position: 0 -45px;
  width: 45px;
  height: 45px;
}

.pm-masterdcard {
  background-position: -45px -45px;
  width: 45px;
  height: 45px;
}

.pm-nexus {
  background-position: -90px -45px;
  width: 45px;
  height: 45px;
}

.pm-paypal {
  background-position: 0 -90px;
  width: 45px;
  height: 45px;
}

.pm-rocket {
  background-position: -45px -90px;
  width: 45px;
  height: 45px;
}

.pm-visa {
  background-position: -90px -90px;
  width: 45px;
  height: 45px;
}

.pm-nagad {
  background-position: -90px -90px;
  width: 45px;
  height: 45px;
}

@media (max-width: 991.98px) {
  .app-nav-header {
    display: block;
  }

  #main-menu .top-nav {
    display: none;
  }
}