#formulaView .card-body {
  overflow-x: auto;
  font-size: 14px;
}

.mq-editable-field,
.mq-math-mode .mq-editable-field {
  border: 1px solid #ced4da;
}

#formulaView .forall rect {
  stroke: none !important;
}

#formulaView .forall {
  font-size: 16px;
}

#formulaView .forall .sub {
  font-size: 12px;
}

#formulaView rect,
.hyperhyper #formulaView .relevant rect {
  fill: transparent;
  stroke: var(--gray-dark);
  stroke-width: inherit;
}

#formulaView .toplevel rect {
  stroke: var(--main-color) !important;
}

.hyperhyper #formulaView .expl-0 rect {
  stroke: var(--expl-0) !important;
}
.hyperhyper #formulaView .expl-1 rect {
  stroke: var(--expl-1) !important;
}
.hyperhyper #formulaView .expl-2 rect {
  stroke: var(--expl-2) !important;
}
.hyperhyper #formulaView .expl-3 rect {
  stroke: var(--expl-3) !important;
}
.hyperhyper #formulaView .expl-4 rect {
  stroke: var(--expl-4) !important;
}

.hyperhyper #formulaView rect {
  stroke: var(--gray);
}

.hyperhyper #formulaView .relevant.atomic rect {
  fill: var(--blue-lighter);
}

#formulaView g.atomic.highlight rect,
.hyperhyper #formulaView g.atomic.highlight rect,
.hyperhyper #formulaView g.atomic.highlight.relevant rect {
  fill: var(--blue-light);
  stroke: var(--blue);
  opacity: 1;
}

#formulaView g.atomic.highlight text {
  fill: var(--blue);
}

.hyperhyper #formulaView text {
  fill: var(--gray-dark);
}

.hyperhyper #formulaView text tspan.trace-0,
.hyperhyper #formulaView text tspan.trace-1 {
  fill: var(--gray-dark);
}

.hyperhyper #formulaView .relevant text {
  fill: black;
}

#formulaView text tspan.trace-0,
.hyperhyper #formulaView .relevant text tspan.trace-0 {
  fill: var(--trace-0);
}

#formulaView text tspan.trace-1,
.hyperhyper #formulaView .relevant text tspan.trace-1 {
  fill: var(--trace-1);
}

#formulaView g {
  font-size: inherit;
  stroke-width: 2;
}

#formulaView g.hover.atomic rect,
.hyperhyper #formulaView g.hover.atomic rect,
.hyperhyper #formulaView g.hover.atomic.relevant rect {
  fill: var(--gray-light);
  stroke: var(--blue);
}

#formulaView g.hover rect,
.hyperhyper #formulaView g.hover rect {
  stroke: var(--gray-darker);
  fill: var(--gray-light);
}

.hyperhyper #formulaView g.hover.relevant rect {
  stroke: var(--gray-darker);
}

#latex-logo {
  width: 40px;
}

#latex {
  font-size: 14px;
  overflow: auto;
}

#math-field,
#plain-text-math-field {
  font-size: 14px;
  min-height:50px;
  border-radius: 0;
  flex: 1 1 auto;
}

.mq-root-block {
  padding: 10px ! important;
}

.f-btn {
  border-radius: 0;
  border: 1px solid #ced4da;
}

.input-group.toggleable {
  display: none;
}

#formula-input-group {
  overflow: auto;
}

#formula-input-group .input-group-prepend {
  width: 100%;
}

#formulaBox g.highlight rect.highlight_line {
  fill: var(--blue-light);
  stroke: var(--blue);
  opacity: 0.2;
}

#formulaBox g.highlight text {
  fill: var(--blue);
}

#formulaBox g.atomic.highlight rect,
.hyperhyper #formulaBox g.atomic.highlight rect,
.hyperhyper #formulaBox g.atomic.highlight.relevant rect {
  fill: var(--blue-light);
  stroke: var(--blue);
  opacity: 1;
}

#formulaBox g.highlight rect.highlight_box{
  opacity: 0;
}

#formulaBox g.hover rect.highlight_box, 
.hyperhyper #formulaBox g.hover rect.highlight_box
.hyperhyper #formulaBox g.atomic.highlight.relevant rect.highlight_box{
  opacity: 0.4;
}

#formulaBox g.atomic.highlight text {
  fill: var(--blue);
}

#check-id {
  border-radius: 0px;
}