/* Shared responsive fixes for Setting and admin pages. */

.table-responsive {
  width: 100%;
  border: 0;
  overflow-x: auto;
}

.dataTables_wrapper {
  width: 100%;
}

.dataTables_wrapper .row {
  margin-left: 0;
  margin-right: 0;
}

.dataTables_wrapper .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dataTables_wrapper .paginate_button {
  margin-bottom: 4px;
}

.x_panel img {
  max-width: 100%;
  height: auto;
}

.x_panel .btn-toolbar,
.x_panel .btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.x_panel .btn,
.x_panel .btn-xs {
  white-space: normal;
}

#dvBuildingMap,
#license-usage-chart {
  max-width: 100%;
}

#floor-map-column,
#zone-map-column,
#shelf-map-column,
#path-map-column {
  overflow-x: auto;
}

#cropContainer .croppie-container,
#cropContainer .cr-boundary,
#cropContainer .cr-viewport {
  max-width: 100%;
}

@media (max-width: 991px) {
  .right_col {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .x_title {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
  }

  .x_title h2 {
    width: 100%;
    margin: 0;
  }

  .x_title .panel_toolbox {
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
  }

  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_length select,
  .form-control,
  .bootstrap-select {
    max-width: 100%;
  }

  .form-group > [class*='col-'],
  .form-horizontal .form-group > [class*='col-'] {
    float: none;
    width: 100%;
  }

  .form-horizontal .control-label,
  .control-label {
    text-align: left;
  }
}

@media (max-width: 767px) {
  .right_col {
    padding: 8px !important;
  }

  .x_panel {
    padding: 8px;
  }

  .x_content {
    padding: 8px 0 0;
  }

  .modal-dialog {
    width: calc(100% - 20px);
    margin: 10px auto;
  }

  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: left !important;
  }
}