#canvasContainer {
  position: relative;
  background-color: lightgray;
/*
  overflow-x: auto;
  overflow-y:auto; 
*/
  display: flex;
  align-items: center; 
  justify-content: center; 
  width:100%;height:100%;
  z-index:0;
}

#canvas, 
#backdropCanvas, 
#backgroundColorCanvas, 
.canvases,
.track-layer {
  position: absolute;
  width: auto; 
  height: auto;
  max-width: none; 
  background-color: transparent !important;
  image-rendering: auto; 
  
}


#lassoSelectOverlay , #lassoFillOverlay , #rectOverlay{
position:absolute; top:0; left:0; z-index:10;
}

#cameraOverlay {
z-index:10;
}

.pixelated-rendering {
  image-rendering: pixelated !important;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

#backgroundColorCanvas {
  background-color: white !important;
  z-index: -1;
}

#canvas { 
  z-index: 1;
  cursor: crosshair;
}


#brushCursor {
  position: fixed;
  pointer-events: none; /* clicks pass through to canvas */
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); /* Inverted outline */
  border-radius: 50%;
  display: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  image-rendering: pixelated; 
}