/* wallet badge */

.badge-header > span > img { width: 32px; height: 32px; max-width: 32px; max-height: 32px; }
.badge-body div > span > img { max-width: 16px; max-height: 16px; width: 16px; height: 16px; }
#same-devices_full > div > span:nth-child(2) > img { max-width: 5px; width: 5px; height: 15px; }
#cross-devices_full > div > span:nth-child(2) > img { max-width: 15px; } 


.wallet-capabilities_organization > p:first-child, .wallet-capabilities_organization p:last-child { display: none; }
.wallet-capabilities_organisation > p:first-child, .wallet-capabilities_organisation p:last-child { display: none; }
.wallet-capabilities_individual > p:first-child, .wallet-capabilities_individual p:last-child { display: none; }



.wallet-capabilities_organization .wallet-badge-container, .wallet-capabilities_organisation .wallet-badge-container {

background: linear-gradient(#fff, #fff) padding-box, #CCF0FC border-box;
border: 2px solid transparent;
box-shadow: 0px 4px 8px rgba( 0, 55, 100, 0.06);
border-radius: 27px 0px;
width: fit-content;
max-width: 180px;
min-width: 166px;
margin-top: -8px;
}

.wallet-capabilities_organization .badge-header, .wallet-capabilities_organisation .badge-header {

background: #CCF0FC;
padding: 20px 12px;
border-top-left-radius: 24px;
display: flex;
align-items: center;
gap: 10px;
color: #1D0D34;
font-size: 14px;
margin: -1.8px;

}


.wallet-capabilities_individual .wallet-badge-container, .wallet-capabilities_individual .wallet-badge-container {

background: linear-gradient(#fff, #fff) padding-box, #FFE6F2 border-box;
border: 2px solid transparent;
box-shadow: 0px 4px 8px rgba( 0, 55, 100, 0.06);
border-radius: 27px 0px;
width: fit-content;
max-width: 180px;
min-width: 166px;
margin-top: -8px;
}

.wallet-capabilities_individual .badge-header, .wallet-capabilities_individual .badge-header {

background: #FFE6F2;
padding: 20px 12px;
border-top-left-radius: 24px;
display: flex;
align-items: center;
gap: 10px;
color: #1D0D34;
font-size: 14px;
margin: -1.8px;

}



.badge-body { 
	
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 12px;

}

.badge-body div {
	
display: flex;
gap: 5px;
font-size: 15px;
color: #1D0D34;
}

/* Accordion */

#find-your-wallet .content-by-label > li { margin-top: 0!important;}
#previous-versions .collapse button { box-shadow: unset; border-radius: unset!important; background: none!important; border-bottom: 1px solid #BBB6C2; padding: 1rem 0; }
#previous-versions .collapse button:after { content: none; }
#previous-versions .collapse-icon { right: 11px; }
#previous-versions .collapse-panel { box-shadow: unset; padding: 20px 0; }
#main-content > p:nth-child(1) { display: none;}
#main-content > p:nth-child(2) { display: none;}
#main-content > p:nth-child(5) { display: none;}
#main-content > p:nth-child(6) { display: none; }

/*---WALLETS SECTION INTRODUCTION---*/
.wallets-introduction {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/bubble-backgroundupdate.png");
background-position: top right; background-repeat: no-repeat; background-size: contain;}




.wallets-introduction .outline .ico-arrow-south { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/468026266/ico-arrow-south-primary.svg") left no-repeat!important; }




.conformant-curve-top { z-index:1; margin-top:-1rem; position:relative;}
.conformant-curve-top > p > img { position:absolute; top:-1px; left:-1%; width: 102%;}
.conformant-wave-bottom { overflow: hidden; z-index:1; position:relative; height:10rem; background-color: #E5F7FE; }
.conformant-wave-bottom > p > img { position:absolute; bottom:0; left:-1%; width: 102%;}

.bg-gradient { background: linear-gradient(90deg, #00B3EF 0%, #004494 50%, #004494 65.57%, #FF0179 115.49%)!important;}

#info-wallets .col-6 { padding: 16px 12px 0; }
#info-wallets .card-content-info { padding: 5.5rem 0 0.5rem; }
#info-wallets .card-content-info p, #info-wallets .card-content-info h3 { color: white; }
#info-wallets .card-content-info img { position: relative; left: -14px; }
#info-wallets .heading-deco.terciary:after { background-color: white; }

.line-separator hr { border: none; border-bottom: 1px solid #e8e7eb; margin: 16px 0; }
.line-separator > p:first-child, .line-separator > p:last-child { display: none; }
.line-separator-header hr { margin-left: -40px; margin-right: -40px; margin-bottom: 24px;}
.line-separator-header > p:first-child, .line-separator-header > p:last-child { display: none; }

@media screen and ( max-width: 380px ) {
 	
	#find-your-wallet .content-by-label li { margin-left: 20px!important; max-width: 326px!important; min-width: 326px!important; }
 }

@media screen and (min-width: 381px ) and ( max-width: 550px  ) {
 	
	#find-your-wallet .content-by-label li { margin-left: 20px!important; max-width: 354px!important; min-width: 354px!important; }
 }
@media screen and ( max-width: 550px ) {
	#become-conformant .col-12 { padding: 0 3rem; }
 	#pick-your-wallet .content-by-label li { padding: 37px 25px!important; }
	.line-separator-header hr { margin-left: -25px; margin-right: -25px; }
	.tested-container > div:first-child > div, .tested-container > div:last-child > div { font-size: 12px!important; }
 	.wallet-category div, .card-wallet__footer p, .application-types span p { font-size: 13px!important; }
    #previous-versions { padding: 3rem 15px; } 
	#find-your-wallet .f-block-section  { align-items: flex-start!important; }
	#find-your-wallet h3 { font-size: 24px!important; }
}
@media screen and ( min-width: 551px ) and ( max-width: 767px ) {

	#find-your-wallet .content-by-label li { max-width: unset!important; width: 94%; }
}
@media screen and ( max-width: 767px ) {
	#find-your-wallet .content-by-label li { margin-left: 20px!important;}
	#find-your-wallet { padding: 3rem 20px; }
 	#find-your-wallet .s-block-section { padding-left: 10px!important; }
	.wallets-introduction { background: none!important; }
	#info-wallets .col-6 { padding: 16px 12px 2.5rem; }
	#info-wallets .card-content-info { padding: 2.5rem 0 0.5rem; }
	.bg-gradient { background: linear-gradient(90deg, #00B3EF 0%, #004494 50%, #004494 65.57%, #FF0179 115.49%)!important; }
   /* .conformant-curve-top { display: none; } */
 	/* .conformant-wave-bottom { display: none; } */
	.column-buttons { display: flex; flex-direction: column; gap: 24px; } 
	.mobile-view-intro { display: block!important; }
	.desktop-view-intro { display: none!important; }
}
@media screen and ( min-width: 768px ) {
	.desktop-view-intro { display: flex!important; }
	.mobile-view-intro { display: none!important; }
}
@media screen and ( max-width: 785px ) {
	#previous-versions .content-by-label li { width: 100%!important; }
}
.spc-btns { padding-left: 24px;}
@media screen and ( max-width: 973px ) {
	.spc-btns { display: block; padding-top: 24px; }
}
#list-wallet-cards { padding-top: 0.5rem; }
<h1 class="heading-deco terciary">Conformant Wallets</h1>
<p>Welcome to the EBSI conformant wallets page! Here, you will find information about the different types of digital wallets that are available and conformant with EBSI specifications. The three main types of wallets include Holder, Issuer, and Verifier wallets, each with their own unique capabilities.</p>
<p><a href="#become-conformant" class="btn secondary anchor-smooth-scroll"><span>Test your wallet</span><span class="ico-arrow-south"></span></a><span class="spc-btns"></span><a href="#find-your-wallet" class="btn secondary outline anchor-smooth-scroll"><span>Find your wallet</span><span class="ico-arrow-south"></span></a></p>


<h1 class="heading-deco terciary">Wallets</h1>
<p>Welcome to the EBSI conformant wallets page! Here, you will find information about the different types of digital wallets that are available and conformant with EBSI specifications. The three main types of wallets include Holder, Issuer, and Verifier wallets, each with their own unique capabilities.</p>


<p class="column-buttons" ><a href="#become-conformant" class="btn secondary outline anchor-smooth-scroll"><span>Test your wallet</span><span class="ico-arrow-south"></span></a><a href="#find-your-wallet" class="btn secondary anchor-smooth-scroll"><span>Find your wallet</span><span class="ico-arrow-south"></span></a></p>
<img aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/468026266/shape-curve-simple-white.svg" alt="">

<h3 class="heading-deco terciary">What is a digital wallet?</h3>
<p>A digital wallet in the context of EBSI is a type of online storage that lets you securely keep track of your digital assets and information, like digital certificates and digital identity information. It's like a traditional wallet but storing digital information.</p>


<h3 class="heading-deco terciary">What is a conformant wallet?</h3>
<p>A conformant wallet is a type of wallet that has successfully passed the Conformance Test. The test verifies that the wallet meets certain standards for performance and functionality, whether it is a holder, issuer, or verifier wallet. 
The Conformance Test assesses the wallet's ability to handle credentials assigned by a mock issuer and return them to a mock verifier.</p> 
<img aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/468026266/shape-wave-white.svg" alt="">
<h2 class="heading-deco terciary">Which wallet do I need?</h2>
<p>Different wallets offer different functionalities. Under EBSI's Verifiable Credentials exchange framework, we distinguish three different types of functionalities, which an individual wallet may chose to offer alone, or in combination:</p>
<div>
<img style="width:35px;" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/Number%3D01.svg"/>
<p><strong>Wallets for holders:</strong> Can request issuance of Verifiable Credentials (VCs) and receive them instantly or deferred.</p>
</div>
<div>
<img style="width:35px;" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/Number%3D02.svg"/>
<p><strong>Wallet for issuer:</strong> these wallets allow organisations like universities or ministries to manage their accreditations on the blockchain ledger, and issue Verifiable Credentials to Holders.</p>
</div>
<div>
<img style="width:35px;" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/Number%3D03.svg"/>
<p><strong>Wallet for Verifiers:</strong> these wallets allow organisations like companies (e.g. employer), or universties to verify the authenticity of a Verifiable Credential presented by a Holder.</p>
</div>

<h2 class="heading-deco terciary">Find your wallet</h2>
    <div id="type-of-wallet">
      <div class="f-block-section">
        <img
          src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/illu-num-1.png"
        />
        <h3>Select which type of wallet you need</h3>
      </div>
      <div class="s-block-section">
        <div id="organisation-card" class="card-wallet-cta">
          <div class="container-h-f">
            <div class="card-wallet-header">
              <img
                aria-hidden="true"
                src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/verifier-icon.png"
                alt=""
              />
            </div>
            <div class="card-wallet-body">
              <h4>Organisation wallet</h4>
              <p>A wallet that is controlled by an organisation,
				such as an issuer or verifier, and is used to provide 
				digital credentials or other services to users.
              </p>
            </div>
          </div>
          <div class="card-wallet-footer">
            <p>
              <strong>Select the capabilities you are interested in</strong>
            </p>
            <div id="org-tabs" class="tabs pick-type">
              <a href="#pick-your-wallet" class="tab anchor-smooth-scroll" data-type="accredit-authorise" data-index="0" >
                <p>Accredit & Authorise</p>
                <div class="box-checker"><div></div></div>
              </a>
              <a  data-type="issue" data-index="1" href="#pick-your-wallet" class="tab anchor-smooth-scroll">
                <p>Issue</p>
                <div class="box-checker"><div></div></div>
              </a>
              <a href="#pick-your-wallet" class="tab anchor-smooth-scroll" data-type="verify" data-index="2">
                <p>Verify</p>
                <div class="box-checker"><div></div></div>
              </a>
            </div>
          </div>
        </div>
        <div id="individual-card" class="card-wallet-cta">
          <div class="container-h-f">
            <div class="card-wallet-header">
              <img
                aria-hidden="true"
                src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/holder-icon.png"
                alt=""
              />
            </div>
            <div class="card-wallet-body">
              <h4>Individual wallet</h4>
              <p>A digital wallet that is used by natural persons
				 to store and manage their verifiable credentials.</p>
            </div>
          </div>
          <div class="card-wallet-footer">
            <p>
              <strong>Select the capabilities you are interested in</strong>
            </p>
            <div class="tabs pick-type">
              <a href="#pick-your-wallet" class="tab anchor-smooth-scroll" data-type="request-present-credentials" data-index="4" id="request-present_credentials" >
                <p>Request & present credentials</p>
                <div class="box-checker"><div></div></div>
             </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="pick-your-wallet">
      <div class="f-block-section">
        <img
          src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/illu-num-2.png"
        />
        <h3>Pick your wallet</h3>
      </div>
      <div class="s-block-section">
<img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/loader-low.gif" alt=""/>
<div class="default-state-container">
	<div><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/info-icon.png?version=1&modificationDate=1688642091828&api=v2"/></div>
	<div><p><strong>You need to select a type of wallet first,</strong> then the wallets will be automatically generated</p></div>
</div>
<div class="no-results-container"><img class="img-fluid" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/no-results-isometric.png"/>
<div><h4>No results found :(</h4><p>Sorry, there are no wallets that match your request at the moment.</p></div>
</div>

</div>
</div>
<h2 class="heading-deco terciary">Previous versions - version 2</h2>
<p>Here is a list of wallets that have been tested and certified as conformant with a deprecated version of the EBSI specifications. Please note that while these wallets may still function in some capacity, they may not be able to take full advantage of all the features and benefits of the latest EBSI specifications. </p>
<div class="collapse" id="accordionGroup" data-allow-multiple>

<!--FAQ 1-->
<div class="collapse-item">

<h3>
<button class="collapse-trigger" id="faq1" aria-expanded="false" aria-controls="sect1"> 
<span class="collapse-title h4">Conformant with versions 2<span class="collapse-icon"></span> </span> </button>
</h3>

<div class="collapse-panel" id="sect1" role="region" aria-labelledby="faq1" hidden="">
<p style="margin-bottom:40px;">Wallets conformant with WCT v2 which is focused on testing holder wallets.</p> 

<div class="loadmore-container"><a id="loadmore-cta" class="btn secondary outline"><span><strong>Load more</strong></span></a></div>
</div>
</div>
<!---->
</div>
<img aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/468026266/shape-curve-simple-white.svg" alt="">
<h3>Do you want to become conformant ?</h3>
<p>Join the EBSI family and achieve wallet conformance today!</p>
<p><a class="btn secondary" href="https://hub.ebsi.eu/wallet-conformance" target="_blank"><span>Become conformant</span><span class="ico-external"></span></a></p>
#type-of-wallet .card-wallet-header > img { max-width: 80px; max-height: 80px; width: 80px; height: 80px; min-width: 80px; min-height: 80px; } 


/*
@media screen and ( max-width: 1185px ) {
	.content-coming-soon { flex-direction: column; gap: 16px; }
}

*/

#loader-section { position: relative; height: 10rem; width: 100%; display: flex; justify-content: center; align-items: center; }
#loader-section > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%); }

 @media screen and ( max-width: 768px ) {
	#find-your-wallet #type-of-wallet { margin-right: 20px; }
	#find-your-wallet .s-block-section { flex-direction: column; gap: 2.5rem!important;}
	#find-your-wallet .s-block-section > div { width: 100%!important; max-width: unset!important; }
}
@media screen and ( max-width: 1110px ) {
	#find-your-wallet .tabs { flex-direction: column;}
	#find-your-wallet .tabs > a { width: 100%; justify-content: space-between; }
}

/* --- */

/*Specific hack for Confluence*/
@media screen and (max-width: 340px) {
 .card-conformant-wallets .news-teaser-root > div > div > div { width: auto!important; margin:0!important;}
 .card-conformant-wallets .news-teaser-root > div > div > div > div > div > div { padding: 44px 8px 20px!important; }
 .card-wallet__header-title > h2 > a {font-size: 18px!important; line-height: 1; }
 .card-wallet__header-title > h2 { white-space: normal!important; max-width: 205px!important  }
}

@media screen and (max-width: 412px) {
	.card-conformant-wallets .news-teaser-root > div > div > div { width: auto!important;}
	.card-wallet__header-title > div > p {font-size: inherit!important;}
 	.card-wallet__header-title > h2 > a {font-size: 20px!important;}
	..card-wallet__header-title > h2 { white-space: nowrap!important;}
}


@media screen and (min-width: 905px) {
  .card-conformant-wallets .news-teaser-root > div > div > div  { margin: 0; } 
}
.container { max-width: 1217px!important; }
#find-your-wallet .container { max-width: 1217px!important; }
#find-your-wallet .find-your-wallet-body { }
#find-your-wallet .find-your-wallet-body > div.col-12 {padding-right: 0; }
#find-your-wallet .f-block-section { display: flex; align-items: center; gap: 13px; }
#find-your-wallet .f-block-section > img { width: 45px; height: 27px; }
#find-your-wallet .f-block-section > h3 { font-size: 32px; margin-bottom: 0; }
#find-your-wallet .s-block-section { display: flex; gap: 1.5rem; border-left: 2px solid #99E1F9; padding-left: 2.5rem; padding-bottom: 0.5rem; margin-top: 2.5rem; margin-bottom: 2rem;}
#find-your-wallet .s-block-section .card-wallet-cta { width: 50%; max-width: 576px; min-height: 388px; box-shadow: 0px 4px 20px rgb(0 55 100 / 10%); border-radius: 16px; background: white; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px;}
#find-your-wallet .s-block-section .card-wallet-cta .container-h-f { display: flex; flex-direction: column; justify-content: space-between; }
#find-your-wallet .s-block-section .card-wallet-cta .card-wallet-body p { margin-bottom: 0; }
#find-your-wallet .s-block-section .card-wallet-cta .card-wallet-footer .tabs { display: flex; gap: 24px; align-items: center; }
#find-your-wallet .s-block-section .card-wallet-cta .card-wallet-footer .tab { border: 1px solid #776E85; box-shadow: 0px 4px 20px rgb(0 55 100 / 10%); border-radius: 6px; padding: 10px 16px; display: flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; }
#find-your-wallet .tab-container { display: flex; flex-direction: row; gap: 8px; align-items: center; }

#find-your-wallet .issue-cta { min-width: 93px; }
#find-your-wallet .verify-cta { min-width: 96px; }

#find-your-wallet .s-block-section .card-wallet-cta .card-wallet-footer .tab p { margin-bottom: 0; }
#find-your-wallet .s-block-section .card-wallet-cta .card-wallet-footer .box-checker {position: relative; border: 1.4px solid #8e8699; width: 16px; height: 16px; border-radius: 2px; min-width: 16px; max-width: 16px; min-height: 16px; max-height: 16px; }

/* Active */

#find-your-wallet .s-block-section .card-wallet-cta.activated { border: 1px solid #cd1d8b; }
#find-your-wallet .s-block-section .card-wallet-cta .card-wallet-footer .tab.activated { border: 1px solid #cd1d8b; background: #ffe6f2; }
#find-your-wallet .s-block-section .card-wallet-cta .card-wallet-footer .tab.activated .box-checker { border: 1.4px solid #cd1d8b; }
#find-your-wallet .s-block-section .card-wallet-cta .card-wallet-footer .tab.activated .box-checker:after { content: ''; background-image: url('https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/check-icon.png'); background-size: cover; position: relative; top: -7px; left: -2px; display: block; width: 25px; height: 25px;}
#find-your-wallet .s-block-section .card-wallet-cta .card-wallet-footer .tab.activated .box-checker > div { position: absolute; left:0; top:0; border-right: 2px solid #ffe6f2; width: 15px; height: 8px; }

/* Hover */
@media screen and ( min-width: 1024px ) {

#find-your-wallet .tab:hover { border: 1px solid #cd1d8b!important; }
#find-your-wallet .tab:hover .box-checker { border: 1.4px solid #cd1d8b!important; }
#find-your-wallet .tab:hover .box-checker:after { display: block; content: ''; background-image: url('https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/check-icon.png'); background-size: cover; position: relative; top: -7px; left: -3px; width: 25px; height: 25px; }
#find-your-wallet .tab:hover .box-checker > div { position: absolute; left:0; top:0; border-right:2px solid white; width: 15px; height: 8px; }

}

/* pick wallet */
#pick-your-wallet { margin-top: 2rem; }
#pick-your-wallet .s-block-section { gap: unset; padding-left: 3rem; margin-right: 15px;}
#pick-your-wallet .s-block-section > p:first-child, #pick-your-wallet .s-block-section > p:last-child, #default-state-cards > p:first-child, #default-state-cards > p:last-child { display: none; }
#pick-your-wallet #default-state-cards { width: 100%; border: 1px solid #E8E7EB; border-radius: 14px; }
#pick-your-wallet .default-state-container { display: flex; gap: 11px; padding: 40px 42px; align-items: flex-start; }
#pick-your-wallet .default-state-container > div p { margin-bottom: 0; }

#pick-your-wallet #no-results-cards { width: 100%; display: flex; justify-content: center; }
#pick-your-wallet #no-results-cards .no-results-container { display: flex; justify-content: center; align-items: center; text-align: center; }
#pick-your-wallet #no-results-cards .no-results-container > div { max-width: 424px; }
#pick-your-wallet .no-results-container > div > p { font-size: 18px; line-height: 28px; }
/* #pick-your-wallet .no-results-container > div > h4, #pick-your-wallet .no-results-container > div > p { color: #004494; } */


/* *********wallets rendering********** */

#find-your-wallet iframe { display: unset!important; width: unset!important; }
#find-your-wallet iframe+div { display: flex; flex-wrap: wrap; height: auto!important;}
#find-your-wallet iframe+div div { position: unset!important; }

/* content - by - label */
.smalltext > p:first-child, .smalltext > p:last-child { display: none; }
.wallet-container-info > p:first-child, .wallet-container-info > p:last-child { display: none; }
#pick-your-wallet .content-by-label { display: flex; flex-wrap: wrap; gap: 24px;}
#pick-your-wallet .content-by-label li > div:first-child { display: none; }
#pick-your-wallet .content-by-label li > .details > a { display: none; }
#pick-your-wallet .small-text p:first-child, #pick-your-wallet .small-text p:last-child { display: none; }
#pick-your-wallet .content-by-label li { max-width: 383px; min-width: 383px; overflow: initial; height: auto; padding: 40px 40px 40px 40px; background: #ffffff; box-shadow: 0px 4px 10px rgb(0 55 100 / 10%); border-radius: 16px;}
#pick-your-wallet .content-by-label .details { margin: 0; padding: 0; }

.wallet-category { display: flex; flex-wrap: wrap; gap: 8px;}
.wallet-category p { margin-bottom: 0; }
.wallet-category > p:first-child { display: none; }
.wallet-category > p:nth-child(2) { width: 100%; }
.wallet-category > p:last-child { display: none; }
.wallet-category div { display: flex; gap: 10px; align-items: center; justify-content: space-evenly; width: fit-content; padding: 0.2rem 1rem; border: 0.5px solid #A59EAE; border-radius: 6px;}
.wallet-category div > span:first-child { display: flex; justify-content: center; align-items: center; margin-top: 0.1rem; }
.wallet-category div > span:last-child { color: #4A3D5D;}

/* -- card new -- */

.card-wallet__header-title > div { padding-top: 0px; }
.card-wallet__header-title a { display: flex; gap: 10px; align-items: center; text-decoration: none!important; white-space: initial; }
.card-wallet__header + .card-wallet__info div > p:first-child { margin-bottom: 4px; }
.card-wallet__header + .card-wallet__info div > p:last-child { margin-bottom: 24px; }
.card-wallet__info div > p:last-child { margin-bottom: 0px; }
.card-wallet__info .wallet-type_individual > div:nth-child(3) { display: none!important; }
.card-wallet__info .wallet-type_organization > div:nth-child(2) { display: none!important; }
.card-wallet__info .wallet-type_organisation > div:nth-child(2) { display: none!important; }
.request-present_credentials a { font-size: 11px; }


.device_cross-same_disabled { display: none; }
.device_cross-same, .device_cross-same_full { }
.device_cross-same p, .device_cross-same_full p { margin-bottom: 0px; }
.device_cross-same > p:first-child, .device_cross-same > p:nth-child(3) { display: none; }
.device_cross-same_full > p:first-child, .device_cross-same_full > p:nth-child(3) { margin-bottom: 8px; }
.tested-container { display: flex;  gap: 6px; flex-wrap: wrap;}
.device_cross-same > .tested-container > div:first-child, .device_cross-same_full > .tested-container > div:first-child { border: 1px solid #D2CFD6; border-radius: 6px; height: 100%; padding: 4px 7px; min-width: 144px; background: white;}
.device_cross-same > .tested-container > div:first-child > div, .device_cross-same_full > .tested-container > div:first-child > div { color: #4A3D5D; font-size: 16px; display: flex; justify-content: space-between; gap: 3px;}
.device_cross-same > .tested-container > div:last-child, .device_cross-same_full > .tested-container > div:last-child { border: 1px solid #D2CFD6; border-radius: 6px; height: 100%; padding: 4px 7px; min-width: 144px; background: white;}
.device_cross-same > .tested-container > div:last-child > div, .device_cross-same_full > .tested-container > div:last-child > div { color: #4A3D5D; font-size: 16px; display: flex; justify-content: space-between; gap:3px;}
.device_cross-same > .tested-container > div:first-child span, .device_cross-same > .tested-container > div:last-child span { display: flex; align-items: center;}
.device_cross-same_full > .tested-container > div:first-child span, .device_cross-same_full > .tested-container > div:last-child span { display: flex; align-items: center;} 
#cross-devices_desktop { min-width: auto; }
#cross-devices_mobile { min-width: auto; }
#cross-devices_desktop > div > span:nth-child(2), #cross-devices_desktop > div > span:nth-child(3) { display: none; }
#cross-devices_mobile > div > span:nth-child(2), #cross-devices_mobile > div > span:nth-child(1) { display: none; }
#cross-devices_disabled { display: none; }

#same-devices_desktop { min-width: auto; }
#same-devices_mobile { min-width: auto; }
#same-devices_disabled { display: none; }
#same-devices_desktop > div > span:nth-child(2), #same-devices_desktop > div > span:nth-child(3) { display: none; }
#same-devices_mobile > div > span:nth-child(2), #same-devices_mobile > div > span:nth-child(1) { display: none; }


.use-cases_img { border: 2px solid #004494; border-top-left-radius: 24px; border-bottom-right-radius: 24px; padding: 0.2rem; display: flex; flex-direction: column; justify-content : end; align-items: center; min-width: 65px; min-height: 81px; max-width: 65px; max-height: 81px; line-height: 1; font-size: 8px; text-align: center; text-decoration: none; gap: 4px; color: #004494;}
#use-case_full > div { display: flex; gap: 1.25rem; }
#use-case_diploma > div, #use-case_ssi > div { display: flex; }
#use-case_diploma > div > div:nth-child(2), #use-case_diploma > div > div:nth-child(3) { display: none; }
#use-case_ssi > div > div:nth-child(1), #use-case_ssi > div > div:nth-child(3) { display: none; }
#use-case_social-security > div > div:nth-child(1), #use-case_social-security > div > div:nth-child(2) { display: none; }

.application-types, .application-types span { display: flex; align-items: center; gap: 8px;}
.application-types span p { margin-bottom: 0px; color: #4A3D5D;}
.application-types span { border: 1px solid #D2CFD6; border-radius: 4px; padding: 4px 8px; background: white;}
#type_mobile > div > span:nth-child(2), #type_mobile > div > span:nth-child(3) { display: none; }
#type_mobile-desktop > div > span:nth-child(3) { display: none; }

#type_mobile-web > div > span:nth-child(2) { display: none; }

#type_desktop > div > span:nth-child(1), #type_desktop > div > span:nth-child(3) { display: none; }
#type_desktop-mobile > div > span:nth-child(3) { display: none; }

#type_desktop-web > div > span:nth-child(1) { display: none; }

#type_web > div > span:nth-child(1), #type_web > div > span:nth-child(2) { display: none; }
#type_web-mobile > div > span:nth-child(2) { display: none; }

#type_web-desktop > div > span:nth-child(1) { display: none; }


.loadmore-container { display: flex; justify-content: center; padding-bottom: 36px; padding-top: 10px;}
#loadmore-cta { display: none; }

.card-wallet__header { display: flex; flex-direction: column;}
.card-wallet__header-logo p { margin-bottom: 18px;}
.card-wallet__header-title > h2 > a{font-weight: 600; font-size: 24px; line-height: 28px; color:#1D0D34; text-decoration: none!important;}
.card-wallet__header-title > h2 {line-height: 28px; white-space: nowrap;}
.card-wallet__header-title > p { margin: 0px; }
.card-wallet__header-title > a { margin-left: 11.5px; text-decoration: none!important;}
.card-wallet__header-title > a > img { width: 21px; height:21px; margin-bottom: 5px;}
.card-wallet__header .card-wallet__header-title { display: flex; max-width: fit-content; align-items: center}
.card-wallet__header .card-wallet__header-title > div > p {font-size : 24px; line-height: 1; color: #1d0d34; font-weight: 600; white-space: nowrap; margin-bottom: 0;}
.card-wallet__header .card-wallet__header-title > div:nth-child(2) {margin-top : 3px; padding-left: 11.5px;}
.card-wallet__header .card-wallet__header-title > div:nth-child(2) > p > span > img {width: 17px; height: 17px;}
.card-wallet__header .card-wallet__header-title > div:nth-child(2) > p > a > img { width: 21px; height: 21px; margin-top: 8px;}


.card-conformant-wallets .news-teaser-root > div > div > div { width:24.5rem; height: 100%; margin: 12px; background: #ffffff; border-radius: 16px; box-shadow: 0px 4px 10px rgba(0, 55, 100, 0.1); }
.card-conformant-wallets .news-teaser-root > div > div > div > div > div > div { padding: 44px 40px 40px 40px }
.card-conformant-wallets .news-teaser-root > div > div > div > div > div > div > div {margin: 0;}

.card-conformant-wallets > div > div > div > div:nth-child(n) > div > div > div > h2 { display: none;}



#service-disabled_banner { background: #FFE6F2; padding: 1rem;}
.service-disabled_container { display: flex!important; flex-direction: row; align-items: center; gap: 1.75rem;}
.service-disabled_content > p:nth-child(2) { margin-bottom: 4px; }
.service-disabled_img > p { margin: 0px; }
.service-disabled_content > p:nth-child(3) { width: 95%; }




/*Devices dynamic show*/
.full-activated > p > span:first-child:after{content: ' \007c'; margin-left: 8px;}
.de-activated {display: none;}
.phone-activated > p > span:last-child {display:none; }
.desktop-activated > p > span:first-child {display:none; } 


.specific-color {filter: invert(39%) sepia(98%) saturate(7114%) hue-rotate(310deg) brightness(85%) contrast(88%); margin-top: -18px; margin-bottom: 15px;}
.link-download {margin-right: 20px; margin-left:5px;}
.text-secondary span:after{  top:-15px; left:6px; background-size: 16px!important;}
.link-download span {padding-right:5px;}

.card-wallet__footer p {margin: 1.5rem 0 0 0;}


.card-wallet__body-devices { margin-top: 12px; margin-bottom: 1.5rem;}
.card-wallet__body-devices > div > p { font-weight: 600 }
.card-wallet__body-devices > div > p:first-child { display: none; }
.card-wallet__body-devices > div > p:nth-child(2) { margin-bottom: 8px; }
.card-wallet__body-devices:last-child > div > p:nth-child(2) img { width: 14px; height:14px;}
.card-wallet__body-devices div:last-child > div:last-child p { display: flex; position: relative; align-items: baseline; max-width: max-content; font-size: 14px; line-height: 20px; color: #776e85; }
.card-wallet__body-devices div:last-child > div:last-child > p > a { position: absolute; top: 2px; }
.card-wallet__body-devices div:last-child > div:first-child p { display: flex; align-items: center; width:200px; justify-content: space-between;}


.wallet-type { }
.wallet-type_individual > div:nth-child(2) > img { width: 21px; }
.wallet-type > p { color: #776e85; margin-bottom: 0px; }
#previous-versions .line-separator-header hr { margin-left: -25px; margin-right: -25px; }
#previous-versions .container { max-width: 1217px!important; }
#previous-versions .content-by-label { display: flex; flex-wrap: wrap; gap: 40px;}
#previous-versions .content-by-label li > div:first-child { display: none; }
#previous-versions .content-by-label li > .details > a { display: none; }
#previous-versions .small-text p:first-child, #pick-your-wallet .small-text p:last-child { display: none; }
#previous-versions .content-by-label li { width: 31%; min-width: 340px; overflow: initial; height: auto; padding: 37px 25px; margin-top: -8px; background: #ffffff; box-shadow: 0px 4px 10px rgb(0 55 100 / 10%); border-radius: 16px; box-shadow: 0px 4px 20px rgba(0, 55, 100, 0.1); border: 0.96732px solid #E8E7EB; background: #F6F5F7;}
#previous-versions .content-by-label .details { margin: 0; padding: 0; }
#previous-versions a.btn.secondary { color: white!important; }
#previous-versions .text-secondary { color: #cd1d8b!important; }
#previous-versions #loadmore-cta { color: #cd1d8b!important; }

/* last - section */

.conformant-curve-top > p > img { position:absolute; top:-1px; left:-1%; width: 102%;}
.conformant-curve-top { z-index:1; margin-top:-1rem; position:relative;} 
.conformant-curve-top { background: linear-gradient(84.61deg, #00B3EF -13.37%, #004494 33.79%, #004494 65.57%, #FF0179 115.49%)!important; }
#become-conformant { display: flex; align-items: center; text-align: center; height: 500px;}
#become-conformant h3, #become-conformant p { color: white; }

#sect1 { -webkit-animation : none!important; -moz-animation : none!important; }
<script>  

$(".smalltext")
  .contents()
  .filter(function () {
    return this.nodeType === 3
  })
  .remove()



const defSt = document.querySelector("#default-state-cards")
const noRes = document.querySelector("#no-results-cards")
const liCa = document.querySelector("#list-wallet-cards")
defSt.setAttribute("hidden", "")
noRes.setAttribute("hidden", "")
liCa.setAttribute("hidden", "")

window.addEventListener('load', function() {
	const loader = document.querySelector("#loader-section")
    loader.setAttribute("hidden","")
	loader.style.display = "none"
	defSt.removeAttribute("hidden")
	noRes.removeAttribute("hidden")
	liCa.removeAttribute("hidden")
})


document.addEventListener("DOMContentLoaded", function () {
	const tabs = document.querySelectorAll(".card-wallet-footer > .tabs > .tab")
	const defaultState = document.querySelector("#default-state-cards")
	const notFound = document.querySelector("#no-results-cards")
	const cardList = document.querySelector("#list-wallet-cards")
	const wallets = document.querySelectorAll(
		"#pick-your-wallet .wallet-container-info"
	  )

	try {
		const walletsSorted = walletsStructure(wallets)
		sortWallets(walletsSorted)
		walletsImpl(tabs, defaultState, notFound, cardList)
	} catch (error) {
		const errorContainer = document.querySelector("#pick-your-wallet > .s-block-section")
		errorContainer.innerHTML = `<h4 style="color: #CD1D8B"><strong>An error occurred while trying loading the wallets. Please try again later!</strong></h4>`
		console.error(error)
	}




})

const stateSection = (element, state) => {
  if (element) {
    element.style.display = state ? `${state}` : "none"
  }
}

const stateClassSwitcher = (elementFinder, action, classTrigger) => {
  const element = document.querySelector(`${elementFinder}`)
  if (action == "add") {
    element.classList.add(`${classTrigger}`)
  } else {
    element.classList.remove(`${classTrigger}`)
  }
}

const switchWalletRefs = () => {
  const tabs = document.querySelectorAll(".tab")
  tabs.forEach((tab) => {
    tab.classList.contains("activated")
      ? tab.setAttribute("href", "#pick-your-wallet")
      : tab.setAttribute("href", "#type-of-wallet")
  })
}

const walletsImpl = (tabs, defaultState, notFound, cardList) => {
  stateSection(defaultState, "block")
  stateSection(notFound, "none")
  stateSection(cardList, "none")

  tabs.forEach((tab) => {
    tab.classList.remove("activated")
    tab.addEventListener("click", function (e) {
      const parentId = this.closest("div").getAttribute("id")
      const thisId = this.getAttribute("id")
      stateSection(defaultState, "none")
      stateSection(cardList, "block")
      let counter = 0
      e.stopPropagation()
      this.classList.toggle("activated")
      switchWalletRefs()
      if (parentId == "org-tabs") {
        stateClassSwitcher("#organisation-card", "add", "activated")
        stateClassSwitcher("#individual-card", "remove", "activated")
        stateClassSwitcher(
          "#request-present_credentials",
          "remove",
          "activated"
        )
      }
      if (thisId == "request-present_credentials") {
        stateClassSwitcher("#organisation-card", "remove", "activated")
        stateClassSwitcher("#individual-card", "add", "activated")
        document.querySelectorAll("#org-tabs > a").forEach((tab) => {
          tab.classList.remove("activated")
        })
      }
      cardsSwitcher(counter, defaultState, notFound, cardList)
      e.preventDefault()
    })
  })
}

const cardsSwitcher = (counter, defaultState, notFound, cardList) => {
  const allWallets = document.querySelectorAll(
    "#pick-your-wallet .wallet-container-info"
  )

  let activeTabsTypes = document.querySelectorAll(
    "#type-of-wallet .tabs .tab.activated"
  )
  if (activeTabsTypes.length === 0) {
    stateClassSwitcher("#organisation-card", "remove", "activated")
    stateClassSwitcher("#individual-card", "remove", "activated")
  }
  let activeDataTypes = Array.from(activeTabsTypes).map((tab) => {
    return tab.getAttribute("data-type")
  })
  allWallets.forEach((wallet) => {
    const walletDataType = wallet.getAttribute("data-type")
    const dataTypeMatch = activeDataTypes.every((dataType) => {
      return walletDataType.includes(dataType)
    })
    if (dataTypeMatch) {
      counter++
      wallet.closest("li").style.display = "block"
    } else {
      wallet.closest("li").style.display = "none"
    }
    if (counter === 0) {
      stateSection(cardList, "none")
      stateSection(defaultState, "none")
      stateSection(notFound, "block")
    } else {
      if (activeTabsTypes.length === 0) {
        stateSection(defaultState, "block")
        stateSection(cardList, "none")
        stateSection(notFound, "none")
      } else {
        stateSection(cardList, "block")
        stateSection(notFound, "none")
        stateSection(defaultState, "none")
      }
    }
  })
}

const walletsStructure = (wallets) => {
  let dataWallet = ""
  const walletsSorted = []
  wallets.forEach((wallet, index) => {
    dataWallet =
      wallet.getAttribute("data-type") == "request-present-credentials"
        ? "a"
        : "b"

    walletsSorted.push({
      wallet,
      dataWallet,
      "data-type": wallet.getAttribute("data-type").split(",").length,
    })
  })
  return walletsSorted
}

const sortWallets = (walletsSorted) => {
  const finalizingWallets = []
  walletsSorted.sort(function (attrX, attrY) {
    if (attrX.dataWallet > attrY.dataWallet) return -1
    if (attrX.dataWallet < attrY.dataWallet) return 1

    if (attrX["data-type"] > attrY["data-type"]) return -1
    if (attrX["data-type"] < attrY["data-type"]) return 1
  })
  walletsSorted.forEach((obj) => {
    finalizingWallets.push(obj.wallet)
  })
  finalizingWallets.flat(1).forEach((wallet, index) => {
    let html = ""
    html = wallet
    const Uli = `#pick-your-wallet ul > li:nth-child(${
      index + 1
    }) > div.details > span`
    $(Uli).html(wallet)
  })
}






</script>
<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');
    }
  }

});



if ($(window).width() < 550) {

const storeCards = document.querySelectorAll("#previous-versions .wallet-container-info")
const cardLimit = document.querySelectorAll("#previous-versions .wallet-container-info").length;
const buttonLoadMore = document.querySelector("#loadmore-cta")
const cardInc = 3;
let tempArr = []
const allWallets = [...document.querySelectorAll("#previous-versions li")]
const showOnLoadPage = () => {
	
    cardLimit > 3 ? buttonLoadMore.style.display = 'flex' : buttonLoadMore.style.display = 'none'
	Array.from(storeCards).forEach((wallet, index) => {
	  let html = ""
	  html = wallet
	  const Uli = `#previous-versions ul > li:nth-child(${index + 1}) > div.details > span`
	  $(Uli).html(wallet)
        if( index > 2 ) {
            tempArr.push({[index] : wallet})
            $(`#previous-versions li:nth-child(${index + 1})`).hide();
        } else {
             $(`#previous-versions li:nth-child(${index + 1})`).show();
        }
	})
	
}

const showCardsOnLoadMore = () => {
	const hiddenCards = allWallets.filter(card => card.style.display === 'none')
	const nextThree = hiddenCards.slice(0,3)
	nextThree.forEach( card => card.style.display = 'block')

	if(hiddenCards.length <= 3 ){
		document.querySelector("#loadmore-cta").style = 'none';
	}
}

showOnLoadPage()
document.querySelector("#loadmore-cta").addEventListener('click', showCardsOnLoadMore)



document.querySelector("#faq1").addEventListener("click", function(e) {
	if (this.getAttribute('aria-expanded') == 'true' ) {
		showOnLoadPage()
	}
})

	
	
}

 </script>