#main-content { overflow: hidden;}

/*---SPECIFIC CLASS---*/
.wiki-content a.btn.ghost span.ico-open-in-new { margin-left: 10px; width: 18px; height: 18px; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-open-in-new-primary-bis.svg") left no-repeat; background-size: 18px;}

.link-open-in-new { display: inline-block !important; position: relative;}
.link-open-in-new span:hover { text-decoration: none;}
.link-open-in-new { margin-right: 28px}
.link-open-in-new.primary { color: #842DB5 !important;}
.link-open-in-new.primary:hover { color: #5D24A4 !important;}
.link-open-in-new.primary:focus { outline: 2px dashed #5D24A4 !important; outline-offset: 2px !important;}
.link-open-in-new span:after { position: absolute; top: 3px; right: -22px; content: ""; width: 18px; height: 18px; background: left no-repeat; background-size: 18px !important;} 
.link-open-in-new.primary span:after { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-open-in-new-primary.svg");}
.link-open-in-new.primary:hover span:after { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-open-in-new-primary-hover.svg");}

.link-email { display: inline-block !important; position: relative;}
.link-email span:hover { text-decoration: none;}
.link-email { margin-right: 28px}
.link-email.primary { color: #842DB5 !important;}
.link-email.primary:hover { color: #5D24A4 !important;}
.link-email.primary:focus { outline: 2px dashed #5D24A4 !important; outline-offset: 2px !important;}
.link-email span:after { position: absolute; top: 4px; right: -24px; content: ""; width: 16px; height: 16px; background: left no-repeat; background-size: 16px !important;} 
.link-email.primary span:after { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-email-primary.svg");}
.link-email.primary:hover span:after { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-email-primary-hover.svg");}

.list-checked { margin:0; padding:0; }
.list-checked li { position: relative; padding: 0 0 0 36px; list-style-type: none;}
.list-checked li:before { content:''; display:block; position: absolute; top:0; left: 0; width:24px; height:24px; background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-check-primary-bis.svg");}
.list-checked li > p { margin-bottom:12px;}

.list-arrow { margin:0; padding:0; }
.list-arrow li { position: relative; padding: 0 0 0 36px; list-style-type: none;}
.list-arrow li:before { content:''; display:block; position: absolute; top:0; left: 0; width:24px; height:24px; background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/arrow_forward_FILL0_wght300_GRAD0_opsz24_primary_bis.svg");}
.list-arrow li > p { margin-bottom:12px;}

/*---HACK FOR CONFLUENCE - REMOVE EXTRA P---*/
#main-content.wiki-content > p { display: none; border:1px solid red;}
.cols > div > p:first-child, .cols > div > p:last-child { display:none; border:1px solid green;}


/*---INTRODUCTION---*/
/*-----------------*/
#introduction { overflow:visible;}
.introduction-content { position: relative; z-index: 2;}
.introduction-content h1 { margin-bottom:2.5rem;}
.introduction-content .btn-cta { margin-top:40px; margin-bottom: 0;}
.introduction-illu { position: relative; overflow: visible;}
.introduction-illu p { margin-bottom: 0; line-height:0 !important;}
.introduction-illu img:first-child { position: relative; z-index: 2; width: 180px;}
.introduction-illu-bg { z-index: 1; position:absolute; bottom: -120px; left:-125px;}

@media screen and (min-width: 768px) {
  .introduction-illu img:first-child { width: 100%; max-width: 340px; height: auto;}
  .introduction-illu-bg { z-index: 1; position:absolute; bottom: -50px; left:-50px;}
}

/*hack for confluence - remove extra p*/
#introduction .container .cols > div p:first-child, #introduction .container .cols > div p:last-child { display: none; border:1px solid red;}

/*---PLAYBOOK---*/
/*-------------*/
#playbook { overflow:visible;}
#playbook .playbook-cta { margin-top: 2.5rem; margin-bottom:0;}
.playbook-content { position: relative; z-index: 2;}
.playbook-content h1 { margin-bottom:2.5rem;}
.playbook-illu { position: relative; overflow: visible;}
.playbook-illu p { margin-bottom: 0; line-height:0 !important;}
.playbook-illu img:first-child { position: relative; z-index: 2; width: 180px;}

@media screen and (max-width: 767px) {
  #playbook .cols {  display: flex; flex-direction: column-reverse;}
}

@media screen and (min-width: 768px) {
  .playbook-illu img:first-child { width: 100%; max-width: 250px; height: auto;}
}

/*---WHO---*/
/*--------*/
#who { position: relative; z-index: 2; background: rgba(0, 40, 74, 1);}
#who h2 { margin-bottom:2.5rem; color: rgba(255, 255, 255, 1);}
#who h2 + p { margin-bottom:0; color: rgba(255, 255, 255, 0.75);}
#who .cols:nth-child(2) h2 { margin-top:50px;}
.who-illu { position: relative; overflow: visible;}
.who-illu p { margin-bottom: 0; line-height:0 !important;}
.who-illu img:first-child { width: 180px;}

#who .card-grid { padding: 40px; background: rgba(255, 255, 255, 0.12); border-radius: 12px;}
#who img { margin-bottom:24px;}
#who h3 { font-size: 20px; line-height: 24px; color: rgba(255, 255, 255, 1);}
#who h3 + p { margin-bottom:0; color: rgba(255, 255, 255, 0.75);}

/*---INFORMATION---*/
/*----------------*/
#information { position:relative; padding-bottom:18rem;}
#information .information-illu { z-index: 1; position: absolute; bottom: 0; right: 10%;}
#information .cols { z-index: 2; position: relative;}
#information h2 { margin-bottom:4rem;}
#information h3 { font-size: 18px; line-height: 24px; color: #3D597A;}

/*---BOX ONBOARDING PROCESS---*/
/*---------------------------*/
#box-process { position: relative; z-index: 2; margin-top:-12rem; padding-top:0; padding-bottom:0; position:relative;}
#box-process .process-box { padding:1.5rem; background-color: #00284A; border-radius:20px;}
#box-process .process-box-col-illu { margin-bottom:1rem;}
#box-process .process-box-col-illu img { width: 120px; height:auto;}
#box-process h3, #box-process p { color: white;}
#box-process p.p-opacity { opacity: 0.75}
.process-box-col-content p:last-child { margin-bottom: 0;}

@media screen and (min-width: 768px) {
 #box-process .process-box { padding:2.5rem;}
 #box-process .process-box-cols { display: flex; align-items: center;}
 #box-process .process-box-col-illu { margin-bottom:0; padding:0 3rem 0 0}
}

@media screen and (min-width: 1366px) {
 #box-process .process-box { padding:5rem;}
 #box-process p.p-opacity { padding-right: 2rem;}
}

#box-process > p:first-child, #box-process > p:last-child { display:none; border:1px solid pink;}

/*--- MACRO EXPAND ---*/  
.expand-container { margin:0; padding:0; border-bottom:1px solid #E3E6EB;}
.expand-container .aui-icon::before { font-size: 20px !important; color:#001832}

.expand-control { display: flex; align-items: center; margin-bottom:0; padding:1rem 0;}
.expand-control-text { margin:0 0.5rem 0 0; width: 100%; font-size: 20px; color:#001832; text-wrap: wrap;}
.expand-control button { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items:center; gap: 24px; width:100%;}

.expand-control button.aui-button.aui-button-link { color: transparent;}
.expand-control button span:nth-child(1) { }
.expand-control button span:nth-child(2) { text-align: left;}

.expand-content { margin:0; padding: 0; color: #3D597A;}
.expand-content > p:first-child, .expand-content > p:last-child { display: none; border:1px solid green;}
.expand-container [aria-expanded="true"] .aui-iconfont-chevron-down { transform: rotate(180deg);}
.expand-container [aria-expanded="false"] .aui-iconfont-chevron-right { transform: rotate(90deg);}
.expand-container .aui-icon::before { font-size: 20px !important;}

@media screen and (max-width: 768px) { 
  .expand-control-text { font-size: 16px;}
}
<script>
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("#information .expand-control[aria-level='6']").forEach(el => {
        el.setAttribute("aria-level", "3");
    });
});
</script>


<h1><span class="heading-subtitle">Onboarding toolkit</span>The Once - Only<br>Technical System<br>Onboarding Toolkit</h1>
<p class="lead">The OOTS Onboarding Toolkit provides detailed technical guidance for completing the flow of activities/ steps outlined in the Playbook for each of the main roles. Each information area provided in the Toolkit is presented with a brief description and links to the corresponding documentation. The information presented in the Toolkit can also be accessed via the dedicated links contained in the Playbook.</p>
<p class="btn-cta"><a class="btn primary" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Onboarding-Toolkit"><span>Discover the Onboarding Toolkit</span><span class="ico-cta-forward"></span></a></p>
<p>
<img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145530/illu-introduction.png">
<img alt="" aria-hidden="true" class="introduction-illu-bg" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145530/illu-introduction-bg.svg">
</p>
<h2>Who is the Onboarding Toolkit for?</h2>
<p class="lead">The Onboarding Toolkit provides accompanying guidelines and specifications to the Onboarding Playbook for National Coordinators, Intermediary Platforms, Evidence Requesters and Evidence Providers.</p>
<p>
<img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145530/illu-who.png">
</p>
<h2>What Onboarding Tools are available?</h2>
<p>Our comprehensive Toolkit is organised into five key information areas to support various aspects of our operations and guide various user profiles</p>
<div class="card-grid">
<div class="card-grid-body">
<img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145530/ico-testing.svg">
<h3>Testing</h3>
<p>Description of the available environments and testing tools to facilitate a safe transition to production of OOTS implementations, new features, configurations and evidence-mapping-related data.</p>
</div>
</div>
<div class="card-grid">
<div class="card-grid-body">
<img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145530/ico-access-point.svg">
<h3>Access Point Readiness</h3>
<p>Tools for self-assessing eDelivery infrastructure readiness and ensuring a secure connection to the OOTS.</p>
</div>
</div>
<div class="card-grid">
<div class="card-grid-body">
<img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145530/ico-common-service.svg">
<h3>Common Services</h3>
<p>Tools for self-assessing the optional local Common Services implementation and facilitating a user-friendly interaction with the common services for administrative purposes.</p>
</div>
</div>
<div class="card-grid">
<div class="card-grid-body">
<img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145530/ico-evidence-mapping.svg">
<h3>Evidence Mapping</h3>
<p>Framework defined for governing the evidence-related data lifecycle, guidelines provided to the different actors in the systems to participate in the framework and tools to facilitate visualization of evidence-related data.</p>
</div>
</div>
<div class="card-grid">
<div class="card-grid-body">
<img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145530/ico-operational.svg">
<h3>Operational Processes</h3>
<p>Operational framework of the OOTS and interfaces defined to interact with the operational services provided by the European Commission in order to ensure a smooth operation of the system.</p>
</div>
</div>
<img alt="" aria-hidden="true" class="information-illu" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145530/illu-information.svg">
<h2 class="h3">Key information to consider before you start</h2>
<p>The information contained in this Toolkit is structured according to the available tools via tabs. Locate the tool relevant to you, then follow the outlined steps. Additionally, you can filter the content by actor for further customisation.</p>
<p>The OOTS technical support team can be contacted via the dedicated <a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Service+Desk"><span>OOTS Service Desk</span></a></p>

<p>In order to access the Support Desk site, it is necessary to log in with an EULogin account. Additionally, the support team can be contacted via email: <a target="_blank" href="maitlo:EC-OOTS-SUPPORT@ec.europa.eu" class="link-email primary"><span>EC-OOTS-SUPPORT@ec.europa.eu</span></a></p>
<p>S-CIRCABC (Secure Collaborative and Information Resources Centre for Administration, Businesses and Citizens), provides a web-based application, which enables geographically spread collaborative groups to share documents, information, and resources in private workspace.</p>

<p>This tool will be used for reporting to the Support Team. In order to use S-CIRCABC, we ask that you please follow the <a target="_blank" href="https://ec.europa.eu/digital-building-blocks/wikis/pages/viewpage.action?spaceKey=SDGOO&title=Guidelines+for+S-CIRCABC" class="link external"><span>Guidelines to use S-CIRCABC</span><span class="sr-only">(opens in a new tab)</span><span class="ico-external"></span></a></p>
<ul class="list-arrow">
<li>
<p>Take a look at the <a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Service+Desk">OOTS Service Desk</a> to access a list of services and solutions made available by the European Commission and Member States to support the deployment of the OOTS.</p>
</li>

<li>
<p>To access the procedures user guides take a look at the <a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/OOTSHUB+Home"><span>OOTS Hub</span></a></p>
</li>

<li>
<p>To browse through the questions which have already been asked by the OOTS community and answered by the OOTS team, take a look at the <a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Service+Desk+FAQ"><span>FAQ</span></a></p>
</li>

</ul>
<div class="container">
<div class="cols justify-content-center">

<div class="col-8">
<div class="process-box">
<div class="process-box-cols">

<div class="process-box-col-illu">
<img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145530/illu-introduction.png">
</div>

<div class="process-box-col-content">
<h3 class="h5">Start the process</h3>
<p class="p-opacity">Open the Toolkit and start navigating through the section that corresponds to your role.</p>
<p><a class="btn primary-negative" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Onboarding-Toolkit"><span>Go to the Onboarding Toolkit</span><span class="ico-cta-forward"></span></a></p>
</div>

</div>
</div>
</div>

</div>
</div>
<h2>Onboarding Playbook</h2>
<p class="lead">This Playbook is accompanied by the OOTS Onboarding Toolkit, where you can find the guidelines and specifications. Links to corresponding sections of the Toolkit can be found in the Playbook where activities/ steps require further detailed technical guidance for their completion.</p>
<p class="playbook-cta"><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Onboarding+Playbook"><span>Discover the Onboarding Playbook</span><span class="ico-cta-forward"></span></a></p>
<p>
<img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/716145530/illu-onboarding-playbook.png">
</p>