:root {
  /* --base-accent: #a54242 !important; */
  --base-accent: #3a6ea5 !important;
  --secondary-accent: #3a6ea5 !important;

  --base-text-color: white !important;
  --base-bg: black !important;
  --base-border-color: #515159 !important;
  --base-border-radius: 8px !important;

  --data-grid-h-padding: 4px !important;
  --data-grid-v-padding: 2px !important;
  --data-grid-font-size: 11px !important;
  --data-grid-hover-accent: #ffffff10 !important;

  --fill-height: 20px !important;
  --fill-radius: 4px !important;

  --card-bg: #1c1c1e !important;
  --card-bg-hover: #2c2c2e !important;
  /* --card-bg-hover: color-mix(in srgb, var(--base-accent) 30%, transparent) !important; */
  --card-border-radius: 8px !important;
  --card-border-color: none;

  --control-bg: #262629 !important;
  --control-bg-hover: #323236 !important;
}

/* menu buttons flex layout */
.dx-swatch-additional .dx-treeview-item .dx-treeview-item-content {
  display: flex;
  align-items: center;
}

/* menu buttons size */
.dx-swatch-additional .dx-treeview-item .dx-treeview-item-content .dx-icon {
  width: 24px;
  height: 24px;
  background-size: 24px 24px;
  font-size: 24px;
  line-height: 24px;
}

/* menu buttons padding */
.dx-swatch-additional .dx-treeview-item {
  padding: 16px;
}

/* upper menu height */
.dx-toolbar .dx-toolbar-items-container {
  height: 56px;
}

/* upper menu sidebar header height */
.dx-swatch-additional .dx-toolbar .dx-toolbar-items-container {
  height: 56px;
}