.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;
}

.login-file-icon {
    width: 12rem;
    height: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-radius: 1rem;
    border: 2px dashed rgba(31, 35, 72, 0.4); /* based on Nimiq Blue */
}

.login-file-icon.locked,
.login-file-icon.file-unavailable {
    border: 0px;
}

.login-file-icon .lock {
    display: flex;
    width: 4.125rem;
    height: 5.75rem;
    margin-top: 3rem;
    opacity: 0.4;
}

.login-file-icon:not(.locked) .lock-locked,
.login-file-icon.locked .lock-unlocked {
    display: none;
}

.login-file-icon.locked .lock {
    opacity: 1;
    color: white;
}

.login-file-icon.file-unavailable.locked .lock {
    opacity: 0.7;
    color: inherit;
}

.login-file-icon .qr-code {
    display: flex;
    width: 6rem;
    height: 6rem;
    margin-bottom: 2.25rem;
    opacity: 0.4;
}

.login-file-icon.locked .qr-code {
    opacity: 0.6;
    color: white;
}
.login-file-icon.file-unavailable .qr-code {
    visibility: hidden;
}
.progress-indicator {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 0.5rem;
    position: absolute;
    left: 0;
    top: 0;
}

.progress-indicator .indicator {
    flex-grow: 1;
    height: 0.5rem;
    border-radius: 0.25rem;
    background: var(--nimiq-blue);
    margin: 0.5rem;
    opacity: 0.1;
}

.nq-blue-bg .progress-indicator .indicator {
    background: white;
    opacity: 0.25;
}

.nq-card-header .progress-indicator ~ *:not(.nq-notice) {
    margin-top: 1rem;
}

.progress-indicator[data-step="1"] .step-1,
.progress-indicator[data-step="2"] .step-1,
.progress-indicator[data-step="3"] .step-1,
.progress-indicator[data-step="4"] .step-1,
.progress-indicator[data-step="5"] .step-1,
.progress-indicator[data-step="6"] .step-1,
.progress-indicator[data-step="7"] .step-1,
.progress-indicator[data-step="8"] .step-1,
.progress-indicator[data-step="9"] .step-1,

.progress-indicator[data-step="2"] .step-2,
.progress-indicator[data-step="3"] .step-2,
.progress-indicator[data-step="4"] .step-2,
.progress-indicator[data-step="5"] .step-2,
.progress-indicator[data-step="6"] .step-2,
.progress-indicator[data-step="7"] .step-2,
.progress-indicator[data-step="8"] .step-2,
.progress-indicator[data-step="9"] .step-2,

.progress-indicator[data-step="3"] .step-3,
.progress-indicator[data-step="4"] .step-3,
.progress-indicator[data-step="5"] .step-3,
.progress-indicator[data-step="6"] .step-3,
.progress-indicator[data-step="7"] .step-3,
.progress-indicator[data-step="8"] .step-3,
.progress-indicator[data-step="9"] .step-3,

.progress-indicator[data-step="4"] .step-4,
.progress-indicator[data-step="5"] .step-4,
.progress-indicator[data-step="6"] .step-4,
.progress-indicator[data-step="7"] .step-4,
.progress-indicator[data-step="8"] .step-4,
.progress-indicator[data-step="9"] .step-4,

.progress-indicator[data-step="5"] .step-5,
.progress-indicator[data-step="6"] .step-5,
.progress-indicator[data-step="7"] .step-5,
.progress-indicator[data-step="8"] .step-5,
.progress-indicator[data-step="9"] .step-5,

.progress-indicator[data-step="6"] .step-6,
.progress-indicator[data-step="7"] .step-6,
.progress-indicator[data-step="8"] .step-6,
.progress-indicator[data-step="9"] .step-6,

.progress-indicator[data-step="7"] .step-7,
.progress-indicator[data-step="8"] .step-7,
.progress-indicator[data-step="9"] .step-7,

.progress-indicator[data-step="8"] .step-8,
.progress-indicator[data-step="9"] .step-8,

.progress-indicator[data-step="9"] .step-9 {
    background: var(--nimiq-green);
    opacity: 1;
}
.recovery-words {
    overflow: hidden scroll;
}

.recovery-words .words-container {
    width: 100%;
    box-sizing: border-box;
}

.recovery-words .nq-input.shake ,
.recovery-words .shake {
    border-color: var(--nimiq-red);
}

.recovery-words .words-container .word-section {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden; /* prevent scrollbar from showing when input shakes */
}

.recovery-words .word {
    margin: .5rem;
    flex: 1 0 25%;
    position: relative;
    height: 5rem;
    line-height: 5rem;
    border-radius: 0.5rem;
}

.recovery-words .word.complete {
    background-color: rgba(255, 255, 255, 0.1);
}

.recovery-words .word.complete input {
    border-color: rgba(255, 255, 255, 0); /* `transparent` would be black in Safari */
}

.recovery-words .word .word-number {
    flex-grow: 0;
    margin: 0 1rem;
    opacity: 0.3;
    font-weight: 600;
    font-size: 1.75rem;
}

.recovery-words .word .word-content {
    flex-grow: 1;
    font-size: 2rem;
}

.recovery-words input {
    width: 100%;
    text-align: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.recovery-words input::placeholder {
    font-weight: 600;
}

.recovery-words input:focus::placeholder {
    color: transparent;
}

.recovery-words input::-webkit-calendar-picker-indicator {
    display: none;
}

/* can not be name-spaced as the AutoComplete lib renders suggestions outside of the components element */
.autocomplete-suggestions {
    text-align: left;
    cursor: default;
    border: .125rem solid #ccc;
    border-top: 0;
    background: #fff;
    box-shadow: -.125rem .125rem .375rem rgba(0, 0, 0, .1);

    /* core styles should not be changed */
    position: absolute;
    display: none;
    z-index: 9999;
    max-height: 31.75rem;
    overflow: hidden;
    box-sizing: border-box;
}

.autocomplete-suggestion {
    position: relative;
    padding: 0 .1em;
    line-height: 2.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--nimiq-blue);
    border-bottom: .125rem solid rgba(0, 0, 0, 0.1);
}

.autocomplete-suggestion:last-child {
    border-bottom: none;
}

.autocomplete-suggestion.selected {
    color: white;
    background: var(--nimiq-light-blue);
    cursor: pointer;
}

.recovery-words ::selection {
    background: var(--nimiq-blue); /* WebKit/Blink Browsers */
}

.recovery-words ::-moz-selection {
    background: var(--nimiq-blue); /* Gecko Browsers */
}
.recovery-word-field {
    width: 100%;
    box-sizing: border-box;
}
.validate-words {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 1.875rem;
    line-height: 4rem;
    padding-top: 8rem;
}

.validate-words p {
    font-size: 2.5rem;
    margin-top: 0;
    text-align: center;
    margin-bottom: 4rem;
    color: rgba(255, 255, 255, .5);
}

.validate-words .target-index {
    display: block;
    font-size: 10rem;
    line-height: 10rem;
    margin-bottom: 3rem;
    font-weight: normal;
    text-align: center;
    font-weight: 600;
}

.validate-words .word-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.validate-words button {
    margin: 1rem;
    display: inline-block;
    min-width: unset;
    height: 4.25rem;
    padding: 0 2rem;
    font-size: 1.75rem;
}

.validate-words button:disabled {
    opacity: 0.7;
}

.validate-words button[disabled].green {
    /* @nimiq/style does not include disabled styles for colored buttons yet */
    background: var(--nimiq-green-bg) !important;
    color: white;
    opacity: 1;
    cursor: pointer;
}

.validate-words button[disabled].red {
    /* @nimiq/style does not include disabled styles for colored buttons yet */
    background: var(--nimiq-red-bg) !important;
    color: white;
    opacity: 1;
    cursor: pointer;
}

.validate-words button.blink-green {
    opacity: 1;
    color: white;
    animation-name: blink-green;
    animation-duration: 400ms;
    animation-iteration-count: 2;
}

@keyframes blink-green {
    50% { background: var(--nimiq-green-bg); }
}

.validate-words .back-to-words-container {
    margin-top: 2rem;
    text-align: center;
}

.validate-words .back-to-words {
    cursor: pointer;
}
.backup-codes-illustration-base {
    contain: size layout paint style;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 26rem;
    padding: 0;
}

/* message-bubble variables */

.backup-codes-illustration-base .message-bubble {
    --zoom: 1;
    /* to avoid rendering at sub-pixel precision, we round values */
    --message-bubble-width: round(calc(27rem * var(--zoom)), 1px);
    --message-bubble-min-height: round(calc(12rem * var(--zoom)), 1px);
    --message-bubble-padding: round(calc(1.5rem * var(--zoom)), 1px);
    --message-bubble-padding-bottom: round(calc(2.5rem * var(--zoom)), 1px);
    --label-font-size: round(calc(1.75rem * var(--zoom)), 1px);
    --label-margin-bottom: round(calc(1rem * var(--zoom)), 1px);
    --code-font-size: round(calc(1.75rem * var(--zoom)), 1px);
    --counter-size: round(calc(3rem * var(--zoom)), 1px);
    --counter-offset: round(calc(3rem * var(--zoom) * .4), 1px);
    --counter-font-size: round(calc(1.5rem * var(--zoom)), 1px);
    --counter-checkmark-size: round(calc(1.25rem * var(--zoom)), 1px);
}

/* fallback if rounding is not supported */
@supports not (width: round(1.2px, 1px)) {
    .backup-codes-illustration-base .message-bubble {
        --message-bubble-width: calc(27rem * var(--zoom));
        --message-bubble-min-height: calc(12rem * var(--zoom));
        --message-bubble-padding: calc(1.5rem * var(--zoom));
        --message-bubble-padding-bottom: calc(2.5rem * var(--zoom));
        --label-font-size: calc(1.75rem * var(--zoom));
        --label-margin-bottom: calc(1rem * var(--zoom));
        --code-font-size: calc(1.75rem * var(--zoom));
        --counter-size: calc(3rem * var(--zoom));
        --counter-offset: calc(3rem * var(--zoom) * .4);
        --counter-font-size: calc(1.5rem * var(--zoom));
        --counter-checkmark-size: calc(1.25rem * var(--zoom));
    }
}

/* Code font sizes are optimized for the zoomed state to not break into three lines in most cases. For some codes with
many wide characters the non zoomed code might break into three lines though, because of different rounding of paddings
etc. To avoid this, we slightly reduce the non-zoomed font-size. This might lead to the code breaking at different spots
though, compared to the zoomed state. */
.backup-codes-illustration-base .message-bubble:not(.zoomed) {
    --code-font-size: calc(1.75rem * var(--zoom) * .995); /* no rounding on purpose */
}

/* common message-bubble styles */

.backup-codes-illustration-base .message-bubble {
    position: absolute;

    width: var(--message-bubble-width);
    min-height: var(--message-bubble-min-height); /* min-height instead of height to allow code to break into 3 lines */
    padding: var(--message-bubble-padding);
    padding-bottom: var(--message-bubble-padding-bottom);

    line-height: 1;
    filter: drop-shadow(0 0 calc(20px * var(--zoom)) rgba(0, 0, 0, 0.3))
        drop-shadow(0 calc(1.34px * var(--zoom)) calc(4.47px * var(--zoom)) rgba(59, 76, 106, 0.0775))
        drop-shadow(0 calc(0.4px * var(--zoom)) calc(1.33px * var(--zoom)) rgba(59, 76, 106, 0.0525));
}

/* background */
/* As separate element with mask-image, such that the drop-shadow is not cut off by the mask-image. */

.backup-codes-illustration-base .message-bubble .background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}
.backup-codes-illustration-base .message-bubble.code-1 .background {
    /* left message bubble */
    background-image: radial-gradient(141.42% 141.42% at 100% 100%, #693BC4 0%, #8F3FD5 100%);
    /* As mask-image to be able to scale with the zoomed element, and clip-path with shape() as alternative is not
    widely supported yet */
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 96" preserveAspectRatio="none"><path d="M0 3a3 3 0 0 1 3-3h210a3 3 0 0 1 3 3v75.9a3 3 0 0 1-3 3H24.5a3 3 0 0 0-1.8.6l-18 13A3 3 0 0 1 0 93z"/></svg>');
}
.backup-codes-illustration-base .message-bubble.code-2 .background {
    /* right message bubble */
    background-image: radial-gradient(141.42% 141.42% at 0% 100%, #DC1845 0%, #F33F68 100%);
    /* As mask-image to be able to scale with the zoomed element, and clip-path with shape() as alternative is not
    widely supported yet */
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 96" preserveAspectRatio="none"><path d="M216 3a3 3 0 0 0-3-3H3a3 3 0 0 0-3 3v75.9a3 3 0 0 0 3 3h188.5a3 3 0 0 1 1.8.6l18 13A3 3 0 0 0 216 93z"/></svg>');
}

/* label and backup code */

.backup-codes-illustration-base .message-bubble .label {
    margin-bottom: var(--label-margin-bottom);
    font-size: var(--label-font-size);
    font-weight: 500;
    line-height: 1;
    color: rgba(255, 255, 255, .6);
}

.backup-codes-illustration-base .message-bubble .code {
    font-size: var(--code-font-size);
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.0095em; /* best effort to limit the code to two lines of text, which works for most codes */
    word-break: break-all;
    overflow-wrap: anywhere;
    color: white;
}

/* counter circle */

.backup-codes-illustration-base .message-bubble::after,
.backup-codes-illustration-base .message-bubble .background::after {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: var(--counter-size);
    height: var(--counter-size);
    top: calc(-1 * var(--counter-offset));
    left: calc(-1 * var(--counter-offset));
    border-radius: 50%;
    font-size: var(--counter-font-size);
    font-weight: 700;
    background-color: white;
}
.backup-codes-illustration-base .message-bubble.code-1::after {
    content: '1';
    color: #8D3FD4;
}
.backup-codes-illustration-base .message-bubble.code-2::after {
    content: '2';
    color: #F33E67;
}
.backup-codes-illustration-base .message-bubble .background::after {
    /* To avoid overlapping drop shadows, we don't have individual drop shadows on the message-bubble background and the
    counter circle, but instead have a single drop shadow on the entire message-bubble. However, the counter circle
    should also cast part of its shadow on the background, which we emulate via a copy of the circle on the background
    element. Note that the shadow of that copy is limited to the background via the background's mask-image, such that
    this shadow does not overlap with the message-bubble's shadow. */
    content: '';
    filter: drop-shadow(0 0 calc(20px * var(--zoom)) rgba(0, 0, 0, 0.2))
        drop-shadow(0 calc(1.34px * var(--zoom)) calc(4.47px * var(--zoom)) rgba(59, 76, 106, 0.1775))
        drop-shadow(0 calc(0.4px * var(--zoom)) calc(1.33px * var(--zoom)) rgba(59, 76, 106, 0.1525));
}

/* message-bubble states */

.backup-codes-illustration-base .message-bubble:is(.masked, .loading) .label {
    color: white;
}
.backup-codes-illustration-base .message-bubble:is(.masked, .loading) .code {
    /* Make the text transparent and redact it with a rounded box as background image instead. As the text is an inline
    element, the background is applied to the lines of text, nicely matching the length of the lines. */
    line-height: 1.2;
    color: transparent;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 20" preserveAspectRatio="none"><rect opacity="0.15" width="192" height="14" y="3" rx="3" fill="white"/></svg>');
    /* Apply background to each line of text individually, such that each line has the rounded borders. */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    user-select: none;
    pointer-events: none;
}
.backup-codes-illustration-base .message-bubble:is(.masked, .loading) .code:empty::after {
    /* Placeholder content if no code is set yet */
    content: '----------------------------------------------------------';
}

.backup-codes-illustration-base .message-bubble:not(.faded).loading .code {
    animation: backup-codes-illustration-base-loading-animation .8s cubic-bezier(.76, .29, .29, .76) alternate infinite;
}

@keyframes backup-codes-illustration-base-loading-animation {
    from { opacity: 1; }
    to { opacity: .6; }
}

.backup-codes-illustration-base .message-bubble.faded {
    filter: none;
    opacity: .1;
}
.backup-codes-illustration-base .message-bubble.faded .background {
    background: white !important;
}
.backup-codes-illustration-base .message-bubble.faded::after,
.backup-codes-illustration-base .message-bubble.faded .background::after {
    content: '' !important;
    background-image: none !important;
    filter: none;
}

.backup-codes-illustration-base .message-bubble.zoomed {
    --zoom: calc(10 / 7);
}
.backup-codes-illustration-base .message-bubble.zoomed .code {
    line-height: 1.35;
}

.backup-codes-illustration-base:not(.backup-codes-success) .message-bubble.complete.code-1 .background {
    background-image: radial-gradient(100% 100% at 100% 100%, #41A38E 0%, #21BCA5 100%);
}
.backup-codes-illustration-base:not(.backup-codes-success) .message-bubble.complete.code-2 .background {
    background-image: radial-gradient(100% 100% at 0% 100%, #41A38E 0%, #21BCA5 100%);
}
.backup-codes-illustration-base .message-bubble.complete::after {
    /* replace counter with a checkmark icon */
    content: '';
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" fill="none"><path stroke="%2313b59d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1 3.3 9 1 6.7"/></svg>');
    background-size: var(--counter-checkmark-size);
    background-repeat: no-repeat;
    background-position: center;
}

/* View transition setup */

.page:not(.disable-view-transition-names):target .backup-codes-illustration-base .message-bubble.code-1,
.page.enforce-view-transition-names .backup-codes-illustration-base .message-bubble.code-1 {
    view-transition-name: backup-codes-illustration-base-code-1;
}
.page:not(.disable-view-transition-names):target .backup-codes-illustration-base .message-bubble.code-2,
.page.enforce-view-transition-names .backup-codes-illustration-base .message-bubble.code-2 {
    view-transition-name: backup-codes-illustration-base-code-2;
}
::view-transition-group(*) {
    animation-duration: var(--backup-codes-view-transition-duration); /* set in BackupCodesIllustrationBase.js */
}
::view-transition-old(backup-codes-illustration-base-code-1),
::view-transition-new(backup-codes-illustration-base-code-1),
::view-transition-old(backup-codes-illustration-base-code-2),
::view-transition-new(backup-codes-illustration-base-code-2) {
    height: 100%;
}
/* message-bubble positioning for individual steps */

.backup-codes-illustration.backup-codes-intro .message-bubble.code-1,
.backup-codes-illustration.backup-codes-success .message-bubble.code-1 {
    transform: translate(-4.5rem, -3.5rem);
    transform: translate(round(-4.5rem, 1px), round(-3.5rem, 1px));
}
.backup-codes-illustration.backup-codes-intro .message-bubble.code-2,
.backup-codes-illustration.backup-codes-success .message-bubble.code-2 {
    transform: translate(4.5rem, 3.5rem);
    transform: translate(round(4.5rem, 1px), round(3.5rem, 1px));
}

.backup-codes-illustration.backup-codes-send-code-1 .message-bubble.code-2,
.backup-codes-illustration.backup-codes-send-code-1-confirm .message-bubble.code-2 {
    transform: translate(12.5rem, 5.25rem);
    transform: translate(round(12.5rem, 1px), round(5.25rem, 1px));
    z-index: -1;
}

.backup-codes-illustration.backup-codes-send-code-2 .message-bubble.code-1,
.backup-codes-illustration.backup-codes-send-code-2-confirm .message-bubble.code-1 {
    transform: translate(-12.5rem, -5.25rem);
    transform: translate(round(-12.5rem, 1px), round(-5.25rem, 1px));
}
ul.nq-list li {
    width: auto;
    height: auto;
    display: flex;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 3rem;
    min-height: 5rem;
    align-items: center;
}

ul.nq-list li > .nq-icon {
    position: absolute;
    height: 5rem;
    width: 5rem;
    left: -5rem;
    top: 0.5rem;
}

.page#validate-words .page-body {
    display: flex;
    flex-direction: column;
    padding-bottom: 1rem;
}

.page#recovery-words {
    height: 70.5rem; /* 564px */
}

.page#recovery-words .page-body {
    display: flex;
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 0;
}

.page#recovery-words .recovery-words {
    height: 39rem;
    position: relative;
    margin: -4rem;
    padding: 0 3rem;
    mask-image: linear-gradient(0deg , rgba(255,255,255,0), rgba(255,255,255, 1) 4rem, rgba(255,255,255,1) calc(100% - 4rem), rgba(255,255,255,0));
    overflow-x: hidden;
    overflow-y: scroll;
}

.recovery-words .words-container .word-section {
    padding: 4rem 0rem;
}

@media (max-width: 450px) { /* break point used in @nimiq/style/layout.css for .nq-card-body padding */
    .page#recovery-words .recovery-words {
        margin-left: -3rem;
        margin-right: -3rem;
    }
}

.page#recovery-words .page-footer p {
    position: absolute;
    bottom: 4rem;
    text-align: center;
    width: calc(100% - 2rem);
    opacity: 0.5;
    color: white;
    transition: opacity .2s ease, z-index 0s .2s;
}

.page#recovery-words .page-footer.scrolled-down p {
    z-index: -1;
    opacity: 0;
}

.page#recovery-words .page-footer button {
    z-index: -1;
    position: relative;
    opacity: 0;
    transition: transform 450ms cubic-bezier(.25,0,0,1), box-shadow 450ms cubic-bezier(.25,0,0,1), opacity .4s ease;
}

.page#recovery-words .page-footer.scrolled-down button {
    z-index: 1;
    opacity: 1;
}

/* blur when page is displayed in background */
.page#recovery-words .page-header .warning,
.page#recovery-words .words-container {
    transition: filter .6s, opacity .6s;
}
.page#recovery-words:not(:target) .page-header .warning,
.page#recovery-words:not(:target) .words-container {
    filter: blur(10px);
    opacity: .4;
}
/* hide elements which are covered or don't look nice in the background when blurred */
.page#recovery-words:not(:target) .page-header > :not(.warning),
.page#recovery-words:not(:target) .page-footer {
    opacity: 0;
}
/* hide scroll bar when page is displayed in background */
.page#recovery-words:not(:target) .recovery-words {
    overflow-y: hidden;
}

.page#recovery-words-intro .warning {
    margin-top: 1.5rem;
}

.page#recovery-words-intro .nq-card-body {
    padding-bottom: 0;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.page#recovery-words-intro li > .nq-icon {
    color: var(--nimiq-orange);
}

.page#recovery-words-intro .nq-card-footer {
    padding-left: 4rem;
    padding-right: 4rem;
}

.page#recovery-words-intro .nq-button {
    margin-left: auto;
    margin-right: auto;
}

.page:is(#login-file-unlock, #recovery-words-unlock, #backup-codes-unlock) .nq-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.page:is(#login-file-unlock, #recovery-words-unlock, #backup-codes-unlock) .nq-card-body .nq-icon {
    width: 8rem;
    height: auto;
    opacity: 0.3;
}

.page#login-file-intro .nq-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0;
    justify-content: space-evenly;
}

.page#login-file-intro .nq-card-body > * {
    margin-bottom: auto;
}

.page#login-file-intro .page-body .nq-notice.warning {
    text-align: center;
    margin-top: 0;
    white-space: pre-line;
}

.page#login-file-intro li:last-child {
    margin-bottom: 1rem;
}

.page#login-file-intro li > .nq-icon {
    opacity: 0.3;
}

.page#login-file-intro .nq-notice.warning {
    font-size: 2.75rem;
}

.page#login-file-set-password:not(.repeat-password) .nq-h1.repeat,
.page#login-file-set-password.repeat-password .nq-h1:not(.repeat) {
    display: none;
}

.page#login-file-set-password .page-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

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

/* blur when page is displayed in background */
.page#login-file-download img {
    display: flex;
    transition: filter .6s, opacity .6s;
}
.page#login-file-download:not(:target) img {
    filter: blur(20px);
    opacity: .15;
}
/* hide elements which don't look nice in the background when blurred */
.page#login-file-download:not(:target) .page-header,
.page#login-file-download:not(:target) button,
.page#login-file-download:not(:target) .download-button,
.page#login-file-download:not(:target) .continue {
    opacity: 0;
}

.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 {
    display: none;
}

.page:is(#login-file-unlock, #login-file-success, #recovery-words-intro):target ~ .page#login-file-download,
.page#recovery-words-intro:target ~ .page#login-file-success,
.page#recovery-words-unlock:target ~ .page#recovery-words,
.page#backup-codes-unlock:target ~ .page#backup-codes-intro {
    display: flex; /* display page as blurred background or on backside during flip */
    max-height: 70.5rem; /* avoid that page overflows the foreground page */
}

.page#login-file-unlock,
.page#login-file-success,
.page#recovery-words-unlock,
.page#backup-codes-unlock {
    background-image: none;
    background-color: rgba(255, 255, 255, .0); /* transparent white, such that background page is visible */
}

.page#login-file-success {
    transition: opacity .3s .1s ease;
}

.page#login-file-success:not(:target) {
    opacity: 0;
}

.page#login-file-success .page-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page#login-file-success ul {
    list-style-type: none;
    font-size: 3rem;
    line-height: 7rem;
    font-weight: 600;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    color: rgba(31, 35, 72, .4); /* based on --nimiq-blue */
}

.page#login-file-success .bullet-point {
    display: inline-block;
    width: 3rem;
    position: relative;
}

.page#login-file-success .page-header-back-button {
    left: auto;
    right: 2rem;
    top: 2rem;
    height: 3rem;
    padding: 0;
    opacity: 1;
}

.page#login-file-success .page-header-back-button .nq-icon {
    opacity: .2;
    transition: opacity .3s var(--nimiq-ease);
}

.page#login-file-success .page-header-back-button:hover,
.page#login-file-success .page-header-back-button:active,
.page#login-file-success .page-header-back-button:focus {
    transform: none;
}

.page#login-file-success .page-header-back-button:hover .nq-icon,
.page#login-file-success .page-header-back-button:active .nq-icon,
.page#login-file-success .page-header-back-button:focus .nq-icon {
    opacity: .4;
}

.page#login-file-success .bullet-point::before {
    content: '\25cf';
    position: absolute;
    top: -1.5rem;
    left: 1rem;
    font-size: 1.5rem;
}

.page#login-file-success h1 {
    margin: 0;
    text-align: center;
}

.page#login-file-success p {
    text-align: center;
}

/* backup codes view transition setup */
.page[id*="backup-codes"]:not(.disable-view-transition-names):target,
.page[id*="backup-codes"].enforce-view-transition-names {
    view-transition-name: backup-codes-page;
}
#rotation-container:has(.page[id*="backup-codes"]:target) ~ .global-close {
    view-transition-name: global-close;
}
.page[id*="backup-codes"]:not(.disable-view-transition-names):target .nq-button,
.page[id*="backup-codes"].enforce-view-transition-names .nq-button {
    view-transition-name: backup-codes-continue-button;
}
.page[id*="backup-codes"]:not(.disable-view-transition-names):target .page-header-back-button,
.page[id*="backup-codes"].enforce-view-transition-names .page-header-back-button {
    view-transition-name: backup-codes-page-header-back-button;
}
::view-transition-old(backup-codes-page),
::view-transition-new(backup-codes-page) {
    height: 100%;
}

/* blur when page is displayed in background */
.page#backup-codes-intro :is(.page-header, .page-footer) .nq-notice,
.page#backup-codes-intro .backup-codes-illustration {
    transition: filter .6s, opacity .6s;
}
.page#backup-codes-intro:not(.enforce-view-transition-names):not(:target) :is(.page-header, .page-footer) .nq-notice {
    filter: blur(10px);
    opacity: .4;
}
.page#backup-codes-intro:not(.enforce-view-transition-names):not(:target) .backup-codes-illustration {
    filter: blur(20px);
    opacity: .15;
}
/* hide elements which don't look nice in the background when blurred */
.page#backup-codes-intro:not(.enforce-view-transition-names):not(:target) :is(.page-header, .page-footer) > :not(.nq-notice) {
    opacity: 0;
}

/* individual export backup codes page and element styles */

.page:is([id*="backup-codes"]):not(#backup-codes-unlock) .page-header {
    padding-top: 3rem;
    padding-bottom: 1.5rem;
}

.page:is(#backup-codes-intro, #backup-codes-send-code-1, #backup-codes-send-code-2, #backup-codes-success) .nq-notice {
    text-align: center;
    line-height: 1.38;
}

.page:is(#backup-codes-intro, #backup-codes-send-code-1, #backup-codes-send-code-2, #backup-codes-success) .page-header .nq-notice,
.page#backup-codes-send-code-1 .page-footer .nq-notice {
    margin-top: 1.75rem;
    color: rgba(255, 255, 255, .7);
}

.page:is(#backup-codes-intro, #backup-codes-success) .page-footer .nq-notice {
    margin: 1rem 0;
}

.page#backup-codes-intro .page-footer .nq-notice {
    margin-bottom: 1.25rem;
    white-space: pre-line;
}

.page#backup-codes-success .page-footer .nq-notice {
    margin: 0 3rem 3.25rem;
}

.page#backup-codes-send-code-1.loading .page-footer .hide-loading,
.page#backup-codes-send-code-1:not(.loading) .page-footer .show-loading {
    display: none;
}

.page#backup-codes-send-code-1 .page-footer .nq-link {
    margin: -1.5rem 0 1rem;
}

.page:is(#backup-codes-send-code-1-confirm, #backup-codes-send-code-2-confirm) .page-footer .nq-button-s {
    margin-bottom: 2rem;
    padding: 0 3rem;
    align-self: center;
    background: rgba(255, 255, 255, .1);
}