<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <title>European Innovation Council</title>
        {scriptTags}
        {cssTags}
    </head>
    <body eicapp>
        <style>
            body {
                align-items: center;
                background: radial-gradient(#4786da, #1b4986);
                background-position: center;
                color: white;
                display: grid;
                padding: 150px 15px 100px;
                position: relative;
                text-align: center;
                width: 100vw;
                background-size: cover;
                height: 100vh;
                box-sizing: border-box;
                overflow: hidden;
                font-family: sans-serif;
            }
            .sparc-loader {
                position: absolute;
                width: 9rem;
                height: 9rem;
                align-self: center;
                justify-self: center;
                transform: scale(0.7);
            }
            .sparc {
                position: absolute;
                width: 0.1rem;
                height: 0.1rem;
                bottom: 4.3rem;
                left: 4.35rem;
                transform: rotate(var(--loader-rotate));
            }
            .sparc::after {
                content: '';
                display: block;
                position: absolute;
                bottom: 0;
                width: 0.1rem;
                height: 1.3rem;
                border-radius: 0.3rem;
                opacity: 0;
                background-color: #d8ecff;
                transform-origin: bottom center;
                animation: ignite 0.5s infinite linear;
                animation-delay: var(--loader-delay);
            }
            @keyframes ignite {
                0% { transform: translateY(-0.5rem) scaleY(0.2); opacity: 0; }
                10% { transform: translateY(-1rem) scaleY(0.5); opacity: 0.35; }
                30% { transform: translateY(-2rem) scaleY(0.5); opacity: 0.7; }
                50% { transform: translateY(-4rem) scaleY(1.5); opacity: 0.7; }
                51% { transform: translateY(-4rem) scaleY(1); opacity: 0; }
                100% { transform: translateY(0) scaleY(0.2); opacity: 0; }
            }
            .auth-error{
                display: none!important;
                max-width: 40vw!important;
                margin: auto!important;
            }
        </style>
        <div class="sparc-loader">
            <div class="sparc" style="--loader-rotate: 10deg; --loader-delay: 223ms"></div>
            <div class="sparc" style="--loader-rotate: 20deg; --loader-delay: 842ms"></div>
            <div class="sparc" style="--loader-rotate: 30deg; --loader-delay: 131ms"></div>
            <div class="sparc" style="--loader-rotate: 40deg; --loader-delay: 746ms"></div>
            <div class="sparc" style="--loader-rotate: 50deg; --loader-delay: 925ms"></div>
            <div class="sparc" style="--loader-rotate: 60deg; --loader-delay: 390ms"></div>
            <div class="sparc" style="--loader-rotate: 70deg; --loader-delay: 483ms"></div>
            <div class="sparc" style="--loader-rotate: 80deg; --loader-delay: 621ms"></div>
            <div class="sparc" style="--loader-rotate: 90deg; --loader-delay: 814ms"></div>
            <div class="sparc" style="--loader-rotate: 100deg; --loader-delay: 802ms"></div>
            <div class="sparc" style="--loader-rotate: 110deg; --loader-delay: 837ms"></div>
            <div class="sparc" style="--loader-rotate: 120deg; --loader-delay: 238ms"></div>
            <div class="sparc" style="--loader-rotate: 130deg; --loader-delay: 642ms"></div>
            <div class="sparc" style="--loader-rotate: 140deg; --loader-delay: 60ms"></div>
            <div class="sparc" style="--loader-rotate: 150deg; --loader-delay: 405ms"></div>
            <div class="sparc" style="--loader-rotate: 160deg; --loader-delay: 575ms"></div>
            <div class="sparc" style="--loader-rotate: 170deg; --loader-delay: 945ms"></div>
            <div class="sparc" style="--loader-rotate: 180deg; --loader-delay: 635ms"></div>
            <div class="sparc" style="--loader-rotate: 190deg; --loader-delay: 205ms"></div>
            <div class="sparc" style="--loader-rotate: 200deg; --loader-delay: 91ms"></div>
            <div class="sparc" style="--loader-rotate: 210deg; --loader-delay: 829ms"></div>
            <div class="sparc" style="--loader-rotate: 220deg; --loader-delay: 970ms"></div>
            <div class="sparc" style="--loader-rotate: 230deg; --loader-delay: 861ms"></div>
            <div class="sparc" style="--loader-rotate: 240deg; --loader-delay: 201ms"></div>
            <div class="sparc" style="--loader-rotate: 250deg; --loader-delay: 173ms"></div>
            <div class="sparc" style="--loader-rotate: 260deg; --loader-delay: 967ms"></div>
            <div class="sparc" style="--loader-rotate: 270deg; --loader-delay: 548ms"></div>
            <div class="sparc" style="--loader-rotate: 280deg; --loader-delay: 392ms"></div>
            <div class="sparc" style="--loader-rotate: 290deg; --loader-delay: 273ms"></div>
            <div class="sparc" style="--loader-rotate: 300deg; --loader-delay: 6ms"></div>
            <div class="sparc" style="--loader-rotate: 310deg; --loader-delay: 1ms"></div>
            <div class="sparc" style="--loader-rotate: 320deg; --loader-delay: 854ms"></div>
            <div class="sparc" style="--loader-rotate: 330deg; --loader-delay: 159ms"></div>
            <div class="sparc" style="--loader-rotate: 340deg; --loader-delay: 60ms"></div>
            <div class="sparc" style="--loader-rotate: 350deg; --loader-delay: 986ms"></div>
            <div class="sparc" style="--loader-rotate: 360deg; --loader-delay: 559ms"></div>
          </div> 

          <article class="auth-error" eiccard="" aria-enabled="true" >
            <header><h1>Server error</h1></header>
            <section>
                <div>
                    <section>
                        <alert eicalert="" danger="">
                            Unfortunately, the server cannot authenticate you at the moment,<br>
                            Please try again later.
                        </alert>
                    </section>
                </div>
            </section>
        </article>
    </body>
</html>
