.box {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .box {
    margin-bottom: 20px;
  }
}

.starting-balance, .closing-balance {
  width: 100%;

  h5 {
    text-align: center;
  }
}

.nodes {
  display: none;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;

  @media (max-width: 768px) {
    display: flex;
	}
}

.balances {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;

  .balance {
    &.left {
      text-align: start;
    }
    &.right {
      text-align: end;
    }
  }
}

.balance-bar {
  width: 100%;
  height: 2em;
  position: relative;

  .bar {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    &.left {
      background: var(--primary);
    }
    &.center {
      background: repeating-linear-gradient(
        60deg,
        var(--primary) 0,
        var(--primary) 12px,
        var(--success) 12px,
        var(--success) 24px
      );
    }
    &.right {
      background: var(--success);
    }

    .value {
      flex: 0;
      white-space: nowrap;
    }

    &.hide-value {
      .value {
        display: none;
      }
    }
  }

  @media (max-width: 768px) {
    height: 1em;

    .bar.center {
      background: repeating-linear-gradient(
        60deg,
        var(--primary) 0,
        var(--primary) 8px,
        var(--success) 8px,
        var(--success) 16px
      )
    }
	}
}