body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 15px;
  margin: 0;
}

.deploy-background {
  background: #fffde7;
}

.call-background {
  background: #f8f2ff;
}

.styled-tooltip {
  background-color: #ffffff !important;
  color: #9b9fa8 !important;
  padding: 1.5rem !important;
  opacity: 1 !important;
  -webkit-box-shadow: 0px 6px 50px 0px rgba(10, 10, 10, 0.4) !important;
  -moz-box-shadow: 0px 6px 50px 0px rgba(10, 10, 10, 0.4) !important;
  box-shadow: 0px 6px 50px 0px rgba(10, 10, 10, 0.4) !important;
}

.styled-tooltip span {
  font-weight: 400 !important;
}

.styled-tooltip * {
  font-size: 0.8rem !important;
}

.batches-tooltip {
  max-width: 231px !important;
}

.batches-tooltip div {
  font-weight: 400 !important;
}

.flow-tooltip {
  max-width: 391px !important;
}

span.future-to-module-arrow {
  font-weight: 900 !important;
  font-size: medium !important;
  letter-spacing: -2px;
}

/* mermaid styles */

.mermaid {
  background: #fbfbfb;
  height: 500px;
}

.mermaid * {
  font-family: "Roboto", sans-serif;
  font-size: 30px;
}

.mermaid svg {
  height: 100%;
  vertical-align: middle;
  max-width: unset !important;
}

.mermaid span {
  cursor: default;
}

.mermaid rect {
  rx: 5;
  ry: 5;
}

/* selects moduleIds only */
.clusters .nodeLabel {
  font-weight: 700;
}

.futureNode rect {
  stroke: none !important;
}
