:root {
   --grey-50: #FAFAFA;
  --grey-100: #F5F5F5;
  --grey-200: #EEEEEE;
  --grey-300: #E0E0E0;
  --grey-400: #BDBDBD;
  --grey-500: #9E9E9E;
  --grey-600: #757575;
  --grey-700: #616161;
  --grey-750: #585858;
  --grey-800: #424242;
  --grey-830: #383838;
  --grey-850: #323232;
  --grey-870: #2D2D2D;
  --grey-875: #282828;
  --grey-890: #222222;
  --grey-900: #212121;
  --grey-950: #1d1d1d;
  --grey-1000: #1a1a1a;
  --grey-1010: #161B1C;
  --grey-1020: #272C2F;
 

  --title: var( --grey-850 );
  --title-light: var(--grey-100);
  --title-complement: #f0db4f;

  --green-700: #407040;
  --red-700: #704040;

  --vex-foreground: #D4D4D4;
  --vex-foreground-error:rgb(255, 0, 0);
  --vex-foreground-warning:rgb(255, 140, 0);
  --vex-background: var(--grey-850);
  --vex-disabled-color: var(--grey-800);
  --vex-tab-background: var(--grey-830);
  --vex-project-background: var(--grey-875);
  --vex-status-background: var(--grey-800);
  --vex-tab-color: var(--grey-400);
  --vex-tab-container-background:  var(--grey-875);
  --vex-tab-active-color: #FFFFFF;
  --vex-tab-active-background: #1E1E1E;
  --vex-tab-hover-background: var(--grey-950);
  --vex-nav-button-color: #a3a3a3;

  --checkbox-color: #FFFFFF;
  --checkbox-color-locked: #c0c9d375;
  --loading-color: #0066CC;
  --tab-scroll-color: #0066CC;
  --problems-filter-color:#0066CC;
  --titlebar-height: 22px;
  --titlebar-color: var(--grey-850)
}


html,
body {
  font-family: 'Roboto', sans-serif;
  /* -webkit-font-smoothing: antialiased; */
  /* -moz-font-smoothing: antialiased; */
  /* -moz-osx-font-smoothing: grayscale; */
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  background: var(--vex-background);
  -ms-overflow-style: -ms-autohiding-scrollbar;
  color: var(--vex-foreground);
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
}

input {
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

#app {
  height: 100%;
  overflow-y: scroll; /* Enable vertical scrolling */
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none; /* For Internet Explorer and Edge */
  margin-bottom: 1rem;
}

#app::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and WebKit browsers */
}
.app-container {
  position: absolute;
  top: var(--titlebar-height);
  height: 65%;
  width: 100%;
}
::-webkit-scrollbar {
  width: 0.5rem;
}

::-webkit-scrollbar-thumb {
  transition: 0.3s ease all;
  border-color: transparent;
  background-color: rgba(255, 255, 255, 0.1);
  z-index: 40;
}

::-webkit-scrollbar-thumb:hover {
  transition: 0.3s ease all;
  background-color: rgba(255, 255, 255, 0.15);
}

.react-console::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
}

.react-console::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}


.terminal .xterm-viewport {
  background-color: #24282A;
}

.consoleContainer {
  padding: 4px;
  width: 100%;
  height: 100%;
}

.terminal {
  color: var(--vex-foreground);
  font-family: 'Roboto Mono', courier-new, courier, monospace;
  font-size: 12px;
  font-weight: bold;
}


.fill {
  width: 100%;
  height: 100%;
}
.error{
    font-size:11px;
    color: #ff0000;
}
.button {
  margin: 4;
  min-width: 80;
  max-width: fit-content;
  user-select: none;
}
.button-selected {
  margin: 4;
  min-width: 50;
  max-width: fit-content;
  user-select: none;
  background: chocolate;
}
.connect-button {
  margin: 4;
  user-select: none;
  width: 250px;
  max-width: 250;
  height: 40px;
  font-size: large;
}
.data-group {
  background-color: var(--grey-800);
  display: flex;
  min-width: fit-content;
  flex-direction: column;
  max-width: 350px;
  width:350px;
  padding: 10;
  border: thin;
  border-style: dashed;
}
.data-group .data-record {
  display: flex;
  margin-top: 5px;
  font-size: small;
}
.data-group .data-record .data-label{
  text-align: start;
  width: 100%;
}
.data-group .data-record .data-value{
  text-align: end;
  width: 100%;
}
.data-record-divider{
  border: thin;
  border-style: dashed;
  height: 0px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.data-containers {
  display: flex;
  flex-direction: row;
}
.checkbox {
  display: flex;
  flex-direction: row;
  padding-top: 5px;
}