Opent in een nieuw tabblad
:root {
    /* WIDTH AND SPACINGS */
    --sidebar-width: min(90vw, 400px);
    --pad-m: 1.25rem;
    --pad-s: 0.75rem;
    --pad-xs: 0.5rem;
    --dropdown-links-indent: 10px;

    /* vertical & horizontal header padding */
    --header-pad-y: clamp(1rem, 0.716rem + 1.211vw, 1.75rem);
    --header-pad-x: var(--pad-m);

    /* links vertical & horizontal padding */
    --link-pad-y: 0.7rem;
    --link-pad-x: 0.5rem;

    /* panel top & bottom padding */
    --panel-block-pad: clamp(0.5rem, -1.375rem + 5vh, 2rem);

    /* GAPS */
    --link-gap: 1.125rem;
    --list-gap: 0;

    /* BACKGROUND COLORS */
    --nav-bg: white;
    --cta-bg: dimgray;
    --link-bg: transparent;
    --header-bg: gray;
    --dropdown-content-bg: rgb(0 0 0 / 5%);
    --dropdown-links-bg: transparent;
    --skip-link-background: black;
  	--hamburger-bg: transparent;
    --collapse-icon-bg:#3b3b3b;

    /* HOVER BACKGROUND */
    --cta-hover-bg: black;
    --link-hover-bg: rgb(0 0 0 / 5%);
    --dropdown-links-hover-bg: rgb(0 0 0 / 8%);

    /* TEXT COLORS */
    --panel-title-color: black;
    --panel-link-color: dimgray;
    --cta-color: white;
    --dropdown-links-color: dimgray;
    --label-color: orangered;
    --skip-link-color: white;
    --social-color: dimgray;

    /* HOVER TEXT COLORS */
    --cta-hover-color: white;
    --link-hover-color: black;
    --dropdown-links-hover-color: black;
    --social-hover-color: black;

    /* ICON COLORS */
    --panel-icon-color: dimgray;
    --social-icon-color: var(--social-color);
    --chevron-icon-color: var(--panel-icon-color);
    --mobile-menu-trigger-color: white;

    /* HOVER ICON COLORS */
    --social-icon-hover-color: var(--social-hover-color);
    --link-icon-hover-color: black;

    /* FONT SIZES */
    --panel-title-size: 1.125rem;
    --panel-back-size: 0.6rem;
    --link-txt-size: 0.875rem;
    --nav-icon-size: 1.2rem;
    --social-icon-size: var(--nav-icon-size);
    --chevron-size: 1rem;
    --collapse-icon-size: 30px;

    /* CSS TRANSITIONS */
    --sidebar-transition: 500ms;
    --sidebar-ttf: cubic-bezier(1, 0, 0.25, 1);
  	--collapse-ttf: cubic-bezier(0.1, 0.55, 0.35, 1);
    --opacity-transition: 500ms 200ms;
    --sidebar-link-transition: 500ms;

    /* BORDER */
    --link-border-radius: 0;
    --horizontal-line: 1px solid rgb(0 0 0 / 10%);
    --link-underline: var(--horizontal-line);
    --dropdown-links-underline: none;
    --sidebar-shadow: 0px 0px 3px rgba(0, 0, 0, 0.75), 0px 5px 15px rgba(0, 0, 0, 0.3);

    /* OVERLAY */
    --overlay-bg: black;
    --overlay-opacity: 0.5;

    /* FOCUS STYLES */
    --focus-outline-color: black;
    --focus-outline-offset: 4px;
    --focus-outline-width: 2px;

    /* EXTRAS */
    --current-link-bg: none;
    --current-link-underline: solid 3px #9f6aff;

    /* DROPDOWN LEVELS */

    /* Indents */
    --lvl-2-indent: var(--dropdown-links-indent);
    --lvl-3-indent: var(--dropdown-links-indent);

    /* Dropdown toggle background colors for expanded state */
    --lvl-1-toggle-bg-active: var(--link-hover-bg);
    --lvl-2-toggle-bg-active: var(--link-hover-bg);
    --lvl-3-toggle-bg-active: var(--link-hover-bg);

    /* Dropdown content background */
    --lvl-1-content-bg: var(--dropdown-content-bg);
    --lvl-2-content-bg: var(--dropdown-content-bg);
    --lvl-3-content-bg: var(--dropdown-content-bg);

    /* Text colors for expanded state */
    --lvl-1-toggle-color-active: var(--panel-link-color);
    --lvl-2-toggle-color-active: var(--panel-link-color);
    --lvl-3-toggle-color-active: var(--panel-link-color);

    /* Icon colors (normal) */
    --lvl-1-icon-color: var(--chevron-icon-color);
    --lvl-2-icon-color: var(--chevron-icon-color);
    --lvl-3-icon-color: var(--chevron-icon-color);

    /* Icon colors (hover) */
    --lvl-1-icon-hover-color: var(--link-icon-hover-color);
    --lvl-2-icon-hover-color: var(--link-icon-hover-color);
    --lvl-3-icon-hover-color: var(--link-icon-hover-color);

    /* Icon size */
  	--lvl-1-icon-size: 1.8rem;
    --lvl-2-icon-size: var(--nav-icon-size);
  	--lvl-3-icon-size: var(--nav-icon-size);
}



/* INSIDE BRICKS */
/* hide header/nav when not in main template */
[data-builder-mode].brx-header-left #brx-header:not(.postid-521 *),
[data-builder-mode].brx-header-right #brx-header:not(.postid-521 *) {
    display: none;
}

/* site normal width when not in main template */
[data-builder-mode].brx-header-left #brx-content:not(.postid-521 *),
[data-builder-mode].brx-header-right #brx-content:not(.postid-521 *),
[data-builder-mode].brx-header-left #brx-footer:not(.postid-521 *),
[data-builder-mode].brx-header-right #brx-footer:not(.postid-521 *) {
    margin: 0 !important;
}

.dwc-sidebar__nav:not(.show-nav .dwc-sidebar__nav, [data-builder-mode] .dwc-sidebar__nav){
  display: none;
  }
// Feature Toggles (1 = enabled, 0 = disabled)

// Automatically rename the text on the back button to show the panel name
// e.g., 'Back to Reviews' instead of the default 'Back'
const updateBackText = 1;

// Calculate header height for mobile menu top offset
const calcHeaderHeight = 1;

// Automatically open the current menu item's panel
const autoCurrentPosition = 1;

// Enable/disable the top bar and off-canvas menu
const enableTopBar = 0;
const enableOffCanvas = 0;

// Mobile and off-canvas breakpoints
const mq = window.matchMedia("(max-width: 1024px)");
const offCanvasBreakpoint = window.matchMedia("(max-width:10024px)");

// Off-canvas options
const offCanvasPushContent = 0; // Enable off-canvas content push (requires off-canvas to be enabled)
const fixedNavTrigger = 1; // Fix the toggle button when pushing content

// Dropdown behavior options
const openFirstDropDown = 0; // Open the first dropdown content on page load
const autoCloseDropdown = 1; // Automatically close the dropdown when it loses focus

// Sidebar and layout options
const overlaySidebar = 0; // Overlay the sidebar on a fullwidth page (requires off-canvas to be disabled)
const overlayTopBar = 0; // Overlay the top bar when using off-canvas

// RTL (Right-to-Left) layout support
const enableRTL = 0;

// Scrolling header reveal/hide effect
const enableHeadroom = 1; 
/*
  NOTES:
  - Off-canvas or top bar must be enabled for headroom to work
  - If you don't want off-canvas on desktop but want the headroom effect on mobile,
    enable off-canvas and set the off-canvas breakpoint to match `mq` (e.g., 1024px)
*/

// Padding and offset options
const calcTopPadding = 1; // Adjust top padding of the first container when headroom is enabled
const offsetHashLinkScroll = 0; // Add offset when scrolling to hash links (useful for sticky headers)

// Offcanvas/Mobile menu behavior
const mobileMenuAboveHeader = 0; // Offcanvas/Mobile menu will overlap the top bar instead of displaying underneath

// COLLAPSE SIDEBAR OPTIONS
const enableCollapsibleSidebar = 0;
const collapseOnPageLoad = 0;
const saveCollapseState = 1;  // Toggle whether to save the collapse state
const hoverToExpandSidebar = 1;
const collapseAutoWidth = 1;
const collapseWidth = 80; // manual width, when autowidth is off
const collapsecenterScrub = 0.85; // controls icons position on manual width
const offsetMultiplier = 3; //controls sidebar width on auto width



if (enableOffCanvas && offCanvasBreakpoint.matches) {
 document.body.classList.add('dwc-offcanvas');
  //console.log('offcanvas - 1')
}


  /* OVERLAY SIDEBAR */


  /*main and footer*/
  .dwc-overlay-sidebar.brx-header-left #brx-content,
  .dwc-overlay-sidebar.brx-header-left #brx-footer,
  .dwc-overlay-sidebar.brx-header-right #brx-content,
  .dwc-overlay-sidebar.brx-header-right #brx-footer,
  .dwc-offcanvas.brx-header-left #brx-content,
  .dwc-offcanvas.brx-header-left #brx-footer,
  .dwc-offcanvas.brx-header-right #brx-content,
  .dwc-offcanvas.brx-header-right #brx-footer {
      margin-inline-start: 0;
  }

  .dwc-overlay-sidebar:not(.dwc-mobile) {
      --header-bg: transparent;
      --nav-bg: transparent;
  }

  .dwc-overlay-topbar {
      --header-bg: transparent;
  }

  .dwc-overlay-topbar #dwc_header.dwc-sidebar {
      background: var(--header-bg);
      margin-block-end: calc(var(--dwc-header-height) * -1);
  }

  .brx-header-left.dwc-overlay-sidebar:not(.dwc-mobile) .swiper-slide {
      padding-inline-start: var(--sidebar-width);
  }

  .brx-header-right.dwc-overlay-sidebar:not(.dwc-mobile) .swiper-slide {
      padding-inline-end: var(--sidebar-width);
  }

 .dwc-mobile-menu-over.dwc-offcanvas .dwc-sidebar__nav, 
    .dwc-mobile-menu-over.dwc-topbar-enabled .dwc-sidebar__nav,
.dwc-mobile-menu-over.dwc-mobile .dwc-sidebar__nav{
             z-index: 9999;
    }

    .dwc-mobile-menu-over.dwc-mobile .dwc-sidebar__nav__panel {
        padding-block-start: 0 !important;
    }

    .dwc-offcanvas .dwc-sidebar__nav__panel:not(.dwc-mobile-menu-over *) {
        padding-block-start: var(--dwc-header-height);
        z-index: 0;
    }
    
    .dwc-offcanvas .dwc-header-inner-wrap:not(.dwc-mobile-menu-over *) {
        z-index:99999; 
    }



  /* OFFCANVAS */

  .dwc-offcanvas.brx-header-left #brx-header {
      bottom: auto;
      inline-size: 100%;
  }

  .dwc-offcanvas.brx-header-left #brx-header:not(.dwc-headroom *) {
      position: relative;
  }


  .dwc-push-content.dwc-slide-nav-open.dwc-nav-trigger-is-fixed .dwc-nav-trigger {
      transform: translateX(calc(var(--sidebar-width) * -1));
  }

  .dwc-rtl.dwc-push-content.dwc-slide-nav-open.dwc-nav-trigger-is-fixed .dwc-nav-trigger {
      transform: translateX(calc(var(--sidebar-width) * 1));
  }

  .dwc-nav-trigger {
      transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
  }

  .dwc-offcanvas .dwc-sidebar__nav {
      transform: translateX(-100%);
      transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
  }

  .dwc-offcanvas .dwc-sidebar__nav,
  .dwc-topbar-enabled .dwc-sidebar__nav {
      background: var(--nav-bg);
      inline-size: var(--sidebar-width);
      position: fixed !important;
      bottom: 0;
      inset-inline-start: 0;
      inset-block-start: 0;
      block-size: 100dvb;
      overflow: hidden;
      box-shadow: var(--sidebar-shadow);

  }

  .dwc-offcanvas.dwc-slide-nav-open .dwc-mobile-menu-overlay {
      pointer-events: auto;
      opacity: var(--overlay-opacity);
  }

  .dwc-offcanvas .dwc-mobile-menu-overlay {
      background: var(--overlay-bg);
      position: fixed !important;
      inset-block-start: 0;
      bottom: 0;
      inset-inline-start: 0;
      inset-inline-end: 0;
      pointer-events: none;
      opacity: 0;
      transition: 0.4s 0.2s;
      block-size: 100vh;
  }

  .dwc-slide-nav-open .dwc-sidebar__nav:not(.dwc-push-content *) {
      transform: translateX(0) !important;
  }


  .dwc-push-content .dwc-sidebar__nav__panel {
      padding-block: var(--panel-block-pad) !important;
  }



  .dwc-offcanvas .dwc-sidebar__nav:not(.dwc-mobile *),
  .dwc-topbar-enabled .dwc-sidebar__nav:not(.dwc-mobile *) {
      z-index: 1000;
  }


  .dwc-topbar-enabled .dwc-sidebar__nav__panel:not(.dwc-mobile *) {
      padding-block-start: calc(20px + var(--dwc-header-height));
  }

  /* body */

  body.dwc-no-scroll {
      overflow: hidden;
      block-size: 100vh;
  }


  body.dwc-offcanvas {
      --sidebar-transition: 700ms;
      transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
  }


  /* OFFCANVAS ENDS */

  /* push content */

  .dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper>header,
  .dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper>footer,
  .dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper>main {
      transform: translateX(var(--sidebar-width));
  }




  .dwc-mobile.dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper {
      overflow: hidden;
      block-size: 100dvb;
  }

  .dwc-site-wrapper {
      block-size: 100%;
      display: flex;
      flex-direction: column;
  }

  header,
  footer,
  main {
      --sidebar-transition: 700ms;
      transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
  }

  /*RTL*/

  .dwc-rtl .dwc-sidebar__nav__panel {
      direction: rtl;
  }


  .dwc-rtl #brx-footer:not(.dwc-mobile *, .dwc-overlay-sidebar *, .dwc-offcanvas *),
  .dwc-rtl #brx-content:not(.dwc-offcanvas *, .dwc-mobile *, .dwc-overlay-sidebar *, .dwc-offcanvas *) {
      margin-inline-start: unset;
      margin-inline-end: var(--sidebar-width);

  }

  .dwc-rtl header.dwc-sidebar {
      inset-inline-end: 0;
  }

  .dwc-rtl.dwc-mobile .dwc-sidebar__nav,
  .dwc-rtl.dwc-offcanvas .dwc-sidebar__nav,
  .dwc-rtl.dwc-topbar-enabled .dwc-sidebar__nav,
  .dwc-rtl #brx-header {
      inset-inline-start: auto;
      inset-inline-end: 0;
  }


  .dwc-rtl.dwc-mobile .dwc-sidebar__nav,
  .dwc-rtl.dwc-offcanvas .dwc-sidebar__nav {
      transform: translateX(100%);
  }

  .dwc-rtl.dwc-push-content.dwc-slide-nav-open header,
  .dwc-rtl.dwc-push-content.dwc-slide-nav-open main,
  .dwc-rtl.dwc-push-content.dwc-slide-nav-open footer {
      --rtl-translate: calc(var(--sidebar-width) * -1);
      transform: translateX(var(--rtl-translate));
  }

  /* RTL + OVERLAY SIDEBAR */
  .dwc-rtl.dwc-overlay-sidebar .brxe-section:not(.dwc-mobile *),
  .dwc-rtl.dwc-overlay-sidebar #brx-footer .brxe-section:not(.dwc-mobile *) {
      padding-inline-end: calc(var(--sidebar-width) + 20px);
  }

  .dwc-overlay-sidebar .brxe-section:not(.dwc-rtl *, .dwc-mobile *),
  .dwc-overlay-sidebar #brx-footer .brxe-section:not(.dwc-rtl *, .dwc-mobile *) {
      padding-inline-start: calc(var(--sidebar-width) + 20px)
  }


  /* TOP BAR*/
  .dwc-topbar-enabled .dwc-header-inner-wrap,
  .dwc-offcanvas .dwc-header-inner-wrap {
      box-shadow: var(--sidebar-shadow);
  }

  .dwc-topbar-enabled .dwc-header-inner-wrap {
      z-index: 9999;
  }

  .dwc-topbar-enabled #brx-header {
      inline-size: 100%;
      block-size: var(--dwc-header-height);
      background: transparent !important;
      /* position: relative;*/
  }

  .dwc-topbar-enabled .dwc-sidebar:not(.dwc-mobile *) {
      position: fixed;
      inline-size: 100%;
      max-inline-size: 100%;
      background: var(--header-bg);
      box-shadow: none;
  }



  /* TOP BAR ENDS */


  .dwc-current-menu-item {
      background-color: var(--current-link-bg);
      border-bottom: var(--current-link-underline);
  }


  #brx-header {
      background-color: var(--header-bg);
  }

  .dwc-mobile.brx-header-left #brx-header:not(.dwc-headroom *),
  .dwc-mobile.brx-header-right #brx-header:not(.dwc-headroom *) {
      position: relative;
      inline-size: 100%;
      block-size: auto;
  }

  /* MEDIA QUERY - DESKTOP */
  @media (min-width: 1025px) {

      .dwc-nav-trigger:not(.dwc-offcanvas *, .bricks-draggable-item),
      .dwc-mobile-menu-overlay:not(.dwc-offcanvas *),
      .mobile.dwc-nav__panel__header:not(.dwc-offcanvas *),
    .dwc-hamburger-wrap:not(.dwc-offcanvas *, .bricks-draggable-item){
          display: none !important;
      }
  }

  /* MEDIA QUERY - DESKTOP ENDS */
  html,
  body {
      block-size: 100%
  }

  main,
  footer {
      inline-size: 100%;
  }

  main {
      flex-grow: 1
  }

  .dwc-sidebar {
      box-shadow: var(--sidebar-shadow)
  }


  .dwc-sidebar__nav {
      block-size: 100%;
      z-index: 1;
      inline-size: var(--sidebar-width);
      position: relative;
      background-color: var(--nav-bg);
  }




  .dwc-sidebar__nav:not([data-builder-mode] *) {
      overflow: hidden;
  }

  .dwc-sidebar__nav__panel {
      background: var(--nav-bg);
      position: absolute;
      inline-size: 100%;
      block-size: 100%;
      display: flex;
      flex-direction: column;
      transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
      transform: translateX(0);
      box-shadow: -5px -5px 40px rgb(0 0 0/10%);
      z-index: 1000;
      padding-block: var(--panel-block-pad);
      padding-block-start: 0;
      flex-wrap: nowrap;
  }

  .dwc-mobile .dwc-sidebar__nav__panel {
      padding-block-start: var(--dwc-header-height);
  }

  .dwc-sidebar__nav__panel:not([data-builder-mode] *) {
      overflow: hidden;
  }

  .dwc-sidebar__nav__panel:not([data-builder-mode] *)::after {
      content: '';
      position: absolute;
      bottom: 5px;
      inline-size: 100%;
      block-size: var(--panel-block-pad);
      background: var(--nav-bg);
      filter: blur(5px)
  }

  .dwc-nav__panel__header {
      inline-size: 100%;
      padding: 0.32rem var(--pad-m);
      gap: var(--list-gap);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      z-index: 2;
      flex-wrap: nowrap;
  }

  .dwc-header-inner-wrap {
      inline-size: 100%;
      padding-block: var(--header-pad-y);
      padding-inline: var(--header-pad-x);
      gap: var(--list-gap);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      z-index: 2;
      flex-wrap: nowrap;
      background: var(--header-bg);
      position: relative;
  }


  .dwc-nav__panel__inner {
      inline-size: 100%;
      flex-grow: 1;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      flex-wrap: nowrap;
      padding-inline: var(--pad-m);
  }

  .dwc-nav__panel__title-wrap {
      padding: var(--pad-s) var(--pad-xs);
      inline-size: 100%;
      box-shadow: 0 -6px 10px 15px var(--nav-bg);
      position: -webkit-sticky;
      position: sticky;
      inset-block-start: -3px;
      background-color: var(--nav-bg);
      z-index: 1;
  }

  .dwc-nav__panel__title {
      color: var(--panel-title-color);
      font-size: var(--panel-title-size);
      font-weight: 500;
      letter-spacing: 1px;
  }

  .dwc-sidebar__nav__ul {
      display: flex;
      flex-direction: column;
      inline-size: 100%;
      margin: 0;
      padding-inline-start: 0;
      /* padding-block: var(--pad-m); */
      gap: var(--list-gap);
      flex-grow: 1;
  }

  .dwc-sidebar__nav__ul:not(.dwc-sidebar__dropdown-content .dwc-sidebar__nav__ul) {    
    padding-block: var(--pad-m);
 
}

  .dwc-sidebar__nav__li {
      list-style: none;
      inline-size: 100%;
      position: relative;
      border-radius: var(--link-border-radius)
  }

  .dwc-sidebar__nav__btn,
  .dwc-sidebar__nav__link {
      inline-size: 100%;
      display: flex !important;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      align-items: center;
      padding: var(--link-pad-y) var(--link-pad-x);
      gap: var(--link-gap);
      color: var(--panel-link-color);
      text-align: left;
      line-height: 1.3;
      transition: var(--sidebar-link-transition), outline 0s;
      border-radius: var(--link-border-radius);
  }

  .dwc-nav__back-btn {
      text-transform: uppercase;
      font-weight: bold;
      letter-spacing: 2px;
      font-size: var(--panel-back-size);
  }

  .dwc-nav__home-btn {
      inline-size: auto;
      padding: var(--pad-s);
      margin: auto;
      background: transparent;
      border: none;
      cursor: pointer;
      border-radius: var(--link-border-radius);
      position: relative;
  }

  .nav__home-btn__txt {
      position: absolute;
      clip: rect(0, 0, 0, 0);
      font-size: 12px;
  }

  .dwc-sidebar__nav__btn,
  .dwc-sidebar__dropdown-toggle button {
      outline-width: 0;
      outline: none;
      cursor: pointer;
      background: var(--link-bg);
      border: none;
  }

  /* mobile menu toggle button*/
  .dwc-nav-trigger {
      cursor: pointer;
      position: relative;
      min-inline-size: 26px !important;
      min-block-size: 0 !important;
  }

  .dwc-nav-trigger::before {
      inset-inline-start: 0;
      inset-inline-end: 0;
      transform: translateY(-5px);
  }

  .dwc-nav-trigger::after {
      inset-inline-start: 10px;
      inset-inline-end: 0;
      transform: translateY(5px);
  }

  .dwc-nav-trigger::before,
  .dwc-nav-trigger:after {
      content: '';
      position: absolute;
      transition: 0.4s 0.3s;
      block-size: 3px;
      background: var(--mobile-menu-trigger-color);
      inset-block-start: 50%;
      border-radius: 50vw
  }

  .dwc-slide-nav-open .dwc-nav-trigger::before {
      transform: translateY(0) rotate(45deg);
  }

  .dwc-slide-nav-open .dwc-nav-trigger::after {
      transform: translateY(0) rotate(-45deg);
      inset-inline-start: 0;
  }



  .dwc-sidebar__dropdown-toggle .dwc-nav__link__icon--chevron-right {
      transform: rotate(90deg);
      transition: 0.4s
  }

  .dwc-sidebar__dropdown-toggle [aria-expanded="true"] .dwc-nav__link__icon {
      transform: rotate(270deg)
  }

  .dwc-sidebar__dropdown-content {
      overflow: hidden;
      transition: var(--sidebar-transition) cubic-bezier(0.22, 0.61, 0.36, 1);
      padding-inline: var(--link-pad-x);
      padding-block: 0;
      background-color: var(--dropdown-content-bg)
  }


/*
  .dwc-sidebar__dropdown-content .dwc-sidebar__nav__ul {
      padding-block: calc(var(--link-pad-y) * 0.8);
  }
*/
  .dwc-sidebar__dropdown-content .dwc-sidebar__nav__li {
      border: var(--dropdown-links-underline);
  }


  .dwc-sidebar__dropdown-toggle {
      inline-size: 100%;
      display: flex !important;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      align-items: center;
      gap: var(--link-gap);
      text-align: left;
      line-height: 1.3;
      padding-inline-start: var(--link-pad-x);
      position: relative;
      transition: var(--sidebar-link-transition);
  }


  .dwc-sidebar__dropdown ul .dwc-nav__link__text,
  .dwc-sidebar__dropdown button {
      transition: var(--sidebar-link-transition), outline 0s;
      border-radius: var(--link-border-radius);
      inline-size: 100%;
  }

  .dwc-sidebar__dropdown button,
  .dwc-sidebar__dropdown-toggle .dwc-nav__link__text {
      padding: var(--link-pad-y) 0;
  }

  .dwc-sidebar__dropdown-content ul .dwc-nav__link__text {
      padding: var(--link-pad-y) var(--link-pad-x);
  }

  .dwc-sidebar__dropdown-content ul:not([class*="level-"]:not(.level-1)  ul){
    padding-inline-start: calc(var(--dropdown-links-indent) - var(--link-pad-x));
    padding-block: var(--link-pad-y);
}

  .dwc-sidebar__dropdown-toggle button {
      margin-inline-start: auto;
      flex-grow: 1;
      padding-inline-end: var(--link-pad-x);
      position: absolute;
      inset-block-start: 0;
      bottom: 0;
      inset-inline-start: 0;
      inset-inline-end: 0;
  }


/* LEVEL 1 STYLES */

/* Normal icon color for Level 1 */
.dwc-sidebar__dropdown-toggle.level-1 .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right),
.dwc-nav__link__icon:not(.dwc-nav__home-btn *, .dwc-nav__link__icon--chevron-right, .dwc-nav__link__icon--chevron-left) {
    color: var(--lvl-1-icon-color);
    font-size:var(--lvl-1-icon-size)
}


/* Expanded background color for Level 1 */
.dwc-sidebar__dropdown-toggle.level-1:has([aria-expanded='true']) {
    background-color: var(--lvl-1-toggle-bg-active);
}

/* Dropdown content background for Level 1 */
.dwc-sidebar__dropdown-content.level-1 {
    background-color: var(--lvl-1-content-bg);  
}

/* LEVEL 2 STYLES */

/* Expanded background color for Level 2 */
.dwc-sidebar__dropdown-toggle.level-2:has([aria-expanded='true']) {
    background-color: var(--lvl-2-toggle-bg-active);
}

/* Expanded text color for Level 2 */
.dwc-sidebar__dropdown-toggle.level-2:has([aria-expanded='true']) .dwc-nav__link__text {
    color: var(--lvl-2-toggle-color-active);
}

/* Dropdown content background for Level 2 */
.dwc-sidebar__dropdown-content.level-2 {
    background-color: var(--lvl-2-content-bg);
    padding-inline-start: var(--lvl-2-indent);
}

/* Normal icon color and size for Level 2 */
.dwc-sidebar__dropdown-toggle.level-2 .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right) {
    font-size:var(--lvl-2-icon-size)
}

.dwc-sidebar__dropdown-toggle.level-2 .dwc-nav__link__icon {
    color: var(--lvl-2-icon-color);
}

/* Icon color for Level 2 when expanded */
.level-2:has([aria-expanded='true']) .dwc-nav__link__icon {
    color: var(--lvl-2-icon-color);
}

/* Hover icon color for Level 2 when expanded */
li>.level-2:has([aria-expanded='true']):hover .dwc-nav__link__icon {
    color: var(--lvl-2-icon-hover-color) !important;
}

/* LEVEL 3 STYLES */

/* Expanded background color for Level 3 */
.dwc-sidebar__dropdown-toggle.level-3:has([aria-expanded='true']) {
    background-color: var(--lvl-3-toggle-bg-active);
}

/* Expanded text color for Level 3 */
.dwc-sidebar__dropdown-toggle.level-3:has([aria-expanded='true']) .dwc-nav__link__text {
    color: var(--lvl-3-toggle-color-active);
}

/* Dropdown content background for Level 3 */
.dwc-sidebar__dropdown-content.level-3 {
    background-color: var(--lvl-3-content-bg);
    padding-inline-start: var(--lvl-3-indent);
}

/* Normal icon color and size for Level 3 */
.dwc-sidebar__dropdown-toggle.level-3 .dwc-nav__link__icon {
    color: var(--lvl-3-icon-color);
}

.dwc-sidebar__dropdown-toggle.level-3 .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right) {   
    font-size:var(--lvl-3-icon-size)
}

/* Icon color for Level 3 when expanded */
.level-3:has([aria-expanded='true']) .dwc-nav__link__icon {
    color: var(--lvl-3-icon-color);
}

/* Hover icon color for Level 3 when expanded */
li>.level-3:has([aria-expanded='true']):hover .dwc-nav__link__icon {
    color: var(--lvl-3-icon-hover-color) !important;
}

  .dwc-sidebar__nav__li {
      border-bottom: var(--link-underline);
  }


  .dwc-sidebar__nav__link:hover,
  .dwc-nav__home-btn:hover,
  button.dwc-sidebar__nav__btn:hover,
  .dwc-sidebar__dropdown-toggle:hover {
      background: var(--link-hover-bg);
  }


  .dwc-sidebar__dropdown-content a {
      background: var(--dropdown-links-bg);
      color: var(--dropdown-links-color)
  }

  .dwc-sidebar__dropdown-content a:hover {
      background: var(--dropdown-links-hover-bg);
      color: var(--dropdown-links-hover-color)
  }

  button:hover .dwc-nav__link__text,
  .dwc-sidebar__dropdown-toggle:hover .dwc-nav__link__text,
  button:hover .dwc-nav__back__text,
  .dwc-sidebar__dropdown-toggle:hover .dwc-nav__link__text {
      color: var(--link-hover-color);
  }



  .dwc-nav__link__text {
      color: var(--panel-link-color);
      font-size: var(--link-txt-size);
  }

  .dwc-sidebar__nav__link::before {
      content: '';
      inset-block-start: 0;
      bottom: 0;
      inset-inline-start: 0;
      inset-inline-end: 0;
      position: absolute;
  }

  /* button:hover .dwc-nav__link__icon,
  li:hover .dwc-nav__link__icon {
      color: var(--link-icon-hover-color) !important;
  } */

  button:hover .dwc-nav__link__icon:not(.level-2:has([aria-expanded='true']) *, .level-3 *), 
  li:hover > .dwc-sidebar__dropdown-toggle .dwc-nav__link__icon:not(.level-2:has([aria-expanded='true']) *, .level-3:has([aria-expanded='true']) *),
li:hover > a .dwc-nav__link__icon{
    color: var(--link-icon-hover-color) !important;
}

  .dwc-nav__link__icon {
      font-size: var(--nav-icon-size);
      color: var(--panel-icon-color)
  }

  .dwc-nav__link__icon--chevron-right {
      margin-inline-start: auto;
  }

  
  .dwc-nav__link__icon--chevron-right,
  .dwc-nav__link__icon--chevron-left  {
    font-size: var(--chevron-size);
    color: var(--chevron-icon-color);
}

svg.dwc-nav__link__icon{
    width: var(--nav-icon-size);
    height: auto;
}

svg.dwc-nav__link__icon path {
    stroke: var(--panel-icon-color);
}

.dwc-sidebar__nav__link:hover > svg.dwc-nav__link__icon path {
    stroke:var(--link-icon-hover-color) !important;
  }

button:hover svg.dwc-nav__link__icon path:not(.level-2:has([aria-expanded='true']) *, .level-3 *), 
li:hover > .dwc-sidebar__dropdown-toggle svg.dwc-nav__link__icon path:not(.level-2:has([aria-expanded='true']) *, .level-3:has([aria-expanded='true']) *), 
li:hover > a svg.dwc-nav__link__icon path {
    color: var(--link-icon-hover-color) !important;
}


  .dwc-sidebar__nav__list-img {
      inline-size: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      object-position: top center;
      border-radius: var(--link-border-radius);
  }

  .dwc-sidebar__nav__panel-footer {
      inline-size: 100%;
      padding-block: var(--pad-m);
      gap: var(--link-gap);
      z-index: 5;
      padding-inline: var(--pad-m);
      border-top: var(--horizontal-line);
  }

  .dwc-sidebar__nav__panel-footer:not([data-builder-mode] *) {
      box-shadow: 0 6px 24px 32px var(--nav-bg);
  }

  .dwc-social-wrapper a {
      color: var(--social-color);
  }

  .dwc-social-wrapper a:hover {
      color: var(--social-hover-color)
  }

  .dwc-social-wrapper li {
      background: var(--social-bg);
      border-radius: var(--link-border-radius);
  }

  .dwc-social-wrapper li:hover {
      background: var(--social-hover-bg);

  }

  .dwc-social-wrapper i {
      color: var(--social-icon-color);
      font-size: var(--social-icon-size);
  }

  .dwc-social-wrapper li:hover i {
      color: var(--social-icon-hover-color)
  }

  .dwc-cta {
      justify-content: center;
      background: var(--cta-bg);
      inline-size: 100%;
      color: var(--cta-color);
      border-radius: var(--link-border-radius);
  }

  .dwc-cta:hover {
      background: var(--cta-hover-bg);
  }


  /*FOCUS STYLES*/

  .dwc-sidebar *:not(.dwc-sidebar .dwc-sidebar__nav__panel):focus-visible {
      outline: solid var(--focus-outline-width) var(--focus-outline-color) !important;
      outline-offset: var(--focus-outline-offset);
      transition: 0s;
  }

  .dwc-sidebar li:not(.dwc-sidebar__dropdown):focus-within {
      outline: solid var(--focus-outline-width) var(--focus-outline-color) !important;
  }

  .dwc-sidebar li:focus-within:has(:focus:not(:focus-visible)),
  #brx-header .dwc-sidebar li a:not(.dwc-sidebar__dropdown-toggle *):focus-visible,
  #brx-header .dwc-sidebar__nav__btn:not(.dwc-nav__back-btn):focus-visible,
  .dwc-sidebar__nav__panel:focus,
  .dwc-sidebar__nav__panel:focus-visible,
  .dwc-sidebar *:focus:not(:focus-visible),
  header:focus-visible {
      outline: none !important;
  }

  /*FOCUS STYLES END*/


  .dwc-slide-left {
      transform: translateX(-100%);
      z-index: 0;
  }

  .dwc-slide-right {
      transform: translateX(75%);
      z-index: 0;
      opacity: 0;
  }

  /* mobile menu toggle */
  .dwc-nav-trigger {
      border: none;
      background: none;
      padding: var(--pad-m)
  }

  /*MEDIA QUERY - MOBILE*/
  @media (max-width:1024px) {

      /*header and menu on mobile*/
      .brx-header-left #brx-header:not([data-builder-mode] *, .dwc-headroom.dwc-mobile *),
      .brx-header-right #brx-header:not([data-builder-mode] *) {
          position: relative;
          inline-size: 100%;
          block-size: auto;
      }

      /*main and footer*/
      .brx-header-left #brx-content,
      .brx-header-left #brx-footer,
      .brx-header-right #brx-content,
      .brx-header-right #brx-footer {
          margin: 0 !important;
      }

      .dwc-sidebar__nav {
          background: var(--nav-bg);
          inline-size: var(--sidebar-width);
          position: fixed;
          bottom: 0;
          inset-inline-start: 0;
          inset-block-start: 0;
          transform: translateX(-100%);
          transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
          min-block-size: 100vh;
          min-block-size: 100dvb;
      }

      .dwc-sidebar__nav__panel:not([data-builder-mode] *) {
          background: transparent;
      }

      .dwc-sidebar__nav__panel>div {
          background: var(--nav-bg);
      }

      .dwc-slide-nav-open .dwc-sidebar__nav:not(.dwc-push-content *) {
          transform: translateX(0);
      }

      .dwc-nav__link__text {
          font-weight: 500;
      }

      .dwc-sidebar__logo-wrapper {
          inline-size: auto;
      }

      body.dwc-slide-nav-open {
          overflow: hidden;
          block-size: 100vh
      }

      .dwc-mobile-menu-overlay {
          background: var(--overlay-bg);
          position: fixed;
          inset-block-start: 0;
          bottom: 0;
          inset-inline-start: 0;
          inset-inline-end: 0;
          pointer-events: none;
          opacity: 0;
          transition: 0.4s 0.2s;
      }

      .dwc-slide-nav-open .dwc-mobile-menu-overlay {
          pointer-events: auto;
          opacity: var(--overlay-opacity);
      }

      /* RIGHT MENU ON MOBILE*/

      .brx-header-right .dwc-sidebar__nav {
          transform: translateX(100%);
          inset-inline-start: auto;
          inset-inline-end: 0;
      }

      .dwc-slide-nav-open.brx-header-right .dwc-sidebar__nav {
          transform: translateX(0%);
      }

      /* inside Bricks start*/
      [data-builder-mode] .dwc-sidebar__nav {
          inset-block-start: 120px;
          transform: translateX(0);
          border-top: dashed 1px gray;
          position: static;
          overflow: visible;
      }

      [data-builder-mode].brx-header-left #brx-header,
      [data-builder-mode].brx-header-right #brx-header {
          background: transparent;
      }

      /* inside Bricks end */




  }

  /*MEDIA QUERY - MOBILE ENDS */

  /* headroom*/

  .dwc-headroom.dwc-offcanvas .dwc-sidebar,
  .dwc-headroom.dwc-topbar-enabled .dwc-sidebar,
  .dwc-headroom.dwc-offcanvas .dwc-header-inner-wrap,
  .dwc-headroom.dwc-topbar-enabled .dwc-header-inner-wrap {
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      inset-inline-end: 0;
      transition: transform 1s ease;
  }


  /*.dwc-headroom.scroll-down .dwc-sidebar:not(.dwc-topbar-enabled *),*/
  .dwc-headroom.dwc-offcanvas.scroll-down .dwc-header-inner-wrap,
  .dwc-headroom.dwc-topbar-enabled.scroll-down .dwc-header-inner-wrap {
      transform: translateY(-100%);
  }


  @media (max-height: 667px) {

      .dwc-sidebar__nav__panel:not(.ng-scope .dwc-sidebar__nav__panel) {
    overflow-y:scroll;
    overscroll-behavior: contain;
     /*  min-block-size: 100vh;
  min-block-size: 100dvb;*/
} 

      .dwc-nav__panel__inner {
          overflow: hidden;
          flex-shrink: 0;
      }


  }


  /* MEDIA QUERY - MOBILE ENDS */



  /*SCROLLBARS*/
  .dwc-nav__panel__inner::-webkit-scrollbar-track {
      border-radius: 5px;
      background-color: transparent;
  }

  .dwc-nav__panel__inner::-webkit-scrollbar {
      inline-size: 0;
      background-color: transparent;
  }

  .dwc-nav__panel__inner::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: var(--nav-bg);
  }

  /* SCROLLBARS END */

  /* FADE IN OFFCANVS */

  .dwc-offcanvas-header{
      animation: dwc-header-fade-in 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
  }

 .dwc-offcanvas-header nav{
      animation: dwc-header-fade-in 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.6s both;
  }

  body:has(.dwc-offcanvas-header) {
      animation: dwc-header-fade-in 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
  }

  @keyframes dwc-header-fade-in {
      0% {
          opacity: 0;
      }

      100% {

          opacity: 1;
      }
  }


  /* INSIDE BRICKS */
  [data-builder-mode] .dwc-sidebar__nav__panel,
  [data-builder-mode].brx-header-left #brx-header,
  [data-builder-mode].brx-header-right #brx-header {
      position: static !important;
      outline: gray dashed 3px;
      padding-block-end: 20px;
      min-block-size: min(100vh, 600px);
      block-size: unset;
  }

  #brx-header.bricks-area {
      inline-size: 100% !important;
      min-block-size: unset !important;
      padding-block-end: 0 !important;
  }

  .bricks-draggable-item.dwc-sidebar {
      position: relative
  }

  .bricks-draggable-item.dwc-sidebar__nav {
      position: absolute;
      inset-block-start: 100%;
      flex-wrap: nowrap;
  }


  [data-builder-mode] .dwc-slide-right {
      opacity: 1 !important;
      transform: translateX(0) !important;
  }

  [data-builder-mode] .dwc-sidebar__nav {
      overflow: visible !important;
  }

  [data-builder-mode] .dwc-sidebar__nav__panel:hover {
      outline: yellow solid 3px;
      z-index: 100000
  }

  [data-builder-mode] .dwc-slide-right {
      opacity: 1;
      transform: translateX(0);
  }

  [data-builder-mode] button.dwc-sidebar__nav__btn,
  [data-builder-mode] .dwc-sidebar__nav__link,
  [data-builder-mode] .dwc-sidebar__nav__panel {
      position: relative;
  }

  [data-builder-mode] button.dwc-sidebar__nav__btn::after {
      content: 'TO ' '"'attr(data-title)'"' ' PANEL';
      position: absolute;
      bottom: 1px;
      left: 40px;
      font-size: 8px;
      font-weight: bold;      
      color: var(--label-color);
      letter-spacing: 1px;
    font-family: poppins, roboto;
  }

  [data-builder-mode] button.dwc-nav__back-btn::after {
      content: 'To previous panel';
      inset-inline-start: 32px;
  }

  [data-builder-mode] button.dwc-nav__home-btn::after {
      content: 'HOME';
      position: absolute;
      top: 80%;
      left: 48%;
      right: auto;
      transform: translateX(-50%);
      white-space: nowrap;
      opacity: 0.8;
      font-size: 8px;
      font-weight: bold;
      color: var(--label-color);
      letter-spacing: 1px;
    font-family: poppins, roboto;
  }

  [data-builder-mode] .dwc-sidebar__nav__panel::after {
      content: '"'attr(data-title)'"' ' Panel';
      position: absolute;
      top: 0;
      left: 100%;
      font-size: 18px;
      font-weight: bold;
      color: black;
      background: white;
      padding-inline: 2rem;
      letter-spacing: 1px;
      white-space: nowrap;
      writing-mode: vertical-lr;
  }


[data-builder-mode] .dwc-sidebar__dropdown-toggle >  button::before
{
    position: absolute;
    right: 100%; 
    color: var(--label-color);
    background-color: #ebebeb;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    font-family: poppins, roboto;
    padding: 4px;
    border-radius: 5px;    
}

[data-builder-mode] .dwc-sidebar__dropdown-content{
  overflow: visible;
}

[data-builder-mode] .dwc-nav__panel__inner > ul > .dwc-sidebar__dropdown >  .dwc-sidebar__dropdown-toggle   >  button::before{
    content: 'L1';
}

[data-builder-mode] .dwc-sidebar__dropdown-toggle:not(.dwc-nav__panel__inner > ul > .dwc-sidebar__dropdown > *,.dwc-sidebar__dropdown .dwc-sidebar__dropdown .dwc-sidebar__dropdown > *)  >  button::before{
    content: 'L2';
}

[data-builder-mode] .dwc-sidebar__dropdown-toggle >  button::before{
    content: 'L3';
    } 

/*
[data-builder-mode] .dwc-sidebar__dropdown-content:not(.dwc-sidebar__nav__li.is-active-element *, .is-active-element, :has(.is-active-element), .is-active-element + .dwc-sidebar__dropdown-content, :has(.is-active-element) + .dwc-sidebar__dropdown-content) {
    height: 0;
    overflow: hidden;
}*/



/* COLLAPSE SIDEBAR*/

.dwc-collapse-enabled #brx-header,
.dwc-nav__link__icon,
.dwc-social-wrapper li .icon,
.dwc-nav__link__text,
.dwc-nav__link__icon--chevron-right,
.dwc-social__text,
.dwc-show,
.dwc-hide,
.dwc-toggle-collapse .brxe-icon,
footer:not(.dwc-offcanvas, .dwc-mobile *, .dwc-overlay-sidebar *, [data-builder-mode] *),
.dwc-collapse-enabled .dwc-site-wrapper>:not(header, .dwc-offcanvas, .dwc-mobile *, .dwc-overlay-sidebar *),
.dwc-collapse-enabled main:not(.dwc-mobile *) {
    --sidebar-transition: 700ms;
    transition:
        transform var(--sidebar-transition) var(--collapse-ttf),
        opacity var(--opacity-transition),
        inline-size var(--sidebar-transition) var(--collapse-ttf) !important;
}

.dwc-collapse-sidebar .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right, .dwc-rtl *),
.dwc-collapse-sidebar .dwc-social-wrapper li .icon:not(.dwc-rtl *) {
    transform: translateX(calc(var(--sidebar-width) - var(--collapse-offset)));
}

.dwc-rtl.dwc-collapse-sidebar .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right),
.dwc-rtl.dwc-collapse-sidebar .dwc-social-wrapper li .icon{
    transform: translateX(calc((var(--sidebar-width) * -1) + var(--collapse-offset)));
}

.dwc-collapse-sidebar .dwc-show:not(.dwc-rtl *) {
    transform: translateX(calc(var(--sidebar-width) - (var(--collapse-offset) + var(--collapse-pad))));  
}

.dwc-collapse-sidebar .dwc-show {   
    opacity: 1;
}




.dwc-collapse-sidebar .dwc-nav__link__text,
.dwc-collapse-sidebar .dwc-nav__link__icon--chevron-right,
.dwc-collapse-sidebar .dwc-social-wrapper li span,
.dwc-collapse-sidebar .dwc-hide {
    opacity: 0;
}

.dwc-collapse-sidebar #brx-header:not(.dwc-rtl *) {
    transform: translateX(calc(-100% + var(--collapse-offset)))
}

.dwc-rtl.dwc-collapse-sidebar #brx-header {
    transform: translateX(calc(100% - var(--collapse-offset)))
}

.dwc-collapse-sidebar footer:not(.dwc-offcanvas, .dwc-mobile *, .dwc-overlay-sidebar *, [data-builder-mode] *),
.dwc-collapse-sidebar .dwc-site-wrapper>:not(header, .dwc-offcanvas, .dwc-mobile *, .dwc-overlay-sidebar *, [data-builder-mode] *),
.dwc-collapse-sidebar>main:not(.dwc-mobile *) {
    --sidebar-transition: 350ms;  
    inline-size: calc(100% - var(--collapse-offset)) !important;
    margin-inline-start: auto !important;
}

.dwc-collapse-enabled.brx-header-left #brx-content:not(.dwc-collapse-sidebar *, .dwc-mobile *), 
.dwc-collapse-enabled.brx-header-left #brx-footer:not(.dwc-collapse-sidebar *, .dwc-mobile *) {
    margin-inline-start: auto;
    inline-size: calc((100% + 15px) - var(--sidebar-width));
}


.dwc-toggle-collapse:not([data-builder-mode] *, .dwc-collapse-enabled .dwc-toggle-collapse) {
    display: none;
}



.dwc-collapse-sidebar .dwc-toggle-collapse .brxe-icon:not(.dwc-rtl *) {
    transform: rotate(180deg);
}

.dwc-rtl.dwc-collapse-sidebar .dwc-toggle-collapse .brxe-icon {
    transform: rotate(0deg) !important;
}

.dwc-rtl .dwc-toggle-collapse .brxe-icon {
    transform: rotate(180deg) !important;
}


.dwc-show:not(.dwc-collapse-sidebar *, [data-builder-mode] *),
.dwc-collapse-sidebar .dwc-hide:not(.dwc-fade) {    
    opacity: 0;
    position: absolute;
}



/* WITH TOBAR ENABLED */
.dwc-topbar-enabled .dwc-toggle-collapse {
    position: absolute;
    inset-inline-start: var(--sidebar-width);
    inset-block-start: 100%;
    block-size: 100%;
    transition: left var(--sidebar-transition) var(--collapse-ttf);
    display: flex;
}

.dwc-topbar-enabled.dwc-mobile .dwc-toggle-collapse{
    display: none;
}

.dwc-topbar-enabled.dwc-collapse-sidebar .dwc-toggle-collapse {

    inset-inline-start: var(--collapse-offset);

}

.dwc-collapse-sidebar.dwc-topbar-enabled .dwc-header-inner-wrap.dwc-show {
    transform: translateX(0);
}


.dwc-collapse-sidebar.dwc-topbar-enabled .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right, .dwc-auto-width *), 
.dwc-collapse-sidebar.dwc-topbar-enabled .dwc-social-wrapper li .icon:not(.dwc-auto-width *) {
    transform: translateX(calc(var(--sidebar-width) - ((var(--center-scrub) * var(--collapse-w)) + var(--icon-width-offset))));
}

.dwc-collapse-sidebar.dwc-topbar-enabled #brx-header {
    transform: unset !important;
}

.dwc-topbar-enabled.dwc-collapse-sidebar .dwc-sidebar__nav {
    transform: translateX(calc(-100% + var(--collapse-offset)));
}

.dwc-topbar-enabled .dwc-sidebar__nav {
    transition:
        transform var(--sidebar-transition) var(--collapse-ttf),
        opacity var(--opacity-transition),
        width var(--sidebar-transition) var(--collapse-ttf) !important;
}


/*  MANUAL WIDTH*/

.dwc-collapse-sidebar #brx-header:not(.dwc-auto-width *, .dwc-rtl *) {
    transform: translateX(calc(-100% + var(--collapse-w)));
} 

.dwc-rtl.dwc-collapse-sidebar #brx-header:not(.dwc-auto-width *) {
    transform: translateX(calc(100% - var(--collapse-w)));
} 

.dwc-collapse-sidebar .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right, .dwc-auto-width *),
.dwc-collapse-sidebar .dwc-social-wrapper li .icon:not(.dwc-auto-width *) {
    transform: translateX(calc(var(--sidebar-width) - ((var(--center-scrub) * var(--collapse-w)) + var(--icon-width-offset))));
} 

.dwc-collapse-sidebar .dwc-show:not(.dwc-auto-width *) {
    opacity: 1;
    transform: translateX(calc(var(--sidebar-width) - ((var(--center-scrub) * var(--collapse-w)) + var(--icon-width-offset))));
}

   
.dwc-topbar-enabled.dwc-collapse-sidebar .dwc-sidebar__nav:not(.dwc-auto-width *)  {
    transform: translateX(calc(-100% + var(--collapse-w))) ;
}

.dwc-topbar-enabled.dwc-collapse-sidebar .dwc-toggle-collapse:not(.dwc-auto-width *)  {
    inset-inline-start: var(--collapse-w);
}
if (enableTopBar && !enableOffCanvas) {
    document.body.classList.add('dwc-topbar-enabled')
}


if (enableRTL) {
    document.body.classList.add('dwc-rtl')
}

// we can remove !enableOffCanvas if on mobile only to have overlay on desktop + headroom on mobile.
if (overlaySidebar && !enableOffCanvas) {
    document.body.classList.add('dwc-overlay-sidebar')
}

if (overlayTopBar && enableOffCanvas) {
    document.body.classList.add('dwc-overlay-topbar')
}

if (mobileMenuAboveHeader == 1) {
    document.body.classList.add('dwc-mobile-menu-over')
}

document.body.classList.add('show-nav')
//console.log('show nav')


//document.addEventListener('DOMContentLoaded', () => {
// COLLAPSE SIDEBAR startes
if (enableCollapsibleSidebar && !enableOffCanvas && !mq.matches) {
    const collapseToggle = document.querySelector('.dwc-toggle-collapse');
    const sidebarNav = document.querySelector('.dwc-sidebar__nav');
    let removedByMouseEnter = false; // Track if class was removed by hover

    document.body.classList.add('dwc-collapse-enabled');
    if (collapseAutoWidth) {
        document.body.classList.add('dwc-auto-width');
    } else {
        document.body.style.setProperty('--collapse-w', `${collapseWidth}px`);
        document.body.style.setProperty('--center-scrub', `${collapsecenterScrub}`);
    }

    // Toggle collapse on button click
    collapseToggle.addEventListener('click', function () {
        document.body.classList.toggle('dwc-collapse-sidebar');
        initCollapseContent(); goHome();
        saveCollapseStatus();  // Save the updated state after toggling
    });

    // Hover functionality
    if (hoverToExpandSidebar) {
        sidebarNav.addEventListener('mouseenter', function () {
            if (document.body.classList.contains('dwc-collapse-sidebar')) {
                document.body.classList.remove('dwc-collapse-sidebar');
                removedByMouseEnter = true;  // Mark that we explicitly removed it
            }
        });

        sidebarNav.addEventListener('mouseleave', function () {
            if (removedByMouseEnter) {
                document.body.classList.add('dwc-collapse-sidebar');
                initCollapseContent(); goHome()
                removedByMouseEnter = false;  // Reset the flag after re-adding
            }
        });
    }

    // expand when links are focused   

    let removedByFocus = false;
    let keepOpenOnEnter = false;
    const focusableElements = sidebarNav.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
    
    // Listen for 'keydown' on buttons within sidebarNav to detect Enter key presses
    sidebarNav.addEventListener('keydown', function (event) {
        if (event.key === 'Enter' && event.target.tagName === 'BUTTON') {
            keepOpenOnEnter = true;
        }
    });
    
    sidebarNav.addEventListener('focusin', function (event) {
        if (document.body.classList.contains('dwc-collapse-sidebar')) {
            document.body.classList.remove('dwc-collapse-sidebar');
            removedByFocus = true;  // Mark that we explicitly removed it
        }
    });
    
    sidebarNav.addEventListener('focusout', function () {
        setTimeout(function () {
            const isFocusOutsideSidebar = [...focusableElements].every(el => !el.contains(document.activeElement));
    
            if (isFocusOutsideSidebar && removedByFocus && !keepOpenOnEnter) {
                document.body.classList.add('dwc-collapse-sidebar');
                initCollapseContent();
                goHome();
                removedByFocus = false;  // Reset the flag after re-adding
            }
    
            // Reset the Enter key flag after the check
            keepOpenOnEnter = false;
        }, 50);
    });
    
    

    
    // Run once on page load to apply the saved state
    loadCollapseStatus();


    //----- COLLAPSE ON PAGE LOAD

    if (collapseOnPageLoad) {
        document.body.classList.add('dwc-collapse-sidebar');
        saveCollapseStatus();  // Save the updated state after toggling
    }

    // Call the function when needed
    setCollapseOffset();
}

// COLLAPSE SIDEBAR FUNCTIONS


// // set offset variable
// function setCollapseOffset() {
//     // Get the padding values of .dwc-nav__panel__inner
//     const panelInner = document.querySelector('.dwc-nav__panel__inner');
//     if (!panelInner) return;  // Check if element exists

//     const panelStyles = getComputedStyle(panelInner);
//     const paddingLeft = parseFloat(panelStyles.paddingLeft);

//     // Get the width of .dwc-nav__link__icon
//     const iconElement = document.querySelector('.dwc-nav__link__icon');
//     if (!iconElement) return;  // Check if element exists

//     const iconWidth = iconElement.offsetWidth;
//     const iconWidthOffset = iconWidth / 2;

//     // Sum the paddings and icon width
//     const collapseOffset = (paddingLeft * offsetMultiplier) + iconWidth;

//     // Set the CSS variables on the body
//     document.body.style.setProperty('--collapse-offset', `${collapseOffset}px`);
//     document.body.style.setProperty('--icon-width-offset', `${iconWidthOffset}px`);
//     document.body.style.setProperty('--collapse-pad', `${paddingLeft}px`)
// }

// set offset variable
function setCollapseOffset() {
    // Get the padding values of .dwc-nav__panel__inner
    const panelInner = document.querySelector('.dwc-nav__panel__inner');
    if (!panelInner) return;  // Check if element exists

    const panelStyles = getComputedStyle(panelInner);
    const paddingLeft = parseFloat(panelStyles.paddingLeft);

    // Get the width of .dwc-nav__link__icon
    const iconElement = document.querySelector('.dwc-nav__link__icon');
    if (!iconElement) return;  // Check if element exists

    // Use getBoundingClientRect() which works for both HTML and SVG elements
    const iconRect = iconElement.getBoundingClientRect();
    const iconWidth = iconRect.width;
    const iconWidthOffset = iconWidth / 2;

    // Sum the paddings and icon width
    const collapseOffset = (paddingLeft * offsetMultiplier) + iconWidth;

    // Set the CSS variables on the body
    document.body.style.setProperty('--collapse-offset', `${collapseOffset}px`);
    document.body.style.setProperty('--icon-width-offset', `${iconWidthOffset}px`);
    document.body.style.setProperty('--collapse-pad', `${paddingLeft}px`);
}



//------ SAVE COLLAPASE STATE

function saveCollapseStatus() {
    if (saveCollapseState === 1) {
        const isCollapsed = document.body.classList.contains('dwc-collapse-sidebar');
        // Save the current state to localStorage
        localStorage.setItem('sidebarCollapsed', isCollapsed ? 'true' : 'false');
    }
}

// RESTORE COLLAPSE STATE
function loadCollapseStatus() {
    if (saveCollapseState === 1) {
        const savedState = localStorage.getItem('sidebarCollapsed');

        // If the state exists, apply the correct class to the body
        if (savedState === 'true') {
            document.body.classList.add('dwc-collapse-sidebar');
            // initCollapseContent();
        } else if (savedState === 'false') {
            document.body.classList.remove('dwc-collapse-sidebar');
        }
    }
}

// FUNCTIONS END

// IF COLLAPSE SIDEBAR ENDS


// COLLAPSE SIDEBAR ENDS

// Select the element
const listItem = document.querySelector('.dwc-sidebar__nav__li');

if (listItem) {
    // Get the computed height of the element
    const listItemHeight = listItem.offsetHeight;

    // Set the height as a CSS variable on the body
    document.body.style.setProperty('--list-item-height', `${listItemHeight}px`);
}




    const header = document.querySelector("header");
    const sidebar = document.querySelector('.dwc-sidebar');
    const navTrigger = document.querySelector(".dwc-nav-trigger");
    const closeBtn = document.querySelector(".dwc-sidebar__nav-close-btn");
    const mobileMenuOverlay = document.querySelector(".dwc-mobile-menu-overlay");
    const body = document.body;
    const nav = document.querySelector('.dwc-sidebar__nav');
    const homePanel = document.querySelector('.dwc-sidebar__nav__panel--home');
    const sidebarNavPanels = document.querySelectorAll(".dwc-sidebar__nav__panel");
    const dropdownToggles = document.querySelectorAll('.dwc-sidebar__dropdown-toggle button');
    const dropdownContents = document.querySelectorAll('.dwc-sidebar__dropdown-content');
    const menuLinks = document.querySelectorAll('.dwc-sidebar__nav__li a');
    const offCanvasMobileOnly = offCanvasBreakpoint.matches;
		const savedState = localStorage.getItem('sidebarCollapsed');

    const select = selector => document.querySelectorAll(selector);

    const initInert = () => select('.dwc-sidebar__nav__panel').forEach(nPanel => {

        if (!nPanel.classList.contains('dwc-sidebar__nav__panel--home')) {
            nPanel.inert = true;
        } else if (enableOffCanvas && offCanvasMobileOnly) {
            nPanel.inert = true;
        } else {
            nPanel.inert = false;
        }
    });






    //OPEN FIRST DROP DOWN
    if (openFirstDropDown) {
        setTimeout(function () {
            dropdownToggles[0].click();
        }, 600);
    }

    // Get DROPWDOWN LEVELS
    if(dropdownContents){
    dropdownContents.forEach(function (element) {
        let level = 1;
        let parent = element.parentElement.closest('.dwc-sidebar__dropdown-content');

        // Calculate the level by checking the number of ancestors
        while (parent) {
            level++;
            parent = parent.parentElement.closest('.dwc-sidebar__dropdown-content');
        }

        // Assign the appropriate level class to the dropdown content
        element.classList.add(`level-${level}`);

        // Find the previous sibling with the class .dwc-sidebar__dropdown-toggle
        const previousToggle = element.previousElementSibling;

        // Check if the previous sibling is a dropdown toggle and assign the level class
        if (previousToggle && previousToggle.classList.contains('dwc-sidebar__dropdown-toggle')) {
            previousToggle.classList.add(`level-${level}`);
        }
    });
}



    // CURRENT MENU ITEM ****************


    // Get the current page address without trailing slash
    var currentPage = window.location.pathname.replace(/\/$/, '');

    for (var i = 0; i < menuLinks.length; i++) {
        var link = menuLinks[i];

        // Extract the pathname from the link's href attribute without trailing slash
        var linkPathname = link.href.replace(window.location.origin, '').replace(/\/$/, '');

        // Check if the pathname matches the current page
        if (linkPathname === currentPage) {
            // Add the class 'dwc-current-menu-item' to the matching link
            link.classList.add("dwc-current-menu-item");

            // Break out of the loop since we found the matching link
            break;
        } else {
            // Skip to the next iteration if the link doesn't match
            continue;
        }
    }

    setTimeout(function () {

        if (enableCollapsibleSidebar && (collapseOnPageLoad || savedState === 'true')) { return }

        const currentDropDownLink = document.querySelector('.dwc-current-menu-item.dwc-nav__link__text');
        if (currentDropDownLink) {
            const parent = currentDropDownLink.closest('.dwc-sidebar__dropdown-content');
            if (parent) {
                const toggle = parent.previousElementSibling.querySelector('button');
                if (toggle) {
                    toggle.click();
                }
            }
            setTimeout(function () {
                currentDropDownLink.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                //console.log(currentDropDownLink);
            }, 500);
        }
    }, 2000);


    // CURRENT MENU ENDS **********

    // CURRENT MENU CHECK - we'll be using this to determine if to reset panels on navTrigger click or not
    var hasCurrentMenu = Array.from(document.querySelectorAll(".dwc-sidebar__nav__link.dwc-current-menu-item")).some(function (link) {
        var parentPanel = link.closest(".dwc-sidebar__nav__panel");
        return !parentPanel || !parentPanel.classList.contains("dwc-sidebar__nav__panel--home");
    });

    // CURRENT CHECK ENDS *********************


    const goHome = () => select('.dwc-sidebar__nav__panel').forEach(nPanel => {
        nPanel.classList.remove('dwc-slide-left');

        if (!nPanel.classList.contains('dwc-sidebar__nav__panel--home')) {
            nPanel.classList.add('dwc-slide-right');
            nPanel.inert = true;
        } else {
            nPanel.inert = false;
            if (header && !mq.matches) {
                header.setAttribute('tabindex', 0);
                header.focus()
            }
        }
        select('.dwc-sidebar__nav__btn:not(.dwc-nav__back-btn)').forEach(sbtn => {
            sbtn.setAttribute('aria-expanded', 'false');
        })
        mobileMenuIsClosed()
        window.addEventListener("resize", mobileMenuIsClosed);
    });
    select('.dwc-nav__home-btn').forEach(hbtn => hbtn.addEventListener('click', goHome));


    nav.addEventListener('keydown', event => {
        if (nav.contains(event.target)) {
            if (event.key === 'Escape') {
                if (body.classList.contains('dwc-slide-nav-open')) {

                    if (navTrigger) {
                        navTrigger.click()
                        navTrigger.focus()
                    }
                    goHome();

                } else {
                    goHome();
                }
            }
        }
    });

    // for Bricks

    const offCanvasBackdrop = document.querySelector('.brx-offcanvas-backdrop');
    isBricks = body.classList.contains('bricks-is-frontend')

    if (isBricks) {

        if (offCanvasBackdrop) {
            offCanvasBackdrop.addEventListener('click', event => {
                if (body.classList.contains('dwc-slide-nav-open')) {
                    navTrigger.click()
                    goHome();
                    if (navTrigger) {
                        navTrigger.focus()
                    }
                } else {
                    goHome();
                }
            });
        }
    }

    //   bricks end



    select('.dwc-sidebar__nav__btn:not(.dwc-nav__back-btn)').forEach(sbtn => {
        sbtn.setAttribute('aria-expanded', 'false');
        sbtn.addEventListener('click', function (e) {
            initCollapseContent();
            dropdownToggles.forEach((togglebtn) => {
                togglebtn.setAttribute('aria-expanded', 'false');
            });
            e.preventDefault();
            e.stopPropagation();
            const targetId = this.getAttribute('data-title');
            const targetElement = document.querySelector(`.dwc-sidebar__nav__panel[data-title="${targetId}"]`);
            const parentPanel = this.closest('.dwc-sidebar__nav__panel');
            targetElement.classList.remove('dwc-slide-right');
            targetElement.inert = false;
            targetElement.setAttribute('tabindex', 0);
            targetElement.focus();
            ariaExpanded = !targetElement.classList.contains('dwc-slide-right');
            sbtn.setAttribute('aria-expanded', ariaExpanded);
            select('.dwc-nav__back-btn').forEach(bbtn => {
                bbtn.addEventListener('click', function (e) {
                    ariaExpanded = !targetElement.classList.contains('dwc-slide-right');
                    sbtn.setAttribute('aria-expanded', ariaExpanded);
                })
            })
            if (!parentPanel.classList.contains('dwc-slide-right')) {
                parentPanel.classList.add('dwc-slide-left');
                parentPanel.inert = true;
            }

            //handle back button data-title and back to feature
            let bbtn = targetElement.querySelector('.dwc-nav__back-btn');
            bbtnTitle = parentPanel.getAttribute('data-title');
            bbtn.setAttribute('data-title', bbtnTitle);
            bbtn.setAttribute('aria-label', 'Go back to ' + bbtnTitle + ' menu');
            //console.log(bbtnTitle)

            if (updateBackText) {
                bbtn.querySelector('.dwc-nav__back__text').textContent = 'back to ' + bbtnTitle;
            }

        });
    })
    select('.dwc-nav__back-btn').forEach(bbtn => {
        const btnTitle = bbtn.getAttribute('data-title');
        bbtn.addEventListener('click', function (e) {
            e.preventDefault();
            e.stopPropagation();
            const returnBtnAttr = this.getAttribute('data-title');
            select('[data-title].dwc-sidebar__nav__panel').forEach(returnTarget => {
                if (returnTarget.getAttribute('data-title') === returnBtnAttr) {
                    returnTarget.classList.remove('dwc-slide-left');
                    returnTarget.inert = false;
                    if (returnTarget.classList.contains('dwc-sidebar__nav__panel--home')) {

                        if (header) {
                            header.setAttribute('tabindex', 0);
                            header.focus()
                        }
                    } else {
                        returnTarget.setAttribute('tabindex', 0);
                        returnTarget.focus();
                    }
                    if (returnTarget.classList.contains('dwc-slide-right')) {
                        returnTarget.classList.remove('dwc-slide-right');
                    }
                }
            });
            const parentPanel = this.closest('.dwc-sidebar__nav__panel');
            parentPanel.classList.add('dwc-slide-right');
            parentPanel.inert = true;
        });

    });
    select('.dwc-sidebar__nav__panel').forEach(panel => {
        const panelTitle = panel.getAttribute('data-title');
        panel.setAttribute('aria-label', panelTitle + ' menu');
    });

    // mobile trigger
    function mobileMenuIsClosed() {
        const offCanvasMobileOnly = offCanvasBreakpoint.matches;

        if (mq.matches || enableOffCanvas) {
            const isNavOpen = body.classList.contains("dwc-slide-nav-open");
            navTrigger.setAttribute("aria-expanded", isNavOpen);

            //  console.log(isNavOpen);

            if (isNavOpen) {
                if (!homePanel.classList.contains('dwc-slide-left')) {
                    homePanel.inert = false;
                }
            } else if (offCanvasMobileOnly && mq.matches) {
                homePanel.inert = true;  // Direct assignment for closed state
            } else {
                homePanel.inert = false;
            }
        } else {
            homePanel.inert = false;
        }
    }



    function setNoScroll() {

        let noScrollTimeout;
        let clickCount = 1;
        let isNavOpen = body.classList.contains('dwc-slide-nav-open');

        // Check if 'dwc-slide-nav-open' class is applied
        if (isNavOpen) {
            body.classList.add('dwc-no-scroll');
            clickCount++;
        } else {
            clickCount = 0;
        }
        //console.log(clickCount)


        // Toggle 'dwc-no-scroll' class on the body if clickCount is odd
        if (clickCount == 0) {

            // Set a timer to remove 'dwc-no-scroll' class after 0.8 seconds

            noScrollTimeout = setTimeout(() => {
                isNavOpen = body.classList.contains('dwc-slide-nav-open');
                // console.log(isNavOpen)
                if (!isNavOpen) {
                    body.classList.remove('dwc-no-scroll');
                }
            }, 900);

        } else {
            // If 'dwc-no-scroll' class is removed by clicking again, clear the timeout
            clearTimeout(noScrollTimeout);
        }
    }


    if (navTrigger) {
        navTrigger.addEventListener("click", function () {
            body.classList.toggle("dwc-slide-nav-open");
            setNoScroll()
            mobileMenuIsClosed()
            if (!hasCurrentMenu && !autoCurrentPosition) {
                initCollapseContent()
                goHome();// watch out for this, could be problematic  
            }
            dropdownToggles.forEach((togglebtn) => {
                // togglebtn.setAttribute('aria-expanded', 'false');
            });
        });
    }
    if (mobileMenuOverlay) {
        mobileMenuOverlay.addEventListener("click", function () {
            body.classList.remove("dwc-slide-nav-open");
            mobileMenuIsClosed()
            setNoScroll()
            if (!hasCurrentMenu && !autoCurrentPosition) {
                initCollapseContent()
                goHome()
            }
        });
    }

    if (closeBtn) {
        closeBtn.addEventListener("click", function () {
            body.classList.remove("dwc-slide-nav-open");
            mobileMenuIsClosed()
            setNoScroll()
            navTrigger.focus();
            if (!hasCurrentMenu && !autoCurrentPosition) {
                initCollapseContent()
                goHome()
            }
        });
    }

    //focus on mobile trigger when menu loses focus
    mobileMenuOverlay.addEventListener('focusin', (event) => {
        if (event.relatedTarget !== navTrigger) {
            navTrigger.focus();
        }
    });



    function updateSidebarPadding() {
        if (!enableOffCanvas) {
            // const headerHeight = header.clientHeight + 20;
            setTimeout(() => {
                const headerHeight = document.querySelector('.dwc-header-inner-wrap').clientHeight + 20;
                // Your code to use headerHeight goes here


                sidebarNavPanels.forEach(function (sidebarNavPanel) {
                    sidebarNavPanel.style.paddingTop = headerHeight + "px";
                });
                mobileMenuOverlay.style.marginTop = headerHeight - 20 + "px";
            }, 50);
        }

    }

    function resetPadding() {
        setTimeout(() => {
            sidebarNavPanels.forEach(function (sidebarNavPanel) {
                sidebarNavPanel.style.paddingTop = null;
                mobileMenuOverlay.style.marginTop = null;
            });
        }, 50);
    }

    function checkScreenSize() {
        if (mq.matches) {
            body.classList.add('dwc-mobile');
            updateSidebarPadding();
            //updateTopPadding()          
        } else {
            body.classList.remove('dwc-mobile');
            resetPadding();
            // resetTopPadding()
        }
    }

    // updateTopPadding()

    if (calcHeaderHeight) {
        checkScreenSize();
        window.addEventListener("resize", function () {
            resetTopPadding(); // Reset the top padding on resize
            updateTopPadding()
            checkScreenSize();
            mobileMenuIsClosed();
        });
    }


    initInert()



    //  *********  DROPDOWN TOGGLE FUNCNTIONALITY *******************


    function eCollapseContent(el, btn) {

        // Find the closest common ancestor, such as the <li> element
        const btnParentLi = btn.closest('li');

        dropdownContents.forEach((content) => {
            // Find the closest <li> ancestor for the dropdown content
            const contentParentLi = content.closest('li');

            // Check if the content and the button are at the same level
            const isSameLevel = btnParentLi && contentParentLi && btnParentLi.parentElement === contentParentLi.parentElement;

            // Check if the content is an ancestor of the dropdown toggle being clicked
            const isAncestor = btn && content.contains(btn);

            // Collapse the dropdown if it's not an ancestor of the toggle and is on the same level
            if (!isAncestor && isSameLevel) {
                content.style.maxHeight = '0';
                content.setAttribute('inert', 'true');

                // Update the aria-expanded attribute of the corresponding toggle button
                const correspondingToggle = content.previousElementSibling.querySelector('button');

                if (correspondingToggle) {
                    correspondingToggle.setAttribute('aria-expanded', 'false');
                }

            }
        });

    }


    function initCollapseContent(el, btn) {
        dropdownContents.forEach((content) => {
            content.style.maxHeight = '0';
            content.setAttribute('inert', 'true');
        });
      
       dropdownToggles.forEach((toggle) => {
            toggle.setAttribute('aria-expanded', 'false');
        });

    }



    function collapseContent(el, btn) {

        // Find the closest common ancestor, such as the <li> element
        const btnParentLi = btn.closest('li');

        dropdownContents.forEach((content) => {
            // Find the closest <li> ancestor for the dropdown content
            const contentParentLi = content.closest('li');

            // Check if the content and the button are at the same level
            const isSameLevel = btnParentLi && contentParentLi && btnParentLi.parentElement === contentParentLi.parentElement;

            // Check if the content is an ancestor of the dropdown toggle being clicked
            const isAncestor = btn && content.contains(btn);

            // Collapse the dropdown if it's not an ancestor of the toggle and is on the same level
            if (!isAncestor && isSameLevel) {
                content.style.maxHeight = '0';
                content.setAttribute('inert', 'true');

            }
        });

    }


    // Toggle the ARIA attributes for dropdown buttons
    function toggleAriaExpanded(activeToggle) {

        // If activeToggle is null, reset all buttons to 'false'
        if (activeToggle === null) {
            dropdownToggles.forEach((toggle) => {
                toggle.setAttribute('aria-expanded', 'false');
            });
            return; // Exit the function early since there's nothing else to do
        }

        dropdownToggles.forEach((toggle) => {
            if (toggle === activeToggle) {
                // Toggle the aria-expanded attribute for the clicked button
                const isOpen = toggle.getAttribute('aria-expanded') === 'true';
                toggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
            } else {
                // Check if the toggle's parent is a sibling to the activeToggle's parent
                const toggleParent = toggle.closest('li');
                const activeToggleParent = activeToggle.closest('li');
                //  console.log('toggle parent', toggleParent)
                // console.log('active toggle parent', activeToggleParent)

                if (toggleParent && activeToggleParent && toggleParent.parentElement === activeToggleParent.parentElement) {
                    // Set all other buttons' aria-expanded to false if their parent is a sibling to the activeToggle's parent
                    toggle.setAttribute('aria-expanded', 'false');
                }
            }
        });
    }


    // Function to adjust the max-height of parent dropdowns when a nested dropdown is opened
    function adjustDropdownHeight(dropdownContent) {
        // Start with the nearest ancestor that is a dropdown content
        let parent = dropdownContent.closest('.dwc-sidebar__dropdown-content');


        while (parent) {
            // Calculate the cumulative height of all open children
            let totalHeight = Array.from(parent.children).reduce((total, child) => {
                // Add the child scrollHeight to the total if it's open
                total += child.scrollHeight;
                return total;
            }, 0);

            // Move to the next ancestor that is a dropdown content
            parent = parent.parentElement.closest('.dwc-sidebar__dropdown-content');
            if (parent) {
                parentHeight = parent.scrollHeight;
                // Set the parent's max-height to the total calculated height
                parent.style.maxHeight = `${totalHeight + parentHeight}px`;
                //   console.log('child: ', dropdownContent)
                //   	console.log('parent: ', parent)
                //   console.log(`${totalHeight}px`)
                parent.inert = false;

                // console.log('parent new: ', parent)

                const parentParent = parent.closest('li')
                const toggle = parentParent.querySelector('.dwc-sidebar__dropdown-toggle button')
                toggle.setAttribute('aria-expanded', 'true');
            }
        }
    }

    // Initialize dropdowns
    function initializeDropdowns() {
        if(dropdownToggles){
        initCollapseContent();

        dropdownToggles.forEach((toggle, index) => {
            toggle.setAttribute('aria-expanded', 'false');

            const dropdownContent = dropdownContents[index];
            const parentDropdown = toggle.closest('.dwc-sidebar__dropdown');
            const dropdownLink = parentDropdown.querySelector('.dwc-nav__link__text');
            
            if(dropdownLink){
            toggle.setAttribute('aria-label', `Toggle ${dropdownLink.textContent} dropdown`);
            }

            toggle.addEventListener('click', function () {
                const isOpen = dropdownContent.style.maxHeight !== '0px';

                collapseContent(dropdownContent, this);

                if (!isOpen) {
                    dropdownContent.inert = false;
                }

                toggleAriaExpanded(this);

                if (parentDropdown.contains(this)) {
                    dropdownContent.style.maxHeight = isOpen ? '0' : `${dropdownContent.scrollHeight}px`;

                    // Only adjust if opening the dropdown
                    if (!isOpen) {
                        adjustDropdownHeight(dropdownContent);
                        //console.log('other child', dropdownContent)
                    }
                }
            });

            toggle.addEventListener('keydown', (event) => {
                closeDropdownOnEscape(event, toggle);
            });
        });
    }
    }


    // Close dropdowns on Escape key press
    function closeDropdownOnEscape(event, el) {
        if (event.key === 'Escape' && el.contains(event.target)) {
            event.stopPropagation();

            if (el.style.maxHeight !== '0px') {
                const button = el.previousElementSibling.querySelector('button');

                if (button) {
                    el.style.maxHeight = '0';
                    el.inert = true;
                    button.focus();
                } else {
                    initCollapseContent();
                    el.focus();
                }

                toggleAriaExpanded(null); // Reset all buttons to 'false'
            }
        }
    }

    // Initialize dropdowns
    initializeDropdowns();


    dropdownContents.forEach((dropdownContent) => {
        // Add event listeners for closing dropdowns on Escape key press
        dropdownContent.addEventListener('keydown', (event) => {
            closeDropdownOnEscape(event, dropdownContent);
        });

        // close dropdown on focus lost

        if (autoCloseDropdown) {
            const links = dropdownContent.querySelectorAll('a.dwc-nav__link__text');

            links.forEach(link => {
                const linkParent = link.closest('.dwc-sidebar__dropdown-content');
                const dropDownButton = linkParent.previousElementSibling.querySelector('button')

                link.addEventListener('blur', () => {


                    setTimeout(function () {
                        if ([...links].every(link => !document.activeElement.isSameNode(link))) {

                            eCollapseContent(dropdownContent, dropDownButton)

                        }
                    }, 50);
                });
            });
        }
    });



    // AUTOMATIC MENU POSITION

    function autoMenuPosition() {
      
      if (enableCollapsibleSidebar && (collapseOnPageLoad || savedState === 'true')) { return }
      
        // Select the current menu item
        const currentMenuItem = document.querySelector('.dwc-current-menu-item');

        // Select the parent panel of the current menu item
        if (currentMenuItem) {
            const parentPanel = currentMenuItem.closest('.dwc-sidebar__nav__panel');
            const parentIsHome = parentPanel.classList.contains('dwc-sidebar__nav__panel--home')

            // Check if the parent panel has the 'dwc-sidebar__nav__panel--home' class
            if (!parentIsHome) {
                // Select the back button in the current menu's parent panel
                const backButton = parentPanel.querySelector('.dwc-nav__back-btn');

                // Remove the class 'dwc-slide-right' from the current menu's parent panel
                parentPanel.classList.remove('dwc-slide-right');

                // Get the data-title attribute of the current menu's parent panel

                // Loop through all panels with class .dwc-sidebar__nav__panel
                const allPanels = document.querySelectorAll('.dwc-sidebar__nav__panel');

                // Select all slide buttons .dwc-sidebar__nav__btn of each panel
                const slideButtons = document.querySelectorAll('.dwc-sidebar__nav__btn:not(.dwc-nav__back-btn)');

                slideButtons.forEach((slideButton) => {

                    allPanels.forEach((panel) => {

                        // Get the data-title attribute of the panel
                        const eachPanelTitle = panel.getAttribute('data-title');
                        // Get the back button in each of the panels
                        const panelBackButton = panel.querySelector('.dwc-nav__back-btn');

                        const slideTitle = slideButton.getAttribute('data-title')


                        if (slideTitle === eachPanelTitle) {
                            //get slide button parent
                            const slideParentPanel = slideButton.closest('.dwc-sidebar__nav__panel');
                            //get slide parent titlte attribute
                            const slideParentTitle = slideParentPanel.getAttribute('data-title')
                            // Set the back button data-title attribute to be equal to the data-title attribute of the slide parent panel
                            panelBackButton.setAttribute('data-title', slideParentTitle);
                            if(updateBackText){
                                panelBackButton.querySelector('.dwc-nav__back__text').textContent = 'back to ' + slideParentTitle
                            }
                            
                        }
                    });

                });

                homePanel.classList.add('dwc-slide-left');
            }
            if (!parentIsHome) {
                parentPanel.inert = false;
                homePanel.inert = true;
            }

            repositionReturnTargets()

        }
    }

    if (autoCurrentPosition) {
        setTimeout(function () {
            autoMenuPosition()
        }, 1000);
    }


    //function to reposition the hidden slides after automatically moving to current menu item panel
    // to put them in the right position to slide back to
    function repositionReturnTargets() {

        const panels = document.querySelectorAll('.dwc-sidebar__nav__panel:not(.dwc-sidebar__nav__panel--home)');
        let activePanel;

        // Find the first panel without 'dwc-slide-right' and 'dwc-slide-left' classes
        for (const panel of panels) {
            if (!panel.classList.contains('dwc-slide-right') && !panel.classList.contains('dwc-slide-left')) {
                activePanel = panel;
                break;
            }
        }

        let returnTarget;

        while (activePanel) {
            //  Get the data-title attribute of each panel
            const panelTitles = Array.from(panels).map(panel => panel.getAttribute('data-title'));

            //  Select the active back button in the active panel
            const activeBackButton = activePanel.querySelector('.dwc-nav__back-btn');

            // Find the returnTarget panel
            returnTarget = Array.from(panels).find(panel => panel.getAttribute('data-title') === activeBackButton.getAttribute('data-title'));

            // Remove and add classes to the returnTarget
            if (returnTarget) {
                returnTarget.classList.remove('dwc-slide-right');
                returnTarget.classList.add('dwc-slide-left');
            }

            // Update activePanel for the next iteration
            activePanel = returnTarget;
        }
    }

    // *********AUTOMATIC ENDS************





    // **************OFFCANVAS *****************

    document.addEventListener('DOMContentLoaded', () => {
    if (offCanvasPushContent) {

        // Create a new div element with the class "site-wrapper"
        var siteWrapper = document.createElement('div');
        siteWrapper.className = 'dwc-site-wrapper';
        // Move everything within the body tag into the "site-wrapper" div
        while (document.body.firstChild) {
            siteWrapper.appendChild(document.body.firstChild);
        }
        // Add the "site-wrapper" div back to the body
        document.body.appendChild(siteWrapper);
    }
})

    function offCanvasInit() {

        if (enableOffCanvas && offCanvasBreakpoint.matches) {
            document.body.classList.add('dwc-offcanvas');
            // console.log('offcanvas - 2')

            if (offCanvasPushContent) {
                document.body.classList.add('dwc-push-content');
                if (fixedNavTrigger && !mq.matches) {
                    document.body.classList.add('dwc-nav-trigger-is-fixed');
                } else {
                    document.body.classList.remove('dwc-nav-trigger-is-fixed');
                }

            }

            // Function to check if header element is focusable
            function isFocusable(element) {
                const focusableTags = ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'AREA'];
                return (
                    focusableTags.includes(element.tagName) ||
                    element.hasAttribute('tabindex') ||
                    element.hasAttribute('contenteditable')
                );
            }


            // Function to set inert attribute for focusable elements
            function setInertForFocusableElements(inertValue) {
                const allElements = document.querySelectorAll('.dwc-header-inner-wrap *');
                const focusableElements = Array.from(allElements).filter(element => {
                    return isFocusable(element) && !element.classList.contains('dwc-nav-trigger');
                });

                focusableElements.forEach(element => {
                    if (element) {
                        element.inert = inertValue;
                    }
                });
            }

            // Click event listener for the 'nav-trigger'

            header.addEventListener('click', function () {
                const isNavOpen = document.body.classList.contains('dwc-slide-nav-open');

                // Check if the body contains the class 'dwc-slide-nav-open'
                if (isNavOpen) {
                    // Condition is true, set inert=true
                    setInertForFocusableElements(isNavOpen);
                } else {
                    // Condition is false, set inert=false
                    setInertForFocusableElements(isNavOpen);
                }
            });

        } else {
            document.body.classList.remove('dwc-push-content');
            document.body.classList.remove('dwc-offcanvas');
        }

    }
    offCanvasInit()
    window.addEventListener("resize", offCanvasInit);


    //close offcanvas when haslink is clicked



    if (enableOffCanvas) {
        const sidebarLinks = document.querySelectorAll('a.dwc-sidebar__nav__link');

        // Filter links with hash in the href attribute
        const hashLinks = Array.from(sidebarLinks).filter(link => link.getAttribute('href').includes('#'));

        // Add click event listener to each hash link
        hashLinks.forEach(link => {
            link.addEventListener('click', function (event) {
                //   event.preventDefault(); // Prevent the default behavior of the link (e.g., navigating to the hash)

                // Perform a click action on the navTrigger button

                if (navTrigger) {
                    navTrigger.click();
                }
            });
        });
    }




    // headroom:
    // headroom:
function initializeHeadroom() {
    if (enableHeadroom && (enableOffCanvas || enableTopBar)) {

        if (offCanvasPushContent) return; // Early exit if offCanvasPushContent is true

        document.body.classList.add('dwc-headroom');
        const scrollUp = "scroll-up";
        const scrollDown = "scroll-down";
        let lastScroll = 0;

        // Check for scroll action
        window.addEventListener('scroll', () => {
            // Hide and reveal header
            const currentScroll = window.pageYOffset;
            if (currentScroll <= 200) {
                document.body.classList.remove(scrollUp);
                return;
            }

            if (currentScroll > lastScroll && !document.body.classList.contains(scrollDown)) {
                // Down
                document.body.classList.remove(scrollUp);
                document.body.classList.add(scrollDown);
            } else if (currentScroll < lastScroll && document.body.classList.contains(scrollDown)) {
                // Up
                document.body.classList.remove(scrollDown);
                document.body.classList.add(scrollUp);
            }
            lastScroll = currentScroll;
        });
    }
}

// Call the function to initialize headroom functionality
initializeHeadroom();

    // End scroll action


    //top Padding on first containers

    function updateTopPadding() {

        // Run the function if offCanvas is enabled or both topBar and headroom are enabled
        if (!enableOffCanvas && !(enableTopBar && enableHeadroom)) {
            return; // Exit early if neither condition is met
        }

        // Check if the media query strings for mq and offCanvasBreakpoint are the same
        if (mq.media === offCanvasBreakpoint.media) {
            // If the breakpoints are the same, run the function only if we're within the breakpoint
            if (mq.matches) {
                // Ensure the feature should run based on the configuration flags
                if (calcTopPadding && (enableHeadroom || enableTopBar)) {
                    // Check if the sidebar exists
                    if (sidebar) {
                        const header = document.querySelector('.dwc-header-inner-wrap');
                        if (header) {
                            const offsetPadding = header.clientHeight;

                            // Update padding for each sidebar panel
                            sidebarNavPanels.forEach(function (sidebarNavPanel) {
                                sidebarNavPanel.style.paddingTop = offsetPadding + "px";
                            });

                            // Adjust the top padding for the first child of the main container
                            const mainFirstChild = document.querySelector('main')?.firstElementChild;
                            if (mainFirstChild) {
                                const initialPadding = parseInt(window.getComputedStyle(mainFirstChild).paddingBottom) || 0;
                                if(!offCanvasPushContent){
                                    mainFirstChild.style.paddingTop = (offsetPadding + initialPadding) + 'px'; 
                                 }
                            }
                        } else {
                            console.warn('.dwc-header-inner-wrap not found.');
                        }
                    } else {
                        console.warn('Sidebar not found.');
                    }
                }
            }
        } else {
            // If the breakpoints are different, run the function as originally intended
            if (calcTopPadding && (enableHeadroom || enableTopBar)) {
                // Check if the sidebar exists
                if (sidebar) {
                    const header = document.querySelector('.dwc-header-inner-wrap');
                    if (header) {
                        const offsetPadding = header.clientHeight;

                        // Update padding for each sidebar panel
                        sidebarNavPanels.forEach(function (sidebarNavPanel) {
                            sidebarNavPanel.style.paddingTop = offsetPadding + "px";
                        });

                        // Adjust the top padding for the first child of the main container
                        const mainFirstChild = document.querySelector('main')?.firstElementChild;
                        if (mainFirstChild) {
                            const initialPadding = parseInt(window.getComputedStyle(mainFirstChild).paddingBottom) || 0;
                            if(!offCanvasPushContent){
                               mainFirstChild.style.paddingTop = (offsetPadding + initialPadding) + 'px'; 
                            }
                            
                        }
                    } else {
                        console.warn('.dwc-header-inner-wrap not found.');
                    }
                } else {
                    console.warn('Sidebar not found.');
                }
            }
        }
    }




    function resetTopPadding() {
        if (calcTopPadding && enableHeadroom) {
            sidebarNavPanels.forEach(function (sidebarNavPanel) {
                sidebarNavPanel.style.paddingTop = null;
            });

            const mainFirstChild = document.querySelector('main').firstElementChild;
            if (mainFirstChild) {
                mainFirstChild.style.paddingTop = null;
                // Reset the paddingTop using the stored initialPadding
                const initialPadding = parseInt(window.getComputedStyle(mainFirstChild).paddingBottom);

                mainFirstChild.style.paddingTop = null;
            }
        }
    }

    //---top padding end

// Disable / Enable collapse on screen size change
let removedByMQ = false;  // Track if the class was removed by the media query

function updateCollapseStatus() {
    const currentlyCollapsed = document.body.classList.contains('dwc-collapse-sidebar');  // Check the current state

    if (mq.matches) {
        // If media query matches (max-width: 1024px), remove the class
        if (currentlyCollapsed) {
            document.body.classList.remove('dwc-collapse-sidebar');
            removedByMQ = true;  // Remember that MQ logic removed the class
            saveCollapseStatus();  // Save the updated state after toggling
        }
    } else {
        // If media query doesn't match, only add back if it was removed by this MQ logic
        if (removedByMQ) {
            document.body.classList.add('dwc-collapse-sidebar');
            removedByMQ = false;  // Reset the flag after re-adding
            saveCollapseStatus();  // Save the updated state after toggling
        }
    }
}

    //Document loaded end


//});


// --- ADD HEADER HEIGHT VARIABLE TO BODY ----

function debounce(func, delay) {
    let timeoutId;

    return function (...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

// Your existing code for adding the 'hasHeaderHeight' class
function addHeaderHeightClass() {


    if (!document.body) {
        // Body doesn't exist, keep checking 
        setTimeout(addHeaderHeightClass, 0);
        return;
    }

    let hasHeaderHeight = document.body.classList.contains('hasHeaderHeight');
    let header = document.querySelector('header');

    if (!hasHeaderHeight && header) {
        // Header exists, add the 'hasHeaderHeight' class
        document.body.classList.add('hasHeaderHeight');

        // Get the initial header height
        updateHeaderHeight();
    } else if (!hasHeaderHeight && !header) {
        // Header doesn't exist, keep checking 
        setTimeout(addHeaderHeightClass, 0);
    }
}

// Function to update header height and set the CSS variable
function updateHeaderHeight() {
    let sidebar = document.querySelector('.dwc-header-inner-wrap');


    if (document.body) {
        let headerHeight = sidebar.offsetHeight;
        document.body.style.setProperty('--dwc-header-height', `${headerHeight}px`);
    }
}

// Add the 'hasHeaderHeight' class and set initial header height
addHeaderHeightClass();

// Attach the debounced update function to the window resize event

function onResize() {
    updateHeaderHeight();
    updateCollapseStatus();
    // Add more functions here
}

window.addEventListener('resize', debounce(onResize, 50));
document.addEventListener('DOMContentLoaded', () => {
    updateHeaderHeight();
    updateTopPadding()
})



// -------HEADER HEIGHT ENDS -------------

// Smooth scroll to hashlink with an offset
function smoothScroll(target, offset) {
    const targetElement = document.querySelector(target);
    if (targetElement) {

        const targetPosition = targetElement.getBoundingClientRect().top -
            document.body.getBoundingClientRect().top -
            offset;
        window.scrollTo({
            top: targetPosition,
            behavior: 'smooth'
        });

    }
}

// Listen for hash link clicks
if (offsetHashLinkScroll) {
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            var headerElement = document.querySelector('.dwc-header-inner-wrap');
            var offset = headerElement.offsetHeight;
            e.preventDefault();
            event.stopPropagation();
            const href = this.getAttribute('href');
            smoothScroll(href, offset);
        });
    });
}




Leergang hedendaagse filosofie en narratieve systeemtherapie

Door Jan Flameling en Jan Olthof

De School voor systemische opleidingen organiseert jaarlijks samen met filosoof Jan Flameling seminars Hedendaagse filosofie en narratieve systeemtherapie.

De leergang biedt een kennismaking met de opvattingen van een aantal belangrijke hedendaagse denkers. Gedurende de leergang kom je te weten dat hedendaagse denkers aandacht zijn gaan besteden aan de verhouding tussen taal en werkelijkheid en dat zij ons voorstellen het zelf, onszelf, anders op te vatten dan we gewend zijn.

Tijdens de bijeenkomsten worden ook artikelen besproken van therapeuten zoals Tom Andersen, Harlene Anderson, Jan Olthof, Peter Rober, Jasmina Sermijn en Michael White, die het gedachtegoed van de hedendaagse denkers al in de praktijk toepassen.

Algemeen

De jaarlijks terugkerende leergang filosofie wordt gegeven door hoofdopleider Jan Flameling van het Filosofisch Bureau Ataraxia. De leergang biedt een kennismaking met de opvattingen van een aantal belangrijke hedendaagse denkers. Gedurende de leergang kom je te weten dat in de hedendaagse filosofie;

  • een taal-analytische wending heeft plaats gevonden
  • een nieuwe benadering van ‘het zelf’ is aangeboden

Vanzelfsprekend worden ook de implicaties van deze opvattingen voor de narratieve systeemtherapie besproken.

In narratieve systeemtherapie houden we ons bezig met de woorden, zinnen en verhalen van onze cliënten. We worden geraakt door hetgeen verteld wordt en vaak gaat het om dominante verhalen waardoor de cliënten niet in staat zijn om ruimte te maken voor minder beperkende opvattingen over zichzelf en de ander. In therapie sluiten we aan bij deze beperkende verhalen en zoeken samen met de cliënten en het systeem naar betekenissen die openingen bieden voor een ander en beter perspectief.

Maar hoe zijn we hier toe gekomen? Wie waren de grondleggers van ons gedachtegoed. En welke aspecten van het gedachtegoed van deze denkers herkennen wij heden ten dage in onze therapeutische praktijk?

In deze leergang word je verrast door het gedachtegoed van een aantal denkers die passen in een al lang bestaande traditie en ontdek je de wortels van dit denken. De narratieve psychotherapie wordt in een hedendaags filosofisch kader geplaatst.

Doelgroep

De leergang staat open voor deelnemers uit verschillende werkvelden die zich willen verdiepen in hedendaagse filosofie en narratieve systeemtherapie.

Voor data en kosten zie de praktische informatie onderaan deze pagina.

Programma

Tijdens zes bijeenkomsten maak je kennis met de ideeën van belangrijke hedendaagse denkers. Je ontdekt wat hun opvattingen over taal, werkelijkheid en het zelf betekenen voor de praktijk van de narratieve systeemtherapie.

Filosofie – van Plato tot Friedrich Nietzsche

Tijdens de eerste bijeenkomst volgen we in vogelvlucht de ontwikkelingen in de Westerse wijsbegeerte (van Plato tot Friedrich Nietzsche).

We komen te weten hoe in de Oudheid filosofie werd opgevat als ‘politicologisch project’, dat Plato de mens opvatte als lichaam en ziel, dat kennisverwerving een kwestie was van door woorden van de meester de waarheid herinneren respectievelijk van schouwen van de waarheid door reiniging van de ziel.

We komen ook te weten hoe in de moderne tijd filosofie werd opgevat als epistemologisch project, dat René Descartes verantwoordelijk is voor de ‘uitvinding’ van de geest en van de mens als ‘ik denk’ en dat kennisverwerving een kwestie van mentaal constructivisme is.

Tot slot komen we te weten dat Friedrich Nietzsche filosofie opvatte als een esthetisch-ethisch project en de mens als een kunstzinnig scheppend wezen, dat als enkeling krachtig in het leven hoort te staan. Gedurende de bijeenkomst bespreken we vanzelfsprekend de eventuele implicaties van de opvattingen van Plato, Descartes en Nietzsche voor de therapeutische praktijk.

Taalspelen en bestaan verstaan

Ludwig Wittgenstein II en Martin Heidegger

Tijdens de tweede bijeenkomst maken we kennis met de opvattingen van de twee ‘reuzen’van de Westerse filosofie van de twintigste eeuw: Ludwig Wittgenstein en Martin Heidegger. Wittgenstein is verantwoordelijk voor de ‘linguistic turn’ in de Westerse filosofie. Filosofie wordt door hem opgevat als taalanalyse. In zijn boek Filosofische onderzoekingen toont hij dat de betekenis van woorden ontstaat tijdens het gebruik, dat wij deelnemen aan taalspelen, dat het gebruik van taal dan ook (spel)regelgeleid is. Heidegger vat filosofie op als zijnsverstaan. In zijn boek Zijn en tijd stelt hij voor het zelf op te vatten als ‘er zijn’ (Dasein), biedt hij een analyse van ons bestaan als relationeel en temporeel van aard en roept hij op het bestaan vorm te geven vanuit het besef dat je in betrekkingen bent en vanuit een gevoel van betrokkenheid. Gedurende de bijeenkomst bespreken we vanzelfsprekend de implicaties van de opvattingen van Wittgenstein en Heidegger voor de therapeutische praktijk.

Discours, deconstructie en gastvrijheid

Michel Foucault en Jacques Derrida

Tijdens de derde bijeenkomst maken we kennis met de opvattingen van Michel Foucault en Jacques Derrida. Foucault laat zien dat elke gespreksgemeenschap een orde van spreken (discours) kent – een samenhang van krachtenveld en heersende opvattingen, die met behulp van een aantal procedures in stand wordt gehouden. Derrida toont aan dat het Westerse denken een bepaalde conceptuele constructie kent – in hiërarchisch gestructureerde, binaire opposities. De analyse van het ‘discours’ maakt echter ook een verandering mogelijk, de analyse van de constructie van ons denken maakt ook deconstructie mogelijk. Gedurende de bijeenkomst bespreken we vanzelfsprekend de implicaties van de opvattingen van Foucault en Derrida voor de therapeutische praktijk.

Het zelf als rizomatisch van aard en het onderscheid man-vrouw

Gilles Deleuze, Luce Irigaray en Rosi Braidotti

Tijdens de vierde bijeenkomst maken we kennis met de opvattingen van Gilles Deleuze, Luce Irigaray en Rosi Braidotti. Deleuze omschrijft filosofie als de creatie van concepten en stelt voor het zelf op te vatten als rizomatisch van aard. Irigaray maakt duidelijk dat het man-vrouw-onderscheid een door het ‘discours’ bepaalde conceptuele constructie is die de seksuele differentie niet erkent. Braidotti maakt gebruik van de opvattingen van Deleuze en Irigaray om voor te stellen zowel het denken als het zelf een nomadisch karakter te laten krijgen. Gedurende de bijeenkomst bespreken we vanzelfsprekend de implicaties van de opvattingen van Deleuze, Irigaray en Braidotti voor de therapeutische praktijk.

Ethiek en neurobiologie

Emmanuel Levinas en Antonio Damasio

Tijdens de vijfde bijeenkomst maken we kennis met de opvattingen van Emmanuel Levinas en Antonio Damasio. Levinas stelt dat – anders dan tot nu toe gebruikelijk – ethiek heteronomie als grondbeginsel zou moeten hebben, dat elke handelingssituatie een ethische dimensie heeft en dat je in staat bent – door te ‘luisteren’ naar het gelaat van de ander – te doen wat de ander vraagt. Damasio toont aan dat wij – op basis van hersen- en zenuwstelstelcapaciteit – in staat zijn in handelingssituaties te voelen wat er gaande is en wat er van ons gevraagd wordt. Gedurende de bijeenkomst bespreken we vanzelfsprekend de implicaties van de opvattingen van Levinas en Damasio voor de therapeutische praktijk.

Hedendaagse filosofie en narratieve systeemtherapie

Peter Bieri, Tom Andersen, John Shotter en Jan Olthof

Tijdens de zesde bijeenkomst maken we kennis met de opvattingen van Peter Bieri, Tom Andersen, John Shotter en Jan Olthof. Bieri omschrijft de therapeutische praktijk als een praktijk van toeëigening van de wil, waarin door articulatie, begrijpen en beoordeling van de wil de speelruimte van de cliënt om te kiezen vergroot wordt. Shotter vat de therapeutische praktijk op als ‘a dialogically-structured process, enacted by living bodies in spontaneously responsive contact with each other’ en Olthof stelt voor de praktijk als een vorm van door diagonaliteit gekenmerkte oefenpraktijk te zien, waarin therapeut en cliënt hun verhalen uitwisselen en samenweven. Gedurende de bijeenkomst bespreken we vanzelfsprekend de implicaties van de opvattingen van Bieri, Andersen, Shotter en Olthof voor de therapeutische praktijk.

Docenten

  • Jan Flameling

    Hoofddocent

    Jan Flameling (1950) studeerde filosofie in Groningen, Amsterdam, Keulen en Berkeley. In 1994 richtte hij het Filosofisch Bureau Ataraxia op en van daaruit werkt hij als docent, trainer en gespreksbegeleider. Meer informatie: www.janflameling.nl Sinds enkele jaren geeft Jan Flameling in samenwerking met Jan Olthof en diens School voor systemische opleidingen in Bunde seminars Filosofie en narratieve therapie. Tijdens de bijeenkomsten zullen Jan Flameling en Jan Olthof de verbinding leggen tussen de filosofische opvattingen en de praktijk van de systeemtherapie.

  • Jan Olthof

    Hoofddocent

    Jan Olthof is psychotherapeut, opleider, supervisor en leertherapeut (NVRG). Hij is grondlegger van de School voor systemische Opleidingen en bekend om zijn bijdrage aan de narratieve en systemische psychotherapie in Nederland. Zijn werk ademt de invloed van Gregory Bateson en het narratieve gedachtegoed: aandacht voor taal, context, verhalen en de wijze waarop mensen betekenis geven aan hun ervaringen. Jan is auteur van onder andere Cruijffiaans denken, De mens als verhaal en het Handboek Narratieve Psychotherapie, welke inmiddels meerdere drukken én een internationale vertaling kent. 

Leergang hedendaagse filosofie en narratieve systeemtherapie

Deze leergang verbindt hedendaagse filosofie met narratieve systeemtherapie. Je maakt kennis met ideeën over taal, werkelijkheid en het zelf en onderzoekt wat die betekenen voor de therapeutische praktijk.

  • Inhoud en opzet

    • Zes bijeenkomsten met een ochtend- en middagsessie.
    • Jan Flameling en Jan Olthof leggen de verbinding tussen filosofische opvattingen en de praktijk van de systeemtherapie.
    • Naast het werk van hedendaagse denkers worden artikelen besproken van therapeuten die deze ideeën in hun praktijk toepassen.
  • Praktische informatie

    • Startmoment
      16 januari 2027
      (zes zaterdagen van 10:00 - 17:00 uur)
    • Locatie
      Schoolpad 7, Bunde (Zuid-Limburg)
    • Deelnemers
      Minimaal 6, maximaal 12.

Planning, prijs & inschrijving

Deelname aan de opleiding kost €1840

Vragen of inhoudelijke informatie over de opleiding?
Liever direct contact?
Bel dan naar Mariëlle Gelissen:
(+31) 06 1805 0855

  • Dagindeling
    10.00 – 17.00 uur
  • Pauzes
    11.15 – 11.30 uur & 15.15 – 15.30 uur
  • Lunch
    13.00 – 13.45 uur

Leergang Hedendaagse Filosofie

€1840

Gelieve het cursusgeld na inschrijving en bevestiging van deelname over te maken naar: IBAN NL93 ABNA 0438168062 t.n.v. School voor Systemische Opleidingen te Bunde.

Aanmelding

Praktische informatie

Aanmelden voor workshops en opleidingen kan door het invullen van jouw contactgegevens in het onderstaande formulier.

Voor inhoudelijke informatie over opleidingen of anderszins kun je contact opnemen met Mariëlle Gelissen via de onderstaande mogelijkheden.

  • Email

    Wil je graag meer informatie? Stuur ons dan een e-mail.

    info@schoolvoorsystemische
    opleidingen.nl
  • Telefoon

    Wil je meer inhoudelijke informatie over de opleidingen? Neem dan telefonisch contact op met Mariëlle Gelissen

    (+31) 06 1805 0855
  • Betaalgegevens

    NL93 ABNA 0438168062
    School voor Systemische Opleidingen

    KvK: 14116165

  • Locatie

    School voor Systemische Opleidingen

    Schoolpad 7
    6241CK Bunde