.light-theme  {
  --bg-title-color: #f7d069;
  --bg-color-1: #D9D9D9;
  --bg-color-2: #FEFEFE;
  --bg-color-3: #E9E9E9;
  --bg-color-4: #F8F8F8;
  --border-color: #B9B9B9;
  --border-bottom-color: #B9B9B9;
  --border-color-hover: #0c8cee;
  --title-hover-color: #D9D9D9;
  --hover-filter: brightness(0.85);
  --input-bg-color: #fff;
  --text-color: black;
  --card-meta-color: #000000;
  --card-header-color: rgba(0, 0, 0, 0.8);
  --thead-bg: #e9ecef;
  --thead-color: #495057;
  --scrollbar-track: #f8f8f8;
  --scrollbar-thumb: #D9D9D9;
  --scrollbar-thumb-hover: #B9B9B9;
  --ag-header-bg: #e9ecef;
  --ag-header-fg: #495057;
  --tree-hover-bg: #bee0f5;
  --tree-toggler-bg: #009fda;
  --fabric-colour-background: rgba(50, 50, 50, 0.8);
}
.dark-theme  {
  --bg-title-color: #f7d069;
  --bg-color-1: #141414;
  --bg-color-2: #262626;
  --bg-color-3: #202020;
  --bg-color-4: #282828;
  --border-color: #464646;
  --border-bottom-color: #464646;
  --border-color-hover: #4DA6FF;
  --title-hover-color: #141414;
  --hover-filter: brightness(0.85);
  --input-bg-color: #0f0f22;
  --text-color: #DDDDDD;
  --card-meta-color: #ffffff;
  --card-header-color: rgba(255, 255, 255, 0.8);
  --thead-bg: #1e1e2f;
  --thead-color: #ffffff;
  --scrollbar-track: #242424;
  --scrollbar-thumb: #141414;
  --scrollbar-thumb-hover: #050505;
  --ag-header-bg: #333;
  --ag-header-fg: #fff;
  --tree-hover-bg: #444;
  --tree-toggler-bg: #333;
  --fabric-colour-background: rgba(20, 20, 20, 0.8);
}
a {
  color: var(--border-color-hover);
  text-decoration: none;
}
::-webkit-scrollbar {
  width: thin;
  -webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
  width: 10px;
}
::-webkit-scrollbar:horizontal {
  height: 10px;
}
/* Track */
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border: 2px solid var(--scrollbar-track);
  background-color: var(--scrollbar-thumb);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}
#design .instrument-panel {
  position: fixed;
  left: 390px;
  bottom: 5px;
  width: calc(100% - 370px - 360px - 77px);
  z-index: 100;
  opacity: 1;
  overflow: auto;
  color: var(--text-color);
  background: var(--bg-title-color) !important;
}
#design .instrument-panel .ui.menu {
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
#design .instrument-panel .ui.segment {
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: var(--bg-color-2) !important;
  border-top: 1px solid var(--border-bottom-color);
}
#design .instrument-panel .ui.secondary.inverted.pointing.menu {
  border-width: 0px !important;
}
#design .instrument-panel .ui.secondary.inverted.pointing.menu .item {
  color: var(--text-color) !important;
  font-size: 1rem;
}
#design .instrument-panel .ui.secondary.inverted.pointing.menu .active.item {
  border-color: var(--border-color) !important;
  font-size: 1.2rem;
}
#design .instrument-panel .ui.secondary.inverted.pointing.menu .active.item:hover {
  border-color: var(--border-color-hover) !important;
}
#design .instrument-panel .ui.secondary.inverted.pointing.menu .top-menu {
  padding-top: 5px !important;
  border-bottom: 1px solid var(--border-bottom-color) !important;
}
#design .instrument-panel .ui.card {
  background: transparent !important;
  border: 1px solid var(--bg-color-1) !important;
  border-radius: 5%;
}
#design .instrument-panel .ui.card .meta,
#design .instrument-panel .ui.cards > .card .meta {
  font-style: italic;
  color: var(--card-meta-color) !important;
}
#design .instrument-panel .ui.card > .content {
  color: var(--card-header-color) !important;
}
#design .instrument-panel .cell-wrap-text {
  white-space: normal !important;
}
#design .instrument-panel .ui.card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid var(--border-color-hover) !important;
}
#design .instrument-panel table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  font-size: 1rem;
  width: 100%;
  margin-bottom: 2px;
}
#design .instrument-panel table td,
#design .instrument-panel table th {
  border: 1px solid;
  padding: 1px;
}
#design .instrument-panel table tr:nth-child(even) {
  background-color: var(--row-even-bg);
}
#design .instrument-panel table tr:hover {
  background-color: var(--row-hover-bg);
}
#design .instrument-panel table th,
#design .instrument-panel tfoot td {
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: center;
  background-color: var(--thead-bg);
  color: var(--thead-color);
  font-size: 1rem;
  width: fit-content;
  overflow: auto;
}
#design .instrument-panel div.ag-theme-alpine div.ag-row {
  font-size: 1rem !important;
}
#design .instrument-panel .ag-theme-alpine {
  --ag-odd-row-background-color: var(--row-even-bg);
  --ag-header-background-color: var(--ag-header-bg);
  --ag-header-foreground-color: var(--ag-header-fg);
  --ag-background-color: var(--bg-color-2);
  --ag-border-color: var(--border-color);
}
#design .instrument-panel .ag-theme-alpine .ag-row-odd {
  background-color: var(--ag-odd-row-background-color);
}
#design .instrument-panel .ag-theme-alpine .ag-header {
  height: 35px !important;
  min-height: 35px !important;
  background: var(--ag-header-bg);
  color: var(--ag-header-fg);
}