/* Shared responsive safety net for the seller and warehouse portals. */
html,
body,
#app,
.layout-dashboard,
.layout-dashboard > .ant-layout,
.layout-dashboard .ant-layout-content {
  max-width: 100%;
  min-width: 0;
}

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

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

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  body {
    padding-bottom: 0 !important;
  }

  .layout-dashboard,
  .layout-dashboard > .ant-layout,
  .layout-dashboard main,
  .layout-dashboard .ant-layout-content,
  .layout-dashboard .content-ant,
  .layout-dashboard .content-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  .layout-dashboard .ant-layout-content,
  .layout-dashboard .content-ant {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .layout-dashboard .ant-layout-header {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .layout-dashboard .header-control {
    min-width: 0;
    gap: 6px;
  }

  .layout-dashboard .header-control > * {
    min-width: 0;
  }

  .layout-dashboard .ant-card,
  .layout-dashboard .ant-card-body,
  .layout-dashboard .ant-row,
  .layout-dashboard [class*="col-"] {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .layout-dashboard .ant-form-inline,
  .layout-dashboard .rightside-top,
  .layout-dashboard .pageheader,
  .layout-dashboard .filter-form {
    flex-wrap: wrap !important;
  }

  .layout-dashboard .ant-form-inline .ant-form-item,
  .layout-dashboard .ant-form-inline .ant-input-affix-wrapper,
  .layout-dashboard .ant-form-inline .ant-select,
  .layout-dashboard .ant-picker {
    max-width: 100% !important;
  }

  .ant-modal {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin: 10px auto !important;
    top: 10px !important;
  }

  .ant-drawer-content-wrapper {
    width: min(92vw, 420px) !important;
    max-width: 100vw !important;
  }

  .ant-table {
    min-width: max-content;
  }

  .ant-pagination {
    flex-wrap: wrap;
  }
}