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

  body.mobile-menu-open {
    overflow: hidden;
  }

  .navbar .navbar-inner .navbar-container {
    min-width: 0;
  }

  .navbar .navbar-header.pull-left {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .navbar .navbar-header.pull-right {
    max-width: 54vw;
  }

  .navbar .navbar-account .account-area {
    right: 0;
  }

  .navbar .navbar-account .account-area > li {
    min-width: 0;
  }

  .navbar .navbar-account .account-area .login-area {
    min-width: 42px;
    padding: 0 8px;
  }

  .navbar .navbar-account .account-area .login-area .profile {
    display: none;
  }

  .main-container,
  .page-container,
  .page-content,
  .page-body,
  #divPageBody,
  #divContent {
    width: 100%;
    max-width: 100%;
  }

  .page-content {
    margin-left: 0 !important;
    min-height: auto;
  }

  .page-header {
    min-height: 44px;
  }

  .page-header .header-title h1 {
    max-width: calc(100vw - 94px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    line-height: 34px;
  }

  .page-header .header-buttons {
    right: 4px;
  }

  .page-header .header-buttons .fullscreen {
    display: none;
  }

  .page-sidebar {
    display: none !important;
    position: fixed !important;
    top: 45px;
    left: 0;
    bottom: 0;
    z-index: 1040;
    width: 82vw;
    max-width: 300px;
    height: auto !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 3px 0 12px rgba(0, 0, 0, 0.25);
  }

  .page-sidebar.hide + .page-content,
  .page-sidebar.menu-compact.hide + .page-content {
    margin-left: 0 !important;
  }

  body.mobile-menu-open .page-sidebar,
  body.mobile-menu-open .page-sidebar.hide,
  body.mobile-menu-open .page-sidebar.menu-compact,
  body.mobile-menu-open .page-sidebar.menu-compact.hide {
    display: block !important;
    width: 82vw !important;
    max-width: 300px;
  }

  body.mobile-menu-open .page-sidebar:before,
  body.mobile-menu-open .page-sidebar.hide:before,
  body.mobile-menu-open .page-sidebar.menu-compact:before {
    display: none !important;
  }

  body.mobile-menu-open .page-sidebar .sidebar-menu,
  body.mobile-menu-open .page-sidebar.menu-compact .sidebar-menu {
    width: 100% !important;
  }

  body.mobile-menu-open .page-sidebar.menu-compact .sidebar-menu > li > a .menu-text,
  body.mobile-menu-open .page-sidebar.menu-compact .sidebar-menu > li:hover > a > .menu-text {
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    line-height: inherit !important;
    padding-left: 0 !important;
    box-shadow: none !important;
  }

  body.mobile-menu-open .page-sidebar.menu-compact .sidebar-menu > li > a .menu-expand {
    display: inline-block !important;
  }

  body.mobile-menu-open .page-sidebar.menu-compact .sidebar-menu li > .submenu {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    box-shadow: none !important;
  }

  body.mobile-menu-open .page-sidebar .sidebar-menu li > .submenu,
  body.mobile-menu-open .page-sidebar.menu-compact .sidebar-menu li > .submenu {
    display: none !important;
  }

  body.mobile-menu-open .page-sidebar .sidebar-menu li.mobile-submenu-open > .submenu,
  body.mobile-menu-open .page-sidebar.menu-compact .sidebar-menu li.mobile-submenu-open > .submenu {
    display: block !important;
  }

  body.mobile-menu-open .page-sidebar .sidebar-menu li.mobile-submenu-open > a .menu-expand,
  body.mobile-menu-open .page-sidebar.menu-compact .sidebar-menu li.mobile-submenu-open > a .menu-expand {
    transform: rotate(90deg);
  }

  .mobile-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 45px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1039;
    background: rgba(0, 0, 0, 0.35);
  }

  body.mobile-menu-open .mobile-sidebar-backdrop {
    display: block;
  }

  .page-body {
    padding: 10px 0 24px;
  }

  #divContent {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

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

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

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

  .widget-body {
    padding: 8px 0;
  }

  .btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  .btn-group > .btn,
  .btn-group > button {
    float: none;
    margin: 2px !important;
    border-radius: 4px !important;
  }

  .mobile-actions-table,
  .mobile-actions-table > tbody,
  .mobile-actions-table > tbody > tr,
  .mobile-actions-table > tbody > tr > td {
    display: block;
    width: 100% !important;
  }

  .mobile-actions-table > tbody > tr > td {
    text-align: center !important;
    padding: 4px 0;
  }

  .mobile-actions-table .contentCommon {
    white-space: normal !important;
  }

  input,
  select,
  textarea,
  .form-control,
  .combobox-container,
  .combobox-container .form-control {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  input[type="text"],
  input[type="password"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="tel"],
  input[type="color"],
  input[type="file"],
  select,
  textarea {
    width: 100% !important;
  }

  .table-scrollable,
  .div250,
  .div300,
  .div400 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-scrollable > .table,
  .div250 > .table,
  .div300 > .table,
  .div400 > .table {
    min-width: 720px;
  }

  #tblActividades {
    min-width: 980px;
  }

  #tblResultadosImportar,
  #tblDiferencias,
  #tblConteoG3 {
    min-width: 760px;
  }

  table.table {
    max-width: 100%;
  }

  #tblInformacion,
  #tblNuevaActividad,
  #tblNuevoRegistroSanitario,
  #tblNuevoCUMS,
  #tblRegistrarConteo,
  .tblInformacion,
  .tblEditar,
  .tblRegistro,
  .tblCums,
  .tblFilters {
    border: 0;
    width: 100% !important;
    max-width: 100%;
  }

  #tblInformacion > tbody,
  #tblInformacion > tbody > tr,
  #tblInformacion > tbody > tr > td,
  #tblNuevaActividad > tbody,
  #tblNuevaActividad > tbody > tr,
  #tblNuevaActividad > tbody > tr > td,
  #tblNuevoRegistroSanitario > tbody,
  #tblNuevoRegistroSanitario > tbody > tr,
  #tblNuevoRegistroSanitario > tbody > tr > td,
  #tblNuevoCUMS > tbody,
  #tblNuevoCUMS > tbody > tr,
  #tblNuevoCUMS > tbody > tr > td,
  #tblRegistrarConteo > tbody,
  #tblRegistrarConteo > tbody > tr,
  #tblRegistrarConteo > tbody > tr > td,
  .tblInformacion > tbody,
  .tblInformacion > tbody > tr,
  .tblInformacion > tbody > tr > td,
  .tblEditar > tbody,
  .tblEditar > tbody > tr,
  .tblEditar > tbody > tr > td,
  .tblRegistro > tbody,
  .tblRegistro > tbody > tr,
  .tblRegistro > tbody > tr > td,
  .tblCums > tbody,
  .tblCums > tbody > tr,
  .tblCums > tbody > tr > td,
  .tblFilters > tbody,
  .tblFilters > tbody > tr,
  .tblFilters > tbody > tr > td,
  .tblFilters > tfoot,
  .tblFilters > tfoot > tr,
  .tblFilters > tfoot > tr > td {
    display: block;
    width: 100% !important;
  }

  #tblInformacion > tbody > tr,
  #tblNuevaActividad > tbody > tr,
  #tblNuevoRegistroSanitario > tbody > tr,
  #tblNuevoCUMS > tbody > tr,
  #tblRegistrarConteo > tbody > tr,
  .tblInformacion > tbody > tr,
  .tblEditar > tbody > tr,
  .tblRegistro > tbody > tr,
  .tblCums > tbody > tr,
  .tblFilters > tbody > tr {
    margin-bottom: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
  }

  #tblInformacion > tbody > tr > td,
  #tblNuevaActividad > tbody > tr > td,
  #tblNuevoRegistroSanitario > tbody > tr > td,
  #tblNuevoCUMS > tbody > tr > td,
  #tblRegistrarConteo > tbody > tr > td,
  .tblInformacion > tbody > tr > td,
  .tblEditar > tbody > tr > td,
  .tblRegistro > tbody > tr > td,
  .tblCums > tbody > tr > td,
  .tblFilters > tbody > tr > td {
    border: 0 !important;
    white-space: normal !important;
  }

  #tblInformacion > tbody > tr > td:nth-child(odd),
  #tblNuevaActividad > tbody > tr > td:nth-child(odd),
  #tblNuevoRegistroSanitario > tbody > tr > td:nth-child(odd),
  #tblNuevoCUMS > tbody > tr > td:nth-child(odd),
  #tblRegistrarConteo > tbody > tr > td:nth-child(odd),
  .tblInformacion > tbody > tr > td:nth-child(odd),
  .tblEditar > tbody > tr > td:nth-child(odd),
  .tblRegistro > tbody > tr > td:nth-child(odd),
  .tblCums > tbody > tr > td:nth-child(odd),
  .tblFilters > tbody > tr > td:nth-child(odd) {
    padding-bottom: 0;
    font-weight: bold;
  }

  #tblInformacion > tbody > tr > td[colspan],
  #tblNuevaActividad > tbody > tr > td[colspan],
  #tblNuevoRegistroSanitario > tbody > tr > td[colspan],
  #tblNuevoCUMS > tbody > tr > td[colspan],
  #tblRegistrarConteo > tbody > tr > td[colspan],
  .tblRegistro > tbody > tr > td[colspan],
  .tblCums > tbody > tr > td[colspan] {
    width: 100% !important;
  }

  #tblNuevaActividad > tbody > tr:first-child {
    display: none;
  }

  #tblNuevaActividad table,
  #tblNuevaActividad table > tbody,
  #tblNuevaActividad table > tbody > tr,
  #tblNuevaActividad table > tbody > tr > td,
  #tblNuevoRegistroSanitario table,
  #tblNuevoRegistroSanitario table > tbody,
  #tblNuevoRegistroSanitario table > tbody > tr,
  #tblNuevoRegistroSanitario table > tbody > tr > td,
  .tblRegistro table,
  .tblRegistro table > tbody,
  .tblRegistro table > tbody > tr,
  .tblRegistro table > tbody > tr > td {
    display: block;
    width: 100% !important;
  }

  #tblNuevaActividad table > tbody > tr,
  #tblNuevoRegistroSanitario table > tbody > tr,
  .tblRegistro table > tbody > tr {
    border: 0;
    margin: 0;
  }

  #tblNuevaActividad table > tbody > tr > td,
  #tblNuevoRegistroSanitario table > tbody > tr > td,
  .tblRegistro table > tbody > tr > td {
    padding: 2px 0 !important;
    border: 0 !important;
    white-space: normal !important;
  }

  #tblNuevaActividad .tdObservaciones,
  #tblNuevoRegistroSanitario .tdObservaciones,
  .tblRegistro .tdObservaciones {
    overflow-wrap: anywhere;
  }

  #tblNuevaActividad .btn-group,
  #tblNuevaActividad div[style*="white-space: nowrap"],
  #tblNuevoRegistroSanitario .btn-group,
  #tblNuevoRegistroSanitario div[style*="white-space: nowrap"],
  .tblRegistro .btn-group,
  .tblRegistro div[style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  .required-icon {
    right: 2px;
  }

  #divFilters {
    overflow-x: visible !important;
  }

  #divResult {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #divReportPrint,
  #btnGroupExportar {
    float: none !important;
    text-align: center;
  }

  .pagination,
  #divPaginator {
    white-space: normal;
  }

  .ui-dialog {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px);
    left: 10px !important;
  }

  .ui-dialog .ui-dialog-content {
    max-height: calc(100vh - 110px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .nav-tabs > li {
    float: none;
    flex: 0 0 auto;
  }

  .nav-tabs > li > a {
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  .page-body {
    padding-left: 0;
    padding-right: 0;
  }

  .widget-body {
    padding-left: 0;
    padding-right: 0;
  }

  .nav-tabs > li > a {
    margin-right: 0;
  }
}