/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 575px) {
  .app-content {
    padding: var(--ingenioc-space-3);
  }

  .app-content--with-header {
    padding-top: calc(var(--ingenioc-header-height) + var(--ingenioc-space-3));
  }

  .app-header__inner {
    padding-right: var(--ingenioc-space-3);
    padding-left: var(--ingenioc-space-3);
  }

  .page-header {
    flex-direction: column;
    margin-bottom: var(--ingenioc-space-4);
  }

  .page-header__actions {
    justify-content: flex-start;
    width: 100%;
  }

  .page-header__actions .btn {
    flex: 1 1 auto;
  }

  h1 {
    font-size: var(--ingenioc-font-size-2xl);
  }

  h2 {
    font-size: var(--ingenioc-font-size-xl);
  }

  .card__header,
  .card__body,
  .card__footer,
  .block,
  .modal__header,
  .modal__body,
  .modal__footer {
    padding: var(--ingenioc-space-3);
  }

  .modal {
    align-items: flex-end;
    padding: var(--ingenioc-space-0);
  }

  .modal__dialog {
    max-width: 100%;
    max-height: calc(100dvh - var(--ingenioc-space-8));
    border-right: var(--ingenioc-space-0);
    border-bottom: var(--ingenioc-space-0);
    border-left: var(--ingenioc-space-0);
    border-radius:
      var(--ingenioc-modal-radius)
      var(--ingenioc-modal-radius)
      var(--ingenioc-space-0)
      var(--ingenioc-space-0);
  }

  .table th,
  .table td {
    padding: var(--ingenioc-space-3);
  }
}