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

body {
  overflow-x: hidden;
}

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

img,
video,
canvas {
  height: auto;
}

table {
  max-width: 100%;
}

.table-responsive,
.responsive-table,
.table-wrapper,
.orders-table,
.services-table,
.tickets-table,
.clients-table,
.payments-table,
.history-table,
.dataTables_wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.container,
.container-fluid,
.row,
[class*="col-"],
.panel,
.card,
.ud-card,
.modal-content,
.well {
  min-width: 0;
}

.form-control,
select,
textarea,
input,
button,
.btn {
  max-width: 100%;
}

.dropdown-menu,
.selectpicker,
.bootstrap-select,
.fsb-select,
.fsb-list {
  max-width: calc(100vw - 24px);
}

.pagination,
.breadcrumb,
.nav-tabs,
.nav-pills {
  max-width: 100%;
}

@media (max-width: 768px) {
  .container,
  .container-fluid {
    width: 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .row {
    margin-left: -12px;
    margin-right: -12px;
  }

  [class*="col-"] {
    max-width: 100%;
  }

  .panel,
  .card,
  .ud-card,
  .well {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

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

  .table-responsive table,
  .responsive-table table,
  table.table {
    min-width: 640px;
  }

  .table-responsive,
  .responsive-table,
  table.table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pagination,
  .breadcrumb,
  .nav-tabs,
  .nav-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .btn,
  button {
    white-space: normal;
  }

  pre,
  code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}