@media (max-width: 768px) {
  .smaller-font-table table,
  .smaller-font-table th,
  .smaller-font-table td {
      font-size: 0.8rem; /* Smaller font size for mobile devices */
  }
}
.form-check:hover {
  background-color: #f0f0f0; /* Light gray background on hover */
}

.longdate {
  mso-number-format:"Long Date";
  background-color: sandybrown;
}

.percentage-bar-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  /* height: 100%; */
  width: 24px; /* Adjust the width of the bar as needed */
  background-color: rgba(137, 21, 21); /* Adjust the color as needed */
  border: 1px solid black; /* Add a 1px black border */
  transform: translateX(-50%);
}
.percentage-bar-container.good
{
  background-color: #93c54b;
}
.percentage-bar-container.bad
{
  background-color: #d9534f;
}
.percentage-bar-container.average
{
  background-color: #f47c3c;
}

.bg-relopack-average {background-color: #f47c3c; color: white }
.bg-relopack-bad {  background-color: #d9534f; color: white }
.bg-relopack-good {  background-color: #93c54b; }

 /* Add some styles for the color icon */
 .color-icon-color-picker {
  width: 48px;
  height: 24px;
  display: inline-block;
  border: 1px solid #ccc;
  cursor: pointer;
}

   /* Make sure the dynamically created color input is not visible */
   .hidden-color-picker {
    position: absolute;
    visibility: hidden;
}

.highlight-droppable {
  background-color: #000000;  /* Light green background for highlighting */
  border: 5px dashed #28a745; /* Dashed border to indicate drop zones */
}

/* Slider? */
._final-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

._final-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

._final-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: background-color 2s ease, box-shadow 2s ease; /* Increased duration to 2s */
  border-radius: 34px;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.2); /* 3D effect */
}

._final-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: transform 2s ease, box-shadow 2s ease; /* Increased duration to 2s */
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Thumb shadow */
}

input:checked + ._final-slider {
  background-color: #03A9F4; /* Color transition when toggled */
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.3); /* Deeper shadow on toggle */
}

input:checked + ._final-slider:before {
  transform: translateX(26px); /* Move thumb to the right */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); /* Enhance thumb shadow on toggle */
}

._final-slider.round {
  border-radius: 34px; /* Rounded slider */
}

._final-slider.round:before {
  border-radius: 50%; /* Rounded thumb */
}


/* Progress bar test */


:root {
  --progress-bar-transform-animation-duration: 3s;
  --progress-bar-color: red;
}

.progress-bar-wrapper {
  width: 100%;
  height: 20px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.progress-bar-wrapper .progress-bar {
  background: var(--progress-bar-color);
  height: 20px;
  /* animation-duration: 3s; */
  animation-duration: var(--progress-bar-transform-animation-duration);
  animation-fill-mode: forwards;
  animation-name: load;
  /* animation: load 3s linear; */
  /* animation-fill-mode: forwards; */
  width: 0%;
}

@-webkit-keyframes load {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@keyframes load {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.dragging-row {
  opacity: 0.8;
  background-color: #f5f5f5;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 2px solid #ccc;
  transform: scale(1.01); /* Slightly enlarge to indicate it's being dragged */
}

.drop-target {
  background-color: #f0f0f0;
  border: 5px dashed #e30f0f !important;
}
.drop-target-hover {
  background-color: #e0e0e0;
  border-color: #555;
}

.draggable {
  z-index: 9999;
}

.ui-draggable-dragging {
  z-index: 9999 !important; /* Ensure the dragged helper is on top */
}

.custom-round-btn {
  border: 2px solid black;
  background-color: white;
  border-radius: 50%;
  padding: 8px;
}

.custom-trash-icon {
  color: red;
}