.purses-gameuiW {
  border: 1px solid red;
  width: 100%;
  overflow: scroll;
}

.purses-gameui {

  .Origin::before {
    position: absolute;
    top: -1em;
    content: "";
    margin-left: -1em;
    border: 1em solid transparent;
    border-top: 1em solid black;
  }
  .Origin {
    position: absolute;
    top: 0;
    // background: rgba(255,255,0, 0.5);
    height: 100%;
    width: 100%;

    > .label {
      width: 300px;

      position: absolute;
      top: -1.5em;
      left: 1.2em;
      z-index: 2;
    }
  }
  .PositionW.short_debit_put_spread {
    background: rgba(255,153,0, 0.25);
  }
  .PositionW {
    top: 0;
    border: 2px solid black;
    background: rgba(0,255,255, 0.25);
    position: absolute;
    height: 100%;
  }
  .reviewing {
    .PositionW {
      border-radius: 10px 10px 0 0;
      height: 90%;
    }
  }

  .Position {
    position: absolute;
    width: 100%;
    height: 90%;

    left: 0;
    top: 0;
  }


  /* only for covered calls */
  .PositionC {
    background: rgba(255,153,51, 0.5);
    position: absolute;

    /* HEREHERE: either left, or right 0, this orange strip flips. */
    // left: 0;
    right: 0;

    width: 10000px;
    height: 100%;
  }

  .MaxGain,
  .Breakeven {
    position: absolute;
    right: 0;
    bottom: -10%;
    border: 2px dotted green;
    background: rgba(0,255,0, 0.5);
    height: 10%;
  }

  .sprite {
    position: absolute;
  }
  .sprite-bottom {
    bottom: 0;
  }

  .StockCoordinatesW {
    // width: 500px;

    // background: var(--iro-color-bg2);
    // border: 1px solid red;
    margin-bottom: 2em;

    position: relative;

    z-index: 1;
  }
  .StockCoordinates {
    border-left: 1px solid var(--iro-color-grid1);
    border-bottom: 1px solid var(--iro-color-grid1);

    margin-left: 50%;
    margin-bottom: 0em;

    position: relative;

    .Last {
      border-left: 2px dotted red;
    }
    .label {
      width: 200px;
      color: gray;
      // border: 1px solid cyan;
    }

    .marker {
      position: absolute;
      height: 100%;
    }

    .Net {
      position: absolute;
      // bottom: 3em;
      // z-index: 3;
      height: 90%;

      // border-bottom: 5px solid red;
      .label {
        color: white;
        text-shadow: 1px 1px black;
      }
    }
    .NetPositive {
      border: 2px dashed #339966;
      background: rgba(32,64,96, 0.5);
    }
    .NetNegative {
      background: rgba(255,0,0, 0.75);
    }


    // .grid-mark:nth-child(4n + 1) {
    //   border: 1px solid red;
    //   display: none;
    // }
    // .grid-mark:nth-child(4n) {
    //   border: 1px solid red;
    //   display: none;
    // }
    // .grid-mark:nth-child(6n + 1) {
    //   border: 1px solid red;
    //   display: none;
    // }
    // .grid-mark:nth-child(6n) {
    //   border: 1px solid red;
    //   display: none;
    // }
    // .grid-mark:nth-child(3n + 1) {
    //   border: 1px solid red;
    //   display: none;
    // }
    // .grid-mark:nth-child(3n) {
    //   border: 1px solid red;
    //   display: none;
    // }

    .grid-mark {
      // border: 1px solid red;

      height: 100%;
      position: absolute;
      top: 0;
      width: 100px;
      z-index: -2;
      border-left: 1px dashed var(--iro-color-grid1);

      .label::before {
        content: "";
        position: absolute;
        left: -1em;
        width: 1em;
        height: 1em;
        border: 1em solid transparent;
        border-left-color: white;
      }
      .label {

        // border: 1px solid red;

        transform: rotate(-45deg);
        transform-origin: center left;

        font-size: 0.8em;

        position: absolute;
        height: 1em;
        line-height: 1em;
        bottom: -0em;
        z-index: -2;
        width: 0;

        .labelC {
          background: white;
          position: absolute;
          top: 1.5em;
          left: -1.5em;
        }
      }
    }


  }

}