/*
 * Capa móvil transversal para SIDCA, SIDCOL, MRJ Verificadora y SIDEFINCO.
 * No contiene reglas de escritorio: todo queda limitado a 980 px o menos.
 */
@media (max-width: 980px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden !important;
  }

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

  body > .container,
  body > .container-fluid,
  body .container.esi {
    max-width: 100% !important;
  }

  /* Navegación: conserva el menú contraíble y mejora el área táctil. */
  body .mrj-main-navbar .btn-navbar {
    align-items: center;
    display: inline-flex !important;
    height: 44px !important;
    justify-content: center;
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 8px !important;
    width: 44px !important;
  }

  body .mrj-main-navbar .nav-collapse.in,
  body .mrj-main-navbar .nav-collapse[style*="height: auto"],
  body .mrj-main-navbar .nav-collapse[style*="height:auto"] {
    max-height: 62vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body .mrj-main-navbar .nav > li > a {
    align-items: center;
    display: flex !important;
    min-height: 42px !important;
    padding-bottom: 9px !important;
    padding-top: 9px !important;
    white-space: normal !important;
  }

  body .mrj-breadcrumb-guide,
  body .sidca-breadcrumb-guide,
  body .breadcrumb {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Controles legibles sin convertir cada tabla en una columna gigante. */
  body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  body select,
  body textarea {
    max-width: 100%;
    min-height: 36px;
  }

  body .btn,
  body button,
  body input[type="button"],
  body input[type="submit"],
  body input[type="reset"] {
    min-height: 38px;
    touch-action: manipulation;
  }

  body .form-actions,
  body .modal-footer,
  body .btn-group,
  body div.tablesorter-pager {
    align-items: center;
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Tablas: desplazamiento interno y sin clones fijos sobre la pantalla. */
  body .mrj-table-scroll-top,
  body .mrj-table-scroll-x,
  body .mrj-visual-table-scroll,
  body.mrj-system-sidca .mrj-visual-table-scroll.sidca-nested-scroll,
  body .sidca-native-scroll,
  body .table-responsive {
    display: block;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  body .mrj-table-scroll-top,
  body .mrj-table-scroll-x,
  body .mrj-visual-table-scroll,
  body .sidca-native-scroll {
    scrollbar-color: #789cac #edf6f9;
    scrollbar-width: thin;
  }

  body .mrj-table-scroll-top::-webkit-scrollbar,
  body .mrj-table-scroll-x::-webkit-scrollbar,
  body .mrj-visual-table-scroll::-webkit-scrollbar,
  body .sidca-native-scroll::-webkit-scrollbar {
    height: 10px;
  }

  body .mrj-table-scroll-top::-webkit-scrollbar-thumb,
  body .mrj-table-scroll-x::-webkit-scrollbar-thumb,
  body .mrj-visual-table-scroll::-webkit-scrollbar-thumb,
  body .sidca-native-scroll::-webkit-scrollbar-thumb {
    background: #789cac;
    border: 2px solid #edf6f9;
    border-radius: 8px;
  }

  body table.tablesorter.tablesorter-sticky-hidden,
  body table.tablesorter.tablesorter-sticky-visible {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
  }

  body table.tablesorter input.tablesorter-filter,
  body table.tablesorter select.tablesorter-filter,
  body.mrj-visual-polish.mrj-system-sidca table.tablesorter > thead > tr.tablesorter-filter-row input.tablesorter-filter,
  body.mrj-visual-polish.mrj-system-sidca table.tablesorter > thead > tr.tablesorter-filter-row select.tablesorter-filter {
    height: 36px !important;
    min-height: 36px !important;
  }

  /*
   * El paginador es una celda con colspan. Debe seguir siendo table-cell;
   * convertirla en flex la reducía al ancho de la primera columna.
   */
  body table.tablesorter > tfoot > tr > .ts-pager,
  body table.tablesorter > tfoot > tr > .tablesorter-pager {
    display: table-cell !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
    text-align: left !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
  }

  body table.tablesorter > tfoot > tr > .ts-pager > *,
  body table.tablesorter > tfoot > tr > .tablesorter-pager > * {
    display: inline-flex !important;
    float: none !important;
    margin: 2px !important;
    vertical-align: middle !important;
  }

  body table.tablesorter > tfoot > tr > .ts-pager .btn,
  body table.tablesorter > tfoot > tr > .tablesorter-pager .btn {
    align-items: center;
    height: 38px !important;
    justify-content: center;
    min-width: 44px !important;
    padding: 7px 10px !important;
    width: auto !important;
  }

  body table.tablesorter > tfoot > tr > .ts-pager select,
  body table.tablesorter > tfoot > tr > .tablesorter-pager select {
    height: 38px !important;
    min-width: 62px !important;
    width: auto !important;
  }

  body table.tablesorter > tfoot > tr > .ts-pager .pagedisplay,
  body table.tablesorter > tfoot > tr > .tablesorter-pager .pagedisplay {
    align-items: center;
    min-height: 38px;
    padding: 0 6px;
  }

  /* Avisos: se mantienen utilizables sin cubrir media pantalla. */
  body .alert {
    bottom: auto !important;
    clear: both;
    left: auto !important;
    margin-bottom: 12px;
    max-width: 100% !important;
    opacity: 1 !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    z-index: auto !important;
  }

  body .revision-alert-show {
    border-radius: 18px !important;
    bottom: 8px !important;
    left: auto !important;
    line-height: 20px !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    right: 8px !important;
    top: auto !important;
    width: 112px !important;
  }

  body.mrj-mobile-menu-active .revision-alert-show {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  body .revision-alert {
    bottom: auto !important;
    left: auto !important;
    margin: 8px !important;
    max-height: none !important;
    max-width: none !important;
    overflow: visible !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: calc(100% - 16px) !important;
    z-index: auto !important;
  }

  body .modal {
    left: 3vw !important;
    margin-left: 0 !important;
    max-height: 90vh;
    max-width: 94vw !important;
    overflow-y: auto;
    right: auto !important;
    top: 5vh !important;
    width: 94vw !important;
  }

  body .mrj-footer,
  body .foot {
    left: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    right: auto !important;
    width: 100% !important;
  }

  /* Segunda etapa: controles realmente táctiles y textos sin cortes verticales. */
  body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  body select,
  body textarea,
  body .select2-container,
  body .chzn-container {
    font-size: 16px !important;
    min-height: 44px !important;
  }

  body .btn,
  body button,
  body input[type="button"],
  body input[type="submit"],
  body input[type="reset"],
  body .mrj-system-switcher-toggle,
  body .mrj-lang-toggle {
    align-items: center;
    min-height: 44px !important;
    min-width: 44px !important;
  }

  body input[type="checkbox"],
  body input[type="radio"] {
    accent-color: var(--sys-accent, #168cab);
    height: 18px !important;
    min-height: 18px !important;
    width: 18px !important;
  }

  body label,
  body .control-label {
    line-height: 1.35;
  }

  body table.tablesorter > thead > tr > th,
  body table.tablesorter > thead > tr > td {
    overflow-wrap: normal !important;
    white-space: nowrap !important;
    word-break: normal !important;
  }

  body table.tablesorter > tbody > tr > td {
    word-break: normal !important;
  }

  /*
   * La indicación queda dentro del área desplazable. No aparece en escritorio
   * y evita que una tabla ancha parezca cortada o incompleta.
   */
  body .mrj-table-scroll-x::before,
  body .mrj-visual-table-scroll::before,
  body .sidca-native-scroll::before {
    align-items: center;
    background: #eef8fb;
    border: 1px solid #b9dce8;
    border-radius: 16px;
    color: #245b71;
    content: "\2194  Deslice para ver más";
    display: flex;
    font-size: 12px;
    font-weight: 700;
    height: 30px;
    left: 0;
    margin: 2px 0 7px;
    padding: 5px 10px;
    position: sticky;
    width: max-content;
    z-index: 4;
  }

  body.mrj-lang-en .mrj-table-scroll-x::before,
  body.mrj-lang-en .mrj-visual-table-scroll::before,
  body.mrj-lang-en .sidca-native-scroll::before {
    content: "\2194  Swipe to see more";
  }

  body .nav-tabs,
  body .nav-pills,
  body .tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 4px;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  body .nav-tabs > li,
  body .nav-pills > li,
  body .tabs > li {
    flex: 0 0 auto;
    float: none !important;
  }

  body .nav-tabs > li > a,
  body .nav-pills > li > a,
  body .tabs > li > a,
  body .accordion-heading > a {
    align-items: center;
    display: flex !important;
    min-height: 44px;
    white-space: normal;
  }

  body .pagination,
  body .pagination ul {
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  body .modal-header,
  body .modal-body,
  body .modal-footer {
    max-width: 100%;
  }

  body .modal-body {
    max-height: calc(90vh - 132px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body .mrj-im-mini-table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* SIDCA posee reglas históricas más específicas; se normalizan aquí. */
  html body.mrj-visual-polish.mrj-system-sidca table.tablesorter > thead > tr > th,
  html body.mrj-visual-polish.mrj-system-sidca table.tablesorter > thead > tr > td {
    overflow-wrap: normal !important;
    white-space: nowrap !important;
    word-break: normal !important;
  }

  html body.mrj-visual-polish.mrj-system-sidca table.tablesorter > tfoot > tr > .ts-pager .btn,
  html body.mrj-visual-polish.mrj-system-sidca table.tablesorter > tfoot > tr > .tablesorter-pager .btn {
    height: 44px !important;
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

@media (max-width: 640px) {
  body > .container,
  body > .container-fluid,
  body .container.esi {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  body .span12.padding-left-right {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  body .span12.silver.padding {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Cabecera compacta: usuario, logos, horas e indicadores sin bloques altos. */
  body .mrj-brand-row {
    align-items: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    height: auto !important;
    max-height: none !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 6px 8px !important;
    width: 100% !important;
  }

  body .mrj-brand-row > [class*="span"],
  body .mrj-brand-user,
  body .mrj-brand-logos,
  body .mrj-brand-status {
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: center;
    width: 100% !important;
  }

  body .mrj-user-card {
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    height: auto !important;
    justify-content: flex-start !important;
    min-height: 50px !important;
    min-width: 0 !important;
    padding: 6px 8px !important;
    width: 100% !important;
  }

  body .mrj-user-data {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    width: auto !important;
  }

  body .mrj-user-line {
    align-items: center;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  body .mrj-user-name,
  body .mrj-user-labels {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap !important;
  }

  body .mrj-brand-logos {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    justify-content: center !important;
    min-height: 34px !important;
  }

  body .mrj-brand-logos img {
    height: auto !important;
    max-height: 34px !important;
    max-width: 46% !important;
    object-fit: contain;
    width: auto !important;
  }

  body .mrj-brand-status {
    display: block !important;
  }

  body .mrj-timebox {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    justify-content: flex-start !important;
    margin: 0 0 4px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 3px 4px !important;
    text-align: left !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }

  body .mrj-timebox-row {
    flex: 0 0 auto !important;
    min-height: 26px !important;
    white-space: nowrap !important;
  }

  body .mrj-status-strip {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 2px !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }

  body .mrj-status-strip > * {
    flex: 0 0 auto !important;
  }

  /* Barra de menú más baja, manteniendo el botón hamburguesa. */
  body .mrj-menu-row,
  body .mrj-main-navbar {
    height: auto !important;
    min-height: 0 !important;
  }

  body .mrj-main-navbar .navbar-inner {
    min-height: 52px !important;
    padding: 4px 8px !important;
  }

  body .mrj-main-navbar .container {
    height: auto !important;
    min-height: 44px !important;
    width: 100% !important;
  }

  body .mrj-main-navbar .mrj-menu-brand {
    height: 44px !important;
    line-height: 24px !important;
    margin: 0 !important;
    padding: 10px 4px !important;
    width: auto !important;
  }

  body .mrj-main-navbar .btn-navbar {
    margin: 0 !important;
  }

  body .mrj-breadcrumb-guide,
  body .sidca-breadcrumb-guide,
  body .breadcrumb {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Paneles con más ancho útil y espaciado consistente. */
  body .mrj-list-panel,
  body .mrj-detail-panel {
    float: none !important;
    margin: 6px !important;
    max-width: calc(100% - 12px) !important;
    padding: 10px !important;
    width: calc(100% - 12px) !important;
  }

  body .span12.border.white.padding.mrj-list-panel,
  body .span12.border.white.padding.mrj-detail-panel {
    margin: 0 !important;
    max-width: 100% !important;
    padding: 10px !important;
    width: 100% !important;
  }

  body .mrj-list-panel legend,
  body .mrj-detail-panel legend,
  body legend {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  body form > .row-fluid > [class*="span"],
  body fieldset > .row-fluid > [class*="span"],
  body .tab-pane form > .row-fluid > [class*="span"] {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body .form-actions .btn,
  body .modal-footer .btn {
    flex: 1 1 140px;
    margin: 0 !important;
  }

  body .form-horizontal .control-label {
    float: none !important;
    padding-top: 0 !important;
    text-align: left !important;
    width: 100% !important;
  }

  body .form-horizontal .controls {
    margin-left: 0 !important;
    max-width: 100% !important;
  }

  body .form-horizontal .control-group {
    margin-bottom: 14px !important;
  }

  body .controls > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  body .controls > select,
  body .controls > textarea,
  body .control-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  body .control-group select,
  body .control-group textarea {
    max-width: 100% !important;
    width: 100% !important;
  }

  body .btn-toolbar,
  body .mrj-action-bar,
  body .mrj-im-filter-actions {
    align-items: stretch !important;
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100% !important;
  }

  body .btn-toolbar > .btn,
  body .btn-toolbar > .btn-group,
  body .mrj-action-bar > .btn,
  body .mrj-im-filter-actions > .btn,
  body .mrj-im-filter-actions > button,
  body .mrj-im-filter-actions > a {
    justify-content: center;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body .help-block,
  body .help-inline,
  body .form-text {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    margin-top: 5px;
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  body .form-actions,
  body .modal-footer,
  body .btn-toolbar,
  body .mrj-action-bar,
  body .mrj-im-filter-actions {
    align-items: stretch !important;
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: 1fr !important;
  }

  body .form-actions > .btn,
  body .modal-footer > .btn,
  body .btn-toolbar > .btn,
  body .mrj-action-bar > .btn,
  body .mrj-im-filter-actions > .btn,
  body .mrj-im-filter-actions > button,
  body .mrj-im-filter-actions > a {
    justify-content: center;
    margin: 0 !important;
    width: 100% !important;
  }

  body legend,
  body .page-header h1,
  body .page-header h2 {
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  body .well,
  body .hero-unit,
  body .accordion-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media (max-width: 979px) {
  /*
   * Menú táctil común.
   * La clase se agrega solamente a barras que poseen su propio botón y panel;
   * así cubre SIDCA (sin mrj-main-navbar), roles contratista/mandante y los
   * demás sistemas sin cambiar la navegación de escritorio.
   */
  body .navbar.mrj-mobile-navbar {
    clear: both !important;
    height: auto !important;
    margin: 0 !important;
    min-height: 0 !important;
    position: relative !important;
    width: 100% !important;
    z-index: 20 !important;
  }

  body .navbar.mrj-mobile-navbar > .navbar-inner {
    background: #f7fbfd !important;
    border: 0 !important;
    border-bottom: 1px solid #d5e8ef !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 6px 8px !important;
  }

  body .navbar.mrj-mobile-navbar > .navbar-inner > .brand,
  body .navbar.mrj-mobile-navbar > .navbar-inner > .container > .brand {
    display: none !important;
  }

  body .navbar.mrj-mobile-navbar > .navbar-inner > .container {
    float: none !important;
    height: auto !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  body .navbar.mrj-mobile-navbar .btn-navbar,
  body .navbar.mrj-mobile-navbar .btn-navbar:hover,
  body .navbar.mrj-mobile-navbar .btn-navbar:focus,
  body .navbar.mrj-mobile-navbar .btn-navbar:active {
    align-items: center !important;
    background: linear-gradient(180deg, #ffffff 0%, #eaf6fa 100%) !important;
    border: 1px solid #b9dbe6 !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 9px rgba(24, 81, 107, .12) !important;
    color: #174e69 !important;
    cursor: pointer !important;
    display: flex !important;
    float: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    height: 52px !important;
    justify-content: space-between !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    min-height: 52px !important;
    padding: 0 15px !important;
    text-align: left !important;
    text-decoration: none !important;
    text-shadow: none !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
    width: 100% !important;
  }

  body .navbar.mrj-mobile-navbar.mrj-mobile-menu-open .btn-navbar,
  body .navbar.mrj-mobile-navbar.mrj-mobile-menu-open .btn-navbar:hover,
  body .navbar.mrj-mobile-navbar.mrj-mobile-menu-open .btn-navbar:focus,
  body .navbar.mrj-mobile-navbar.mrj-mobile-menu-open .btn-navbar:active {
    background: linear-gradient(135deg, #0f6f9f 0%, #1199b6 100%) !important;
    border-color: #0f7fa2 !important;
    color: #ffffff !important;
  }

  body .navbar.mrj-mobile-navbar .btn-navbar:focus-visible {
    outline: 3px solid rgba(15, 147, 184, .28) !important;
    outline-offset: 2px !important;
  }

  body .navbar.mrj-mobile-navbar .btn-navbar .mrj-mobile-menu-label {
    display: block !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    pointer-events: none !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .navbar.mrj-mobile-navbar .btn-navbar p {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 24px !important;
    flex-direction: column !important;
    gap: 4px !important;
    justify-content: center !important;
    margin: 0 0 0 12px !important;
    min-height: 24px !important;
    pointer-events: none !important;
    width: 24px !important;
  }

  body .navbar.mrj-mobile-navbar .btn-navbar .icon-bar {
    background: currentColor !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    display: block !important;
    height: 2px !important;
    margin: 0 !important;
    opacity: 1 !important;
    width: 22px !important;
  }

  body .navbar.mrj-mobile-navbar .nav-collapse {
    box-sizing: border-box !important;
    float: none !important;
    margin: 0 !important;
    pointer-events: none !important;
    width: 100% !important;
  }

  body .navbar.mrj-mobile-navbar .nav-collapse.collapse:not(.in) {
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    visibility: hidden !important;
  }

  body .navbar.mrj-mobile-navbar .nav-collapse.in,
  body .navbar.mrj-mobile-navbar .nav-collapse[style*="height: auto"],
  body .navbar.mrj-mobile-navbar .nav-collapse[style*="height:auto"] {
    background: #ffffff !important;
    border: 1px solid #d2e5ec !important;
    border-radius: 10px !important;
    height: auto !important;
    margin-top: 7px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 7px !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  body .navbar.mrj-mobile-navbar .nav-collapse > .nav {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  body .navbar.mrj-mobile-navbar .nav-collapse > .nav > li {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    min-height: 0 !important;
    position: relative !important;
    width: 100% !important;
  }

  body .navbar.mrj-mobile-navbar .nav-collapse > .nav > li > a,
  body .navbar.mrj-mobile-navbar .nav-collapse > .nav > li > a:hover,
  body .navbar.mrj-mobile-navbar .nav-collapse > .nav > li > a:focus,
  body .navbar.mrj-mobile-navbar .nav-collapse > .nav > li > a:active {
    align-items: center !important;
    border: 1px solid #c9e0e8 !important;
    border-radius: 8px !important;
    display: flex !important;
    float: none !important;
    font-size: 14px !important;
    justify-content: flex-start !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    min-height: 48px !important;
    padding: 11px 13px !important;
    position: relative !important;
    touch-action: manipulation !important;
    white-space: normal !important;
    width: 100% !important;
  }

  body .navbar.mrj-mobile-navbar .nav-collapse > .nav > li > a .mrj-menu-icon,
  body .navbar.mrj-mobile-navbar .nav-collapse > .nav > li > a i {
    flex: 0 0 auto !important;
    margin-right: 9px !important;
  }

  body .navbar.mrj-mobile-navbar li.navli2 > a.mrj-mobile-submenu-toggle {
    padding-right: 42px !important;
  }

  body .navbar.mrj-mobile-navbar li.navli2 > a.mrj-mobile-submenu-toggle::after {
    content: "\2304";
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-58%);
    transition: transform .18s ease;
  }

  body .navbar.mrj-mobile-navbar li.navli2.mrj-mobile-submenu-open > a.mrj-mobile-submenu-toggle::after {
    transform: translateY(-42%) rotate(180deg);
  }

  body .navbar.mrj-mobile-navbar li.navli2 > ul {
    background: #eef7fa !important;
    border: 1px solid #c7dfe8 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    display: none !important;
    float: none !important;
    height: auto !important;
    left: auto !important;
    list-style: none !important;
    margin: 6px 0 0 !important;
    max-height: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 6px !important;
    position: static !important;
    top: auto !important;
    width: 100% !important;
  }

  body .navbar.mrj-mobile-navbar li.navli2.mrj-mobile-submenu-open > ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
  }

  body .navbar.mrj-mobile-navbar li.navli2 > ul > li {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
  }

  body .navbar.mrj-mobile-navbar li.navli2 > ul > li > a,
  body .navbar.mrj-mobile-navbar li.navli2 > ul > li > a:hover,
  body .navbar.mrj-mobile-navbar li.navli2 > ul > li > a:focus,
  body .navbar.mrj-mobile-navbar li.navli2 > ul > li > a:active {
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #d3e5eb !important;
    border-radius: 7px !important;
    color: #244d67 !important;
    display: flex !important;
    float: none !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    min-height: 44px !important;
    padding: 9px 12px 9px 20px !important;
    position: static !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: normal !important;
    width: 100% !important;
  }
}

@media (max-width: 375px) {
  body .mrj-im-cards,
  body .mrj-im-official-grid {
    grid-template-columns: 1fr !important;
  }
}