html,
body {
  margin: 0;
}
[contenteditable]:active,
[contenteditable]:focus,
button:active,
button:focus {
  outline: none;
}
[contenteditable] {
  cursor: text;
}
body {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 12px;
  cursor: default;
  overflow: hidden;
  color: #333;
}
canvas,
.Shader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
}
.ShaderOverlay {
  z-index: 10;
  pointer-events: none;
}
.PlotLayout {
  position: absolute;
  top: 0px;
  left: 180px;
  bottom: 0px;
  right: 270px;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  background-color: #eee;
  box-sizing: border-box;
}
.Palette {
  position: absolute;
  left: 0px;
  width: 180px;
  top: 0px;
  bottom: 0px;
}
.Outline {
  position: absolute;
  right: 0px;
  width: 270px;
  top: 0px;
  bottom: 266px;
}
.Inspector {
  position: absolute;
  right: 0px;
  width: 270px;
  height: 266px;
  bottom: 0px;
}
.Symbolic {
  position: absolute;
  bottom: 90px;
  left: 180px;
  right: 270px;
  z-index: 30;
}
.DraggingObject {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  opacity: 0.5;
  box-shadow: 0px 2px 6px rgba(0,0,0,0.5);
}
.DraggingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 200;
}
.Header {
  position: absolute;
  width: 100%;
  top: 0px;
  height: 18px;
  box-sizing: border-box;
  line-height: 16px;
  text-align: center;
  color: #666;
  text-shadow: 0px 1px 0px rgba(255,255,255,0.5);
  background-color: #eee;
  background-image: linear-gradient(to bottom, #fff, #ddd);
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #d3d3d3;
}
.Scroller {
  position: absolute;
  width: 100%;
  top: 18px;
  bottom: 0px;
  overflow-y: auto;
  overflow-x: hidden;
}
.Label {
  min-width: 30px;
  padding-right: 10px;
}
.Label:empty:not(:active):not(:focus):before {
  content: "Untitled Function";
  font-style: italic;
  color: #ccc;
}
.Definition {
  white-space: nowrap;
}
.Definition:hover {
  background-color: #f2f9fc;
}
.Definition .PlotContainer {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 48px;
  height: 48px;
  border: 1px solid #eee;
  margin: 6px 6px;
}
.Definition.Selected .PlotContainer {
  outline: 1px solid #09c;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
}
.Definition .Label {
  display: inline-block;
  vertical-align: middle;
}
.DragHint {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  margin-left: 6px;
  margin-top: -12px;
  white-space: nowrap;
  padding: 6px;
  border-radius: 6px;
  background-color: #333;
  color: #eee;
  opacity: 0;
  transition: opacity 0.2s;
}
.PaletteHeader {
  padding: 6px 0 6px 12px;
  background-color: #f3f3f3;
}
.PaletteHeader:not(:first-child) {
  margin-top: 12px;
}
.AddDefinition {
  margin: 6px 0px;
  padding: 6px;
  text-align: center;
}
.PlotLocation {
  position: absolute;
}
.PlotContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #faf8f2;
  overflow: hidden;
}
.PointControlContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
}
.PointControl {
  position: absolute;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  border-radius: 6px;
  background-color: #09c;
  opacity: 0.25;
  z-index: 20;
}
.PointControl:hover {
  opacity: 1;
}
.LineControl {
  position: absolute;
  background-color: #0c9;
  z-index: 20;
  opacity: 0.5;
  width: 2px;
  height: 2px;
  margin: -1px;
}
.LineControl:hover {
  opacity: 1;
}
.LineControl:before {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 10px;
  margin: -10px;
}
.SettingsButton {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  font-size: 20px;
  color: #7fcce5;
  text-shadow: 0px 1px 3px rgba(0,0,0,0.5);
  cursor: pointer;
  opacity: 0.5;
}
.SettingsButton:hover {
  opacity: 1;
}
.OutlineCombinerToolbar {
  padding: 6px 0 6px 12px;
  background-color: #f3f3f3;
}
.OutlineCombinerToolbar .OutlineCombinerButton {
  padding-right: 6px;
  border-right: 1px solid #ccc;
  margin-right: 6px;
  cursor: pointer;
}
.OutlineCombinerToolbar .OutlineCombinerButton:hover {
  color: #09c;
}
.OutlineCombinerToolbar .OutlineCombinerButton:last-child {
  border-right: 0;
}
.Outline .Scroller > .OutlineChildren {
  margin-left: 0px;
}
.OutlineItem.Invisible {
  opacity: 0.25;
}
.OutlineRow {
  position: relative;
  white-space: nowrap;
}
.OutlineRow.Hovered {
  background-color: #f2f9fc;
}
.OutlineRow.Selected {
  background-color: #d8eff7;
}
.OutlineVisible {
  position: absolute;
  right: 6px;
  line-height: 42px;
  font-size: 18px;
  color: #bbb;
  opacity: 0;
}
.OutlineVisible:hover {
  color: #09c;
}
.OutlineRow:hover .OutlineVisible {
  opacity: 1;
}
.OutlineChildren {
  margin-left: 24px;
}
.OutlineDisclosure {
  display: inline-block;
  vertical-align: middle;
  padding: 6px;
}
.OutlineInternals {
  display: inline-block;
  vertical-align: middle;
  margin: 3px 6px;
}
.OutlineInternals .Label {
  display: inline-block;
  vertical-align: middle;
}
.OutlineThumbnail {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 36px;
  height: 36px;
  margin: 2px;
  border: 1px solid #eee;
}
.Placeholder {
  background-color: #bbb;
  box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5);
}
.DisclosureTriangle {
  width: 0;
  height: 0;
  margin: 0px 0.804px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10.392px solid #ddd;
  transition: -webkit-transform 0.05s;
}
.DisclosureTriangle.Expanded {
  -webkit-transform: rotate(90deg);
}
.DisclosureTriangle.Hidden {
  display: none;
}
table {
  border-collapse: collapse;
  width: 100%;
}
td,
th {
  width: 54px;
}
tr td:first-child,
tr th:first-child {
  width: 24px;
  color: #333;
  text-align: center;
}
tr td:last-child,
tr th:last-child {
  width: auto;
}
th {
  background-color: #f3f3f3;
}
.Translate td {
  border-bottom: 1px solid #eee;
}
.Variable,
th {
  padding: 2px 6px;
  text-align: left;
}
.Symbolic {
  text-align: center;
  font-size: 24px;
  margin: 0px 10px;
  border-radius: 8px;
  padding: 0px 4px;
  line-height: 36px;
  background-color: rgba(255,255,255,0.8);
}
.SymbolVector,
.SymbolMatrix {
  display: inline-table;
  position: relative;
  border-collapse: collapse;
}
.SymbolVector {
  top: -2px;
}
.SymbolMatrix {
  top: -10px;
  height: 36px;
}
.SymbolRow {
  display: table-row;
}
.SymbolRow > .SymbolCell {
  font-size: 12px;
}
.SymbolCell {
  display: table-cell;
  padding: 3px;
  font-size: 16px;
  line-height: 1;
  background-color: rgba(0,0,0,0.2);
}
.TextButton {
  cursor: pointer;
  font-size: 10px;
}
.TextButton:hover {
  color: #09c;
}
.AddButton {
  width: 18px;
  height: 18px;
  padding: 0;
  line-height: 18px;
  font-size: 9px;
  color: #777;
  font-family: verdana;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  background-color: #ddd;
  background-image: linear-gradient(to bottom, #eee, #ccc);
  box-shadow: 0 2px 1px rgba(0,0,0,0.16), 0 0 1px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.55);
  border-radius: 20px;
  border: 0px;
}
.AddButton:before {
  content: "+";
}
.AddButton:hover {
  background-image: linear-gradient(to bottom, #f3f3f3, #d3d3d3);
}
.AddButton:active {
  background-image: linear-gradient(to bottom, #cacaca, #d5d5d5);
  box-shadow: 0 1px 1px rgba(255,255,255,0.35), inset 0 0 1px rgba(0,0,0,0.5), inset 0 1px 4px rgba(0,0,0,0.4);
}