/*added css for gizmo*/
.obit-controls-gizmo {
  position: relative;
  /* Positioned relative to the container */
  z-index: 5;
  background-color: #FFF0;
  border-radius: 100%;
  transition: background-color 0.15s linear;
  cursor: pointer;
}


.ui.blue.button,
.ui.blue.buttons .button {
  background-color: #0F70E6;
}

.obit-controls-gizmo.dragging,
.obit-controls-gizmo:hover {
  background-color: rgba(145, 148, 148, 0.2);
}

.obit-controls-gizmo.inactive {
  pointer-events: none;
  background-color: #FFF0 !important;
}




/* Vernier Div Container - Centered */
.vernier-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 50%;
  display: none;
  background-color: #e6f5ff;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 20px;
}

/* Header */
#vcGirthNameHeader {
  text-align: center;
  margin-top: 10%;
}

/* Canvas Container */
#vcCanvasDiv {
  height: 50%;
  width: 100%;
  background-color: #e6f5ff;
  float: left;
}

/* Vernier Button Container */
#vernierButtonsContainer {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  background-color: white;
  padding: 5px;
  border-radius: 5px;
}

/* Vernier Buttons */
.vernier-button {
  background-color: #f2711c !important;
  margin: 5px 0;
}

/* Stop Profiling Button */
#stopProfilingButton {
  position: absolute;
  right: 10px;
  top: 10px;
}

/* Close Button */
.stop-button {
  background-color: #ff1b1b !important;
}


/* Rubber Band / Other Girth Div - Positioned at the Top-Right Corner */
#typeOfGirthButtonDiv {
  position: absolute;
  display: none;
  background: white;
  padding: 5px;
  border-radius: 5px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  top: 20px;
  right: 20px;
}

/* Girth Type Buttons */
#typeOfGirthButtonDiv .ui.button {
  color: #01a5bf !important;
  font-weight: bold;
}

/* Add spacing between buttons */
#typeOfGirthButtonDiv .or {
  margin: 0 5px;
}


/* Full-Screen Loader */
#loaderDiv {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Darker blur effect for better visibility */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* Ensure it appears above other elements */
  transition: opacity 0.3s ease-in-out; /* Smooth fade effect */
}

/* Loader Animation */
#loaderDiv .ui.dimmer {
  opacity: 0.6 !important; /* More noticeable dim effect */
  width: 100%;
  height: 100%;
}

/* Centered Loader */
#loaderDiv .ui.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Perfect centering */
}