/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* You can add global styles to this file, and also import other style files */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

img {
  width: 100%;
  object-fit: contain;
}

.text-heading-xl {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 900;
  text-transform: none;
  font-size: 5.5rem;
  letter-spacing: -2.64px;
  line-height: 1;
}
@media screen and (max-width: 38.6875rem) {
  .text-heading-xl {
    font-size: 4rem;
    letter-spacing: -1.92px;
  }
}

.text-heading-l {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 900;
  text-transform: none;
  font-size: 4rem;
  letter-spacing: -1.92px;
  line-height: 1;
}
@media screen and (max-width: 38.6875rem) {
  .text-heading-l {
    font-size: 3rem;
    letter-spacing: -1.44px;
  }
}

.text-heading-m {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 900;
  text-transform: none;
  font-size: 2.5rem;
  letter-spacing: -1.2px;
  line-height: 1;
}

.text-heading-s {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 900;
  text-transform: none;
  font-size: 2rem;
  letter-spacing: -0.96px;
  line-height: 1;
}

.text-heading-xs {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 900;
  text-transform: none;
  font-size: 1.5rem;
  letter-spacing: -0.72px;
  line-height: 1.1666666667;
  /* UPDATE */
}
@media screen and (max-width: 38.6875rem) {
  .text-heading-xs {
    font-size: 1rem;
    letter-spacing: -0.48px;
    line-height: 1.25;
  }
}

.text-heading-xxs {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 900;
  text-transform: none;
  font-size: 1rem;
  letter-spacing: -0.48px;
  line-height: 1.25;
}

.text-overline {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06px;
  line-height: 1.3333333333;
}

.text-body-l {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 500;
  text-transform: none;
  font-size: 1.5rem;
  letter-spacing: -0.12px;
  line-height: 1.3333333333;
}

.text-body-l-bold {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: 1.5rem;
  letter-spacing: -0.12px;
  line-height: 1.3333333333;
}

.text-body-l-link {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: 1.5rem;
  letter-spacing: -0.12px;
  line-height: 1.3333333333;
}

.text-body-m {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 500;
  text-transform: none;
  font-size: 1.125rem;
  letter-spacing: -0.09px;
  line-height: 1.3333333333;
}

.text-body-m-bold {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: 1.125rem;
  letter-spacing: -0.09px;
  line-height: 1.3333333333;
}

.text-body-m-link {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: 1.125rem;
  letter-spacing: -0.09px;
  line-height: 1.3333333333;
}

.text-body-s {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 500;
  text-transform: none;
  font-size: 1rem;
  letter-spacing: -0.08px;
  line-height: 1.5;
}

.text-body-s-bold {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: 1rem;
  letter-spacing: -0.08px;
  line-height: 1.5;
}

.text-body-s-link {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: 1rem;
  letter-spacing: -0.08px;
  line-height: 1.5;
}

.text-body-xs {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 500;
  text-transform: none;
  font-size: 0.875rem;
  letter-spacing: -0.07px;
  line-height: 1.4285714286;
}

.text-body-xs-bold {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: 0.875rem;
  letter-spacing: -0.07px;
  line-height: 1.4285714286;
}

.text-body-xs-link {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: 0.875rem;
  letter-spacing: -0.07px;
  line-height: 1.4285714286;
}

.text-body-xxs {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: 0.875rem;
  letter-spacing: -0.07px;
  line-height: 1.4285714286;
}
@media screen and (max-width: 38.6875rem) {
  .text-body-xxs {
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: -0.06px;
    line-height: 1.3333333333;
  }
}

.text-body-xxs-bold {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 500;
  text-transform: none;
  font-size: 0.75rem;
  letter-spacing: -0.06px;
  line-height: 1.3333333333;
}
@media screen and (max-width: 38.6875rem) {
  .text-body-xxs-bold {
    font-weight: 700;
  }
}

.text-body-xxs-link {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: 0.75rem;
  letter-spacing: -0.06px;
  line-height: 1.3333333333;
}

.text-body-xxxs {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 600;
  text-transform: none;
  font-size: 0.8rem;
  letter-spacing: -0.07px;
  line-height: 1.3333333333;
}
@media screen and (max-width: 38.6875rem) {
  .text-body-xxxs {
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: -0.06px;
    line-height: 1.3333333333;
  }
}

.text-body-note {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: 0.6rem;
  letter-spacing: -0.07px;
  line-height: 1.3333333333;
}

.text-list-title {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 500;
  text-transform: none;
  font-size: 1rem;
  letter-spacing: -0.08px;
  line-height: 1.25;
}

.text-button {
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: 1rem;
  letter-spacing: -0.08px;
  line-height: 1.5;
}

@font-face {
  font-family: "JioType";
  src: url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Light.woff2") format("woff2"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Light.woff") format("woff"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JioType";
  src: url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Black.woff2") format("woff2"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Black.woff") format("woff"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JioType";
  src: url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-LightItalic.woff2") format("woff2"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-LightItalic.woff") format("woff"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JioType";
  src: url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Bold.woff2") format("woff2"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Bold.woff") format("woff"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JioType";
  src: url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-MediumItalic.woff2") format("woff2"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-MediumItalic.woff") format("woff"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JioType";
  src: url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Medium.woff2") format("woff2"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Medium.woff") format("woff"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/**
 * Do not edit directly
 * Generated on Tue, 08 Mar 2022 10:45:36 GMT
 */
/**

 */
/**
 Also adds a `&` so light themes are applied to current default selector too.
 */
/**
In addition to base theme, use this to add extra themes with 
provided name, scheme: [primary, secondary, sparkle]
 */
/**
Use this to create base theme with scheme: [primary, secondary, sparkle]
 */
/**
  If you have scss files with placeholders like %root-vars-theme-light--MyProduct,
  you can use this method instead of createDefaultTheme() with primary, secondary, sparkle colors.
 */
/**
If you have scss files with placeholders like %root-vars-theme-light--MyProduct,
  you can use this method instead of addExtraTheme() with primary, secondary, sparkle colors.
 */
body, body .data-mode-light, body [data-mode=light], body .data-mode-light, body [data-mode=light],
.theme--Default.theme--Default,
.theme--Default.theme--Default .data-mode-light,
.theme--Default.theme--Default [data-mode=light],
.theme--Default.theme--Default .data-mode-light,
.theme--Default.theme--Default [data-mode=light] {
  --color-primary-20: #e5f1f7;
  --color-primary-30: #89dcff;
  --color-primary-40: #67c3ef;
  --color-primary-50: #0078ad;
  --color-primary-60: #0c5273;
  --color-primary-70: #00364e;
  --color-primary-80: #001e2b;
  --color-primary-inverse: #ffffff;
  --color-primary-background: #ffffff;
  --color-primary-grey-100: #141414;
  --color-primary-grey-80: rgba(0, 0, 0, 0.65);
  --color-primary-grey-60: #b5b5b5;
  --color-primary-grey-40: #e0e0e0;
  --color-primary-grey-20: #f5f5f5;
  --color-secondary-20: #e5f1f7;
  --color-secondary-30: #89dcff;
  --color-secondary-40: #0078ad;
  --color-secondary-50: #0c5273;
  --color-secondary-60: #083950;
  --color-secondary-70: #062939;
  --color-secondary-80: #041922;
  --color-secondary-inverse: #ffffff;
  --color-secondary-background: #ffffff;
  --color-secondary-grey-100: #141414;
  --color-secondary-grey-80: rgba(0, 0, 0, 0.65);
  --color-secondary-grey-60: #b5b5b5;
  --color-secondary-grey-40: #e0e0e0;
  --color-secondary-grey-20: #f5f5f5;
  --color-sparkle-20: #e8faf7;
  --color-sparkle-30: #a7f6e9;
  --color-sparkle-40: #7aebd9;
  --color-sparkle-50: #1eccb0;
  --color-sparkle-60: #1e7b74;
  --color-sparkle-70: #0e5c4f;
  --color-sparkle-80: #08332c;
  --color-sparkle-inverse: #08332c;
  --color-sparkle-background: #ffffff;
  --color-sparkle-grey-100: #141414;
  --color-sparkle-grey-80: rgba(0, 0, 0, 0.65);
  --color-sparkle-grey-60: #b5b5b5;
  --color-sparkle-grey-40: #e0e0e0;
  --color-sparkle-grey-20: #f5f5f5;
  color: var(--color-primary-grey-100);
}
body .data-mode-dark, body [data-mode=dark], body .data-mode-dark, body [data-mode=dark],
.theme--Default.theme--Default .data-mode-dark,
.theme--Default.theme--Default [data-mode=dark],
.theme--Default.theme--Default .data-mode-dark,
.theme--Default.theme--Default [data-mode=dark] {
  --color-primary-20: #002b3d;
  --color-primary-30: #004766;
  --color-primary-40: #00638f;
  --color-primary-50: #007fad;
  --color-primary-60: #4ca5c6;
  --color-primary-70: #8cc5da;
  --color-primary-80: #cce5ef;
  --color-primary-inverse: #ffffff;
  --color-primary-background: #141414;
  --color-primary-grey-100: #ffffff;
  --color-primary-grey-80: rgba(255, 255, 255, 0.78);
  --color-primary-grey-60: #a1a1a1;
  --color-primary-grey-40: #5a5a5a;
  --color-primary-grey-20: #2b2b2b;
  --color-secondary-20: #002b3d;
  --color-secondary-30: #004766;
  --color-secondary-40: #00638f;
  --color-secondary-50: #007fad;
  --color-secondary-60: #4ca5c6;
  --color-secondary-70: #8cc5da;
  --color-secondary-80: #cce5ef;
  --color-secondary-inverse: #ffffff;
  --color-secondary-background: #141414;
  --color-secondary-grey-100: #ffffff;
  --color-secondary-grey-80: rgba(255, 255, 255, 0.78);
  --color-secondary-grey-60: #a1a1a1;
  --color-secondary-grey-40: #5a5a5a;
  --color-secondary-grey-20: #2b2b2b;
  --color-sparkle-20: #1a413b;
  --color-sparkle-30: #245a51;
  --color-sparkle-40: #348376;
  --color-sparkle-50: #58dac5;
  --color-sparkle-60: #8ae5d6;
  --color-sparkle-70: #b4eee5;
  --color-sparkle-80: #def8f3;
  --color-sparkle-inverse: #1a413b;
  --color-sparkle-background: #141414;
  --color-sparkle-grey-100: #ffffff;
  --color-sparkle-grey-80: rgba(255, 255, 255, 0.78);
  --color-sparkle-grey-60: #a1a1a1;
  --color-sparkle-grey-40: #5a5a5a;
  --color-sparkle-grey-20: #2b2b2b;
  color: var(--color-primary-grey-100);
}
body .data-mode-bold, body [data-mode=bold], body .data-mode-bold, body [data-mode=bold],
.theme--Default.theme--Default .data-mode-bold,
.theme--Default.theme--Default [data-mode=bold],
.theme--Default.theme--Default .data-mode-bold,
.theme--Default.theme--Default [data-mode=bold] {
  --color-primary-20: rgba(137, 220, 255, 0.2);
  --color-primary-30: rgba(137, 220, 255, 0.4);
  --color-primary-40: rgba(137, 220, 255, 0.6);
  --color-primary-50: #89dcff;
  --color-primary-60: #eefaff;
  --color-primary-70: #ffffff;
  --color-primary-80: #ffffff;
  --color-primary-inverse: #00364e;
  --color-primary-background: #0078ad;
  --color-primary-grey-100: #ffffff;
  --color-primary-grey-80: rgba(255, 255, 255, 0.94);
  --color-primary-grey-60: rgba(255, 255, 255, 0.53);
  --color-primary-grey-40: rgba(255, 255, 255, 0.31);
  --color-primary-grey-20: rgba(255, 255, 255, 0.12);
  --color-secondary-20: rgba(137, 220, 255, 0.2);
  --color-secondary-30: rgba(137, 220, 255, 0.4);
  --color-secondary-40: rgba(137, 220, 255, 0.6);
  --color-secondary-50: #89dcff;
  --color-secondary-60: #bceaff;
  --color-secondary-70: #d4f2ff;
  --color-secondary-80: #f2fbff;
  --color-secondary-inverse: #062939;
  --color-secondary-background: #0c5273;
  --color-secondary-grey-100: #ffffff;
  --color-secondary-grey-80: rgba(255, 255, 255, 0.78);
  --color-secondary-grey-60: rgba(255, 255, 255, 0.53);
  --color-secondary-grey-40: rgba(255, 255, 255, 0.31);
  --color-secondary-grey-20: rgba(255, 255, 255, 0.12);
  --color-sparkle-20: rgba(14, 92, 79, 0.2);
  --color-sparkle-30: rgba(14, 92, 79, 0.4);
  --color-sparkle-40: rgba(14, 92, 79, 0.6);
  --color-sparkle-50: #0e5c4f;
  --color-sparkle-60: #0a493f;
  --color-sparkle-70: #07362e;
  --color-sparkle-80: #052923;
  --color-sparkle-inverse: #e8faf7;
  --color-sparkle-background: #1eccb0;
  --color-sparkle-grey-100: #08332c;
  --color-sparkle-grey-80: rgba(8, 51, 44, 0.81);
  --color-sparkle-grey-60: rgba(8, 51, 44, 0.53);
  --color-sparkle-grey-40: rgba(8, 51, 44, 0.3);
  --color-sparkle-grey-20: rgba(8, 51, 44, 0.12);
  color: var(--color-primary-grey-100);
}

.theme--Navi-Theme.theme--Navi-Theme, .theme--Navi-Theme.theme--Navi-Theme .data-mode-light, .theme--Navi-Theme.theme--Navi-Theme [data-mode=light], .theme--Navi-Theme.theme--Navi-Theme .data-mode-light, .theme--Navi-Theme.theme--Navi-Theme [data-mode=light] {
  --color-primary-20: #e8e8fc;
  --color-primary-30: #9999ff;
  --color-primary-40: #6464ff;
  --color-primary-50: #3535f3;
  --color-primary-60: #000093;
  --color-primary-70: #00004c;
  --color-primary-80: #010029;
  --color-primary-inverse: #ffffff;
  --color-primary-background: #ffffff;
  --color-primary-grey-100: #141414;
  --color-primary-grey-80: rgba(0, 0, 0, 0.65);
  --color-primary-grey-60: #b5b5b5;
  --color-primary-grey-40: #e0e0e0;
  --color-primary-grey-20: #f5f5f5;
  --color-secondary-20: #e8e8fc;
  --color-secondary-30: #9999ff;
  --color-secondary-40: #3535f3;
  --color-secondary-50: #000093;
  --color-secondary-60: #000067;
  --color-secondary-70: #00004a;
  --color-secondary-80: #00002c;
  --color-secondary-inverse: #ffffff;
  --color-secondary-background: #ffffff;
  --color-secondary-grey-100: #141414;
  --color-secondary-grey-80: rgba(0, 0, 0, 0.65);
  --color-secondary-grey-60: #b5b5b5;
  --color-secondary-grey-40: #e0e0e0;
  --color-secondary-grey-20: #f5f5f5;
  --color-sparkle-20: #e8faf7;
  --color-sparkle-30: #a7f6e9;
  --color-sparkle-40: #7aebd9;
  --color-sparkle-50: #1eccb0;
  --color-sparkle-60: #1e7b74;
  --color-sparkle-70: #0e5c4f;
  --color-sparkle-80: #08332c;
  --color-sparkle-inverse: #08332c;
  --color-sparkle-background: #ffffff;
  --color-sparkle-grey-100: #141414;
  --color-sparkle-grey-80: rgba(0, 0, 0, 0.65);
  --color-sparkle-grey-60: #b5b5b5;
  --color-sparkle-grey-40: #e0e0e0;
  --color-sparkle-grey-20: #f5f5f5;
  color: var(--color-primary-grey-100);
}
.theme--Navi-Theme.theme--Navi-Theme .data-mode-dark, .theme--Navi-Theme.theme--Navi-Theme [data-mode=dark], .theme--Navi-Theme.theme--Navi-Theme .data-mode-dark, .theme--Navi-Theme.theme--Navi-Theme [data-mode=dark] {
  --color-primary-20: #16164b;
  --color-primary-30: #24247d;
  --color-primary-40: #3232ae;
  --color-primary-50: #4848f9;
  --color-primary-60: #7f7ffb;
  --color-primary-70: #adadfc;
  --color-primary-80: #dadafe;
  --color-primary-inverse: #ffffff;
  --color-primary-background: #141414;
  --color-primary-grey-100: #ffffff;
  --color-primary-grey-80: rgba(255, 255, 255, 0.78);
  --color-primary-grey-60: #a1a1a1;
  --color-primary-grey-40: #5a5a5a;
  --color-primary-grey-20: #2b2b2b;
  --color-secondary-20: #16164b;
  --color-secondary-30: #24247d;
  --color-secondary-40: #3232ae;
  --color-secondary-50: #4848f9;
  --color-secondary-60: #7f7ffb;
  --color-secondary-70: #adadfc;
  --color-secondary-80: #dadafe;
  --color-secondary-inverse: #ffffff;
  --color-secondary-background: #141414;
  --color-secondary-grey-100: #ffffff;
  --color-secondary-grey-80: rgba(255, 255, 255, 0.78);
  --color-secondary-grey-60: #a1a1a1;
  --color-secondary-grey-40: #5a5a5a;
  --color-secondary-grey-20: #2b2b2b;
  --color-sparkle-20: #1a413b;
  --color-sparkle-30: #245a51;
  --color-sparkle-40: #348376;
  --color-sparkle-50: #58dac5;
  --color-sparkle-60: #8ae5d6;
  --color-sparkle-70: #b4eee5;
  --color-sparkle-80: #def8f3;
  --color-sparkle-inverse: #1a413b;
  --color-sparkle-background: #141414;
  --color-sparkle-grey-100: #ffffff;
  --color-sparkle-grey-80: rgba(255, 255, 255, 0.78);
  --color-sparkle-grey-60: #a1a1a1;
  --color-sparkle-grey-40: #5a5a5a;
  --color-sparkle-grey-20: #2b2b2b;
  color: var(--color-primary-grey-100);
}
.theme--Navi-Theme.theme--Navi-Theme .data-mode-bold, .theme--Navi-Theme.theme--Navi-Theme [data-mode=bold], .theme--Navi-Theme.theme--Navi-Theme .data-mode-bold, .theme--Navi-Theme.theme--Navi-Theme [data-mode=bold] {
  --color-primary-20: rgba(153, 153, 255, 0.2);
  --color-primary-30: rgba(153, 153, 255, 0.4);
  --color-primary-40: rgba(153, 153, 255, 0.6);
  --color-primary-50: #9999ff;
  --color-primary-60: #ceceff;
  --color-primary-70: #ddddff;
  --color-primary-80: #fafaff;
  --color-primary-inverse: #00004c;
  --color-primary-background: #3535f3;
  --color-primary-grey-100: #ffffff;
  --color-primary-grey-80: rgba(255, 255, 255, 0.78);
  --color-primary-grey-60: rgba(255, 255, 255, 0.53);
  --color-primary-grey-40: rgba(255, 255, 255, 0.31);
  --color-primary-grey-20: rgba(255, 255, 255, 0.12);
  --color-secondary-20: rgba(153, 153, 255, 0.2);
  --color-secondary-30: rgba(153, 153, 255, 0.4);
  --color-secondary-40: rgba(153, 153, 255, 0.6);
  --color-secondary-50: #9999ff;
  --color-secondary-60: #b9b9ff;
  --color-secondary-70: #ddddff;
  --color-secondary-80: #ffffff;
  --color-secondary-inverse: #00004a;
  --color-secondary-background: #000093;
  --color-secondary-grey-100: #ffffff;
  --color-secondary-grey-80: rgba(255, 255, 255, 0.78);
  --color-secondary-grey-60: rgba(255, 255, 255, 0.53);
  --color-secondary-grey-40: rgba(255, 255, 255, 0.31);
  --color-secondary-grey-20: rgba(255, 255, 255, 0.12);
  --color-sparkle-20: rgba(14, 92, 79, 0.2);
  --color-sparkle-30: rgba(14, 92, 79, 0.4);
  --color-sparkle-40: rgba(14, 92, 79, 0.6);
  --color-sparkle-50: #0e5c4f;
  --color-sparkle-60: #0a493f;
  --color-sparkle-70: #07362e;
  --color-sparkle-80: #052923;
  --color-sparkle-inverse: #e8faf7;
  --color-sparkle-background: #1eccb0;
  --color-sparkle-grey-100: #08332c;
  --color-sparkle-grey-80: rgba(8, 51, 44, 0.81);
  --color-sparkle-grey-60: rgba(8, 51, 44, 0.53);
  --color-sparkle-grey-40: rgba(8, 51, 44, 0.3);
  --color-sparkle-grey-20: rgba(8, 51, 44, 0.12);
  color: var(--color-primary-grey-100);
}

.theme--Green-Theme.theme--Green-Theme, .theme--Green-Theme.theme--Green-Theme .data-mode-light, .theme--Green-Theme.theme--Green-Theme [data-mode=light], .theme--Green-Theme.theme--Green-Theme .data-mode-light, .theme--Green-Theme.theme--Green-Theme [data-mode=light] {
  --color-primary-20: #e5f7ee;
  --color-primary-30: #94f6c5;
  --color-primary-40: #10d974;
  --color-primary-50: #00b259;
  --color-primary-60: #03753c;
  --color-primary-70: #005028;
  --color-primary-80: #002d16;
  --color-primary-inverse: #002d16;
  --color-primary-background: #ffffff;
  --color-primary-grey-100: #141414;
  --color-primary-grey-80: rgba(0, 0, 0, 0.65);
  --color-primary-grey-60: #b5b5b5;
  --color-primary-grey-40: #e0e0e0;
  --color-primary-grey-20: #f5f5f5;
  --color-secondary-20: #e5f7ee;
  --color-secondary-30: #94f6c5;
  --color-secondary-40: #00b259;
  --color-secondary-50: #03753c;
  --color-secondary-60: #02522a;
  --color-secondary-70: #013a1e;
  --color-secondary-80: #012312;
  --color-secondary-inverse: #ffffff;
  --color-secondary-background: #ffffff;
  --color-secondary-grey-100: #141414;
  --color-secondary-grey-80: rgba(0, 0, 0, 0.65);
  --color-secondary-grey-60: #b5b5b5;
  --color-secondary-grey-40: #e0e0e0;
  --color-secondary-grey-20: #f5f5f5;
  --color-sparkle-20: #e8faf7;
  --color-sparkle-30: #a7f6e9;
  --color-sparkle-40: #7aebd9;
  --color-sparkle-50: #1eccb0;
  --color-sparkle-60: #1e7b74;
  --color-sparkle-70: #0e5c4f;
  --color-sparkle-80: #08332c;
  --color-sparkle-inverse: #08332c;
  --color-sparkle-background: #ffffff;
  --color-sparkle-grey-100: #141414;
  --color-sparkle-grey-80: rgba(0, 0, 0, 0.65);
  --color-sparkle-grey-60: #b5b5b5;
  --color-sparkle-grey-40: #e0e0e0;
  --color-sparkle-grey-20: #f5f5f5;
  color: var(--color-primary-grey-100);
}
.theme--Green-Theme.theme--Green-Theme .data-mode-dark, .theme--Green-Theme.theme--Green-Theme [data-mode=dark], .theme--Green-Theme.theme--Green-Theme .data-mode-dark, .theme--Green-Theme.theme--Green-Theme [data-mode=dark] {
  --color-primary-20: #06371f;
  --color-primary-30: #0a5c33;
  --color-primary-40: #0e8147;
  --color-primary-50: #14b866;
  --color-primary-60: #5acd94;
  --color-primary-70: #95dfba;
  --color-primary-80: #d0f1e0;
  --color-primary-inverse: #06371f;
  --color-primary-background: #141414;
  --color-primary-grey-100: #ffffff;
  --color-primary-grey-80: rgba(255, 255, 255, 0.78);
  --color-primary-grey-60: #a1a1a1;
  --color-primary-grey-40: #5a5a5a;
  --color-primary-grey-20: #2b2b2b;
  --color-secondary-20: #06371f;
  --color-secondary-30: #0a5c33;
  --color-secondary-40: #0e8147;
  --color-secondary-50: #14b866;
  --color-secondary-60: #5acd94;
  --color-secondary-70: #95dfba;
  --color-secondary-80: #d0f1e0;
  --color-secondary-inverse: #06371f;
  --color-secondary-background: #141414;
  --color-secondary-grey-100: #ffffff;
  --color-secondary-grey-80: rgba(255, 255, 255, 0.78);
  --color-secondary-grey-60: #a1a1a1;
  --color-secondary-grey-40: #5a5a5a;
  --color-secondary-grey-20: #2b2b2b;
  --color-sparkle-20: #1a413b;
  --color-sparkle-30: #245a51;
  --color-sparkle-40: #348376;
  --color-sparkle-50: #58dac5;
  --color-sparkle-60: #8ae5d6;
  --color-sparkle-70: #b4eee5;
  --color-sparkle-80: #def8f3;
  --color-sparkle-inverse: #1a413b;
  --color-sparkle-background: #141414;
  --color-sparkle-grey-100: #ffffff;
  --color-sparkle-grey-80: rgba(255, 255, 255, 0.78);
  --color-sparkle-grey-60: #a1a1a1;
  --color-sparkle-grey-40: #5a5a5a;
  --color-sparkle-grey-20: #2b2b2b;
  color: var(--color-primary-grey-100);
}
.theme--Green-Theme.theme--Green-Theme .data-mode-bold, .theme--Green-Theme.theme--Green-Theme [data-mode=bold], .theme--Green-Theme.theme--Green-Theme .data-mode-bold, .theme--Green-Theme.theme--Green-Theme [data-mode=bold] {
  --color-primary-20: rgba(0, 80, 40, 0.2);
  --color-primary-30: rgba(0, 80, 40, 0.4);
  --color-primary-40: rgba(0, 80, 40, 0.6);
  --color-primary-50: #005028;
  --color-primary-60: #003b1d;
  --color-primary-70: #002613;
  --color-primary-80: #00170c;
  --color-primary-inverse: #e5f7ee;
  --color-primary-background: #00b259;
  --color-primary-grey-100: #002d16;
  --color-primary-grey-80: rgba(0, 45, 22, 0.89);
  --color-primary-grey-60: rgba(0, 45, 22, 0.53);
  --color-primary-grey-40: rgba(0, 45, 22, 0.3);
  --color-primary-grey-20: rgba(0, 45, 22, 0.12);
  --color-secondary-20: rgba(148, 246, 197, 0.2);
  --color-secondary-30: rgba(148, 246, 197, 0.4);
  --color-secondary-40: rgba(148, 246, 197, 0.6);
  --color-secondary-50: #94f6c5;
  --color-secondary-60: #c5fadf;
  --color-secondary-70: #dcfceb;
  --color-secondary-80: #f3fef8;
  --color-secondary-inverse: #013a1e;
  --color-secondary-background: #03753c;
  --color-secondary-grey-100: #ffffff;
  --color-secondary-grey-80: rgba(255, 255, 255, 0.83);
  --color-secondary-grey-60: rgba(255, 255, 255, 0.53);
  --color-secondary-grey-40: rgba(255, 255, 255, 0.31);
  --color-secondary-grey-20: rgba(255, 255, 255, 0.12);
  --color-sparkle-20: rgba(14, 92, 79, 0.2);
  --color-sparkle-30: rgba(14, 92, 79, 0.4);
  --color-sparkle-40: rgba(14, 92, 79, 0.6);
  --color-sparkle-50: #0e5c4f;
  --color-sparkle-60: #0a493f;
  --color-sparkle-70: #07362e;
  --color-sparkle-80: #052923;
  --color-sparkle-inverse: #e8faf7;
  --color-sparkle-background: #1eccb0;
  --color-sparkle-grey-100: #08332c;
  --color-sparkle-grey-80: rgba(8, 51, 44, 0.81);
  --color-sparkle-grey-60: rgba(8, 51, 44, 0.53);
  --color-sparkle-grey-40: rgba(8, 51, 44, 0.3);
  --color-sparkle-grey-20: rgba(8, 51, 44, 0.12);
  color: var(--color-primary-grey-100);
}

.theme--Crimson-Theme.theme--Crimson-Theme, .theme--Crimson-Theme.theme--Crimson-Theme .data-mode-light, .theme--Crimson-Theme.theme--Crimson-Theme [data-mode=light], .theme--Crimson-Theme.theme--Crimson-Theme .data-mode-light, .theme--Crimson-Theme.theme--Crimson-Theme [data-mode=light] {
  --color-primary-20: #f7e5e9;
  --color-primary-30: #f98ba1;
  --color-primary-40: #ed617f;
  --color-primary-50: #aa0023;
  --color-primary-60: #700017;
  --color-primary-70: #4d0010;
  --color-primary-80: #2a0009;
  --color-primary-inverse: #ffffff;
  --color-primary-background: #ffffff;
  --color-primary-grey-100: #141414;
  --color-primary-grey-80: rgba(0, 0, 0, 0.65);
  --color-primary-grey-60: #b5b5b5;
  --color-primary-grey-40: #e0e0e0;
  --color-primary-grey-20: #f5f5f5;
  --color-secondary-20: #f7e5e9;
  --color-secondary-30: #f98ba1;
  --color-secondary-40: #aa0023;
  --color-secondary-50: #700017;
  --color-secondary-60: #4e0010;
  --color-secondary-70: #38000c;
  --color-secondary-80: #220007;
  --color-secondary-inverse: #ffffff;
  --color-secondary-background: #ffffff;
  --color-secondary-grey-100: #141414;
  --color-secondary-grey-80: rgba(0, 0, 0, 0.65);
  --color-secondary-grey-60: #b5b5b5;
  --color-secondary-grey-40: #e0e0e0;
  --color-secondary-grey-20: #f5f5f5;
  --color-sparkle-20: #e8faf7;
  --color-sparkle-30: #a7f6e9;
  --color-sparkle-40: #7aebd9;
  --color-sparkle-50: #1eccb0;
  --color-sparkle-60: #1e7b74;
  --color-sparkle-70: #0e5c4f;
  --color-sparkle-80: #08332c;
  --color-sparkle-inverse: #08332c;
  --color-sparkle-background: #ffffff;
  --color-sparkle-grey-100: #141414;
  --color-sparkle-grey-80: rgba(0, 0, 0, 0.65);
  --color-sparkle-grey-60: #b5b5b5;
  --color-sparkle-grey-40: #e0e0e0;
  --color-sparkle-grey-20: #f5f5f5;
  color: var(--color-primary-grey-100);
}
.theme--Crimson-Theme.theme--Crimson-Theme .data-mode-dark, .theme--Crimson-Theme.theme--Crimson-Theme [data-mode=dark], .theme--Crimson-Theme.theme--Crimson-Theme .data-mode-dark, .theme--Crimson-Theme.theme--Crimson-Theme [data-mode=dark] {
  --color-primary-20: #3a0611;
  --color-primary-30: #600a1c;
  --color-primary-40: #870f28;
  --color-primary-50: #c11539;
  --color-primary-60: #d45b74;
  --color-primary-70: #e396a6;
  --color-primary-80: #f3d0d7;
  --color-primary-inverse: #ffffff;
  --color-primary-background: #141414;
  --color-primary-grey-100: #ffffff;
  --color-primary-grey-80: rgba(255, 255, 255, 0.78);
  --color-primary-grey-60: #a1a1a1;
  --color-primary-grey-40: #5a5a5a;
  --color-primary-grey-20: #2b2b2b;
  --color-secondary-20: #3a0611;
  --color-secondary-30: #600a1c;
  --color-secondary-40: #870f28;
  --color-secondary-50: #c11539;
  --color-secondary-60: #d45b74;
  --color-secondary-70: #e396a6;
  --color-secondary-80: #f3d0d7;
  --color-secondary-inverse: #ffffff;
  --color-secondary-background: #141414;
  --color-secondary-grey-100: #ffffff;
  --color-secondary-grey-80: rgba(255, 255, 255, 0.78);
  --color-secondary-grey-60: #a1a1a1;
  --color-secondary-grey-40: #5a5a5a;
  --color-secondary-grey-20: #2b2b2b;
  --color-sparkle-20: #1a413b;
  --color-sparkle-30: #245a51;
  --color-sparkle-40: #348376;
  --color-sparkle-50: #58dac5;
  --color-sparkle-60: #8ae5d6;
  --color-sparkle-70: #b4eee5;
  --color-sparkle-80: #def8f3;
  --color-sparkle-inverse: #1a413b;
  --color-sparkle-background: #141414;
  --color-sparkle-grey-100: #ffffff;
  --color-sparkle-grey-80: rgba(255, 255, 255, 0.78);
  --color-sparkle-grey-60: #a1a1a1;
  --color-sparkle-grey-40: #5a5a5a;
  --color-sparkle-grey-20: #2b2b2b;
  color: var(--color-primary-grey-100);
}
.theme--Crimson-Theme.theme--Crimson-Theme .data-mode-bold, .theme--Crimson-Theme.theme--Crimson-Theme [data-mode=bold], .theme--Crimson-Theme.theme--Crimson-Theme .data-mode-bold, .theme--Crimson-Theme.theme--Crimson-Theme [data-mode=bold] {
  --color-primary-20: rgba(249, 139, 161, 0.2);
  --color-primary-30: rgba(249, 139, 161, 0.4);
  --color-primary-40: rgba(249, 139, 161, 0.6);
  --color-primary-50: #f98ba1;
  --color-primary-60: #fbc0cb;
  --color-primary-70: #fddae1;
  --color-primary-80: #feedf0;
  --color-primary-inverse: #4d0010;
  --color-primary-background: #aa0023;
  --color-primary-grey-100: #ffffff;
  --color-primary-grey-80: rgba(255, 255, 255, 0.78);
  --color-primary-grey-60: rgba(255, 255, 255, 0.53);
  --color-primary-grey-40: rgba(255, 255, 255, 0.31);
  --color-primary-grey-20: rgba(255, 255, 255, 0.12);
  --color-secondary-20: rgba(249, 139, 161, 0.2);
  --color-secondary-30: rgba(249, 139, 161, 0.4);
  --color-secondary-40: rgba(249, 139, 161, 0.6);
  --color-secondary-50: #f98ba1;
  --color-secondary-60: #fbb7c0;
  --color-secondary-70: #fdd2d8;
  --color-secondary-80: #feecef;
  --color-secondary-inverse: #38000c;
  --color-secondary-background: #700017;
  --color-secondary-grey-100: #ffffff;
  --color-secondary-grey-80: rgba(255, 255, 255, 0.78);
  --color-secondary-grey-60: rgba(255, 255, 255, 0.53);
  --color-secondary-grey-40: rgba(255, 255, 255, 0.31);
  --color-secondary-grey-20: rgba(255, 255, 255, 0.12);
  --color-sparkle-20: rgba(14, 92, 79, 0.2);
  --color-sparkle-30: rgba(14, 92, 79, 0.4);
  --color-sparkle-40: rgba(14, 92, 79, 0.6);
  --color-sparkle-50: #0e5c4f;
  --color-sparkle-60: #0a493f;
  --color-sparkle-70: #07362e;
  --color-sparkle-80: #052923;
  --color-sparkle-inverse: #e8faf7;
  --color-sparkle-background: #1eccb0;
  --color-sparkle-grey-100: #08332c;
  --color-sparkle-grey-80: rgba(8, 51, 44, 0.81);
  --color-sparkle-grey-60: rgba(8, 51, 44, 0.53);
  --color-sparkle-grey-40: rgba(8, 51, 44, 0.3);
  --color-sparkle-grey-20: rgba(8, 51, 44, 0.12);
  color: var(--color-primary-grey-100);
}

.theme--Purple-Theme.theme--Purple-Theme, .theme--Purple-Theme.theme--Purple-Theme .data-mode-light, .theme--Purple-Theme.theme--Purple-Theme [data-mode=light], .theme--Purple-Theme.theme--Purple-Theme .data-mode-light, .theme--Purple-Theme.theme--Purple-Theme [data-mode=light] {
  --color-primary-20: #f0e8fa;
  --color-primary-30: #cba2fa;
  --color-primary-40: #a680ff;
  --color-primary-50: #6d17ce;
  --color-primary-60: #3e0084;
  --color-primary-70: #310a5d;
  --color-primary-80: #1b0633;
  --color-primary-inverse: #ffffff;
  --color-primary-background: #ffffff;
  --color-primary-grey-100: #141414;
  --color-primary-grey-80: rgba(0, 0, 0, 0.65);
  --color-primary-grey-60: #b5b5b5;
  --color-primary-grey-40: #e0e0e0;
  --color-primary-grey-20: #f5f5f5;
  --color-secondary-20: #f0e8fa;
  --color-secondary-30: #cba2fa;
  --color-secondary-40: #6d17ce;
  --color-secondary-50: #3e0084;
  --color-secondary-60: #2b005c;
  --color-secondary-70: #1f0042;
  --color-secondary-80: #130028;
  --color-secondary-inverse: #ffffff;
  --color-secondary-background: #ffffff;
  --color-secondary-grey-100: #141414;
  --color-secondary-grey-80: rgba(0, 0, 0, 0.65);
  --color-secondary-grey-60: #b5b5b5;
  --color-secondary-grey-40: #e0e0e0;
  --color-secondary-grey-20: #f5f5f5;
  --color-sparkle-20: #e8faf7;
  --color-sparkle-30: #a7f6e9;
  --color-sparkle-40: #7aebd9;
  --color-sparkle-50: #1eccb0;
  --color-sparkle-60: #1e7b74;
  --color-sparkle-70: #0e5c4f;
  --color-sparkle-80: #08332c;
  --color-sparkle-inverse: #08332c;
  --color-sparkle-background: #ffffff;
  --color-sparkle-grey-100: #141414;
  --color-sparkle-grey-80: rgba(0, 0, 0, 0.65);
  --color-sparkle-grey-60: #b5b5b5;
  --color-sparkle-grey-40: #e0e0e0;
  --color-sparkle-grey-20: #f5f5f5;
  color: var(--color-primary-grey-100);
}
.theme--Purple-Theme.theme--Purple-Theme .data-mode-dark, .theme--Purple-Theme.theme--Purple-Theme [data-mode=dark], .theme--Purple-Theme.theme--Purple-Theme .data-mode-dark, .theme--Purple-Theme.theme--Purple-Theme [data-mode=dark] {
  --color-primary-20: #281240;
  --color-primary-30: #421f6b;
  --color-primary-40: #5d2b96;
  --color-primary-50: #853dd6;
  --color-primary-60: #aa77e2;
  --color-primary-70: #c8a8ed;
  --color-primary-80: #e7d8f7;
  --color-primary-inverse: #ffffff;
  --color-primary-background: #141414;
  --color-primary-grey-100: #ffffff;
  --color-primary-grey-80: rgba(255, 255, 255, 0.78);
  --color-primary-grey-60: #a1a1a1;
  --color-primary-grey-40: #5a5a5a;
  --color-primary-grey-20: #2b2b2b;
  --color-secondary-20: #281240;
  --color-secondary-30: #421f6b;
  --color-secondary-40: #5d2b96;
  --color-secondary-50: #853dd6;
  --color-secondary-60: #aa77e2;
  --color-secondary-70: #c8a8ed;
  --color-secondary-80: #e7d8f7;
  --color-secondary-inverse: #ffffff;
  --color-secondary-background: #141414;
  --color-secondary-grey-100: #ffffff;
  --color-secondary-grey-80: rgba(255, 255, 255, 0.78);
  --color-secondary-grey-60: #a1a1a1;
  --color-secondary-grey-40: #5a5a5a;
  --color-secondary-grey-20: #2b2b2b;
  --color-sparkle-20: #1a413b;
  --color-sparkle-30: #245a51;
  --color-sparkle-40: #348376;
  --color-sparkle-50: #58dac5;
  --color-sparkle-60: #8ae5d6;
  --color-sparkle-70: #b4eee5;
  --color-sparkle-80: #def8f3;
  --color-sparkle-inverse: #1a413b;
  --color-sparkle-background: #141414;
  --color-sparkle-grey-100: #ffffff;
  --color-sparkle-grey-80: rgba(255, 255, 255, 0.78);
  --color-sparkle-grey-60: #a1a1a1;
  --color-sparkle-grey-40: #5a5a5a;
  --color-sparkle-grey-20: #2b2b2b;
  color: var(--color-primary-grey-100);
}
.theme--Purple-Theme.theme--Purple-Theme .data-mode-bold, .theme--Purple-Theme.theme--Purple-Theme [data-mode=bold], .theme--Purple-Theme.theme--Purple-Theme .data-mode-bold, .theme--Purple-Theme.theme--Purple-Theme [data-mode=bold] {
  --color-primary-20: rgba(203, 162, 250, 0.2);
  --color-primary-30: rgba(203, 162, 250, 0.4);
  --color-primary-40: rgba(203, 162, 250, 0.6);
  --color-primary-50: #cba2fa;
  --color-primary-60: #dbbefb;
  --color-primary-70: #e4cffc;
  --color-primary-80: #ecddfd;
  --color-primary-inverse: #310a5d;
  --color-primary-background: #6d17ce;
  --color-primary-grey-100: #ffffff;
  --color-primary-grey-80: rgba(255, 255, 255, 0.78);
  --color-primary-grey-60: rgba(255, 255, 255, 0.53);
  --color-primary-grey-40: rgba(255, 255, 255, 0.31);
  --color-primary-grey-20: rgba(255, 255, 255, 0.12);
  --color-secondary-20: rgba(203, 162, 250, 0.2);
  --color-secondary-30: rgba(203, 162, 250, 0.4);
  --color-secondary-40: rgba(203, 162, 250, 0.6);
  --color-secondary-50: #cba2fa;
  --color-secondary-60: #e4cffc;
  --color-secondary-70: #eee1fd;
  --color-secondary-80: #fbf9ff;
  --color-secondary-inverse: #1f0042;
  --color-secondary-background: #3e0084;
  --color-secondary-grey-100: #ffffff;
  --color-secondary-grey-80: rgba(255, 255, 255, 0.78);
  --color-secondary-grey-60: rgba(255, 255, 255, 0.53);
  --color-secondary-grey-40: rgba(255, 255, 255, 0.31);
  --color-secondary-grey-20: rgba(255, 255, 255, 0.12);
  --color-sparkle-20: rgba(14, 92, 79, 0.2);
  --color-sparkle-30: rgba(14, 92, 79, 0.4);
  --color-sparkle-40: rgba(14, 92, 79, 0.6);
  --color-sparkle-50: #0e5c4f;
  --color-sparkle-60: #0a493f;
  --color-sparkle-70: #07362e;
  --color-sparkle-80: #052923;
  --color-sparkle-inverse: #e8faf7;
  --color-sparkle-background: #1eccb0;
  --color-sparkle-grey-100: #08332c;
  --color-sparkle-grey-80: rgba(8, 51, 44, 0.81);
  --color-sparkle-grey-60: rgba(8, 51, 44, 0.53);
  --color-sparkle-grey-40: rgba(8, 51, 44, 0.3);
  --color-sparkle-grey-20: rgba(8, 51, 44, 0.12);
  color: var(--color-primary-grey-100);
}

body,
html, .j-button {
  /* — */
  --radius-small: 4px;
  /* — */
  --radius-medium: 8px;
  /* — */
  --radius-large: 16px;
  /* — */
  --radius-xl: 24px;
  /* — */
  --radius-xxl: 32px;
  /* — */
  --radius-pill: 250px;
}

body,
html, .j-button {
  /* Smaller spacing unit. Useful between text elements or padding in small atoms. */
  --spacing-xxs: calc(var(--spacing-base) * 0.25);
  /* Role / Description */
  --spacing-xs: calc(var(--spacing-base) * 0.5);
  /* Role / Description */
  --spacing-s: calc(var(--spacing-base) * 0.75);
  /* Role / Description */
  --spacing-base: 1rem;
  /* Role / Description */
  --spacing-m: calc(var(--spacing-base) * 1.5);
  /* Role / Description */
  --spacing-l: calc(var(--spacing-base) * 2);
  /* Role / Description */
  --spacing-xl: calc(var(--spacing-base) * 2.5);
  /* Role / Description */
  --spacing-xxl: calc(var(--spacing-base) * 3);
  /* Role / Description */
  --spacing-huge: calc(var(--spacing-base) * 4);
  /* Role / Description */
  --spacing-massive: calc(var(--spacing-base) * 5);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--grid-gutter-width) * -0.5);
  margin-right: calc(var(--grid-gutter-width) * -0.5);
  margin-top: calc(var(--grid-gutter-height) * -1 );
}

.row > * {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100%;
  flex-shrink: 0;
  padding-left: calc(var(--grid-gutter-width) * 0.5);
  padding-right: calc(var(--grid-gutter-width) * 0.5);
  padding-top: var(--grid-gutter-height);
}

.row-cols-auto > * {
  flex: 0 0 auto !important;
  width: auto !important;
}

.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100% !important;
}

.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50% !important;
}

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.3333333333% !important;
}

.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25% !important;
}

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20% !important;
}

.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.6666666667% !important;
}

.row-cols-7 > * {
  flex: 0 0 auto;
  width: 14.2857142857% !important;
}

.row-cols-8 > * {
  flex: 0 0 auto;
  width: 12.5% !important;
}

.row-cols-9 > * {
  flex: 0 0 auto;
  width: 11.1111111111% !important;
}

.row-cols-10 > * {
  flex: 0 0 auto;
  width: 10% !important;
}

.row-cols-11 > * {
  flex: 0 0 auto;
  width: 9.0909090909% !important;
}

.row-cols-12 > * {
  flex: 0 0 auto;
  width: 8.3333333333% !important;
}

@media (max-width: 576px) {
  .row-cols-xs-1 > * {
    flex: 0 0 auto;
    width: 100% !important;
  }
  .row-cols-xs-2 > * {
    flex: 0 0 auto;
    width: 50% !important;
  }
  .row-cols-xs-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333% !important;
  }
  .row-cols-xs-4 > * {
    flex: 0 0 auto;
    width: 25% !important;
  }
  .row-cols-xs-5 > * {
    flex: 0 0 auto;
    width: 20% !important;
  }
  .row-cols-xs-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667% !important;
  }
  .row-cols-xs-7 > * {
    flex: 0 0 auto;
    width: 14.2857142857% !important;
  }
  .row-cols-xs-8 > * {
    flex: 0 0 auto;
    width: 12.5% !important;
  }
  .row-cols-xs-9 > * {
    flex: 0 0 auto;
    width: 11.1111111111% !important;
  }
  .row-cols-xs-10 > * {
    flex: 0 0 auto;
    width: 10% !important;
  }
  .row-cols-xs-11 > * {
    flex: 0 0 auto;
    width: 9.0909090909% !important;
  }
  .row-cols-xs-12 > * {
    flex: 0 0 auto;
    width: 8.3333333333% !important;
  }
}
@media (min-width: 576px) {
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100% !important;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50% !important;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333% !important;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25% !important;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20% !important;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667% !important;
  }
  .row-cols-sm-7 > * {
    flex: 0 0 auto;
    width: 14.2857142857% !important;
  }
  .row-cols-sm-8 > * {
    flex: 0 0 auto;
    width: 12.5% !important;
  }
  .row-cols-sm-9 > * {
    flex: 0 0 auto;
    width: 11.1111111111% !important;
  }
  .row-cols-sm-10 > * {
    flex: 0 0 auto;
    width: 10% !important;
  }
  .row-cols-sm-11 > * {
    flex: 0 0 auto;
    width: 9.0909090909% !important;
  }
  .row-cols-sm-12 > * {
    flex: 0 0 auto;
    width: 8.3333333333% !important;
  }
}
@media (min-width: 576px) and (max-width: 992px) {
  .row-cols-tablet-1 > * {
    flex: 0 0 auto;
    width: 100% !important;
  }
  .row-cols-tablet-2 > * {
    flex: 0 0 auto;
    width: 50% !important;
  }
  .row-cols-tablet-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333% !important;
  }
  .row-cols-tablet-4 > * {
    flex: 0 0 auto;
    width: 25% !important;
  }
  .row-cols-tablet-5 > * {
    flex: 0 0 auto;
    width: 20% !important;
  }
  .row-cols-tablet-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667% !important;
  }
  .row-cols-tablet-7 > * {
    flex: 0 0 auto;
    width: 14.2857142857% !important;
  }
  .row-cols-tablet-8 > * {
    flex: 0 0 auto;
    width: 12.5% !important;
  }
  .row-cols-tablet-9 > * {
    flex: 0 0 auto;
    width: 11.1111111111% !important;
  }
  .row-cols-tablet-10 > * {
    flex: 0 0 auto;
    width: 10% !important;
  }
  .row-cols-tablet-11 > * {
    flex: 0 0 auto;
    width: 9.0909090909% !important;
  }
  .row-cols-tablet-12 > * {
    flex: 0 0 auto;
    width: 8.3333333333% !important;
  }
}
@media (min-width: 768px) {
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100% !important;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50% !important;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333% !important;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25% !important;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20% !important;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667% !important;
  }
  .row-cols-md-7 > * {
    flex: 0 0 auto;
    width: 14.2857142857% !important;
  }
  .row-cols-md-8 > * {
    flex: 0 0 auto;
    width: 12.5% !important;
  }
  .row-cols-md-9 > * {
    flex: 0 0 auto;
    width: 11.1111111111% !important;
  }
  .row-cols-md-10 > * {
    flex: 0 0 auto;
    width: 10% !important;
  }
  .row-cols-md-11 > * {
    flex: 0 0 auto;
    width: 9.0909090909% !important;
  }
  .row-cols-md-12 > * {
    flex: 0 0 auto;
    width: 8.3333333333% !important;
  }
}
@media (min-width: 992px) {
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100% !important;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50% !important;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333% !important;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25% !important;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20% !important;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667% !important;
  }
  .row-cols-lg-7 > * {
    flex: 0 0 auto;
    width: 14.2857142857% !important;
  }
  .row-cols-lg-8 > * {
    flex: 0 0 auto;
    width: 12.5% !important;
  }
  .row-cols-lg-9 > * {
    flex: 0 0 auto;
    width: 11.1111111111% !important;
  }
  .row-cols-lg-10 > * {
    flex: 0 0 auto;
    width: 10% !important;
  }
  .row-cols-lg-11 > * {
    flex: 0 0 auto;
    width: 9.0909090909% !important;
  }
  .row-cols-lg-12 > * {
    flex: 0 0 auto;
    width: 8.3333333333% !important;
  }
}
@media (min-width: 1368px) {
  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100% !important;
  }
  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50% !important;
  }
  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333% !important;
  }
  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25% !important;
  }
  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20% !important;
  }
  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667% !important;
  }
  .row-cols-xl-7 > * {
    flex: 0 0 auto;
    width: 14.2857142857% !important;
  }
  .row-cols-xl-8 > * {
    flex: 0 0 auto;
    width: 12.5% !important;
  }
  .row-cols-xl-9 > * {
    flex: 0 0 auto;
    width: 11.1111111111% !important;
  }
  .row-cols-xl-10 > * {
    flex: 0 0 auto;
    width: 10% !important;
  }
  .row-cols-xl-11 > * {
    flex: 0 0 auto;
    width: 9.0909090909% !important;
  }
  .row-cols-xl-12 > * {
    flex: 0 0 auto;
    width: 8.3333333333% !important;
  }
}
@media (min-width: 1920px) {
  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100% !important;
  }
  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50% !important;
  }
  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333% !important;
  }
  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25% !important;
  }
  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20% !important;
  }
  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667% !important;
  }
  .row-cols-xxl-7 > * {
    flex: 0 0 auto;
    width: 14.2857142857% !important;
  }
  .row-cols-xxl-8 > * {
    flex: 0 0 auto;
    width: 12.5% !important;
  }
  .row-cols-xxl-9 > * {
    flex: 0 0 auto;
    width: 11.1111111111% !important;
  }
  .row-cols-xxl-10 > * {
    flex: 0 0 auto;
    width: 10% !important;
  }
  .row-cols-xxl-11 > * {
    flex: 0 0 auto;
    width: 9.0909090909% !important;
  }
  .row-cols-xxl-12 > * {
    flex: 0 0 auto;
    width: 8.3333333333% !important;
  }
}
.col-auto {
  flex: 0 0 auto;
  width: auto !important;
}

.col {
  flex: 1 0 0%;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.3333333333% !important;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.6666666667% !important;
}

.col-3 {
  flex: 0 0 auto;
  width: 25% !important;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.3333333333% !important;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.6666666667% !important;
}

.col-6 {
  flex: 0 0 auto;
  width: 50% !important;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.3333333333% !important;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.6666666667% !important;
}

.col-9 {
  flex: 0 0 auto;
  width: 75% !important;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.3333333333% !important;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.6666666667% !important;
}

.col-12 {
  flex: 0 0 auto;
  width: 100% !important;
}

@media (min-width: 576px) {
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.3333333333% !important;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.6666666667% !important;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25% !important;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.3333333333% !important;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.6666666667% !important;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50% !important;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.3333333333% !important;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.6666666667% !important;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75% !important;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.3333333333% !important;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.6666666667% !important;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100% !important;
  }
}
@media (min-width: 768px) {
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.3333333333% !important;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.6666666667% !important;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25% !important;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333% !important;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6666666667% !important;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50% !important;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333333333% !important;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6666666667% !important;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75% !important;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.3333333333% !important;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.6666666667% !important;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100% !important;
  }
}
@media (min-width: 992px) {
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.3333333333% !important;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.6666666667% !important;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25% !important;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333333333% !important;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6666666667% !important;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50% !important;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333333333% !important;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.6666666667% !important;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75% !important;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.3333333333% !important;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.6666666667% !important;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100% !important;
  }
}
@media (min-width: 1368px) {
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.3333333333% !important;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.6666666667% !important;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25% !important;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.3333333333% !important;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.6666666667% !important;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50% !important;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.3333333333% !important;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.6666666667% !important;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75% !important;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.3333333333% !important;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.6666666667% !important;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100% !important;
  }
}
@media (min-width: 1920px) {
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.3333333333% !important;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.6666666667% !important;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25% !important;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.3333333333% !important;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.6666666667% !important;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50% !important;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.3333333333% !important;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.6666666667% !important;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75% !important;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.3333333333% !important;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.6666666667% !important;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100% !important;
  }
}
body,
html, .j-button {
  /* used primarily for interactions */
  --transitions-duration-rapid: 300ms;
  /* Used for longer interactions and more passive elements.   Also set as default ease  */
  --transitions-duration-medium: 500ms;
  /* Used  for complex animation */
  --transitions-duration-slow: 1000ms;
}

body,
html, .j-button {
  /* Interactive curve. Used primary in subtle  passive animations, when the user is viewing but not interacting with the interface. */
  --transitions-ease-rapid: cubic-bezier(0.35, 0, 0.5, 1);
  /* Interactive curve. Used primarily for interactions where it instantly moves based off the user’s interaction . */
  --transitions-ease-quick: cubic-bezier(0.35, 0, 0.25, 1);
  /* Interactive curve. Similar to quick curve, it adds an additional overshoot (bounce) giving more life to the motion. It is primarily in instances of progression. */
  --transitions-ease-joyful: cubic-bezier(0.35, 1.3, 0.3, 1);
  /* Used for elements and events which brings a new item into the screen */
  --transitions-ease-entrance: cubic-bezier(0, 0, 0.1, 1);
  /* Used for elements and events which an item exits the screen */
  --transitions-ease-exit: cubic-bezier(0.35, 0, 0.8, 1);
  /* Used for elements and events primarily which call attention when they enter the screen  */
  --transitions-ease-joyfulentrance: cubic-bezier(0.15, 1.3, 0.3, 1);
  /* Used for elements and events primarily which call attention when they exit the screen  */
  --transitions-ease-joyfulexit: cubic-bezier(0.7, -0.1, 0.6, 0.1);
}

.text-area {
  height: 70px;
  width: 250px;
  border-radius: 10px;
  border: 2px solid rgb(73, 73, 240);
  resize: none;
  outline: none;
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 500;
  text-transform: none;
  font-size: 1rem;
  letter-spacing: -0.08px;
  line-height: 1.5;
}

.j-text-area {
  border: none;
  border-bottom: 2px solid var(--color-primary-grey-80);
  outline: none;
  resize: vertical;
  padding-bottom: calc(var(--spacing-xs) + 1px);
  margin-bottom: 1px;
  width: 100%;
  transition-duration: var(--transitions-duration-rapid);
  transition-timing-function: var(--transitions-ease-quick);
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 500;
  text-transform: none;
  font-size: 1rem;
  letter-spacing: -0.08px;
  line-height: 1.5;
}
.j-text-area:hover {
  border-bottom: 2px solid var(--color-primary-50);
}
.j-text-area:focus {
  border-bottom: 2px solid var(--color-primary-60);
}

.text-field {
  height: 28px;
  width: 250px;
  border-radius: 14px;
  border: 2px solid rgb(73, 73, 240);
  outline: none;
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 500;
  text-transform: none;
  font-size: 1rem;
  letter-spacing: -0.08px;
  line-height: 1.5;
}

.j-text-field {
  border: none;
  border-bottom: 2px solid var(--color-primary-grey-80);
  outline: none;
  padding-bottom: calc(var(--spacing-xs) + 1px);
  margin-bottom: 1px;
  width: 100%;
  transition-duration: var(--transitions-duration-rapid);
  transition-timing-function: var(--transitions-ease-quick);
  font-family: "JioType", helvetica, arial, sans-serif;
  font-weight: 500;
  text-transform: none;
  font-size: 1rem;
  letter-spacing: -0.08px;
  line-height: 1.5;
}
.j-text-field:hover {
  border-bottom: 2px solid var(--color-primary-50);
}
.j-text-field:focus {
  border-bottom: 2px solid var(--color-primary-60);
}

body,
html, .j-button {
  /* Smaller spacing unit. Useful between text elements or padding in small atoms. */
  --spacing-xxs: calc(var(--spacing-base) * 0.25);
  /* Role / Description */
  --spacing-xs: calc(var(--spacing-base) * 0.5);
  /* Role / Description */
  --spacing-s: calc(var(--spacing-base) * 0.75);
  /* Role / Description */
  --spacing-base: 1rem;
  /* Role / Description */
  --spacing-m: calc(var(--spacing-base) * 1.5);
  /* Role / Description */
  --spacing-l: calc(var(--spacing-base) * 2);
  /* Role / Description */
  --spacing-xl: calc(var(--spacing-base) * 2.5);
  /* Role / Description */
  --spacing-xxl: calc(var(--spacing-base) * 3);
  /* Role / Description */
  --spacing-huge: calc(var(--spacing-base) * 4);
  /* Role / Description */
  --spacing-massive: calc(var(--spacing-base) * 5);
}

body,
html, .j-button {
  --border-radius-button: var(--radius-pill);
  --button-height: 3em;
  --button-height-small: 2em;
  --button-height-large: 3.5em;
  --button-border-width: 1px;
  --icon-small-size: 1em;
  --icon-medium-size: 1.5em;
}

.j-button {
  position: relative;
  outline: none;
  text-align: center;
  cursor: pointer;
  margin: 0;
  box-sizing: border-box;
  min-width: var(--spacing-xl);
  border-width: var(--button-border-width);
  border-style: solid;
  background-color: var(--color-primary-50);
  border-color: transparent;
  color: #ffffff;
  padding: var(--spacing-xs) var(--spacing-l);
  border-radius: var(--radius-small);
  vertical-align: top;
  display: inline-flex;
  align-items: center;
  justify-content: space-evenly;
  min-height: var(--button-height-small);
}
.j-button:hover {
  background-color: var(--color-primary-60);
}
.j-button--type-1 {
  padding: var(--spacing-xs) var(--spacing-massive);
}
.j-button--type-1:hover {
  background-color: var(--color-primary-60);
}
.j-button--type-1:active {
  color: var(--color-primary-30);
}
.j-button--type-2 {
  padding: var(--spacing-xs) var(--spacing-xxl);
}
.j-button--type-2:hover {
  background-color: var(--color-primary-60);
}
.j-button--type-2:active {
  color: var(--color-primary-30);
}
.j-button--type-icon-only {
  padding: var(--spacing-xs);
}
.j-button--type-icon-only:hover {
  background-color: var(--color-primary-60);
}

body,
html, .j-button {
  --backdrop-filter: blur(5px) contrast(0.8);
  --aspect-ratio-wide: 16/9;
  --aspect-ratio-landscape: 4/3;
  --aspect-ratio-square: 1;
  --aspect-ratio-portrait: 4/5;
  --shadow-s: 0px 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-m: 0px 4px 16px rgba(0, 0, 0, 0.16);
  --shadow-l: 0px 4px 16px rgba(0, 0, 0, 0.24);
  --elevation-10: 10;
  --elevation-20: 20;
  --elevation-30: 30;
  --elevation-40: 40;
  --elevation-50: 50;
  --elevation-60: 60;
  --elevation-70: 70;
  --surfaces-soft--bg: rgba(89, 89, 89, 0.5);
  --surfaces-soft--filter: blur(24px);
  --surfaces-heavy--bg: rgba(89, 89, 89, 0.5);
  --surfaces-heavy--filter: blur(64px);
  --surfaces-overlay--bg: rgba(20, 20, 20, 0.4);
  --surfaces-overlay--filter: none;
  --surfaces-blurred-bg--bg: rgba(20, 20, 20, 0.8);
  --surfaces-blurred-bg--filter: blur(24px);
}

#tvguide .j-button:hover {
  background-color: var(--button-background);
}

.json-string {
  color: red !important;
}

.json-number {
  color: green !important;
}

.json-key {
  color: blue !important;
}

.json-boolean {
  color: darkorange !important;
}

.json-array {
  color: purple !important;
}

/*# sourceMappingURL=styles.css.map*/