/** 
 * Essential common styles only. Everything else
 * is contained in extra 'theme' stylesheets.
 */
.a9s-annotationlayer {
  box-sizing: border-box;
  height: 100%;
  left: 0;
  outline: none;
  position: absolute;
  top: 0;
  touch-action: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; 
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
}

.a9s-annotationlayer.hover {
  cursor: pointer;
}

.a9s-annotationlayer.hidden {
  display: none;
}

.a9s-annotationlayer ellipse, 
.a9s-annotationlayer line, 
.a9s-annotationlayer path,
.a9s-annotationlayer polygon,
.a9s-annotationlayer rect  {
  fill: transparent;
  shape-rendering: geometricPrecision;
  vector-effect: non-scaling-stroke;
  -webkit-tap-highlight-color: transparent;
}

.a9s-touch-halo {
  fill: transparent;
  pointer-events: none;
  stroke-width: 0;
  transition: fill 150ms;
}

.a9s-touch-halo.touched {
  fill: rgba(255, 255, 255, 0.4);
}

.a9s-handle-buffer {
  fill: transparent;
}

.a9s-handle [role="button"] {
  cursor: inherit !important; /** Overrides default Tailwind cursor! **/
}

.a9s-handle-dot {
  fill: #fff;
  pointer-events: none;
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.a9s-handle-dot.selected {
  fill: #1a1a1a;
  stroke: none;
}

.a9s-handle-selected {
  animation: dash-rotate 350ms linear infinite reverse;
  fill: rgba(255, 255, 255, 0.25);
  stroke: rgba(0, 0, 0, 0.9);
  stroke-dasharray: 2 2;
  stroke-width: 1px;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

@keyframes dash-rotate {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 4; /* Sum of dash + gap */
  }
}

.a9s-edge-handle {
  fill: transparent;
  stroke: transparent;
  stroke-width: 6px;
  vector-effect: non-scaling-stroke;
}

.a9s-shape-handle {
  cursor: move;
}

.a9s-handle {
  cursor: move;
}

.a9s-handle.a9s-corner-handle {
  cursor: crosshair;
}

.a9s-edge-handle-top {
  cursor: n-resize;
}

.a9s-edge-handle-right {
  cursor: e-resize;
}

.a9s-edge-handle-bottom {
  cursor: s-resize;
}

.a9s-edge-handle-left {
  cursor: w-resize;
}

.a9s-handle.a9s-corner-handle-topleft {
  cursor: nw-resize;
}

.a9s-handle.a9s-corner-handle-topright {
  cursor: ne-resize;
}

.a9s-handle.a9s-corner-handle-bottomright {
  cursor: se-resize; 
}

.a9s-handle.a9s-corner-handle-bottomleft {
  cursor: sw-resize;
}