<script>

/*
*   This content is licensed according to the W3C Software License at
*   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*
*   Simple accordion pattern example
*/

'use strict';

Array.prototype.slice.call(document.querySelectorAll('.collapse')).forEach(function (accordion) {

  // Allow for multiple accordion sections to be expanded at the same time
  var allowMultiple = accordion.hasAttribute('data-allow-multiple');
  // Allow for each toggle to both open and close individually
  var allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');

  // Create the array of toggle elements for the accordion group
  var triggers = Array.prototype.slice.call(accordion.querySelectorAll('.collapse-trigger'));
  var panels = Array.prototype.slice.call(accordion.querySelectorAll('.collapse-panel'));


  accordion.addEventListener('click', function (event) {
    var target = event.target;

    if (target.classList.contains('collapse-trigger')) {
      // Check if the current toggle is expanded.
      var isExpanded = target.getAttribute('aria-expanded') == 'true';
      var active = accordion.querySelector('[aria-expanded="true"]');

      // without allowMultiple, close the open accordion
      if (allowMultiple && active && active !== target) {
        // Set the expanded state on the triggering element
        active.setAttribute('aria-expanded', 'false');
        // Hide the accordion sections, using aria-controls to specify the desired section
        document.getElementById(active.getAttribute('aria-controls')).setAttribute('hidden', '');

        // When toggling is not allowed, clean up disabled state
        if (!allowToggle) {
          active.removeAttribute('aria-disabled');
        }
      }

      if (!isExpanded) {
        // Set the expanded state on the triggering element
        target.setAttribute('aria-expanded', 'true');
        // Hide the accordion sections, using aria-controls to specify the desired section
        document.getElementById(target.getAttribute('aria-controls')).removeAttribute('hidden');

        // If toggling is not allowed, set disabled state on trigger
        if (!allowToggle) {
          target.setAttribute('aria-disabled', 'true');
        }
      }
      else if (allowToggle && isExpanded) {
        // Set the expanded state on the triggering element
        target.setAttribute('aria-expanded', 'false');
        // Hide the accordion sections, using aria-controls to specify the desired section
        document.getElementById(target.getAttribute('aria-controls')).setAttribute('hidden', '');
      }

      event.preventDefault();
    }
  });

  // Bind keyboard behaviors on the main accordion container
  accordion.addEventListener('keydown', function (event) {
    var target = event.target;
    var key = event.which.toString();

    var isExpanded = target.getAttribute('aria-expanded') == 'true';
    var allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');

    // 33 = Page Up, 34 = Page Down
    var ctrlModifier = (event.ctrlKey && key.match(/33|34/));

    // Is this coming from an accordion header?
    if (target.classList.contains('collapse-trigger')) {
      // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
      // 38 = Up, 40 = Down
      if (key.match(/38|40/) || ctrlModifier) {
        var index = triggers.indexOf(target);
        var direction = (key.match(/34|40/)) ? 1 : -1;
        var length = triggers.length;
        var newIndex = (index + length + direction) % length;

        triggers[newIndex].focus();

        event.preventDefault();
      }
      else if (key.match(/35|36/)) {
        // 35 = End, 36 = Home keyboard operations
        switch (key) {
          // Go to first accordion
          case '36':
            triggers[0].focus();
            break;
            // Go to last accordion
          case '35':
            triggers[triggers.length - 1].focus();
            break;
        }
        event.preventDefault();

      }

    }
  });

  // These are used to style the accordion when one of the buttons has focus
  accordion.querySelectorAll('.collapse-trigger').forEach(function (trigger) {

    trigger.addEventListener('focus', function (event) {
      accordion.classList.add('focus');
    });

    trigger.addEventListener('blur', function (event) {
      accordion.classList.remove('focus');
    });

  });

  // Minor setup: will set disabled state, via aria-disabled, to an
  // expanded/ active accordion which is not allowed to be toggled close
  if (!allowToggle) {
    // Get the first expanded/ active accordion
    var expanded = accordion.querySelector('[aria-expanded="true"]');

    // If an expanded/ active accordion is found, disable
    if (expanded) {
      expanded.setAttribute('aria-disabled', 'true');
    }
  }

});



 </script>

@media screen and ( max-width: 534px) {
	.container_helpDesk h1 strong { white-space: unset!important; }
}

@media screen and ( max-width: 550px ) {

	.tab-onboarding { display: flex; flex-direction: column; }
	.tab-support  { display: flex; flex-direction: column; }
	.tab-community { display: flex; flex-direction: column; }
}

@media screen and (max-width: 950px ) { 
	.hd-seperator-no { display: none; }
}

#help-desk-introduction .text-center { display: flex; flex-direction: column; align-items: center;}

#help-desk-introduction {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/468026266/bg-wave-helpdesk.svg");
background-position: top right; background-repeat: no-repeat; background-size: 55%; margin-bottom: 4rem;}


/*
#description-helpDesk { width: 58%; }
#description-helpDesk-logged { width: 58% }
*/
#help-desk-logged { background-color: #e5f7fe; }
#help-desk-logged > div:first-child { position: relative; padding-top:6rem; padding-bottom: 6rem;}
#help-desk-logged .cols:last-child { margin-top: -3rem;}

#help-desk-logged .card-grid { text-align: center;}
#help-desk-logged .card-grid-body img { margin-top:1rem; width: fit-content;}
#help-desk-logged .card-grid-text { margin:1rem 0 1rem 0;}
#help-desk-logged .card-grid-text strong { font-size: 24px; }
#help-desk-logged .card-grid-footer { text-align: center;}
#help-desk-logged h3 { color : #fff; }
#help-desk-logged p { color : #fff; }
#help-desk-logged .card-grid h3 { color: #1D0D34; }
#help-desk-logged .card-grid p { color: #1D0D34; }

#display-end { display: flex; justify-content: end; align-items: center; } 
#display-start { display: flex; justify-content: start; }

.container_helpDesk h1 strong { white-space: nowrap; }

/* node-operators section */


.case-family_tabs ul { list-style: none; }
.case-family_tabs li {display: flex; align-items: center; justify-content: start; list-style: none; height: 56px; cursor: pointer; width: 100%; padding-left:20px;}
.case-family_tabs a { text-decoration: none; color: black; text-align: center; line-height: 1;}
.case-family_tabs { display: flex; flex-direction: column; min-width: 210px; justify-content: space-between; align-items: center; padding: 8px; border-radius: 20px; list-style: none; background: #f6f5f7; }
.case-family_tabs .active {background: #cd1d8b; display: flex; align-items: center; border-radius: 16px; color: white; padding: 16px 20px; width:100%!important;}
.case-family_tabs .active a {color: white;}
.case-family_tabs > ul > li:hover { background: #ffb3d7; border-radius: 16px; color: white; padding: 16px 20px; width: 275px; height: 72px; }

.case-family_tabs li:first-child { margin-bottom: 10px; }
.case-family_tabs li:last-child { margin-top: 10px; }

@media screen and ( max-width: 690px) {
	.case-family_tabs { height: auto; flex-direction: column; }
	.case-family_tabs li { width: -webkit-fill-available!important; }
}

@media screen and (min-width: 1117px) {
.case-family_tabs li:hover, .case-family_tabs li:active { background : #ffb3d7; border-radius: 16px; color: white; padding: 16px 20px; }
 }

#no-logged .card-grid-body .h4 { margin-top: 16px; }
#no-logged .card-grid-body { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;}
#no-logged .card-grid { padding: 2rem; text-align: center; display: flex; justify-content: space-evenly;}
#no-logged ol { padding-left: 15px; margin-top: 24px;}
#no-logged li::marker { font-weight: 600; }
#no-logged .ico-external { background-size: 20px; }

#faq-hd { background: white; padding-top: 5rem; }
.hd-seperator-no { margin-left: 80px; border-right: 1px solid #e6ecf4; height:inherit; }

<script> 

$(document).ready(function () {
	$("#no-logged").show()
	$(".tab-support").hide()
    $(".tab-community").hide()

  $("#tab-onboarding").on("click", function (e) {
    e.stopPropagation()
    $("#tab-onboarding").addClass("active")
    $("#tab-support").removeClass("active")
    $("#tab-community").removeClass("active")
    $(".tab-onboarding").show()
    $(".tab-support").hide()
    $(".tab-community").hide()
    e.preventDefault()
  })

  $("#tab-support").on("click", function (e) {
    e.stopPropagation()
    $("#tab-onboarding").removeClass("active")
    $("#tab-support").addClass("active")
    $("#tab-community").removeClass("active")
    $(".tab-onboarding").hide()
    $(".tab-support").show()
    $(".tab-community").hide()
    e.preventDefault()
  })

  $("#tab-community").on("click", function (e) {
    e.stopPropagation()
    $("#tab-onboarding").removeClass("active")
    $("#tab-support").removeClass("active")
    $("#tab-community").addClass("active")
    $(".tab-onboarding").hide()
    $(".tab-support").hide()
    $(".tab-community").show()
    e.preventDefault()
  })       
})   
 </script>