@media (max-width: 767.98px) {
  .content-header {
    padding: var(--sys-space-2);
  }

  .content {
    padding: 0 var(--sys-space-2);
  }

  .main-header .form-inline {
    display: none;
  }

  .card-body {
    padding: var(--sys-space-3);
  }

  .modal-dialog {
    margin: var(--sys-space-2);
  }

  .table-responsive,
  .dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length {
    text-align: left;
  }

  .btn-group,
  .dataTables_wrapper .dt-buttons {
    flex-wrap: wrap;
    gap: var(--sys-space-1);
  }
}

@media (max-width: 575.98px) {
  .small-box h3 {
    font-size: 1.6rem;
  }

  .modal-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .modal-footer .btn {
    margin: var(--sys-space-1) 0;
  }
}