html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

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

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

.h5-page {
  width: min(100% - 32px, 1200px);
  margin-inline: auto;
}

.h5-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.h5-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.h5-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 680px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }

  .h5-page {
    width: calc(100% - 28px);
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }

  .h5-grid {
    grid-template-columns: 1fr;
  }

  .h5-actions > button,
  .h5-actions > a {
    min-height: 42px;
  }

  .h5-dialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    margin: auto;
  }

  .h5-hide-mobile {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .h5-page {
    width: calc(100% - 20px);
  }
}