/* General styling for buttons, forms, etc. */
.equal-width-btn {
  width: 220px;
}

.is-invalid {
  border-color: #dc3545 !important;
}

.invalid-feedback {
  display: block;
  color: #dc3545;
}

body {
  font-size: 12pt;
}

/* Signature box styling */
.signature-box {
  height: 5em !important;
  line-height: normal;
  padding: 5px;
  background-color: #f8f9fa;
  border: 1px solid #ced4da;
  pointer-events: none;
}

/* Feedback box styling */
.feedback-box {
  height: 15em !important;
  line-height: normal;
  padding: 10px;
}

/* Adjust the width of the candidate, cadre, and date fields */
.short-width-container {
  max-width: 300px; /* Adjust this value to control the max width */
  margin-bottom: 15px;
}

.short-width-field {
  width: 100% !important; /* Ensure the field takes up the full container width */
}

@media screen {
  .short-width-field {
    width: 100% !important;
  }
}

.signature-field {
  display: block;
  margin-top: 10px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group div {
  margin-bottom: 15px;
}

/* Override to ensure the DateTimePicker elements are visible */
.bootstrap-datetimepicker-widget {
  background-color: #ffffff !important; /* Ensure a white background */
  color: #000000 !important; /* Ensure text is black */
  z-index: 9999 !important; /* Ensure the widget stays on top */
  font-size: 0.8rem !important; /* Reduce font size for a smaller picker */
}

/* Ensure the icons and text in the widget are visible */
.bootstrap-datetimepicker-widget .picker-switch,
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .datepicker-days th,
.bootstrap-datetimepicker-widget .datepicker-days td,
.bootstrap-datetimepicker-widget .datepicker-months span,
.bootstrap-datetimepicker-widget .datepicker-years span,
.bootstrap-datetimepicker-widget .datepicker-decades span,
.bootstrap-datetimepicker-widget .datepicker-centuries span {
  color: #000000 !important; /* Force black color for all text */
  font-size: 0.8rem !important; /* Smaller text size */
}

/* Ensure the current time/date selected is visible */
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
  background-color: #007bff !important; /* Bootstrap primary color */
  color: #ffffff !important;
}

/* Force visibility of the arrows and navigation icons */
.bootstrap-datetimepicker-widget .fa {
  color: #007bff !important; /* Blue for navigation icons */
}

/* Enforce border and padding for better visibility */
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
  padding: 5px !important; /* Smaller padding for compact layout */
  border: 1px solid #dee2e6 !important;
}

/* Hide the native date/time picker icon */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  display: none;
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  background-color: #fff;
  border-collapse: collapse;
}

.table th, .table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

.table-bordered {
  border: 1px solid #dee2e6;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0,0,0,.05);
}