/*
    See the JupyterLab Developer Guide for useful CSS Patterns:

    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
*/
.grabbing {
  cursor: grabbing !important;
}

.grab {
  cursor: grab !important;
}

.react-flow__nodesselection-rect {
  display: none;
}

.image-cropper-wrapper {
  width: 100%;
  /* Fit the parent width */
  height: 100%;
  /* Fit the parent height */
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: top left;
  overflow: hidden;
  /* Hide overflow to avoid large scaling issues */
}

/* Adjust max-width and max-height or aspect ratio depending on requirements */
.react-cropper-container {
  max-width: 100%;
  /* Fit within the parent's width */
  max-height: 100%;
  /* Fit within the parent's height */
  object-fit: contain;
  /* Ensures proper aspect ratio is maintained */
}

/* Container for the progress bar */
.progress-bar-container {
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
}


@keyframes move {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

.progress-bar-filler {
  background-color: #4caf50;
  height: 100%;
  position: absolute;
  width: 10%;
  animation: move 1.5s linear infinite;
}

.react-flow__edge.selected .react-flow__edge-path,
.react-flow__edge.selectable:focus .react-flow__edge-path,
.react-flow__edge.selectable:focus-visible .react-flow__edge-path {
  stroke: var(--vpl-blue-1) !important;
}