#wrapper-canvas canvas {
  max-width: 100%;
}

input,
textarea {
  background-color: #f9fafb; /* bg-gray-50 */
  border: 2px solid #d1d5db; /* border-gray-300 */
  outline: none; /* outline-none */
  color: #111827; /* text-gray-900 */
  font-size: 0.875rem; /* text-sm (14px) */
  border-radius: 0.5rem; /* rounded-lg */
  display: block; /* block */
  width: 100%; /* w-full */
  padding-left: 2.5rem; /* ps-10 (40px) */
  padding: 0.625rem; /* p-2.5 (10px) */
}

ibutton {
  width: 100%; /* w-full */
  color: white; /* text-white */
  background-color: #1788ae; /* bg-[#1788ae] */
  font-weight: 500; /* font-medium */
  border-radius: 0.5rem; /* rounded-lg */
  font-size: 0.875rem; /* text-sm (14px) */
  padding: 0.625rem 1.25rem; /* py-2.5 (10px) and px-5 (20px) */
  margin-right: 0.5rem; /* me-2 (8px) */
  margin-bottom: 0.5rem; /* mb-2 (8px) */
  outline: none; /* focus:outline-none */
  transition: background-color 0.2s ease; /* Smooth transition for hover */
}

textarea:focus,
input:focus {
  box-shadow: 0 0 0 2px rgba(23, 136, 174, 0.5); /* This creates a ring effect */
  outline: none; /* Prevents default outline */
  border-color: #1788ae; /* focus:border-[#1788ae] */
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  textarea,
  input {
    background-color: #374151; /* dark:bg-gray-700 */
    border-color: #4b5563; /* dark:border-gray-600 */
    color: #ffffff; /* dark:text-white */
  }

  textarea,
  input::placeholder {
    color: #9ca3af; /* dark:placeholder-gray-400 */
  }
}