:root {
  --color-scheme: light;
  --border-radius-lg: 24px;
  --border-radius: 12px;
  --border-radius-md: 12px;
  --border-radius-sm: 8px;
  --border-radius-xs: 4px;

  --border: 1px solid #dee3e8;
  --color-translucent: rgba(255, 255, 255, 0.1);

  --color-brand: #000;
  --color-brand-text: #000;
  --color-brand-bg: #f5f5f5;
  --color-brand-bg-hover: #d6d6d6;
  --color-brand-border: #000;
  --color-brand-rgb: 0, 0, 0;

  --color-primary: #006aff;
  --color-primary-10: rgba(30, 156, 241, 0.1);
  --color-primary-20: rgba(30, 156, 241, 0.2);
  --color-primary-text: #006aff;
  --color-primary-bg: #e6f0ff;
  --color-primary-bg-hover: #cce1ff;

  --color-danger: #cc0023;
  --color-danger-text: #dc3545;
  --color-danger-bg: #ffe6e6;
  --color-danger-bg-hover: #ffcccc;

  --color-success: #217005;
  --color-success-text: #217005;
  --color-success-bg: #d7f9b8;
  --color-success-bg-hover: #c6f79c;

  --color-warning: #b13600;
  --color-warning-text: #b13600;
  --color-warning-bg: #fdf8c9;
  --color-warning-bg-hover: #fff0cc;

  --color-general-brand: 83, 58, 253;
  --color-general-primary-text: 0, 106, 255;
  --color-general-primary-bg: 230, 240, 255;
  --color-general-primary-bg-hover: 204, 225, 255;
  --color-general-primary-border: 176, 209, 255;
  --color-general-danger-text: 220, 53, 69;
  --color-general-danger-bg: 255, 230, 230;
  --color-general-danger-bg-hover: 255, 204, 204;
  --color-general-danger-border: 252, 207, 207;
  --color-general-success-text: 33, 112, 5;
  --color-general-success-bg: 215, 249, 184;
  --color-general-success-bg-hover: 215, 249, 184;
  --color-general-success-border: 198, 247, 156;
  --color-general-warning-text: 220, 133, 53;
  --color-general-warning-bg: 255, 247, 230;
  --color-general-warning-bg-hover: 255, 240, 204;
  --color-general-warning-border: 247, 226, 179;
  --color-general-secondary-bg: 246, 246, 246;
  --color-general-secondary-text: 0, 0, 0;
  --color-general-secondary-bg-hover: 235, 235, 235;
  --color-general-secondary-border: 0, 0, 0;
  --color-general-brand-bg: 242, 240, 255;
  --color-general-brand-text: 83, 58, 253;
  --color-general-brand-bg-hover: 230, 227, 255;
  --color-general-brand-border: 83, 58, 253;

  --color-btn-overlay: rgba(255, 255, 255, 0.15);
  --color-scroll-overlay: rgba(190, 190, 190, 0.3);

  --color-logo: #000;

  --color-main: #ffffff;
  --color-secondary: #f6f6f6;
  --color-secondary-hover: #f9f9f9;
  --color-tertiary: #fbfbfb;
  --color-border: #dee3e8;
  --color-border-secondary: #ebeef1;

  --text-light: #ffffff;
  --text-dark: #0f0f0f;
  --text-secondary: #99a0ae;
  --text-secondary-light: #596171;

  --color-overlay: rgba(0, 0, 0, 0.25);

  --p-container-content: 32px;
  --p-container: 32px;
  --w-max-sm: 1250px;
  --w-max-default: 1650px;
  --w-max-md: 1850px;
  --w-max-lg: 2400px;

  --transition-duration: .15s;

  --checkout-btn-offset: 75px;

  --nav-width: 225px;
  --nav-width-collapsed: 56px;
  --nav-sm-height: 63px;
  --header-height: 64px;
  --header-sm-height: 61px;
  --max-width: 800px;

  /* box shadow like in max */
  --box-shadow-xs: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --box-shadow-sm: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  --box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.1);
  --box-shadow-lg:rgba(0, 0, 0, 0.08) 0px 5px 15px 0px, rgba(25, 28, 33, 0.1) 0px 15px 35px -5px;
  --box-shadow-nav: 4px 4px 2px 0 rgba(0,0,0,.1);

  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-family-monospace: 'Source Code Pro', Menlo, Monaco, monospace;
  --font-family-signature: "cedarville cursive",sans-serif;
  --font-family-title: "Signifier", ui-serif, Georgia, Cambria, Times New Roman, Times, serif;

  --color-1-text: rgb(0, 68, 23);
  --color-1-bg: rgb(238, 255, 240);
  --color-1-border: rgb(25, 128, 42);
  --color-1-bg-hover: rgb(210, 255, 225);

  --color-2-text: rgb(0, 68, 23);
  --color-2-bg: rgb(229, 255, 237);
  --color-2-border: rgb(0, 178, 59);
  --color-2-bg-hover: rgb(194, 255, 213);

  --color-3-text: rgb(0, 71, 54);
  --color-3-bg: rgb(203, 255, 242);
  --color-3-border: rgb(18, 191, 148);
  --color-3-bg-hover: rgb(170, 255, 234);

  --color-4-text: rgb(0, 58, 116);
  --color-4-bg: rgb(222, 238, 255);
  --color-4-border: rgb(38, 147, 255);
  --color-4-bg-hover: rgb(196, 226, 255);

  --color-5-text: rgb(55, 0, 94);
  --color-5-bg: rgb(241, 221, 255);
  --color-5-border: rgb(135, 22, 217);
  --color-5-bg-hover: rgb(230, 196, 255);

  --color-6-text: rgb(73, 0, 55);
  --color-6-bg: rgb(255, 241, 251);
  --color-6-border: rgb(217, 54, 176);
  --color-6-bg-hover: rgb(255, 219, 246);

  --color-7-text: rgb(73, 0, 24);
  --color-7-bg: rgb(255, 221, 233);
  --color-7-border: rgb(153, 8, 56);
  --color-7-bg-hover: rgb(255, 196, 216);

  --color-8-text: rgb(66, 0, 11);
  --color-8-bg: rgb(255, 224, 230);
  --color-8-border: rgb(204, 0, 35);
  --color-8-bg-hover: rgb(255, 191, 201);

  --color-9-text: rgb(82, 14, 0);
  --color-9-bg: rgb(255, 238, 234);
  --color-9-border: rgb(242, 91, 61);
  --color-9-bg-hover: rgb(255, 221, 215);

  --color-10-text: rgb(82, 41, 0);
  --color-10-bg: rgb(255, 243, 231);
  --color-10-border: rgb(255, 159, 64);
  --color-10-bg-hover: rgb(255, 230, 206);

  --color-11-text: rgb(77, 57, 0);
  --color-11-bg: rgb(255, 250, 233);
  --color-11-border: rgb(255, 191, 0);
  --color-11-bg-hover: rgb(255, 239, 191);

  --peer-avatar-1: #FF845E;
  --peer-avatar-2: #D45246;
  --peer-avatar-3: #FEBB5B;
  --peer-avatar-4: #F68136;
  --peer-avatar-5: #B694F9;
  --peer-avatar-6: #6C61DF;
  --peer-avatar-7: #9AD164;
  --peer-avatar-8: #46BA43;
  --peer-avatar-9: #53edd6;
  --peer-avatar-10: #28c9b7;
  --peer-avatar-11: #5BCBE3;
  --peer-avatar-12: #359AD4;
  --peer-avatar-13: #FF8AAC;
  --peer-avatar-14: #D95574;
  --peer-avatar-15: #B8C2CC;
  --peer-avatar-16: #9EAAB5;

  --peer-avatar-0: #dee3e8;
}

[data-theme='dark'] {
  --color-scheme: dark;
  --color-logo: #fff;

  --color-main: #0f0f0f;
  --color-secondary: #1e1e1e;
  --color-secondary-hover: #252526;
  --color-tertiary: #1b1b1b;
  --color-border: #363636;
  --color-border-secondary: #1e1e1e;
  --color-translucent: rgba(0, 0, 0, 0.1);

  --color-overlay: rgba(0, 0, 0, 0.65);
  
  --color-brand: #fff;
  --color-brand-text: #fff;
  --color-brand-bg: #22212c;
  --color-brand-bg-hover: #22212c;
  --color-brand-border: #fff;

  --color-primary: #1d9bf0;
  --color-primary-text: #1d9bf0;
  --color-primary-bg: #1d9bf0;
  --color-primary-bg-hover: #1d9bf0;
  --color-primary-bg-light: #a2daff;

  --color-danger: #cc0023;
  --color-danger-text: #dc3545;
  --color-danger-bg: #ffe6e6;
  --color-danger-bg-hover: #ffcccc;

  --color-success: #217005;
  --color-success-text: #217005;
  --color-success-bg: #d7f9b8;
  --color-success-bg-hover: #c6f79c;

  --color-warning: #b13600;
  --color-warning-text: #b13600;
  --color-warning-bg: #fdf8c9;
  --color-warning-bg-hover: #fff0cc;
  
  --color-general-primary-text: 0, 149, 255;
  --color-general-primary-bg-hover: 0, 41, 66;
  --color-general-primary-bg: 2, 29, 48;
  --color-general-primary-border: 29, 155, 240;
  --color-general-danger-text: 231, 35, 54;
  --color-general-danger-bg-hover: 73, 1, 8;
  --color-general-danger-bg: 59, 0, 6;
  --color-general-danger-border: 220, 53, 69;
  --color-general-success-text: 18, 191, 148;
  --color-general-success-bg-hover: 0, 59, 45;
  --color-general-success-bg: 0, 53, 40;
  --color-general-success-border: 18, 191, 148;
  --color-general-warning-text: 255, 174, 0;
  --color-general-warning-bg-hover: 71, 49, 0;
  --color-general-warning-bg: 54, 37, 0;
  --color-general-warning-border: 255, 178, 10;
  --color-general-secondary-bg-hover: 45, 45, 46;
  --color-general-secondary-bg: 37, 37, 38;
  --color-general-secondary-text: 255, 255, 255;
  --color-general-secondary-border: 145, 145, 145;
  --color-general-brand-bg: 30, 30, 30;
  --color-general-brand-text: 255, 255, 255;
  --color-general-brand-bg-hover: 30, 30, 30;
  --color-general-brand-border: 255, 255, 255;

  --box-shadow-xs: 0 1px 2px 0 rgba(230,240,250,.3), 0 1px 3px 1px rgba(230,240,250,.15);
  --box-shadow-sm: 0 1px 2px 0 rgba(255,255,255,.3), 0 1px 3px 1px rgba(255,255,255,.15);
  --box-shadow: 0 2px 4px rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,1);
  --box-shadow-lg:rgba(230,240,250, 0.03) 0px 5px 15px 0px, rgba(230,240,250, 0.1) 0px 15px 35px -5px;
  --box-shadow-nav: 4px 4px 2px 0 rgba(0,0,0,1);

  --color-btn-overlay: rgba(0, 0, 0, 0.15);
  --color-scroll-overlay: rgba(0, 0, 0, 0.5);

  --text-light: #000000;
  --text-dark: #ffffff;
  --text-secondary: #acacac;
  --text-secondary-light: #acacac;

  --border: 1px solid #363636;
  --border-light: 1px solid rgba(0, 0, 0, 0.25%);

  --color-1-text: rgb(108, 248, 155);
  --color-1-bg: rgba(25,128,42,.2);
  --color-1-border: rgb(25, 128, 42);
  --color-1-bg-hover: rgba(17, 85, 28, 0.2);

  --color-2-text: rgb(159, 255, 191);
  --color-2-bg: rgba(0,178,59,.2);
  --color-2-border: rgb(0, 178, 59);
  --color-2-bg-hover: rgba(0, 127, 42, 0.2);

  --color-3-text: rgb(30 255 199);
  --color-3-bg: rgba(18, 191, 148, 0.2);
  --color-3-border: rgb(18, 191, 148);
  --color-3-bg-hover: rgba(14, 144, 112, 0.2);

  --color-4-text: rgb(138, 197, 255);
  --color-4-bg: rgba(38,147,255,.2);
  --color-4-border: rgb(38, 147, 255);
  --color-4-bg-hover: rgba(0, 122, 242, 0.2);

  --color-5-text: rgb(200, 122, 255);
  --color-5-bg: rgba(135, 22, 217, 0.2);
  --color-5-border: rgb(135, 22, 217);
  --color-5-bg-hover: rgba(106, 17, 171, 0.2);

  --color-6-text: rgb(255, 123, 222);
  --color-6-bg: rgba(217, 54, 176, 0.2);
  --color-6-border: rgb(217, 54, 176);
  --color-6-bg-hover: rgba(185,35,147,.2);

  --color-7-text: rgb(255, 151, 186);
  --color-7-bg: rgba(153, 8, 56, 0.2);
  --color-7-border: rgb(187, 21, 124);
  --color-7-bg-hover: rgba(105, 5, 38, 0.2);

  --color-8-text: rgb(255, 99, 125);
  --color-8-bg: rgba(204, 0, 35, 0.2);
  --color-8-border: rgb(204, 0, 35);
  --color-8-bg-hover: rgba(153, 0, 26, 0.2);

  --color-9-text: rgb(255, 164, 146);
  --color-9-bg: rgba(242, 91, 61, 0.2);
  --color-9-border: rgb(242, 91, 61);
  --color-9-bg-hover: rgba(236, 52, 16, 0.2);

  --color-10-text: rgb(255, 181, 108);
  --color-10-bg: rgba(255, 159, 64, 0.2);
  --color-10-border: rgb(255, 159, 64);
  --color-10-bg-hover: rgba(255, 133, 13, 0.2);

  --color-11-text: rgb(255, 212, 85);
  --color-11-bg: rgba(255, 191, 0, 0.2);
  --color-11-border: rgb(153, 115, 0);
  --color-11-bg-hover: rgba(204, 153, 0, 0.2);

  --peer-avatar-0: #363636;
}
* {
  /* user-select: none; */
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  --font-family: 'Poppins', sans-serif;
}
/* *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track {
  background-color: transparent!important;
}
*::-webkit-scrollbar-thumb {
  min-height: 65px;
  background-color: var(--color-border)!important;
  border: 1px solid var(--color-border)!important;
  border-radius: var(--border-radius);
} */
.checkout-btn-offset {
  padding-bottom: var(--checkout-btn-offset)!important;
}

html,
textarea,
body {
  font-family: 'Poppins', sans-serif;
}

#root {
  background-color: var(--color-main);
}
html,
body,
#root {
  height: 100%;
}
body {
  margin: 0;
  font-weight: 400;
  color: var(--text-dark);
  fill: var(--text-dark);
  background-color: var(--color-main);
  /* overscroll-behavior: contain; */
}
body:has(.navbar-m.open),
body:has(.preview-img-big-display),
/* body:has(.dropdown-open), */
body:has(.modal-open),
body:has(.menu-open),
body:has(.fsm-wrapper.open),
body:has(.navbar.open) {
  overflow: hidden!important;
}
/* .page-body:has(.dropdown-open) {
  overflow: hidden!important;
} */

.content-body-wrapper {
  flex: 1 1;
  display: flex;
  /* flex-grow: 1; */
  /* max-height: calc(100vh - var(--p-container-content)); */
  position: relative;
  /* overflow: auto; */
  /* border-radius: var(--border-radius); */
  /* display: flex; */
}
.content-body-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  max-width: 100%;
  /* border-radius: var(--border-radius); */
}
.content-body {
  background-color: var(--color-main);
  /* min-height: calc(100vh - env(safe-area-inset-bottom)); */
  /* height: 100%; */
  margin-left: auto;
  /* padding-top: 32px; */
  margin-right: auto;
  display: flex;
  flex: 1 1;
  /* padding-right: var(--p-container-content);
  padding-left: var(--p-container-content);
  padding-bottom: var(--p-container-content); */
  flex-direction: column;
}
.top-alert {
  position: fixed;
  z-index: 9999;
  bottom: 0;
}
.content-body-wrapper {
  padding: calc(var(---p-container-content)) var(--p-container-content)  var(--p-container-content)  var(--p-container-content);
}
.content-body-inner::-webkit-scrollbar {
  display: none;
}
.page-body {
  /* border-radius: var(--border-radius); */
  background-color: var(--color-main);
  max-height: inherit;
  min-height: inherit;
  flex: 1 1;
  display: flex;
  flex-direction: column;
}
main {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  padding-top: 72px;
  flex-grow: 1;
}
.container {
  padding-left: var(--p-container);
  padding-right: var(--p-container);
}
.container-content {
  padding-left: var(--p-container-content);
  padding-right: var(--p-container-content);
}
.content {
  display: flex;
  flex: 1 1;
}
.max-width {
  /* max-width: 800px; */
  max-width: 80rem;
}
.max-width-sm {
  max-width: 400px;
}

.app {
  min-height: 100%;
  position: relative
}

table {
  /* font-family: monospace; */
}

a {
  text-decoration: none;
  color: var(--text-dark);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"] {
  -moz-appearance: textfield;
  -webkit-appearance: none;
  margin: 0;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: background-color 5000s ease-in-out 0s!important;
    transition: background-color 5000s ease-in-out 0s!important;
    -webkit-text-fill-color: var(--text-dark) !important;
}


.box-shadow {
  box-shadow: var(--box-shadow);
}

.box-shadow-none {
  box-shadow: none!important;
}

.mw-50-px {
  max-width: 60px;
  min-width: 60px;
}

.card-box-lg {
  padding: 40px;
  border: 1px solid var(--color-border);
  background-color: var(--color-main);
}

.padding-top-0 {
  padding-top: calc(var(--header-height) + var(--p-container));
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Quill Editor */
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill,
.ql-snow .ql-picker,
.ql-snow.ql-toolbar button svg {
  fill: var(--text-dark)!important;
  color: var(--text-dark)!important;
}
.ql-snow .ql-stroke {
  stroke: var(--text-dark)!important;
}
.ql-container {
  border: none!important;
  height: auto;
  flex: 1 1;
  display: flex;
  overflow: auto;
}
.ql-editor {
  flex: 1 1;
  padding: 0 12px 8px 12px;
}
.ql-snow.ql-toolbar button svg, .ql-snow .ql-toolbar button svg {
  float: none;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border: none!important;
}
.ql-snow .ql-picker-label {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ql-formats .icon-btn:active {
  transform: none!important;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  background-color: var(--color-main)!important;
  border-radius: var(--border-radius-sm);
  border-color: var(--color-border);
  box-shadow: var(--box-shadow-sm);
  z-index: 9;
}
.ql-snow .ql-color-picker .ql-picker-item {
  border-radius: var(--border-radius);
}
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected, .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover:hover {
  border-color: rgb(var(--color-general-secondary-border));
}
.ql-picker-label {
  justify-content: space-between!important;
}
.ql-toolbar.ql-snow {
  padding: 2px 0;
}
.ql-editor.ql-blank::before {
  color: #000;
  opacity: 0.6;
  font-style: normal;
}

/* End of quill editor */

#tooltip-default,
#tooltip-click {
  background-color: var(--color-main);
  color: var(--text-dark);
  box-shadow: var(--box-shadow-lg);
  padding: 4px 8px;
  border-radius: var(--border-radius-md);
  font-weight: 500;
  font-size: 12px;
}
#tooltip-user {
  border-radius: var(--border-radius-md)!important;
  box-shadow: var(--box-shadow-sm);
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  background-color: var(--color-main);
  z-index: 9999;
  opacity: 1;
  overflow: hidden;
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: var(--transition-duration);
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
.recharts-wrapper:focus,
.recharts-pie:focus,
.recharts-surface:focus,
.recharts-sector:focus {
  outline: none;
}
label.p-FieldLabel {
  color: var(--text-dark)!important;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 800px) {
  .padding-top-0 {
    padding-top: var(--header-height);
  }

  *::-webkit-scrollbar {
    display: none;
  }
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }
  body {
    background-color: var(--color-main);
  }

  .content.content-collapsed,
  .content {
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    /* padding-bottom: 61px; */
  }
  .content {
    flex-direction: column;
  }
  .content-body {
    margin-right: unset;
    margin-left: unset;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    max-width: 100%;
    /* padding-bottom: 30px; */
    min-height: calc(100vh - env(safe-area-inset-bottom));
  }
  .content-body-wrapper {
    /* padding-top: calc(var(--header-sm-height)); */
    padding-left: 0;
    padding-right: 0;
  }
  /* body:has(.navbar-mob) .content-body {
    padding-bottom: calc(51px + env(safe-area-inset-bottom));
    min-height: calc(100vh - env(safe-area-inset-bottom) - 51px);
  } */
  .pb-navbar-mob {
    padding-bottom: calc(51px + env(safe-area-inset-bottom));
  }
  body:has(.hidden-navbar-mob) .content-body {
    padding-bottom: env(safe-area-inset-bottom)!important;
  }
  .page-body {
    border-radius: 0;
  }

  .card-box-lg {
    padding: 0;
    border: none;
  }

  .content-body-wrapper {
    border-radius: 0;
    max-height: unset;
    position: relative;
    overflow: initial;
    display: flex;
  }
  .content-body-inner {
    overflow: initial;
  }
  .page-body {
    overflow-y: initial;
    max-height: initial;
    min-height: initial;
  }
}