@media (max-width: 767px) {
  .modal-header .modal-title {
    font-size: 20px !important;
  }

  .mb-4 h2 {
    font-size: 22px !important;
  }

  .mb-4 p {
    font-size: 13px !important;
  }

  .table-header-custom th {
    font-size: 11px !important;
    padding: 10px 8px !important;
    white-space: nowrap;
  }

  .table-row-custom td {
    font-size: 11px !important;
    padding: 10px 8px !important;
  }

  .badge-status {
    font-size: 10px !important;
    padding: 6px 8px !important;
  }

  .btn-action-icon {
    width: 32px !important;
    height: 32px !important;
    margin: 0 2px !important;
  }

  .btn-action-icon i {
    font-size: 14px !important;
  }

  .text-center.py-5 {
    padding: 2rem 1rem !important;
  }

  .text-center.py-5 i {
    font-size: 2.5rem !important;
  }

  .text-center.py-5 p {
    font-size: 13px !important;
  }

  .pagination .page-link {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  .modal-dialog {
    margin: 0.5rem !important;
  }

  .modal-body h5 {
    font-size: 15px !important;
    margin-bottom: 1rem !important;
  }

  .modal-body label {
    font-size: 12px !important;
  }

  .modal-body .fs-6,
  .modal-body div:not(#detailGrandTotal):not(#detailCoupons .fs-4) {
    font-size: 12px !important;
  }

  #detailGrandTotal {
    font-size: 18px !important;
  }

  #detailCoupons .fs-4 {
    font-size: 16px !important;
  }

  #detailCoupons .btn {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  #detailPaymentLink {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }

  .modal-footer .btn {
    font-size: 13px !important;
    padding: 8px 16px !important;
  }

  .sidebar-content .flex-grow-1 {
    padding: 1rem !important;
  }

  .toggle-sidebar-btn {
    font-size: 1.25rem !important;
  }

  .alert {
    font-size: 11px !important;
    padding: 10px !important;
  }

  td span[data-bs-toggle="tooltip"] {
    max-width: 100px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #detailLinks .btn-sm {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  #detailLinks span {
    font-size: 10px !important;
    padding: 6px 10px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .modal-header .modal-title {
    font-size: 22px !important;
  }

  .mb-4 h2 {
    font-size: 26px !important;
  }

  .mb-4 p {
    font-size: 14px !important;
  }

  .table-header-custom th {
    font-size: 12px !important;
    padding: 12px 10px !important;
  }

  .table-row-custom td {
    font-size: 12px !important;
    padding: 12px 10px !important;
  }

  .badge-status {
    font-size: 11px !important;
    padding: 7px 10px !important;
  }

  .btn-action-icon {
    width: 34px !important;
    height: 34px !important;
  }

  .btn-action-icon i {
    font-size: 16px !important;
  }

  .modal-body h5 {
    font-size: 16px !important;
  }

  #detailGrandTotal {
    font-size: 20px !important;
  }

  .sidebar-content .flex-grow-1 {
    padding: 2rem !important;
  }
}

@media (max-width: 767px) {
  .text-gradient.section-text {
    font-size: 22px !important;
  }

  .filter-card .card-body {
    padding: 1rem !important;
  }

  .filter-field label {
    font-size: 11px !important;
  }

  .form-control-custom,
  .form-select-custom {
    font-size: 13px !important;
    height: 40px !important;
    padding: 8px 12px !important;
  }

  .input-icon-container input {
    padding-left: 2rem !important;
  }

  .input-icon-container i {
    font-size: 0.85rem !important;
    left: 10px !important;
  }

  .btn-filter,
  .btn-reset-custom {
    font-size: 12px !important;
    padding: 10px 16px !important;
    min-width: 90px !important;
  }

  .card-table {
    overflow-x: auto !important;
  }

  .table-custom thead th {
    font-size: 11px !important;
    padding: 10px 8px !important;
    white-space: nowrap !important;
  }

  .table-custom tbody td {
    font-size: 11px !important;
    padding: 10px 8px !important;
  }

  .table-custom thead th a {
    font-size: 11px !important;
  }

  .table-custom thead th a i {
    font-size: 10px !important;
  }

  .btn-teal {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  .btn-danger {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  .badge {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  .text-center.py-5 p {
    font-size: 13px !important;
  }

  .text-center.py-5 .btn {
    font-size: 12px !important;
    padding: 8px 16px !important;
  }

  .pagination .page-link {
    font-size: 11px !important;
    padding: 5px 8px !important;
  }

  .mt-5 h4 {
    font-size: 18px !important;
  }

  #tableMkva thead th {
    font-size: 11px !important;
    padding: 10px 8px !important;
  }

  #tableMkva tbody td {
    font-size: 11px !important;
    padding: 10px 8px !important;
  }

  .container-fluid.p-4 {
    padding: 1rem !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .text-gradient.section-text {
    font-size: 26px !important;
  }

  .filter-card .card-body {
    padding: 1.5rem !important;
  }

  .filter-field label {
    font-size: 12px !important;
  }

  .form-control-custom,
  .form-select-custom {
    font-size: 14px !important;
    height: 42px !important;
  }

  .btn-filter,
  .btn-reset-custom {
    font-size: 13px !important;
    padding: 10px 18px !important;
    min-width: 100px !important;
  }

  .table-custom thead th {
    font-size: 12px !important;
    padding: 12px 10px !important;
  }

  .table-custom tbody td {
    font-size: 12px !important;
    padding: 12px 10px !important;
  }

  .btn-teal {
    font-size: 12px !important;
    padding: 7px 12px !important;
  }

  .btn-danger {
    font-size: 12px !important;
    padding: 7px 12px !important;
  }

  .badge {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }

  .pagination .page-link {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  .mt-5 h4 {
    font-size: 20px !important;
  }

  .container-fluid.p-4 {
    padding: 2rem !important;
  }
}