.file-upload {
  padding: 0;
  height: calc(1.5em + 0.4rem + 2px);
}

.custom-list-group-horizontal {
  flex-direction: row;
  justify-content: start;
}

.custom-list-group-item {
  position: relative;
  display: block;
  padding: 0.2rem 0.3rem 0.2rem 0;
  border: 0;
}

.custom-list-group-item:not(:last-child):after {
  content: " |";
}

#dataTable {
  table-layout: fixed;
  word-wrap: break-word;
}

.table th, .table td {
  padding: 0.75rem 0.5rem;
}

.answer-span {
  word-wrap: break-word;
  width: max-content;
  max-width: 200%;
  white-space: normal;
  border-radius: 1rem !important;
  line-height: 1.2rem;
  margin: 0.2rem 0 0;
}

.answer-span-100 {
  word-wrap: break-word;
  width: max-content;
  max-width: 100%;
  white-space: normal;
  border-radius: 1rem !important;
  line-height: 1.2rem;
  margin: 0.2rem 0 0;
}

.card-header > span:first-child {
  max-width: 80%;
}

.modal-body {
  max-height: 78vh; overflow-y: auto;
}

.text-success-hover:hover {
  color: #1cc88a;
}

.text-danger-hover:hover {
  color: #e74a3b;
}

.ui-pnotify-text > p:last-child {
  margin-bottom: 0;
}

.modalEvent {
  cursor: pointer;
}

.custom-accordion-button::after {
  margin-left: 1rem;
}

.custom-accordion-button p {
  margin-bottom: 0 !important;
}

.form-control:focus {
  box-shadow: none;
}

.mce-tinymce {
  border: 1px solid #d1d3e2;
  border-radius: 0.35rem;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

.mce-panel {
  border: 1px solid #d1d3e2;
  background-color: #fff;
  border-radius: 0.35rem;
}

.mce-top-part::before {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

.mce-toolbar-grp {
  border: 0 !important;
  border-bottom: 1px solid #d1d3e2 !important;
}

.mce-edit-area {
  border: 0 !important;
}

.mce-statusbar {
  border-top: 1px solid #d1d3e2;
  border-radius: 0.35rem;
}

.pagination {
  justify-content: center;
  margin-bottom: 0;
}

.dtr-control {
  cursor: pointer;
}

.remove-focus-box-shadow:focus {
  box-shadow: none;
}

.radio-buttons {
  width: 100%;
  margin: 1rem auto;
}

label.custom-radio {
  display: block;
}

.custom-radio input {
  display: none;
}

.radio-btn {
  border: 2px solid rgba(151, 153, 166, 0.3);
  display: block;
  border-radius: 0.2rem;
  position: relative;
  box-shadow: 0 0 10px #c3c3c367;
  cursor: pointer;
  padding: 0.5rem;
}

.radio-btn > i {
  color: #ffffff;
  background-color: #1cc88a;
  font-size: 17px;
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%) scale(2);
  border-radius: 50px;
  padding: 0.25rem;
  transition: 0.5s;
  pointer-events: none;
  opacity: 0;
  width: 1.5rem;
  height: 1.5rem;
}

.custom-radio input:checked + .radio-btn {
  border: 2px solid #1cc88a;
}

.custom-radio input:checked + .radio-btn > i {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.modal-body .form-group {
  margin-bottom: 0.5rem;
}

.remove-underscore {
  text-decoration: none;
  cursor: pointer !important;
}

.row.same-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.row.same-height > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

.row.same-height > [class*='col-'] > a, .row.same-height > [class*='col-'] > a > .card {
  height: 100%;
}


@media (max-width: 500px) {
  .media-library {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
  }
}

@media (max-width: 767px) { /* Adjust breakpoint as needed for mobile */
  .dataTables_wrapper .row:first-child {
    display: flex;
    flex-wrap: nowrap; /* Prevents wrapping onto a new line */
    justify-content: space-between; /* Puts space between the elements */
    align-items: flex-end; /* Vertically aligns items */
  }

  .dataTables_filter label,
  .dataTables_length label {
    display: flex; /* Makes the label and input behave as flex items */
    align-items: flex-end; /* Aligns "Search:" text with the input */
    margin-bottom: 0; /* Removes default margin issues */
  }

  .dataTables_filter input,
  .dataTables_length select {
    width: auto; /* Ensures inputs don't take full width */
    margin-left: 0.5rem; /* Adds a small space between label and input */
  }

  div.dataTables_length,
  div.dt-length {
    display: none !important;
  }

  /* Optional: Center the search bar since it's now alone */
  div.dataTables_filter,
  div.dt-search {
    float: none !important;
    text-align: end !important;
    width: 100%;
  }
}