:root {
  --error: #e10600;
  --valid: #437e08;
  --primary-50: #eefff5;
  --primary-100: #d8ffeb;
  --primary-200: #b3ffd7;
  --primary-300: #78fdb7;
  --primary-400: #37f191;
  --primary-500: #0dda70;
  --primary-600: #04b55a;
  --primary-700: #11884b;
  --primary-800: #0c6f3e;
  --primary-900: #0c5b34;
  --green-50: #f3faf7;
  --green-100: #def7ec;
  --green-200: #bcf0da;
  --green-300: #84e1bc;
  --green-400: #31c48d;
  --green-500: #0e9f6e;
  --green-600: #057a55;
  --green-700: #046c4e;
  --green-800: #03543f;
  --green-900: #014737;
  --green-ultra-light-transparent: rgba(8, 159, 82, 0.08);
  --green-ultra-light-semi-transparent: rgba(8, 159, 82, 0.1);
  --green-light-transparent-variant: rgba(17, 136, 75, 0.12);
  --green-light-transparent-alt: rgba(24, 216, 146, 0.12);
  --green-mint-transparent: rgba(4, 181, 90, 0.12);
  --green-light-semi-transparent: rgba(30, 194, 113, 0.32);
  --green-medium-transparent: rgba(12, 91, 52, 0.16);
  --green-medium-transparent-variant: rgba(12, 91, 52, 0.32);
  --green-transparent: rgba(12, 91, 52, 0.322);
  --green-dark-transparent: rgba(12, 91, 62, 0.322);
  --green-dark-semi-transparent: rgba(12, 91, 50, 0.24);
  --green-light-transparent: rgba(4, 181, 90, 0.122);
  --green-half-transparent: rgba(4, 181, 90, 0.5);
  --green-forest: rgb(21, 132, 75);
  --green-forest-dark: rgb(14, 88, 51);
  --green-forest-light-transparent: rgba(11, 91, 51, 0.16);
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2a37;
  --gray-900: #111928;
  --gray-transparent: #0000008f;
  --gray-button: rgba(255, 255, 255, 0.08);
  --red-50: #fdf2f2;
  --red-100: #fde8e8;
  --red-200: #fbd5d5;
  --red-300: #f8b4b4;
  --red-400: #f98080;
  --red-500: #ef6c6c;
  --red-600: #e02424;
  --red-700: #c81e1e;
  --red-800: #9b1c1c;
  --red-900: #771d1d;
  --red-light-transparent: rgba(216, 24, 24, 0.12);
  --yellow-50: #fdfdea;
  --yellow-100: #fdf6b2;
  --yellow-200: #fce96a;
  --yellow-300: #faca15;
  --yellow-400: #e3a008;
  --yellow-500: #c27803;
  --yellow-600: #9f580a;
  --yellow-700: #8e4b10;
  --yellow-800: #723b13;
  --yellow-900: #633112;
  --yellow-light-transparent: rgba(216, 158, 24, 0.12);
  --orange-50: #fff8f1;
  --orange-100: #feecdc;
  --orange-200: #fcd9bd;
  --orange-300: #fdba8c;
  --orange-400: #ff8a4c;
  --orange-500: #ff5a1f;
  --orange-600: #d03801;
  --orange-700: #b43403;
  --orange-800: #8a2c0d;
  --orange-900: #771d1d;
  --indigo-50: #f0f5ff;
  --indigo-100: #e5edff;
  --indigo-200: #cddbfe;
  --indigo-300: #b4c6fc;
  --indigo-400: #8da2fb;
  --indigo-500: #6875f5;
  --indigo-600: #5850ec;
  --indigo-700: #5145cd;
  --indigo-800: #42389d;
  --indigo-900: #362f78;
  --white: #fff;
  --white-ultra-light-transparent: rgba(255, 255, 255, 0.04);
  --white-translucent: rgba(255, 255, 255, 0.12);
  --white-light-transparent: rgba(255, 255, 255, 0.15);
  --white-medium-transparent: rgba(255, 255, 255, 0.16);
  --white-light-semi-transparent: rgba(255, 255, 255, 0.2);
  --white-semi-transparent: rgba(255, 255, 255, 0.32);
  --white-half-transparent: rgba(255, 255, 255, 0.5);
  --black-transparent: rgba(0, 0, 0, 0.24);
  --black-transparent-zero: rgba(30, 37, 37, 0);
  --surface-container-low: rgba(0, 0, 0, 0.16);
  --surface-container: rgba(255, 255, 255, 0.08);
  --black-medium-transparent: rgba(0, 0, 0, 0.56);
  --black-semi-opaque: rgba(0, 0, 0, 0.76);
  --black: #1e2525;
  --accent-mango: #ffdf72;
  --accent-red: #ffb2d2;
  --accent-raspberry: #fecbda;
  --accent-pink: #ffafed;
  --accent-purple: #d3b6ff;
  --accent-indigo: #a6e0ff;
  --accent-teal: #64edd2;
  --accent-green: #bde986;
  --accent-gray: #d5dadd;
  --blue-a11y: #0a76f6;
}

:root {
  --popinShadowXLarge: 0 50px 100px -20px rgba(50, 50, 93, 0.25),
      0 30px 60px -30px rgba(0, 0, 0, 0.3);
}

:root {
  --radius-small: 4px;
  --radius-medium: 6px;
  --radius-default: 8px;
  --radius-large: 10px;
  --radius-extra-large: 12px;
  --popinBorderRadius: 8px;
}

:root {
  --background-default: rgba(30, 37, 37, 1);
  --text-default: var(--gray-50);
  --link-primary-text-default: var(--white);
  --link-primary-text-hover: var(--white);
  --link-primary-text-focus: var(--white);
  --link-primary-text-disabled: var(--gray-200);
  --link-primary-border-focus: var(--black);
  --link-primary-text-on-blue-background: var(--white);
  --link-primary-text-hover-on-blue-background: var(--black);
  --outline-color: var(--blue-a11y);
  --modal-menu-background: rgba(0, 0, 0, 56%);
  --menu-background: var(--gray-transparent);
  --submenu-background: rgba(0, 0, 0, 0.24);
  --menu-active-background: rgba(0, 0, 0, 0.24);
  --menu-active-text: var(--white);
  --button-background: var(--primary-700);
  --button-color: var(--white);
  --button-background-close-hover: transparent;
  --button-background-close: transparent;
  --button-color-close-hover: var(--white);
  --button-color-close: var(--white);
  --button-background-hover: var(--primary-900);
  --button-color-hover: var(--white);
  --button-border-radius: var(--radius-default);
  --underline-max-width: 100%;
  --underline-hover-width: 0;
  --underline-idle-width: var(--underline-max-width);
  --underline-x: calc(var(--underline-max-width) * 0);
  --underline-thickness: 0.0625em;
  --underline-img: linear-gradient(0deg, currentcolor, currentcolor);
  --footer-link-color: var(--white);
  --footer-link-hover-color: var(--white);
  --block-bg-green: var(--green-transparent);
  --block-bg-black: var(--black-transparent);
  --block-text-color: var(--gray-300);
}

.complexBlock-subtitle-badge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.8rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 3.2rem;
  padding: 0 1.2rem;
  border-radius: --radius-medium;
  background: var(--green-light-transparent);
  color: var(--primary-500);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 150%;
  letter-spacing: 0.084rem;
}

.complexBlock-addon-badge {
  vertical-align: middle;
  gap: 4px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 24px;
  padding: 0 0.8rem;
  border: 0.5px solid var(--yellow-300);
  border-radius: var(--radius-medium);
  background: var(--white-translucent);
  color: var(--yellow-300);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2.1rem;
  text-align: center;
}

.saving-badge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.6rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 3.2rem;
  margin: auto;
  margin-bottom: 1.6rem;
  padding: 0 1.2rem;
  border-radius: var(--radius-medium);
  background: var(--green-light-transparent);
  color: var(--primary-500);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2.1rem;
  letter-spacing: 0.084rem;
}