:root {
  --primary: #ff1017;
  --primary-0: #180e0d;
  --primary-10: #211311;
  --primary-20: #3f0f0b;
  --primary-30: #580002;
  --primary-40: #690406;
  --primary-50: #7b1613;
  --primary-60: #952821;
  --primary-70: #c1352d;
  --primary-80: #fb1119;
  --primary-90: #bb0000;
  --primary-95: #ff9082;
  --primary-98: #ffcfc7;
  --primary-100: #ffffff;
  --secondary: #808080;
  --secondary-0: #111113;
  --secondary-10: #19191b;
  --secondary-20: #222325;
  --secondary-30: #292a2d;
  --secondary-40: #303135;
  --secondary-50: #3a3a3f;
  --secondary-60: #47484e;
  --secondary-70: #47484e;
  --secondary-80: #62636c;
  --secondary-90: #54555e;
  --secondary-95: #b2b3bc;
  --secondary-98: #eeeef0;
  --secondary-100: #ffffff;
  --tertiary: #006496;
  --tertiary-0: #000000;
  --tertiary-10: #00080d;
  --tertiary-20: #001119;
  --tertiary-30: #001926;
  --tertiary-40: #00324b;
  --tertiary-50: #00547e;
  --tertiary-60: #006496;
  --tertiary-70: #008bd3;
  --tertiary-80: #00a1f0;
  --tertiary-90: #00b4ff;
  --tertiary-95: #00c7ff;
  --tertiary-98: #00ddff;
  --tertiary-100: #ffffff;
  --error: #cc0000;
  --error-0: #000000;
  --error-10: #110000;
  --error-20: #220000;
  --error-30: #330000;
  --error-40: #660000;
  --error-50: #aa0000;
  --error-60: #cc0000;
  --error-70: #ff0000;
  --error-80: #ff0000;
  --error-90: #ff0000;
  --error-95: #ff0000;
  --error-98: #ff0000;
  --error-100: #ffffff;
  --success: #007e33;
  --success-0: #000000;
  --success-10: #000b04;
  --success-20: #001509;
  --success-30: #00200d;
  --success-40: #003f1a;
  --success-50: #006a2a;
  --success-60: #007e34;
  --success-70: #00b248;
  --success-80: #00ca52;
  --success-90: #00e45b;
  --success-95: #00fc67;
  --success-98: #00ff71;
  --success-100: #ffffff;
  --info: #0099cc;
  --info-0: #000000;
  --info-10: #000d11;
  --info-20: #001a22;
  --info-30: #002633;
  --info-40: #004d66;
  --info-50: #0080aa;
  --info-60: #009acc;
  --info-70: #00d6ff;
  --info-80: #00f5ff;
  --info-90: #00ffff;
  --info-95: #00ffff;
  --info-98: #00ffff;
  --info-100: #ffffff;
  --warning: #ff8800;
  --warning-0: #000000;
  --warning-10: #150b00;
  --warning-20: #2b1700;
  --warning-30: #402200;
  --warning-40: #804400;
  --warning-50: #d47200;
  --warning-60: #ff8800;
  --warning-70: #ffbe00;
  --warning-80: #ffda00;
  --warning-90: #fff500;
  --warning-95: #ffff00;
  --warning-98: #ffff00;
  --warning-100: #ffffff;
}

:root {
  --font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
  	Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --secondary-font-family: "Roboto", sans-serif;
  --title-font: "Inter", sans-serif;
  --brand-font: "Raleway", sans-serif;
  --border-primary: 10px;
  --border-secondary: 8px;
  --border-tertiary: 5px;
  --border-radius-base: 1rem;
  --red: #f44336;
  --green: #4caf50;
  /* neutral */
  --neutral-4: #0f0d13;
  --neutral-6: #141218;
  --neutral-10: #1c1b1f;
  --neutral-12: #2b2930;
  --neutral-17: #2b2930;
  --neutral-20: #1c1b1f;
  --neutral-22: #36343b;
  --neutral-24: #3b383e;
  --neutral-25: #393c3a;
  --neutral-30: #444846;
  --neutral-35: #505351;
  --neutral-40: #5c5f5d;
  --neutral-50: #747875;
  --neutral-60: #8e918f;
  --neutral-70: #a9aca9;
  --neutral-80: #c4c7c4;
  --neutral-87: #ded8e1;
  --neutral-90: #e1e3e0;
  --neutral-94: #f3edf7;
  --neutral-92: #ece6f0;
  --neutral-94: #f3edf7;
  --neutral-95: #eff1ee;
  --neutral-96: #f7f2fa;
  --neutral-98: #fef7ff;
  --neutral-99: #fbfdfa;
  --neutral-100: #ffffff;
  /* --neutral-variant */
  --neutral-variant: #000000;
  --neutral-variant-10: #141d1a;
  --neutral-variant-20: #29322f;
  --neutral-variant-25: #343d3a;
  --neutral-variant-30: #3f4945;
  --neutral-variant-35: #4b5550;
  --neutral-variant-40: #57605c;
  --neutral-variant-50: #6f7975;
  --neutral-variant-60: #89938e;
  --neutral-variant-70: #a3ada8;
  --neutral-variant-80: #bfc9c3;
  --neutral-variant-90: #dbe5df;
  --neutral-variant-95: #e9f3ed;
  --neutral-variant-98: #f2fcf6;
  --neutral-variant-99: #f5fff9;
  --neutral-variant-100: #ffffff;
  --text-color: hsl(0, 0%, 10%);
  --primary: #ff1017;
  --primary-container: #690406;
  --on-primary: #fff;
  --on-primary-container: #bdbdbd;
  --inverse-primary: #bbdefb;
  --secondary: #808080;
  --secondary-container: #ffcdd2;
  --on-secondary: #fff;
  --on-secondary-container: #b71c1c;
  --tertiary: #1b5e20;
  --tertiary-container: #c8e6c9;
  --on-tertiary: #1b5e20;
  --on-tertiary-container: #1b5e20;
  --surface: #fafafa;
  --surface-dim: #eeeeee;
  --surface-bright: #e0e0e0;
  --surface-container-lowest: #bdbdbd;
  --surface-container-low: #9e9e9e;
  --surface-container: #757575;
  --surface-container-high: #616161;
  --surface-container-highest: #424242;
  --surface-variant: #eaeaea;
  --on-surface: #212121;
  --on-surface-variant: #757575;
  --inverse-surface: #757575;
  --inverse-on-surface: #bdbdbd;
  --background: hsl(210, 40%, 96%);
  --on-background: #212121;
  --outline: #e4e4e4;
  --outline-variant: #e0e0e0;
  --shadow: #000;
  --box-shadow-pui: 0px 3px 8px var(--shadow);
  --surface-tint-color: var(--primary);
  --scrim: #000;
  --box-shadow: 0px 2px 8px #58585833;
  --on-info: #fff;
  --info: hsla(211, 88%, 53%, 1);
  --success: #007e33;
  --on-success: #fff;
  --primary-shadow: 0px 2px 8px #58585833;
  --secondary-shadow: -5px 12px 2px 3px #58585833;
  --modal-background-color: rgba(0, 0, 0, 0.5);
  --error: #b71c1c;
  --on-error: #fff;
  --warning: #fcc678;
  --on-warning: #955c0a;
}
@media (prefers-color-scheme: light) {
  :root {
    --text-color: hsl(0, 0%, 10%);
    --primary: #ff1017;
    --primary-container: #690406;
    --on-primary: #fff;
    --on-primary-container: #bdbdbd;
    --inverse-primary: #bbdefb;
    --secondary: #808080;
    --secondary-container: #ffcdd2;
    --on-secondary: #fff;
    --on-secondary-container: #b71c1c;
    --tertiary: #1b5e20;
    --tertiary-container: #c8e6c9;
    --on-tertiary: #1b5e20;
    --on-tertiary-container: #1b5e20;
    --surface: #fafafa;
    --surface-dim: #eeeeee;
    --surface-bright: #e0e0e0;
    --surface-container-lowest: #bdbdbd;
    --surface-container-low: #9e9e9e;
    --surface-container: #757575;
    --surface-container-high: #616161;
    --surface-container-highest: #424242;
    --surface-variant: #eaeaea;
    --on-surface: #212121;
    --on-surface-variant: #757575;
    --inverse-surface: #757575;
    --inverse-on-surface: #bdbdbd;
    --background: hsl(210, 40%, 96%);
    --on-background: #212121;
    --outline: #e4e4e4;
    --outline-variant: #e0e0e0;
    --shadow: #000;
    --box-shadow-pui: 0px 3px 8px var(--shadow);
    --surface-tint-color: var(--primary);
    --scrim: #000;
    --box-shadow: 0px 2px 8px #58585833;
    --on-info: #fff;
    --info: hsla(211, 88%, 53%, 1);
    --success: #007e33;
    --on-success: #fff;
    --primary-shadow: 0px 2px 8px #58585833;
    --secondary-shadow: -5px 12px 2px 3px #58585833;
    --modal-background-color: rgba(0, 0, 0, 0.5);
    --error: #b71c1c;
    --on-error: #fff;
    --warning: #fcc678;
    --on-warning: #955c0a;
  }
}

html[data-beyond-mode=light] {
  --text-color: hsl(0, 0%, 10%);
  --primary: #ff1017;
  --primary-container: #690406;
  --on-primary: #fff;
  --on-primary-container: #bdbdbd;
  --inverse-primary: #bbdefb;
  --secondary: #808080;
  --secondary-container: #ffcdd2;
  --on-secondary: #fff;
  --on-secondary-container: #b71c1c;
  --tertiary: #1b5e20;
  --tertiary-container: #c8e6c9;
  --on-tertiary: #1b5e20;
  --on-tertiary-container: #1b5e20;
  --surface: #fafafa;
  --surface-dim: #eeeeee;
  --surface-bright: #e0e0e0;
  --surface-container-lowest: #bdbdbd;
  --surface-container-low: #9e9e9e;
  --surface-container: #757575;
  --surface-container-high: #616161;
  --surface-container-highest: #424242;
  --surface-variant: #eaeaea;
  --on-surface: #212121;
  --on-surface-variant: #757575;
  --inverse-surface: #757575;
  --inverse-on-surface: #bdbdbd;
  --background: hsl(210, 40%, 96%);
  --on-background: #212121;
  --outline: #e4e4e4;
  --outline-variant: #e0e0e0;
  --shadow: #000;
  --box-shadow-pui: 0px 3px 8px var(--shadow);
  --surface-tint-color: var(--primary);
  --scrim: #000;
  --box-shadow: 0px 2px 8px #58585833;
  --on-info: #fff;
  --info: hsla(211, 88%, 53%, 1);
  --success: #007e33;
  --on-success: #fff;
  --primary-shadow: 0px 2px 8px #58585833;
  --secondary-shadow: -5px 12px 2px 3px #58585833;
  --modal-background-color: rgba(0, 0, 0, 0.5);
  --error: #b71c1c;
  --on-error: #fff;
  --warning: #fcc678;
  --on-warning: #955c0a;
}

html[data-beyond-mode=dark] {
  --text-color: #fff;
  --primary: #ff1017;
  --primary-container: #690406;
  --on-primary: #fff;
  --on-primary-container: var(--primary-90);
  --inverse-primary: var(--primary-40);
  --secondary: #808080;
  --secondary-container: var(--secondary-30);
  --on-secondary: #fff;
  --on-secondary-container: var(--secondary-90);
  --tertiary: var(--tertiary-80);
  --tertiary-container: var(--tertiary-30);
  --on-tertiary: var(--tertiary-20);
  --on-tertiary-container: var(--tertiary-90);
  --surface: #1b1b1b;
  --surface-dim: var(--neutral-6);
  --surface-bright: var(--neutral-25);
  --surface-container-lowest: var(--neutral-4);
  --surface-container-low: var(--neutral-10);
  --surface-container: var(--neutral-12);
  --surface-container-high: var(--neutral-20);
  --surface-container-highest: var(--neutral-22);
  --surface-variant: #262626;
  --on-surface: var(--neutral-90);
  --on-surface-variant: var(--neutral-variant-80);
  --inverse-surface: var(--neutral-90);
  --inverse-on-surface: var(--neutral-20);
  --background: var(--neutral-6);
  --on-background: var(--neutral-90);
  --error: var(--error-80);
  --error-container: var(--error-30);
  --on-error: var(--error-20);
  --on-error-container: var(--error-90);
  --outline: var(--neutral-variant-60);
  --outline-variant: var(--neutral-variant-30);
  --shadow: var(--neutral-0);
  --box-shadow-pui: 0px 3px 8px var(--shadow);
  --surface-tint-color: var(--md.sys.color.primary);
  --scrim: var(--neutral-0);
  --box-shadow: 0px 3px 8px #00000066;
  --on-info: #fff;
  --info: hsla(211, 88%, 53%, 1);
  --success: #007e33;
  --on-success: #fff;
  --primary-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --secondary-shadow: -5px 12px 2px 3px #58585833;
  --modal-background-color: rgba(0, 0, 0, 0.5);
}
:root {
  --primary: #ff1017;
  --primary-0: #180e0d;
  --primary-10: #211311;
  --primary-20: #3f0f0b;
  --primary-30: #580002;
  --primary-40: #690406;
  --primary-50: #7b1613;
  --primary-60: #952821;
  --primary-70: #c1352d;
  --primary-80: #fb1119;
  --primary-90: #bb0000;
  --primary-95: #ff9082;
  --primary-98: #ffcfc7;
  --primary-100: #ffffff;
  --secondary: #808080;
  --secondary-0: #111113;
  --secondary-10: #19191b;
  --secondary-20: #222325;
  --secondary-30: #292a2d;
  --secondary-40: #303135;
  --secondary-50: #3a3a3f;
  --secondary-60: #47484e;
  --secondary-70: #47484e;
  --secondary-80: #62636c;
  --secondary-90: #54555e;
  --secondary-95: #b2b3bc;
  --secondary-98: #eeeef0;
  --secondary-100: #ffffff;
  --tertiary: #006496;
  --tertiary-0: #000000;
  --tertiary-10: #00080d;
  --tertiary-20: #001119;
  --tertiary-30: #001926;
  --tertiary-40: #00324b;
  --tertiary-50: #00547e;
  --tertiary-60: #006496;
  --tertiary-70: #008bd3;
  --tertiary-80: #00a1f0;
  --tertiary-90: #00b4ff;
  --tertiary-95: #00c7ff;
  --tertiary-98: #00ddff;
  --tertiary-100: #ffffff;
  --error: #cc0000;
  --error-0: #000000;
  --error-10: #110000;
  --error-20: #220000;
  --error-30: #330000;
  --error-40: #660000;
  --error-50: #aa0000;
  --error-60: #cc0000;
  --error-70: #ff0000;
  --error-80: #ff0000;
  --error-90: #ff0000;
  --error-95: #ff0000;
  --error-98: #ff0000;
  --error-100: #ffffff;
  --success: #007e33;
  --success-0: #000000;
  --success-10: #000b04;
  --success-20: #001509;
  --success-30: #00200d;
  --success-40: #003f1a;
  --success-50: #006a2a;
  --success-60: #007e34;
  --success-70: #00b248;
  --success-80: #00ca52;
  --success-90: #00e45b;
  --success-95: #00fc67;
  --success-98: #00ff71;
  --success-100: #ffffff;
  --info: #0099cc;
  --info-0: #000000;
  --info-10: #000d11;
  --info-20: #001a22;
  --info-30: #002633;
  --info-40: #004d66;
  --info-50: #0080aa;
  --info-60: #009acc;
  --info-70: #00d6ff;
  --info-80: #00f5ff;
  --info-90: #00ffff;
  --info-95: #00ffff;
  --info-98: #00ffff;
  --info-100: #ffffff;
  --warning: #ff8800;
  --warning-0: #000000;
  --warning-10: #150b00;
  --warning-20: #2b1700;
  --warning-30: #402200;
  --warning-40: #804400;
  --warning-50: #d47200;
  --warning-60: #ff8800;
  --warning-70: #ffbe00;
  --warning-80: #ffda00;
  --warning-90: #fff500;
  --warning-95: #ffff00;
  --warning-98: #ffff00;
  --warning-100: #ffffff;
}
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,600;0,800;1,100;1,300;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Merriweather&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");
:root {
  --gray-base: #000000;
  --gray-darker: #333333;
  --gray-dark: #4e5256;
  --gray: #82837f;
  --gray-variant: #979797;
  --gray-light: #d8d8d8;
  --gray-lighter: #f9f9f9;
  --background: var(--gray-lighter);
  --text-color: var(--gray-darker);
  --element-bg: #fff;
  --border: #dddddd;
  --border-variant: #e1e5ef;
  --text: #fff;
  --success: #22bb33;
  --warning: #f7c700;
  --error: #f04141;
  --info: hsla(211, 88%, 53%, 1);
  --chat-online: #43fc22;
  --preload-bg: var(--secondary);
  --main-color: hsla(211, 88%, 53%, 1);
  --text-grey: #707070;
  --text-gray-light: #757575;
  --border-secondary: 8px;
  --body-bg: #f5f8ff;
  --box-bg: #fff;
  --input-bg: #f5f8ff;
  --txt-color: #2f2d2f;
  --txt-second-color: #ccc;
  --border-color: #e1e1e1;
  --primary-box-shadow: 0px 19px 40px 0px hsla(0, 0%, 0%, 10%);
}
html,
body {
  min-height: 100%;
  overflow-x: hidden;
  padding: 0;
  height: 100%;
  margin: 0;
  font-size: 1rem;
  color: var(--text-color);
  font-family: var(--font-family);
}

html {
  background: var(--background);
}