body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 20px;
}

h1 {
  margin-bottom: 20px;
  color: #333; /* Darker color for better readability */
}

.sidebar {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px; /* Added padding for better spacing */
}

textarea {
  height: 200px;
  resize: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px; /* Added padding for better text visibility */
}

pre {
  background: #f8f8f8;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: auto;
  white-space: pre-wrap;
  margin: 10px 0; /* Added margin for spacing */
}

.buttons {
  margin-top: 15px;
}

.counters {
  font-weight: bold;
  color: #555; /* Slightly lighter color for contrast */
}

.custom-file-input {
  position: relative;
  display: inline-block;
  padding: 10px 15px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  background-color: #fff;
  color: #495057;
  cursor: pointer;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.custom-file-input:hover {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-file-input:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  outline: none;
}

.custom-file-input::-webkit-file-upload-button {
  display: none; /* Hide the default file upload button */
}

.custom-file-input::before {
  content: "Choose File"; /* Custom button text */
  display: inline-block;
  padding: 10px 15px;
  border: 1px solid #007bff;
  border-radius: 0.25rem;
  background-color: #007bff;
  color: #fff; /* Changed to white for better contrast */
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s; /* Smooth transition */
}

.custom-file-input:hover::before {
  background-color: #0056b3; /* Darker shade on hover */
}

.custom-file-input:focus::before {
  outline: none;
}

#uploadButton {
  width: 100%; /* Full width for the button */
  padding: 10px; /* Consistent padding */
  border-radius: 0.25rem; /* Rounded corners */
  background-color: #007bff; /* Button background */
  color: #fff; /* Button text color */
  border: none; /* Remove default border */
  cursor: pointer; /* Pointer cursor */
  transition: background-color 0.2s;
}

#uploadButton:hover {
  background-color: #0056b3; /* Darker shade on hover */
}

.textarea {
  width: 100%; /* Full width of the container */
  height: 400px !important; /* Fixed height */
  padding: 10px; /* Padding for inner spacing */
  border: 1px solid #ced4da; /* Light border */
  border-radius: 0.25rem; /* Rounded corners */
  font-family: Arial, sans-serif; /* Font style */
  font-size: 16px; /* Font size */
  color: #495057; /* Text color */
  background-color: #fff; /* Background color */
  resize: both; /* Allow resizing both horizontally and vertically */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transition: border-color 0.2s, box-shadow 0.2s; /* Smooth transition */
}

.textarea:focus {
  border-color: #007bff; /* Border color on focus */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Shadow on focus */
  outline: none; /* Remove default outline */
}

/* Checkbox Styles */
.form-check {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.form-check-input {
  width: 1.5em;
  height: 1.5em;
  margin-right: 10px;
  cursor: pointer; /* Pointer cursor */
}

.form-check-label {
  cursor: pointer; /* Pointer cursor for label */
}