/*//////////////////////////////////////////////////////////////////
[ APP SHELL ]
Token-driven layout (DESIGN.md §3.1): topbar height and sidebar width are
defined once and shared by the navbar, sidebar and content pane — no
per-breakpoint pixel offsets. The sidebar stays inside each page's <form>
(its submit buttons post that form), so it is fixed-positioned rather than
a flex sibling of the content. */

:root {
  --topbar-h: 56px;
  --sidebar-w: 13rem;
}

.big-checkbox {width: 20px; height: 20px;}

body.app-shell {
  overflow: hidden;
}

#wrapper {
  overflow-x: hidden;
}

#page-content-wrapper {
  min-width: 0;
  width: 100%;
}

#wrapper .navbar {
  height: var(--topbar-h);
}

#content {
  margin-left: 0;
  width: 100%;
  background-color: var(--surface);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-transition: margin .15s ease;
  -moz-transition: margin .15s ease;
  -o-transition: margin .15s ease;
  transition: margin .15s ease;
}

@media (max-width: 1200px) {
  :root {
    --topbar-h: 48px;
    --sidebar-w: 10rem;
  }

  .tooltip-inner {
    width: 9rem;
  }

  .responsive-text-heading {
    font-size: 18px;
  }

  .page-title-1 {
    font-size: 18px;
  }

  .custom-control-label {
    font-size: 12px;
  }

  .col-form-label-sm {
    font-size: 12px;
  }

  .print_dec_button {
    font-size: 12px;
  }

  h5 {
    font-size: 16px;
  }
}

@media (max-width: 520px) {
  :root {
    --topbar-h: 42px;
    --sidebar-w: 8rem;
  }

  .tooltip-inner {
    width: 7rem;
  }

  .responsive-text-heading {
    font-size: 14px;
  }
}