.whiteBoard{
  
  position:absolute; 
 /* width:100%;
 	height :100%;*/
 	top:0;
  left:0;
}
.hidePen{
  display:none;
}
.paint{
  top:0;
  left:0;
  position: absolute; 
  height:100%;
  width:100%;
  z-index: 1;
}
.noPaint {	
  top:0;
  left:0;
  position: absolute; 
  height:100%;
  overflow:visible;
  pointer-events: none;
  background: none !important;
  z-index: 1;
}
.canvas{
  top:0;
  left:0;
  position: absolute;
  touch-action: none;

}
#canvas2{
  touch-action: none;
}
.whiteBoardForward{
   z-index:1;
}
.whiteBoardBack{
   z-index:-1;
}
.penHolder{
  position:fixed;
  top: 300px;
  z-index:10;
}
.penOptions{
  
  z-index:2;
  border-radius:5%;
  background-color:#999;
  color:#111;
  width:100px;
  
}
.toolBar{
  z-index:5;
  position: absolute;
  top:0px;
  /* border-radius:5%; */
  background-color:#fff;
  color:#111;
  width:70px;
  resize:both;
  overflow:hidden;
  border-style:solid;

}
.help{
  background-color:white;
  color:black;
  position: absolute;
  
  width:300px;
  left:100px;
  
}
.inline{
  display: inline;
}
.penImg{
  width:100px;
  cursor:move;  
}

#theBoard{
  height:1000px;
  width:100%; 
  background-color: #ffffff;
}

.hidden{
  display: none;
}

.bElement{
    position:absolute;
    z-index:0;
    background-color:rgba(0,0,0,0);
  }
  
  
  .eHolderActive{
    opacity:1;
    display: inline-block;
    
  }
  .eHolder{
    opacity:0.5;
    text-align: left;
  }
  
  .eHolder:hover{
    opacity:1;
    
  }
  .cHolder{
    position:relative;
    overflow:auto;
    resize:both;
    border:1px  solid transparent; 
    text-align: left;
  }
  .cHolder:hover{
   border:1px black solid; 
    
    
  }
  .content{
    width:100%;
    height:100%;
    
  }
  img{
    width:100%;
  }
  textarea{
    resize:both;
    
  }
.inline{
  display:inline-block
}
.grid {
  height: 16rem;
  background-image:
      linear-gradient(to right, rgb(203 213 225) 1px, transparent 1px),
      linear-gradient(to bottom, rgb(203 213 225) 1px, transparent 1px);
  background-size:2.5rem 2.5rem;
  background-position: top left;
}
.dotGrid {
  height: 16rem;
  background-image: radial-gradient(circle, rgb(203 213 225) 2px, #fff 2px);
  background-size: 2.5rem 2.5rem;
  /* background-position: top left; */
}