/*--- REBOOT BACKGROUND ---*/
body { background-color: #1F1C1C;}
#full-height-container { background-color: transparent !important;}
#main {background-color: transparent !important;}
#main-content { background: rgb(0,67,205);
background: linear-gradient(180deg, rgba(0,67,205,1) 0%, rgba(4,22,81,1) 100%);}
#footer-main { background: rgb(31,28,28);
background: linear-gradient(180deg, rgba(4,22,81,1) 0%, rgba(31,28,28,1) 100%);}

/*--- REBOOT BACKGROUND ---*/
/*heading h2 + ICON*/
.heading-icon { margin-bottom:80px; display: flex; align-items:center; align-self: stretch; gap:24px;}
.heading-icon h2 {margin-bottom:0; font-family: 'jockey', arial, sans-serif; color: #CCFF00;}

@media screen and (max-width: 768px) {
  .heading-icon span:nth-child(2), .heading-icon span:nth-child(3) { display: none;}
}

@media screen and (min-width: 769px) {
  .heading-icon h2 { white-space: nowrap;}
  .heading-icon span:nth-child(2) { display: inline-block; height: 1px; width: 100%; background: linear-gradient(90deg, #CF0 29.5%, rgba(204, 255, 0, 0.00) 100%);}
  .heading-icon span:nth-child(3) {}
  .heading-icon span:nth-child(3) img { display: flex; align-items:center;}
}

/*button color*/
.wiki-content a.btn.primary.ghost { color: #CCFF00; background: transparent; border-color:#CCFF00;}
.wiki-content a.btn.primary.ghost:hover, 
.wiki-content a.btn.primary.ghost:active { color: white; background: transparent; border-color:white;}
.wiki-content a.btn.primary.ghost:focus { outline-color: #CCFF00;}

/*button with ico contact*/
.wiki-content a.btn span.ico-contact { margin-left: 0; width: 20px; height: 20px; background: left no-repeat; background-size: 20px;}
.wiki-content a.btn.primary.ghost span.ico-contact { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/710120100/ico-contact-primary.svg");}
.wiki-content a.btn.primary.ghost:hover span.ico-contact { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/710120100/ico-contact-white.svg");}  

@media screen and (min-width: 1366px) { 
  .break-for-desktop { display: block;}
}

/*--- SECTION INTRODUCTION ---*/
/*---------------------------*/
#introduction { padding-top:250px; padding-bottom:80px;}
#introduction h1 { color: rgba(255, 255, 255, 0.9);}
#introduction h2 { margin-bottom: 0; font-family: 'source_sans_proregular', arial,sans-serif;}

/*--- SECTION PLAN AND ACCESS ---*/
/*------------------------------*/
#plan-access { padding-top:80px; padding-bottom:80px;}
#plan-access h3 { margin-bottom:0;}
#plan-access-map { margin-top: 80px;
-webkit-box-shadow: -1px 0px 43px 10px rgba(255,255,255,0.6);
-moz-box-shadow: -1px 0px 43px 10px rgba(255,255,255,0.6);
box-shadow: -1px 0px 43px 10px rgba(255,255,255,0.6);}

#plan-access h4 { margin-top:80px; font-size:24px; line-height:28px;}

/*--- SECTION DATE AND TIME ---*/
/*----------------------------*/
#date-time { padding-top:80px; padding-bottom:80px;}

.cols.date-time-target { justify-content: center;}
.cols.date-time-target [class*="col-"] { position:relative; padding:80px;}
.cols.date-time-target [class*="col-"] img { z-index: 1;}
.illu-date-time-target-top-left { position: absolute; top: -40px; left: -40px;}
.illu-date-time-target-top-right { position: absolute; top: -40px; right: -40px;}
.illu-date-time-target-bottom-right { position: absolute; bottom: -40px; right: -40px;}
.illu-date-time-target-bottom-left { position: absolute; bottom: -40px; left: -40px;}
.date-time-target-body { position:relative; z-index: 2; text-align: center;}
.wiki-content .date-time-target-body h3 { margin-bottom:0;}
.date-time-target-body p.date-time-target-body-time { font-size: 24px; line-height: 24px;}
.date-time-target-body p:last-child { margin-top:24px;}

/*--- SECTION SECURITY ---*/
/*-----------------------*/
#security { padding-top:80px; padding-bottom:80px;}
#security .heading-icon { margin-bottom:40px;}

#security .col-6 { display: flex; margin-top:40px;}
#security .security-box { display: flex; flex-direction: column; flex: 1; padding:40px; background: rgba(255, 255, 255, 0.12);}
#security .security-box h3 { font-size: 36px; line-height: 36px;}

@media screen and (min-width: 769px) {
  #security .security-box { padding:80px;}
}

/*--- SECTION MORE INFO ---*/
/*------------------------*/
#more-info {}
#more-info .btn-cta { margin-top:40px;}

/*--- MAP ---*/
/*----------*/
.wtmap .wt-map-content { border: 1px solid transparent;}
.wt-map-info-content { background-color: #CCFF00; box-shadow: 0 0 5px #444;}
.wt-map-info-content h2, .wt-map-info-content p { color:#1F1C1C;}
.wtfooter { display: none;}

/*--- TABS ---*/
/*-----------*/
.tabs { margin-top:24px; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: stretch; border:1px solid #CCFF00;}
.tablinks { display: inline-block; padding:18px; width: 100%; text-align:center; text-decoration:none !important;; color: white; background-color: transparent; border-right:1px solid #CCFF00; cursor: pointer;}
.tablinks:last-child { border-right:0 solid red;}
.tablinks:hover { background: rgba(255, 255, 255, 0.12);}
.tablinks.active { color:#1F1C1C !important; background-color: #CCFF00; cursor: auto;}

.tabcontent { margin-top:24px; color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.12);}
.tabcontent h5 { margin-bottom:24px; color:#CCFF00; font-size:24px; line-height:28px;}
.tabcontent .tabcontent-title { font-size: 24px; color: rgba(255, 255, 255, 1);}
.tabcontent-title.with-icon { display: flex; align-items: center; gap: 12px;}

.tabcontent ul.tabcontent-list { margin:12px 0 0 0; padding:0; list-style:none; color: rgba(255, 255, 255, 0.9);}
.tabcontent ul.tabcontent-list li { position: relative; padding: 0 0 0 24px;}
.tabcontent ul.tabcontent-list li:before { position: absolute; top: 0; left:0; content:'•'; }

.transport-line-number { margin-top:12px; display: flex; align-items:center; gap:12px;}

.transport-line { margin-top:12px; display: flex; align-items:center; align-self: stretch;}
.transport-line span:nth-child(2) { display: inline-block; height: 1px; width: 100%; background: linear-gradient(90deg, #CF0 29.5%, rgba(204, 255, 0, 0.00) 100%);}


@media screen and (max-width: 768px) {
  .tabs { display: none;}
  .tabcontent { display: block !important; padding: 24px;}
  .wiki-content .transport-line { gap: 4px; font-size: 16px; line-height: 18px;}
}

@media screen and (min-width: 769px) {
  .tabcontent { display: none; padding: 24px 30% 24px 40px;}
  .tabcontent h5 { display: none;}
  .wiki-content .transport-line { gap: 10px; }
  .transport-line span:nth-child(1) { white-space: nowrap;}
  .transport-line span:nth-child(3) { white-space: nowrap;}
}
<h1>Practical information</h1>
<h2>Get ready for the event.</h2>
<div class="heading-icon">
<h2>Plan and access</h2>
<span></span>
<span><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145120/ico-plan-access.svg"></span>
</div>

<h3 class="h2">Concert Noble</h3>
<p>Concert Noble, Rue d'Arlon 82, 1040 Brussels, Belgium</p>
<p style="font-size:16px;"><a class="link primary" target="_blank" href="https://www.google.com/maps/dir//Rue+d'Arlon+82,+1040+Bruxelles/@50.8431081,4.3744721,16.56z/data=!4m8!4m7!1m0!1m5!1m1!1s0x47c3c5d6a4cd35df:0xe8400ecd87515d19!2m2!1d4.3734811!2d50.8423288?entry=ttu"><span>Open on Google Maps</span><span class="ico-open-in-new"></span><span class="sr-only">Opens in a new tab</span></a></p>
<p style="margin-top:24px; font-size:16px;">Venue on a single floor and 100% PRM-accessible</p>

<div id="plan-access-map">
<script type="application/json">{
  "service": "map",
  "version": "3.0",
  "map": {
    "height": 500,
    "zoom": 15,
	"background": "positron"
  },
  "contact": {
    "coordinates": [
50.84258644662686,
4.3734850471414894
],
    "label": "<strong>Concert Noble</strong><br>Rue d'Arlon 82<br> 1040 Brussels, Belgium",
    "options": {
      "color": "#004494"
    }
  }
}
</script>
</div>
<h4>How to get there</h4>

<div class="tabs">
  <a class="tablinks active" onclick="openTab(event, 'tab1')">By car</a>
  <a class="tablinks" onclick="openTab(event, 'tab2')">By public transport</a>
  <a class="tablinks" onclick="openTab(event, 'tab3')">By plane</a>
  <a class="tablinks" onclick="openTab(event, 'tab4')">By taxi</a>
  <a class="tablinks" onclick="openTab(event, 'tab5')">By bike</a>
</div>

<!--TAB 1-->
<div id="tab1" class="tabcontent" style="display:block">
<h5>By car</h5>
<p class="tabcontent-title">Street parking near Concert Noble</p>
<ul class="tabcontent-list">
<li>Orange zone</li>
<li>€5 for 2 hours</li>
<li>Monday to Saturday from 09:00 to 21:00</li>
<li>Max. 4h30</li>
</ul>
<p class="tabcontent-title" style="margin-top:40px;">Industrie Public Parking Interparking</p>
<ul class="tabcontent-list">
<li>Electric car spaces available</li>
<li>Payment methods: credit card, cash, Pcard+</li>
<li>Monday to Friday, 24/7</li>
<li>Max. 4h30</li>
</ul>
</div>
<!--/TAB 1-->

<!--TAB 2-->
<div id="tab2" class="tabcontent">
<h5>By public transport</h5>

<p class="tabcontent-title">Train</p>

<p class="transport-line">
<span>Brussels Central Station</span>
<span></span>
<span>15 min. walk</span>
</p>

<p class="transport-line">
<span>Brussels Luxembourg Station</span>
<span></span>
<span>7 min. walk</span>
</p>

<p class="transport-line">
<span>Brussels Schuman Station</span>
<span></span>
<span>6 min. walk</span>
</p>

<p class="tabcontent-title" style="margin-top:40px;">Metro</p>
<p class="transport-line-number">
<img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145120/ico-transport-line-1.svg">
<img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145120/ico-transport-line-5.svg">
<img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145120/ico-transport-line-2.svg">
<img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145120/ico-transport-line-6.svg">
</p>

<p class="transport-line">
<span>Lines 2 and 6 - Metro Trône/Troon Metro Station</span>
<span></span>
<span>9 min. walk</span>
</p>
<p class="transport-line">
<span>Lines 1 and 5 - Maelbeek Metro Station</span>
<span></span>
<span>5 min. walk</span>
</p>
<p class="transport-line">
<span>Lines 1, 2, 5 and 6 - Arts-Loi/Kunst-Wet Metro Station</span>
<span></span>
<span>10 min. walk</span>
</p>

<p class="tabcontent-title" style="margin-top:40px;">Bus</p>
<p class="transport-line-number">
<img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145120/ico-transport-line-21.svg">
<img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145120/ico-transport-line-27.svg">
<img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145120/ico-transport-line-64.svg">
</p>

<p class="transport-line">
<span>Lines 21, 27 and 64 - Toulouse or Treves</span>
<span></span>
<span>3 min. walk</span>
</p>

<p class="tabcontent-title" style="margin-top:40px;">Tram</p>
<p class="transport-line-number">
<img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145120/ico-transport-line-92.svg">
<img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145120/ico-transport-line-93.svg">
</p>

<p class="transport-line">
<span>Lines 92 and 93 - Palais</span>
<span></span>
<span>14 min. walk</span>
</p>

</div>
<!--/TAB 2-->

<!--TAB 3-->
<div id="tab3" class="tabcontent">
<h5>By plane</h5>
<p class="tabcontent-title">Brussels Airport (Zaventem)</p>
<p><strong>By taxi:</strong> Around 20-30 minutes, depending on traffic.</p>
<p><strong>By train:</strong> Around 17-20 minutes to Central Station or to Brussels Schuman Station.<br> Both stations are a 10-minute walk away.</p>
<p class="tabcontent-title" style="margin-top:40px;">Brussels South Charleroi Airport</p>
<p><strong>By taxi:</strong> Around 45 minutes - 1 hour, depending on traffic.</p>
<p><strong>By train:</strong> Around 1 hour to Brussels South Train Station, depending on traffic.</p>
</div>
<!--/TAB 3-->

<!--TAB 4-->
<div id="tab4" class="tabcontent">
<h5>By taxi</h5>
<p>If you are coming to the event by taxi, we recommend Taxis Verts or Unitax, or apps such as <strong>Uber</strong> or <strong>Bolt</strong>.</p>
</div>
<!--/TAB 4-->

<!--TAB 5-->
<div id="tab5" class="tabcontent">
<h5>By bike</h5>
<p class="tabcontent-title with-icon"><span>Two wheels, one planet, zero emissions - cheers to our biking stars</span><img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145120/ico-star.svg"></p>
<p style="font-size:16px; line-height:24px">Bicycle parking is available at the Industrie Public Parking Interparking.</p>
</div>
<!--/TAB 5-->

<script> 

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
} 

</script>
<div class="heading-icon">
<h2>Date and time</h2>
<span></span>
<span><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145120/ico-date-time.svg"></span>
</div>
<div class="col-4">
<div class="date-time-target-body">
<h3 class="h2">19 March 2024</h3>
<p class="date-time-target-body-time">08:30 - 14:00</p>
<p><a class="btn primary" href="https://ec.europa.eu/digital-building-blocks/sites/display/SDGREVENT/agenda"><span>Discover the agenda</span><span class="ico-cta-forward"></span></a></p>
</div>
<img alt="" aria-hidden="true" class="illu-date-time-target-top-left" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145120/illu-introduction-card-top-left.svg">
<img alt="" aria-hidden="true" class="illu-date-time-target-top-right" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145120/illu-introduction-card-top-right.svg">
<img alt="" aria-hidden="true" class="illu-date-time-target-bottom-right" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145120/illu-introduction-card-bottom-right.svg">
<img alt="" aria-hidden="true" class="illu-date-time-target-bottom-left" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145120/illu-introduction-card-bottom-left.svg"> 
</div>
<div class="heading-icon">
<h2>Security and identification</h2>
<span></span>
<span><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145120/ico-security-registration.svg"></span>
</div>
<div class="security-box">
<h3>Prepare your arrival</h3>
<p>Please bring an identity card or passport to access this event. This will be checked by our security service. Please, note that driving licenses can't be used for identity verification.</p>
<p>Please plan to arrive early to allow time for security checks, including a personal screening and bag inspection. Please try to avoid bringing large bags or suitcases to minimise waiting times at security checks.</p>
</div>
<div class="security-box">
<h3>Web3 Technology for event check-in</h3>
<p>For this event, we are introducing Web3 technology to check-in using Verifiable Credentials. Verifiable Credentials are a new digital format for sharing and proving information that is easy to verify but almost impossible to fake; unlike other existing paper documents like ID Cards or diplomas.</p>
<p>You can experience the future of event authentication using EU Verify by requesting your event ticket to be a Verifiable Credential Pass.</p>
<p>Check your outlook invitation for the event to request your Verifiable Credential Pass and join the future of authentication!</p>
</div>
<script>

/*--- SEO ADD ATTRIBUTE lang="en" TO HTML TAG ---*/
document.getElementsByTagName("html")[0].setAttribute("lang", "en"); 

/*--- SEO REMOVE CONFLUENCE HEADING 1 ---*/  
var h1TitleText = document.getElementById("title-text");
if (h1TitleText) {
h1TitleText.remove();
}  

$(document).ready(function() {

/*--- CONFLUENCE MENU ENABLE AND DISABLE ---*/
  $('#header,#main-header,.space-tools-section').hide();

  $("#admin-toggle").click(function(){
      $("#header,#main-header,.space-tools-section").toggle();
    });
});

</script>
<script>

/*--- SCRIPT ONLY FOR THIS PAGE ---*/

/*--- SEO ADD TAG META NAME DESCRIPTION ---*/
var metaNameDescription = document.createElement('meta');
metaNameDescription.setAttribute('name', 'description');
metaNameDescription.content = "Boosting the EU Single Market: towards the Single Digital Gateway 2.0. An event brought to you by the European Commission under the patronage of the 2024 Belgian Council Presidency.";
document.getElementsByTagName('head')[0].appendChild(metaNameDescription);  

</script>
<div class="col-4">
<h2>Need more info?</h2>
<p>For further inquiries or additional information regarding this event, please do not hesitate to reach out to our dedicated team.</p>
<p class="btn-cta"><a target="_blank" class="btn primary ghost" href="mailto:EC-OOTS@ec.europa.eu"><span>Contact us</span><span class="ico-contact"></span></a></p>
</div>