/* Responsive safety layer for the converted standalone Bootstrap pages. */
html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

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

.table-responsive,
[class*="table-responsive"] {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-dialog {
  max-width: calc(100vw - 24px);
  margin-right: auto;
  margin-left: auto;
}

.offcanvas,
.dropdown-menu {
  max-width: calc(100vw - 16px);
}

.page-wrapper,
.content,
.container,
.container-fluid,
.card,
.card-body,
.row > * {
  min-width: 0;
}

.text-truncate,
td,
th,
p,
a,
label {
  overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
  .page-wrapper {
    width: 100%;
  }

  .content {
    padding-right: clamp(12px, 3vw, 24px);
    padding-left: clamp(12px, 3vw, 24px);
  }

  .card-body {
    padding: clamp(14px, 3vw, 24px);
  }
}

@media (max-width: 575.98px) {
  .content {
    padding-right: 12px;
    padding-left: 12px;
  }

  .page-header,
  .page-title,
  .d-flex.align-items-center.justify-content-between {
    flex-wrap: wrap;
    gap: 10px;
  }

  .btn-list,
  .d-flex.gap-2,
  .d-flex.gap-3 {
    flex-wrap: wrap;
  }

  .pagination {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}