@import 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css';

.tag-correct {
  background-color: #077A57; /* custom green */
  color: white;
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
}

.tag-incorrect {
  background-color: #ef4444; /* red-500 */
  color: white;
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
}

.tag-cleared {
  background-color: #fb923c; /* orange-500 */
  color: white;
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
}

.clear-button {
  background-color: #ef4444; /* red-500 */
  color: white;
  font-weight: bold;
  padding: 0.5rem 1.5rem;
  border-radius: 0.25rem;
}

.clear-button:hover {
  background-color: #dc2626; /* red-600 */
}

.clear-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.highlight-correct {
  background-color: #077A57; /* custom green */
  color: white;
  border-radius: 0.25rem;
  padding-left: 5px;
  padding-right: 5px;
  transition: background-color 0.3s ease;
}

.highlight-incorrect {
  background-color: #ef4444; /* red-500 */
  color: white;
  border-radius: 0.25rem;
  padding-left: 5px;
  padding-right: 5px;
  transition: background-color 0.3s ease;
}

.check-button {
  background-color: #077A57; /* custom green */
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.check-button:hover {
  background-color: #055f42; /* darker custom green */
}