/* Lextra 2.0 (Update 65): shared menu = sidebar (aside.lx-t2-side) + top bar (nav.lx-t2-top), output by assets/posthydraulicproperties/allmenu.php.
   NL and FR copies are identical (assets/css and fr/assets/css).
   From 992px the sidebar is fixed on the left (260px) and the body leaves room for it; below 992px it is a bar at the top with the logo button and
   (logged in) the profile picture button with the role badge below it (or the Inloggen button for guests), which open a rounded panel at the top left.
   From 992px the profile picture + badge (or Inloggen) sit at the right of the top bar (Update 67). */
html { scroll-padding-top: 96px; }
.lx-t2-side { background: #1a2e40; color: #fff; }
.lx-t2-side, .lx-t2-top { text-align: left; font-family: "Open Sans", sans-serif; }
@media (min-width: 992px) {
  body { padding-left: 260px; }
  .lx-t2-side { position: fixed; top: .25rem; left: .25rem; bottom: .25rem; width: 260px; overflow-y: auto; overscroll-behavior: contain; z-index: 1030; }
}
.lx-t2-brand { display: flex; align-items: center; padding: .75rem; border-bottom: 1px solid #2b4560; }
.lx-t2-herologo { flex: 1 1 auto; display: block; height: 104px; padding: 4px; border-radius: .75rem; background: #fff; }
.lx-t2-herologo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lx-t2-logobtn { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; background: #fff; border: 0; border-radius: .75rem; padding: 4px 12px 4px 4px; cursor: pointer; }
.lx-t2-logobtn img { display: block; margin: 0 auto; width: 52px; height: 52px; object-fit: contain; }
.lx-t2-logobtn i { margin-left: .5rem; color: #213b52; font-size: 1.25rem; transition: transform .2s; }
.lx-t2-logobtn[aria-expanded="true"] i { transform: rotate(180deg); }
.lx-t2-logobtn:focus { outline: 3px solid #fdc134; outline-offset: 2px; }
.lx-t2-h { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fdc134; padding: 1rem 1rem .25rem; }
.lx-t2-side .list-group-item { display: flex; align-items: center; background: transparent; color: #d2e0ed; border: 0; border-left: 4px solid transparent; border-radius: 0; padding: .5rem 1rem; }
.lx-t2-side .list-group-item i, .lx-t2-side .list-group-item img { width: 1.4em; margin-right: .5rem; text-align: center; flex: 0 0 auto; }
.lx-t2-side .list-group-item:hover { background: #213b52; color: #fff; text-decoration: none; }
.lx-t2-side .list-group-item.active { background: #213b52; border-left-color: #dbf607; color: #fff; }
.lx-t2-lbl { flex: 1 1 auto; min-width: 0; }
.lx-t2-badge { flex: 0 0 auto; margin-left: .5rem; min-width: 1.5rem; padding: .1rem .45rem; border-radius: 50px; font: 700 .7rem/1.4 "Poppins", sans-serif; text-align: center; }
.lx-t2-b-info { background: #fdc134; color: #213b52; }
.lx-t2-b-alert { background: #dc3545; color: #fff; }
.lx-t2-b-ok { background: #28a745; color: #fff; }
.lx-t2-top { background: #1a2e40; border-bottom: 1px solid #d2e0ed; padding: .5rem 1rem; flex-wrap: wrap; }
.lx-t2-top .breadcrumb { background: transparent; margin: 0 .5rem 0 0; padding: 0; }
.lx-t2-top .breadcrumb.lx-crumb-home { visibility: hidden; } /* Update 79: Home view = no breadcrumb (Home / Home); hidden but keeps its place, so the top bar does not jump */
.lx-t2-top .breadcrumb-item a { color: #d2e0ed; }
.lx-t2-top .breadcrumb-item + .breadcrumb-item::before { color: #7b8fa3; }
.lx-t2-top .lx-t2-topbtn { border-radius: 50px; background: #fdc134; border-color: #fdc134; color: #213b52; }
.breadcrumb-item.active { color: #fdc134 !important; }
.lx-t2-avatarbtn { display: block; width: 48px; height: 48px; padding: 0; margin-left: auto; border: 2px solid #fdc134; border-radius: 50%; overflow: hidden; background: #fff; cursor: pointer; }
.lx-t2-avatarbtn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-t2-userbox { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.lx-t2-userbox .lx-t2-role { margin-top: .2rem; font-size: .65rem; }
.lx-t2-top .lx-t2-avatarbtn { width: 44px; height: 44px; }
a.lx-t2-avatarbtn:hover { text-decoration: none; }
.lx-t2-avatarbtn:focus { outline: 3px solid #fdc134; outline-offset: 2px; }
@media (max-width: 991.98px) {
  .lx-t2-side { position: relative; z-index: 1040; }
  .lx-t2-brand { justify-content: space-between; }
  .lx-t2-logobtn { width: auto; justify-content: flex-start; }
  .lx-t2-logobtn img { width: auto; max-width: 92px; height: 52px; margin: 0; }
  .lx-t2-logobtn i { position: static; }
  #t2menu { position: absolute; top: calc(100% - .25rem); left: .75rem; width: 300px !important; max-width: calc(100vw - 1.5rem); max-height: calc(100vh - 110px); overflow-y: auto; background: #1a2e40; border: 1px solid #2b4560; border-radius: 1rem; box-shadow: 0 .75rem 2rem rgba(0,0,0,.35); z-index: 1050; }
}
/* Update 69 (below 992px only since Update 70): logged in = two menus. The profile picture is a button like the logo button (white, rounded, 52px image, chevron) mirrored on the right; it opens #t2user (Mijn Lextra + Beheer). */
.lx-t2-userbtn { display: flex; align-items: center; justify-content: center; background: #fff; border: 0; border-radius: .75rem; padding: 4px 4px 4px 12px; margin-left: auto; cursor: pointer; }
.lx-t2-avatar { display: block; flex: 0 0 auto; width: 52px; height: 52px; border: 2px solid #fdc134; border-radius: 50%; overflow: hidden; background: #fff; }
.lx-t2-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-t2-userbtn i { margin-right: .5rem; color: #213b52; font-size: 1.25rem; transition: transform .2s; }
.lx-t2-userbtn[aria-expanded="true"] i { transform: rotate(180deg); }
.lx-t2-userbtn:focus { outline: 3px solid #fdc134; outline-offset: 2px; }
@media (max-width: 991.98px) {
  #t2user { position: absolute; top: calc(100% - .25rem); right: .75rem; width: 300px; max-width: calc(100vw - 1.5rem); max-height: calc(100vh - 110px); overflow-y: auto; background: #1a2e40; border: 1px solid #2b4560; border-radius: 1rem; box-shadow: 0 .75rem 2rem rgba(0,0,0,.35); z-index: 1050; }
}
/* Update 70: the split only applies below 992px. From 992px a logged-in member has ONE full left sidebar again (as after Update 67): the two panels (#t2menu, #t2user) dissolve (display: contents)
   and their sections are put in the old order: Navigatie, Dashboard, Mijn Lextra, Beheer, Lextra Informatie. The profile picture at the top right is the link to the profile page again. */
@media (min-width: 992px) {
  .lx-t2-split { display: flex; flex-direction: column; }
  .lx-t2-split #t2menu, .lx-t2-split #t2user { display: contents !important; }
  .lx-t2-split .lx-t2-sec, .lx-t2-split .lx-t2-s-end { flex: 0 0 auto; }
  .lx-t2-split .lx-t2-s-dash { order: 2; padding-top: 1rem; }
  .lx-t2-split .lx-t2-s-mine { order: 3; }
  .lx-t2-split .lx-t2-s-adm { order: 4; }
  .lx-t2-split .lx-t2-s-info { order: 5; }
  .lx-t2-split .lx-t2-s-end { order: 9; }
  .lx-t2-split .lx-t2-s-endu { display: none; }
}
/* Update 71 (below 992px only): the logo button and the profile picture button are mirror images: same outer box (118 x 60px, 4px padding, 0.75rem radius, white), same top, the 52px picture fitted inside
   (rounded like the logo area, object-fit: cover) and a 36px chevron slot on the inner side. The Admin/Lid badge hangs under its button and no longer moves the row.
   Update 72: the guest Inloggen button is the small badge of Update 67 again (not sized like the buttons), centered on the logo button. */
@media (max-width: 991.98px) {
  .lx-t2-brand { align-items: flex-start; }
  .lx-t2-logobtn, .lx-t2-userbtn { box-sizing: border-box; flex: 0 0 auto; width: 118px; height: 60px; padding: 4px; margin: 0; border-radius: .75rem; justify-content: space-between; }
  .lx-t2-logobtn img { width: 74px; max-width: none; height: 52px; margin: 0; object-fit: contain; }
  .lx-t2-userbtn { margin-left: auto; }
  .lx-t2-logobtn i, .lx-t2-userbtn i { flex: 0 0 36px; width: 36px; margin: 0; text-align: center; }
  .lx-t2-avatar { width: 52px; height: 52px; margin: 0 11px; border: 0; border-radius: .5rem; background: #fff; }
  .lx-t2-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
  .lx-t2-brand .lx-t2-userbox { align-items: flex-end; }
  .lx-t2-brand .lx-t2-userbox.lx-t2-guest { align-self: center; }
}
/* Update 73: Home. From 992px the hero logo at the top of the sidebar is the Home link (the Home item left the menu). Below 992px Home is a button in the top bar, between the logo button
   and the profile picture button / Inloggen badge (the logo menu no longer lists Home): same height as the 60px buttons, white like them, yellow while the home view is open. Contact moved to Lextra Informatie. */
.lx-t2-herologo:hover, .lx-t2-herologo:focus { text-decoration: none; }
.lx-t2-herologo:focus-visible { outline: 3px solid #fdc134; outline-offset: 2px; }
@media (max-width: 991.98px) {
  .lx-t2-homebtn { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 1 64px; width: 64px; min-width: 44px; height: 60px; padding: 4px; margin: 0; border-radius: .75rem; background: #fff; color: #213b52; font-size: .7rem; font-weight: 700; line-height: 1.1; text-align: center; text-decoration: none; }
  .lx-t2-homebtn i { font-size: 1.5rem; line-height: 1; color: #213b52; }
  .lx-t2-homebtn:hover, .lx-t2-homebtn:focus { color: #213b52; text-decoration: none; }
  .lx-t2-homebtn:focus-visible { outline: 3px solid #fdc134; outline-offset: 2px; }
  .lx-t2-homebtn.active { background: #fdc134; }
}
@media (max-width: 359.98px) {
  .lx-t2-homebtn { flex-basis: 48px; width: 48px; }
  .lx-t2-homebtn span { display: none; }
}
/* Update 75: the NL/FR buttons moved from the footer to the top of the menu, above Dashboard: centred, 12px apart (wide: top of the sidebar under the hero logo; below 992px: top of the logo panel). Same pill look as the footer buttons had. */
.lx-t2-langs { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; padding: 1rem 1rem .25rem; }
.lx-t2-langs .lx-lang { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 84px; padding: 5px 14px; font-size: .875rem; line-height: 1.5; border-radius: 50px; border: 2px solid #fdc134; color: #fff; background: #213b52; font-weight: 600; text-decoration: none; transition: .3s; }
.lx-t2-langs .lx-lang img { width: 20px; height: 20px; border-radius: 50%; }
.lx-t2-side .lx-t2-langs a.lx-lang:hover, .lx-t2-side .lx-t2-langs a.lx-lang:focus { background: #fdc134; color: #213b52; text-decoration: none; }
.lx-t2-side .lx-t2-langs a.lx-lang:focus-visible { outline: 3px solid #fdc134; outline-offset: 2px; }
.lx-t2-langs .lx-lang.is-current { background: #fdc134; color: #213b52; cursor: default; }
@media print { .lx-t2-side, .lx-t2-top { display: none !important; } body { padding-left: 0; } }