:root {
  /*Design System Color*/
  --base-900: #0f0a18;
  --base-800: #160d24;
  --base-700: #1d1130;
  --base-700-rgb: 29, 17, 48;
  --base-600: #24163b;
  --base-500: #2d194a;
  --base-400: #3c2561;
  --base-300: #66548c;
  --base-200: #b6adcc;
  --base-100: #d0cade;
  --base-50: #f0edf5;
  --base-0: #ffffff;

  --paragraph-dark-main-text: #ececec;

  --accent-red: #FF4264;
  --accent-turquoise: #24fde7;
  --accent-pink: #ECD1FF;

  --gradient-progress: linear-gradient(90deg, #6606BA 0%, #49BFFF 100%);
  --gradient-stroke: linear-gradient(180deg, #24FDE7 0%, #2D249C 100%);
  --gradient-modal: linear-gradient(180deg, #3A1C7A 0%, #1E1739 100%);
  --gradient-seo: linear-gradient(
                  to bottom,
                  transparent 20%,
                  rgba(var(--base-700-rgb), 0.8) 60%,
                  rgba(var(--base-700-rgb), 0.97) 80%,
                  rgb(var(--base-700-rgb)) 100%
  );

  --brand-dark: #00cbb7;
  --brand-main: #24fde7;
  --brand-light: #80f7eb;

  --brand-base-filter: brightness(0) saturate(100%) invert(88%) sepia(99%) saturate(864%) hue-rotate(182deg) brightness(85%) contrast(85%);
  --brand-main-filter: brightness(0) saturate(100%) invert(79%) sepia(42%) saturate(740%) hue-rotate(114deg) brightness(97%) contrast(104%);

  --brand-secondary-dark: transparent;
  --brand-secondary-light: transparent;

  --disabled: #606060;
  --disabled-dark: #282828;
  --disabled-light: #808080;

  --system-information: #3694ff;
  --system-danger: #f33336;
  --system-danger-dark: #D12C2E;
  --system-danger-light: #FF4548;
  --system-success: #5cf333;
  --system-success-dark: #56D42C;
  --system-success-light: #8FFF70;
  --system-warning: #f3a333;
  --system-warning-dark: #DE8F21;
  --system-warning-light: #FFA72B;

  /*fonts*/
  --font-secondary: var(--font-inter);
  --font-main: var(--font-montserrat);
  --font-poppins: var(--font-poppins);

  --modal-tablet-with: 767px;
  --modal-desktop-with: 1216px;

  --modal-z-index: 105;
  --modal-overlay-z-index: 100;

  /*ui*/
  --button-border-radius: 256px;
  --sidebar-padding: 12px;
  --sidebar-menu-item-padding: 6px;
  --sidebar-menu-item-radius: 8px;
  --sidebar-menu-item-collapsed-radius: 50%;
  --sidebar-menu-item-collapsed-width: 34px;
  --sidebar-menu-item-collapsed-height: 34px;
  --sidebar-menu-items-gap: 4px;
  --mobile-menu-padding: 12px;
  --mobile-menu-header-padding: 0;
  --bottom-navigation-width: 100%;
  --bottom-navigation-bottom: 0;
  --bottom-navigation-translateX: 0;
  --bottom-navigation-raduis: 0;
  --bottom-navigation-background-color: #1d1130;
  --bottom-navigation-border-color: transparent;
  --header-background: #1d1130;
  --avatar-border-radius: 50%;
  --body-background-color: #0f0a18;
}

.ant-tooltip {
  font-family: var(--font-main);
  font-size: 10px;
}

.ant-tooltip .ant-tooltip-inner, .ant-tooltip .ant-tooltip-arrow::before {
  background-color: var(--base-400);
}

.ant-tooltip .ant-tooltip-inner {
  min-height: 20px !important;
  color: var(--base-100);
  border-radius: 8px;
  padding: 8px;
}