body {
  overflow: hidden;
}

a {
  color: var(--joy-palette-primary-400);
}

.showOnChatBubbleHover {
  display: none;
}

.chatBubble:hover .showOnChatBubbleHover {
  display: inline-block;
}

.chatBubble:hover .chatBubbleContent {
  filter: opacity(0.9);
}

.chatBubbleContent pre {
  text-wrap: wrap;
}

.chatB .hoverIcon {
  opacity: 0.5;
  transition: opacity 0.1s ease-in-out;
}

.hoverIcon:hover {
  cursor: pointer;
  opacity: 1;
}

.uppy-StatusBar-actionBtn {
  background-color: var(--joy-palette-primary-600) !important;
  color: var(--joy-palette-primary-100) !important;
  float: right;
  margin-left: auto;
}

button.hoverEditButton {
  display: none;
}

.editableSheet:hover .editableSheetContent {
  opacity: 0.3;
  transition: opacity 0.1s ease-in-out;
}

.editableSheet:hover button.hoverEditButton {
  display: inline-flex;
  opacity: 1;
}

/* Make sure that if you have clickable things
  in the header, they themselves are not draggable
  otherwise you can't click on them */
.header button {
  --webkit-app-region: no-drag;
  app-region: no-drag;
}

.MuiModal-backdrop {
  --webkit-app-region: drag;
  app-region: drag;
}

.MuiModalDialog-root {
  --webkit-app-region: no-drag;
  app-region: no-drag;
}

/* This is an unused style for a cool
spinning gradient border effect */
/*
.spin-border {
  --angle: 0deg;
  border: 2px solid;
  border-image: conic-gradient(
      from var(--angle),
      #d600ff,
      #00ff9f,
      #00b8ff,
      #001eff,
      #bd00ff
    )
    1;
  animation: 3s rotate infinite alternate linear;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
*/

/* Scrollbar styles */
::-webkit-scrollbar {
  width: 10px;
  /* for vertical scrollbars */
  height: 10px;
  /* for horizontal scrollbars */
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
}

/* End Scrollbar styles */

/* remove borders on button groups -- fixes up sidebar buttons at bottom */
.MuiButtonGroup-root a,
.MuiButtonGroup-root button {
  border: none !important;
}

/* Color for sidebar disabled text */
.FirstSidebar_Content .Mui-disabled {
  color: rgb(77, 64, 75) !important;
}

html[data-joy-color-scheme='dark'] .FirstSidebar_Content .Mui-disabled {
  color: rgb(157, 147, 155) !important;
}

/* Color for sidebar icons */
.FirstSidebar_Content .Mui-disabled .MuiListItemDecorator-root {
  color: rgb(156, 144, 144) !important;
}

/* Make the Select Experiment menu look nice in dark and light */
html[data-joy-color-scheme='light'] .select-experiment-menu {
  background-color: rgb(202, 195, 212);
}

html[data-joy-color-scheme='dark'] .select-experiment-menu {
  background-color: rgb(111, 106, 117);
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);
  border: none;
}

/* This will highlight errors where a div is a child of a p which is
not allowed */
/* p > div {
  border: 10px solid red;
} */

.form-group {
  margin-bottom: 20px;
}

fieldset {
  border: none;
  padding: 0;
}

.chatBubbleContent code {
  display: block;
  max-width: 300px;
}


textarea {
  background-color: var(--joy-palette-background-level-1);
  border: 1px solid rgb(209, 213, 219);
  color: var(--joy-palette-text-tertiary);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI";
  font-size: 16px;
  padding: 16px;
}