#text-layer {
    position: absolute;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     overflow: hidden;
     opacity: 0.3;
     line-height: 1.0;
     z-index: 3;
     /* mix-blend-mode: multiply; */
 }
.textLayer > span {
    color: transparent;
    position: absolute;
    white-space: pre;
    z-index: 3;
    cursor: text;
    transform-origin: 0% 0%;
  }
.textLayer > span {height:200px;}
  .textLayer .highlight {
    margin: -1px;
    padding: 1px;
    background-color: rgb(180, 0, 170);
    border-radius: 4px;
  }

  .textLayer .highlight.begin {
    border-radius: 4px 0px 0px 4px;
  }

  .textLayer .highlight.end {
    border-radius: 0px 4px 4px 0px;
  }

  .textLayer .highlight.middle {
    border-radius: 0px;
  }

  .textLayer .highlight.selected {
    background-color: rgb(0, 100, 0);
  }

  .textLayer ::selection { 
    /* background: rgb(0,0,255);  */
    /* background:  rgb(255, 196, 0); */
     background:  darkorange;
  }

  .textLayer .endOfContent {
    display: block;
    position: absolute;
    left: 0px;
    top: 100%;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    cursor: default;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }

.textLayer .endOfContent.active {
      top: 0px;
}

.textLayer .tl-highlight {
    background: yellow;
}
