.flexHeadingContainer {
  display: flex;
  gap: 15px;
}

.mdeGraphContainer {
  background-color: var(--color-gray);
  padding: 30px;
  border-radius: 5px;
  justify-content: space-between;
  min-width: 200px;
}

.mdeGraphContainer * {
  transition: opacity 1s;
}

.rateShaded {
  background-color: var(--color-light-blue);
  border-width: 1px;
  border-color: var(--color-black);
  border-style: solid;
  border-radius: 5px;
  width: 60px;
  height: 20px;
}
.rateShaded.left {
  border-radius: 0 5px 5px 0;
  border-width: 1px 1px 1px 0;
}
.rateShaded.right {
  border-radius: 5px 0 0 5px;
  border-width: 1px 0 1px 1px;
}

.rulerHoriz {
  height: 1px;
  border-top: 2px solid var(--color-black);
}

.rulerVert {
  height: 10px;
  width: 2px;
  border-left: 2px solid var(--color-black);
}

.resultTopContainer {
  background-color: var(--color-light-blue);
  display: flex;
  padding: 30px;
  border-radius: 5px 5px 0 0;
  justify-content: space-between;
  min-width: 200px;
}

.resultBottomContainer {
  background-color: var(--color-lime);
  border-radius: 0 0 5px 5px;
  padding: 30px;
  justify-content: center;
}