.login-file-animation {
    width: 114px;
    height: 186px;
    position: relative;
}

.login-file-animation .background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.64, 0, 0.78, 0);
}

.login-file-animation svg {
    color: #D2D3DA;
    width: 100%;
    height: 100%;
    position: relative;
}

.login-file-animation .border:nth-child(1) { stroke-dasharray: 92 440 585 0; animation: border-1 3s ease-in-out infinite; }
.login-file-animation .border:nth-child(2) { stroke-dasharray: 0 102 50 585; animation: border-2 3s ease-in-out infinite; }
.login-file-animation .border:nth-child(3) { stroke-dasharray: 0 230 195 585; animation: border-3 3s ease-in-out infinite; }

@keyframes border-1 {
    from { stroke-dasharray: 62 440 585 0; }
    50%  { stroke-dasharray: 122 440 585 0; }
    to   { stroke-dasharray: 62 440 585 0; }
}

@keyframes border-2 {
    from { stroke-dasharray: 0 72 50 585; }
    50%  { stroke-dasharray: 0 132 50 585; }
    to   { stroke-dasharray: 0 72 50 585; }
}

@keyframes border-3 {
    from { stroke-dasharray: 0 200 195 585; }
    50%  { stroke-dasharray: 0 260 195 585; }
    to   { stroke-dasharray: 0 200 195 585; }
}

.login-file-animation.step-1 .border:nth-child(1),
.login-file-animation.step-1 .border:nth-child(2),
.login-file-animation.step-1 .border:nth-child(3),
.login-file-animation.colored .border { animation: none; }

.login-file-animation .border {
    transition: stroke-dasharray 0.3s, opacity 0.3s 0.12s;
}

.login-file-animation .title,
.login-file-animation .date {
    transition: stroke 0.3s;
}

.login-file-animation .logo,
.login-file-animation .key {
    transition: opacity 0.3s, fill 0.3s;
}

.login-file-animation .waves * {
    stroke-dasharray: 0 124;
}

.login-file-animation .key,
.login-file-animation .qr {
    opacity: 0;
}

.login-file-animation .qr {
    transition: opacity 0.3s;
}

.login-file-animation.step-1 .border:nth-child(1) { stroke-dasharray: 92 430 585 0; }
.login-file-animation.step-1 .border:nth-child(3) { stroke-dasharray: 0 220 205 585; }

.login-file-animation.step-2 .border:nth-child(3) { stroke-dasharray: 0 200 225 585; }

.login-file-animation.step-3 .border:nth-child(3) { stroke-dasharray: 0 180 245 585; }

.login-file-animation.step-4 .border:nth-child(1) { stroke-dasharray: 94 410 585 0; }
.login-file-animation.step-4 .border:nth-child(3) { stroke-dasharray: 0 160 265 585; }

.login-file-animation.step-5 .border:nth-child(1) { stroke-dasharray: 94 375 585 0; }

.login-file-animation.step-6 .border:nth-child(1) { stroke-dasharray: 102 367 585 0; }

.login-file-animation.step-7 .border:nth-child(1) { stroke-dasharray: 102 350 585 0; }
.login-file-animation.step-7 .border:nth-child(3) { stroke-dasharray: 0 160 282 585; }

.login-file-animation.step-8 .border:nth-child(1), .login-file-animation.colored .border:nth-child(1) { stroke-dasharray: 102 345 585 0; }
.login-file-animation.step-8 .border:nth-child(3), .login-file-animation.colored .border:nth-child(3) { stroke-dasharray: 0 152 295 585; }
.login-file-animation.step-8 .key { opacity: 1; }

.login-file-animation.step-1 .qr:nth-child(1),
.login-file-animation.step-2 .qr:nth-child(2),
.login-file-animation.step-3 .qr:nth-child(3),
.login-file-animation.step-4 .qr:nth-child(4),
.login-file-animation.step-5 .qr:nth-child(5),
.login-file-animation.step-6 .qr:nth-child(6),
.login-file-animation.step-7 .qr:nth-child(7),
.login-file-animation.step-8 .qr:nth-child(8) { opacity: 1; }

.login-file-animation.colored .background {
    opacity: 1;
}

.login-file-animation.colored .border {
    opacity: 0;
}

.login-file-animation.colored .waves,
.login-file-animation.colored .title,
.login-file-animation.colored .date {
    stroke: rgba(255, 255, 255, 0.5);
}

.login-file-animation.colored .waves * {
    stroke-dasharray: 124 124;
    transition: stroke-dasharray 1s ease-in;
}

.login-file-animation.colored .waves path:nth-child(1) { transition-delay: 0.48s; }
.login-file-animation.colored .waves path:nth-child(2) { transition-delay: 0.28s; }
.login-file-animation.colored .waves path:nth-child(3) { transition-delay: 0.46s; }
.login-file-animation.colored .waves path:nth-child(4) { transition-delay: 0.26s; }
.login-file-animation.colored .waves path:nth-child(5) { transition-delay: 0.44s; }
.login-file-animation.colored .waves path:nth-child(6) { transition-delay: 0.24s; }
.login-file-animation.colored .waves path:nth-child(7) { transition-delay: 0.42s; }
.login-file-animation.colored .waves path:nth-child(8) { transition-delay: 0.22s; }
.login-file-animation.colored .waves path:nth-child(9) { transition-delay: 0.40s; }
.login-file-animation.colored .waves path:nth-child(10){ transition-delay: 0.20s; }

.login-file-animation.colored .logo {
    fill: rgba(255, 255, 255, 0.5);
}

.login-file-animation.colored .key {
    opacity: 1;
    fill: rgba(255, 255, 255, 0.4);
}

.login-file-animation.colored .qr {
    transition: opacity 0.3s, stroke 0s 0.3s;
    stroke: rgba(255, 255, 255, 0.6);
}
.download-loginfile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    outline: none;
    flex-grow: 1;
    text-align: center;
}

.download-loginfile .loginfile-link {
    position: relative;
    flex-grow: 1;
    min-height: 30rem;
    max-height: 40rem;
}

.download-loginfile .loginfile {
    position: absolute;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.download-loginfile .long-touch-indicator {
    width: 11rem;
    height: 11rem;
    position: absolute;
    left: calc(50% - 5.5rem);
    top: 25.5rem; /* To lie over the wallet indicator on the Login File*/
    pointer-events: none;
    display: none;
    stroke: white;
}

.download-loginfile .long-touch-indicator.animate {
    /* The animation duration is not 800ms like the LONG_TOUCH_DURATION,
       because testing revealed that then the indicator does not fill
       up completely. With 700ms it fills up completely when the
       pop-up menu is shown. */
    animation: long-touch-indicator-animation 700ms linear forwards;
}

@keyframes long-touch-indicator-animation {
    from {
        stroke-dashoffset: 100.5;
        stroke: rgba(255, 255, 255, 0.6);
    }
}

.download-loginfile .actions {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.download-loginfile .nq-button {
    margin-top: 3rem;
    margin-bottom: 0;
}

.download-loginfile .download-button {
    min-width: 0;
    margin-right: 1rem;
    flex-shrink: 0;
    padding-left: 3rem;
}

.download-loginfile .download-button > .nq-icon {
    margin-right: 1.5rem;
    font-size: 2.5rem;
}

.download-loginfile.maybe-downloaded .download-button {
    padding: 0 1rem 0 2.5rem;
    background: rgba(31, 35, 72, .07);
    color: var(--nimiq-blue);
    box-shadow: none;
    transform: none;
    transition: background 0.3s var(--nimiq-ease);
}

.download-loginfile.maybe-downloaded .download-button::before {
    display: none;
}

.download-loginfile.maybe-downloaded .download-button:hover,
.download-loginfile.maybe-downloaded .download-button:focus {
    background: rgba(31, 35, 72, .12);
}

.download-loginfile .continue {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    margin-left: 1rem;
    flex-shrink: 0;
    padding-right: 2.25rem;
}

.download-loginfile:not(.maybe-downloaded) .continue {
    padding-left: 2.25rem;
}

.download-loginfile .continue > span {
    margin-right: 1rem;
}

.download-loginfile .continue > .nq-icon {
    margin-right: 0.5rem; /* To visually center the icon, which itself has more space on the left than on the right */
    font-size: 2.5rem;
}

.download-loginfile:not(.fallback-download) .tap-and-hold,
.download-loginfile.fallback-download .download-button,
.download-loginfile:not(.maybe-downloaded) .continue > span,
.download-loginfile.maybe-downloaded .download-button > span {
    display: none;
}

.download-loginfile .tap-and-hold {
    text-align: center;
    margin: 3rem 1rem 0 auto;
    font-size: 2rem;
    line-height: 1.25;
    color: rgba(31, 35, 72, .5) !important; /* important is necessary for iOS to overwrite <a> colors; based on Nimiq Blue */
    white-space: pre-line;
}
#app {
    perspective: 250rem;
}

#rotation-container {
    position: relative;
    width: 100%;
    max-width: 56.5rem; /* 420px + 2 * 2rem because of .nq-card margin*/
    height: 70.5rem; /* 564px */
    transition: transform 0.6s, height 0.6s;
    transform-style: preserve-3d;
    will-change: transform, height;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

#rotation-container.disabled,
#rotation-container.disable-transition {
    transition: none;
}

#rotation-container > .page.flipped,
#rotation-container.flipped {
    transform: rotateY(-180deg);
}

#rotation-container > .page {
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    margin: inherit;
    pointer-events: auto;
}

#rotation-container > .page.display-flex:not(:target) { /* :not(:target) is only required for specificity */
    display: flex;
    z-index: 3;
}

#rotation-container > .page:not(.flipped) {
    transform: rotateY(0deg);
    z-index: 2;
}

#rotation-container > .page:target {
    z-index: 3;
}
.page#intro .page-body {
    padding-bottom: 2rem;
}

.page#intro .login-file-fan {
    flex-grow: 1;
    align-self: stretch;
    position: relative;
}

.page#intro .login-file-fan img {
    position: absolute;
    height: 23rem;
    left: 50%;
    top: 50%;
    margin-left: -9rem;
    margin-top: -11.5rem;

    transform-origin: 100% 125%;

    animation: fan-out 1s cubic-bezier(0.83, 0, 0.17, 1) forwards reverse;
}

.page#intro .login-file-fan img:nth-child(5) {
    transform: rotate(-4.47deg);
}

.page#intro .login-file-fan img:nth-child(4) {
    transform: rotate(1.53deg);
}

.page#intro .login-file-fan img:nth-child(3) {
    transform: rotate(7.53deg);
}

.page#intro .login-file-fan img:nth-child(2) {
    transform: rotate(13.53deg);
}

.page#intro .login-file-fan img:nth-child(1) {
    transform: rotate(19.53deg);
}

@keyframes fan-out {
    to { transform: rotate(0deg); }
}

.page#intro .page-body p {
    text-align: center;
    margin: 2rem auto 0;
    font-size: 2rem;
    max-width: 35rem;
}

.page#intro .page-body,
.page#set-password .page-body {
    position: relative;
    display:flex;
    flex-direction: column;
    align-items: center;
}

.page#set-password .page-body p {
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 0;
    font-size: 2rem;
    white-space: pre-line;
}

.page#set-password .page-body p.show-on-repetition {
    max-width: 36rem;
}

.page#set-password.repeat-password .hide-on-repetition,
.page#set-password:not(.repeat-password) .show-on-repetition {
    display: none;
}

.page#login-file-download .page-body {
    display: flex;
    flex-direction: column;
}

.page#login-file-download.loginfile-download-initiated .page-header .nq-h1:not(.confirm-download),
.page#login-file-download:not(.loginfile-download-initiated) .page-header .confirm-download,
.page#login-file-download.loginfile-download-initiated .skip {
    display: none;
}

.page#login-file-download .skip {
    margin-top: -2.5rem;
    margin-bottom: 1.5rem;
}

.page#login-file-explainer .nq-notice {
    margin-top: 2rem;
}

.page#login-file-explainer .page-body {
    padding-top: 2rem;
    padding-left: 0;
}

.page#login-file-explainer .page-body p {
    color: white;
}

.page#login-file-explainer .page-body p + p {
    margin-top: 2.5rem;
}

.page#login-file-explainer .page-body img {
    float: left;
    border-top-right-radius: 0.615rem;
    border-bottom-right-radius: 0.615rem;
    margin: 0.5rem 4rem 0 0;
}