/* FuelMatrix mobile/WebView responsive overrides */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img, video, iframe, canvas, svg {
  max-width: 100%;
}

.table-responsive,
.table-wrapper,
.dataTables_wrapper {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

input, select, textarea, button {
  max-width: 100%;
}

@media (max-width: 991.98px) {
  .container-fluid,
  .container-scroller,
  .page-body-wrapper,
  .main-panel,
  .content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  .main-panel {
    margin-left: 0 !important;
  }

  .content-wrapper {
    padding: 1rem !important;
  }

  .navbar {
    min-height: 64px;
  }

  .navbar-brand-wrapper {
    width: 72px !important;
    min-width: 72px !important;
  }

  .navbar-menu-wrapper {
    width: calc(100% - 72px) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .navbar-nav-right {
    margin-left: auto !important;
  }

  .navbar .nav-profile-text {
    display: none !important;
  }

  .card,
  .auth-form-light {
    max-width: 100% !important;
    padding: 1rem !important;
  }

  .row {
    --bs-gutter-x: 1rem;
  }

  .modal-dialog {
    width: calc(100% - 1rem) !important;
    max-width: none !important;
    margin: 0.5rem auto !important;
  }

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

  table {
    font-size: 0.85rem;
  }

  .btn {
    white-space: normal;
  }

  .form-control,
  .form-select {
    min-height: 44px;
  }
}

@media (max-width: 575.98px) {
  .content-wrapper {
    padding: 0.75rem !important;
  }

  .navbar {
    min-height: 58px;
  }

  .navbar-brand {
    font-size: 0.95rem !important;
    max-width: 58px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-title,
  h1 {
    font-size: 1.35rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  h3 {
    font-size: 1.1rem;
  }

  .d-flex {
    flex-wrap: wrap;
  }

  .btn-group {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .btn-group > .btn {
    flex: 1 1 auto;
  }

  .table {
    min-width: 620px;
  }
}