<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="/digital-building-blocks/sites/download/attachments/791609471/swiper-style.css"/>
<script src="/digital-building-blocks/sites/download/attachments/791609471/swiper-script.js"></script>
<script src="/digital-building-blocks/sites/download/attachments/791609471/marquee-script.js"></script>
<link rel="stylesheet" href="/digital-building-blocks/sites/download/attachments/791609471/style.css?api=v2">
<link rel="stylesheet" href="/digital-building-blocks/sites/download/attachments/791609471/mobile-tabs.css?api=v2">
<script src="/digital-building-blocks/sites/download/attachments/791609471/script.js?api=v2"></script>
<script src="/digital-building-blocks/sites/download/attachments/791609471/dropdown.js?api=v2"></script>
<script defer src="/digital-building-blocks/sites/download/attachments/694487778/skipToMainContent.js"></script>

<section class="section" id="sec-1-the-wallet">
    <div class="container">
        <div class="cols align-items-center justify-content-between">
            <div class="col-7">
                <p class="page-reference">The Wallet</p>
                <h2 class="pb"><span class="d-block">What is the</span> EU Digital Identity Wallet</h2>
            </div>
            <div class="col-5">
                <img src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-top.svg?api=v2" alt="">
            </div>
        </div>
    </div>
</section>

<section class="section" id="sec-2-the-wallet">
  <div class="container">
      <div class="cols">
          <div class="col-10 left-col">
              <h2 class="h2 pb"><span class="ff-b">The European Union's response to </span>digital identification challenges</h2>
          </div>
      </div>        
      <div class="cols justify-content-between">
          <div class="col-5 left-col">
          <p>Identification is how we prove who we are; think of your ID or driver’s license. With more and more private and public services becoming digital, a safe, reliable, and privacy enhancing means of digital identification is needed for everyone in Europe.</p>
          </div>
          <div class="col-6 right-col">
          <p>EU Digital Identity Wallets are the European Union's response to the challenges of digital identification. Every EU Member State will offer its own wallet app, built to the same specifications, to all citizens, residents and businesses in the next few years. Each version of the wallet will be interoperable and will work wherever you are in Europe.</p>  
          </div>
      </div>
  </div>
</section>

<section class="section" id="sec-6-the-wallet">
  <div class="container">
    <div class="cols desktop-view">
      <div class="col-7">
        <h2 class="h2 pb">
          <span class="d-block"
            >The key functionalities of the Wallet</span
          >
        </h2>
      </div>
    </div>
    <div class="cols mobile-view">
      <div class="col-12">
        <h2 class="h2 pb">
          <span class="d-block"
            >The key functionalities of the Wallet</span
          >
        </h2>
      </div>
    </div>
    <div class="cols">
      <div class="col-12 swiper-col">
        <div class="swiper">
          <!-- Additional required wrapper -->
          <div class="swiper-pagination" aria-hidden="true"></div>
          <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">
              <div class="swiper-slide-container">
                <div class="swiper-slide-inner">
                  <div class="slide-inner-top">
                    <div class="slide-inner-left">
                      <div class="slide-info">
                        <p class="slide-label">authenticate</p>
                        <h3 class="h3">Access online services</h3>
                        <p>
                          Identify yourself to a wide range of public and
                          private online services while protecting your
                          privacy. Prove who you are with just a few taps
                          — no need to manage countless passwords.
                        </p>
                      </div>
                      <div class="disclaimer">
                        <img
                          src="/digital-building-blocks/sites/download/attachments/791609471/icon-info.svg"
                          alt=""
                        />
                        <p>
                          The depiction is for illustrative purposes only
                          and is not representative of what the
                          EUDI-Wallets made available by Member States
                          will look like.
                        </p>
                      </div>
                    </div>
                    <div class="slide-inner-right">
                      <video
                        src="/digital-building-blocks/sites/download/attachments/791609471/video-Authenticate_1-vp9-chrome.webm"
                        alt=""
                        data-videoid="authenticate"
                        type="video/webm"
                        autoplay
                        muted
                        loop
                      ></video>
                    </div>
                  </div>
                  <div class="slide-inner-bottom">
                    <button
                      class="pause-btn pause"
                      aria-label="pause"
                      role="button"
                      data-togglevideoid="authenticate"
                    ></button>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="swiper-slide-container">
                <div class="swiper-slide-inner">
                  <div class="slide-inner-top">
                    <div class="slide-inner-left">
                      <div class="slide-info">
                        <p class="slide-label">Store</p>
                        <h3 class="h3">Store digital documents</h3>
                        <p>
                          Keep all the digital documents you need close at
                          hand. Securely store everything from your
                          education credentials to your train tickets in
                          your wallet — always ready for when you need
                          them.
                        </p>
                      </div>
                      <div class="disclaimer">
                        <img
                          src="/digital-building-blocks/sites/download/attachments/791609471/icon-info.svg"
                          alt=""
                        />
                        <p>
                          The depiction is for illustrative purposes only
                          and is not representative of what the
                          EUDI-Wallets made available by Member States
                          will look like.
                        </p>
                      </div>
                    </div>
                    <div class="slide-inner-right">
                      <video
                        src="/digital-building-blocks/sites/download/attachments/791609471/video-Store_2-vp9-chrome.webm?"
                        alt=""
                        data-videoid="store"
                        type="video/webm"
                        autoplay
                        muted
                        loop
                      ></video>
                    </div>
                  </div>
                  <div class="slide-inner-bottom">
                    <button
                      class="pause-btn pause"
                      aria-label="pause"
                      role="button"
                      data-togglevideoid="store"
                    ></button>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="swiper-slide-container">
                <div class="swiper-slide-inner">
                  <div class="slide-inner-top">
                    <div class="slide-inner-left">
                      <div class="slide-info">
                        <p class="slide-label">share</p>
                        <h3 class="h3">Share digital documents</h3>
                        <p>
                          Share stored digital documents from your wallet.
                          For example provide a copy of your education
                          credentials to an employer with just your
                          wallet. It will be as easy as it is quick.
                        </p>
                      </div>
                      <div class="disclaimer">
                        <img
                          src="/digital-building-blocks/sites/download/attachments/791609471/icon-info.svg"
                          alt=""
                        />
                        <p>
                          The depiction is for illustrative purposes only
                          and is not representative of what the
                          EUDI-Wallets made available by Member States
                          will look like.
                        </p>
                      </div>
                    </div>
                    <div class="slide-inner-right">
                      <video
                        src="/digital-building-blocks/sites/download/attachments/791609471/video-Share_3-vp9-chrome.webm"
                        alt=""
                        data-videoid="share"
                        type="video/webm"
                        autoplay
                        muted
                        loop
                      ></video>
                    </div>
                  </div>
                  <div class="slide-inner-bottom">
                    <button
                      class="pause-btn pause"
                      aria-label="pause"
                      role="button"
                      data-togglevideoid="share"
                    ></button>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="swiper-slide-container">
                <div class="swiper-slide-inner">
                  <div class="slide-inner-top">
                    <div class="slide-inner-left">
                      <div class="slide-info">
                        <p class="slide-label">sign</p>
                        <h3 class="h3">Sign documents safely</h3>
                        <p>
                          Sign documents with just your wallet. Providing
                          a legally binding e-signature will be faster and
                          easier than ever, enabling you to conduct
                          business wherever you are.
                        </p>
                      </div>
                      <div class="disclaimer">
                        <img
                          src="/digital-building-blocks/sites/download/attachments/791609471/icon-info.svg"
                          alt=""
                        />
                        <p>
                          The depiction is for illustrative purposes only
                          and is not representative of what the
                          EUDI-Wallets made available by Member States
                          will look like.
                        </p>
                      </div>
                    </div>
                    <div class="slide-inner-right">
                      <video
                        src="/digital-building-blocks/sites/download/attachments/791609471/video-Signature_4-vp9-chrome.webm"
                        alt=""
                        data-videoid="sign"
                        type="video/webm"
                        autoplay
                        muted
                        loop
                      ></video>
                    </div>
                  </div>
                  <div class="slide-inner-bottom">
                    <button
                      class="pause-btn pause"
                      aria-label="pause"
                      role="button"
                      data-togglevideoid="sign"
                    ></button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- end of desktop view -->

    <!-- mobile view -->
    <div class="cols sec-6-mobile-view">
      <div class="col-12">
        <div class="sec-6-mobile-card">
          <div class="slide-inner-left">
            <div class="slide-info">
              <p class="slide-label">authentication</p>
              <h3 class="h3">Access online services</h3>
              <p>
                Identify yourself to a wide range of public and private
                online services while protecting your privacy. Prove who
                you are with just a few taps — no need to manage countless
                passwords.
              </p>
            </div>
          </div>
          <div class="slide-inner-right">
            <div class="img-container">
              <video
                src="/digital-building-blocks/sites/download/attachments/791609471/video-Authenticate_1-vp9-chrome.webm"
                alt=""
                data-videoid="authenticate"
                autoplay
                muted
                loop
              ></video>
            </div>
            <button
              class="pause-btn pause"
              aria-label="pause"
              role="button"
              data-togglevideoid="authenticate"
            ></button>
          </div>
          <div class="disclaimer">
            <img
              src="/digital-building-blocks/sites/download/attachments/791609471/icon-info.svg"
              alt=""
            />
            <p>
              The depiction is for illustrative purposes only and is not
              representative of what the EUDI-Wallets made available by
              Member States will look like.
            </p>
          </div>
        </div>
        <div class="sec-6-mobile-card">
          <div class="slide-inner-left">
            <div class="slide-info">
              <p class="slide-label">store</p>
              <h3 class="h3">Store digital documents</h3>
              <p>
                Keep all the digital documents you need close at hand.
                Securely store everything from your education credentials
                to your train tickets in your wallet — always ready for
                when you need them.
              </p>
            </div>
          </div>
          <div class="slide-inner-right">
            <div class="img-container">
              <video
                src="/digital-building-blocks/sites/download/attachments/791609471/video-Store_2-vp9-chrome.webm?"
                alt=""
                data-videoid="store"
                type="video/webm"
                autoplay
                muted
                loop
              ></video>
            </div>
            <button
              class="pause-btn pause"
              aria-label="pause"
              role="button"
              data-togglevideoid="store"
            ></button>
          </div>
          <div class="disclaimer">
            <img
              src="/digital-building-blocks/sites/download/attachments/791609471/icon-info.svg"
              alt=""
            />
            <p>
              The depiction is for illustrative purposes only and is not
              representative of what the EUDI-Wallets made available by
              Member States will look like.
            </p>
          </div>
        </div>
        <div class="sec-6-mobile-card">
          <div class="slide-inner-left">
            <div class="slide-info">
              <p class="slide-label">share</p>
              <h3 class="h3">Share digital documents</h3>
              <p>
                Share stored digital documents from your wallet. For
                example provide a copy of your education credentials to an
                employer with just your wallet. It will be as easy as it
                is quick.
              </p>
            </div>
          </div>
          <div class="slide-inner-right">
            <div class="img-container">
              <video
                src="/digital-building-blocks/sites/download/attachments/791609471/video-Share_3-vp9-chrome.webm"
                alt=""
                data-videoid="share"
                type="video/webm"
                autoplay
                muted
                loop
              ></video>
            </div>
            <button
              class="pause-btn pause"
              aria-label="pause"
              role="button"
              data-togglevideoid="share"
            ></button>
          </div>
          <div class="disclaimer">
            <img
              src="/digital-building-blocks/sites/download/attachments/791609471/icon-info.svg"
              alt=""
            />
            <p>
              The depiction is for illustrative purposes only and is not
              representative of what the EUDI-Wallets made available by
              Member States will look like.
            </p>
          </div>
        </div>
        <div class="sec-6-mobile-card">
          <div class="slide-inner-left">
            <div class="slide-info">
              <p class="slide-label">sign</p>
              <h3 class="h3">Sign documents safely</h3>
              <p>
                Sign documents with just your wallet. Providing a legally
                binding e-signature will be faster and easier than ever,
                enabling you to conduct business wherever you are.
              </p>
            </div>
          </div>
          <div class="slide-inner-right">
            <div class="img-container">
              <video
                src="/digital-building-blocks/sites/download/attachments/791609471/video-Signature_4-vp9-chrome.webm"
                alt=""
                data-videoid="sign"
                type="video/webm"
                autoplay
                muted
                loop
              ></video>
            </div>
            <button
              class="pause-btn pause"
              aria-label="pause"
              role="button"
              data-togglevideoid="sign"
            ></button>
          </div>
          <div class="disclaimer">
            <img
              src="/digital-building-blocks/sites/download/attachments/791609471/icon-info.svg"
              alt=""
            />
            <p>
              The depiction is for illustrative purposes only and is not
              representative of what the EUDI-Wallets made available by
              Member States will look like.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section" id="sec-7-the-wallet">
  <div class="container">
    <div class="cols justify-content-between">
      <div class="col-5 left-col">
        <h2 class="h2 pb">
          <span class="d-block">Store and share</span> a wide range of
          <span class="d-block">digital documents</span>
        </h2>
      </div>
      <div class="col-7 right-col">
        <p>
          EU Digital Identity Wallets will be able to store and share a
          wide range of digital documents.These can include everything
          from highly sensitive documents like mobile driving licences to
          everyday items like your gym membership card.
        </p>
        <p>Your digital documents will be:</p>
        <ul>
          <li>
            <strong>Secure:</strong> Strong cryptographic encryption keeps
            your data safe
          </li>
          <li>
            <strong>Privacy-preserving:</strong> Private by design; only
            necessary information is shared.
          </li>
          <li>
            <strong>Cross-border:</strong> Many digital documents will be
            accepted wherever you are in Europe.
          </li>
        </ul>
      </div>
    </div>
    <div class="cols justify-content-between control-row">
      <div class="col-5 left-col">
        <p>
          Here is a small sample of the potential documents you will be
          able to eventually store in your wallet:
        </p>
      </div>
      <div class="col-1 right-col desktop-view">
        <button class="pause-btn pause" aria-label="pause" role="button"></button>
      </div>
    </div>
    <div class="cols">
      <div class="col-12 desktop-view">
        <div class="marq-wrapper">
          <div class="marq-container">
            <div class="marq-item">
              <div class="marq-item-inner-top">
                <img src="/digital-building-blocks/sites/download/attachments/791609471/icon-digital-id.svg" alt="" aria-hidden="true" />
                <div class="marq-item-inner-top-right">
                  <p class="title">Digital ID</p>
                  <p class="description">Jane Doe</p>
                </div>
              </div>
              <div class="marq-item-inner-bottom">
                <div class="active-indicator">
                  <p class="dot">•</p>
                  <p>Active</p>
                </div>
              </div>
            </div>
            <div class="marq-item">
              <div class="marq-item-inner-top">
                <img src="/digital-building-blocks/sites/download/attachments/791609471/icon-br-to-fra.svg" alt="" aria-hidden="true" />
                <div class="marq-item-inner-top-right">
                  <p class="title">BRU to FRA</p>
                  <p class="description">Ease Air</p>
                </div>
              </div>
              <div class="marq-item-inner-bottom">
                <div class="active-indicator">
                  <p class="dot">•</p>
                  <p>Active</p>
                </div>
              </div>
            </div>
            <div class="marq-item">
              <div class="marq-item-inner-top">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/icon-driving-licence.svg"
                  alt="" aria-hidden="true"
                />
                <div class="marq-item-inner-top-right">
                  <p class="title">Driving License</p>
                  <p class="description">AM-B</p>
                </div>
              </div>
              <div class="marq-item-inner-bottom">
                <div class="active-indicator">
                  <p class="dot">•</p>
                  <p>Active</p>
                </div>
              </div>
            </div>
            <div class="marq-item">
              <div class="marq-item-inner-top">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/icon-master-engineering.svg"
                  alt="" aria-hidden="true"
                />
                <div class="marq-item-inner-top-right">
                  <p class="title">Master of Engineering</p>
                  <p class="description">
                    Technical University Innsbruck
                  </p>
                </div>
              </div>
              <div class="marq-item-inner-bottom">
                <div class="active-indicator">
                  <p class="dot">•</p>
                  <p>Active</p>
                </div>
              </div>
            </div>
            <div class="marq-item">
              <div class="marq-item-inner-top">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/icon-gym-membership.svg"
                  alt="" aria-hidden="true"
                />
                <div class="marq-item-inner-top-right">
                  <p class="title">Gym Membership</p>
                  <p class="description">Super Fitness</p>
                </div>
              </div>
              <div class="marq-item-inner-bottom">
                <div class="active-indicator">
                  <p class="dot">•</p>
                  <p>Active</p>
                </div>
              </div>
            </div>
            <div class="marq-item">
              <div class="marq-item-inner-top">
                <img src="/digital-building-blocks/sites/download/attachments/791609471/icon-food-future.svg" alt="" aria-hidden="true" />
                <div class="marq-item-inner-top-right">
                  <p class="title">Future of Food conference</p>
                  <p class="description">Innovation Forum</p>
                </div>
              </div>
              <div class="marq-item-inner-bottom">
                <div class="active-indicator">
                  <p class="dot">•</p>
                  <p>Active</p>
                </div>
              </div>
            </div>
            <div class="marq-item">
              <div class="marq-item-inner-top">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/icon-employee-card.svg"
                  alt="" aria-hidden="true"
                />
                <div class="marq-item-inner-top-right">
                  <p class="title">Employee card</p>
                  <p class="description">Drive</p>
                </div>
              </div>
              <div class="marq-item-inner-bottom">
                <div class="active-indicator">
                  <p class="dot">•</p>
                  <p>Active</p>
                </div>
              </div>
            </div>
          </div>
          <div class="marq-container" aria-hidden="true">
            <div class="marq-item">
              <div class="marq-item-inner-top">
                <img src="/digital-building-blocks/sites/download/attachments/791609471/icon-digital-id.svg" alt="" aria-hidden="true" />
                <div class="marq-item-inner-top-right">
                  <p class="title">Digital ID</p>
                  <p class="description">Jane Doe</p>
                </div>
              </div>
              <div class="marq-item-inner-bottom">
                <div class="active-indicator">
                  <p class="dot">•</p>
                  <p>Active</p>
                </div>
              </div>
            </div>
            <div class="marq-item">
              <div class="marq-item-inner-top">
                <img src="/digital-building-blocks/sites/download/attachments/791609471/icon-br-to-fra.svg" alt="" aria-hidden="true" />
                <div class="marq-item-inner-top-right">
                  <p class="title">BRU to FRA</p>
                  <p class="description">Ease Air</p>
                </div>
              </div>
              <div class="marq-item-inner-bottom">
                <div class="active-indicator">
                  <p class="dot">•</p>
                  <p>Active</p>
                </div>
              </div>
            </div>
            <div class="marq-item">
              <div class="marq-item-inner-top">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/icon-driving-licence.svg"
                  alt="" aria-hidden="true"
                />
                <div class="marq-item-inner-top-right">
                  <p class="title">Driving License</p>
                  <p class="description">AM-B</p>
                </div>
              </div>
              <div class="marq-item-inner-bottom">
                <div class="active-indicator">
                  <p class="dot">•</p>
                  <p>Active</p>
                </div>
              </div>
            </div>
            <div class="marq-item">
              <div class="marq-item-inner-top">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/icon-master-engineering.svg"
                  alt="" aria-hidden="true"
                />
                <div class="marq-item-inner-top-right">
                  <p class="title">Master of Engineering</p>
                  <p class="description">
                    Technical University Innsbruck
                  </p>
                </div>
              </div>
              <div class="marq-item-inner-bottom">
                <div class="active-indicator">
                  <p class="dot">•</p>
                  <p>Active</p>
                </div>
              </div>
            </div>
            <div class="marq-item">
              <div class="marq-item-inner-top">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/icon-gym-membership.svg"
                  alt="" aria-hidden="true"
                />
                <div class="marq-item-inner-top-right">
                  <p class="title">Gym Membership</p>
                  <p class="description">Super Fitness</p>
                </div>
              </div>
              <div class="marq-item-inner-bottom">
                <div class="active-indicator">
                  <p class="dot">•</p>
                  <p>Active</p>
                </div>
              </div>
            </div>
            <div class="marq-item">
              <div class="marq-item-inner-top">
                <img src="/digital-building-blocks/sites/download/attachments/791609471/icon-food-future.svg" alt="" aria-hidden="true" />
                <div class="marq-item-inner-top-right">
                  <p class="title">Future of Foor conference</p>
                  <p class="description">Innovation Forum</p>
                </div>
              </div>
              <div class="marq-item-inner-bottom">
                <div class="active-indicator">
                  <p class="dot">•</p>
                  <p>Active</p>
                </div>
              </div>
            </div>
            <div class="marq-item">
              <div class="marq-item-inner-top">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/icon-employee-card.svg"
                  alt="" aria-hidden="true"
                />
                <div class="marq-item-inner-top-right">
                  <p class="title">Employee card</p>
                  <p class="description">Drive</p>
                </div>
              </div>
              <div class="marq-item-inner-bottom">
                <div class="active-indicator">
                  <p class="dot">•</p>
                  <p>Active</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cols">
      <div class="col-12 mobile-view">
        <div class="marq-mobile-double-wrapper">
          <div class="marq-wrapper">
            <div class="marq-container">
              <div class="marq-item">
                <div class="marq-item-inner-top">
                  <img src="/digital-building-blocks/sites/download/attachments/791609471/icon-digital-id.svg" alt="" aria-hidden="true" />
                  <div class="marq-item-inner-top-right">
                    <p class="title">Digital ID</p>
                    <p class="description">Jane Doe</p>
                  </div>
                </div>
                <div class="marq-item-inner-bottom">
                  <div class="active-indicator">
                    <p class="dot">•</p>
                    <p>Active</p>
                  </div>
                </div>
              </div>
              <div class="marq-item">
                <div class="marq-item-inner-top">
                  <img src="/digital-building-blocks/sites/download/attachments/791609471/icon-br-to-fra.svg" alt="" aria-hidden="true" />
                  <div class="marq-item-inner-top-right">
                    <p class="title">BRU to FRA</p>
                    <p class="description">Ease Air</p>
                  </div>
                </div>
                <div class="marq-item-inner-bottom">
                  <div class="active-indicator">
                    <p class="dot">•</p>
                    <p>Active</p>
                  </div>
                </div>
              </div>
              <div class="marq-item">
                <div class="marq-item-inner-top">
                  <img
                    src="/digital-building-blocks/sites/download/attachments/791609471/icon-driving-licence.svg"
                    alt="" aria-hidden="true"
                  />
                  <div class="marq-item-inner-top-right">
                    <p class="title">Driving License</p>
                    <p class="description">AM-B</p>
                  </div>
                </div>
                <div class="marq-item-inner-bottom">
                  <div class="active-indicator">
                    <p class="dot">•</p>
                    <p>Active</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="marq-container" aria-hidden="true">
              <div class="marq-item">
                <div class="marq-item-inner-top">
                  <img src="/digital-building-blocks/sites/download/attachments/791609471/icon-digital-id.svg" alt="" aria-hidden="true" />
                  <div class="marq-item-inner-top-right">
                    <p class="title">Digital ID</p>
                    <p class="description">Jane Doe</p>
                  </div>
                </div>
                <div class="marq-item-inner-bottom">
                  <div class="active-indicator">
                    <p class="dot">•</p>
                    <p>Active</p>
                  </div>
                </div>
              </div>
              <div class="marq-item">
                <div class="marq-item-inner-top">
                  <img src="/digital-building-blocks/sites/download/attachments/791609471/icon-br-to-fra.svg" alt="" aria-hidden="true" />
                  <div class="marq-item-inner-top-right">
                    <p class="title">BRU to FRA</p>
                    <p class="description">Ease Air</p>
                  </div>
                </div>
                <div class="marq-item-inner-bottom">
                  <div class="active-indicator">
                    <p class="dot">•</p>
                    <p>Active</p>
                  </div>
                </div>
              </div>
              <div class="marq-item">
                <div class="marq-item-inner-top">
                  <img
                    src="/digital-building-blocks/sites/download/attachments/791609471/icon-driving-licence.svg"
                    alt="" aria-hidden="true"
                  />
                  <div class="marq-item-inner-top-right">
                    <p class="title">Driving License</p>
                    <p class="description">AM-B</p>
                  </div>
                </div>
                <div class="marq-item-inner-bottom">
                  <div class="active-indicator">
                    <p class="dot">•</p>
                    <p>Active</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="marq-wrapper second-line">
            <div class="marq-container">
              <div class="marq-item">
                <div class="marq-item-inner-top">
                  <img
                    src="/digital-building-blocks/sites/download/attachments/791609471/icon-master-engineering.svg"
                    alt="" aria-hidden="true"
                  />
                  <div class="marq-item-inner-top-right">
                    <p class="title">Master of Engineering</p>
                    <p class="description">
                      Technical University Innsbruck
                    </p>
                  </div>
                </div>
                <div class="marq-item-inner-bottom">
                  <div class="active-indicator">
                    <p class="dot">•</p>
                    <p>Active</p>
                  </div>
                </div>
              </div>
              <div class="marq-item">
                <div class="marq-item-inner-top">
                  <img
                    src="/digital-building-blocks/sites/download/attachments/791609471/icon-gym-membership.svg"
                    alt="" aria-hidden="true"
                  />
                  <div class="marq-item-inner-top-right">
                    <p class="title">Gym Membership</p>
                    <p class="description">Super Fitness</p>
                  </div>
                </div>
                <div class="marq-item-inner-bottom">
                  <div class="active-indicator">
                    <p class="dot">•</p>
                    <p>Active</p>
                  </div>
                </div>
              </div>
              <div class="marq-item">
                <div class="marq-item-inner-top">
                  <img src="/digital-building-blocks/sites/download/attachments/791609471/icon-food-future.svg" alt="" aria-hidden="true" />
                  <div class="marq-item-inner-top-right">
                    <p class="title">Future of Food conference</p>
                    <p class="description">Innovation Forum</p>
                  </div>
                </div>
                <div class="marq-item-inner-bottom">
                  <div class="active-indicator">
                    <p class="dot">•</p>
                    <p>Active</p>
                  </div>
                </div>
              </div>
              <div class="marq-item">
                <div class="marq-item-inner-top">
                  <img
                    src="/digital-building-blocks/sites/download/attachments/791609471/icon-employee-card.svg"
                    alt="" aria-hidden="true"
                  />
                  <div class="marq-item-inner-top-right">
                    <p class="title">Employee card</p>
                    <p class="description">Drive</p>
                  </div>
                </div>
                <div class="marq-item-inner-bottom">
                  <div class="active-indicator">
                    <p class="dot">•</p>
                    <p>Active</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="marq-container" aria-hidden="true">
              <div class="marq-item">
                <div class="marq-item-inner-top">
                  <img
                    src="/digital-building-blocks/sites/download/attachments/791609471/icon-master-engineering.svg"
                    alt="" aria-hidden="true"
                  />
                  <div class="marq-item-inner-top-right">
                    <p class="title">Master of Engineering</p>
                    <p class="description">
                      Technical University Innsbruck
                    </p>
                  </div>
                </div>
                <div class="marq-item-inner-bottom">
                  <div class="active-indicator">
                    <p class="dot">•</p>
                    <p>Active</p>
                  </div>
                </div>
              </div>
              <div class="marq-item">
                <div class="marq-item-inner-top">
                  <img
                    src="/digital-building-blocks/sites/download/attachments/791609471/icon-gym-membership.svg"
                    alt="" aria-hidden="true"
                  />
                  <div class="marq-item-inner-top-right">
                    <p class="title">Gym Membership</p>
                    <p class="description">Super Fitness</p>
                  </div>
                </div>
                <div class="marq-item-inner-bottom">
                  <div class="active-indicator">
                    <p class="dot">•</p>
                    <p>Active</p>
                  </div>
                </div>
              </div>
              <div class="marq-item">
                <div class="marq-item-inner-top">
                  <img src="/digital-building-blocks/sites/download/attachments/791609471/icon-food-future.svg" alt="" aria-hidden="true" />
                  <div class="marq-item-inner-top-right">
                    <p class="title">Future of Foor conference</p>
                    <p class="description">Innovation Forum</p>
                  </div>
                </div>
                <div class="marq-item-inner-bottom">
                  <div class="active-indicator">
                    <p class="dot">•</p>
                    <p>Active</p>
                  </div>
                </div>
              </div>
              <div class="marq-item">
                <div class="marq-item-inner-top">
                  <img
                    src="/digital-building-blocks/sites/download/attachments/791609471/icon-employee-card.svg"
                    alt="" aria-hidden="true"
                  />
                  <div class="marq-item-inner-top-right">
                    <p class="title">Employee card</p>
                    <p class="description">Drive</p>
                  </div>
                </div>
                <div class="marq-item-inner-bottom">
                  <div class="active-indicator">
                    <p class="dot">•</p>
                    <p>Active</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cols">
      <div class="col-12 mobile-view mobile-btn-container">
        <button class="pause-btn pause" aria-label="pause" role="button"></button>
      </div>
    </div>
  </div>
</section>

<section class="section" id="sec-4-the-wallet">
  <div class="container">
    <div class="cols part-1">
      <div class="col-4 left-col">
        <img
          src="/digital-building-blocks/sites/download/attachments/791609471/illu-many-national-wallets.svg"
          alt=""
        />
      </div>
      <div class="col-8 right-col">
        <h2 class="h2">
          One European standard.
          <span class="d-block">Many national wallets</span>
        </h2>
        <p>
          Each Member State will offer its own version of the EU Digital
          Identity Wallets built to the same technical standards and offering
          the same user experience and functionalities, no matter where they are
          used and in which Member State they are issued. The Large Scale Pilots
          are currently testing prototype wallets built using the
          <a
            href="https://ec.europa.eu/digital-building-blocks/sites/display/EUDIGITALIDENTITYWALLET/Technical+Specifications"
            >open specifications and the wallet Reference Implementation.</a
          >
        </p>
        <p>
          Now that Digital Identity Regulation has entered into force, each
          Member State will be obligated to offer at least one wallet to
          citizens, residents, and businesses. Each will be interoperable,
          working with every other national wallet; accepting the same digital
          documents (mobile driving licences, university diplomas etc.) and your
          digital ID (your date of birth, nationality etc.). Every certified
          version of the wallet will be recognized throughout Europe.        
        </p>

        <a
          class="btn outline primary forward"
          href="/digital-building-blocks/sites/display/EUDIGITALIDENTITYWALLET/About+the+initiative"
          onclick="_paq.push(['trackEvent', 'conversion','eudiw-what','what-about-initiative'])"
          ><span>About the initiative</span><span class="ico-cta-forward"></span
        ></a>
      </div>
    </div>
  </div>
</section>

<section class="section" id="sec-3-the-wallet">
  <div class="container desktop-tabs">
    <div class="cols">
      <div class="col-12">
        <h2 class="h2 title">Who is involved in the EU Digital Identity Wallet?</h2>
      </div>
    </div>
  
    <div class="cols">
      <div class="inter">
        <ul class="tabs-select" id="tabs-select" aria-label="how the wallet works tabs" role="tablist">
          <a href="#sec-4-the-wallet" class="skip-tabs" aria-label="skip tabs and go to next section" class="back-to-tabs">Skip tabs</a>
          <button tab-ref="0" class="tab active-tab" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-tab','diagram-tab-who-is'])"><span>tab 1 of 4</span> Who is who?</button>
          <button tab-ref="1" class="tab" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-tab','diagram-tab-who-made'])"><span>tab 2 of 4</span>Who makes the wallet?</button>
          <button tab-ref="2" class="tab" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-tab','diagram-tab-how-setup'])"><span>tab 3 of 4</span>How will I setup my Wallet?</button>
          <button tab-ref="3" class="tab" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-tab','diagram-tab-how-use'])"><span>tab 4 of 4</span>How will I use my Wallet?</button>
        </ul>
  
        <div class="tab-cont active-tab-container tab-1-cont" tabindex="-1">
          <div class="left-col">
            <div class="row-1">
              <div class="item item-1">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-issuer.svg?api=v2"
                  alt=""
                />
                <div class="item-bottom">
                  <button aria-label="Member states popup toggle" class="tab-item-button btn-arch-bottom"  onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-actors','diagram-actors-ms'])">
                    <svg
                      class="svg-x-button"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                    >
                      <path
                        d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                        fill="white"
                      />
                    </svg>
                    <div class="popup">
                      <h4>Member States</h4>
                      <p>They will be legally obligated to offer at least one wallet application to citizens, residents and businesses.</p>
                    </div>
                  </button>
                  <p>Member States</p>
                </div>
              </div>
              <div class="item item-2">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-wallet-provider.svg?api=v2"
                  alt=""
                />
                <div class="item-bottom">
                  <button aria-label="wallet provider popup toggle"  class="tab-item-button btn-arch-bottom" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-actors','diagram-actors-provider'])">
                    <svg
                      class="svg-x-button"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                    >
                      <path
                        d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                        fill="white"
                      />
                    </svg>
                    <div class="popup">
                      <h4>Wallet Provider</h4>
                      <p>
                        They will build the wallet on behalf of Member States and offer it to citizens, residents and businesses. They will also
                        provide ongoing technical support.
                      </p>
                    </div>
                  </button>
                  <p>Wallet Provider</p>
                </div>
              </div>
            </div>
            <div class="row-2">
              <div class="item item-3">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-wallet-user.svg?api=v2"
                  alt="A confident woman who is a user of the EU Digital Identity Wallet."
                />
                <div class="item-bottom">
                  <button aria-label="wallet user popup toggle" class="tab-item-button btn-arch-bottom" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-actors','diagram-actors-user'])">
                    <svg
                      class="svg-x-button"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                    >
                      <path
                        d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                        fill="white"
                      />
                    </svg>
                    <div class="popup">
                      <h4>Wallet User</h4>
                      <p>
                        You will be able to identify and authenticate yourself with your wallet as 
                        well as store and share important documents we call Electronic attestations of attributes, or credentials</p>
                    </div>
                  </button>
                  <p>Wallet User</p>
                </div>
              </div>
            </div>
            <div class="row-3">
              <div class="item item-4">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-attestation-issuer.svg?api=v2"
                  alt="An official building representing Personal Identity Data Issuers."
                />
                <div class="item-bottom">
                  <button aria-label="Issuers of Digital ID / Digital Documents popup toggle" class="tab-item-button btn-arch-top" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-actors','diagram-actors-issuer'])">
                    <svg
                      class="svg-x-button"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                    >
                      <path
                        d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                        fill="white"
                      />
                    </svg>
                    <div class="popup">
                      <h4>Issuers of Digital ID / Digital Documents 
                        <span>(e.g. credentials / attestations of attributes)</span>
                        </h4>
                      <p>
                        Any trusted organisation that can issue your
                        Digital ID and/or Digital Documents. Digital Documents
                        can  be either Qualified (official documents, with measures to ensure their authenticity, 
                        like social security documents and mobile driving licences, etc.) 
                        or non-Qualified (gym membership card, train tickets etc.).
                      </p>
                    </div>
                  </button>
                  <p>Issuers of Digital ID / Digital Documents
                    <span>(e.g. credentials / attestations of attributes)</span></p>
                </div>
              </div>
              <div class="item item-5">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-relying-party.svg?api=v2"
                  alt="Buildings that represent Service Providers."
                />
                <div class="item-bottom">
                  <button aria-label="service provider popup toggle" class="tab-item-button btn-arch-top" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-actors','diagram-actors-rp'])">
                    <svg
                      class="svg-x-button"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                    >
                      <path
                        d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                        fill="white"
                      />
                    </svg>
                    <div class="popup">
                      <h4>Service Provider</h4>
                      <p>
                        Service Providers are any public or private organisation that relies on information 
                        from the wallet and requests identification and authentication from Wallet Users. 
                        Also known as Relying Parties, Service Providers can be everything from Member 
                        States to banks, to universities, to pharmacies. They will request your Digital 
                        ID and/or Digital Documents to verify your identity and other claims when you access their services.
                      </p>
                    </div>
                  </button>
                  <p>Service Provider</p>
                </div>
              </div>
            </div>
          </div>
          <div class="right-col">
            <p>Types of data that can be loaded in the Wallet:</p>
            <div class="item item-6">
              <img
                src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-pid.svg?api=v2"
                alt="Digital ID being shared via a phone application."
              />
              <div class="item-bottom">
                <button aria-label="personal identification data popup toggle" class="tab-item-button btn-arch-left" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-actors','diagram-actors-pid'])">
                  <svg
                    class="svg-x-button"
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                  >
                    <path
                      d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                      fill="white"
                    />
                  </svg>
                  <div class="popup">
                    <h4>Digital ID</h4>
                    <p>Personal information like your name and date of birth used for identification. Your wallet will require this data before any Digital Documents can be loaded into it.</p>
                  </div>
                </button>
                <p>Digital ID</p>
              </div>
            </div>
            <div class="item item-7">
              <img
                src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-attestation-digital.svg?api=v2"
                alt="digital documents stored on a phone."
              />
              <div class="item-bottom">
                <button aria-label="attestations popup toggle" class="tab-item-button btn-arch-left" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-actors','diagram-actors-attestations'])">
                  <svg
                    class="svg-x-button"
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                  >
                    <path
                      d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                      fill="white"
                    />
                  </svg>
                  <div class="popup">
                    <h4>Digital Documents
                      <span>(e.g. credentials / attestations of attributes)</span></h4>
                    <p>These are also called Attestation of Attributes in the regulation. They come in 2 forms: <br /><br />
                      Qualified Electronic Attestation of Attributes(QEAA):
                      <br />
                      Digital Documents (Attestations) that are issued by an organisation that has 
                      performed additional steps to ensure its trustworthiness. 
                      This is a Qualified Trust Service Provider, a concept defined 
                      in the <a href="https://digital-strategy.ec.europa.eu/en/policies/eidas-regulation" target="_blank"> eIDAS Regulation</a>. Typically, these will be 
                      documents that are more official, for example, a social security 
                      document issued by a governmental entity. QEAAs have the same legal 
                      validity as a paper document.<br /><br />
                      Electronic Attestation of Attributes (EAA): Documents that 
                      are not issued by a Qualified Trust Service Provider, and so, 
                      don't have to abide by as many rules. Typically these are less 
                      sensitive documents like a gym membership card or train tickets. <br/>
                      EAAs do not have the same legal validity as a paper document.
                    </p>
                  </div>
                </button>
                <p>Digital Documents <span>(e.g. credentials / attestations of attributes)</span></p>
              </div>
            </div>
          </div>
        </div>
  
        <div class="tab-cont tab-2-cont" tabindex="-1">
          <div class="one-col">
            <div class="row-1">
              <div class="item item-1">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-issuer.svg?api=v2"
                  alt=""
                />
                <div class="item-bottom">
                  <button aria-label="member states popup toggle" class="tab-item-button btn-arch-bottom" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-made','diagram-made-ms'])">
                    <svg
                      class="svg-x-button"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                    >
                      <path
                        d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                        fill="white"
                      />
                    </svg>
                    <div class="popup">
                      <h4>Member States</h4>
                      <p>Member States will mandate at least one Wallet Provider to build a wallet within a certain timeline that will be defined in legislation.</p>
                    </div>
                  </button>
                  <p>Member States</p>
                </div>
              </div>
              <div class="lines lines-1">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-mandate-arrow-right-straight.svg?api=v2"
                  alt=""
                />
              </div>
              <div class="item item-2">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-wallet-provider.svg?api=v2"
                  alt=""
                />
                <div class="item-bottom">
                  <button aria-label="wallet provider popup toggle" class="tab-item-button btn-arch-bottom" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-made','diagram-made-provider'])">
                    <svg
                      class="svg-x-button"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                    >
                      <path
                        d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                        fill="white"
                      />
                    </svg>
                    <div class="popup">
                      <h4>Wallet Provider</h4>
                      <p>The Wallet Provider will build the wallet to specifications defined and agreed on at the EU level and make it available for you to download.</p>
                    </div>
                  </button>
                  <p>Wallet Provider</p>
                </div>
              </div>
            </div>
            <div class="row-2">
              <div class="item-placeholder"></div>
              <div class="item item-3">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-wallet-user.svg?api=v2"
                  alt="A confident woman who is a user of the EU Digital Identity Wallet."
                />
                <div class="item-bottom">
                  <button aria-label="wallet user popup toggle" class="tab-item-button btn-arch-bottom" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-actors','diagram-actors-user'])">
                    <svg
                      class="svg-x-button"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                    >
                      <path
                        d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                        fill="white"
                      />
                    </svg>
                    <div class="popup">
                      <h4>Wallet User</h4>
                      <p>
                        The Wallet User downloads and uses the finished wallet once it is available.
                      </p>
                    </div>
                  </button>
                  <p>Wallet User</p>
                </div>
              </div>
              <div class="lines lines-2">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-serve-top-bottom-from-right.svg?api=v2"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
  
        <!-- tab 3 -->
        <div class="tab-cont tab-3-cont" tabindex="-1">
          <div class="one-col">
            <!-- ROW 3 -->
            <div class="row-1">
              <div class="item-placeholder"></div>
              <div class="lines lines-1">
                <div class="item item-no-image">
                  <div class="item-bottom">
                    <button aria-label="1. download popup toggle" class="tab-item-button btn-arch-bottom" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how','diagram-how-serve'])">
                      <svg
                        class="svg-x-button"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                      >
                        <path
                          d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                          fill="white"
                        />
                      </svg>
                      <div class="popup">
                        <h4>1. Download</h4>
                        <p>
                          You will download your local version of the wallet app
                          from a major app store.
                        </p>
                      </div>
                    </button>
                    <p>1. Download</p>
                  </div>
                </div>
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-arrow-top-bottom-from-left.svg?api=v2"
                  alt=""
                />
              </div>
              <div class="item item-1 item-no-button">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-wallet-provider.svg?api=v2"
                  alt=""
                />
                <div class="item-bottom">
                  <button aria-label="wallet provider popup toggle" class="tab-item-button" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-actors','diagram-actors-provider'])">
                    <svg
                      class="svg-x-button"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                    >
                      <path
                        d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                        fill="white"
                      />
                    </svg>
                    <div class="popup">
                      <h4>Wallet Provider</h4>
                      <p>
                        You will be able to identify and authenticate yourself with your wallet as 
                        well as store and share important documents we call Electronic attestations of attributes, or credentials</p>
                    </div>
                  </button>
                  <p>Wallet Provider</p>
                </div>
              </div>
            </div>
  
            <!-- ROW 2 -->
            <div class="row-2">
              <div class="lines lines-2">
                <div class="item item-no-image">
                  <div class="item-bottom">
                    <button aria-label="2. issue popup toggle" class="tab-item-button btn-arch-right" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how','diagram-how-issue'])">
                      <svg
                        class="svg-x-button"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                      >
                        <path
                          d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                          fill="white"
                        />
                      </svg>
                      <div class="popup">
                        <h4>2. Issue</h4>
                        <p>
                          After the initial setup your wallet will need to
                          identify you by connecting to a Digital ID Issuer, a specific
                          entity appointed by your Member State.
                        </p>
                      </div>
                    </button>
                    <p>2. Issue</p>
                  </div>
                </div>
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-arrow-top-bottom-from-left.svg?api=v2"
                  alt=""
                />
              </div>
              <div class="item item-2 item-no-button">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-wallet-user.svg?api=v2"
                  alt="A confident woman who is a user of the EU Digital Identity Wallet."
                />
                <div class="item-bottom">
                  <button aria-label="wallet user popup toggle" class="tab-item-button">
                    <svg
                      class="svg-x-button"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                    >
                      <path
                        d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                        fill="white"
                      />
                    </svg>
                    <div class="popup">
                      <h4>Wallet User</h4>
                      <p>
                        The Wallet User downloads and uses the finished wallet once it is available.
                      </p>
                    </div>
                  </button>
                  <p>Wallet User</p>
                </div>
              </div>
              <div class="item item-4 item-no-image">
                <div class="item-bottom text-before">
                  <button aria-label="4. present popup toggle" class="tab-item-button btn-arch-bottom" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how','diagram-how-present'])">
                    <svg
                      class="svg-x-button"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                    >
                      <path
                        d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                        fill="white"
                      />
                    </svg>
                    <div class="popup">
                      <h4>4. Present</h4>
                      <p>
                        Your wallet can now identify and authenticate you. You can
                        now use it to access a range of services from Service Providers, as well as request and store Digital Documents like
                        your university diplomas or gym memberships.
                      </p>
                    </div>
                  </button>
                  <p>4. Present</p>
                </div>
              </div>
            </div>
  
            <!-- ROW 3 -->
            <div class="row-3">
              <div class="item item-3 item-no-button">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-attestation-issuer.svg?api=v2"
                  alt="An official building representing Personal Identity Data Issuers."
                />
                <div class="item-bottom">
                  <button aria-label="wallet user popup toggle" class="tab-item-button">
                    <svg
                      class="svg-x-button"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                    >
                      <path
                        d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                        fill="white"
                      />
                    </svg>
                    <div class="popup">
                      <h4>Wallet User</h4>
                      <p>The Wallet User downloads and uses the finished wallet once it is available.</p>
                    </div>
                  </button>
                  <p>Issuers of Digital ID / Digital Documents
                    <span>(e.g. credentials / attestations of attributes)</span></p>
                </div>
              </div>
              <div class="lines lines-3">
                <div class="pid-image">
                  <img
                    src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-pid.svg?api=v2"
                    alt=""
                  />
                </div>
                <div class="item item-no-image">
                  <div class="item-bottom text-before">
                    <button aria-label="3. authenticate popup toggle" class="tab-item-button btn-arch-top" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how','diagram-how-authenticate'])">
                      <svg
                        class="svg-x-button"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                      >
                        <path
                          d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                          fill="white"
                        />
                      </svg>
                      <div class="popup">
                        <h4>3. Authenticate</h4>
                        <p>
                          The Digital ID Issuer will authenticate your identity and issue
                          your Digital ID to your wallet. The 
                          authenticity of your Digital ID will be verified by Service Providers thanks to the wallet's Trust System.
                        </p>
                      </div>
                    </button>
                    <p>3. Authenticate</p>
                  </div>
                </div>
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-arrow-bottom-top-from-right.svg?api=v2"
                  alt=""
                />
              </div>
              <div class="item-placeholder"></div>
            </div>
          </div>
        </div>
  
        <!-- tab 4 -->
        <div class="tab-cont tab-4-cont" tabindex="-1">
          <div class="tab-4-1">
            <div class="left-col txt-col">
              <h4>Access public sector services</h4>
              <p>
                Many Member States offer digital portals for public sector services, where you can 
                access information as well as a range of services.
              </p>
            </div>
            <div class="right-col graph-col">
              <div class="row-1">
                <div class="item item-1 item-no-button">
                  <div class="item item-2 item-no-image">
                    <div class="item-bottom">
                      <button aria-label="3. access popup toggle" class="tab-item-button btn-arch-bottom" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-access'])"">
                        <svg
                          class="svg-x-button"
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                        >
                          <path
                            d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                            fill="white"
                          />
                        </svg>
                        <div class="popup">
                          <h4>3. Access</h4>
                          <p>
                            Once verified you will be able to access the public sector services available in the portal.
                          </p>
                        </div>
                      </button>
                      <p>3. Access</p>
                    </div>
                  </div>
                  <img
                    src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-wallet-user.svg?api=v2"
                    alt="A confident woman who is a user of the EU Digital Identity Wallet."
                  />
                  <div class="item-bottom">
                    <button aria-label="wallet user popup toggle" class="tab-item-button btn-arch-bottom">
                      <svg
                        class="svg-x-button"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                      >
                        <path
                          d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                          fill="white"
                        />
                      </svg>
                      <div class="popup">
                        <h4>Wallet User</h4>
                        <p>The Wallet User downloads and uses the finished wallet once it is available.</p>
                      </div>
                    </button>
                    <p>Wallet User</p>
                  </div>
                </div>
                <div class="lines lines-1">
                  <img
                    class="line-image"
                    src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-serve-top-bottom-from-right-above.svg?api=v2"
                    alt=""
                  />
                  <div class="item item-3 item-no-image">
                    <div class="item-bottom text-before">
                      <button aria-label="1. authenticate popup toggle" class="tab-item-button btn-arch-bottom" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-authenticate'])">
                        <svg
                          class="svg-x-button"
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                        >
                          <path
                            d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                            fill="white"
                          />
                        </svg>
                        <div class="popup">
                          <h4>1. Authenticate</h4>
                          <p>
                            Authenticate yourself to your public 
                            sector services portal by sharing 
                            your Digital ID from your wallet. 
                          </p>
                        </div>
                      </button>
                      <p>1. Authenticate</p>
                    </div>
                  </div>
                  <img
                    class="pid-image"
                    src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-pid.svg?api=v2"
                    alt=""
                  />
                </div>
              </div>
  
              <!-- row 2 -->
              <div class="row-2">
                <div class="lines lines-2">
                  <img
                    class="line-image"
                    src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-arrow-bottom-top-from-left-down.svg?api=v2"
                    alt=""
                  />
                  <div class="item item-4 item-no-image">
                    <div class="item-bottom text-before">
                      <button aria-label="2. verify popup toggle" class="tab-item-button btn-arch-top" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-verify'])">
                        <svg
                          class="svg-x-button"
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                        >
                          <path
                            d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                            fill="white"
                          />
                        </svg>
                        <div class="popup">
                          <h4>2. Verify</h4>
                          <p>
                            After verifying the data you shared, your
                            public sector services portal will grant you access. No extra
                            action needed from you.
                          </p>
                        </div>
                      </button>
                      <p>2. Verify</p>
                    </div>
                  </div>
                </div>
                <div class="item item-no-button item-5">
                  <img
                    src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-relying-party.svg?api=v2"
                    alt="Buildings that represent service provider."
                  />
                  <div class="item-bottom">
                    <button aria-label="service provider popup toggle" class="tab-item-button">
                      <svg
                        class="svg-x-button"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                      >
                        <path
                          d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                          fill="white"
                        />
                      </svg>
                      <div class="popup">
                        <h4>Service Provider</h4>
                        <p>Any public or private organisation that requests identification and authentication from Wallet Users. Reeling Parties can be everything from Member States, to banks, to universities, to pharmacies. They will request your Digital ID and/or Digital Credentials  to verify your identity and other claims when you access their services.</p>
                      </div>
                    </button>
                    <p>Service Provider</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- end of tab 4 1 -->
  
          <!-- tab 4 2 -->
          <div class="tab-4-2">
            <div class="left-col graph-col">
              <!-- row 1 -->
              <div class="row-1">
                <div class="lines lines-1">
                  <img
                    class="line-image"
                    src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-arrow-top-bottom-from-left.svg?api=v2"
                    alt=""
                  />
                  <div class="item item-1 item-no-image">
                    <div class="item-bottom">
                      <button aria-label="1.request popup toggle" class="tab-item-button btn-arch-bottom" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-request'])">
                        <svg
                          class="svg-x-button"
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                        >
                          <path
                            d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                            fill="white"
                          />
                        </svg>
                        <div class="popup">
                          <h4>1. Request</h4>
                          <p>
                            Depending on your country, you'll be able to request
                            your mobile driving license either online or in person
                            from the local entity responsible. To verify who you
                            are, you will be requested to share your Digital ID.
                          </p>
                        </div>
                      </button>
                      <p>1. Request</p>
                    </div>
                  </div>
                </div>
                <div class="item item-2 item-no-button">
                  <img
                    src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-wallet-user.svg?api=v2"
                    alt="A confident woman who is a user of the EU Digital Identity Wallet."
                  />
                  <div class="item-bottom">
                    <button aria-label="wallet user popup toggle" class="tab-item-button">
                      <svg
                        class="svg-x-button"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                      >
                        <path
                          d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                          fill="white"
                        />
                      </svg>
                      <div class="popup">
                        <h4></h4>
                        <p></p>
                      </div>
                    </button>
                    <p>Wallet User</p>
                  </div>
                </div>
                <div class="lines lines-2">
                  <img
                    class="line-image"
                    src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-serve-top-bottom-from-right-above.svg?api=v2"
                    alt=""
                  />
                  <img
                    class="abs-image-inside-line"
                    src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-document-txt-bottom.svg?api=v2"
                    alt=""
                  />
                  <div class="item item-3 item-no-image">
                    <div class="item-bottom text-before">
                      <button aria-label="3. store popup toggle" class="tab-item-button btn-arch-bottom" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-store'])">
                        <svg
                          class="svg-x-button"
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                        >
                          <path
                            d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                            fill="white"
                          />
                        </svg>
                        <div class="popup">
                          <h4>3. Store</h4>
                          <p>
                            You will be notified that your driving license was
                            successfully uploaded to your wallet and is now ready
                            to be used.
                          </p>
                        </div>
                      </button>
                      <p>3. Store</p>
                    </div>
                  </div>
                  <div class="item item-4 item-no-image">
                    <div class="item-bottom text-before">
                      <button aria-label="4. present popup toggle" class="tab-item-button btn-arch-bottom" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-present'])">
                        <svg
                          class="svg-x-button"
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                        >
                          <path
                            d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                            fill="white"
                          />
                        </svg>
                        <div class="popup">
                          <h4>4. Present</h4>
                          <p>
                            You can now access your mobile driving license on your
                            wallet application and share when needed, like the
                            next time you rent a car.
                          </p>
                        </div>
                      </button>
                      <p>4. Present</p>
                    </div>
                  </div>
                </div>
              </div>
              <!-- row 2 -->
              <div class="row-2">
                <div class="item item-5 item-no-button">
                  <img
                    src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-attestation-issuer.svg?api=v2"
                    alt="An official building representing Personal Identity Data Issuers."
                  />
                  <div class="item-bottom">
                    <button aria-label="Digital Credential issuers popup toggle" class="tab-item-button">
                      <svg
                        class="svg-x-button"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                      >
                        <path
                          d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                          fill="white"
                        />
                      </svg>
                      <div class="popup">
                        <h4></h4>
                        <p></p>
                      </div>
                    </button>
                    <p>Issuers of Digital ID / Digital Documents
                      <span>(e.g. credentials / attestations of attributes)</span></p>
                  </div>
                </div>
                <div class="lines lines-3">
                  <img
                    src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-document-txt-top.svg?api=v2"
                    class="abs-image-inside-line"
                    alt=""
                  />
                  <img
                    class="line-image"
                    src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-arrow-bottom-top-from-right.svg?api=v2"
                    alt=""
                  />
                  <div class="item item-6 item-no-image">
                    <div class="item-bottom text-before">
                      <button aria-label="2. issue popup toggle" class="tab-item-button btn-arch-top" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-issue'])">
                        <svg
                          class="svg-x-button"
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                        >
                          <path
                            d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                            fill="white"
                          />
                        </svg>
                        <div class="popup">
                          <h4>2. Issue</h4>
                          <p>
                            Once your Digital ID is verified, your local entity
                            will issue your driving license to your wallet
                            application.
                          </p>
                        </div>
                      </button>
                      <p>2. Issue</p>
                    </div>
                  </div>
                </div>
                <div class="item item-7 item-no-button">
                  <img
                    src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-relying-party.svg?api=v2"
                    alt="Buildings that represent service provider."
                  />
                  <div class="item-bottom">
                    <button aria-label="service provider popup toggle" class="tab-item-button">
                      <svg
                        class="svg-x-button"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                      >
                        <path
                          d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                          fill="white"
                        />
                      </svg>
                      <div class="popup">
                        <h4></h4>
                        <p></p>
                      </div>
                    </button>
                    <p>Service Provider</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="right-col txt-col">
              <h4>Request a Mobile Driving Licence</h4>
              <p>
                Mobile Driving Licences (mDL) are digital versions of your driving
                licences that hold the same legal validity as a paper document. 
                This is a type of Digital Document that we call Qualified Electronic Attestations of Attributes.
              </p>
            </div>
          </div>
  
          <!-- end of tab 4-2 -->
  
          <!-- tab 4 3 -->
          <div class="tab-4-3">
            <div class="left-col txt-col">
              <h4>Sign a Contract</h4>
              <p>
                In addition to its other features, your wallet can provide a
                secure legally binding e-signature to any document — for example a
                new employment contract.
              </p>
            </div>
            <div class="right-col graph-col">
              <!-- row 1 -->
              <div class="row-1">
                <div class="item item-1 item-no-button">
                  <img
                    src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-wallet-user.svg?api=v2"
                    alt="A confident woman who is a user of the EU Digital Identity Wallet."
                  />
                  <div class="item-bottom">
                    <button aria-label="wallet user popup toggle" class="tab-item-button">
                      <svg
                        class="svg-x-button"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                      >
                        <path
                          d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                          fill="white"
                        />
                      </svg>
                      <div class="popup">
                        <h4>Wallet User</h4>
                        <p>The Wallet User downloads and uses the finished wallet once it is available.</p>
                      </div>
                    </button>
                    <p>Wallet User</p>
                  </div>
  
                  <div class="item item-2 item-no-image">
                    <div class="item-bottom">
                      <button aria-label="2. view and sign popup toggle" class="tab-item-button btn-arch-bottom" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-view-sign'])">
                        <svg
                          class="svg-x-button"
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                        >
                          <path
                            d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                            fill="white"
                          />
                        </svg>
                        <div class="popup">
                          <h4>2. View and sign</h4>
                          <p>
                            After opening and authenticating yourself to your
                            wallet, you can view the document sent to you. After
                            agreeing, your wallet will generate a secure
                            e-signature that is legally valid.
                          </p>
                        </div>
                      </button>
                      <p>2. View and sign</p>
                    </div>
                  </div>
                </div>
                <div class="lines lines-1">
                  <img
                    class="line-image"
                    src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-serve-bottom-top-from-right-above.svg"
                    alt=""
                  />
                  <div class="item item-3 item-no-image">
                    <div class="item-bottom text-before">
                      <button aria-label="1. contract sent popup toggle" class="tab-item-button btn-arch-bottom" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-contract-sent'])">
                        <svg
                          class="svg-x-button"
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                        >
                          <path
                            d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                            fill="white"
                          />
                        </svg>
                        <div class="popup">
                          <h4>1. Contract Sent</h4>
                          <p>
                            A new employer will send a contract document to be
                            signed to your wallet.
                          </p>
                        </div>
                      </button>
                      <p>1. Contract Sent</p>
                    </div>
                  </div>
                  <img
                    class="abs-image-inside-line"
                    src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-contract.svg?api=v2"
                    alt=""
                  />
                </div>
              </div>
              <!-- row 2 -->
              <div class="row-2">
                <div class="lines lines-2">
                  <img
                    src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-serve-top-bottom-from-left-down.svg?api=v2"
                    alt=""
                    class="line-image"
                  />
                  <img
                    class="abs-image-inside-line"
                    src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-contract.svg?api=v2"
                    alt=""
                  />
                  <div class="item item-4 item-no-image">
                    <div class="item-bottom">
                      <button aria-label="3. contract sent back popup toggle" class="tab-item-button btn-arch-top" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-contract-sent-back'])">
                        <svg
                          class="svg-x-button"
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                        >
                          <path
                            d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                            fill="white"
                          />
                        </svg>
                        <div class="popup">
                          <h4>3. Contract sent back</h4>
                          <p>
                            A copy will be sent to your employer, and also stored
                            on your phone. Congratulations, you've just signed a
                            new employment contract!
                          </p>
                        </div>
                      </button>
                      <p>3. Contract sent back</p>
                    </div>
                  </div>
                </div>
                <div class="item-5 item item-no-button">
                  <img
                    src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-relying-party.svg?api=v2"
                    alt="Buildings that represent service provider."
                  />
                  <div class="item-bottom">
                    <button aria-label="service provider popup toggle" class="tab-item-button">
                      <svg
                        class="svg-x-button"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                      >
                        <path
                          d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z"
                          fill="white"
                        />
                      </svg>
                      <div class="popup">
                        <h4>Service Provider</h4>
                        <p>Service Providers are any public or private organisation that relies on 
                          information from the wallet and requests identification and authentication 
                          from Wallet Users. Also known as Relying Parties, Service Providers can be 
                          everything from Member States to banks, to universities, to pharmacies. 
                          They will request your Digital ID and/or Digital Documents to verify your 
                          identity and other claims when you access their services.</p>
                      </div>
                    </button>
                    <p>Service Provider</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- end of tab 4 3 -->
        </div>
      </div>
      <!-- end of desktop view -->
    </div>
    <a href="#tabs-select" class="back-to-tabs">Go back to tab select</a>
  </div> 

  <!--  -->
  <!-- start of mobile view -->
  <div class="container mobile-tabs">
    <div class="cols">
      <div class="col-12">
        <h2 class="title">How does the European Digital Identity Wallet work?</h2>
      </div>
    </div>
    <div class="cols">
      <!-- dropdown -->
      <div class="sec-3-dropdown-container">
        <div class="helper-1"></div>
        <div class="sec-3-dropdown">
          <button class="dropdown-placeholder" aria-label="toggle dropdown" id="dropdown-placeholder">
            <div class="active-option option placeholder-text"></div>
            <img
              class="placeholder-arrow"
              src="/digital-building-blocks/sites/download/attachments/791609471/icon-expand-less.svg?api=v2"
              alt=""
            />
          </button>
          <ul class="all-options" aria-label="select tab dropdown list" role="tablist">
            <button option-ref="0" aria-selected="true" class="option-select option active-option" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-tab','diagram-tab-who-is'])">
              <span>1 of 4</span>
              <p class="text-content">Who is who</p>
              <img
                src="/digital-building-blocks/sites/download/attachments/791609471/icon-check.svg?api=v2"
                alt=""
              />
            </button>
            <button option-ref="1" aria-selected="false" class="option-select option" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-tab','diagram-tab-who-made'])">
              <span>2 of 4</span>
              <p class="text-content">Who makes the wallet</p>
              <img
                src="/digital-building-blocks/sites/download/attachments/791609471/icon-check.svg?api=v2"
                alt=""
              />
            </button>
            <button option-ref="2" aria-selected="false" class="option-select option" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-tab','diagram-tab-how-setup'])">
              <span>3 of 4</span>
              <p class="text-content">How will I set up my Wallet</p>
              <img
                src="/digital-building-blocks/sites/download/attachments/791609471/icon-check.svg?api=v2"
                alt=""
              />
            </button>
            <button option-ref="3" aria-selected="false" class="option-select option" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-tab','diagram-tab-how-use'])">
              <span>4 of 4</span>
              <p class="text-content">How will I use my Wallet</p>
              <img
                src="/digital-building-blocks/sites/download/attachments/791609471/icon-check.svg?api=v2"
                alt=""
              />
            </button>
          </ul>
        </div>
      </div>
  
      <!-- tab 1 -->
      <div class="m-tab-1 tab-item tab-open" option-ref="1">
        <div class="light-back">
          <div class="item item-1">
            <img
              src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-issuer.svg?api=v2"
              alt=""
            />
            <div class="item-bottom">
              <button class="item-button" aria-label="member states popup button" overlay-ref="0" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-actors','diagram-actors-ms'])">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/icon-plus.svg?api=v2"
                  alt=""
                />
              </button>
              <p class="item-txt">Member States</p>
            </div>
            <div class="sec-3-overlay fixed-pos" overlay-ref="0">
              <div class="sec-3-popup" aria-label="popup">
                <div class="popup-title-cont">
                  <h4 tabindex="1">Member States</h4>
                  <button tabindex="0" class="close-popup-btn" aria-label="close modal button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                        fill="#0E47CB" />
                    </svg>
                  </button>
                </div>
                <p>
                  They will be legally obligated to offer at least one wallet
                  application to citizens, residents and businesses
                </p>
              </div>
            </div>
          </div>
          <div class="item item-2">
            <img
              src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-wallet-provider.svg?api=v2"
              alt=""
            />
            <div class="item-bottom">
              <button class="item-button" aria-label="wallet provider popup button" overlay-ref="1" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-actors','diagram-actors-provider'])">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/icon-plus.svg?api=v2"
                  alt=""
                />
              </button>
              <p class="item-txt">Wallet Provider</p>
            </div>
            <div class="sec-3-overlay fixed-pos" overlay-ref="1">
              <div class="sec-3-popup" aria-label="popup">
                <div class="popup-title-cont">
                  <h4>Wallet Provider</h4>
                  <button class="close-popup-btn" aria-label="close modal button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                        fill="#0E47CB" />
                    </svg>
                  </button>
                </div>
                <p>
                  They will build the wallet on behalf of Member States and offer it to citizens, residents and businesses. They will also
                  provide ongoing technical support.
                </p>
              </div>
            </div>
          </div>
          <div class="item item-3">
            <img
              src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-wallet-user.svg?api=v2"
              alt="A confident woman who is a user of the EU Digital Identity Wallet."
            />
            <div class="item-bottom">
              <button class="item-button" aria-label="wallet user popup button" overlay-ref="2" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-actors','diagram-actors-user'])">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/icon-plus.svg?api=v2"
                  alt=""
                />
              </button>
              <p class="item-txt">Wallet User</p>
            </div>
            <div class="sec-3-overlay fixed-pos" overlay-ref="2">
              <div class="sec-3-popup" aria-label="popup">
                
                <div class="popup-title-cont">
                  <h4>Wallet User</h4>
                  <button class="close-popup-btn" aria-label="close modal button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                        fill="#0E47CB" />
                    </svg>
                  </button>
                </div>
                <p>
                  You will be able to identify and authenticate yourself with your wallet as 
                  well as store and share important documents we call Electronic attestations of attributes, or credentials</p>
              </div>
            </div>
          </div>
          <div class="item item-4" >
            <img
              src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-attestation-issuer.svg?api=v2"
              alt="An official building representing Personal Identity Data Issuers."
            />
            <div class="item-bottom">
              <button class="item-button" aria-label="Issuers of Digital ID / Digital Documents popup button" overlay-ref="3" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-actors','diagram-actors-issuer'])">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/icon-plus.svg?api=v2"
                  alt=""
                />
              </button>
              <p class="item-txt">Issuers of Digital ID / Digital Documents
                <span>(e.g. credentials / attestations of attributes)</span></p>
            </div>
            <div class="sec-3-overlay fixed-pos" overlay-ref="3">
              <div class="sec-3-popup" aria-label="popup">
               
                <div class="popup-title-cont">
                  <h4>Issuers of Digital ID / Digital Documents
                    <span>(e.g. credentials / attestations of attributes)</span></h4>
                  <button class="close-popup-btn" aria-label="close modal button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                        fill="#0E47CB" />
                    </svg>
                  </button>
                </div>
                <p>
                  Any trusted organisation that can issue your Digital ID and/or Digital Documents. Digital Documents can be either Qualified (official documents, with measures to ensure their authenticity, 
                  like social security documents and mobile driving licences, etc.) 
                  or non-Qualified (gym membership card, train tickets etc.).
                </p>
              </div>
            </div>
          </div>
          <div class="item item-5" >
            <img
              src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-relying-party.svg?api=v2"
              alt="Buildings that represent service providers"
            />
            <div class="item-bottom">
              <button class="item-button" aria-label="service provider popup button" overlay-ref="4" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-actors','diagram-actors-rp'])">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/icon-plus.svg?api=v2"
                  alt=""
                />
              </button>
              <p class="item-txt">Service Provider</p>
            </div>
            <div class="sec-3-overlay fixed-pos" overlay-ref="4">
              <div class="sec-3-popup" aria-label="popup">
                <div class="popup-title-cont">
                  <h4>Service Provider</h4>
                  <button class="close-popup-btn" aria-label="close modal button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                        fill="#0E47CB" />
                    </svg>
                  </button>
                </div>
                <p>
                  Service Providers are any public or private organisation that relies on information 
                  from the wallet and requests identification and authentication from Wallet Users. 
                  Also known as Relying Parties, Service Providers can be everything from Member 
                  States to banks, to universities, to pharmacies. They will request your Digital 
                  ID and/or Digital Documents to verify your identity and other claims when you access their services.
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="dark-back">
          <p>
            Types of data that can be <br />
            loaded in the Wallet:
          </p>
          <div class="item item-6">
            <img
              src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-pid.svg?api=v2"
              alt="Digital ID being shared via a phone application."
            />
            <div class="item-bottom">
              <button class="item-button" aria-label="Digital ID popup button" overlay-ref="5" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-actors','diagram-actors-pid'])">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/icon-plus.svg?api=v2"
                  alt=""
                />
              </button>
              <p class="item-txt">Digital ID</p>
            </div>
            
            <div class="sec-3-overlay fixed-pos" overlay-ref="5">
              <div class="sec-3-popup" aria-label="popup">
                <div class="popup-title-cont">
                  <h4>Digital ID</h4>
                  <button class="close-popup-btn" aria-label="close modal button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                        fill="#0E47CB" />
                    </svg>
                  </button>
                </div>
                <p>Personal information like your name and date of birth used for identification. Your wallet will require this data before any  Digital Documents can be loaded into it.</p>
              </div>
            </div>
          </div>
          <div class="item item-7">
            <img
              src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-attestation-digital.svg?api=v2"
              alt="A digital credential stored on a phone. "
            />
            <div class="item-bottom">
              <button class="item-button" aria-label="Digital Credential popup button" overlay-ref="6" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-actors','diagram-actors-attestations'])">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/icon-plus.svg?api=v2"
                  alt=""
                />
              </button>
              <p class="item-txt">Digital Documents
                <span>(e.g. credentials / attestations of attributes)</span></p>
            </div>
            <div class="sec-3-overlay fixed-pos" overlay-ref="6">
              <div class="sec-3-popup" aria-label="popup">
                <div class="popup-title-cont">
                  <h4>Digital Documents
                    <span>(e.g. credentials / attestations of attributes)</span></h4>
                  <button class="close-popup-btn" aria-label="close modal button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                        fill="#0E47CB" />
                    </svg>
                  </button>
                </div>
                <p>These are also called Attestation of Attributes in the regulation. They come in 2 forms: <br /><br />
                  Qualified Digital Credential of Attributes (QEAA):
                  <br />
                  Digital Documents (Attestations) that are issued by an organisation that has 
                  performed additional steps to ensure its trustworthiness. 
                  This is a Qualified Trust Service Provider, a concept defined 
                  in the <a href="https://digital-strategy.ec.europa.eu/en/policies/eidas-regulation" target="_blank">eIDAS Regulation</a>. Typically, these will be 
                  documents that are more official, for example, a social security 
                  document issued by a governmental entity. QEAAs have the same legal 
                  validity as a paper document.<br /><br />
                  Electronic Attestation of Attributes (EAA): Documents that 
                  are not issued by a Qualified Trust Service Provider, and so, 
                  don't have to abide by as many rules. Typically these are less 
                  sensitive documents like a gym membership card or train tickets. <br/>
                  EAAs do not have the same legal validity as a paper document.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end of tab 1 -->
  
      <!-- tab 2 -->
      <div class="m-tab-2 tab-item" option-ref="1" >
        <div class="light-back">
          <div class="item item-1">
            <img
              src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-issuer.svg?api=v2"
              alt=""
            />
            <div class="item-bottom">
              <button class="item-button" aria-label="member states popup button" overlay-ref="7" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-made','diagram-made-ms'])">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/icon-plus.svg?api=v2"
                  alt=""
                />
              </button>
              <p class="item-txt">Member States</p>
            </div>
            <div class="sec-3-overlay fixed-pos" overlay-ref="7">
              <div class="sec-3-popup" aria-label="popup">
                <div class="popup-title-cont">
                  <h4>Member States</h4>
                  <button class="close-popup-btn" aria-label="close modal button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                        fill="#0E47CB" />
                    </svg>
                  </button>
                </div>
                <p>Member States will mandate at least one Wallet Provider to build a wallet within a certain timeline that will be defined in legislation.</p>
              </div>
            </div>
          </div>
          <div class="lines lines-1">
            <img src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-down.svg?api=v2" alt="">
            <div class="item-inner item-inner-only-text">
              <p>Mandate</p>
            </div>
          </div>
          <div class="item item-2">
            <img
              src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-wallet-provider.svg?api=v2"
              alt=""
            />
            <div class="item-bottom">
              <button class="item-button" aria-label="wallet provider popup button" overlay-ref="8" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-made','diagram-made-provider'])">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/icon-plus.svg?api=v2"
                  alt=""
                />
              </button>
              <p class="item-txt">Wallet Provider</p>
            </div>
            <div class="sec-3-overlay fixed-pos" overlay-ref="8">
              <div class="sec-3-popup" aria-label="popup">
                <div class="popup-title-cont">
                  <h4>Wallet Provider</h4>
                  <button class="close-popup-btn" aria-label="close modal button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                        fill="#0E47CB" />
                    </svg>
                  </button>
                </div>
                <p>The Wallet Provider will build the wallet to specifications defined and agreed on at the EU level and make it available for you to download.</p>
              </div>
            </div>
          </div>
          <div class="lines lines-2">
            <img src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-down.svg?api=v2" alt="">
            <div class="item-inner item-inner-only-text">
              <p>Serve</p>
            </div>
          </div>
          <div class="item item-3">
            <img
              src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-wallet-user.svg?api=v2"
              alt="A confident woman who is a user of the EU Digital Identity Wallet."
            />
            <div class="item-bottom">
              <button class="item-button" aria-label="wallet user popup button" overlay-ref="9">
                <img
                  src="/digital-building-blocks/sites/download/attachments/791609471/icon-plus.svg?api=v2"
                  alt=""
                />
              </button>
              <p class="item-txt">Wallet User</p>
            </div>
            <div class="sec-3-overlay fixed-pos" overlay-ref="9">
              <div class="sec-3-popup" aria-label="popup">
                <div class="popup-title-cont">
                  <h4>Wallet User</h4>
                  <button class="close-popup-btn" aria-label="close modal button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                        fill="#0E47CB" />
                    </svg>
                  </button>
                </div>
                <p>The Wallet User downloads and uses the finished wallet once it is available.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end of tab 2 -->
  
      <!-- tab 3 -->
      <div class="m-tab-3 tab-item" option-ref="2">
        <div class="light-back">
          <div class="item item-1">
            <img
              src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-wallet-provider.svg?api=v2"
              alt=""
            />
          </div>
          <div class="lines lines-1">
            <img src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-down.svg?api=v2" alt="">
            <button class="item-inner item-inner-text-plus item-button" aria-label="1. download popup button" overlay-ref="10" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how','diagram-how-serve'])">
              <p>1. Download</p>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z" fill="#6E7291"/>
              </svg>
            </button>
            <div class="sec-3-overlay fixed-pos" overlay-ref="10">
              <div class="sec-3-popup" aria-label="popup">
                <div class="popup-title-cont">
                  <h4>1. Download</h4>
                  <button class="close-popup-btn" aria-label="close modal button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                        fill="#0E47CB" />
                    </svg>
                  </button>
                </div>
                <p>
                  You will download your local version of the wallet app
                  from a major app store.
                </p>
              </div>
            </div>
          </div>
          <div class="item item-2">
            <img src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-wallet-user.svg?api=v2" alt="A confident woman who is a user of the EU Digital Identity Wallet.">
            <button class="item-inner item-inner-text-plus item-button" aria-label="4. present popup button" overlay-ref="11" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how','diagram-how-present'])">
              <p>4. Present</p>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z" fill="#6E7291"/>
              </svg>
            </button>
            <div class="sec-3-overlay fixed-pos" overlay-ref="11">
              <div class="sec-3-popup" aria-label="popup">
                <div class="popup-title-cont">
                  <h4>4. Present</h4>
                  <button class="close-popup-btn" aria-label="close modal button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                        fill="#0E47CB" />
                    </svg>
                  </button>
                </div>
                <p>
                  Your wallet can now identify and authenticate you. You can
                  now use it to access a range of services from Service 
                  Providers, as well as request and store Digital Documents like
                  your university diplomas or gym memberships.
                </p>
              </div>
            </div>
          </div>
          <div class="lines lines-2">
            <div class="lines-inner">
              <img src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-down-big.svg?api=v2" alt="">
              <button class="item-inner item-inner-text-plus item-button" aria-label="2. issue popup button" overlay-ref="12" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how','diagram-how-issue'])">
                <p>2. Issue</p>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z" fill="#6E7291"/>
                </svg>
              </button>
              <div class="sec-3-overlay fixed-pos" overlay-ref="12">
                <div class="sec-3-popup" aria-label="popup">
                  <div class="popup-title-cont">
                    <h4>2. Issue</h4>
                    <button class="close-popup-btn" aria-label="close modal button">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path
                          d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                          fill="#0E47CB" />
                      </svg>
                    </button>
                  </div>
                  <p>
                    Once your Digital ID is verified by checking it against the
                    data stored in the Trust System, your local entity
                    will issue your driving license to your wallet
                    application.
                  </p>
                </div>
              </div>
            </div>
            <div class="lines-inner">
              <img src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-up.svg?api=v2" alt="">
              <img class="item-inner-only-img" src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-pid.svg?api=v2" alt="">
              <button class="item-inner item-inner-text-plus item-button item-inner" aria-label="3. authenticate popup button" overlay-ref="13" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how','diagram-how-authenticate'])">
                <p>3. Authenticate</p>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z" fill="#6E7291"/>
                </svg>
              </button>
              <div class="sec-3-overlay fixed-pos" overlay-ref="13">
                <div class="sec-3-popup" aria-label="popup">
                  <div class="popup-title-cont">
                    <h4>3. Authenticate</h4>
                    <button class="close-popup-btn" aria-label="close modal button">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path
                          d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                          fill="#0E47CB" />
                      </svg>
                    </button>
                  </div>
                  <p>
                    The Digital ID Issuer will authenticate your identity and issue
                    your Digital ID to your wallet. The 
                    authenticity of your Digital ID will be verified by Service Providers thanks to the wallet's Trust System.
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="item item-3">
            <img src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-attestation-issuer.svg?api=v2" alt="An official building representing Personal Identity Data Issuers.">
          </div>
        </div>
      </div>
      <!-- end of tab 3 -->
  
      <!-- tab 4 -->
      <div class="m-tab-4 tab-item" option-ref="3">
        <!-- tab 4 1 -->
        <div class="m-tab-4-1 light-back">
          <h4>Access public sector services</h4>
          <p>
            Many Member States offer digital portals for public sector services, where you can 
            access information as well as a range of services.
          </p>
          <div class="item item-1">
            <button class="item-inner item-inner-text-plus item-button" aria-label="3. access popup button" overlay-ref="14" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-access'])">
              <p>3. Access</p>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z" fill="#6E7291"/>
              </svg>
            </button>
            <div class="sec-3-overlay fixed-pos" overlay-ref="14">
              <div class="sec-3-popup" aria-label="popup">
                <div class="popup-title-cont">
                  <h4>3. Access</h4>
                  <button class="close-popup-btn" aria-label="close modal button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                        fill="#0E47CB" />
                    </svg>
                  </button>
                </div>
                <p>
                  Once verified you will be able to access the public sector services available in the portal.
                </p>
              </div>
            </div>
            <img src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-wallet-user.svg?api=v2" alt="A confident woman who is a user of the EU Digital Identity Wallet.">
          </div>
          <div class="lines lines-1">
            <div class="lines-inner">
              <img src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-down-big.svg?api=v2" alt="">
              <img class="item-inner-only-img" src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-pid.svg?api=v2" alt="">
              <button class="item-inner item-inner-text-plus item-button item-inner" aria-label="1. authenticate popup button" overlay-ref="15" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-authenticate'])">
                <p>1. Authenticate</p>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z" fill="#6E7291"></path>
                </svg>
              </button>
              <div class="sec-3-overlay fixed-pos" overlay-ref="15">
                <div class="sec-3-popup" aria-label="popup">
                  <div class="popup-title-cont">
                    <h4>1. Authenticate</h4>
                    <button class="close-popup-btn" aria-label="close modal button">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path
                          d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                          fill="#0E47CB" />
                      </svg>
                    </button>
                  </div>
                  <p>
                    Authenticate yourself to your public 
                    sector services portal by sharing 
                    your Digital ID from your wallet. 
                  </p>
                </div>
              </div>
            </div>
            <div class="lines-inner">
              <img src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-up.svg?api=v2" alt="">
              <button class="item-inner item-inner-text-plus item-button item-inner" aria-label="2. verify popup button" overlay-ref="16" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-verify'])">
                <p>2. Verify</p>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z" fill="#6E7291"></path>
                </svg>
              </button>
              <div class="sec-3-overlay fixed-pos" overlay-ref="16">
                <div class="sec-3-popup" aria-label="popup">
                  <div class="popup-title-cont">
                    <h4>2. Verify</h4>
                    <button class="close-popup-btn" aria-label="close modal button">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path
                          d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                          fill="#0E47CB" />
                      </svg>
                    </button>
                  </div>
                  <p>
                    After verifying the data you shared, your
                    public sector services portal will grant you access. No extra
                    action needed from you.
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="item item-2">
            <img src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-attestation-issuer.svg?api=v2" alt="An official building representing Personal Identity Data Issuers.">
          </div>
        </div>
  
        <!-- end of tab 4 1 -->
        <!-- tab 4 2 -->
        <div class="m-tab-4-2 light-back">
          <h4>Request a Mobile Driving Licence</h4>
          <p>Mobile Driving Licences (mDL) are digital versions of your 
            driving licences that hold the same legal validity as a paper document. 
            This is a type of Digital Document that we call Qualified Electronic Attestations of Attributes.
          </p>
          <div class="item item-1">
            <img src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-attestation-issuer.svg?api=v2" alt="An official building representing Personal Identity Data Issuers.">
          </div>
          <div class="lines lines-1">
            <div class="lines-inner">
              <img src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-up.svg?api=v2" alt="">
              <button class="item-inner item-inner-text-plus item-button item-inner" aria-label="1. request popup button" overlay-ref="17" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-request'])">
                <p>1. Request</p>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z" fill="#6E7291"></path>
                </svg>
              </button>
              <div class="sec-3-overlay fixed-pos" overlay-ref="17">
                <div class="sec-3-popup" aria-label="popup">
                  <div class="popup-title-cont">
                    <h4>1. Request</h4>
                    <button class="close-popup-btn" aria-label="close modal button">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path
                          d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                          fill="#0E47CB" />
                      </svg>
                    </button>
                  </div>
                  <p>
                    Depending on your country, you'll be able to request
                    your mobile driving license either online or in person
                    from the local entity responsible. To verify who you
                    are, you will be requested to share your 
                    Digital ID.
                  </p>
                </div>
              </div>
            </div>
            <div class="lines-inner">
              <img src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-up.svg?api=v2" alt="">
              <img class="item-inner-only-img" src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-document-txt-top.svg?api=v2" alt="">
              <button class="item-inner item-inner-text-plus item-button item-inner" aria-label="2. issue popup button" overlay-ref="18" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-issue'])">
                <p>2. Issue</p>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z" fill="#6E7291"></path>
                </svg>
              </button>
              <div class="sec-3-overlay fixed-pos" overlay-ref="18">
                <div class="sec-3-popup" aria-label="popup">
                  <div class="popup-title-cont">
                    <h4>2. Issue</h4>
                    <button class="close-popup-btn" aria-label="close modal button">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path
                          d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                          fill="#0E47CB" />
                      </svg>
                    </button>
                  </div>
                  <p>
                    Once your Digital ID is verified, your local entity
                    will issue your driving license to your wallet
                    application.
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="item item-2">
            <img src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-wallet-user.svg?api=v2" alt="A confident woman who is a user of the EU Digital Identity Wallet.">
          </div>
          <div class="lines lines-2">
            <img src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-down-bigger.svg?api=v2" alt="">
            <img class="item-inner-only-img" src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-document-txt-top.svg?api=v2" alt="">
            <button class="item-inner item-inner-text-plus item-button item-inner-1" aria-label="3. store popup button" overlay-ref="19" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-store'])">
              <p>3. Store</p>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z" fill="#6E7291"></path>
              </svg>
            </button>
            <div class="sec-3-overlay fixed-pos" overlay-ref="19">
              <div class="sec-3-popup" aria-label="popup">
                <div class="popup-title-cont">
                  <h4>3. Store</h4>
                  <button class="close-popup-btn" aria-label="close modal button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                        fill="#0E47CB" />
                    </svg>
                  </button>
                </div>
                <p>
                  You will be notified that your driving license was
                  successfully uploaded to your wallet and is now ready
                  to be used.
                </p>
              </div>
            </div>
            <button class="item-inner item-inner-text-plus item-button item-inner-2" aria-label="4. present popup button" overlay-ref="20" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-present'])">
              <p>4. Present</p>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z" fill="#6E7291"></path>
              </svg>
            </button>
            <div class="sec-3-overlay fixed-pos" overlay-ref="20">
              <div class="sec-3-popup" aria-label="popup">
                <div class="popup-title-cont">
                  <h4>4. Present</h4>
                  <button class="close-popup-btn" aria-label="close modal button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                        fill="#0E47CB" />
                    </svg>
                  </button>
                </div>
                <p>
                  You can now access your mobile driving license on your
                  wallet application and share when needed, like the
                  next time you rent a car.
                </p>
              </div>
            </div>
          </div>
          <div class="item item-3">
            <img src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-relying-party.svg?api=v2" alt="Buildings that represent
  Service providers.">
          </div>
        </div>
        <div class="m-tab-4-3 light-back">
          <h4>Sign a Contract</h4>
          <p>In addition to its other features, your wallet can provide
             a secure legally binding e-signature to any document — 
             for example a new employment contract.</p>
          <div class="item item-1">
            <img src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-wallet-user.svg?api=v2" alt="A confident woman who is a user of the EU Digital Identity Wallet.">
            <button class="item-inner item-inner-text-plus item-button" aria-label="2. view and sign popup button" overlay-ref="21" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-view-sign'])">
              <p>2. View & sign</p>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z" fill="#6E7291"></path>
              </svg>
            </button>
            <div class="sec-3-overlay fixed-pos" overlay-ref="21">
              <div class="sec-3-popup" aria-label="popup">
                <div class="popup-title-cont">
                  <h4>2. View & sign</h4>
                  <button class="close-popup-btn" aria-label="close modal button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                        fill="#0E47CB" />
                    </svg>
                  </button>
                </div>
                <p>
                  After opening and authenticating yourself to your
                  wallet, you can view the document sent to you. After
                  agreeing, your wallet will generate a secure
                  e-signature that is legally valid.
                </p>
              </div>
            </div>
          </div>
          <div class="lines lines-1">
            <div class="lines-inner">
              <img src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-up-biggest.svg?api=v2" alt="">
              <img class="item-inner-only-img" src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-contract.svg?api=v2" alt="">
              <button class="item-inner item-inner-text-plus item-button" overlay-ref="22" aria-label="1. contract sent popup button" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-contract-sent'])">
                <p>1. Contract sent</p>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z" fill="#6E7291"></path>
                </svg>
              </button>
              <div class="sec-3-overlay fixed-pos" overlay-ref="22">
                <div class="sec-3-popup" aria-label="popup">
                  <div class="popup-title-cont">
                    <h4>1. Contract sent</h4>
                    <button class="close-popup-btn" aria-label="close modal button">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path
                          d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                          fill="#0E47CB" />
                      </svg>
                    </button>
                  </div>
                  <p>
                    A new employer will send a contract document to be
                    signed to your wallet.
                  </p>
                </div>
              </div>
            </div>
            <div class="lines-inner">
              <img src="/digital-building-blocks/sites/download/attachments/791609471/lines-the-wallet-down-biggest.svg?api=v2" alt="">
              <img class="item-inner-only-img" src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-contract.svg?api=v2" alt="">
              <button class="item-inner item-inner-text-plus item-button" aria-label="3. contract sent back popup button" overlay-ref="23" onclick="_paq.push(['trackEvent', 'conversion','eudiw-diagram-how-use','diagram-how-use-contract-sent-back'])">
                <p>3. Contract sent back</p>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path d="M11 13H6C5.71667 13 5.47917 12.9042 5.2875 12.7125C5.09583 12.5208 5 12.2833 5 12C5 11.7167 5.09583 11.4792 5.2875 11.2875C5.47917 11.0958 5.71667 11 6 11H11V6C11 5.71667 11.0958 5.47917 11.2875 5.2875C11.4792 5.09583 11.7167 5 12 5C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6V11H18C18.2833 11 18.5208 11.0958 18.7125 11.2875C18.9042 11.4792 19 11.7167 19 12C19 12.2833 18.9042 12.5208 18.7125 12.7125C18.5208 12.9042 18.2833 13 18 13H13V18C13 18.2833 12.9042 18.5208 12.7125 18.7125C12.5208 18.9042 12.2833 19 12 19C11.7167 19 11.4792 18.9042 11.2875 18.7125C11.0958 18.5208 11 18.2833 11 18V13Z" fill="#6E7291"></path>
                </svg>
              </button>
              <div class="sec-3-overlay fixed-pos" overlay-ref="23">
                <div class="sec-3-popup" aria-label="popup">
                  <div class="popup-title-cont">
                    <h4>3. Contract sent back</h4>
                    <button class="close-popup-btn" aria-label="close modal button">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path
                          d="M10.5858 12L7.05025 8.46447C6.84991 8.26412 6.74973 8.02842 6.74973 7.75736C6.74973 7.48631 6.84991 7.2506 7.05025 7.05026C7.2506 6.84991 7.4863 6.74974 7.75736 6.74974C8.02842 6.74974 8.26412 6.84991 8.46447 7.05026L12 10.5858L15.5355 7.05026C15.7359 6.84991 15.9716 6.74974 16.2426 6.74974C16.5137 6.74974 16.7494 6.84991 16.9497 7.05026C17.1501 7.2506 17.2503 7.48631 17.2503 7.75736C17.2503 8.02842 17.1501 8.26412 16.9497 8.46447L13.4142 12L16.9497 15.5355C17.1501 15.7359 17.2503 15.9716 17.2503 16.2426C17.2503 16.5137 17.1501 16.7494 16.9497 16.9498C16.7494 17.1501 16.5137 17.2503 16.2426 17.2503C15.9716 17.2503 15.7359 17.1501 15.5355 16.9498L12 13.4142L8.46447 16.9498C8.26412 17.1501 8.02842 17.2503 7.75736 17.2503C7.4863 17.2503 7.2506 17.1501 7.05025 16.9498C6.84991 16.7494 6.74973 16.5137 6.74973 16.2426C6.74973 15.9716 6.84991 15.7359 7.05025 15.5355L10.5858 12Z"
                          fill="#0E47CB" />
                      </svg>
                    </button>
                  </div>
                  <p>
                    A copy will be sent to your employer, and also stored
                    on your phone. Congratulations, you've just signed a
                    new employment contract!
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="item item-2">
            <img src="/digital-building-blocks/sites/download/attachments/791609471/illu-the-wallet-sec-3-relying-party.svg?api=v2" alt="Buildings that represent
  Service Providers."/>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- end of mobile view -->
</section>

<section class="section" id="sec-5-the-wallet">
  <div class="container">
    <div class="cols align-items-center">
      <div class="col-6">
        <div class="mobile-view">
          <h2 class="h3">Discover the technical work behind the Wallet</h2>
        </div>
        <div class="desktop-view">
          <img
            src="/digital-building-blocks/sites/download/attachments/791609471/illu-discover-technical.svg"
            alt=""
          />
        </div>
      </div>
      <div class="col-6">
        <div class="desktop-view">
          <h2 class="h3">Discover the technical work behind the Wallet</h2>
        </div>
        <div class="mobile-view">
          <img
            src="/digital-building-blocks/sites/download/attachments/791609471/illu-discover-technical.svg"
            alt=""
          />
        </div>
        <p>
          Uncover the technical specifications that will power the EU Digital
          Identity Wallet.
        </p>
        <a
          href="https://ec.europa.eu/digital-building-blocks/sites/display/EUDIGITALIDENTITYWALLET/Technical+Specifications"
          class="btn outline primary forward"
          onclick="_paq.push(['trackEvent', 'conversion','eudiw-what','what-discover-benefits'])"
          ><span>Discover the Technical Specifications</span
          ><span class="ico-cta-forward"></span
        ></a>
      </div>
    </div>
  </div>
</section>