:root {
  --bynd-aside-width: 250px;
  --shadow-0: 0 0 0 1px transparent;
  --shadow-1: 0 0 0 1px rgba(0, 0, 0, .06);
  --shadow-2: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 1px 0 rgba(0, 0, 0, .04);
  --shadow-3: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 0 2px 0 rgba(0, 0, 0, .06);
  --shadow-4: 0 4px 8px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
  --shadow-5: 0 8px 16px 0 rgba(0, 0, 0, .08), 0 4px 8px 0 rgba(0, 0, 0, .06);
  --shadow-6: 0 16px 32px -2px rgba(0, 0, 0, .1), 0 8px 16px -2px rgba(0, 0, 0, .08);
  --shadow-7: 0 32px 64px -4px rgba(0, 0, 0, .12), 0 12px 24px -2px rgba(0, 0, 0, .06);
  --shadow-8: 0 48px 96px -8px rgba(0, 0, 0, .16), 0 24px 48px -4px rgba(0, 0, 0, .08);
  --duration-instantly: 0s;
  --duration-quickly: 0.15s;
  --color-black: #000;
  --color-white: #fff;
  --color-blue-0: #f0f6ff;
  --color-blue-10: #e3edff;
  --color-blue-20: #cddfff;
  --color-blue-30: #b2ceff;
  --color-blue-40: #97bdff;
  --color-blue-50: #7cabff;
  --color-blue-60: #639bff;
  --color-blue-70: #4d8dff;
  --color-blue-80: #3880ff;
  --color-blue-90: #1b6dff;
  --color-blue-100: #0054e9;
  --color-gray-0: #f3f3f3;
  --color-gray-10: #e4e4e4;
  --color-gray-20: #c8c8c8;
  --color-gray-30: #aeaeae;
  --color-gray-40: #959595;
  --color-gray-50: #818181;
  --color-gray-60: #6d6d6d;
  --color-gray-70: #5f5f5f;
  --color-gray-80: #424242;
  --color-gray-90: #2f2f2f;
  --color-gray-100: #141414;
  --color-carbon-0: #eef1f3;
  --color-carbon-10: #d7dde2;
  --color-carbon-20: #b4bcc6;
  --color-carbon-30: #98a2ad;
  --color-carbon-40: #7d8894;
  --color-carbon-50: #677483;
  --color-carbon-60: #556170;
  --color-carbon-70: #434f5e;
  --color-carbon-80: #35404e;
  --color-carbon-90: #222d3a;
  --color-carbon-95: #19212a;
  --color-carbon-100: #03060b;
  --color-indigo-0: #fbfbfd;
  --color-indigo-10: #f6f8fc;
  --color-indigo-20: #e9edf3;
  --color-indigo-30: #dee3ea;
  --color-indigo-40: #ced6e0;
  --color-indigo-50: #b2becd;
  --color-indigo-60: #92a0b3;
  --color-indigo-70: #73849a;
  --color-indigo-80: #445b78;
  --color-indigo-90: #2d4665;
  --color-indigo-100: #001a3a;
  --color-green-0: #f1fdf5;
  --color-green-10: #deffe7;
  --color-green-20: #c7fbd5;
  --color-green-30: #a7f1bb;
  --color-green-40: #80e89d;
  --color-green-50: #62e085;
  --color-green-60: #4ada71;
  --color-green-70: #2dd55b;
  --color-green-80: #17c948;
  --color-green-90: #00ba33;
  --color-green-100: #00a52d;
  --color-lime-0: #f5fff0;
  --color-lime-10: #ebfee3;
  --color-lime-20: #ddfcd0;
  --color-lime-30: #cffbbc;
  --color-lime-40: #bbf9a2;
  --color-lime-50: #a3f581;
  --color-lime-60: #8bf35f;
  --color-lime-70: #64ec44;
  --color-lime-80: #4ddf2b;
  --color-lime-90: #3ad515;
  --color-lime-100: #27c100;
  --color-lavender-0: #f7f8ff;
  --color-lavender-10: #e6ebff;
  --color-lavender-20: #ced9ff;
  --color-lavender-30: #b6c6ff;
  --color-lavender-40: #9fb5ff;
  --color-lavender-50: #8aa4ff;
  --color-lavender-60: #7493ff;
  --color-lavender-70: #597eff;
  --color-lavender-80: #3c67ff;
  --color-lavender-90: #194bfd;
  --color-lavender-100: #0033e8;
  --color-purple-0: #f4f4ff;
  --color-purple-10: #e9eaff;
  --color-purple-20: #d0d2ff;
  --color-purple-30: #b6b9f9;
  --color-purple-40: #9a99fc;
  --color-purple-50: #8482fb;
  --color-purple-60: #786df9;
  --color-purple-70: #6e5afd;
  --color-purple-80: #6030ff;
  --color-purple-90: #4712fb;
  --color-purple-100: #3400e6;
  --color-pink-0: #ffeff5;
  --color-pink-10: #ffe3ed;
  --color-pink-20: #ffd8e5;
  --color-pink-30: #ffc9db;
  --color-pink-40: #ffb6d0;
  --color-pink-50: #ff99bd;
  --color-pink-60: #ff80ac;
  --color-pink-70: #ff6098;
  --color-pink-80: #fb4082;
  --color-pink-90: #ec216a;
  --color-pink-100: #da0d56;
  --color-red-0: #fff1f3;
  --color-red-10: #ffe6e8;
  --color-red-20: #ffcfd3;
  --color-red-30: #feb7bc;
  --color-red-40: #fc9aa2;
  --color-red-50: #f9838c;
  --color-red-60: #f56570;
  --color-red-70: #f24c58;
  --color-red-80: #ef3442;
  --color-red-90: #e21827;
  --color-red-100: #d0000f;
  --color-orange-0: #fff5f0;
  --color-orange-10: #ffede6;
  --color-orange-20: #ffdfd1;
  --color-orange-30: #ffd0bc;
  --color-orange-40: #ffc0a5;
  --color-orange-50: #ffaf8c;
  --color-orange-60: #ff9b70;
  --color-orange-70: #ff8753;
  --color-orange-80: #ff7336;
  --color-orange-90: #ff5b13;
  --color-orange-100: #eb4700;
  --color-yellow-0: #fffbef;
  --color-yellow-10: #fff8e2;
  --color-yellow-20: #fff4d1;
  --color-yellow-30: #ffefbd;
  --color-yellow-40: #ffe9a3;
  --color-yellow-50: #ffe080;
  --color-yellow-60: #ffd75a;
  --color-yellow-70: #ffce31;
  --color-yellow-80: #ffc409;
  --color-yellow-90: #f4b100;
  --color-yellow-100: #eaa100;
  --color-aqua-0: #f0fff9;
  --color-aqua-10: #e6fff6;
  --color-aqua-20: #ceffed;
  --color-aqua-30: #b7fce3;
  --color-aqua-40: #93f9d5;
  --color-aqua-50: #79f5c9;
  --color-aqua-60: #59f0ba;
  --color-aqua-70: #38e9aa;
  --color-aqua-80: #1ae19a;
  --color-aqua-90: #00d287;
  --color-aqua-100: #00ba78;
  --color-teal-0: #eefeff;
  --color-teal-10: #dffdff;
  --color-teal-20: #d0fdff;
  --color-teal-30: #bbfcff;
  --color-teal-40: #a2fcff;
  --color-teal-50: #8bfbff;
  --color-teal-60: #73f6fb;
  --color-teal-70: #55ecf2;
  --color-teal-80: #35e2e9;
  --color-teal-90: #1bd2d9;
  --color-teal-100: #00b9c0;
  --color-cyan-0: #f3faff;
  --color-cyan-10: #e8f5ff;
  --color-cyan-20: #d3ecff;
  --color-cyan-30: #bfe4ff;
  --color-cyan-40: #a7daff;
  --color-cyan-50: #8dcfff;
  --color-cyan-60: #77c6ff;
  --color-cyan-70: #62bdff;
  --color-cyan-80: #46b1ff;
  --color-cyan-90: #24a3ff;
  --color-cyan-100: #0091fa;
}

:root {
  --font-family: "Roboto", sans-serif;
  --secondary-font-family: "Roboto", sans-serif;
  --bg-header: var(--secondary-background);
  --gray-base: #000000;
  --gray-darker: #333333;
  --gray-dark: #5E5F5C;
  --gray: #82837F;
  --gray-light: #E4E5DC;
  --border-color: #E1E1E1;
  --success: #6AAC7D;
  --warning: #F7C700;
  --error: #f04141;
  --info: #1d72f3;
  --border-radius-base: 8px;
  --surface: #101625;
  --primary: #ff8056;
  --primary-dark: #e36152;
  --primary-light: #ffa789;
  --primary-accent: #e36152;
  --text-on-primary: #fff;
  --accent-color: #ffa385;
  --secondary: #121f36;
  --secondary-dark: #030405;
  --secondary-black-dark: #0a121f;
  --secondary-darker: #0c1525;
  --secondary-light: #617096;
  --secondary-accent: #8e99bb;
  --text-on-secondary: #ffffff;
  --text-color: rgba(255, 255, 255, 0.6);
  --text-title-color: var(--text-on-primary);
  --text-second-color: var(--gray-dark);
  --background: #101625;
  --text-hover-color: var(--primary);
  --bg-element: var(--secondary-light);
  --element-border-color: var(--gray-light);
  --separator-color: var(--gray-lighter);
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #101625;
    --primary: #ff8056;
    --primary-dark: #e36152;
    --primary-light: #ffa789;
    --primary-accent: #e36152;
    --text-on-primary: #fff;
    --accent-color: #ffa385;
    --secondary: #121f36;
    --secondary-dark: #030405;
    --secondary-black-dark: #0a121f;
    --secondary-darker: #0c1525;
    --secondary-light: #617096;
    --secondary-accent: #8e99bb;
    --text-on-secondary: #ffffff;
    --text-color: rgba(255, 255, 255, 0.6);
    --text-title-color: var(--text-on-primary);
    --text-second-color: var(--gray-dark);
    --background: #101625;
    --text-hover-color: var(--primary);
    --bg-element: var(--secondary-light);
    --element-border-color: var(--gray-light);
    --separator-color: var(--gray-lighter);
  }
}

html[data-beyond-mode=light] {
  --surface: rgb(193, 193, 193);
  --primary: #FF8056;
  --primary-dark: #E36152;
  --primary-light: #FFA789;
  --primary-accent: #FFA789;
  --text-on-primary: rgb(0, 0, 0);
  --background: rgb(193, 193, 193);
  --accent-color: var(--primary);
  --secondary: #e4e4e4;
  --secondary-dark: #121F36;
  --secondary-light: #313C50;
  --secondary-accent: #424F6E;
  --text-on-secondary: #000000;
  --secondary-black-dark: #3a4a64;
  --text-color: #000;
  --text-title-color: var(--secondary-dark);
  --text-second-color: var(--gray-dark);
  --text-hover-color: var(--primary);
  --bg-element: var(--gray-light);
  --element-border-color: var(--gray-light);
  --separator-color: var(--gray-darker);
}

html[data-beyond-mode=dark] {
  --surface: #101625;
  --primary: #ff8056;
  --primary-dark: #e36152;
  --primary-light: #ffa789;
  --primary-accent: #e36152;
  --text-on-primary: #fff;
  --accent-color: #ffa385;
  --secondary: #121f36;
  --secondary-dark: #030405;
  --secondary-black-dark: #0a121f;
  --secondary-darker: #0c1525;
  --secondary-light: #617096;
  --secondary-accent: #8e99bb;
  --text-on-secondary: #ffffff;
  --text-color: rgba(255, 255, 255, 0.6);
  --text-title-color: var(--text-on-primary);
  --text-second-color: var(--gray-dark);
  --background: #101625;
  --text-hover-color: var(--primary);
  --bg-element: var(--secondary-light);
  --element-border-color: var(--gray-light);
  --separator-color: var(--gray-lighter);
}
@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");
:root {
  --font-family: "Poppins", sans-serif;
  --secondary-font-family: "Roboto", sans-serif;
  --title-font: "Poppins", serif;
  --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-primary: 8px;
  --border-secondary: 8px;
  --body-bg: #f5f8ff;
  --box-bg: #fff;
  --input-bg: #f5f8ff;
  --txt-color: #2f2d2f;
  --txt-second-color: #ccc;
  --border-color: #E1E1E1;
  --box-shadow: 0px 3px 6px #00000029;
}
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(--surface);
}