html { font-size: 15px !important; }

:root { --menu-width: 15.5rem; }

/* Mobile/tablet */
.layout-page { padding-left: 0 !important; }

/* Desktop+ keep menu + page aligned */
@media (min-width: 1200px) {
  .layout-menu { width: var(--menu-width) !important; }
  .layout-menu-fixed .layout-page { padding-left: var(--menu-width) !important; }
}

/* 1000-1199 tighten content padding (optional) */
@media (min-width: 1000px) and (max-width: 1199.98px) {
  .content-responsive-pad { padding-left: .75rem !important; padding-right: .75rem !important; }
}

/* Large monitor: remove the detached navbar "gap" and widen containers */
@media (min-width: 1600px) {
  /* IMPORTANT: do NOT set .layout-navbar left/width here */

  /* This removes the blank strip between sidebar and navbar */
  .layout-navbar.navbar-detached {
    margin-right: 0 !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 1rem !important;
  }

  /* Make navbar/content containers less narrow on big screens */
  .layout-navbar .container-xl,
  .layout-navbar .container-fluid,
  .content-wrapper > .container-xl,
  .content-wrapper > .container-fluid {
    max-width: 100% !important;
  }

  /* Apply your desired inner padding */
  .layout-navbar .container-xl,
  .layout-navbar .container-fluid {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .content-xxl-tweak {
    padding-left: 1rem !important;
    padding-right: 0 !important; }
}

  .col-custom-line-break {
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    max-width: 200px;
    min-width: 200px;
  }

  .wrap-column {
    width: 300px;
    max-width: 460px;
  }

  .serial-block {
    display: block;
    width: 100%;
    max-width: 460px;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left;
    line-height: 1.4;
  }