/* Hover effect for confirm button */
.confirm-btn:hover {
    background-color: #ffffff !important; /* Green background */
    color: white !important; /* White text */
    border-color: #218838 !important; /* Darker green border */
    transition: 0.3s ease; /* Smooth transition */
}

/* Hover effect for deny button */
.deny-btn:hover {
    background-color: #ffffff !important; /* Red background */
    color: white !important; /* White text */
    border-color: #c82333 !important; /* Darker red border */
    transition: 0.3s ease; /* Smooth transition */
}

.error-message {
    color: red
}

/* Loading indicator */
.loader {
  width: 48px;
  height: 48px;
  border: 5px solid;
  border-color: #FF5100 transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

.loader-2 {
  width: 30px;
  height: 30px;
  border: 3px solid;
  border-color: #FF5100 transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

.loader-3 {
    width: 30px;
    height: 30px;
    border: 3px solid;
    border-color: white transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#extremely_dissatisfied_rating_img:hover {
  transform: scale(1.3);
  transition: 0.5s ease;
  overflow: hidden;
}

#dissatisfied_rating_img:hover {
  transform: scale(1.3);
  transition: 0.5s ease;
  overflow: hidden;
}

#okay_rating_img:hover {
  transform: scale(1.3);
  transition: 0.5s ease;
  overflow: hidden;
}

#satisfied_rating_img:hover {
  transform: scale(1.3);
  transition: 0.5s ease;
  overflow: hidden;
}

#extremely_satisfied_rating_img:hover {
  transform: scale(1.3);
  transition: 0.5s ease;
  overflow: hidden;
}

.tooltip-inner {
    background-color: #ff5100 !important; /* Change the background color */
    color: #ffffff !important; /* Optional: Change the text color */
    border-radius: 5px; /* Optional: Modify the border radius */
    max-width: 200px; /* Optional: Set maximum width */
    padding: 5px; /* Optional: Adjust padding */
}

.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-right .arrow::before,
.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-left .arrow::before {
    background-color: #ffffff !important; /* Make sure the tooltip arrow matches the background */
}