html,
body {
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

  /* Theme Color Variables */
  --color-primary-main:#3d71ff;
  --color-primary-dark:#2546a1;
  --color-primary-light:#b1c6ff;
  --color-primary-contrast-text:#ffffff;
  --color-primary-gradient:linear-gradient(180deg, #6f96ff 0%, #5267f5 100%);
  --color-primary-8p:rgba(61, 113, 255, 0.08);

  --color-secondary-main:#8e58ff;
  --color-secondary-dark:#5b35ac;
  --color-secondary-light:#d2bcff;
  --color-secondary-contrast-text:#ffffff;

  --color-error-main:#fc494c;
  --color-error-dark:#a32c2e;
  --color-error-light:#feb6b7;
  --color-error-contrast-text:#ffffff;

  --color-warning-main:#ffad0d;
  --color-warning-dark:#996808;
  --color-warning-light:#ffde9e;
  --color-warning-contrast-text:#ffffff;

  --color-info-main:#009dca;
  --color-info-dark:#005e79;
  --color-info-light:#92d6ea;
  --color-info-contrast-text:#ffffff;

  --color-success-main:#47b881;
  --color-success-dark:#2b6e4d;
  --color-success-light:#b5e3cd;
  --color-success-contrast-text:#ffffff;

  --text-primary-light:#6a737c;
  --text-secondary-light:#757575;

  --background-paper-light:#ffffff;
  --background-default-light:#f5f9fd;

  --text-primary-dark:#ffffff;
  --text-secondary-dark:#ffffff;

  --background-paper-dark:#060606;
  --background-default-dark:#1f1f1f;

  --shadow-l1: 0px 6px 2px rgba(56, 107, 246, 0.01),
    0px 3px 2px rgba(56, 107, 246, 0.02), 0px 2px 2px rgba(56, 107, 246, 0.03),
    0px 0px 1px rgba(56, 107, 246, 0.03), 0px 0px 0px rgba(56, 107, 246, 0.04);
  --shadow-l2: 0px 33px 13px rgba(56, 107, 246, 0.01),
    0px 19px 11px rgba(56, 107, 246, 0.03), 0px 8px 8px rgba(56, 107, 246, 0.05),
    0px 2px 5px rgba(56, 107, 246, 0.06), 0px 0px 0px rgba(56, 107, 246, 0.06);
  --shadow-l3: 0px -2px 16px rgba(56, 107, 246, 0.06),
    0px 33px 13px rgba(56, 107, 246, 0.01),
    0px 19px 11px rgba(56, 107, 246, 0.03), 0px 8px 8px rgba(56, 107, 246, 0.05),
    0px 2px 5px rgba(56, 107, 246, 0.06), 0px 0px 0px rgba(56, 107, 246, 0.06);
  --shadow-l4: 0px 11px 15px -7px rgba(0, 0, 0, 0.1),
    0px 24px 38px 3px rgba(0, 0, 0, 0.07), 0px 9px 46px 8px rgba(0, 0, 0, 0.06);
  --shadow-l5: 0px 21px 9px rgba(57, 102, 248, 0.03),
    0px 12px 7px rgba(57, 102, 248, 0.11), 0px 5px 5px rgba(57, 102, 248, 0.19),
    0px 1px 3px rgba(57, 102, 248, 0.22), 0px 0px 0px rgba(57, 102, 248, 0.23);
  --shadow-l6: 0px 102px 41px rgba(57, 102, 248, 0.01),
    0px 57px 34px rgba(57, 102, 248, 0.03),
    0px 25px 25px rgba(57, 102, 248, 0.05),
    0px 6px 14px rgba(57, 102, 248, 0.06), 0px 0px 0px rgba(57, 102, 248, 0.06);
  --shadow-l7: 0px 102px 41px rgba(17, 46, 74, 0.02),
    0px 57px 34px rgba(17, 46, 74, 0.08), 0px 25px 25px rgba(17, 46, 74, 0.13),
    0px 6px 14px rgba(17, 46, 74, 0.15), 0px 0px 0px rgba(17, 46, 74, 0.15);
  
  --color-purple: #9013FE;
  --color-green: #3CD4A0;
  --color-green-100: #3ABB69;
  --color-darkenGreen: #78909c;
  --color-red: #FF5992;
  --color-yellow: #FFC35F;
  --color-grey: #E4E5E6;
  --color-blue: #536DFE;
  --color-text-primary: #576370;
  --color-blue-100: #27C6DA;
  --color-blue-200: #09A9F3;
  --color-blue-300: #3966F8;
  --color-blue-400: #00579B;
  --color-blue-transparent: rgba(57, 102, 248, 0.04);
  --color-grey-transparent: rgba(87, 99, 112, .6);
  --color-violet: #ADA9F9;
  --color-earth: #B9AD97;
  --color-orange: #FFAC71;

  /* Followup Tags Color */
  --color-followup-red:rgba(255, 89, 146, 0.2);
  --color-followup-yellow:rgba(255, 195, 95, 0.2);
  --color-followup-green:rgba(60, 212, 160, 0.2);

  /* VIP Tags Color */
  --color-vip-yellow:rgba(255, 195, 95, 0.2);
  --color-vip-blue:rgba(83, 109, 254, 0.2);

  /* Turorial Border Color */
  --color-turorail-border-purple: rgba(144, 19, 254, 0.5);
  --color-turorail-background-purple: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0.9)
    ),
    var(--color-purple);

  /* Tags, TODO: export from Figma */
  --color-tag-red-200: #ff5992;
  --color-tag-yellow-200: #ffc35f;
  --color-tag-green-200: #3cd4a0;
  --color-tag-blue-200: #536dfe;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;

  --breakpoint-xs: 0;
  --breakpoint-xs-px: 0px;
  --breakpoint-sm: 600;
  --breakpoint-sm-px: 600px;
  --breakpoint-md: 900;
  --breakpoint-md-px: 900px;
  --breakpoint-lg: 1200;
  --breakpoint-lg-px: 1200px;
  --breakpoint-xl: 1536;
  --breakpoint-xl-px: 1536px;

  --biz-page-blue-1:#5099f1;
  --biz-page-blue-2:#92bef6;
  --biz-page-blue-3:#7fb5f5;
  --biz-page-blue-4:#97e9f9;
  --biz-page-blue-5:#69cbfa;
  --biz-page-blue-6:#3342a2;
  --biz-page-blue-background:linear-gradient(
    228.35deg,
    #85d3fb 1.01%,
    #f1faff 71.66%
  );

  --biz-page-orange-1:#f08e4c;
  --biz-page-orange-2:#f3c590;
  --biz-page-orange-3:#f4b26b;
  --biz-page-orange-4:#fc9b65;
  --biz-page-orange-5:#f3c590;
  --biz-page-orange-6:#df933b;
  --biz-page-orange-background:linear-gradient(
    228.35deg,
    #ffe0bb 1.01%,
    #fff8f0 71.66%
  );

  --biz-page-violet-1:#5659b8;
  --biz-page-violet-2:#aea8ff;
  --biz-page-violet-3:#002378;
  --biz-page-violet-4:#d6ceff;
  --biz-page-violet-5:#9c98ff;
  --biz-page-violet-6:#6654c7;
  --biz-page-violet-background:linear-gradient(
    228.35deg,
    #c4b6ed 1.01%,
    #f6f6f6 71.66%
  );

  --biz-page-green-1:#13ba65;
  --biz-page-green-2:#b3dfbd;
  --biz-page-green-3:#0aa050;
  --biz-page-green-4:#ade3ba;
  --biz-page-green-5:#4c9f4c;
  --biz-page-green-6:#1ea858;
  --biz-page-green-background:linear-gradient(228.35deg,#c1efcb 1.01%,#c1efcb 1.02%,#f3fff3 71.66%);

  --biz-page-earth-1:#e0c2a5;
  --biz-page-earth-2:#b3977b;
  --biz-page-earth-3:#886e53;
  --biz-page-earth-4:#5e472f;
  --biz-page-earth-5:#4d3820;
  --biz-page-earth-6:#937c65;
  --biz-page-earth-background:linear-gradient(
    228.35deg,
    #efe2cd 1.01%,
    #f4f2ef 71.66%
  );
}

#root {
  height: 100%;
  width: 100%;
}

.swiper-slide:not(.swiper-slide-active) {
  filter: blur(4px);
}

.swiper-slide:not(.swiper-slide-visible) {
  visibility: hidden;
}

.swiper-button-prev {
  color: var(--color-primary-main);
  cursor: pointer;
}

.swiper-button-next {
  color: var(--color-primary-main);
  cursor: pointer;
}