/* Container for the Evaluate component */
.evaluate-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

/* Form Control */
.evaluate-form-control {
  width: 100%;
}

/* Input label */
.evaluate-form-control .MuiInputLabel-root {
  color: #26a8dc !important;
}
.evaluate-form-control .MuiInputLabel-root.Mui-focused {
  color: #26a8dc !important;
}

/* Dropdown arrow icon */
.evaluate-form-control .MuiSelect-icon {
  color: #26a8dc !important;
}

/* Select’s OutlinedInput */
.evaluate-outlined-input {
  background-color: transparent !important;
  color: #26a8dc !important;
}

/* Override the default notched outline to have a #ddd border */
.evaluate-outlined-input .MuiOutlinedInput-notchedOutline {
  border-color: #26a8dc !important;
}

/* Container for the rendered chips */
.chip-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.65rem !important;
}

/* Chips */
.evaluate-chip {
  background-color: #b70303 !important;
  color: #fff !important;
  border-radius: 0.5rem !important;
}

/* Remove background from chip close button and make its icon #ddd */
.evaluate-chip .MuiChip-deleteIcon {
  background: none !important;
  color: #ddd !important;
}

/* Styling for the dropdown menu */
.evaluate-menu {
  background-color: #2b2b2b !important;
  border: 0.01rem solid #26a8dc !important;
  color: #ddd !important;
}

/* Dropdown menu item hover effect: lighter shade */
.evaluate-menu .MuiMenuItem-root:hover {
  background-color: #3b3b3b !important;
}

/* Dropdown menu item selected effect */
.evaluate-menu .MuiMenuItem-root.Mui-selected {
  background-color: #4b4b4b !important;
}

/* Evaluate button styling */
.evaluate-button {
  background-color: #FFC300 !important;
  color: #2b2b2b !important;
  width: auto !important;
  padding: 6px 16px !important;
  align-self: flex-start !important;
}

.evaluate-button:hover {
  background-color: #b07508 !important;
  color: #ddd !important;
}

/* No metrics message */
.no-metrics-message {
  text-align: center;
  color: red;
}

/* Spinner styling */
.custom-spinner {
  width: 1.35rem;
  height: 1.35rem;
  border: 3px solid #3b7bdc;        /* Main Spinner */
  border-top: 3px solid #434343;     /* Rotating path */
  border-radius: 50%;
  animation: spin 0.9s linear infinite; 
}

/* Spinner animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}