@keyframes shake {
    from { transform: none }
    15%  { transform: translate3d(-21%,0,0) rotate(-5deg) }
    30%  { transform: translate3d( 13%,0,0) rotate( 3deg) }
    45%  { transform: translate3d( -8%,0,0) rotate(-3deg) }
    60%  { transform: translate3d(  5%,0,0) rotate( 2deg) }
    75%  { transform: translate3d( -3%,0,0) rotate(-1deg) }
    to   { transform: none }
}

@keyframes fade {
    from { opacity: 0; }
}

@keyframes grow {
    from { transform: scale(0.9); }
}

@keyframes from-left {
    from { opacity: 0; transform: scale(0.8) translateX(-50%); }
    25%  { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes from-right {
    from { opacity: 0; transform: scale(0.8) translateX(50%); }
    25%  { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes from-bottom {
    from { opacity: 0; transform: translateY(50px); }
    25%  { opacity: 0; }
    to   { opacity: 1; }
}

.shake {
    animation-name: shake;
}

.fade-in, .fade-out {
    animation-name: fade;
}

.from-left-in, .from-left-out {
    animation-name: from-left;
}

.from-right-in, .from-right-out {
    animation-name: from-bottom;
}

.fade-out, .from-left-out, .from-right-out {
    animation-direction: reverse;
}

.shake, .fade-in, .fade-out,
.from-left-in, .from-left-out, .from-right-in, .from-right-out {
    animation-duration: 0.4s;
}

[icon-identicon-plus],
[icon-qr-scan],
[icon-qr-code] {
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

[icon-qr-scan],
[icon-qr-code] {
    cursor: pointer;
}

[icon-identicon-plus] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 37 32" height="32" width="37"><g opacity=".5"><g opacity=".3" transform="matrix(1.00001 0 0 1 0 0)" fill="%23fff"><mask id="a"><path d="M35.6 14.5l-7.5-13A3 3 0 0 0 25.5 0h-15a3 3 0 0 0-2.6 1.5l-7.5 13a3 3 0 0 0 0 3l7.5 13a3 3 0 0 0 2.6 1.5h15a3 3 0 0 0 2.6-1.5l7.5-13a3 3 0 0 0 0-3z"/></mask><path mask="url(%23a)" d="M35.6 14.5l-7.5-13A3 3 0 0 0 25.5 0h-15a3 3 0 0 0-2.6 1.5l-7.5 13a3 3 0 0 0 0 3l7.5 13a3 3 0 0 0 2.6 1.5h15a3 3 0 0 0 2.6-1.5l7.5-13a3 3 0 0 0 0-3z" stroke="%231f2348" stroke-width="3"/></g></g><path d="M12 16c0 .41.34.75.75.75h4.38c.06 0 .12.06.12.13v4.37a.75.75 0 0 0 1.5 0v-4.38c0-.06.06-.12.13-.12h4.37a.75.75 0 0 0 0-1.5h-4.38a.12.12 0 0 1-.12-.13v-4.37a.75.75 0 0 0-1.5 0v4.38c0 .06-.06.12-.13.12h-4.37A.75.75 0 0 0 12 16z" fill="%231f2348" opacity=".5"/></svg>');
}

[icon-qr-scan] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 40"><g fill="%231F2348"><path d="M1.21 7.06c.67 0 1.21-.54 1.21-1.21l-.04-3.12a.3.3 0 0 1 .3-.3H5.7a1.21 1.21 0 1 0 0-2.43H2.37A2.4 2.4 0 0 0 0 2.42v3.43c0 .67.54 1.21 1.21 1.21zM5.69 37.58H2.73a.3.3 0 0 1-.3-.3v-3.13a1.21 1.21 0 1 0-2.43 0v3.43A2.4 2.4 0 0 0 2.37 40H5.7a1.21 1.21 0 0 0 0-2.42zM38.79 32.94c-.67 0-1.21.54-1.21 1.21l.04 3.12a.3.3 0 0 1-.3.3H34.3a1.21 1.21 0 1 0 0 2.43h3.32A2.4 2.4 0 0 0 40 37.58v-3.43c0-.67-.54-1.21-1.21-1.21zM37.63 0H34.3a1.21 1.21 0 1 0 0 2.42h2.96c.17 0 .3.14.3.3v3.13a1.21 1.21 0 0 0 2.43 0V2.42A2.4 2.4 0 0 0 37.63 0z"/><path fill-rule="evenodd" d="M13.94 15.15H6.67c-.67 0-1.22-.54-1.22-1.21V6.67c0-.67.55-1.21 1.22-1.21h7.27c.67 0 1.21.54 1.21 1.2v7.28c0 .67-.54 1.21-1.21 1.21zM8.18 7.88a.3.3 0 0 0-.3.3v4.24c0 .17.13.3.3.3h4.24a.3.3 0 0 0 .3-.3V8.18a.3.3 0 0 0-.3-.3H8.18zM6.67 24.85h7.27c.67 0 1.21.54 1.21 1.21v7.27c0 .67-.54 1.22-1.21 1.22H6.67c-.67 0-1.22-.55-1.22-1.22v-7.27c0-.67.55-1.21 1.22-1.21zm5.75 7.27a.3.3 0 0 0 .3-.3v-4.24a.3.3 0 0 0-.3-.3H8.18a.3.3 0 0 0-.3.3v4.24c0 .17.13.3.3.3h4.24zM26.06 5.45h7.27c.67 0 1.21.55 1.21 1.22v7.27c0 .67-.54 1.21-1.2 1.21h-7.28c-.67 0-1.21-.54-1.21-1.21V6.67c0-.67.54-1.22 1.21-1.22zm5.76 7.28a.3.3 0 0 0 .3-.3V8.17a.3.3 0 0 0-.3-.3h-4.24a.3.3 0 0 0-.3.3v4.24c0 .17.13.3.3.3h4.24z" clip-rule="evenodd"/><path d="M17.58 10.6h1.2a.9.9 0 1 0 0-1.81.3.3 0 0 1-.3-.3V6.66a.9.9 0 1 0-1.81 0V9.7c0 .5.4.9.9.9zM21.21 7.58c.17 0 .3.13.3.3v6.66a.9.9 0 1 0 1.82 0V6.67c0-.5-.4-.91-.9-.91H21.2a.9.9 0 1 0 0 1.82zM12.42 18.18c0 .5.41.91.91.91h4.25c.5 0 .9-.4.9-.9v-4.86a.9.9 0 1 0-1.81 0v3.64a.3.3 0 0 1-.3.3h-3.04c-.5 0-.9.4-.9.91z"/><path d="M9.09 17.27c-.5 0-.9.4-.9.91v3.03a.3.3 0 0 1-.31.3H6.67a.9.9 0 1 0 0 1.82h15.75c.5 0 .91-.4.91-.9v-3.64a.9.9 0 0 0-1.82 0v2.42a.3.3 0 0 1-.3.3h-10.9a.3.3 0 0 1-.31-.3v-3.03c0-.5-.4-.9-.91-.9zM22.12 26.06c0-.5-.4-.9-.9-.9h-3.64c-.5 0-.91.4-.91.9v4.85a.9.9 0 1 0 1.81 0v-3.64c0-.16.14-.3.3-.3h2.43c.5 0 .91-.4.91-.9zM33.33 32.42h-10.3a.3.3 0 0 1-.3-.3V29.7a.9.9 0 1 0-1.82 0v3.63c0 .5.4.91.9.91h11.52a.9.9 0 0 0 0-1.82z"/><path fill-rule="evenodd" d="M29.1 30h-3.65a.9.9 0 0 1-.9-.91v-3.64c0-.5.4-.9.9-.9h3.64c.5 0 .91.4.91.9v3.64c0 .5-.4.91-.9.91zm-2.43-3.64a.3.3 0 0 0-.3.3v1.22c0 .17.13.3.3.3h1.2a.3.3 0 0 0 .31-.3v-1.21a.3.3 0 0 0-.3-.3h-1.21z" clip-rule="evenodd"/><path d="M32.73 20.9c-.5 0-.91.42-.91.92v7.88a.9.9 0 0 0 1.82 0v-7.88c0-.5-.41-.91-.91-.91zM33.64 17.58c0-.5-.41-.91-.91-.91h-6.67c-.5 0-.9.4-.9.9v3.64a.9.9 0 0 0 1.8 0V18.8c0-.17.15-.3.31-.3h5.46c.5 0 .9-.41.9-.91z"/></g></svg>');
}

[icon-qr-code] {
    background-image: url('data:image/svg+xml,<svg width="99" height="99" viewBox="0 0 99 99" xmlns="http://www.w3.org/2000/svg"><g fill="%231F2348"><path fill-rule="evenodd" clip-rule="evenodd" d="M28.9 33H4A4.1 4.1 0 0 1 0 28.9V4A4.1 4.1 0 0 1 4.1 0H29A4.1 4.1 0 0 1 33 4.1V29a4.1 4.1 0 0 1-4.1 4.1zM9.3 8.2a1 1 0 0 0-1 1v14.5c0 .6.4 1 1 1h14.4c.6 0 1-.4 1-1V9.3c0-.6-.4-1-1-1H9.3zM4 66H29a4.1 4.1 0 0 1 4.1 4.1V95a4.1 4.1 0 0 1-4.1 4.1H4A4.1 4.1 0 0 1 0 94.9V70A4.1 4.1 0 0 1 4.1 66zm19.6 24.8c.6 0 1-.5 1-1V75.2c0-.6-.4-1-1-1H9.3a1 1 0 0 0-1 1v14.4c0 .6.4 1 1 1h14.4zM70.1 0H95A4.1 4.1 0 0 1 99 4.1V29a4.1 4.1 0 0 1-4.1 4.1H70a4.1 4.1 0 0 1-4.1-4.1V4A4.1 4.1 0 0 1 70.1 0zm19.6 24.8c.6 0 1-.5 1-1V9.2c0-.6-.4-1-1-1H75.3a1 1 0 0 0-1 1v14.4c0 .6.4 1 1 1h14.4z"/><path d="M41.3 17.5h4a3 3 0 1 0 0-6.2 1 1 0 0 1-1-1V4.1a3 3 0 0 0-6.1 0v10.3a3 3 0 0 0 3 3.1zM53.5 7.2c.6 0 1 .5 1 1V31a3 3 0 0 0 6.2 0V4.1a3 3 0 0 0-3-3h-4.2a3 3 0 0 0 0 6.1zM23.7 43.3a3 3 0 0 0 3.1 3.1h14.4a3 3 0 0 0 3.1-3V26.7a3 3 0 0 0-6.1 0v12.4c0 .6-.5 1-1 1H26.7a3 3 0 0 0-3 3.1z"/><path d="M12.4 40.2a3 3 0 0 0-3.1 3.1v10.3c0 .6-.5 1-1 1H4a3 3 0 0 0 0 6.2h53.6a3 3 0 0 0 3.1-3V45.4a3 3 0 0 0-6.1 0v8.2c0 .6-.5 1-1 1H16.4a1 1 0 0 1-1-1V43.3a3 3 0 0 0-3.1-3zm44.3 30a3 3 0 0 0-3-3.2H41.1a3 3 0 0 0-3 3.1v16.5a3 3 0 0 0 6.1 0V74.3c0-.6.5-1 1-1h8.3a3 3 0 0 0 3.1-3.2zM95 91.7h-35a1 1 0 0 1-1.1-1v-8.3a3 3 0 1 0-6.2 0v12.4a3 3 0 0 0 3 3H95a3 3 0 0 0 0-6.1z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M80.4 83.5H68.1a3 3 0 0 1-3.1-3V68a3 3 0 0 1 3-3.1h12.4a3 3 0 0 1 3.1 3v12.4a3 3 0 0 1-3 3.1zm-8.2-12.3a1 1 0 0 0-1 1v4.1c0 .6.4 1 1 1h4.1c.6 0 1-.4 1-1v-4.1c0-.6-.4-1-1-1h-4.1z"/><path d="M92.8 52.6a3 3 0 0 0-3 3v26.9a3 3 0 0 0 6.1 0V55.7a3 3 0 0 0-3-3.1zM96 41.2a3 3 0 0 0-3-3H70a3 3 0 0 0-3 3v12.4a3 3 0 0 0 6.1 0v-8.2c0-.6.5-1 1-1h18.6a3 3 0 0 0 3.1-3.1z"/></g></svg>');
}

html,
body {
    overflow-x: hidden;
    min-height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* stretch as far as possible on iPhone */
    margin: 0;
    color: white;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

body .nimiq-dark {
    color: #3b3b3b;
}

body {
    justify-content: center;
    align-items: center;
}

*, *:before, *:after {
    box-sizing: inherit;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.row {
    display: flex;
    align-items: center;
}

/* Lists */

ul, ol{
    padding-left: 24px;
}

ul > li, ol >li {
    padding-bottom: 8px;
}

.hidden {
    visibility: hidden;
}

.display-none {
    display: none !important;
}

iframe[name="keyguard"],
iframe[name="network"] {
    display: none;
}

.spacing-top {
    margin-top: 36px;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  /*
  @asset(MaterialIcons-Regular.eot)
  @asset(MaterialIcons-Regular.woff2)
  @asset(MaterialIcons-Regular.woff)
  @asset(MaterialIcons-Regular.ttf)
   */
  src: url(./MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(./MaterialIcons-Regular.woff2) format('woff2'),
       url(./MaterialIcons-Regular.woff) format('woff'),
       url(./MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  vertical-align: middle;
  margin-top: -0.1em;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

h1 {
    font-size: 28px;
    font-weight: 300;
    max-width: 100%;
    text-align: center;
    padding: 0;
}

h2 {
    font-size: 24px;
    font-weight: 300;
}

h1, h2, p {
    margin: 0;
}


p {
    text-align: center;
    line-height: 19px;
}

a {
    text-decoration: none;
    color: unset;
}

p a {
    text-decoration: underline;
}

a[secondary],
button[secondary] {
    font-size: 13px;
    font-weight: 600;
    cursor:  pointer;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    display: block;
    color: #5c5c5c;
}

[secondary]+button,
[secondary]+[button] {
    margin-top: 40px;
}

[secondary]+[secondary],
button+[secondary],
[button]+[secondary] {
    margin-top: 24px;
    margin-bottom:  8px;
}

li {
    line-height: 24px;
    text-align: left;
}

@media (max-width: 320px) {
    h1 {
        font-size: 24px;
    }

    h1 + h2 {
        font-size: 13px;
        padding-bottom: 8px;
    }
}


:root {
    --box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    --max-content-width: 960px;
}

/*!
Nimiq Style CSS Framework v0.7.5
URL: https://github.com/nimiq/nimiq-style
Styleguide: https://nimiq.com/styleguide
*/html{font-size:8px;--nimiq-size:8px;font-family:Muli,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-size:2.25rem}.nq-h1,.nq-style h1{font-size:3rem;line-height:1.2;font-weight:700;margin:3rem 0}.nq-h2,.nq-style h2{font-size:2.5rem;line-height:1.2;font-weight:700;margin:2.5rem 0}.nq-h3,.nq-style h3{font-size:2rem;line-height:1.2;font-weight:700;margin:2rem 0}.nq-style p,.nq-text{font-size:2rem;line-height:1.3125;color:rgba(31,35,72,.7);margin:2rem 0}.nq-text-s{font-size:1.75rem;line-height:1.2;font-weight:600;margin:1rem 0}.nq-label{font-size:1.75rem;line-height:.857;font-weight:600;text-transform:uppercase;letter-spacing:.107em;margin:1rem 0;color:rgba(31,35,72,.7)}.nq-notice{font-weight:600;font-size:2rem}.nq-notice.info{color:var(--nimiq-light-blue)}.nq-notice.success{color:var(--nimiq-green)}.nq-notice.warning{color:var(--nimiq-orange)}.nq-notice.error{color:var(--nimiq-red)}.nq-link,.nq-style a,.nq-text a{color:var(--nimiq-light-blue);text-decoration:none}.nq-link:active,.nq-link:hover{text-decoration:underline}.nq-list,.nq-style ol,.nq-style ul{font-size:2rem;margin:2rem 0}.nq-list li,.nq-style li{margin:.5rem 0}.nq-button-s::-moz-focus-inner,.nq-button::-moz-focus-inner{border:0}.nq-button{position:relative;height:7.5rem;line-height:2.5rem;background-image:var(--nimiq-blue-bg);color:#fff;font-size:2rem;font-weight:700;text-transform:uppercase;letter-spacing:.094em;border:none;padding:0 4rem;border-radius:500px;min-width:25rem;margin:2rem auto;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.15);cursor:pointer;transition:transform 450ms var(--nimiq-ease),box-shadow 450ms var(--nimiq-ease);will-change:box-shadow;text-decoration:none;display:block;text-align:center;font-family:inherit}a.nq-button{display:flex;justify-content:center;align-items:center}.nq-button:not([disabled])::before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;border-radius:500px;background-image:var(--nimiq-blue-bg-darkened);opacity:0;transition:opacity .3s var(--nimiq-ease);z-index:-1}.nq-button:focus,.nq-button:hover{box-shadow:0 1rem 2.5rem rgba(0,0,0,.2);transform:translate3D(0,-2px,0)}.nq-button:active::before,.nq-button:focus::before,.nq-button:hover::before{opacity:1}.nq-button:active{outline:0;box-shadow:0 .2rem .3rem rgba(0,0,0,.2);transform:translate3D(0,1px,0);transition:transform .2s cubic-bezier(.41,.34,.26,1.55),box-shadow .2s cubic-bezier(.41,.34,.26,1.55)!important}.nq-button-pill,.nq-button-s{display:inline-block;font-size:1.75rem;line-height:3.375rem;height:3.375rem;text-decoration:none;font-weight:700;padding:0 1.5rem;background-color:rgba(31,35,72,.07);color:var(--nimiq-blue);border-radius:1.6875rem;transition:color .3s var(--nimiq-ease),background-color .3s var(--nimiq-ease);will-change:color,background-color;border:none;cursor:pointer;position:relative;font-family:inherit}.nq-button-s[disabled]{opacity:.4;cursor:not-allowed}.nq-button-pill::before,.nq-button-s::before{content:'';display:block;position:absolute;left:-1.5rem;top:-1.5rem;right:-1.5rem;bottom:-1.5rem}.nq-button-s:active,.nq-button-s:focus,.nq-button-s:hover{color:var(--nimiq-blue-darkened);background:rgba(31,35,72,.12)}.nq-button-s[disabled]:hover{background:rgba(31,35,72,.07)}.nq-button-pill{color:#fff;background:var(--nimiq-blue);background-image:var(--nimiq-blue-bg)}.nq-button-pill:active,.nq-button-pill:focus,.nq-button-pill:hover{background:var(--nimiq-blue-darkened);background-image:var(--nimiq-blue-bg-darkened)}.nq-button.light-blue{background:var(--nimiq-light-blue);background-image:var(--nimiq-light-blue-bg)}.nq-button.light-blue::before{background-image:var(--nimiq-light-blue-bg-darkened)}.nq-button.light-blue.inverse{color:var(--nimiq-light-blue)}.nq-button.light-blue.inverse:active,.nq-button.light-blue.inverse:focus,.nq-button.light-blue.inverse:hover{color:var(--nimiq-light-blue-darkened)}.nq-button-s.light-blue{color:var(--nimiq-light-blue);background:rgba(5,130,202,.1)}.nq-button-s.light-blue:active,.nq-button-s.light-blue:focus,.nq-button-s.light-blue:hover{color:var(--nimiq-light-blue-darkened);background:rgba(5,130,202,.2)}.nq-button-s.light-blue[disabled]:hover{color:var(--nimiq-light-blue);background:rgba(5,130,202,.1)}.nq-button-pill.light-blue{background:var(--nimiq-light-blue);background-image:var(--nimiq-light-blue-bg)}.nq-button-pill.light-blue:active,.nq-button-pill.light-blue:focus,.nq-button-pill.light-blue:hover{background:var(--nimiq-light-blue-darkened);background-image:var(--nimiq-light-blue-bg-darkened)}.nq-button.green{background:var(--nimiq-green);background-image:var(--nimiq-green-bg)}.nq-button.green::before{background-image:var(--nimiq-green-bg-darkened)}.nq-button.green.inverse{color:var(--nimiq-green)}.nq-button.green.inverse:active,.nq-button.green.inverse:focus,.nq-button.green.inverse:hover{color:var(--nimiq-green-darkened)}.nq-button-s.green{color:var(--nimiq-green);background:rgba(33,188,165,.1)}.nq-button-s.green:active,.nq-button-s.green:focus,.nq-button-s.green:hover{color:var(--nimiq-green-darkened);background:rgba(33,188,165,.2)}.nq-button-s.green[disabled]:hover{color:var(--nimiq-green);background:rgba(33,188,165,.1)}.nq-button-pill.green{background:var(--nimiq-green);background-image:var(--nimiq-green-bg)}.nq-button-pill.green:active,.nq-button-pill.green:focus,.nq-button-pill.green:hover{background:var(--nimiq-green-darkened);background-image:var(--nimiq-green-bg-darkened)}.nq-button.orange{background:var(--nimiq-orange);background-image:var(--nimiq-orange-bg)}.nq-button.orange::before{background-image:var(--nimiq-orange-bg-darkened)}.nq-button.orange.inverse{color:var(--nimiq-orange)}.nq-button.orange.inverse:active,.nq-button.orange.inverse:focus,.nq-button.orange.inverse:hover{color:var(--nimiq-orange-darkened)}.nq-button-s.orange{color:var(--nimiq-orange);background:rgba(252,135,2,.1)}.nq-button-s.orange:active,.nq-button-s.orange:focus,.nq-button-s.orange:hover{color:var(--nimiq-orange-darkened);background:rgba(252,135,2,.2)}.nq-button-s.orange[disabled]:hover{color:var(--nimiq-orange);background:rgba(252,135,2,.1)}.nq-button-pill.orange{background:var(--nimiq-orange);background-image:var(--nimiq-orange-bg)}.nq-button-pill.orange:active,.nq-button-pill.orange:focus,.nq-button-pill.orange:hover{background:var(--nimiq-orange-darkened);background-image:var(--nimiq-orange-bg-darkened)}.nq-button.red{background:var(--nimiq-red);background-image:var(--nimiq-red-bg)}.nq-button.red::before{background:var(--nimiq-red-bg-darkened)}.nq-button.red.inverse{color:var(--nimiq-red)}.nq-button.red.inverse:active,.nq-button.red.inverse:focus,.nq-button.red.inverse:hover{color:var(--nimiq-red-darkened)}.nq-button-s.red{color:var(--nimiq-red);background:rgba(216,65,51,.1)}.nq-button-s.red:active,.nq-button-s.red:focus,.nq-button-s.red:hover{color:var(--nimiq-red-darkened);background:rgba(216,65,51,.2)}.nq-button-s.red[disabled]:hover{color:var(--nimiq-red);background:rgba(216,65,51,.1)}.nq-button-pill.red{background:var(--nimiq-red);background-image:var(--nimiq-red-bg)}.nq-button-pill.red:active,.nq-button-pill.red:focus,.nq-button-pill.red:hover{background:var(--nimiq-red-darkened);background-image:var(--nimiq-red-bg-darkened)}.nq-button.gold{background:var(--nimiq-gold);background-image:var(--nimiq-gold-bg)}.nq-button.gold:before{background:var(--nimiq-gold-bg-darkened)}.nq-button.gold.inverse{color:var(--nimiq-gold)}.nq-button.gold.inverse:active,.nq-button.gold.inverse:focus,.nq-button.gold.inverse:hover{color:var(--nimiq-gold-darkened)}.nq-button-pill.gold{background:var(--nimiq-gold);background-image:var(--nimiq-gold-bg)}.nq-button-pill.gold:active,.nq-button-pill.gold:focus,.nq-button-pill.gold:hover{background:var(--nimiq-gold-darkened);background-image:var(--nimiq-gold-bg-darkened)}.nq-button.inverse{background:#fff;color:var(--nimiq-blue);transition:transform 450ms var(--nimiq-ease),box-shadow 450ms var(--nimiq-ease),color .3s var(--nimiq-ease)}.nq-button.inverse::before{background:#eff0f2}.nq-button-s.inverse{background:rgba(255,255,255,.2);color:#fff}.nq-button-s.inverse:active,.nq-button-s.inverse:focus,.nq-button-s.inverse:hover{background:rgba(255,255,255,.25)}.nq-button[disabled]{background:rgba(31,35,72,.07);color:rgba(31,35,72,.3);box-shadow:none!important;transform:none;cursor:not-allowed}.nq-button[disabled]:active,.nq-button[disabled]:hover{transform:none}.nq-button.inverse[disabled],.nq-button.inverse[disabled]:active,.nq-button.inverse[disabled]:hover{background:rgba(255,255,255,.2);color:rgba(255,255,255,.5)}.nq-button-pill::after,.nq-button-s::after,.nq-button::after{content:"";position:absolute;left:-5px;top:-5px;right:-5px;bottom:-5px;border:2px solid rgba(5,130,202,.5);border-radius:500px;opacity:0}.nq-button-pill.inverse::after,.nq-button-s.inverse::after,.nq-button.inverse::after{border-color:rgba(255,255,255,.4)}.nq-button-pill:focus,.nq-button-s:focus,.nq-button:focus{outline:0}.nq-button-pill:focus::after,.nq-button-s:focus::after,.nq-button:focus::after{opacity:1}.nq-input{font-family:inherit;font-size:inherit;font-weight:inherit;padding:1rem 2rem;border:solid 2px rgba(31,35,72,.1);color:var(--nimiq-blue);background:0 0;border-radius:.5rem;outline:0;transition:color .2s ease,border .2s ease;background-clip:padding-box}.nq-input.vanishing{border-color:rgba(31,35,72,0)}.nq-input::placeholder{color:rgba(31,35,72,.5)}.nq-input:hover{border-color:rgba(31,35,72,.14)}.nq-input:focus::placeholder,.nq-input:hover::placeholder{color:rgba(5,130,202,.7)}.nq-input.vanishing:focus,.nq-input:focus{border-color:rgba(5,130,202,.2);color:var(--nimiq-light-blue)}body,html{box-sizing:border-box;-webkit-overflow-scrolling:touch;min-width:300px}*,:after,:before{box-sizing:inherit}.flex-grow{flex-grow:1}.flex-grow-half{flex-grow:.5}.flex-grow-double{flex-grow:2}.hidden{visibility:hidden}.display-none{display:none!important}.nq-card{max-width:75rem;background:var(--nimiq-card-bg);border-radius:1rem;box-shadow:0 .5rem 3.5rem rgba(0,0,0,.111158);margin:2rem;color:var(--nimiq-blue)}@media (max-width:450px){.nq-card{margin:2rem 1rem}}.nq-card-header{padding:4rem;text-align:center;border-top-left-radius:1rem;border-top-right-radius:1rem}@media (max-width:450px){.nq-card-header{padding:3rem}}.nq-card-header .nq-h1,.nq-card-header .nq-h2{margin:0}.nq-card-header .nq-notice{margin:3rem 0 0;text-align:center}.nq-card-body{padding:4rem}@media (max-width:450px){.nq-card-body{padding:3rem}}.nq-card-header+.nq-card-body{padding-top:1rem}.nq-card-body>:first-child{margin-top:0}.nq-card-body>:last-child{margin-bottom:0}.nq-card-footer{padding:1rem;border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.nq-card-body+.nq-card-footer{padding-top:0}.margin-top-5{margin-top:5rem}.margin-top-4{margin-top:4rem}.margin-top-3{margin-top:3rem}.margin-top-2{margin-top:2rem}.margin-top-1{margin-top:1rem}.nq-shadow{box-shadow:0 .5rem 1.5rem rgba(0,0,0,.15)}.nq-shadow-l{box-shadow:0 .5rem 2.5rem rgba(0,0,0,.15)}html{--nimiq-blue:#1F2348;--nimiq-light-blue:#0582CA;--nimiq-gold:#E9B213;--nimiq-green:#21BCA5;--nimiq-orange:#FC8702;--nimiq-red:#D94432;--nimiq-purple:#5F4B8B;--nimiq-pink:#FA7268;--nimiq-light-green:#88B04B;--nimiq-brown:#795548;--nimiq-gray:#F4F4F4;--nimiq-light-gray:#FAFAFA;--nimiq-blue-darkened:#151833;--nimiq-light-blue-darkened:#0071C3;--nimiq-gold-darkened:#E5A212;--nimiq-green-darkened:#20B29E;--nimiq-orange-darkened:#FC7500;--nimiq-red-darkened:#D13030;--nimiq-blue-bg:radial-gradient(ellipse at bottom right, #260133, var(--nimiq-blue));--nimiq-light-blue-bg:radial-gradient(ellipse at bottom right, #265DD7, var(--nimiq-light-blue));--nimiq-gold-bg:radial-gradient(ellipse at bottom right, #EC991C, var(--nimiq-gold));--nimiq-green-bg:radial-gradient(ellipse at bottom right, #41A38E, var(--nimiq-green));--nimiq-orange-bg:radial-gradient(ellipse at bottom right, #FD6216, var(--nimiq-orange));--nimiq-red-bg:radial-gradient(ellipse at bottom right, #CC3047, var(--nimiq-red));--nimiq-purple-bg:radial-gradient(ellipse at bottom right, #4D4C96, var(--nimiq-purple));--nimiq-pink-bg:radial-gradient(ellipse at bottom right, #E0516B, var(--nimiq-pink));--nimiq-light-green-bg:radial-gradient(ellipse at bottom right, #70B069, var(--nimiq-light-green));--nimiq-brown-bg:radial-gradient(ellipse at bottom right, #724147, var(--nimiq-brown));--nimiq-blue-bg-darkened:radial-gradient(ellipse at bottom right, #180021, var(--nimiq-blue-darkened));--nimiq-light-blue-bg-darkened:radial-gradient(ellipse at bottom right, #2355C4, var(--nimiq-light-blue-darkened));--nimiq-gold-bg-darkened:radial-gradient(ellipse at bottom right, #E58A1B, var(--nimiq-gold-darkened));--nimiq-green-bg-darkened:radial-gradient(ellipse at bottom right, #3D9988, var(--nimiq-green-darkened));--nimiq-orange-bg-darkened:radial-gradient(ellipse at bottom right, #EA5200, var(--nimiq-orange-darkened));--nimiq-red-bg-darkened:radial-gradient(ellipse at bottom right, #BF2D46, var(--nimiq-red-darkened));--nimiq-highlight-bg:rgba(31, 35, 72, 0.06);--nimiq-card-bg:white}body{color:var(--nimiq-blue);background:var(--nimiq-gray);margin:0}.nq-blue{color:var(--nimiq-blue)!important}.nq-light-blue{color:var(--nimiq-light-blue)!important}.nq-gold{color:var(--nimiq-gold)!important}.nq-green{color:var(--nimiq-green)!important}.nq-orange{color:var(--nimiq-orange)!important}.nq-red{color:var(--nimiq-red)!important}.nq-purple{color:var(--nimiq-purple)!important}.nq-pink{color:var(--nimiq-pink)!important}.nq-light-green{color:var(--nimiq-light-green)!important}.nq-brown{color:var(--nimiq-brown)!important}.nq-blue-bg{background:var(--nimiq-blue);background-image:var(--nimiq-blue-bg)}.nq-light-blue-bg{background:var(--nimiq-light-blue);background-image:var(--nimiq-light-blue-bg)}.nq-gold-bg{background:var(--nimiq-gold);background-image:var(--nimiq-gold-bg)}.nq-green-bg{background:var(--nimiq-green);background-image:var(--nimiq-green-bg)}.nq-orange-bg{background:var(--nimiq-orange);background-image:var(--nimiq-orange-bg)}.nq-red-bg{background:var(--nimiq-red);background-image:var(--nimiq-red-bg)}.nq-purple-bg{background:var(--nimiq-purple);background-image:var(--nimiq-purple-bg)}.nq-pink-bg{background:var(--nimiq-pink);background-image:var(--nimiq-pink-bg)}.nq-light-green-bg{background:var(--nimiq-light-green);background-image:var(--nimiq-light-green-bg)}.nq-brown-bg{background:var(--nimiq-brown);background-image:var(--nimiq-brown-bg)}.nq-gray-bg{background:var(--nimiq-gray)}.nq-blue-bg,.nq-blue-bg .nq-link,.nq-brown-bg,.nq-brown-bg .nq-link,.nq-gold-bg,.nq-gold-bg .nq-link,.nq-green-bg,.nq-green-bg .nq-link,.nq-light-blue-bg,.nq-light-blue-bg .nq-link,.nq-light-green-bg,.nq-light-green-bg .nq-link,.nq-orange-bg,.nq-orange-bg .nq-link,.nq-pink-bg,.nq-pink-bg .nq-link,.nq-purple-bg,.nq-purple-bg .nq-link,.nq-red-bg,.nq-red-bg .nq-link{color:#fff}.nq-blue-bg .nq-label,.nq-blue-bg .nq-text,.nq-brown-bg .nq-label,.nq-brown-bg .nq-text,.nq-gold-bg .nq-label,.nq-gold-bg .nq-text,.nq-green-bg .nq-label,.nq-green-bg .nq-text,.nq-light-blue-bg .nq-label,.nq-light-blue-bg .nq-text,.nq-light-green-bg .nq-label,.nq-light-green-bg .nq-text,.nq-orange-bg .nq-label,.nq-orange-bg .nq-text,.nq-pink-bg .nq-label,.nq-pink-bg .nq-text,.nq-purple-bg .nq-label,.nq-purple-bg .nq-text,.nq-red-bg .nq-label,.nq-red-bg .nq-text{color:rgba(255,255,255,.7)}.nq-blue-bg{--nimiq-light-blue:#0CA6FE}.nq-blue-bg{--nimiq-red:#FF5C48}.nq-blue-bg .nq-input,.nq-brown-bg .nq-input,.nq-gold-bg .nq-input,.nq-green-bg .nq-input,.nq-light-blue-bg .nq-input,.nq-light-green-bg .nq-input,.nq-orange-bg .nq-input,.nq-pink-bg .nq-input,.nq-purple-bg .nq-input,.nq-red-bg .nq-input{border-color:rgba(255,255,255,.2);color:#fff}.nq-blue-bg .nq-input.vanishing,.nq-brown-bg .nq-input.vanishing,.nq-gold-bg .nq-input.vanishing,.nq-green-bg .nq-input.vanishing,.nq-light-blue-bg .nq-input.vanishing,.nq-light-green-bg .nq-input.vanishing,.nq-orange-bg .nq-input.vanishing,.nq-pink-bg .nq-input.vanishing,.nq-purple-bg .nq-input.vanishing,.nq-red-bg .nq-input.vanishing{border-color:rgba(255,255,255,0)}.nq-blue-bg .nq-input::placeholder,.nq-brown-bg .nq-input::placeholder,.nq-gold-bg .nq-input::placeholder,.nq-green-bg .nq-input::placeholder,.nq-light-blue-bg .nq-input::placeholder,.nq-light-green-bg .nq-input::placeholder,.nq-orange-bg .nq-input::placeholder,.nq-pink-bg .nq-input::placeholder,.nq-purple-bg .nq-input::placeholder,.nq-red-bg .nq-input::placeholder{color:rgba(255,255,255,.3)}.nq-blue-bg .nq-input:focus,.nq-blue-bg .nq-input:hover,.nq-brown-bg .nq-input:focus,.nq-brown-bg .nq-input:hover,.nq-gold-bg .nq-input:focus,.nq-gold-bg .nq-input:hover,.nq-green-bg .nq-input:focus,.nq-green-bg .nq-input:hover,.nq-light-blue-bg .nq-input:focus,.nq-light-blue-bg .nq-input:hover,.nq-light-green-bg .nq-input:focus,.nq-light-green-bg .nq-input:hover,.nq-orange-bg .nq-input:focus,.nq-orange-bg .nq-input:hover,.nq-pink-bg .nq-input:focus,.nq-pink-bg .nq-input:hover,.nq-purple-bg .nq-input:focus,.nq-purple-bg .nq-input:hover,.nq-red-bg .nq-input:focus,.nq-red-bg .nq-input:hover{border-color:rgba(255,255,255,.3);color:#fff}.nq-icon{width:1em;height:1em}html{--nimiq-ease:cubic-bezier(0.25, 0, 0, 1)}
x-route, [x-route] {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

.x-route-parent {
    position: relative;
}

x-route.visible, [x-route].visible {
    display: flex;
}

x-route.current, [x-route].current {
    position: static;
}

x-toast {
    position: fixed;
    top: 0;
    width: 100%;
    pointer-events: none;
    display: flex;
    justify-content: center;
    z-index: 3;
    transform: translateY(-110%);
    text-align: center;
}

x-toast [toast-content] {
    min-height: 20px;
    padding: 14px 24px 14px 16px;
    background: #333;
    color: white;
    border-radius: 3px;
    animation-fill-mode: backwards;
    box-shadow: var(--box-shadow);
    margin: 24px;
    pointer-events: initial;
}

x-toast [toast-content]::before {
    content: "info";
    color: inherit;
    margin-right: 8px;
    opacity: 0.8;

    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    vertical-align: middle;
    margin-top: -0.1em;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

/* types */

x-toast [toast-content].error {
    background: var(--nimiq-red);
}

x-toast [toast-content].warning {
    background: var(--nimiq-orange);
    color: #333;
}

x-toast [toast-content].success::before {
    content: "check_circle";
}

x-toast [toast-content].error::before {
    content: "cancel";
}

x-toast [toast-content].warning::before {
    content: "warning";
}

/* animation */

x-toast.x-toast-show {
    animation: x-toast-show 3s;
}

@keyframes x-toast-show {
    from {
        transform: translateY(-110%);
        opacity: 0;
    }

    5% {
        opacity: 1;
        transform: none;
    }

    95% {
        opacity: 1;
        transform: none;
    }

    100% {
        transform: translateY(-110%);
        opacity: 0;
    }
}

@media (max-width: 420px) {
    x-toast [toast-content] {
        margin: 0px;
        width: 100vw;
        border-radius: 0;
    }
}


x-address, .x-address{
    width: 100%;
    min-width: 320px;
    max-width: 400px;
    box-sizing: border-box;
    padding: 8px 16px;
    font-size: 14px;
    word-spacing: -0.15em;
    white-space: nowrap;
    font-family: 'Fira Mono', monospace;
}

@media (max-width: 460px) {
    x-address, .x-address {
        padding: 8px 4px;
    }
}

@media (max-width: 400px) {
    x-address, .x-address {
        font-size: 12px;
    }
}

@media (max-width: 340px) {
    x-address, .x-address {
        font-size: 11px;
    }
}

x-address {
    cursor: pointer;
    border-radius: 3px;
}

x-address:hover{
    background: rgba(0, 0, 0, 0.2);
}

x-modals {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: background .4s ease-in-out;
    z-index: 1;
}

x-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    padding: 24px 0 60px;
}

x-modal-container > * {
    animation-duration: .4s !important;
    animation-fill-mode: both;
}


.x-modal {
    background: white;
    color: rgba(0,0,0,0.8);
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
        0 1px 8px 0 rgba(0, 0, 0, 0.12),
        0 3px 3px -2px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: auto;

    max-width: 97%; /* Could also use 97vw */
}

.modal-header {
    padding-top: 16px;
    text-align: center;
    position: relative;
    /* border-bottom: 1px solid #f3f3f3; */
    padding-bottom: 16px;
}

.modal-header h2 {
    padding: 8px 46px;
    font-size: 20px;
    line-height: 18px;
    font-weight: 600;
}

.modal-header x-popup-menu {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - 22px);
    margin: 11px;
}

.modal-header .header-button,
.modal-header [x-modal-close] {
    position: absolute;
    top: 0;
    cursor: pointer;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 13px;
    border-radius: 50%;
}

.modal-header .header-button:hover,
.modal-header .header-button:focus,
.modal-header [x-modal-close]:hover,
.modal-header [x-modal-close]:focus {
    background-color: rgba(0, 0, 0, 0.1);
}

.modal-header .header-button {
    left: 0;
    background-size: 24px;
}

.modal-header [x-modal-close] {
    right: 0;
}

@keyframes background-progress {
    0%  { background-position: 0% 0 }
    100%{ background-position: 200% 0 }
}

.modal-body {
    padding: 32px 32px;
    position: relative; /* Required for absolute positioning of account icon */
}

@media (max-width: 480px) {
    .modal-body {
        padding: 24px 12px;
    }
}

x-loading-animation {
    opacity: 1;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><style>@keyframes dash-animation { to { transform: rotate(240deg) translateZ(0); } } %23circle { animation: 3s dash-animation infinite linear; transform: rotate(-120deg) translateZ(0); transform-origin: center; }</style><defs><clipPath id="hexClip"><path clip-rule="evenodd" d="M16 4.29h32L64 32 48 59.71H16L0 32zm4.62 8h22.76L54.76 32 43.38 51.71H20.62L9.24 32z"/></clipPath></defs><path fill-rule="evenodd" d="M16 4.29h32L64 32 48 59.71H16L0 32zm4.62 8h22.76L54.76 32 43.38 51.71H20.62L9.24 32z" fill="%23fff" opacity=".2"/><g clip-path="url(%23hexClip)"><circle id="circle" cx="32" cy="32" r="16" fill="none" stroke-width="32" stroke="%23F6AE2D" stroke-dasharray="16.666 84.666"/></g></svg>');/* ALSO works in Firefox! */
    /*background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48c3R5bGU+QGtleWZyYW1lcyBkYXNoLWFuaW1hdGlvbiB7IHRvIHsgdHJhbnNmb3JtOiByb3RhdGUoMjQwZGVnKSB0cmFuc2xhdGVaKDApOyB9IH0gI2NpcmNsZSB7IGFuaW1hdGlvbjogM3MgZGFzaC1hbmltYXRpb24gaW5maW5pdGUgbGluZWFyOyB0cmFuc2Zvcm06IHJvdGF0ZSgtMTIwZGVnKSB0cmFuc2xhdGVaKDApOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7IH08L3N0eWxlPjxkZWZzPjxjbGlwUGF0aCBpZD0iaGV4Q2xpcCI+PHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYgNC4yOWgzMkw2NCAzMiA0OCA1OS43MUgxNkwwIDMyem00LjYyIDhoMjIuNzZMNTQuNzYgMzIgNDMuMzggNTEuNzFIMjAuNjJMOS4yNCAzMnoiLz48L2NsaXBQYXRoPjwvZGVmcz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiA0LjI5aDMyTDY0IDMyIDQ4IDU5LjcxSDE2TDAgMzJ6bTQuNjIgOGgyMi43Nkw1NC43NiAzMiA0My4zOCA1MS43MUgyMC42Mkw5LjI0IDMyeiIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iLjIiLz48ZyBjbGlwLXBhdGg9InVybCgjaGV4Q2xpcCkiPjxjaXJjbGUgaWQ9ImNpcmNsZSIgY3g9IjMyIiBjeT0iMzIiIHI9IjE2IiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjMyIiBzdHJva2U9IiNGNkFFMkQiIHN0cm9rZS1kYXNoYXJyYXk9IjE2LjY2NiA4NC42NjYiLz48L2c+PC9zdmc+'); /* Works also in Firefox */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72px;
    z-index: 1;
    display: block;
    height: 72px;
    width: 80px;
    margin: auto;
}

x-loading-animation + h2{
    padding-top: 16px;
    text-align: center;
}

.dot-loader,
.dot-loader::before,
.dot-loader::after {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* background: white; */
    box-shadow: 10px 0 #3b3b3b;
    animation: dot-loader-animation 1s ease-in-out 0s infinite;
}

.dot-loader.white,
.dot-loader.white::before,
.dot-loader.white::after {
    box-shadow: 10px 0 white;
    animation: dot-loader-animation-white 1s ease-in-out 0s infinite;
}

.dot-loader,
.dot-loader.white {
    position: relative;
    animation-delay: 0.1s;
    margin: 0 24px 0.16em -5px;
}

.dot-loader::before,
.dot-loader::after {
    content: '';
    position: absolute;
}

.dot-loader::before,
.dot-loader.white::before {
    left: -13px;
    animation-delay: 0s;
}

.dot-loader::after,
.dot-loader.white::after {
    left: 13px;
    animation-delay: 0.2s;
}

@keyframes dot-loader-animation {
    15% { box-shadow: 10px -3px #3b3b3b; }
    30% { box-shadow: 10px 3px #3b3b3b; }
    0%, 45%, 100% { box-shadow: 10px 0 #3b3b3b; }
}

@keyframes dot-loader-animation-white {
    15% { box-shadow: 10px -3px white; }
    30% { box-shadow: 10px 3px white; }
    0%, 45%, 100% { box-shadow: 10px 0 white; }
}


x-amount {
    display: inline;
    font-weight: 600;
    letter-spacing: 0.02em;

    /* https://twitter.com/wesbos/status/932644812582522880 */
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

x-amount.incoming x-currency-nim {
    color: var(--nimiq-green);
}

x-amount.incoming .integers::before {
    content: '+';
}

x-amount.outgoing x-currency-nim {
    color: var(--nimiq-red);
}

x-amount.outgoing .integers::before {
    content: '-';
}

x-amount label {
    display: block;
    font-size: 0.7em;
    font-weight: 300;
    text-transform: uppercase;
    /* letter-spacing: 0.12em; */
    /* opacity: 0.8; */
}

x-amount x-currency-nim {
    display: none;
}

x-amount .integers::before {
    font-weight: 400;
}

x-amount .rest-decimals,
x-amount .ticker {
    font-weight: 700;
    font-size: 0.75em;
}

x-amount .rest-decimals {
    margin-left: 0.05em;
    display: none;
}

.setting-show-all-decimals x-amount .rest-decimals {
    display: initial;
}

x-amount[display] .ticker,
x-amount[display] .rest-decimals,
x-amount[display] label {
    font-size: 0.5em;
}

x-amount[display] label {
    opacity: 0.7;
}

@media (max-width: 480px) {
    x-amount .rest-decimals {
        display: none;
    }
}

.dot-loader,
.dot-loader::before,
.dot-loader::after {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* background: white; */
    box-shadow: 10px 0 #3b3b3b;
    animation: dot-loader-animation 1s ease-in-out 0s infinite;
}

.dot-loader.white,
.dot-loader.white::before,
.dot-loader.white::after {
    box-shadow: 10px 0 white;
    animation: dot-loader-animation-white 1s ease-in-out 0s infinite;
}

.dot-loader,
.dot-loader.white {
    position: relative;
    animation-delay: 0.1s;
    margin: 0 24px 0.16em -5px;
}

.dot-loader::before,
.dot-loader::after {
    content: '';
    position: absolute;
}

.dot-loader::before,
.dot-loader.white::before {
    left: -13px;
    animation-delay: 0s;
}

.dot-loader::after,
.dot-loader.white::after {
    left: 13px;
    animation-delay: 0.2s;
}

@keyframes dot-loader-animation {
    15% { box-shadow: 10px -3px #3b3b3b; }
    30% { box-shadow: 10px 3px #3b3b3b; }
    0%, 45%, 100% { box-shadow: 10px 0 #3b3b3b; }
}

@keyframes dot-loader-animation-white {
    15% { box-shadow: 10px -3px white; }
    30% { box-shadow: 10px 3px white; }
    0%, 45%, 100% { box-shadow: 10px 0 white; }
}


/* Click events in iOS only bubble when this is set.
   And since there is no cursor on iOS (for now), this
   does not make a visual difference. */
.is-ios * {
    cursor: pointer;
}

x-popup-menu {
    display: block;
    position: relative;
    text-align: right;
}

x-card x-popup-menu {
    top: -6px;
    right: -8px;
}

x-popup-menu[left-align] {
    text-align: left;
}

x-popup-menu button {
    /* border: 0; */
    background: transparent !important;
    color: inherit;
    border: 1px solid transparent !important;
    font-size: 13px;
    width: 40px;
    padding: 0;
    height: 40px;
    line-height: 40px;
    min-height: 40px;
    box-shadow: none;
    box-sizing: border-box;
    cursor: pointer;
}

x-popup-menu button:hover {
    background: rgba(0, 0, 0, 0.075) !important;
}

x-popup-menu > button {
    border-radius: 50%;
}

x-popup-menu > button > .material-icons {
    margin-top: -0.5rem;
}

x-popup-menu > div {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    background: white;
    z-index: 1;
    border: 1px solid lightgray;
    border-radius: 4px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
}

x-popup-menu[left-align] > div {
    right: auto;
    left: 0;
}

x-popup-menu.active > div {
    display: initial;
    /* We need to animate from below here, so that the popupmenu
       is on top of the button when the user clicks/touches. On
       touch devices this would result in an instant click on the
       top popupmenu item. */
    animation: popupmenu-from-below;
    animation-duration: 0.3s;
}

x-popup-menu > button[disabled] + div {
    display: none !important;
}

x-popup-menu > div > button {
    display: block;
    width: 100%;
    text-align: left;
    margin: 0;
    border-radius: 0;
    padding: 4px 15px;
    height: 48px;
    font-family: inherit;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.16em;
}

x-popup-menu > div > button .material-icons {
    margin-right: 9px;
}

@keyframes popupmenu-from-below {
    from {
        opacity: 0;
        /* Height of the button, so that the menu is not initiated above the button */
        transform: translateY(40px);
    }
    25%{ opacity: 0; }
    to{ opacity: 1; }
}

.v-qr-code-overlay {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    background: white;
    padding: 32px;
    border: 50vmax solid #1f2348cc; /* border that covers the whole screen, --nimiq-blue with 80% opacity */
    border-radius: calc(50vmax + 8px);
    background-clip: padding-box;
    box-sizing: content-box;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
}

.v-qr-code-overlay.show {
    animation: fade .3s;
}

.v-qr-code-overlay.hide {
    animation: fade .3s reverse;
    pointer-events: none;
}

.v-qr-code-overlay [message] {
    white-space: pre-line;
}

.v-qr-code-overlay canvas {
    display: block;
    margin: 0 auto 32px auto;
}

@media (max-width: 420px) {
    /* on mobile fill full screen */
    .v-qr-code-overlay {
        width: calc(90% - 64px); /* minus padding */
    }

    .v-qr-code-overlay canvas {
        width: 100%;
    }
}

x-accounts {
    text-align: right;
    width: 100%;
    display: block;
}

x-accounts-list {
	display: flex;
	width: 100%;
	/* min-height: 177px; */ /* height of two XAccount elements */
	flex-grow: 1;
	overflow-y: auto;
	overflow-x: hidden;
	flex-direction: column;
}

x-accounts-list x-loading-animation {
    margin: 0 auto;
    margin-top: 2em;
    display: none;
}

x-accounts-list h2 {
    text-align: center;
}

x-account {
    display: flex;
    padding: 8px 0;
    cursor: pointer;
    position: relative;
    border-radius: 4px;
}

x-account-modal .x-modal-body {
    text-align: center;
}

x-account-modal x-account {
    cursor: auto;
    animation: none;
    margin-bottom: 1em;
}

x-account:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

x-account-modal x-account:hover {
    background-color: transparent;
}

x-account x-identicon {
    /* display: block; */
    width: 80px;
    min-width: 50px;
    height: 71px;
    flex-shrink: 0;
}

x-account-modal x-identicon {
    display: block;
    width: 160px;
    margin: -8px auto 16px;
}

x-account .x-account-info {
    text-align: left;
    width: 100%;
    padding-left: 16px;
    max-width: calc(100% - 80px);
}

x-account .x-account-label {
    display: block;
    text-align: left;
    font-weight: bold;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

x-account .x-account-bottom {
    text-align: right;
    margin-top: 12px;
}

x-account-modal .x-account-bottom {
    text-align: center;
}

x-account x-amount {
    display: block;
    font-size: 16px;
    margin-top: -0.25em;
}

@media (max-width: 480px) {
    x-account x-amount {
        font-size: 1.2em;
    }
}

@media (max-width: 350px) {
    x-account x-amount {
        font-size: 1em;
    }
}

x-accounts .add-address {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 8px;
    font-weight: bold;
    opacity: 0.7;
    transition: opacity 250ms ease;
    border-radius: .5rem;
}

x-accounts .add-address:hover,
x-accounts .add-address:focus {
    opacity: 1;
}

x-accounts .add-address [icon-identicon-plus] {
    display: block;
    width: 60px;
    height: 60px;
    background-size: contain;
    margin: 0 26px 0 10px;
}


x-account-modal x-amount {
    display: block;
    font-size: 1.5em;
    margin: 0.5em 0 1em;
}

x-account-modal x-amount[display] {
    font-size: 2em;
    margin: 0.5em 0 1em;
}

x-account .x-address {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* max-width: calc(100% - 96px); */
    pointer-events: none;
    padding: 0;
    min-width: auto;
    font-weight: normal;
    opacity: 0.6;
}

x-account-modal .x-address {
    display: inline-block;
    margin: 0.5em 0;
}

x-account .account-icon,
x-account-modal .account-icon {
    display: block;
    position: absolute;
    left: 66px;
    top: 48px;
    width: 1.4em;
    height: 1.4em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 85%;
    background-color: white;
    padding: 12px;
    border: 0.5px solid lightgray;
    border-radius: 50%;
    font-size: 20px;
}

x-account-modal .account-icon {
    padding: 22px;
    left: calc(50% + 40px);
    top: 128px;
    background-size: 80%;
    font-size: 32px;
}

x-account .account-icon::after {
    position: relative;
    left: -8.5px;
    top: -9px;
}

x-account-modal .account-icon::after {
    position: relative;
    left: -16px;
    top: -15.5px;
}

x-account .secure-icon::after,
x-account-modal .secure-icon::after {
    content: 'check_circle';
    color: #2e7d32;
}

x-account .vesting-icon::after,
x-account-modal .vesting-icon::after {
    content: 'access_time';
}

x-account .ledger-icon,
x-account-modal .ledger-icon,
x-popup-menu .ledger-icon {
    /* @asset(ledger_icon_24px.svg) */
    background-image: url('ledger_icon_24px.svg');
}

x-popup-menu .ledger-icon,
x-popup-menu [icon-qr-scan] {
    width: 24px;
    vertical-align: middle;
}

x-account-modal .x-account-label {
    font-size: 1.2em;
}

x-account-modal hr {
    background: rgba(0, 0, 0, 0.1);
    height: 1px;
    border: 0;
}

x-account-modal .action-button {
    text-align: center;
}

/* Responsiveness */
@media (min-width: 481px) {
    x-account .account-icon {
        left: 70px;
    }

    x-account-modal .account-icon {
        left: calc(50% + 40px);
        top: 135px;
    }
}

x-accounts-list x-account {
    padding: 8px;
}

x-toast {
    position: fixed;
    top: 0;
    width: 100%;
    pointer-events: none;
    display: flex;
    justify-content: center;
    z-index: 3;
    transform: translateY(-110%);
    text-align: center;
}

x-toast [toast-content] {
    min-height: 20px;
    padding: 14px 24px 14px 16px;
    background: #333;
    color: white;
    border-radius: 3px;
    animation-fill-mode: backwards;
    box-shadow: var(--box-shadow);
    margin: 24px;
    pointer-events: initial;
}

x-toast [toast-content]::before {
    content: "info";
    color: inherit;
    margin-right: 8px;
    opacity: 0.8;

    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    vertical-align: middle;
    margin-top: -0.1em;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

/* types */

x-toast [toast-content].error {
    background: var(--nimiq-red);
}

x-toast [toast-content].warning {
    background: var(--nimiq-orange);
    color: #333;
}

x-toast [toast-content].success::before {
    content: "check_circle";
}

x-toast [toast-content].error::before {
    content: "cancel";
}

x-toast [toast-content].warning::before {
    content: "warning";
}

/* animation */

x-toast.x-toast-show {
    animation: x-toast-show 3s;
}

@keyframes x-toast-show {
    from {
        transform: translateY(-110%);
        opacity: 0;
    }

    5% {
        opacity: 1;
        transform: none;
    }

    95% {
        opacity: 1;
        transform: none;
    }

    100% {
        transform: translateY(-110%);
        opacity: 0;
    }
}

@media (max-width: 420px) {
    x-toast [toast-content] {
        margin: 0px;
        width: 100vw;
        border-radius: 0;
    }
}


x-address, .x-address{
    width: 100%;
    min-width: 320px;
    max-width: 400px;
    box-sizing: border-box;
    padding: 8px 16px;
    font-size: 14px;
    word-spacing: -0.15em;
    white-space: nowrap;
    font-family: 'Fira Mono', monospace;
}

@media (max-width: 460px) {
    x-address, .x-address {
        padding: 8px 4px;
    }
}

@media (max-width: 400px) {
    x-address, .x-address {
        font-size: 12px;
    }
}

@media (max-width: 340px) {
    x-address, .x-address {
        font-size: 11px;
    }
}

x-address {
    cursor: pointer;
    border-radius: 3px;
}

x-address:hover{
    background: rgba(0, 0, 0, 0.2);
}

.dot-loader,
.dot-loader::before,
.dot-loader::after {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* background: white; */
    box-shadow: 10px 0 #3b3b3b;
    animation: dot-loader-animation 1s ease-in-out 0s infinite;
}

.dot-loader.white,
.dot-loader.white::before,
.dot-loader.white::after {
    box-shadow: 10px 0 white;
    animation: dot-loader-animation-white 1s ease-in-out 0s infinite;
}

.dot-loader,
.dot-loader.white {
    position: relative;
    animation-delay: 0.1s;
    margin: 0 24px 0.16em -5px;
}

.dot-loader::before,
.dot-loader::after {
    content: '';
    position: absolute;
}

.dot-loader::before,
.dot-loader.white::before {
    left: -13px;
    animation-delay: 0s;
}

.dot-loader::after,
.dot-loader.white::after {
    left: 13px;
    animation-delay: 0.2s;
}

@keyframes dot-loader-animation {
    15% { box-shadow: 10px -3px #3b3b3b; }
    30% { box-shadow: 10px 3px #3b3b3b; }
    0%, 45%, 100% { box-shadow: 10px 0 #3b3b3b; }
}

@keyframes dot-loader-animation-white {
    15% { box-shadow: 10px -3px white; }
    30% { box-shadow: 10px 3px white; }
    0%, 45%, 100% { box-shadow: 10px 0 white; }
}


x-amount {
    display: inline;
    font-weight: 600;
    letter-spacing: 0.02em;

    /* https://twitter.com/wesbos/status/932644812582522880 */
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

x-amount.incoming x-currency-nim {
    color: var(--nimiq-green);
}

x-amount.incoming .integers::before {
    content: '+';
}

x-amount.outgoing x-currency-nim {
    color: var(--nimiq-red);
}

x-amount.outgoing .integers::before {
    content: '-';
}

x-amount label {
    display: block;
    font-size: 0.7em;
    font-weight: 300;
    text-transform: uppercase;
    /* letter-spacing: 0.12em; */
    /* opacity: 0.8; */
}

x-amount x-currency-nim {
    display: none;
}

x-amount .integers::before {
    font-weight: 400;
}

x-amount .rest-decimals,
x-amount .ticker {
    font-weight: 700;
    font-size: 0.75em;
}

x-amount .rest-decimals {
    margin-left: 0.05em;
    display: none;
}

.setting-show-all-decimals x-amount .rest-decimals {
    display: initial;
}

x-amount[display] .ticker,
x-amount[display] .rest-decimals,
x-amount[display] label {
    font-size: 0.5em;
}

x-amount[display] label {
    opacity: 0.7;
}

@media (max-width: 480px) {
    x-amount .rest-decimals {
        display: none;
    }
}

x-loading-animation {
    opacity: 1;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><style>@keyframes dash-animation { to { transform: rotate(240deg) translateZ(0); } } %23circle { animation: 3s dash-animation infinite linear; transform: rotate(-120deg) translateZ(0); transform-origin: center; }</style><defs><clipPath id="hexClip"><path clip-rule="evenodd" d="M16 4.29h32L64 32 48 59.71H16L0 32zm4.62 8h22.76L54.76 32 43.38 51.71H20.62L9.24 32z"/></clipPath></defs><path fill-rule="evenodd" d="M16 4.29h32L64 32 48 59.71H16L0 32zm4.62 8h22.76L54.76 32 43.38 51.71H20.62L9.24 32z" fill="%23fff" opacity=".2"/><g clip-path="url(%23hexClip)"><circle id="circle" cx="32" cy="32" r="16" fill="none" stroke-width="32" stroke="%23F6AE2D" stroke-dasharray="16.666 84.666"/></g></svg>');/* ALSO works in Firefox! */
    /*background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48c3R5bGU+QGtleWZyYW1lcyBkYXNoLWFuaW1hdGlvbiB7IHRvIHsgdHJhbnNmb3JtOiByb3RhdGUoMjQwZGVnKSB0cmFuc2xhdGVaKDApOyB9IH0gI2NpcmNsZSB7IGFuaW1hdGlvbjogM3MgZGFzaC1hbmltYXRpb24gaW5maW5pdGUgbGluZWFyOyB0cmFuc2Zvcm06IHJvdGF0ZSgtMTIwZGVnKSB0cmFuc2xhdGVaKDApOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7IH08L3N0eWxlPjxkZWZzPjxjbGlwUGF0aCBpZD0iaGV4Q2xpcCI+PHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYgNC4yOWgzMkw2NCAzMiA0OCA1OS43MUgxNkwwIDMyem00LjYyIDhoMjIuNzZMNTQuNzYgMzIgNDMuMzggNTEuNzFIMjAuNjJMOS4yNCAzMnoiLz48L2NsaXBQYXRoPjwvZGVmcz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiA0LjI5aDMyTDY0IDMyIDQ4IDU5LjcxSDE2TDAgMzJ6bTQuNjIgOGgyMi43Nkw1NC43NiAzMiA0My4zOCA1MS43MUgyMC42Mkw5LjI0IDMyeiIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iLjIiLz48ZyBjbGlwLXBhdGg9InVybCgjaGV4Q2xpcCkiPjxjaXJjbGUgaWQ9ImNpcmNsZSIgY3g9IjMyIiBjeT0iMzIiIHI9IjE2IiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjMyIiBzdHJva2U9IiNGNkFFMkQiIHN0cm9rZS1kYXNoYXJyYXk9IjE2LjY2NiA4NC42NjYiLz48L2c+PC9zdmc+'); /* Works also in Firefox */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72px;
    z-index: 1;
    display: block;
    height: 72px;
    width: 80px;
    margin: auto;
}

x-loading-animation + h2{
    padding-top: 16px;
    text-align: center;
}

.dot-loader,
.dot-loader::before,
.dot-loader::after {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* background: white; */
    box-shadow: 10px 0 #3b3b3b;
    animation: dot-loader-animation 1s ease-in-out 0s infinite;
}

.dot-loader.white,
.dot-loader.white::before,
.dot-loader.white::after {
    box-shadow: 10px 0 white;
    animation: dot-loader-animation-white 1s ease-in-out 0s infinite;
}

.dot-loader,
.dot-loader.white {
    position: relative;
    animation-delay: 0.1s;
    margin: 0 24px 0.16em -5px;
}

.dot-loader::before,
.dot-loader::after {
    content: '';
    position: absolute;
}

.dot-loader::before,
.dot-loader.white::before {
    left: -13px;
    animation-delay: 0s;
}

.dot-loader::after,
.dot-loader.white::after {
    left: 13px;
    animation-delay: 0.2s;
}

@keyframes dot-loader-animation {
    15% { box-shadow: 10px -3px #3b3b3b; }
    30% { box-shadow: 10px 3px #3b3b3b; }
    0%, 45%, 100% { box-shadow: 10px 0 #3b3b3b; }
}

@keyframes dot-loader-animation-white {
    15% { box-shadow: 10px -3px white; }
    30% { box-shadow: 10px 3px white; }
    0%, 45%, 100% { box-shadow: 10px 0 white; }
}


/* Click events in iOS only bubble when this is set.
   And since there is no cursor on iOS (for now), this
   does not make a visual difference. */
.is-ios * {
    cursor: pointer;
}

x-popup-menu {
    display: block;
    position: relative;
    text-align: right;
}

x-card x-popup-menu {
    top: -6px;
    right: -8px;
}

x-popup-menu[left-align] {
    text-align: left;
}

x-popup-menu button {
    /* border: 0; */
    background: transparent !important;
    color: inherit;
    border: 1px solid transparent !important;
    font-size: 13px;
    width: 40px;
    padding: 0;
    height: 40px;
    line-height: 40px;
    min-height: 40px;
    box-shadow: none;
    box-sizing: border-box;
    cursor: pointer;
}

x-popup-menu button:hover {
    background: rgba(0, 0, 0, 0.075) !important;
}

x-popup-menu > button {
    border-radius: 50%;
}

x-popup-menu > button > .material-icons {
    margin-top: -0.5rem;
}

x-popup-menu > div {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    background: white;
    z-index: 1;
    border: 1px solid lightgray;
    border-radius: 4px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
}

x-popup-menu[left-align] > div {
    right: auto;
    left: 0;
}

x-popup-menu.active > div {
    display: initial;
    /* We need to animate from below here, so that the popupmenu
       is on top of the button when the user clicks/touches. On
       touch devices this would result in an instant click on the
       top popupmenu item. */
    animation: popupmenu-from-below;
    animation-duration: 0.3s;
}

x-popup-menu > button[disabled] + div {
    display: none !important;
}

x-popup-menu > div > button {
    display: block;
    width: 100%;
    text-align: left;
    margin: 0;
    border-radius: 0;
    padding: 4px 15px;
    height: 48px;
    font-family: inherit;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.16em;
}

x-popup-menu > div > button .material-icons {
    margin-right: 9px;
}

@keyframes popupmenu-from-below {
    from {
        opacity: 0;
        /* Height of the button, so that the menu is not initiated above the button */
        transform: translateY(40px);
    }
    25%{ opacity: 0; }
    to{ opacity: 1; }
}

x-modals {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: background .4s ease-in-out;
    z-index: 1;
}

x-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    padding: 24px 0 60px;
}

x-modal-container > * {
    animation-duration: .4s !important;
    animation-fill-mode: both;
}


.x-modal {
    background: white;
    color: rgba(0,0,0,0.8);
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
        0 1px 8px 0 rgba(0, 0, 0, 0.12),
        0 3px 3px -2px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: auto;

    max-width: 97%; /* Could also use 97vw */
}

.modal-header {
    padding-top: 16px;
    text-align: center;
    position: relative;
    /* border-bottom: 1px solid #f3f3f3; */
    padding-bottom: 16px;
}

.modal-header h2 {
    padding: 8px 46px;
    font-size: 20px;
    line-height: 18px;
    font-weight: 600;
}

.modal-header x-popup-menu {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - 22px);
    margin: 11px;
}

.modal-header .header-button,
.modal-header [x-modal-close] {
    position: absolute;
    top: 0;
    cursor: pointer;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 13px;
    border-radius: 50%;
}

.modal-header .header-button:hover,
.modal-header .header-button:focus,
.modal-header [x-modal-close]:hover,
.modal-header [x-modal-close]:focus {
    background-color: rgba(0, 0, 0, 0.1);
}

.modal-header .header-button {
    left: 0;
    background-size: 24px;
}

.modal-header [x-modal-close] {
    right: 0;
}

@keyframes background-progress {
    0%  { background-position: 0% 0 }
    100%{ background-position: 200% 0 }
}

.modal-body {
    padding: 32px 32px;
    position: relative; /* Required for absolute positioning of account icon */
}

@media (max-width: 480px) {
    .modal-body {
        padding: 24px 12px;
    }
}


x-transaction-modal {
    max-width: 600px;
}

x-transaction-modal .center {
    flex-direction: row;
}

x-transaction-modal x-identicon {
    display: inline-block;
    width: 120px;
}

x-transaction-modal .arrow {
    margin: 0 24px;
}

x-transaction-modal .row {
    margin: 14px 0;
    align-items: flex-start;
}

x-transaction-modal .row + .row {
    margin-top: 24px;
}

x-transaction-modal label {
    display: inline-block;
    width: 96px;
    font-size: 15px;
    font-weight: bold;
    flex-shrink: 0;
}

x-transaction-modal .label {
    display: block;
    margin-bottom: 10px;
    font-size: 1em;
}

x-transaction-modal.incoming .label[sender].default-label,
x-transaction-modal.outgoing .label[recipient].default-label {
    display: none;
}

x-transaction-modal x-address {
    margin-left: -16px;
}

x-transaction-modal .blockHeight,
x-transaction-modal .confirmations,
x-transaction-modal .timestamp,
x-transaction-modal x-amount,
x-transaction-modal .fee {
    /* font-size: 1.2em; */
}

x-transaction-modal.removed .timestamp,
x-transaction-modal.expired .timestamp {
    background: var(--nimiq-orange);
    padding: 4px 12px;
    border-radius: 3px;
    font-weight: 600;
}

x-transaction-modal .confirmations {
    font-size: 1em;
}

x-transaction-modal x-amount {
    display: block;
    margin: 18px 0;
    font-size: 26px;
}

x-transaction-modal.removed x-currency-nim,
x-transaction-modal.expired x-currency-nim {
    text-decoration: line-through;
}

x-transaction-modal .hash {
    font-family: monospace;
}

@media (max-width: 560px) {
    x-transaction-modal x-identicon {
        width: 90px;
    }

    x-transaction-modal .arrow {
        margin: 0 18px;
    }

    x-transaction-modal .row {
        flex-direction: column;
    }

    x-transaction-modal label {
        margin-bottom: 6px;
    }

    x-transaction-modal .label {
        margin-bottom: 6px;
    }

    x-transaction-modal x-address.x-address {
        margin-left: -4px;
        padding: 8px 4px;
    }
}

x-transaction-modal.cashlink .hide-if-cashlink,
x-transaction-modal:not(.cashlink) .show-if-cashlink,
x-transaction-modal:not(.unclaimed) .show-if-unclaimed,
x-transaction-modal.outgoing.cashlink .hide-if-outgoing-cashlink,
x-transaction-modal:not(.outgoing) .show-if-outgoing-cashlink,
x-transaction-modal:not(.cashlink) .show-if-outgoing-cashlink {
    display: none;
}

x-transaction-modal .manage-cashlink {
    margin: 0 auto 2rem;
}


x-transactions {
    display: block;
    width: 100%;
}

x-transactions .transactions-heading {
    display: inline-block;
}

x-transactions a[secondary] {
    padding: 1em;
    margin-bottom: -1em !important;
    margin-top: 5px !important;
    text-align: center;
}

x-transactions x-popup-menu {
    width: 40px;
    height: 40px;
    float: right;
}

.x-transactions-list {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
    border-collapse: collapse;
}

.x-transactions-list x-loading-animation {
    margin: 0 auto;
    margin-top: 2em;
    display: none;
}

.x-transactions-list x-loading-animation + h2 {
    text-align: center;
}

.x-transactions-list .x-transaction {
    animation: from-right 500ms;
    animation-fill-mode: backwards; /* Apply the animation's opacity: 0 when the animation property is applied */
    cursor: pointer;
    border-radius: 4px;
}

.x-transaction.removed,
.x-transaction.expired {
    background: var(--nimiq-orange);
}

.x-transaction > * {
    vertical-align: middle;
    padding-top: 20px;
    padding-bottom: 20px;
}

.x-transaction > *:first-child {
    padding-left: 16px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.x-transaction > *:last-child {
    padding-right: 16px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

x-transactions .x-transaction > *:last-child {
    text-align: right;
}

.x-transaction:nth-child(1) { animation-delay: 0.0s }
.x-transaction:nth-child(2) { animation-delay: 0.1s }
.x-transaction:nth-child(3) { animation-delay: 0.2s }
.x-transaction:nth-child(4) { animation-delay: 0.3s }
.x-transaction:nth-child(5) { animation-delay: 0.4s }
.x-transaction:nth-child(6) { animation-delay: 0.5s }
.x-transaction:nth-child(7) { animation-delay: 0.6s }
.x-transaction:nth-child(8) { animation-delay: 0.7s }
.x-transaction:nth-child(9) { animation-delay: 0.8s }
.x-transaction:nth-child(10){ animation-delay: 0.9s }

x-transactions.no-animation .x-transaction {
    animation: none !important;
    animation-delay: 0s !important;
}

x-transactions .x-transaction:hover > * {
    background-color: rgba(0, 0, 0, 0.075);
}

.x-transaction.removed .timestamp,
.x-transaction.expired .timestamp {
    font-weight: bold;
}

.x-transaction .identicon {
    width: 66px;
    height: 75px;
    padding: 0 8px;
}

.x-transaction .identicon x-identicon:not(.cashlink) img {
    /* fix height on iOS */
    height: 75px;
}

.x-transaction .info-line.mobile {
    display: none !important;
}

/* Responsiveness */
@media (max-width: 600px) {
    x-transactions .x-transaction .label {
        max-width: 0;
        overflow: hidden;
        padding: 0;
        opacity: 0;
    }

    .x-transaction .info-line.desktop {
        display: none !important;
    }

    .x-transaction.cashlink-remote-claim .info-line.mobile {
        display: table-cell !important;
    }
}

.x-transaction.incoming .label[recipient],
.x-transaction.outgoing .label[sender],
.x-transaction.transfer .label {
    /* font-weight: bold; */
}

.x-transaction x-amount {
    font-size: 1.4em;
}

.x-transaction.removed x-currency-nim,
.x-transaction.expired x-currency-nim {
    text-decoration: line-through;
}

@media (max-width: 768px) {
    x-transactions .x-transaction x-amount {
        font-size: 1.2em;
    }

    x-transactions .x-transaction x-amount .rest-decimals {
        display: none;
    }

    x-transactions .x-transaction x-amount .ticker {
        display: block;
    }
}

@media (max-width: 480px) {
    x-transactions .x-transaction x-amount {
        font-size: 1.1em;
    }
}

@media (max-width: 350px) {
    x-transactions .x-transaction x-amount {
        font-size: 1em;
    }
}

.x-transactions-list x-no-transactions {
	font-size: 16px;
	display: block;
	padding: 1.5em;
	text-align: center;
}

.x-transactions-list x-no-transactions h1.material-icons {
    display: block;
    font-size: 80px;
    opacity: 0.3;
    margin-bottom: 0.1em;
}

.x-transactions-list x-no-transactions .material-icons,
.x-transactions-list x-no-transactions span {
    opacity: 0.6;
}

.x-transactions-list x-no-transactions button {
    margin-top: 4rem;
    width: unset;
}

x-transactions x-paginator {
    display: block;
    text-align: center;
}

x-transactions x-paginator .nq-button-s {
    padding: 7px;
    height: 38px;
    border-radius: 500px;
}

x-transactions[only-recent] x-paginator {
    display: none;
}

x-transactions .view-more,
x-transactions .view-less {
    width: 140px;
    margin-left: auto;
    margin-right: auto;
}

x-transactions a.view-less, /* specificity needed to override a[secondary] rule */
x-transactions.few-transactions .view-more,
x-transactions.view-more .view-more {
    display: none;
}

x-transactions.view-more x-paginator,
x-transactions.view-more .view-less {
    display: block;
}

/* CASHLINKS */

/* Filter */
x-transactions:not(.filtered) .show-if-filtered,
x-transactions.filtered .hide-if-filtered {
    display: none;
}

.transactions-filtered-header {
    margin: -1em;
    margin-bottom: 8px;
    padding: 18px;
    border-top-left-radius: 0.4em;
    border-top-right-radius: 0.4em;
}

@media (min-width: 481px) {
    .transactions-filtered-header {
        margin: -24px;
        margin-bottom: 12px;
        padding: 26px;
    }
}

.transactions-filtered-header h2 {
    margin: 0;
}

.filter-unclaimed-cashlinks,
.filter-close-button {
    font-size: 16px;
    font-weight: 600;
    min-height: 32px;
    border-radius: 500px;
}

.filter-close-button {
    float: right;
    margin: -24px -6px;
    font-size: 24px;
    padding: 0;
    width: 32px;
    padding-bottom: 1px;
}

@media (max-width: 420px) {
    .filter-unclaimed-cashlinks {
        display: block;
        margin: -16px 0 8px;
    }
}

/* Style remote claiming info line */
x-transactions .x-transaction.cashlink-remote-claim {
    background: rgba(31, 35, 72, 0.06); /* Based on Nimiq Indigo */
}

x-transactions .x-transaction.cashlink-remote-claim > * {
    padding-top: 10px;
    padding-bottom: 10px;
}

x-transactions .x-transaction .info-line,
x-transactions .x-transaction.cashlink-remote-claim .hidden-when-info {
    display: none;
}

x-transactions .x-transaction.cashlink-remote-claim .info-line {
    display: table-cell;
    padding: 0 8px;
}

x-transactions .x-transaction.cashlink-remote-claim .info-line strong {
    font-weight: 600;
}

x-transactions .x-transaction.cashlink-remote-claim x-amount {
    font-size: 1em;
}

x-transactions .x-transaction.cashlink-remote-claim x-amount .ticker {
    font-weight: 600;
    font-size: 1em;
}

x-transactions .x-transaction.cashlink-remote-claim .info-line x-identicon {
    display: inline-block;
    width: 28px;
    margin: -4px 8px -8px;
}

x-toast {
    position: fixed;
    top: 0;
    width: 100%;
    pointer-events: none;
    display: flex;
    justify-content: center;
    z-index: 3;
    transform: translateY(-110%);
    text-align: center;
}

x-toast [toast-content] {
    min-height: 20px;
    padding: 14px 24px 14px 16px;
    background: #333;
    color: white;
    border-radius: 3px;
    animation-fill-mode: backwards;
    box-shadow: var(--box-shadow);
    margin: 24px;
    pointer-events: initial;
}

x-toast [toast-content]::before {
    content: "info";
    color: inherit;
    margin-right: 8px;
    opacity: 0.8;

    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    vertical-align: middle;
    margin-top: -0.1em;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

/* types */

x-toast [toast-content].error {
    background: var(--nimiq-red);
}

x-toast [toast-content].warning {
    background: var(--nimiq-orange);
    color: #333;
}

x-toast [toast-content].success::before {
    content: "check_circle";
}

x-toast [toast-content].error::before {
    content: "cancel";
}

x-toast [toast-content].warning::before {
    content: "warning";
}

/* animation */

x-toast.x-toast-show {
    animation: x-toast-show 3s;
}

@keyframes x-toast-show {
    from {
        transform: translateY(-110%);
        opacity: 0;
    }

    5% {
        opacity: 1;
        transform: none;
    }

    95% {
        opacity: 1;
        transform: none;
    }

    100% {
        transform: translateY(-110%);
        opacity: 0;
    }
}

@media (max-width: 420px) {
    x-toast [toast-content] {
        margin: 0px;
        width: 100vw;
        border-radius: 0;
    }
}

.dot-loader,
.dot-loader::before,
.dot-loader::after {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* background: white; */
    box-shadow: 10px 0 #3b3b3b;
    animation: dot-loader-animation 1s ease-in-out 0s infinite;
}

.dot-loader.white,
.dot-loader.white::before,
.dot-loader.white::after {
    box-shadow: 10px 0 white;
    animation: dot-loader-animation-white 1s ease-in-out 0s infinite;
}

.dot-loader,
.dot-loader.white {
    position: relative;
    animation-delay: 0.1s;
    margin: 0 24px 0.16em -5px;
}

.dot-loader::before,
.dot-loader::after {
    content: '';
    position: absolute;
}

.dot-loader::before,
.dot-loader.white::before {
    left: -13px;
    animation-delay: 0s;
}

.dot-loader::after,
.dot-loader.white::after {
    left: 13px;
    animation-delay: 0.2s;
}

@keyframes dot-loader-animation {
    15% { box-shadow: 10px -3px #3b3b3b; }
    30% { box-shadow: 10px 3px #3b3b3b; }
    0%, 45%, 100% { box-shadow: 10px 0 #3b3b3b; }
}

@keyframes dot-loader-animation-white {
    15% { box-shadow: 10px -3px white; }
    30% { box-shadow: 10px 3px white; }
    0%, 45%, 100% { box-shadow: 10px 0 white; }
}


x-amount {
    display: inline;
    font-weight: 600;
    letter-spacing: 0.02em;

    /* https://twitter.com/wesbos/status/932644812582522880 */
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

x-amount.incoming x-currency-nim {
    color: var(--nimiq-green);
}

x-amount.incoming .integers::before {
    content: '+';
}

x-amount.outgoing x-currency-nim {
    color: var(--nimiq-red);
}

x-amount.outgoing .integers::before {
    content: '-';
}

x-amount label {
    display: block;
    font-size: 0.7em;
    font-weight: 300;
    text-transform: uppercase;
    /* letter-spacing: 0.12em; */
    /* opacity: 0.8; */
}

x-amount x-currency-nim {
    display: none;
}

x-amount .integers::before {
    font-weight: 400;
}

x-amount .rest-decimals,
x-amount .ticker {
    font-weight: 700;
    font-size: 0.75em;
}

x-amount .rest-decimals {
    margin-left: 0.05em;
    display: none;
}

.setting-show-all-decimals x-amount .rest-decimals {
    display: initial;
}

x-amount[display] .ticker,
x-amount[display] .rest-decimals,
x-amount[display] label {
    font-size: 0.5em;
}

x-amount[display] label {
    opacity: 0.7;
}

@media (max-width: 480px) {
    x-amount .rest-decimals {
        display: none;
    }
}

x-network-indicator {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 13px;
    padding: 24px 0;
}

x-network-indicator div {
    padding: 4px 20px;
    flex-shrink: 0;
}

x-network-indicator label {
    opacity: .6;
    padding-right: 10px;
}

x-network-indicator span {
    text-transform: capitalize;
}

@media (max-width: 420px) {
    x-network-indicator div {
        padding: 2px 20px;
    }
}

x-send-transaction-offline-modal,
x-send-prepared-transaction-modal {
    max-width: 500px !important;
    text-align: center;
}

x-send-transaction-offline-modal p,
x-send-prepared-transaction-modal p {
    margin-bottom: 1em;
}

x-send-transaction-offline-modal textarea,
x-send-prepared-transaction-modal textarea {
    width: 100%;
    min-height: 225px;
    background: var(--nimiq-gray);
    padding: 0.5em;
    border-radius: 3px;
    margin-bottom: 1em;
}

x-send-transaction-offline-modal button,
x-send-prepared-transaction-modal button {
    margin-bottom: 0 !important;
}
 /* For the offline and prepared transaction modals */

v-send-transaction {
    box-sizing: content-box;
    text-align: center;
    position: relative;
    overflow: hidden;
    max-width: 420px !important;
    width: 100%;
}

v-send-transaction .small-page {
    margin: 0 !important;
}

v-send-transaction transition {
    /* Don't render the Vue transition pseudo-element. When mounted, 'transition' is not an actual element anymore. */
    display: none;
}

v-send-transaction .qr-scanner {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: solid 0.75rem white;
    border-radius: 1rem;
    z-index: 100;
}

v-send-transaction .qr-scanner .cancel-button {
    color: var(--nimiq-blue);
}

@media (max-width: 480px) {
    /* make qr scanner full screen */
    v-send-transaction {
        overflow: visible;
    }

    v-send-transaction .qr-scanner {
        position: fixed !important;
        border: none;
        border-radius: 0;
    }

    v-send-transaction .qr-scanner .overlay.inactive {
        display: none;
    }

    v-send-transaction .qr-scanner .access-denied-instructions {
        bottom: 11rem;
    }
}

x-toast {
    position: fixed;
    top: 0;
    width: 100%;
    pointer-events: none;
    display: flex;
    justify-content: center;
    z-index: 3;
    transform: translateY(-110%);
    text-align: center;
}

x-toast [toast-content] {
    min-height: 20px;
    padding: 14px 24px 14px 16px;
    background: #333;
    color: white;
    border-radius: 3px;
    animation-fill-mode: backwards;
    box-shadow: var(--box-shadow);
    margin: 24px;
    pointer-events: initial;
}

x-toast [toast-content]::before {
    content: "info";
    color: inherit;
    margin-right: 8px;
    opacity: 0.8;

    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    vertical-align: middle;
    margin-top: -0.1em;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

/* types */

x-toast [toast-content].error {
    background: var(--nimiq-red);
}

x-toast [toast-content].warning {
    background: var(--nimiq-orange);
    color: #333;
}

x-toast [toast-content].success::before {
    content: "check_circle";
}

x-toast [toast-content].error::before {
    content: "cancel";
}

x-toast [toast-content].warning::before {
    content: "warning";
}

/* animation */

x-toast.x-toast-show {
    animation: x-toast-show 3s;
}

@keyframes x-toast-show {
    from {
        transform: translateY(-110%);
        opacity: 0;
    }

    5% {
        opacity: 1;
        transform: none;
    }

    95% {
        opacity: 1;
        transform: none;
    }

    100% {
        transform: translateY(-110%);
        opacity: 0;
    }
}

@media (max-width: 420px) {
    x-toast [toast-content] {
        margin: 0px;
        width: 100vw;
        border-radius: 0;
    }
}


x-address, .x-address{
    width: 100%;
    min-width: 320px;
    max-width: 400px;
    box-sizing: border-box;
    padding: 8px 16px;
    font-size: 14px;
    word-spacing: -0.15em;
    white-space: nowrap;
    font-family: 'Fira Mono', monospace;
}

@media (max-width: 460px) {
    x-address, .x-address {
        padding: 8px 4px;
    }
}

@media (max-width: 400px) {
    x-address, .x-address {
        font-size: 12px;
    }
}

@media (max-width: 340px) {
    x-address, .x-address {
        font-size: 11px;
    }
}

x-address {
    cursor: pointer;
    border-radius: 3px;
}

x-address:hover{
    background: rgba(0, 0, 0, 0.2);
}

x-modals {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: background .4s ease-in-out;
    z-index: 1;
}

x-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    padding: 24px 0 60px;
}

x-modal-container > * {
    animation-duration: .4s !important;
    animation-fill-mode: both;
}


.x-modal {
    background: white;
    color: rgba(0,0,0,0.8);
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
        0 1px 8px 0 rgba(0, 0, 0, 0.12),
        0 3px 3px -2px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: auto;

    max-width: 97%; /* Could also use 97vw */
}

.modal-header {
    padding-top: 16px;
    text-align: center;
    position: relative;
    /* border-bottom: 1px solid #f3f3f3; */
    padding-bottom: 16px;
}

.modal-header h2 {
    padding: 8px 46px;
    font-size: 20px;
    line-height: 18px;
    font-weight: 600;
}

.modal-header x-popup-menu {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - 22px);
    margin: 11px;
}

.modal-header .header-button,
.modal-header [x-modal-close] {
    position: absolute;
    top: 0;
    cursor: pointer;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 13px;
    border-radius: 50%;
}

.modal-header .header-button:hover,
.modal-header .header-button:focus,
.modal-header [x-modal-close]:hover,
.modal-header [x-modal-close]:focus {
    background-color: rgba(0, 0, 0, 0.1);
}

.modal-header .header-button {
    left: 0;
    background-size: 24px;
}

.modal-header [x-modal-close] {
    right: 0;
}

@keyframes background-progress {
    0%  { background-position: 0% 0 }
    100%{ background-position: 200% 0 }
}

.modal-body {
    padding: 32px 32px;
    position: relative; /* Required for absolute positioning of account icon */
}

@media (max-width: 480px) {
    .modal-body {
        padding: 24px 12px;
    }
}

x-loading-animation {
    opacity: 1;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><style>@keyframes dash-animation { to { transform: rotate(240deg) translateZ(0); } } %23circle { animation: 3s dash-animation infinite linear; transform: rotate(-120deg) translateZ(0); transform-origin: center; }</style><defs><clipPath id="hexClip"><path clip-rule="evenodd" d="M16 4.29h32L64 32 48 59.71H16L0 32zm4.62 8h22.76L54.76 32 43.38 51.71H20.62L9.24 32z"/></clipPath></defs><path fill-rule="evenodd" d="M16 4.29h32L64 32 48 59.71H16L0 32zm4.62 8h22.76L54.76 32 43.38 51.71H20.62L9.24 32z" fill="%23fff" opacity=".2"/><g clip-path="url(%23hexClip)"><circle id="circle" cx="32" cy="32" r="16" fill="none" stroke-width="32" stroke="%23F6AE2D" stroke-dasharray="16.666 84.666"/></g></svg>');/* ALSO works in Firefox! */
    /*background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48c3R5bGU+QGtleWZyYW1lcyBkYXNoLWFuaW1hdGlvbiB7IHRvIHsgdHJhbnNmb3JtOiByb3RhdGUoMjQwZGVnKSB0cmFuc2xhdGVaKDApOyB9IH0gI2NpcmNsZSB7IGFuaW1hdGlvbjogM3MgZGFzaC1hbmltYXRpb24gaW5maW5pdGUgbGluZWFyOyB0cmFuc2Zvcm06IHJvdGF0ZSgtMTIwZGVnKSB0cmFuc2xhdGVaKDApOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7IH08L3N0eWxlPjxkZWZzPjxjbGlwUGF0aCBpZD0iaGV4Q2xpcCI+PHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYgNC4yOWgzMkw2NCAzMiA0OCA1OS43MUgxNkwwIDMyem00LjYyIDhoMjIuNzZMNTQuNzYgMzIgNDMuMzggNTEuNzFIMjAuNjJMOS4yNCAzMnoiLz48L2NsaXBQYXRoPjwvZGVmcz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiA0LjI5aDMyTDY0IDMyIDQ4IDU5LjcxSDE2TDAgMzJ6bTQuNjIgOGgyMi43Nkw1NC43NiAzMiA0My4zOCA1MS43MUgyMC42Mkw5LjI0IDMyeiIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iLjIiLz48ZyBjbGlwLXBhdGg9InVybCgjaGV4Q2xpcCkiPjxjaXJjbGUgaWQ9ImNpcmNsZSIgY3g9IjMyIiBjeT0iMzIiIHI9IjE2IiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjMyIiBzdHJva2U9IiNGNkFFMkQiIHN0cm9rZS1kYXNoYXJyYXk9IjE2LjY2NiA4NC42NjYiLz48L2c+PC9zdmc+'); /* Works also in Firefox */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72px;
    z-index: 1;
    display: block;
    height: 72px;
    width: 80px;
    margin: auto;
}

x-loading-animation + h2{
    padding-top: 16px;
    text-align: center;
}

.dot-loader,
.dot-loader::before,
.dot-loader::after {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* background: white; */
    box-shadow: 10px 0 #3b3b3b;
    animation: dot-loader-animation 1s ease-in-out 0s infinite;
}

.dot-loader.white,
.dot-loader.white::before,
.dot-loader.white::after {
    box-shadow: 10px 0 white;
    animation: dot-loader-animation-white 1s ease-in-out 0s infinite;
}

.dot-loader,
.dot-loader.white {
    position: relative;
    animation-delay: 0.1s;
    margin: 0 24px 0.16em -5px;
}

.dot-loader::before,
.dot-loader::after {
    content: '';
    position: absolute;
}

.dot-loader::before,
.dot-loader.white::before {
    left: -13px;
    animation-delay: 0s;
}

.dot-loader::after,
.dot-loader.white::after {
    left: 13px;
    animation-delay: 0.2s;
}

@keyframes dot-loader-animation {
    15% { box-shadow: 10px -3px #3b3b3b; }
    30% { box-shadow: 10px 3px #3b3b3b; }
    0%, 45%, 100% { box-shadow: 10px 0 #3b3b3b; }
}

@keyframes dot-loader-animation-white {
    15% { box-shadow: 10px -3px white; }
    30% { box-shadow: 10px 3px white; }
    0%, 45%, 100% { box-shadow: 10px 0 white; }
}


x-amount {
    display: inline;
    font-weight: 600;
    letter-spacing: 0.02em;

    /* https://twitter.com/wesbos/status/932644812582522880 */
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

x-amount.incoming x-currency-nim {
    color: var(--nimiq-green);
}

x-amount.incoming .integers::before {
    content: '+';
}

x-amount.outgoing x-currency-nim {
    color: var(--nimiq-red);
}

x-amount.outgoing .integers::before {
    content: '-';
}

x-amount label {
    display: block;
    font-size: 0.7em;
    font-weight: 300;
    text-transform: uppercase;
    /* letter-spacing: 0.12em; */
    /* opacity: 0.8; */
}

x-amount x-currency-nim {
    display: none;
}

x-amount .integers::before {
    font-weight: 400;
}

x-amount .rest-decimals,
x-amount .ticker {
    font-weight: 700;
    font-size: 0.75em;
}

x-amount .rest-decimals {
    margin-left: 0.05em;
    display: none;
}

.setting-show-all-decimals x-amount .rest-decimals {
    display: initial;
}

x-amount[display] .ticker,
x-amount[display] .rest-decimals,
x-amount[display] label {
    font-size: 0.5em;
}

x-amount[display] label {
    opacity: 0.7;
}

@media (max-width: 480px) {
    x-amount .rest-decimals {
        display: none;
    }
}

.dot-loader,
.dot-loader::before,
.dot-loader::after {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* background: white; */
    box-shadow: 10px 0 #3b3b3b;
    animation: dot-loader-animation 1s ease-in-out 0s infinite;
}

.dot-loader.white,
.dot-loader.white::before,
.dot-loader.white::after {
    box-shadow: 10px 0 white;
    animation: dot-loader-animation-white 1s ease-in-out 0s infinite;
}

.dot-loader,
.dot-loader.white {
    position: relative;
    animation-delay: 0.1s;
    margin: 0 24px 0.16em -5px;
}

.dot-loader::before,
.dot-loader::after {
    content: '';
    position: absolute;
}

.dot-loader::before,
.dot-loader.white::before {
    left: -13px;
    animation-delay: 0s;
}

.dot-loader::after,
.dot-loader.white::after {
    left: 13px;
    animation-delay: 0.2s;
}

@keyframes dot-loader-animation {
    15% { box-shadow: 10px -3px #3b3b3b; }
    30% { box-shadow: 10px 3px #3b3b3b; }
    0%, 45%, 100% { box-shadow: 10px 0 #3b3b3b; }
}

@keyframes dot-loader-animation-white {
    15% { box-shadow: 10px -3px white; }
    30% { box-shadow: 10px 3px white; }
    0%, 45%, 100% { box-shadow: 10px 0 white; }
}


/* Click events in iOS only bubble when this is set.
   And since there is no cursor on iOS (for now), this
   does not make a visual difference. */
.is-ios * {
    cursor: pointer;
}

x-popup-menu {
    display: block;
    position: relative;
    text-align: right;
}

x-card x-popup-menu {
    top: -6px;
    right: -8px;
}

x-popup-menu[left-align] {
    text-align: left;
}

x-popup-menu button {
    /* border: 0; */
    background: transparent !important;
    color: inherit;
    border: 1px solid transparent !important;
    font-size: 13px;
    width: 40px;
    padding: 0;
    height: 40px;
    line-height: 40px;
    min-height: 40px;
    box-shadow: none;
    box-sizing: border-box;
    cursor: pointer;
}

x-popup-menu button:hover {
    background: rgba(0, 0, 0, 0.075) !important;
}

x-popup-menu > button {
    border-radius: 50%;
}

x-popup-menu > button > .material-icons {
    margin-top: -0.5rem;
}

x-popup-menu > div {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    background: white;
    z-index: 1;
    border: 1px solid lightgray;
    border-radius: 4px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
}

x-popup-menu[left-align] > div {
    right: auto;
    left: 0;
}

x-popup-menu.active > div {
    display: initial;
    /* We need to animate from below here, so that the popupmenu
       is on top of the button when the user clicks/touches. On
       touch devices this would result in an instant click on the
       top popupmenu item. */
    animation: popupmenu-from-below;
    animation-duration: 0.3s;
}

x-popup-menu > button[disabled] + div {
    display: none !important;
}

x-popup-menu > div > button {
    display: block;
    width: 100%;
    text-align: left;
    margin: 0;
    border-radius: 0;
    padding: 4px 15px;
    height: 48px;
    font-family: inherit;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.16em;
}

x-popup-menu > div > button .material-icons {
    margin-right: 9px;
}

@keyframes popupmenu-from-below {
    from {
        opacity: 0;
        /* Height of the button, so that the menu is not initiated above the button */
        transform: translateY(40px);
    }
    25%{ opacity: 0; }
    to{ opacity: 1; }
}

.v-qr-code-overlay {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    background: white;
    padding: 32px;
    border: 50vmax solid #1f2348cc; /* border that covers the whole screen, --nimiq-blue with 80% opacity */
    border-radius: calc(50vmax + 8px);
    background-clip: padding-box;
    box-sizing: content-box;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
}

.v-qr-code-overlay.show {
    animation: fade .3s;
}

.v-qr-code-overlay.hide {
    animation: fade .3s reverse;
    pointer-events: none;
}

.v-qr-code-overlay [message] {
    white-space: pre-line;
}

.v-qr-code-overlay canvas {
    display: block;
    margin: 0 auto 32px auto;
}

@media (max-width: 420px) {
    /* on mobile fill full screen */
    .v-qr-code-overlay {
        width: calc(90% - 64px); /* minus padding */
    }

    .v-qr-code-overlay canvas {
        width: 100%;
    }
}

x-accounts {
    text-align: right;
    width: 100%;
    display: block;
}

x-accounts-list {
	display: flex;
	width: 100%;
	/* min-height: 177px; */ /* height of two XAccount elements */
	flex-grow: 1;
	overflow-y: auto;
	overflow-x: hidden;
	flex-direction: column;
}

x-accounts-list x-loading-animation {
    margin: 0 auto;
    margin-top: 2em;
    display: none;
}

x-accounts-list h2 {
    text-align: center;
}

x-account {
    display: flex;
    padding: 8px 0;
    cursor: pointer;
    position: relative;
    border-radius: 4px;
}

x-account-modal .x-modal-body {
    text-align: center;
}

x-account-modal x-account {
    cursor: auto;
    animation: none;
    margin-bottom: 1em;
}

x-account:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

x-account-modal x-account:hover {
    background-color: transparent;
}

x-account x-identicon {
    /* display: block; */
    width: 80px;
    min-width: 50px;
    height: 71px;
    flex-shrink: 0;
}

x-account-modal x-identicon {
    display: block;
    width: 160px;
    margin: -8px auto 16px;
}

x-account .x-account-info {
    text-align: left;
    width: 100%;
    padding-left: 16px;
    max-width: calc(100% - 80px);
}

x-account .x-account-label {
    display: block;
    text-align: left;
    font-weight: bold;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

x-account .x-account-bottom {
    text-align: right;
    margin-top: 12px;
}

x-account-modal .x-account-bottom {
    text-align: center;
}

x-account x-amount {
    display: block;
    font-size: 16px;
    margin-top: -0.25em;
}

@media (max-width: 480px) {
    x-account x-amount {
        font-size: 1.2em;
    }
}

@media (max-width: 350px) {
    x-account x-amount {
        font-size: 1em;
    }
}

x-accounts .add-address {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 8px;
    font-weight: bold;
    opacity: 0.7;
    transition: opacity 250ms ease;
    border-radius: .5rem;
}

x-accounts .add-address:hover,
x-accounts .add-address:focus {
    opacity: 1;
}

x-accounts .add-address [icon-identicon-plus] {
    display: block;
    width: 60px;
    height: 60px;
    background-size: contain;
    margin: 0 26px 0 10px;
}


x-account-modal x-amount {
    display: block;
    font-size: 1.5em;
    margin: 0.5em 0 1em;
}

x-account-modal x-amount[display] {
    font-size: 2em;
    margin: 0.5em 0 1em;
}

x-account .x-address {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* max-width: calc(100% - 96px); */
    pointer-events: none;
    padding: 0;
    min-width: auto;
    font-weight: normal;
    opacity: 0.6;
}

x-account-modal .x-address {
    display: inline-block;
    margin: 0.5em 0;
}

x-account .account-icon,
x-account-modal .account-icon {
    display: block;
    position: absolute;
    left: 66px;
    top: 48px;
    width: 1.4em;
    height: 1.4em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 85%;
    background-color: white;
    padding: 12px;
    border: 0.5px solid lightgray;
    border-radius: 50%;
    font-size: 20px;
}

x-account-modal .account-icon {
    padding: 22px;
    left: calc(50% + 40px);
    top: 128px;
    background-size: 80%;
    font-size: 32px;
}

x-account .account-icon::after {
    position: relative;
    left: -8.5px;
    top: -9px;
}

x-account-modal .account-icon::after {
    position: relative;
    left: -16px;
    top: -15.5px;
}

x-account .secure-icon::after,
x-account-modal .secure-icon::after {
    content: 'check_circle';
    color: #2e7d32;
}

x-account .vesting-icon::after,
x-account-modal .vesting-icon::after {
    content: 'access_time';
}

x-account .ledger-icon,
x-account-modal .ledger-icon,
x-popup-menu .ledger-icon {
    /* @asset(ledger_icon_24px.svg) */
    background-image: url('ledger_icon_24px.svg');
}

x-popup-menu .ledger-icon,
x-popup-menu [icon-qr-scan] {
    width: 24px;
    vertical-align: middle;
}

x-account-modal .x-account-label {
    font-size: 1.2em;
}

x-account-modal hr {
    background: rgba(0, 0, 0, 0.1);
    height: 1px;
    border: 0;
}

x-account-modal .action-button {
    text-align: center;
}

/* Responsiveness */
@media (min-width: 481px) {
    x-account .account-icon {
        left: 70px;
    }

    x-account-modal .account-icon {
        left: calc(50% + 40px);
        top: 135px;
    }
}

x-accounts-list x-account {
    padding: 8px;
}

x-expandable {
    display: block;
    position: relative;
    background: white;
    color: #212121;
    box-sizing: border-box;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 1px 5px 0 rgba(0, 0, 0, 0.12),
        0 3px 1px -2px rgba(0, 0, 0, 0.2);
}

x-expandable[transparent] {
    background: none;
    box-shadow: none;
    color: inherit;
}

x-expandable > div {
    width: 100%;
    height: 100%;
}

x-expandable [expandable-trigger] {
    display: inline-block;
    box-sizing: border-box;
    padding-right: 40px;
    transition: padding .3s;
    position: relative;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

@media (max-width: 480px) {
    x-expandable [expandable-trigger] {
        padding-right: 30px;
    }
}

x-expandable[disabled] {
    pointer-events: none;
    box-shadow: none;
}

x-expandable[disabled] [expandable-trigger] {
    padding-right: 0;
}

x-expandable [expandable-trigger]::before,
x-expandable [expandable-trigger]::after {
    /* arrow icon on the right */
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    height: 2px;
    width: 13px;
    background: #e2a62f;
    pointer-events: none;
    transition: opacity .3s;
}

x-expandable [expandable-trigger]::before {
    transform: rotate(45deg);
    right: 16px;
}

x-expandable [expandable-trigger]::after {
    transform: rotate(-45deg);
}

x-expandable[disabled] [expandable-trigger]::before,
x-expandable[disabled] [expandable-trigger]::after {
    opacity: 0;
}

x-expandable [expandable-content] {
    display: none;
    width: 100%;
    max-height: 0;
    box-sizing: border-box;
    transition: max-height .5s;
    overflow: hidden;
    cursor: initial;
    padding-bottom: 3px;
}

x-expandable[dropdown] [expandable-content] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    background: white;
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
        0  6px 30px 5px rgba(0, 0, 0, 0.12),
        0  8px 10px -5px rgba(0, 0, 0, 0.4);
}


x-accounts-dropdown {
    display: block;
    width: 100%;
    height: 88px;
}

x-accounts-dropdown x-expandable:not([disabled]) [status-message] {
    display: none;
}

x-accounts-dropdown [status-message]:not(:empty) {
    margin: 20px !important;
}

x-accounts-dropdown x-expandable {
    height: 100%;
}

x-accounts-dropdown [expandable-trigger] {
    display: flex;
    border-right: 16px solid transparent;
}

@media (max-width: 480px) {
    x-accounts-dropdown [expandable-trigger] {
        border-right: 0;
    }
}

x-accounts-dropdown x-expandable:not([disabled]) [expandable-trigger]:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

x-accounts-dropdown [expandable-trigger] x-account:hover {
    background: transparent;
}

x-accounts-dropdown x-accounts-list {
    display: block;
    min-height: unset;
    max-height: 200px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
}

x-accounts-dropdown x-account {
    animation: none;
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
}

.x-input{
  width: 100%;
  box-sizing: border-box;
}

.x-input.shake input {
    border-bottom: 1px solid var(--nimiq-red) !important;
}


/* Numpad */

x-numpad {
    padding-bottom: 16px;
    text-align: center;
    touch-action: manipulation;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

x-numpad>* {
    width: 32%;
    box-sizing: border-box;
    padding: 8px;
    display: inline-block;
    background: none;
    color: white;
    border: none;
    box-shadow: none;
    border-radius: 0;
    height: auto;
    font-size: 32px;
    line-height: 48px;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
    pointer-events: all;
    transition: opacity 0.7s;
}

x-numpad.max-decimals-reached > *:not([delete]),
x-numpad.has-dot > [dot] {
    opacity: 0.3;
    pointer-events: none;
}


x-amount-input {
    font-size: 3em;
}

x-amount-input input {
    width: 100%;
}

@media (max-width: 620px) {
    x-amount-input {
        font-size: 2.5em !important;
    }
}

@media (max-width: 515px) {
    x-amount-input {
        font-size: 2em !important;
    }
}

@media (max-width: 410px) {
    x-amount-input {
        font-size: 1.5em !important;
    }
}

x-amount-input button.set-max {
    display: none;
}

x-amount-input[enable-set-max] input {
    padding-left: 96px;
    padding-right: 96px;
}

x-amount-input[enable-set-max] button.set-max {
    display: initial;
    background: white;
    position: absolute;
    right: 4px;
    bottom: 4px;
    opacity: 0;
    transition: opacity 0.1s ease-out;
    pointer-events: none;
}

x-amount-input[enable-set-max].show-set-max-button button.set-max,
x-amount-input button.set-max:active/*,
x-amount-input button.set-max:focus*/ {
    opacity: 1;
    pointer-events: all;
}

x-amount-input input + .ticker {
    display: block;
    position: absolute;
    right: 1.75em;
    bottom: 1.1em;
    margin: 0;
    padding: 0;
    font-size: 0.5em;
    font-weight: 600;
    letter-spacing: 0.08em;
    opacity: 0.4;
    transition: opacity 0.2s ease-out;
    color: var(--nimiq-light-blue);
}

x-amount-input input:focus + .ticker {
    opacity: 1;
}

@media (min-width: 420px) {
    x-amount-input x-numpad {
        display: none;
    }
}

x-amount-input input[disabled] {
    opacity: 1;
    cursor: default;
}

x-amount-input form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

x-amount-input x-currency-nim {
    display: block;
    position: relative;
}


x-receive-request-link-modal x-identicon {
    display: block;
    width: 160px;
    margin: 0 auto;
}

x-receive-request-link-modal .x-message {
    margin: 20px;
}

.web-share-item.web-share-facebook {
    display: none;
}

x-create-request-link-modal {
    width: 600px;
}

x-create-request-link-modal ul {
    padding-left: 20px;
    list-style: square;
    max-width: 100%;
}

x-create-request-link-modal .address-label {
    margin-bottom: 4px;
}

x-create-request-link-modal ul .x-address {
    margin-left: -15px;
}

x-create-request-link-modal ul li:last-child {
    padding-bottom: 0;
}

x-create-request-link-modal .request-link-container {
    display: flex;
    align-items: center;
}

x-create-request-link-modal .request-link-container > * {
    overflow: auto;
    /* to have enough space to render request link hover background overflow */
    padding-left: 8px;
    margin-left: -8px;
}

x-create-request-link-modal .x-request-link {
    cursor: pointer;
    font-weight: bold;
    overflow-wrap: break-word;
    padding: 8px;
    margin-left: -8px;
}

x-create-request-link-modal .qr-code-container {
    margin-left: 32px;
    padding: 12px;
    margin-right: -12px;
    flex-shrink: 0;
    cursor: pointer;
}

x-create-request-link-modal .qr-code-container canvas {
    display: block;
}

x-create-request-link-modal .x-request-link:hover,
x-create-request-link-modal .qr-code-container:hover {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

@media (max-width: 420px) {
    x-create-request-link-modal .request-link-container {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    x-create-request-link-modal .request-link-container > * {
        max-width: 100%;
    }

    x-create-request-link-modal .qr-code-container {
        margin: 0 0 32px 0;
        background: transparent !important;
        cursor: auto;
        padding: 0;
    }
}

/* style header for stand alone v-contact-list similar to modal header */

.v-contact-list .header {
    position: relative;
    padding-left: 32px;
}

/* align popup menu button (three dots) to borders of header and center to title */
.v-contact-list .header x-popup-menu {
    position: absolute;
    left: -14px;
    top: -14px;
    width: 100%; /* to render the list correctly */
}

/* similar style to x-popup-menu trigger */
.v-contact-list .header > [add] {
    position: absolute;
    top: -10px;
    right: -8px;
    width: 40px;
    height: 40px;
    padding: 8px;
    cursor: pointer;
}
.v-contact-list .header > [add]:hover {
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .075);
}
x-settings {
    width: 480px;
}

x-settings .setting {
    display: block;
    padding: 1em;
    cursor: pointer;
    border-radius: 4px;
}

x-settings .setting:hover {
    background: rgba(0, 0, 0, 0.075);
}

x-settings small {
    display: block;
    opacity: 0.6;
    margin-top: 8px;
}

x-settings input[type="checkbox"] {
    float: right;
}

x-settings h2.advanced {
    margin: 40px 16px 16px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 13px;
    font-weight: bold;
}

x-modals {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: background .4s ease-in-out;
    z-index: 1;
}

x-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    padding: 24px 0 60px;
}

x-modal-container > * {
    animation-duration: .4s !important;
    animation-fill-mode: both;
}


.x-modal {
    background: white;
    color: rgba(0,0,0,0.8);
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
        0 1px 8px 0 rgba(0, 0, 0, 0.12),
        0 3px 3px -2px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: auto;

    max-width: 97%; /* Could also use 97vw */
}

.modal-header {
    padding-top: 16px;
    text-align: center;
    position: relative;
    /* border-bottom: 1px solid #f3f3f3; */
    padding-bottom: 16px;
}

.modal-header h2 {
    padding: 8px 46px;
    font-size: 20px;
    line-height: 18px;
    font-weight: 600;
}

.modal-header x-popup-menu {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - 22px);
    margin: 11px;
}

.modal-header .header-button,
.modal-header [x-modal-close] {
    position: absolute;
    top: 0;
    cursor: pointer;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 13px;
    border-radius: 50%;
}

.modal-header .header-button:hover,
.modal-header .header-button:focus,
.modal-header [x-modal-close]:hover,
.modal-header [x-modal-close]:focus {
    background-color: rgba(0, 0, 0, 0.1);
}

.modal-header .header-button {
    left: 0;
    background-size: 24px;
}

.modal-header [x-modal-close] {
    right: 0;
}

@keyframes background-progress {
    0%  { background-position: 0% 0 }
    100%{ background-position: 200% 0 }
}

.modal-body {
    padding: 32px 32px;
    position: relative; /* Required for absolute positioning of account icon */
}

@media (max-width: 480px) {
    .modal-body {
        padding: 24px 12px;
    }
}


.x-education-slide {
    max-width: 1000px !important;
}

.x-education-slide .has-side-image {
    display: flex;
}

.x-education-slide [class^="side-image"] {
    width: 35%;
    min-width: 35%;
    background-repeat: no-repeat;
    background-position: center;
}

.x-education-slide [class^="side-image"]:first-child {
    margin-right: 32px;
}
.x-education-slide [class^="side-image"]:last-child {
    margin-left: 32px;
}

.x-education-slide p {
    text-align: left;
    line-height: 1.2;
}

.x-education-slide h3:not(:first-child) {
    margin-top: 32px;
}

.x-education-slide .button-bar {
    display: flex;
    justify-content: space-between;
}

.x-education-slide button {
    margin: 24px auto 0;
    position: relative;
}

.x-education-slide button[back] {
    background: transparent;
    color: rgba(0, 0, 0, 0.48);
    border: 1px solid rgba(0, 0, 0, 0.15);
    width: 48%;
    float: left;
}

.x-education-slide button[back] ~ button[next] {
    width: 48%;
    float: right;
}

.x-education-slide button[next]::after,
.x-education-slide button[back]::before {
    /* Copied from /libraries/nimiq-style/material-icons/material-icons.css */
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    vertical-align: middle;
    margin-top: -0.1em;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

.x-education-slide button[next]::after {
    content: "navigate_next";
    right: 8px;
    top: 10px;
    position: absolute;
    opacity: .9;
    font-size: 40px;
}

.x-education-slide button[back]::before {
    content: "navigate_before";
    left: 8px;
    top: 10px;
    position: absolute;
    opacity: .7;
    font-size: 40px;
}

.x-education-slide .warning {
    padding: 12px;
    padding-left: 64px;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
        0 1px 8px 0 rgba(0, 0, 0, 0.12),
        0 3px 3px -2px rgba(0, 0, 0, 0.4);
    margin-bottom: 24px;
    border-top: 2px solid #ea4b40;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    line-height: 1.2;
}

.x-education-slide .important {
    color: red;
}

@media screen and (max-width: 800px) {
    .x-education-slide .has-side-image {
        flex-direction: column;
        align-items: center;
    }

    .x-education-slide [class^="side-image"] {
        height: 200px;
        width: 50%;
        order: 0;
        margin: 32px 0 !important;
    }

    .x-education-slide .has-side-image > :not([class^="side-image"]) {
        order: 1;
    }

    .x-education-slide .button-bar {
        flex-direction: column;
    }

    .x-education-slide button {
        width: 100% !important;
    }
}

.x-education-slide .warning:before {
    content: "";
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='32' height='32'%3E%3Cpath d='M505.403 406.394L295.389 58.102c-8.274-13.721-23.367-22.245-39.39-22.245s-31.116 8.524-39.391 22.246L6.595 406.394c-8.551 14.182-8.804 31.95-.661 46.37 8.145 14.42 23.491 23.378 40.051 23.378h420.028c16.56 0 31.907-8.958 40.052-23.379 8.143-14.421 7.89-32.189-.662-46.369zm-28.364 29.978a12.684 12.684 0 0 1-11.026 6.436H45.985a12.68 12.68 0 0 1-11.025-6.435 12.683 12.683 0 0 1 .181-12.765L245.156 75.316A12.732 12.732 0 0 1 256 69.192c4.41 0 8.565 2.347 10.843 6.124l210.013 348.292a12.677 12.677 0 0 1 .183 12.764z' fill='%23ea4b40'/%3E%3Cpath d='M256.154 173.005c-12.68 0-22.576 6.804-22.576 18.866 0 36.802 4.329 89.686 4.329 126.489.001 9.587 8.352 13.607 18.248 13.607 7.422 0 17.937-4.02 17.937-13.607 0-36.802 4.329-89.686 4.329-126.489 0-12.061-10.205-18.866-22.267-18.866zm.311 180.301c-13.607 0-23.814 10.824-23.814 23.814 0 12.68 10.206 23.814 23.814 23.814 12.68 0 23.505-11.134 23.505-23.814 0-12.99-10.826-23.814-23.505-23.814z' fill='%23ea4b40'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    width: 64px;
    height: 100%;
    top: 0;
    left: 0;
}

.x-education-slide .side-image-intro {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.4 140.1"><defs><linearGradient id="a" x1="63.2" x2="63.2" y2="140.1" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="%23a352fd"/><stop offset="1" stop-color="%23566bfd"/></linearGradient></defs><g data-name="Layer 2"><path fill="url(%23a)" d="M99.6 91.6h22.7V45H99.6zm19.1-14v10.5h-10.4a10.4 10.4 0 0 1 10.4-10.4zm7.7-75.5V9a14.3 14.3 0 0 1-.6 4.2l-9 28.2h-11.9l7.4-27.3a1.6 1.6 0 0 0-1.5-2H35a1.6 1.6 0 0 0-1.5 2l7 27.3H28.7L20 13.3a14 14 0 0 1-.6-4.3V2.2A2.1 2.1 0 0 1 21.5 0h102.8a2.1 2.1 0 0 1 2.1 2.1zM103.7 28l-4.6 1.8-.4 1-.6 1.7-.7 1.8a.1.1 0 0 1-.2 0l-.7-1.8-.7-1.8-.4-1-4.6-1.6a.1.1 0 0 1 0-.2l4.6-1.8 1.7-4.6a.1.1 0 0 1 .3 0L99 26l4.6 1.7a.1.1 0 0 1 0 .2zm-50.3-9a.1.1 0 0 1 0 .2l-2.9 1.1-1 2.9a.1.1 0 0 1-.3 0l-1-2.9-3-1a.1.1 0 0 1 0-.2l1-.4 2-.7 1-3a.1.1 0 0 1 .1 0l1.1 3 2 .7zm36.3.1l-2.8-1a.1.1 0 0 1 0-.2l1-.3 1.8-.7 1-2.8a.1.1 0 0 1 .2 0l1 2.8 1.9.7.8.3a.1.1 0 0 1 0 .2l-2.7 1-1 2.7a.1.1 0 0 1-.2 0l-1-2.7zm-3.4 3.8L95 38.1a4.5 4.5 0 0 1 .5 1.8H77.6c-2.6-2-6.3-2.5-6.3-5.1a2.5 2.5 0 0 1 2.8-2.7 5.1 5.1 0 0 1 3.8 1.8l1.9-2.3a7.5 7.5 0 0 0-4.7-2.6v-3.4h-2.6V29a5.6 5.6 0 0 0-4.8 5.9c0 2.5 1.4 4 3 5H52a4.6 4.6 0 0 1 .6-1.7L61 22.8a4.5 4.5 0 0 1 4-2.3h17.3a4.5 4.5 0 0 1 4 2.3zM57.2 70a1.9 1.9 0 0 0-.3 0 40 40 0 0 1-10.2-1.4 30.4 30.4 0 0 1-3.1-1l-3.2-1.5a49.7 49.7 0 0 1-8.1-5.6L30.5 59a2 2 0 0 0-1.3-.4H29a2 2 0 0 0-.9.4l-1.8 1.5a37 37 0 0 1-17.6 8.8 45.9 45.9 0 0 1-7 .6 1.9 1.9 0 0 0-.3 0A1.7 1.7 0 0 0 0 71.7v31.1c0 15.2 10.1 25 27.9 37a2.7 2.7 0 0 0 2.7 0c17.8-12 28-21.8 28-37V71.7a1.7 1.7 0 0 0-1.4-1.6zm-21 25.5a10.8 10.8 0 0 1-1.6 2.4 11.7 11.7 0 0 1-1.3 1.2L34 111a2.4 2.4 0 0 1-.4 1.3 2.4 2.4 0 0 1-.7.7 2.3 2.3 0 0 1-.4.2 2.4 2.4 0 0 1-1 .2H27a2.4 2.4 0 0 1-2.4-2.4l1-11.7-.7-.5-1-1-.3-.4a9.4 9.4 0 0 1-.6-.9 9 9 0 0 1-.8-1.3 6.4 6.4 0 0 1-.4-1.3 4.9 4.9 0 0 1 0-1A7.7 7.7 0 0 1 37 93a6 6 0 0 1-.7 2.7zM23 45h22.6v19.6A42.6 42.6 0 0 1 33 56.4a5.3 5.3 0 0 0-6.9 0c-1 1-2.2 1.8-3.2 2.6zm26.2 0h47v46.7H61.8V71.8a5 5 0 0 0-5-5 41 41 0 0 1-7.7-.8z" data-name="Layer 1"/></g></svg>');
}

.x-education-slide .side-image-not-a-bank {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.06 126.06"><defs><linearGradient id="a" x1="63.03" x2="63.03" y2="126.06" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="%23a352fd"/><stop offset="1" stop-color="%23566bfd"/></linearGradient></defs><g data-name="Layer 2"><path fill="url(%23a)" d="M101.78 46.86v5H97zm-71 5h-5.66v-6.7L63.4 19.91 84.83 34 67 51.82zm23.6-13.17a8 8 0 1 0 7.95-7.95 8 8 0 0 0-7.95 7.91zM27 91.86l16.3-16.33V60c0-.85 1.26-1.55 2.11-1.55s1.88.7 1.88 1.55v11.54l16.36-16.36H30.78v25.58h-2a3.61 3.61 0 0 0-3.61 3.61v4.36A3.59 3.59 0 0 0 27 91.86zm71.18-11.1h-2V55.18h-2.72L84 64.65v16.08h-3.69V68.34l-24 24h41.84a3.61 3.61 0 0 0 3.61-3.62v-4.35a3.61 3.61 0 0 0-3.61-3.61zM126.06 63A63 63 0 1 1 63 0a63.11 63.11 0 0 1 63.06 63zM26.92 97.64l70.72-70.72a50 50 0 0 0-70.72 70.72zM113.09 63a49.84 49.84 0 0 0-7.26-25.95l-68.75 68.78a50 50 0 0 0 76-42.8zM63.42 42.93a2.67 2.67 0 0 0 2.27-2.62c0-1.3-.7-2.12-2.35-2.73-1.1-.45-1.46-.71-1.46-1.08s.38-.67 1-.67a3.67 3.67 0 0 1 1.65.4l.35.16.52-1.75-.2-.1a4.61 4.61 0 0 0-1.71-.46v-1.26h-1.63v1.37a2.55 2.55 0 0 0-2.17 2.5c0 1.55 1.27 2.21 2.51 2.66s1.29.78 1.29 1.11c0 .49-.46.8-1.16.8a4 4 0 0 1-2-.55l-.29-.18-.51 1.78.16.11a4.6 4.6 0 0 0 2.06.63v1.32h1.64v-1.44" data-name="Layer 1"/></g></svg>');
}

.x-education-slide .side-image-blockchain {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112.6 104"><defs><linearGradient id="a" x1="56.3" x2="56.3" y2="104" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="%23a352fd"/><stop offset="1" stop-color="%23566bfd"/></linearGradient></defs><g data-name="Layer 2"><path fill="url(%23a)" d="M107.5 0H5a5.1 5.1 0 0 0-5 5.1V14h112.6V5a5.1 5.1 0 0 0-5.1-5.1zm-95 10.2A3.2 3.2 0 1 1 16 6.9a3.2 3.2 0 0 1-3.3 3.3zm12.5 0a3.2 3.2 0 1 1 3.2-3.3 3.2 3.2 0 0 1-3.3 3.3zM0 17.6V99a5.1 5.1 0 0 0 5.1 5.1h102.4a5.1 5.1 0 0 0 5-5.1V17.7zm73.4 17.5v17.3a2.1 2.1 0 0 1-1 1.6l-14.8 8.5h-.1V45.4a2.2 2.2 0 0 1 1-1.6l14.8-8.5zm-38.8 61l-15-8.5a2.1 2.1 0 0 1-.9-1.6V68.8l15 8.6a2.2 2.2 0 0 1 .9 1.6zm.8-21.8l-14.9-8.6 15-8.6a2.1 2.1 0 0 1 1.7 0l15 8.5-15 8.7a2.1 2.1 0 0 1-1.8 0zM54 86a2.1 2.1 0 0 1-1 1.5l-14.8 8.6H38V79a2.1 2.1 0 0 1 .9-1.6l14.9-8.6v17.3zm0-23.5L39 54a2.1 2.1 0 0 1-1-1.6V35.2h.2L53 43.8a2.1 2.1 0 0 1 1 1.6zm.8-21.8L40 32.2l15-8.6a2.2 2.2 0 0 1 1.8 0l14.8 8.6h.1l-15 8.6a2.2 2.2 0 0 1-1.8 0zm18.6 55.4h-.1l-14.9-8.5a2.2 2.2 0 0 1-1-1.6V68.8h.2l14.8 8.6a2.2 2.2 0 0 1 1 1.6zm.8-21.8l-14.9-8.6 15-8.6a2.1 2.1 0 0 1 1.7 0l15 8.5-15 8.7a2.1 2.1 0 0 1-1.8 0zM92.8 86a2.1 2.1 0 0 1-1 1.5L77 96.2V79a2.1 2.1 0 0 1 .8-1.6l15-8.6v17.3z" data-name="Layer 1"/></g></svg>');
}

.x-education-slide .side-image-why {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 147.2 138.5"><defs><linearGradient id="a" x2="147.2" y1="69.3" y2="69.3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="%23a352fd"/><stop offset="1" stop-color="%23566bfd"/></linearGradient></defs><g data-name="Layer 2"><path fill="url(%23a)" d="M124.6 22.7H73.9l39.8-8.4 3.9-.8.8-.2a3.8 3.8 0 0 1 4.6 2.9zM106.6 2a3.8 3.8 0 0 0-5.3-1.4L66.9 20.3l44.7-9.4zm40.6 50.5V64a3.8 3.8 0 0 1-3.8 3.8h-21.1a3.8 3.8 0 0 1-3.8-3.8V52.4a3.8 3.8 0 0 1 3.8-3.8h21a3.8 3.8 0 0 1 3.9 3.8zm-15.7 5.8a4.3 4.3 0 1 0-4.3 4.3 4.3 4.3 0 0 0 4.3-4.3zm-57 5.8a5.9 5.9 0 1 0 0 8.3 5.9 5.9 0 0 0 0-8.3zm10.7 1.2a27.6 27.6 0 0 1-36.8 37.4L40 111h-8.2v8.2h-8.1v8h-8v8.1l-3.2 3.2-11-1.6-.6-4.3 37.9-37.9-1-1.4L.6 130.4 0 126l36-35.9a27.6 27.6 0 0 1 43.5-32.4l1.8 1.8a28.3 28.3 0 0 1 2.6 3.4zm37-20.4h17.6V30.4a3.8 3.8 0 0 0-3.9-3.8H61.3a3.8 3.8 0 0 0-2.1.6 3.9 3.9 0 0 0-.9.8 3.8 3.8 0 0 0-.9 2.4v15.9a30.6 30.6 0 0 1 25.1 8l.1.2 2 2a30.4 30.4 0 0 1 2.8 3.6v.2l1.4 2.3a30.6 30.6 0 0 1 .6 27.1h46.5a3.8 3.8 0 0 0 3.9-3.8V71.6h-17.5a7.7 7.7 0 0 1-7.7-7.7V52.4a7.7 7.7 0 0 1 7.7-7.6z" data-name="Layer 1"/></g></svg>');
}

.x-education-slide .side-image-point-of-nimiq {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 99.8"><defs><linearGradient id="a" x2="125" y1="49.9" y2="49.9" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="%23a352fd"/><stop offset="1" stop-color="%23566bfd"/></linearGradient></defs><g data-name="Layer 2"><path fill="url(%23a)" d="M50.5 48.3a3.6 3.6 0 1 1-3.6 3.6 3.6 3.6 0 0 1 3.6-3.6zm32.8 51.3a8.2 8.2 0 0 1-.6-.9l-7.6-13.5H18.3a7.8 7.8 0 0 1-7.9-7.9v-6.6h-2v-10h2v-28h-2v-10h2v-5.6a7.8 7.8 0 0 1 7.9-7.9h62.2a7.8 7.8 0 0 1 7.8 7.9v34.4a8.8 8.8 0 0 1 2.2-.3h6.8V15A15 15 0 0 0 82.4 0H15A15 15 0 0 0 0 15v65.3a15 15 0 0 0 14.5 15v4.3h20.7v-4.3H63v4.3zM72.8 81H18.3a3.6 3.6 0 0 1-3.6-3.6v-6.6h2.7v-10h-2.7v-28h2.7v-10h-2.7v-5.6a3.6 3.6 0 0 1 3.6-3.6h62.2a3.6 3.6 0 0 1 3.5 3.6V54a8.7 8.7 0 0 0-1.3 1.8l-9.5 17a9.3 9.3 0 0 0-.4 8zm-2.6-12.7a4.7 4.7 0 1 0 0-9.3 4.7 4.7 0 0 0-1.8.4l-9.8-5.7a8.6 8.6 0 0 0 .2-1.5 8.4 8.4 0 0 0-5.6-8v-11a4.7 4.7 0 1 0-5.6.1v10.9A8.4 8.4 0 0 0 42 52a8.6 8.6 0 0 0 .1 1.5l-9.7 5.6a4.7 4.7 0 1 0 3 4.8l9.6-5.6a8.4 8.4 0 0 0 10.9 0l9.8 5.7a4.7 4.7 0 0 0 4.5 4.2zm54.2 12.1l-9.5 17a5 5 0 0 1-4.3 2.5h-19a5 5 0 0 1-4.3-2.5l-9.4-17a5.2 5.2 0 0 1 0-5l9.4-17a5 5 0 0 1 4.3-2.5h19a5 5 0 0 1 4.3 2.5l9.5 17a5.3 5.3 0 0 1 0 5zm-16.4 2c0-7.4-9.7-6.5-9.7-10.9 0-2 1.2-3 3.1-3a5.6 5.6 0 0 1 4.1 2l2.1-2.5a8.2 8.2 0 0 0-5.1-2.8v-3.7h-2.8v3.8a6.2 6.2 0 0 0-5.3 6.4c0 6.9 9.7 6.2 9.7 11 0 2-1.2 3.1-3.5 3.1a8.4 8.4 0 0 1-5.3-2.2l-1.8 2.8a10.9 10.9 0 0 0 6.2 2.8V93h2.8v-4a6.4 6.4 0 0 0 5.5-6.7z" data-name="Layer 1"/></g></svg>');
}

.x-education-slide .side-image-phishers {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.08 122.5"><defs><linearGradient id="a" x2="126.08" y1="61.25" y2="61.25" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="%23a352fd"/><stop offset="1" stop-color="%23566bfd"/></linearGradient></defs><g data-name="Layer 2"><path fill="url(%23a)" d="M101.52 119.31v2.1c0 .6-.3 1.09-.68 1.09h-75.6c-.37 0-.68-.49-.68-1.09v-2.1c0-.59.31-1.08.68-1.08h75.6c.38 0 .68.49.68 1.08zM119.77 108s-9 1.92-14.8 2.67V69.94a5.17 5.17 0 0 0-5.16-5.16H26.28a5.17 5.17 0 0 0-5.17 5.16v40.69c-5.76-.75-14.8-2.67-14.8-2.67-17.31-3.75 6-45.73 10.89-52.62 7.61-10.59 14.8-6.4 24.33-12.26-1.2.74-4.87-5.77-5.08-6.47-1.06-3.39-.05-6.23 1.19-9.38A68.94 68.94 0 0 1 48.71 8.49C52.27 4.28 56.66.52 62.38 0c6.06-.51 11.33 4.13 15 8.45a68.79 68.79 0 0 1 11.06 18.78c1.24 3.15 2.25 6 1.2 9.38-.22.7-3.88 7.21-5.09 6.47C94 48.83 101.43 45 108.87 55.33c4.95 6.9 28.21 48.88 10.9 52.67zM78 31H48.07c-2.41.06-1.78 1.43-1.78 1.43S53.75 52.71 63 52.71s16.75-20.3 16.75-20.3S80.42 31 78 31zM67.63 88.91c1.75 0 3.16.24 3.16-1s-1.41-3.56-3.16-3.56-3.16 1-3.16 2.29 1.42 2.27 3.16 2.27zm-7.64 0c1.74 0 3.16-1 3.16-2.3s-1.42-2.29-3.15-2.29-3.16 2.29-3.16 3.56 1.41 1.03 3.16 1.03zm2.28 1.75c0 1-.33 1.73 1.48 1.73s1.47-.78 1.47-1.73a1.5 1.5 0 1 0-2.95 0zm39.25-20.72V114a1.73 1.73 0 0 1-1.71 1.73H26.28a1.73 1.73 0 0 1-1.72-1.73V69.94a1.73 1.73 0 0 1 1.72-1.72h73.53a1.72 1.72 0 0 1 1.71 1.72zM54.81 91.83v.31l3.7.72.49 3.73h2.21v-1.1h1.07v1.07h1v-1.04h1.05v1.07h.88v-1.07h1v1.07h2.32l.5-3.73 3.7-.72v-.31a75.84 75.84 0 0 0 0-10.25c-.44-5.35-7.59-6.44-7.86-6.48a7.3 7.3 0 0 0-2.26 0 14.43 14.43 0 0 0-3.9 1.25 6.54 6.54 0 0 0-4 5.23 74 74 0 0 0 .1 10.25zm12 10.26l5.53-3a1.93 1.93 0 1 0 3.39-1.86 1.91 1.91 0 0 0-1.28-1 2 2 0 0 0-.12-1.6A1.93 1.93 0 0 0 71 96.51l-7.16 3.92-7.16-3.92a1.93 1.93 0 1 0-3.5-.26 1.91 1.91 0 0 0-1.29 1 1.93 1.93 0 1 0 3.39 1.86l5.54 3-5.54 3a1.93 1.93 0 0 0-3.42 1.89 2 2 0 0 0 1.29 1 1.9 1.9 0 0 0 .11 1.59 1.93 1.93 0 0 0 3.39-1.85l7.16-3.93 7.19 3.87a1.93 1.93 0 1 0 3.51.26 2 2 0 0 0 1.28-1 1.93 1.93 0 1 0-3.39-1.85z" data-name="Layer 1"/></g></svg>');
}

.x-education-slide .side-image-scams {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 147.3 126.5"><defs><linearGradient id="a" x2="147.3" y1="63.3" y2="63.3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="%23a352fd"/><stop offset="1" stop-color="%23566bfd"/></linearGradient></defs><g data-name="Layer 2"><path fill="url(%23a)" fill-rule="evenodd" d="M111.8 89.4v-8.2h7.2l3-5.4a9 9 0 0 0 0-8.8l-16.4-29.2a8.5 8.5 0 0 0-7.4-4.4H65.5a8.5 8.5 0 0 0-7.4 4.4L41.7 67a9 9 0 0 0 0 8.8L58 105a8.5 8.5 0 0 0 7.4 4.4h24.8zm-32.3 8.1v-6.3a18.7 18.7 0 0 1-10.6-4.8l3.1-5c3 2.4 5.8 4 9.1 4 4 0 6-2 6-5.5 0-8.3-16.6-7.1-16.6-19-.1-5.9 3.5-10 9-11v-6.5h4.9v6.3a14.1 14.1 0 0 1 8.9 5l-3.6 4.2c-2.3-2.2-4.2-3.4-7.2-3.4-3.3 0-5.3 1.8-5.3 5 0 7.7 16.7 6.2 16.7 19A11 11 0 0 1 84.4 91v6.5zm35.3 6h11.7V118h-13.8v8.5L96 110.7l3.6-3.4 13.3-12.4v8.5zm15.6 5v-8.6h-13.6V85.3h13.7v-8.5l16.8 15.8zm-78.6-82a98.8 98.8 0 0 1-21.6 2 99.5 99.5 0 0 1-21.6-2L6.8 39.6a3.4 3.4 0 0 0 2.8 3.8c3.6.4 8.8.8 13.4 1a4.3 4.3 0 0 0 3-1.3l1.4-1.5a3.8 3.8 0 0 1 2.9-1.3 4 4 0 0 1 2.9 1.3l1.4 1.3a4.3 4.3 0 0 0 3 1.3c4.4-.1 9.4-.6 12.8-1a3.2 3.2 0 0 0 2.8-3.6zm-27 10.1a9.1 9.1 0 0 1-5.3 2 9.6 9.6 0 0 1-5.3-2 1.2 1.2 0 0 1 0-1.8 9.2 9.2 0 0 1 5.3-1.9 9.5 9.5 0 0 1 5.3 2 1.2 1.2 0 0 1 0 1.8zm21.3 0a9.1 9.1 0 0 1-5.3 2 9.6 9.6 0 0 1-5.2-2 1.2 1.2 0 0 1 0-1.8 9.2 9.2 0 0 1 5.2-1.9 9.5 9.5 0 0 1 5.3 2 1.2 1.2 0 0 1 0 1.8zm-16-11c16.8 0 30.4-3.2 30.4-7.2 0-2-3.5-3.7-9-5.1l.8 4.1-2.8.7L46.2 4a5.2 5.2 0 0 0-6-3.9l-5.5 1.3a20.1 20.1 0 0 1-9.1 0L20.2 0a5 5 0 0 0-6 3.9l-3.4 14-2.8-.6 1-4c-5.5 1.3-9 3.1-9 5.2-.1 3.8 13.4 7 30.2 7z" data-name="Layer 1"/></g></svg>');
}

.x-education-slide .side-image-loss {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.95 109.02"><defs><linearGradient id="a" x2="126.95" y1="54.51" y2="54.51" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="%23a352fd"/><stop offset="1" stop-color="%23566bfd"/></linearGradient></defs><g data-name="Layer 2"><path fill="url(%23a)" d="M.26 75.52v9.76a3.62 3.62 0 0 0 3.63 3.6l100.18-.37a3.61 3.61 0 0 0 3.6-3.62v-9.46zM53.94 84a3 3 0 1 1 3-3 3 3 0 0 1-3 3zm22.24 20H69.8a1.68 1.68 0 0 1-1.45-1l-3-10.35-22.65.08-3 10.38a1.56 1.56 0 0 1-1.44 1.09h-6.38a1.38 1.38 0 0 0-1.44 1.45v1.93a1.4 1.4 0 0 0 1.42 1.42l44.34-.16a1.4 1.4 0 0 0 1.44-1.45v-1.93a1.38 1.38 0 0 0-1.46-1.46zM127 19.75l-1.7 20.19h-6l-1.84-20.18zm-9 23.84h8.73v7.57h-8.72zm-64.95 5.76l-.69 3a1.29 1.29 0 0 1-2.52-.58l.69-3a1.29 1.29 0 1 1 2.52.57zm5.4 2.41a1.28 1.28 0 0 1-1 1.56 1.3 1.3 0 0 1-1.56-1l-.71-3a1.3 1.3 0 0 1 2.52-.6zm49-48.16a3.81 3.81 0 0 0-3.79-3.6L3.6.37A3.61 3.61 0 0 0 0 4l.25 68.82 107.42-.1zM19.12 54.66l-.51-.5a23.14 23.14 0 0 1 0-32.89l.51-.51 2.33 2.36-.51.51A19.82 19.82 0 0 0 21 51.8l.51.5zm4.16-4.19l-.51-.5a17.24 17.24 0 0 1 0-24.51l.51-.51 2.34 2.36-.51.51a13.91 13.91 0 0 0 0 19.79l.51.51zm6-7l.51.51-2.34 2.36-.51-.51a11.35 11.35 0 0 1 0-16.13l.51-.51 2.34 2.36-.51.51a8 8 0 0 0 0 11.41zm41.65 8.72v1.13a3.17 3.17 0 0 1-3.16 3.18h-4.62l-.58 6.8-17.27.06-.63-6.8h-4.62a3.18 3.18 0 0 1-3.19-3.16v-1.14a3.17 3.17 0 0 1 1.81-2.87 20 20 0 1 1 30.43-.11 3.18 3.18 0 0 1 1.81 2.86zm9.63-6l-2.36-2.34.51-.51a8 8 0 0 0-.09-11.41l-.52-.5L80.41 29l.51.5A11.34 11.34 0 0 1 81 45.58zm4.19 4.16l-2.36-2.34.5-.51a13.91 13.91 0 0 0-.15-19.79l-.51-.5 2.32-2.38.51.5a17.24 17.24 0 0 1 .19 24.51zM89.44 54l-.51.51-2.36-2.35.51-.5a19.81 19.81 0 0 0-.22-28.17l-.51-.5 2.32-2.38.51.5A23.14 23.14 0 0 1 89.44 54zM45.6 45.51a6 6 0 0 1-5.17-9.21 37.11 37.11 0 0 0 11.11 2.27 5.06 5.06 0 0 1 .07.88 6 6 0 0 1-6.01 6.06zm21.6-9.31a6 6 0 1 1-11.15 3.23 6.4 6.4 0 0 1 .06-.88A37.23 37.23 0 0 0 67.2 36.2z" data-name="Layer 1"/></g></svg>');
}

x-loading-animation {
    opacity: 1;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><style>@keyframes dash-animation { to { transform: rotate(240deg) translateZ(0); } } %23circle { animation: 3s dash-animation infinite linear; transform: rotate(-120deg) translateZ(0); transform-origin: center; }</style><defs><clipPath id="hexClip"><path clip-rule="evenodd" d="M16 4.29h32L64 32 48 59.71H16L0 32zm4.62 8h22.76L54.76 32 43.38 51.71H20.62L9.24 32z"/></clipPath></defs><path fill-rule="evenodd" d="M16 4.29h32L64 32 48 59.71H16L0 32zm4.62 8h22.76L54.76 32 43.38 51.71H20.62L9.24 32z" fill="%23fff" opacity=".2"/><g clip-path="url(%23hexClip)"><circle id="circle" cx="32" cy="32" r="16" fill="none" stroke-width="32" stroke="%23F6AE2D" stroke-dasharray="16.666 84.666"/></g></svg>');/* ALSO works in Firefox! */
    /*background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48c3R5bGU+QGtleWZyYW1lcyBkYXNoLWFuaW1hdGlvbiB7IHRvIHsgdHJhbnNmb3JtOiByb3RhdGUoMjQwZGVnKSB0cmFuc2xhdGVaKDApOyB9IH0gI2NpcmNsZSB7IGFuaW1hdGlvbjogM3MgZGFzaC1hbmltYXRpb24gaW5maW5pdGUgbGluZWFyOyB0cmFuc2Zvcm06IHJvdGF0ZSgtMTIwZGVnKSB0cmFuc2xhdGVaKDApOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7IH08L3N0eWxlPjxkZWZzPjxjbGlwUGF0aCBpZD0iaGV4Q2xpcCI+PHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYgNC4yOWgzMkw2NCAzMiA0OCA1OS43MUgxNkwwIDMyem00LjYyIDhoMjIuNzZMNTQuNzYgMzIgNDMuMzggNTEuNzFIMjAuNjJMOS4yNCAzMnoiLz48L2NsaXBQYXRoPjwvZGVmcz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiA0LjI5aDMyTDY0IDMyIDQ4IDU5LjcxSDE2TDAgMzJ6bTQuNjIgOGgyMi43Nkw1NC43NiAzMiA0My4zOCA1MS43MUgyMC42Mkw5LjI0IDMyeiIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iLjIiLz48ZyBjbGlwLXBhdGg9InVybCgjaGV4Q2xpcCkiPjxjaXJjbGUgaWQ9ImNpcmNsZSIgY3g9IjMyIiBjeT0iMzIiIHI9IjE2IiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjMyIiBzdHJva2U9IiNGNkFFMkQiIHN0cm9rZS1kYXNoYXJyYXk9IjE2LjY2NiA4NC42NjYiLz48L2c+PC9zdmc+'); /* Works also in Firefox */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72px;
    z-index: 1;
    display: block;
    height: 72px;
    width: 80px;
    margin: auto;
}

x-loading-animation + h2{
    padding-top: 16px;
    text-align: center;
}

x-captcha {
    min-width: 304px; /* to avoid jumping when the captcha is loaded */
    min-height: 80px;
    position: relative;
}

x-captcha.vaptcha .captcha-container {
    padding: 18px 0;
    background: white;
}

x-captcha x-loading-animation {
    position: absolute;
    width: 80px;
    height: 72px;
    left: calc(50% - 40px);
    top: calc(50% - 36px);
    z-index: -1;
}

.checkmark__circle {
    stroke-dasharray: 498;
    stroke-dashoffset: 498;
    stroke-width: 6;
    stroke-miterlimit: 30;
    stroke: var(--nimiq-green);
    /*fill: none;*/
}

.checkmark {
    width: 56px;
    height: 56px;
    display: block;
    stroke-width: 6;
    stroke: white;
    stroke-miterlimit: 30;
    margin: 10% auto;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 144;
    stroke-dashoffset: 144;
}

.animate-success-mark > .checkmark {
    animation: x-success-mark-scale .3s ease-in-out .9s both;
}

.animate-success-mark > .checkmark > .checkmark__circle {
    animation: x-animation-stroke .6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.animate-success-mark > .checkmark > .checkmark__check {
    animation: x-animation-stroke .3s cubic-bezier(0.65, 0, 0.45, 1) .8s forwards;
}

@keyframes x-animation-stroke {
    100% { stroke-dashoffset: 0; }
}
@keyframes x-success-mark-scale {
    0%, 100% { transform: none; }
    50% { transform: scale3d(1.1, 1.1, 1); }
}

x-success-mark + h2{
    padding-top: 8px;
}

.x-faucet-modal .modal-body {
    padding-top: 0;
}

.x-faucet-modal .modal-body > * {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fade-in .3s;
}

.x-faucet-modal .loading x-loading-animation,
.x-faucet-modal x-success-mark,
.x-faucet-modal .nq-icon.warning {
    margin: 10rem;
    width: 12rem;
    height: 12rem;
}

.x-faucet-modal .captcha x-captcha {
    margin: 11rem 0;
}

.x-faucet-modal x-success-mark .checkmark {
    stroke: white;
    margin: 0;
    width: 100%;
    height: 100%;
}

.x-faucet-modal x-succes-mark .checkmark__check {
    stroke: white;
}

.x-faucet-modal .nq-icon.warning {
    background-image: url('data:image/svg+xml,<svg width="75" height="74" viewBox="0 0 75 74" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M39.8365 49.2798C39.8365 50.8448 38.5617 52.1253 36.991 52.1253C35.4203 52.1253 34.1455 50.8448 34.1455 49.2798V30.6531C34.1455 29.0767 35.4203 27.8076 36.991 27.8076C38.5617 27.8076 39.8365 29.0767 39.8365 30.6531V49.2798ZM36.991 62.4718C35.4203 62.4718 34.1455 61.197 34.1455 59.6263C34.1455 58.0555 35.4203 56.7808 36.991 56.7808C38.5617 56.7808 39.8365 58.0555 39.8365 59.6263C39.8365 61.197 38.5617 62.4718 36.991 62.4718ZM73.3682 69.1074L39.5351 1.44694C38.5676 -0.482313 35.4148 -0.482313 34.4473 1.44694L0.301268 69.7391C-0.13694 70.6212 -0.0971029 71.6683 0.420779 72.5106C0.944352 73.3472 1.86061 73.8537 2.84515 73.8537H71.1373C71.1771 73.8594 71.2227 73.8594 71.2511 73.8537C72.8218 73.8537 74.0966 72.5846 74.0966 71.0082C74.0966 70.2797 73.8235 69.6139 73.3682 69.1074Z" fill="lightgray"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    animation: from-bottom .7s ease;
}

.x-faucet-modal .status-message {
    max-width: 22rem;
}

@media (min-width: 420px) {
    .x-faucet-modal {
        min-width: 45rem;
    }
}

x-loader {
    display: none;
}

x-loader.showing {
    background: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
v-wallet-selector {
    display: inline-block;
}


@media (min-width: 621px) {
    v-wallet-selector {
        position: relative;
    }
}

v-wallet-selector [active-wallet-label] {
    position: relative;
    padding: 14px;
    margin-top: -14px;
    margin-left: 10px;
    cursor: pointer;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;

    opacity: 0.7;
    transition: opacity 200ms;
    font-size: 16px;
    line-height: 20px;
}

v-wallet-selector [active-wallet-label]:hover,
v-wallet-selector.menu-active [active-wallet-label] {
    opacity: 1;
}

v-wallet-selector [active-wallet-label]::after {
    content: '';
    margin-left: 9px;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    background-size: 100%;
    background-size: contain;
    background-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" fill="white"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.1 12.8c-.3.3-.7.3-1 0L.8 7.3a.7.7 0 1 1 .9-1L6.3 11c.2.2.5.2.7 0l4.7-4.7a.7.7 0 1 1 .9 1l-5.5 5.5z"/></mask><path fill-rule="evenodd" clip-rule="evenodd" d="M7.1 12.8c-.3.3-.7.3-1 0L.8 7.3a.7.7 0 1 1 .9-1L6.3 11c.2.2.5.2.7 0l4.7-4.7a.7.7 0 1 1 .9 1l-5.5 5.5z" fill="white"/><path d="M4.7 14.2c1 1 2.8 1 3.8 0l-2.8-2.8c.5-.5 1.4-.5 1.9 0l-2.9 2.8zM-.8 8.7l5.5 5.5 2.9-2.8L2 5.9-.8 8.7zm0-3.8c-1 1-1 2.8 0 3.8l2.9-2.8c.5.5.5 1.3 0 1.9L-.8 4.9zM3 5C2 4 .3 4-.8 5l2.9 2.9c-.5.5-1.4.5-2 0l3-2.9zm4.7 4.7L3 4.9.2 7.8l4.7 4.6 2.8-2.8zm2.5-4.7L5.6 9.6l2.8 2.8 4.7-4.6-2.9-2.9zM14 5c-1-1-2.7-1-3.8 0l2.9 2.9c-.5.5-1.4.5-2 0l3-2.9zm0 3.8c1-1 1-2.7 0-3.8l-2.8 2.9c-.5-.6-.5-1.4 0-2L14 8.8zm-5.5 5.5L14 8.7l-2.8-2.8-5.5 5.5 2.8 2.8zM5 12.4c1 1 2.5 1 3.5 0L5.6 9.6c.6-.6 1.5-.6 2 0L5 12.4z" fill="white" mask="url(%23a)"/></svg>');
    transition: transform .3s, margin .3s;
    transform-origin: 50% 67%;
}

v-wallet-selector.menu-active [active-wallet-label]::after {
    transform: rotate(180deg);
}

v-wallet-selector .v-wallet-menu {
    position: absolute;
    top: -9999rem;
    z-index: 1000;
    color: var(--nimiq-blue);
    text-align: left;
    opacity: 0;
    transform: translateY(-1rem);
    transition: opacity .3s ease-out, transform .3s ease-out, top 0s .3s;
}

v-wallet-selector.menu-active .v-wallet-menu {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .3s ease-out, transform .3s ease-out;
}

v-wallet-selector .wallet-menu {
    min-height: unset !important;
}

.v-wallet-selector-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    -webkit-tap-highlight-color: transparent;
    background: rgba(31, 35, 72, 0); /* Nimiq Indigo 0% */
    z-index: 100;
    transition: background .4s ease-in-out;
}

v-wallet-selector.menu-active [active-wallet-label] {
    z-index: 1000;
}

v-wallet-selector.menu-active .v-wallet-selector-backdrop {
    background: rgba(31, 35, 72, .8); /* Nimiq Indigo 80% */
}


v-migration-welcome .small-page {
    width: 52.5rem !important;
    max-width: 100% !important;
    margin: 0 !important;
}

v-migration-welcome .nq-text {
    text-align: left;
}

v-migration-welcome .nq-button {
    width: unset;
}
 /* can be triggered via hub-client.js */
x-wallet-preview-modal {
    display: flex;
    width: 730px;
    min-height: 500px;
    border-radius: 10px;
}

x-wallet-preview-modal .message {
    margin: 16px 48px 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

x-wallet-preview-modal .message > * {
    flex-shrink: 0;
}

x-wallet-preview-modal .upgrade-icon {
    width: 106px;
    height: 106px;
    margin-top: auto;
    /* @asset(upgrade-icon.svg) */
    background-image: url('upgrade-icon.svg');
}

x-wallet-preview-modal .nq-h1 {
    margin-top: 24px;
    margin-bottom: 16px;
}

x-wallet-preview-modal p {
    margin-bottom: 8px;
    line-height: 22px;
}

x-wallet-preview-modal p.nq-light-blue {
    margin-bottom: auto;
    font-weight: 600;
}

x-wallet-preview-modal .nq-button {
    width: 100%;
    height: 64px;
    margin-top: 0;
}

x-wallet-preview-modal .nq-link {
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    opacity: .7;
    text-decoration: none !important;
    transition: opacity 350ms var(--nimiq-ease);
}

x-wallet-preview-modal .nq-link:hover,
x-wallet-preview-modal .nq-link:focus {
    opacity: 1;
}

x-wallet-preview-modal .nq-link .nq-icon {
    font-size: 12px;
    vertical-align: middle;
    transition: transform 350ms var(--nimiq-ease);
}

x-wallet-preview-modal .nq-link:hover .nq-icon,
x-wallet-preview-modal .nq-link:focus .nq-icon {
    transform: translateX(2px);
}

x-wallet-preview-modal .preview-image {
    width: 306px;
    height: 504px;
    margin-top: 32px;
    flex-shrink: 0;
    align-self: flex-end;
    /* @asset(wallet-preview.png) */
    background-image: url('wallet-preview.png');
    background-size: cover;
}

/* For high-res screens, see https://css-tricks.com/snippets/css/retina-display-media-query/ */
@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi) {
    x-wallet-preview-modal .preview-image {
        /* @asset(wallet-preview-2x.png) */
        background-image: url('wallet-preview-2x.png');
    }
}

@media (max-width: 750px) {
    x-wallet-preview-modal {
        width: auto;
    }

    x-wallet-preview-modal .preview-image {
        display: none;
    }
}

@media (max-width: 420px) {
    x-wallet-preview-modal br {
        display: none;
    }
}

x-identicon img {
    display: block;
}

x-identicon.cashlink {
    display: block;
    position: relative;
}

/* Cashlink identicon indicators */
x-identicon.cashlink::after {
    content: '';
    display: block;
    position: absolute;
    right: 2px;
    bottom: -6px;
    width: 22px; /* including border */
    height: 22px;
    background-color: var(--nimiq-blue);
    background-image: url('data:image/svg+xml,<svg fill="none" viewBox="0 0 8 12" xmlns="http://www.w3.org/2000/svg"><path d="M1.2 8.7v.22c0 1.1.87 2 1.9 2h1.5a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-.76" stroke="white" stroke-linecap="round" stroke-width="1.1"/><path d="M6.6 3.3v-.23a2 2 0 0 0-2-2H3.1c-1.1 0-1.9.87-1.9 2v1.8c0 1.2.97 2.2 2.2 2.2h.54" stroke="white" stroke-linecap="round" stroke-width="1.1"/></svg>');
    background-size: auto 12px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: 2px solid white;
}

x-transaction-modal x-identicon.cashlink::after {
    right: 4px;
    bottom: -12px;
    width: 46px; /* including border */
    height: 46px;
    border-width: 4px;
    background-size: auto 24px;
}


html,
body {
    overflow-x: hidden;
    background: #fafafa;
    display: initial;
}

.header-warning {
    padding: 15px;
    color: #3b3b3b;
    text-align: center;
    /* font-weight: 600; */
}

.header-warning:not(.display-none) + .header-warning {
    border-top: 1px solid #333;
}

.header-warning .close-warning {
    float: right;
    color: #3b3b3b;
    cursor: pointer;
}

#wallet-banner,
#wallet-banner .close-warning {
    color: white;
}

#wallet-banner a {
    text-decoration: underline;
}

#tracking-consensus {
    padding: 1.5rem 1.25rem 1.5rem 2.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: var(--max-content-width);
    border-radius: 1rem;
    margin: auto;
    font-weight: 600;
    position: fixed;
    bottom: 2rem;
    z-index: 1;
    background: var(--nimiq-blue);
    color: white;
}

#tracking-consensus button {
    text-transform: unset;
    letter-spacing: unset;
    width: unset;
    max-width: unset;
    vertical-align: unset;
    text-align: unset;
    user-select: unset;
    box-shadow: unset;
    outline: unset;
    margin-bottom: unset;
    min-height: unset;
}

#tracking-consensus .button-group {
    display: inline-block;
}

#tracking-consensus .button-group button {
    margin: 0 .25rem;
}

@media (max-width: 860px) {
    #tracking-consensus {
        flex-direction: column;
        align-items: flex-start;
        max-width: 100%;
        bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding: 2.5rem;
    }

    #tracking-consensus .button-group {
        margin-top: 2rem;
        margin-left: 0;
    }
}

#tracking-consensus .nq-button-s[browser-only] {
    /* background: none !important; */
    font-weight: normal;
}

.header-warning:not(.display-none) + .header-warning {
    border-top: 1px solid #333;
}

header {
    width: 100%;
    background: var(--nimiq-blue);
    background-image: var(--nimiq-blue-bg);
    color: white;
    text-align: center;
    padding: 0 0.5em;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.content-width {
    position: relative;
    max-width: var(--max-content-width);
    margin: 0 auto;
}

.header-top {
    padding: 1em 1.2em;
    height: 54px;
}

.logo {
    color: white;
    float: left;
}

.secondary-links {
    float: right;
}

.secondary-links a {
    display: inline-block;
    margin-left: 30px;
    opacity: 0.7;
    transition: opacity 200ms;
    font-size: 16px;
    line-height: 20px;
    vertical-align: text-bottom;
}

.secondary-links .get-nim,
.secondary-links .apps {
    font-weight: bold;
}

.secondary-links a:hover,
.secondary-links a:focus {
    opacity: 1;
}

.secondary-links .get-nim::before,
.secondary-links .apps::before {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    background-size: 100%;
    background-size: contain;
}

.secondary-links .get-nim::before {
    content: '';
    margin-right: 8px;
    vertical-align: text-bottom;
    background-size: 125%;
    background-image: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5139 18.4826C13.1117 18.8276 13.876 18.6228 14.2212 18.0251L18.4326 10.7307C18.4602 10.6828 18.5058 10.6477 18.5593 10.6334C18.6127 10.6191 18.6697 10.6266 18.7176 10.6544L19.6196 11.1745C19.811 11.285 20.0384 11.315 20.2519 11.2578C20.3246 11.2387 20.3943 11.2096 20.459 11.1713C20.7167 11.0183 20.8724 10.7387 20.8668 10.4391L20.7875 5.58076C20.7823 5.28816 20.6241 5.01969 20.3706 4.87347C20.1171 4.72725 19.8055 4.72472 19.5497 4.8668L15.3011 7.2251C15.0403 7.37123 14.8778 7.64586 14.8751 7.9448C14.8725 8.24373 15.0302 8.52117 15.2884 8.67184L16.1907 9.19274C16.29 9.2503 16.3241 9.37737 16.2668 9.47688L12.0556 16.7721C11.889 17.0595 11.8437 17.4015 11.9297 17.7225C12.0157 18.0434 12.2259 18.3169 12.5139 18.4826V18.4826Z" fill="white"/><path d="M10.2922 6.43794L5.8465 13.6467C5.78762 13.7428 5.66277 13.7744 5.5653 13.7177L4.87456 13.3196C4.61464 13.1696 4.29413 13.1709 4.03546 13.3231C3.77678 13.4752 3.61991 13.7547 3.62475 14.0548L3.70669 18.9133C3.71114 19.1698 3.83345 19.4099 4.03826 19.5643C4.24308 19.7187 4.50758 19.7702 4.75535 19.7038C4.82127 19.6861 4.88478 19.6604 4.94448 19.6273L9.19304 17.269C9.45347 17.1228 9.61574 16.8484 9.6184 16.5498C9.62106 16.2511 9.4637 15.9739 9.20591 15.8231L8.09263 15.181C8.04403 15.1524 8.00883 15.1056 7.99483 15.051C7.98092 14.9964 7.99003 14.9384 8.02003 14.8907L12.4224 7.74877C12.6728 7.3684 12.6965 6.88193 12.4843 6.47899C12.2721 6.07605 11.8576 5.8204 11.4023 5.81168C10.9469 5.80296 10.5229 6.04256 10.2954 6.43708L10.2922 6.43794Z" fill="white"/></svg>');
}

.secondary-links .apps::before {
    content: '';
    width: 16px;
    height: 16px;
    margin-right: 8px;
    margin-bottom: 2px;
    vertical-align: text-bottom;
    background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g><path d="M7.91139 3.22222L6.24472 0.333333C6.12583 0.126667 5.90472 0 5.66694 0H2.33361C2.09583 0 1.87583 0.127778 1.75694 0.333333L0.0891667 3.22222C-0.0297222 3.42889 -0.0297222 3.68222 0.0891667 3.88889L1.75583 6.77778C1.87472 6.98444 2.09583 7.11111 2.33361 7.11111H5.66694C5.90472 7.11111 6.12472 6.98333 6.24361 6.77778L7.91028 3.88889C8.03028 3.68333 8.03028 3.42889 7.91139 3.22222Z" fill="white"/><path d="M7.91139 12.1109L6.24472 9.22201C6.12583 9.01534 5.90472 8.88867 5.66694 8.88867H2.33361C2.09583 8.88867 1.87583 9.01645 1.75694 9.22201L0.0891667 12.1109C-0.0297222 12.3176 -0.0297222 12.5709 0.0891667 12.7776L1.75583 15.6664C1.87472 15.8731 2.09583 15.9998 2.33361 15.9998H5.66694C5.90472 15.9998 6.12472 15.872 6.24361 15.6664L7.91028 12.7776C8.03028 12.572 8.03028 12.3176 7.91139 12.1109Z" fill="white"/><path d="M15.9114 7.66656L14.2447 4.77767C14.1258 4.571 13.9047 4.44434 13.6669 4.44434H10.3336C10.0958 4.44434 9.87583 4.57211 9.75694 4.77767L8.08917 7.66656C7.97028 7.87322 7.97028 8.12656 8.08917 8.33322L9.75583 11.2221C9.87472 11.4288 10.0958 11.5554 10.3336 11.5554H13.6669C13.9047 11.5554 14.1247 11.4277 14.2436 11.2221L15.9103 8.33322C16.0303 8.12767 16.0303 7.87322 15.9114 7.66656Z" fill="white"/></g></svg>');
}

x-total-amount {
    display: block;
    font-size: 2.5em;
    margin: 0.5em auto 1em auto;
}

.header-bottom {
    overflow: visible;
    padding: 0.5em 1em;
    text-align: left;
    height: 51px; /* To not collapse when backup-reminder is not displayed */
}

.backup-reminder {
    font-size: 16px;
}

.backup-reminder .action {
    cursor: pointer;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    height: 60px;
    position: relative;
    z-index: 1;
}

.backup-reminder.words .action {
    color: var(--nimiq-orange);
}

.backup-reminder.file .action {
    color: var(--nimiq-green);
}

.backup-reminder .icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.2);
    margin-right: 13px;
    flex-shrink: 0;
    transition: transform 200ms;
}

.backup-reminder .action:hover .icon {
    transform: translateY(2px);
}

.backup-reminder .icon.words {
    background: var(--nimiq-orange);
    background-image: var(--nimiq-orange-bg);
}

.backup-reminder .icon.file {
    background: var(--nimiq-green);
    background-image: var(--nimiq-green-bg);
}

.backup-reminder .icon svg {
    margin: 12px 0 -16px 13px;
}

.backup-reminder .dismiss {
    opacity: 0.5;
    cursor: pointer;
}

.backup-reminder .dismiss span {
    display: none;
}

.backup-reminder .dismiss:hover {
    opacity: 0.8;
}

.backup-reminder .dismiss:hover span {
    display: inline;
}


x-view-dashboard,
x-view-history,
x-view-settings {
    padding: 1em 0;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
}

x-view-dashboard {
    align-items: stretch;
}

x-card {
    display: block;
    width: 100%;
    max-width: 960px;
    border-radius: 0.4em;
    padding: 1em;
    margin: 0.5em;
    background: white;
    box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.25);
}

@media (min-width: 481px) {
    x-card {
        padding: 24px ;
        margin: 16px;
    }
}

x-card h2 {
    margin-bottom: 23px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 13px;
    font-weight: bold;
}

x-card .contact-list .search-field {
    margin: 0;
    width: 100%;
}

x-card .contact-list .list {
    min-height: 150px;
    padding-left: 0;
    padding-right: 0;
}

footer {
    text-align: center;
    padding: 1em;
    transition: opacity 0.5s linear 0.1s;
    font-size: 13px;
    margin-top:  80px;
}

footer > a,
footer > div {
    opacity: .6;
}

footer > a {
    text-decoration: underline;
    cursor: pointer;
    margin: 0 1rem;
}

body.preparing > * {
    visibility: hidden !important;
}

body.preparing footer {
    opacity: 0;
}

x-disclaimer-modal {
    width: 690px;
}

x-disclaimer-modal p {
    text-align: justify;
}

x-disclaimer-modal p + p {
    margin-top: 1em;
}

.waiting {
    cursor: wait;
    color: #949292 !important;
    pointer-events: none;
}

button.waiting {
    background-color: transparent;
}

nav.actions.floating-actions {
    margin-bottom: -16px;
    display: flex;
    justify-content: flex-end;
    padding-right: 16px;
    float: none;
}

.floating-btn {
    text-align: center;
    width: 96px;
    margin-top: -45px;
}

.floating-btn button {
    width: 60px !important;
    height: 60px !important;
    border: none;
    border-radius: 50%;
    background-color: white;
    background-position: center !important;
    background-repeat: no-repeat !important;
    margin-left: 0;
    padding: 0;
    min-height: 0;
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.2);
    transition: transform 200ms;
    background-size: 45% 45% !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.floating-btn button span {
    display: none;
}

.floating-btn .btn-text {
    padding-top: 8px;
    user-select: none;
    opacity: 0.8;
}

.floating-btn button:disabled {
    border: 1px solid transparent;
    background-blend-mode: luminosity;
    background-color: white;
}

.floating-btn button:disabled::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .4);
}

.floating-btn button:disabled + .btn-text {
    opacity: 0.6;
}

.floating-btn button[new-tx] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%230582CA" viewBox="0 0 8 19"><path d="M4 18.2c.8 0 1.5-.7 1.5-1.5V7v-.2H7c.4 0 .7-.2.9-.5a1 1 0 0 0 0-1L4.9.5A1 1 0 0 0 4 0a1 1 0 0 0-.9.5l-3 4.8a1 1 0 0 0 0 1c.2.3.5.4.9.4h1.2c.2 0 .3.2.3.3v9.7c0 .8.7 1.5 1.5 1.5z"/></svg>');
}

.floating-btn button[receive] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%230582CA" viewBox="0 0 8 19"><path d="M4 0c-.8 0-1.5.6-1.5 1.4v10H1a1 1 0 0 0-.9.5 1 1 0 0 0 0 1l3 4.8c.2.3.5.5.9.5s.7-.2.9-.5l3-4.8a1 1 0 0 0 0-1 1 1 0 0 0-.9-.5H5.8a.2.2 0 0 1-.3-.2V1.4C5.5.6 4.8 0 4 0z"/></svg>');
}

.floating-btn button:hover {
    transform: translateY(2px);
}

.floating-btn button:hover ~ .btn-text {
    opacity: 1;
}

.mobile-inline-block {
    display: none !important;
}

v-wallet-selector.desktop .v-wallet-menu {
    right: 0;
}

v-wallet-selector.menu-active.desktop .v-wallet-menu {
    top: 4.25rem;
}

v-wallet-selector.mobile .v-wallet-menu {
    left: 0;
    padding: 0 1rem;
    width: 100vw;
}

v-wallet-selector.menu-active.mobile .v-wallet-menu {
    top: unset;
}

v-wallet-selector.mobile .wallet-menu {
    margin: auto;
}

@media (max-width: 620px) {
    .mobile-hidden {
        display: none;
    }

    .mobile-inline-block {
        display: inline-block !important;
    }
}

@media (max-width: 1000px) {
    .header-top {
        padding-right: 1em;
    }

    x-view-dashboard {
        flex-direction: column;
    }

    x-view-dashboard > * {
        max-width: calc(100% - 32px) !important;
    }
}

@media (max-width: 690px) {
    .header-top {
        height: 10rem;
    }

    .secondary-links {
        margin-top: 0.5rem;
    }

    .secondary-links a {
        margin-left: 12px;
    }

    .secondary-links a:first-child {
        margin-left: 0;
    }

    v-wallet-selector [active-wallet-label],
    v-wallet-selector [active-wallet-label-mobile] {
        padding: 14px 8px;
        margin-left: 6px;
    }
}

/**
    * The point at which the main nav and the action buttons
    * in the header don't fit next to each other anymore
*/
@media (max-width: 730px) {
    .header-top {
        padding: 1em;
    }

    x-total-amount {
        margin: 0.3em auto;
    }

    nav.actions.floating-actions {
        justify-content: center;
        padding-right: 0;
    }

    .floating-btn {
        margin: 16px 8px 0;
        width: auto;
    }

    .floating-btn button {
        width: 115px !important;
        height: 40px !important;
        border-radius: 20px;
        min-height: 40px;
        box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.2);
        background-position: 12px center !important;
        padding-left: 40px;
        text-align: left;
        font-family: inherit;
        color: inherit;
    }

    .floating-btn button[icon-qr-scan] {
        width: 100px !important;
        background-position: 16px center !important;
        padding-left: 44px;
    }

    .floating-btn button span {
        display: inline;
        font-size: 16px;
        line-height: 40px;
    }

    .floating-btn .btn-text {
        display: none;
    }

    .floating-btn button {
        background-size: 20px 20px !important;
    }
}

@media (max-width: 650px) {
    .header-bottom {
        margin-top: 32px;
        padding: 0 1em;
        height: 8rem;
        width: 40rem;
    }

    .backup-reminder .icon {
        width: 40px;
        height: 40px;
        margin-bottom: 0;
    }

    .backup-reminder .icon svg {
        width: 26px;
        height: 26px;
        margin: 7px;
    }
}

@media (max-width: 480px) {
    header {
        padding: 0;
    }

    nav.actions.floating-actions {
        justify-content: space-between;
    }

    x-total-amount {
        font-size: 1.8em;
    }

    x-view-dashboard > * {
        max-width: calc(100% - 1em) !important;
    }

    footer {
        margin-top: 32px;
    }
}

@media (max-width: 400px) {
    nav.actions.floating-actions .floating-btn:last-child {
        flex-grow: 1;
    }

    .floating-btn button[icon-qr-scan] {
        width: 100% !important;
        background-position: center !important;
    }

    .floating-btn button[icon-qr-scan] span {
        display: none;
    }
}

body[browser-outdated],
body[browser-edge],
body[no-local-storage],
body[web-view],
body[private-mode] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(30deg, #3023AE, #9C58CB);
    height: 100vh;
    max-height: 100%;
}

body[browser-outdated] > *,
body[browser-edge] > *,
body[no-local-storage] > *,
body[web-view] > *,
body[private-mode] > * {
    display: none !important;
}

body::after {
    padding: 32px;
    text-align: center;
    font-size: 32px;
    max-width: 600px;
    color: white;
}

body[browser-outdated]::after {
    content: 'Please update your browser.';
}

body[browser-edge]::after {
    content: 'Edge is currently not supported.';
}

body[no-local-storage]::after {
    content: 'Local Storage not available. If you are in private browsing mode, try to run this page in normal mode.';
}

body[private-mode]::after {
    content: 'This browser does not support running this page in private browsing mode. Try to run this page in normal mode.';
}

body[web-view]::after {
    content: 'You are viewing this page from inside another app. Please use a real browser.'
}

body {
    font-size: 2rem;
}

#app {
    width: 100%;
}

body > iframe {
    display: none;
}

.identicon[data-v-1672226e]{width:10rem}img[data-v-1672226e]{width:100%;height:100%}.amount[data-v-6fea4aa4]{white-space:nowrap}.amount.approx[data-v-6fea4aa4]:before{content:"~ ";opacity:.5}.label-input[data-v-360cfbaf]{position:relative;overflow:hidden;max-width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.width-finder[data-v-360cfbaf]{position:absolute;color:transparent;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:pre;padding:0 2.25rem}input[data-v-360cfbaf]{padding-right:0;max-width:100%;-webkit-transition:width 50ms ease-out;transition:width 50ms ease-out}.account[data-v-75ac8cea]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:1.75rem 2rem;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;font-size:2rem;line-height:1.2;overflow:hidden}.account.row[data-v-75ac8cea]{width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.account.column[data-v-75ac8cea]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.identicon-and-label[data-v-75ac8cea]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.row .identicon-and-label[data-v-75ac8cea]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;overflow:hidden;min-width:5.625rem;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.column .identicon-and-label[data-v-75ac8cea]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.identicon[data-v-75ac8cea]{-ms-flex-negative:0;flex-shrink:0;position:relative}.row .identicon[data-v-75ac8cea]{width:5.625rem;height:5.625rem;margin-right:1.5rem}.column .identicon[data-v-75ac8cea]{width:10rem;height:10rem;margin-bottom:1.25rem}.cashlink .identicon[data-v-75ac8cea]{padding:.5rem}.cashlink .identicon div[data-v-75ac8cea]{width:100%;height:100%;border-radius:50%}.cashlink .identicon[data-v-75ac8cea]:before{display:block;content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;border:.25rem solid rgba(31,35,72,.2)}.identicon .account-image[data-v-75ac8cea]{width:100%;height:100%;-webkit-clip-path:url(#nimiq-hexagon-clip);clip-path:url(#nimiq-hexagon-clip)}.identicon .outline[data-v-75ac8cea]{position:absolute;top:0;right:0;bottom:0;left:0;background-repeat:no-repeat;background-position:0;background-size:contain;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' width='146' height='146'%3E%3Cpath d='M113.8 16.2l28.7 49.6c2.5 4.5 2.5 10 0 14.4l-28.7 49.6a14.4 14.4 0 0 1-12.5 7.2H44.1c-5.2 0-10-2.7-12.5-7.2L2.9 80.2C.4 75.7.4 70.2 3 65.8l28.7-49.6C34.2 11.7 38.9 9 44 9h57.2c5.2 0 10 2.7 12.5 7.2z' clip-rule='evenodd' stroke='%231f2348' stroke-width='2' opacity='.2'/%3E%3C/svg%3E")}.wallet-label[data-v-75ac8cea]{margin-bottom:0}.label[data-v-75ac8cea],.wallet-label[data-v-75ac8cea]{overflow:hidden}.row .label[data-v-75ac8cea]:not(.editable){opacity:.7;padding-left:1rem}.row .label[data-v-75ac8cea],.row .wallet-label[data-v-75ac8cea]{white-space:nowrap;font-weight:600;-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(#fff),color-stop(#fff),to(hsla(0,0%,100%,0)));-webkit-mask-image:linear-gradient(90deg,#fff,#fff calc(100% - 3rem),hsla(0,0%,100%,0));mask-image:-webkit-gradient(linear,left top,right top,from(#fff),color-stop(#fff),to(hsla(0,0%,100%,0)));mask-image:linear-gradient(90deg,#fff,#fff calc(100% - 3rem),hsla(0,0%,100%,0))}.row .label[data-v-75ac8cea]{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.column .label[data-v-75ac8cea],.column .wallet-label[data-v-75ac8cea]{max-width:18.5rem;text-align:center;line-height:1.5;max-height:3em}.label.address-font[data-v-75ac8cea]{font-family:Fira Mono,Andale Mono,monospace;font-weight:400;text-transform:uppercase}.balance[data-v-75ac8cea]{-ms-flex-negative:0;flex-shrink:0}.row .balance[data-v-75ac8cea]{margin-left:1rem;font-weight:700;opacity:.7}.column .balance[data-v-75ac8cea]{margin-top:1.5rem}.account-list[data-v-36376e14]{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.account-entry[data-v-36376e14]{display:block;-webkit-transition:background-color .3s var(--nimiq-ease);transition:background-color .3s var(--nimiq-ease);border-radius:.5rem;margin:.5rem 2rem;position:relative;color:inherit;text-decoration:none}.account-entry[data-v-36376e14]:not(.disabled):after{content:"";position:absolute;left:-.625rem;top:-.625rem;right:-.625rem;bottom:-.625rem;border:.25rem solid rgba(5,130,202,.5);border-radius:1rem;opacity:0;pointer-events:none}.account-entry[data-v-36376e14]:not(.disabled):focus:after{opacity:1}.account-entry .account[data-v-36376e14]{-webkit-transition:opacity .3s var(--nimiq-ease);transition:opacity .3s var(--nimiq-ease)}.account-entry[data-v-36376e14] .identicon img{-webkit-transform:scale(.9);transform:scale(.9);-webkit-transition:-webkit-transform .45s var(--nimiq-ease);transition:-webkit-transform .45s var(--nimiq-ease);transition:transform .45s var(--nimiq-ease);transition:transform .45s var(--nimiq-ease),-webkit-transform .45s var(--nimiq-ease)}.account-entry[data-v-36376e14] .balance,.account-entry[data-v-36376e14] .label{-webkit-transition:opacity .3s var(--nimiq-ease),color .3s var(--nimiq-ease),margin-right .45s var(--nimiq-ease);transition:opacity .3s var(--nimiq-ease),color .3s var(--nimiq-ease),margin-right .45s var(--nimiq-ease)}.account-entry .nq-icon[data-v-36376e14]{position:absolute;right:2rem;top:3.625rem;font-size:2rem;-webkit-transform:translateX(3rem);transform:translateX(3rem);opacity:0;-webkit-transition:opacity .35s .1s var(--nimiq-ease),-webkit-transform .45s var(--nimiq-ease);transition:opacity .35s .1s var(--nimiq-ease),-webkit-transform .45s var(--nimiq-ease);transition:transform .45s var(--nimiq-ease),opacity .35s .1s var(--nimiq-ease);transition:transform .45s var(--nimiq-ease),opacity .35s .1s var(--nimiq-ease),-webkit-transform .45s var(--nimiq-ease)}a.account-entry[data-v-36376e14]:focus{outline:none}a.account-entry[data-v-36376e14]:not(.disabled):focus,a.account-entry[data-v-36376e14]:not(.disabled):hover{background-color:rgba(31,35,72,.06)}a.account-entry[data-v-36376e14]:not(.disabled):focus img,a.account-entry[data-v-36376e14]:not(.disabled):hover img{-webkit-transform:scale(1);transform:scale(1)}a.account-entry[data-v-36376e14]:not(.disabled):focus .balance,a.account-entry[data-v-36376e14]:not(.disabled):focus .label,a.account-entry[data-v-36376e14]:not(.disabled):hover .balance,a.account-entry[data-v-36376e14]:not(.disabled):hover .label{opacity:1}a.account-entry:not(.disabled).good-balance[data-v-36376e14]:focus .balance,a.account-entry:not(.disabled).good-balance[data-v-36376e14]:hover .balance{margin-right:3rem;color:var(--nimiq-green)}a.account-entry:not(.disabled).good-balance:focus .nq-icon[data-v-36376e14],a.account-entry:not(.disabled).good-balance:hover .nq-icon[data-v-36376e14]{-webkit-transform:translateX(0);transform:translateX(0);opacity:.23}a.account-entry.disabled[data-v-36376e14]{cursor:not-allowed}a.account-entry.disabled[data-v-36376e14] .balance,a.account-entry.disabled[data-v-36376e14] .identicon,a.account-entry.disabled[data-v-36376e14] .label{opacity:.2}a.account-entry.bad-balance:not(.disabled-contract).highlight-disabled-address[data-v-36376e14] .balance{color:var(--nimiq-red);opacity:1}a.account-entry.disabled-contract[data-v-36376e14]:after{content:"Contracts are incompatible with this operation.";position:absolute;left:0;top:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;color:var(--nimiq-red);-webkit-transition:opacity .3s var(--nimiq-ease);transition:opacity .3s var(--nimiq-ease);opacity:0}a.account-entry.disabled-contract.highlight-disabled-address .account[data-v-36376e14]{opacity:.2}a.account-entry.disabled-contract.highlight-disabled-address[data-v-36376e14]:after{opacity:1}.account-selector[data-v-598fccf1]{overflow:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:400px}.container[data-v-598fccf1]{overflow-y:auto;padding-top:.5rem;padding-bottom:4rem;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-mask-image:-webkit-gradient(linear,left bottom,left top,from(hsla(0,0%,100%,0)),color-stop(4rem,#fff),color-stop(#fff),to(hsla(0,0%,100%,0)));-webkit-mask-image:linear-gradient(0deg,hsla(0,0%,100%,0),#fff 4rem,#fff calc(100% - 4rem),hsla(0,0%,100%,0));mask-image:-webkit-gradient(linear,left bottom,left top,from(hsla(0,0%,100%,0)),color-stop(4rem,#fff),color-stop(#fff),to(hsla(0,0%,100%,0)));mask-image:linear-gradient(0deg,hsla(0,0%,100%,0),#fff 4rem,#fff calc(100% - 4rem),hsla(0,0%,100%,0))}.container.extra-spacing[data-v-598fccf1]{padding-top:3rem}.disabled-account>.wallet-label .nq-label[data-v-598fccf1]{opacity:.4}.disabled-account .warning-disabled-account[data-v-598fccf1]{padding-top:.5rem;text-transform:none;line-height:1.2;-webkit-transition:opacity .3s ease,color .3s ease;transition:opacity .3s ease,color .3s ease}.disabled-account.highlighted-disabled-account .warning-disabled-account[data-v-598fccf1]{color:var(--nimiq-red);opacity:1}.wallet-label[data-v-598fccf1]{margin:3.5rem 2rem 2rem 3rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.wallet-label .nq-label[data-v-598fccf1]{margin:0;margin-right:2rem}.wallet-label[data-v-598fccf1]:after{content:"";display:block;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:1px;background:rgba(31,35,72,.1)}.footer[data-v-598fccf1]{padding:4rem 0 3rem;margin-top:-4rem;text-align:center}.nq-button-s[data-v-598fccf1]{margin:auto;pointer-events:all}.address[data-v-dd620aac]{position:relative;width:100%;min-width:40rem;max-width:50rem;padding:1rem 2rem;font-size:1.75rem;font-weight:600;white-space:nowrap;cursor:pointer;border-radius:.375rem;font-family:Fira Mono,monospace;word-spacing:-.2em}.address[data-v-dd620aac]:hover{background:rgba(0,0,0,.2)}.copied-cover[data-v-dd620aac]{position:absolute;left:0;top:0;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;padding:1rem 2rem;background:rgba(0,0,0,.8);color:#fff;text-align:center;border-radius:.375rem;opacity:0;pointer-events:none;-webkit-transition:opacity .2s;transition:opacity .2s}.address.copied .copied-cover[data-v-dd620aac]{opacity:1}.contact{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;max-width:61.25rem;padding:1rem 2rem;cursor:pointer;position:relative;border-radius:.5rem}.contact .identicon{width:8rem;min-width:6.25rem;height:8.875rem}.contact .identicon.small{height:6rem}.contact .info{text-align:left;width:100%;padding-left:2rem;--width-subtraction:8rem;max-width:calc(100% - var(--width-subtraction))}.contact .label{font-size:2rem;display:block;font-weight:600;margin-bottom:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.7;-webkit-transition:opacity .3s var(--nimiq-ease);transition:opacity .3s var(--nimiq-ease)}.contact:hover .label{opacity:1}.contact .address{overflow:hidden;pointer-events:none;padding:0;min-width:auto;font-weight:400;opacity:.4;-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(#fff),color-stop(#fff),to(hsla(0,0%,100%,0)));-webkit-mask-image:linear-gradient(90deg,#fff,#fff calc(100% - 4rem),hsla(0,0%,100%,0));mask-image:-webkit-gradient(linear,left top,right top,from(#fff),color-stop(#fff),to(hsla(0,0%,100%,0)));mask-image:linear-gradient(90deg,#fff,#fff calc(100% - 4rem),hsla(0,0%,100%,0))}.contact input{width:100%!important}.contact input,.contact input::-webkit-input-placeholder{text-align:left!important}.contact input,.contact input:-ms-input-placeholder{text-align:left!important}.contact input,.contact input::-ms-input-placeholder{text-align:left!important}.contact input,.contact input::placeholder{text-align:left!important}.contact input.address-input{font-size:1.75rem}.contact .bottom{text-align:right;margin-top:.5rem}.contact .bottom button{padding:0;height:3.625rem;width:3.625rem;margin-right:1rem}.contact .bottom button .material-icons{font-size:2.5rem}@media (max-width:480px){.contact{padding:1rem 0}}.contact-list[data-v-62deaed0]{position:relative;padding:1rem 0}.search-field[data-v-62deaed0]{margin:0 4rem;width:calc(100% - 8rem);-webkit-box-sizing:border-box;box-sizing:border-box}.search-icon[data-v-62deaed0]{position:absolute;left:3rem;top:2rem;opacity:.4}.search-field:focus~.search-icon[data-v-62deaed0]{opacity:.8}.search-clear[data-v-62deaed0]{position:absolute;right:.5rem;top:1rem;opacity:.4;padding:.5rem;border-radius:50%;cursor:pointer}.search-clear[data-v-62deaed0]:focus,.search-clear[data-v-62deaed0]:hover{background:rgba(0,0,0,.1);opacity:.8}.list[data-v-62deaed0]{overflow-y:auto;margin-top:1rem;padding:4rem 2rem;-webkit-mask-image:-webkit-gradient(linear,left bottom,left top,from(hsla(0,0%,100%,0)),color-stop(4rem,#fff),color-stop(#fff),to(hsla(0,0%,100%,0)));-webkit-mask-image:linear-gradient(0deg,hsla(0,0%,100%,0),#fff 4rem,#fff calc(100% - 4rem),hsla(0,0%,100%,0));mask-image:-webkit-gradient(linear,left bottom,left top,from(hsla(0,0%,100%,0)),color-stop(4rem,#fff),color-stop(#fff),to(hsla(0,0%,100%,0)));mask-image:linear-gradient(0deg,hsla(0,0%,100%,0),#fff 4rem,#fff calc(100% - 4rem),hsla(0,0%,100%,0));max-height:calc(100% - 5.5rem)}.contact[data-v-62deaed0]{padding:1rem;-webkit-transition:background-color .3s var(--nimiq-ease);transition:background-color .3s var(--nimiq-ease)}.contact[data-v-62deaed0]:hover{background-color:rgba(31,35,72,.06)}.no-contacts[data-v-62deaed0]{text-align:center;opacity:.6}.no-contacts .material-icons[data-v-62deaed0]{display:block;font-size:10rem;line-height:1.1;opacity:.3}.file-import[data-v-62deaed0]{width:0;height:0;opacity:0;position:absolute;left:-9999px;top:-9999px}.small-page[data-v-1d450cf2]{width:100%;max-width:52.5rem;height:70.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0;margin:0 1.25rem}.page-header[data-v-f91651fa]{position:relative}.page-header-back-button[data-v-f91651fa]{font-size:3rem;position:absolute;left:4rem;padding-top:.25rem;opacity:.4;-webkit-transition:opacity .3s var(--nimiq-ease),-webkit-transform .3s var(--nimiq-ease);transition:opacity .3s var(--nimiq-ease),-webkit-transform .3s var(--nimiq-ease);transition:opacity .3s var(--nimiq-ease),transform .3s var(--nimiq-ease);transition:opacity .3s var(--nimiq-ease),transform .3s var(--nimiq-ease),-webkit-transform .3s var(--nimiq-ease);color:inherit}.page-header-back-button svg[data-v-f91651fa]{display:block}.page-header-back-button[data-v-f91651fa]:focus,.page-header-back-button[data-v-f91651fa]:hover{opacity:1;-webkit-transform:translate3D(-.375rem,0,0);transform:translate3D(-.375rem,0,0);outline:none}@media (max-width:450px){.page-header-back-button[data-v-f91651fa],.page-header-back-button[data-v-f91651fa]:focus,.page-header-back-button[data-v-f91651fa]:hover{left:3rem;-webkit-transform:none;transform:none}}.page-header-back-button[data-v-f91651fa]:after{content:"";display:block;position:absolute;left:-1.5rem;top:-1.5rem;right:-1.5rem;bottom:-1.5rem}.progress-indicator[data-v-f91651fa]{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:.5rem;position:absolute;left:0;top:0}.progress-indicator .indicator[data-v-f91651fa]{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:.5rem;border-radius:.25rem;background:#e5e5e5;margin:.5rem}.progress-indicator .indicator.active[data-v-f91651fa]{background:#24bdb6}.page-header.has-progress-indicator .page-header-back-button[data-v-f91651fa],.page-header.has-progress-indicator h1[data-v-f91651fa]{margin-top:1rem}.page-body[data-v-0b286594]{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto}.page-footer[data-v-3c6ba3a4]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0;-webkit-box-sizing:border-box;box-sizing:border-box}.page-footer[data-v-3c6ba3a4] .nq-button{margin:2rem 4.75rem 3rem}.page-body[data-v-48e56bac]{padding-top:2rem!important;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;overflow:hidden}.page-body.right-aligned[data-v-48e56bac]{padding-right:0}.page-body.left-aligned[data-v-48e56bac]{padding-left:0;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.text[data-v-48e56bac],.visual[data-v-48e56bac]{-ms-flex-negative:0;flex-shrink:0}.nq-text[data-v-48e56bac]{color:var(--nimiq-blue);margin-left:2rem;margin-right:2rem;width:27rem}.left-aligned .nq-text[data-v-48e56bac]{width:26rem}.nq-link[data-v-48e56bac]{text-decoration:none!important}.nq-link .nq-icon[data-v-48e56bac]{margin-left:.375rem;font-size:1.5rem;vertical-align:middle;-webkit-transition:-webkit-transform .35s var(--nimiq-ease);transition:-webkit-transform .35s var(--nimiq-ease);transition:transform .35s var(--nimiq-ease);transition:transform .35s var(--nimiq-ease),-webkit-transform .35s var(--nimiq-ease)}.nq-link:focus .nq-icon[data-v-48e56bac],.nq-link:hover .nq-icon[data-v-48e56bac]{-webkit-transform:translateX(.25rem);transform:translateX(.25rem)}.visual svg[data-v-48e56bac]{width:100%;height:100%;margin-top:-1rem}.visual.address-ring[data-v-48e56bac]{width:18rem}.visual.login-file[data-v-48e56bac]{width:20.25rem;height:34rem;margin-left:-7.25rem;margin-top:-1rem}.visual.account-menu[data-v-48e56bac]{width:18rem;height:48rem}.nq-button[data-v-48e56bac]{margin-top:0!important}.qr-scanner[data-v-7e80c7c1]{position:relative;overflow:hidden}.fade-enter[data-v-7e80c7c1],.fade-leave-to[data-v-7e80c7c1]{opacity:0;-webkit-transition:.7s;transition:.7s}.fade-enter-to[data-v-7e80c7c1],.fade-leave[data-v-7e80c7c1]{opacity:1;-webkit-transition:.7s;transition:.7s}video[data-v-7e80c7c1]{position:absolute;left:0;top:0;height:100%;width:100%;-o-object-fit:cover;object-fit:cover;display:block;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s}video.ready[data-v-7e80c7c1]{opacity:1}.overlay[data-v-7e80c7c1]{position:absolute}.overlay[data-v-7e80c7c1]:not(.inactive){-webkit-animation:overlay-animation-data-v-7e80c7c1 .4s infinite alternate ease-in-out;animation:overlay-animation-data-v-7e80c7c1 .4s infinite alternate ease-in-out}@-webkit-keyframes overlay-animation-data-v-7e80c7c1{0%{-webkit-transform:scale(.98);transform:scale(.98)}to{-webkit-transform:scale(1.01);transform:scale(1.01)}}@keyframes overlay-animation-data-v-7e80c7c1{0%{-webkit-transform:scale(.98);transform:scale(.98)}to{-webkit-transform:scale(1.01);transform:scale(1.01)}}.overlay svg[data-v-7e80c7c1]{width:100%;height:100%;stroke:var(--nimiq-gold)}.overlay.inactive svg[data-v-7e80c7c1]{stroke:hsla(0,0%,100%,.4)}.cancel-button[data-v-7e80c7c1]{background:#fff;position:absolute;bottom:3rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);color:inherit}.cancel-button[data-v-7e80c7c1]:active,.cancel-button[data-v-7e80c7c1]:focus,.cancel-button[data-v-7e80c7c1]:hover{background:#eff0f2}.camera-access-failed[data-v-7e80c7c1]{color:#fff;text-align:center;font-size:2rem}.camera-access-failed-warning[data-v-7e80c7c1]{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:30rem;max-width:80%;font-weight:700}.access-denied-instructions[data-v-7e80c7c1]{opacity:.7;position:absolute;left:50%;bottom:9rem;width:calc(100% - 4rem);-webkit-transform:translateX(-50%);transform:translateX(-50%);line-height:1.7}.browser-menu-icon[data-v-7e80c7c1],.camera-icon-chrome[data-v-7e80c7c1],.camera-icon-firefox[data-v-7e80c7c1]{display:inline-block;background-repeat:no-repeat;margin:0 .2em;position:relative;top:.2em}.browser-menu-icon[data-v-7e80c7c1]{background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 3 15"><circle cx="1.5" cy="1.5" r="1.5"/><circle cx="1.5" cy="7.5" r="1.5"/><circle cx="1.5" cy="13.5" r="1.5"/></svg>');height:1em;width:.2em}.camera-icon-chrome[data-v-7e80c7c1]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath fill='%23FF5C48' fill-rule='evenodd' d='M7.8 5h5.4c.4 0 .8.4.8.8v5.4c0 .4-.4.8-.9.8H7.8c-.4 0-.8-.4-.8-.9V5.8c0-.4.4-.8.8-.8zm4.04 4.85c.2-.2.2-.5 0-.7l-.64-.65.65-.65c.2-.2.2-.5 0-.7a.5.5 0 0 0-.7 0l-.66.64-.63-.64a.5.5 0 0 0-.71 0c-.2.2-.2.5 0 .7l.64.65-.64.65c-.2.2-.2.5 0 .7a.48.48 0 0 0 .7 0l.64-.64.65.64a.48.48 0 0 0 .7 0z' clip-rule='evenodd'/%3E%3Cpath fill='%23fff' d='M6 5.8C6 4.8 6.8 4 7.8 4H12V.5L9.5 3V.5C9.5.2 9.3 0 9 0H.5C.2 0 0 .2 0 .5v7c0 .3.2.5.5.5H6V5.8z'/%3E%3C/svg%3E");height:.8em;width:.93333em}.camera-icon-firefox[data-v-7e80c7c1]{background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 14 14"><path d="M13.5.3c-.4-.4-.9-.4-1.3 0L9.7 2.8c-.1-.5-.5-.9-1-.9H1c-.6 0-1 .4-1 1v7.7c0 .5.4.9.9 1l-.6.6c-.4.4-.4.9 0 1.3l.6.3c.2 0 .5-.1.6-.3l12-12a1 1 0 0 0 0-1.2zm.2 11.3V3.5l-4 4.1 4 4zm-5 0c.6 0 1-.4 1-1v-3l-4 4h3z"/></svg>');height:.9em;width:.9em}.browser-menu-arrow[data-v-7e80c7c1]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 18 23'%3E%3Cpath stroke='%230CA6FE' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 22V3M2 9l7-7 7 7'/%3E%3C/svg%3E");-webkit-animation:arrow-bounce-data-v-7e80c7c1 .4s infinite alternate ease-in-out;animation:arrow-bounce-data-v-7e80c7c1 .4s infinite alternate ease-in-out;position:fixed;top:3rem;right:2.2rem;width:2rem;height:2.55556rem}@-webkit-keyframes arrow-bounce-data-v-7e80c7c1{to{-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}}@keyframes arrow-bounce-data-v-7e80c7c1{to{-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}}.address-display[data-v-2e20ff27]{width:100%;max-width:28.25rem;font-family:Fira Mono,monospace;opacity:.5;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-size:3rem}.chunk[data-v-2e20ff27]{margin:.875rem 0;line-height:1.11;width:33%;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;text-transform:uppercase}.space[data-v-2e20ff27]{font-size:0}button[data-v-20cd296e]{font-size:3rem;padding:0;background:none!important;height:3rem}button .nq-icon[data-v-20cd296e]{opacity:.2;-webkit-transition:opacity .3s var(--nimiq-ease);transition:opacity .3s var(--nimiq-ease)}button:active .nq-icon[data-v-20cd296e],button:focus .nq-icon[data-v-20cd296e],button:hover .nq-icon[data-v-20cd296e]{opacity:.4}button.top-right[data-v-20cd296e]{position:absolute;top:2rem;right:2rem}.copyable[data-v-5b8f619a]{position:relative;padding:1.5rem;cursor:pointer;margin-bottom:5.5rem}.background[data-v-5b8f619a]{position:absolute;left:0;top:0;width:100%;height:100%;background-image:var(--nimiq-blue-bg);border-radius:.5rem;opacity:0;-webkit-transition:opacity .3s var(--nimiq-ease);transition:opacity .3s var(--nimiq-ease)}.copyable.copied .background[data-v-5b8f619a],.copyable:hover .background[data-v-5b8f619a]{opacity:.05}.copyable[data-v-5b8f619a]:after,.copyable[data-v-5b8f619a]:before{position:absolute;left:50%;top:100%;height:0;padding:0;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-transform:translateX(-50%);transform:translateX(-50%);font-family:Muli,system-ui,sans-serif;font-weight:600;font-size:1.75rem;text-transform:uppercase;letter-spacing:.1875rem;color:var(--nimiq-light-blue);opacity:0;overflow:hidden;-webkit-transition:opacity .3s var(--nimiq-ease),height 0s 1s,padding 0s 1s,-webkit-transform 2s var(--nimiq-ease);transition:opacity .3s var(--nimiq-ease),height 0s 1s,padding 0s 1s,-webkit-transform 2s var(--nimiq-ease);transition:opacity .3s var(--nimiq-ease),transform 2s var(--nimiq-ease),height 0s 1s,padding 0s 1s;transition:opacity .3s var(--nimiq-ease),transform 2s var(--nimiq-ease),height 0s 1s,padding 0s 1s,-webkit-transform 2s var(--nimiq-ease)}.copyable[data-v-5b8f619a]:before{content:"Copy"}.copyable[data-v-5b8f619a]:after{content:"Copied"}.copyable.copied[data-v-5b8f619a]:after,.copyable[data-v-5b8f619a]:not(.copied):hover:before{height:1em;padding:2.5rem 2rem 1rem;opacity:1;-webkit-transition-delay:0s;transition-delay:0s}.copyable.copied[data-v-5b8f619a]:after{-webkit-animation:copied-data-v-5b8f619a .85s .85s var(--nimiq-ease) forwards;animation:copied-data-v-5b8f619a .85s .85s var(--nimiq-ease) forwards}@-webkit-keyframes copied-data-v-5b8f619a{to{opacity:0;-webkit-transform:translate(-50%,-1.5rem);transform:translate(-50%,-1.5rem)}}@keyframes copied-data-v-5b8f619a{to{opacity:0;-webkit-transform:translate(-50%,-1.5rem);transform:translate(-50%,-1.5rem)}}.account-details[data-v-56988aea]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:4rem;border-radius:1rem;width:100%;height:100%;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}.account[data-v-56988aea]{padding:0;width:100%}.account[data-v-56988aea] .identicon-and-label{width:100%}.account[data-v-56988aea] .identicon{width:18rem;height:18rem;margin-bottom:3rem}.account[data-v-56988aea] .label{font-size:3rem;font-weight:600;opacity:1}.account[data-v-56988aea] .wallet-label{margin-top:.5rem}.account[data-v-56988aea] .label,.account[data-v-56988aea] .wallet-label{max-width:unset;max-height:unset}.account[data-v-56988aea] .balance{font-size:3rem;margin-top:3rem}.copyable[data-v-56988aea]{margin-top:3rem;margin-bottom:1.5rem}.address-input[data-v-19ef3b0b]{--font-size:3rem;--block-height:4.125rem;--block-width:8.5rem;--block-gap:1rem;width:calc(3 * var(--block-width) + 2 * var(--block-gap));height:calc(3 * var(--block-height) + 2 * var(--block-gap));position:relative;-ms-flex-wrap:wrap;flex-wrap:wrap;display:grid;grid-template-columns:repeat(2,var(--block-width) var(--block-gap)) var(--block-width);grid-template-rows:repeat(3,var(--block-height));grid-row-gap:var(--block-gap);background:#fff}.address-input.invalid[data-v-19ef3b0b]{-webkit-animation:shake-data-v-19ef3b0b .4s;animation:shake-data-v-19ef3b0b .4s}@-webkit-keyframes shake-data-v-19ef3b0b{0%{-webkit-transform:none;transform:none}10%{-webkit-transform:translate3d(-.25rem,0,0) rotate(-.15deg);transform:translate3d(-.25rem,0,0) rotate(-.15deg)}20%{-webkit-transform:translate3d(.5rem,0,0) rotate(.15deg);transform:translate3d(.5rem,0,0) rotate(.15deg)}30%{-webkit-transform:translate3d(-.5rem,0,0) rotate(-.15deg);transform:translate3d(-.5rem,0,0) rotate(-.15deg)}40%{-webkit-transform:translate3d(.5rem,0,0) rotate(.15deg);transform:translate3d(.5rem,0,0) rotate(.15deg)}50%{-webkit-transform:translate3d(-.25rem,0,0) rotate(-.15deg);transform:translate3d(-.25rem,0,0) rotate(-.15deg)}to{-webkit-transform:none;transform:none}}@keyframes shake-data-v-19ef3b0b{0%{-webkit-transform:none;transform:none}10%{-webkit-transform:translate3d(-.25rem,0,0) rotate(-.15deg);transform:translate3d(-.25rem,0,0) rotate(-.15deg)}20%{-webkit-transform:translate3d(.5rem,0,0) rotate(.15deg);transform:translate3d(.5rem,0,0) rotate(.15deg)}30%{-webkit-transform:translate3d(-.5rem,0,0) rotate(-.15deg);transform:translate3d(-.5rem,0,0) rotate(-.15deg)}40%{-webkit-transform:translate3d(.5rem,0,0) rotate(.15deg);transform:translate3d(.5rem,0,0) rotate(.15deg)}50%{-webkit-transform:translate3d(-.25rem,0,0) rotate(-.15deg);transform:translate3d(-.25rem,0,0) rotate(-.15deg)}to{-webkit-transform:none;transform:none}}textarea[data-v-19ef3b0b]{--line-height:calc(var(--block-height) + var(--block-gap));position:absolute;width:100%;height:calc(3 * var(--line-height));line-height:var(--line-height);top:calc(var(--font-size) / 24 * -3);left:calc(var(--font-size) / 24 * 5);padding:0;margin:0;border:none;outline:unset!important;resize:none;overflow:hidden;z-index:1;font-family:Fira Mono,"monospace";font-size:var(--font-size);text-transform:uppercase;letter-spacing:calc(1.8rem - 1ch);word-spacing:calc(var(--block-gap) / 2);color:var(--nimiq-light-blue);background:transparent;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 123"><path d="M-1 6h61v27H-1zM75 6h61v27H75zM151 6h61v27h-61zM-1 47h61v27H-1zM75 47h61v27H75zM151 47h61v27h-61zM-1 88h61v27H-1zM75 88h61v27H75zM151 88h61v27h-61z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 123"><path d="M-1 6h61v27H-1zM75 6h61v27H75zM151 6h61v27h-61zM-1 47h61v27H-1zM75 47h61v27H75zM151 47h61v27h-61zM-1 88h61v27H-1zM75 88h61v27H75zM151 88h61v27h-61z"/></svg>')}[data-v-19ef3b0b]::-webkit-input-placeholder{color:var(--nimiq-light-blue);opacity:.6}[data-v-19ef3b0b]::-moz-placeholder{color:var(--nimiq-light-blue);opacity:.6}[data-v-19ef3b0b]:-ms-input-placeholder{color:var(--nimiq-light-blue);opacity:.6}[data-v-19ef3b0b]:-moz-placeholder{color:var(--nimiq-light-blue);opacity:.6}.block[data-v-19ef3b0b]{border:.25rem solid var(--nimiq-blue);border-radius:.5rem;opacity:.1}.block.focused[data-v-19ef3b0b]{opacity:.16}.block-connector[data-v-19ef3b0b]{width:var(--block-gap);height:.25rem;background:var(--nimiq-blue);-ms-flex-item-align:center;align-self:center;opacity:.1}.block-connector[data-v-19ef3b0b],.block[data-v-19ef3b0b]{-webkit-transition:opacity .2s var(--nimiq-ease);transition:opacity .2s var(--nimiq-ease)}.invisible[data-v-19ef3b0b]{opacity:0}@supports (mix-blend-mode:screen){textarea[data-v-19ef3b0b]{color:#000}textarea[data-v-19ef3b0b]::-moz-selection{color:#fff;background:#561a51}textarea[data-v-19ef3b0b]::selection{color:#fff;background:#561a51}textarea[data-v-19ef3b0b]::-moz-selection{background:#411d68}.color-overlay[data-v-19ef3b0b]{position:absolute;width:calc(var(--block-width) - .5rem);height:calc(var(--block-height) - .5rem);mix-blend-mode:screen;z-index:1;pointer-events:none}}.contact-shortcuts[data-v-5eeaf1e8]{-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:2rem;width:100%}.contact-shortcuts[data-v-5eeaf1e8],.open-contacts[data-v-5eeaf1e8]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal}.open-contacts[data-v-5eeaf1e8]{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;cursor:pointer;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;margin:1rem 3rem 2rem 0;width:10rem}.open-contacts.disabled[data-v-5eeaf1e8]{cursor:unset;opacity:.5}.open-contacts.disabled .nq-icon[data-v-5eeaf1e8]{opacity:.4}.open-contacts.disabled .label[data-v-5eeaf1e8]{opacity:.6}.open-contacts svg[data-v-5eeaf1e8]{width:5rem;height:auto;margin-top:.5rem;margin-bottom:2.875rem;color:var(--nimiq-blue);opacity:.4}.contacts[data-v-5eeaf1e8]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;border-left:1px solid rgba(30,30,30,.1);padding-left:1rem;margin-right:-1.5rem}.account[data-v-5eeaf1e8]{padding:.5rem 1.5rem;cursor:pointer}.account.disabled[data-v-5eeaf1e8]{cursor:unset}.account[data-v-5eeaf1e8] .identicon{width:8rem;height:auto}.account[data-v-5eeaf1e8] .label{max-height:6em;overflow:hidden;max-width:8rem}.label-input[data-v-32b6c97e]{position:relative;overflow:hidden;max-width:100%;height:100%}.width-finder[data-v-32b6c97e]{position:absolute;color:transparent;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:pre;padding:1.25rem}input[data-v-32b6c97e]{padding:1rem .25rem;max-width:100%;-webkit-transition:width 50ms ease-out;transition:width 50ms ease-out;text-align:center}.full-width[data-v-32b6c97e]{width:1000px}.amount-input[data-v-32b6c97e]{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;font-size:8rem}.amount-input[data-v-32b6c97e],.amount-input form[data-v-32b6c97e]{display:-webkit-box;display:-ms-flexbox;display:flex}.amount-input .nim[data-v-32b6c97e]{margin-left:1rem;font-size:4rem;font-weight:700;line-height:4.5rem;color:var(--nimiq-light-blue)}.amount-with-fee[data-v-f7787c42]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.value[data-v-f7787c42]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.amount-input[data-v-f7787c42] input{padding-top:0;padding-bottom:0}.amount-input.invalid[data-v-f7787c42] .nim,.amount-input.invalid[data-v-f7787c42] input{border-color:rgba(216,65,51,.2);color:var(--nimiq-red)!important}.fee-section[data-v-f7787c42]{color:rgba(31,35,72,.5);min-height:2rem}.select-bar[data-v-2c3d01a0]{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:3.75rem;overflow:hidden;width:100%}.select-bar>div[data-v-2c3d01a0]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0}.select-bar>div+div[data-v-2c3d01a0]{margin-left:.25rem}input[data-v-2c3d01a0]{display:none}label[data-v-2c3d01a0]{padding:1.75rem 2rem;margin:0;width:100%;text-align:center;cursor:pointer;border-radius:.5rem}.nq-highlight-bg[data-v-2c3d01a0]{background:var(--nimiq-highlight-bg)}.circle-spinner[data-v-05d748b3]{-webkit-animation:circle-spinner-spin-data-v-05d748b3 1s linear infinite;animation:circle-spinner-spin-data-v-05d748b3 1s linear infinite}@-webkit-keyframes circle-spinner-spin-data-v-05d748b3{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes circle-spinner-spin-data-v-05d748b3{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.send-tx[data-v-4d9e8127]{position:relative}.account-list[data-v-4d9e8127]{overflow-y:auto;padding:4rem 0;margin-top:-4rem;-webkit-mask-image:-webkit-gradient(linear,left bottom,left top,from(hsla(0,0%,100%,0)),color-stop(4rem,#fff),color-stop(#fff),to(hsla(0,0%,100%,0)));-webkit-mask-image:linear-gradient(0deg,hsla(0,0%,100%,0),#fff 4rem,#fff calc(100% - 4rem),hsla(0,0%,100%,0));mask-image:-webkit-gradient(linear,left bottom,left top,from(hsla(0,0%,100%,0)),color-stop(4rem,#fff),color-stop(#fff),to(hsla(0,0%,100%,0)));mask-image:linear-gradient(0deg,hsla(0,0%,100%,0),#fff 4rem,#fff calc(100% - 4rem),hsla(0,0%,100%,0))}.recipient-page+.page-footer[data-v-4d9e8127]{-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 4rem 3rem}.send-tx .page-footer .nq-button[data-v-4d9e8127]{margin-top:0}.send-tx .page-footer[data-v-4d9e8127],.send-tx .page-header[data-v-4d9e8127]{-webkit-transition:opacity .3s;transition:opacity .3s;opacity:1}.send-tx .page-body[data-v-4d9e8127]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding-bottom:2rem}.amount-page[data-v-4d9e8127]{padding-top:0;padding-bottom:0}.bottom-spacer[data-v-4d9e8127]{height:2rem}.send-tx .blur-target[data-v-4d9e8127]{-webkit-transition:opacity .3s,-webkit-filter .4s;transition:opacity .3s,-webkit-filter .4s;transition:filter .4s,opacity .3s;transition:filter .4s,opacity .3s,-webkit-filter .4s;-webkit-filter:blur(0);filter:blur(0);opacity:1}.send-tx .page-body .nq-label[data-v-4d9e8127]{display:block;text-align:center;margin-bottom:3rem}.send-tx .contact-list[data-v-4d9e8127]{min-height:0}.transition-fade-enter[data-v-4d9e8127],.transition-fade-leave-to[data-v-4d9e8127]{opacity:0}.overlay[data-v-4d9e8127]{position:absolute;z-index:2;left:0;top:0;margin:0;background:hsla(0,0%,100%,.5);-webkit-transition:opacity .4s;transition:opacity .4s}.overlay.fee .page-body[data-v-4d9e8127]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.overlay.fee p[data-v-4d9e8127]{text-align:center;margin-bottom:4rem;margin-top:.5rem}.overlay.fee .amount[data-v-4d9e8127]{margin-top:3rem}.send-tx.overlay-open .blur-target[data-v-4d9e8127]{opacity:.5;-webkit-filter:blur(20px);filter:blur(20px)}.address-display[data-v-4d9e8127]{margin-top:3rem}.sender-and-recipient[data-v-4d9e8127]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;width:100%;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.arrow-wrapper[data-v-4d9e8127]{font-size:3rem;margin-top:5.25rem}.sender-and-recipient a[data-v-4d9e8127]{color:inherit;text-decoration:none;width:calc(50% - 1.1235rem)}.sender-and-recipient .account.invalid[data-v-4d9e8127]{color:var(--nimiq-red);font-weight:600}.sender-and-recipient .account .identicon[data-v-4d9e8127]{width:9rem;height:9rem}.message[data-v-4d9e8127]{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size:2.5rem}.amount-with-fee[data-v-4d9e8127]{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-top:.125rem solid var(--nimiq-highlight-bg);padding-top:2rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.scan-qr[data-v-4d9e8127]{position:absolute;right:4rem;top:4rem;opacity:.4;-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.scan-qr[data-v-4d9e8127]:focus,.scan-qr[data-v-4d9e8127]:hover{opacity:.8}.scan-qr svg[data-v-4d9e8127]{width:4rem;height:4rem}.nq-button[data-v-4d9e8127] .circle-spinner{margin-right:1.5rem;margin-bottom:-.375rem}.options-button[data-v-4d9e8127]{position:absolute;top:4rem;right:4rem;opacity:.25;font-size:3.625rem}@media (max-width:450px){.options-button[data-v-4d9e8127],.scan-qr[data-v-4d9e8127]{right:3rem;top:3rem}}@media (max-width:409px){.contact-shortcuts[data-v-4d9e8127] .account:nth-child(3){display:none}}.account-ring[data-v-693b8320]{position:relative;width:11.25rem;--hex-size:35.556%;--hex-height:calc(var(--hex-size) * 0.88889);--gap-x:calc(var(--hex-size) / 12);--gap-y:calc(var(--gap-x) * 0.9)}.account-ring[data-v-693b8320]:before{content:"";padding-top:100%;display:block}.account[data-v-693b8320]{width:var(--hex-size);height:var(--hex-size);position:absolute}.account .identicon[data-v-693b8320]{width:100%;height:100%;z-index:1}.pop-in[data-v-693b8320]{-webkit-animation:pop-in-data-v-693b8320 .5s cubic-bezier(.73,2.08,.48,1) backwards;animation:pop-in-data-v-693b8320 .5s cubic-bezier(.73,2.08,.48,1) backwards}@-webkit-keyframes pop-in-data-v-693b8320{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pop-in-data-v-693b8320{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}.account[data-v-693b8320]:first-child{left:calc(50% - 1.25 * var(--hex-size) - var(--gap-x));top:calc(50% - 1 * var(--hex-height) - .5 * var(--gap-y))}.account[data-v-693b8320]:nth-child(2){left:calc(50% - 1.25 * var(--hex-size) - var(--gap-x));top:calc(50% + .5 * var(--gap-y))}.account[data-v-693b8320]:nth-child(3){left:calc(50% - .5 * var(--hex-size));top:calc(50% + .5 * var(--hex-height) + var(--gap-y))}.account[data-v-693b8320]:nth-child(4){left:calc(50% + .25 * var(--hex-size) + var(--gap-x));top:calc(50% + .5 * var(--gap-y))}.account[data-v-693b8320]:nth-child(5){left:calc(50% + .25 * var(--hex-size) + var(--gap-x));top:calc(50% - 1 * var(--hex-height) - .5 * var(--gap-y))}.account[data-v-693b8320]:nth-child(6){left:calc(50% - .5 * var(--hex-size));top:calc(50% - 1.5 * var(--hex-height) - var(--gap-y))}.account:first-child .pop-in[data-v-693b8320]{-webkit-animation-delay:.5s;animation-delay:.5s}.account:nth-child(2) .pop-in[data-v-693b8320]{-webkit-animation-delay:.55s;animation-delay:.55s}.account:nth-child(3) .pop-in[data-v-693b8320]{-webkit-animation-delay:.6s;animation-delay:.6s}.account:nth-child(4) .pop-in[data-v-693b8320]{-webkit-animation-delay:.65s;animation-delay:.65s}.account:nth-child(5) .pop-in[data-v-693b8320]{-webkit-animation-delay:.7s;animation-delay:.7s}.account:nth-child(6) .pop-in[data-v-693b8320]{-webkit-animation-delay:.75s;animation-delay:.75s}.wallet[data-v-d2266d0a]{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;height:10rem}.wallet-description[data-v-d2266d0a]{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-width:0}.account-ring[data-v-d2266d0a],.wallet>.identicon[data-v-d2266d0a]{width:7rem;height:7rem;margin-left:2rem;margin-right:1.5rem;-ms-flex-negative:0;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.wallet>.identicon[data-v-d2266d0a]{padding:0 .375rem}.label[data-v-d2266d0a]{font-weight:700;font-size:2.125rem;line-height:3rem;white-space:nowrap;-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(#fff),color-stop(#fff),to(hsla(0,0%,100%,0)));-webkit-mask-image:linear-gradient(90deg,#fff,#fff calc(100% - 3rem),hsla(0,0%,100%,0));mask-image:-webkit-gradient(linear,left top,right top,from(#fff),color-stop(#fff),to(hsla(0,0%,100%,0)));mask-image:linear-gradient(90deg,#fff,#fff calc(100% - 3rem),hsla(0,0%,100%,0))}.amount-container[data-v-d2266d0a]{font-size:1.75rem;font-weight:600;line-height:2rem;opacity:.5;display:-webkit-box;display:-ms-flexbox;display:flex}.amount-container.nq-orange[data-v-d2266d0a]{opacity:1}.amount-container .nq-icon[data-v-d2266d0a]{margin-right:1rem;font-size:2rem}.menu-toggle[data-v-d2266d0a]{background:none;border:none;color:inherit;cursor:pointer;padding:0;width:7rem;height:100%;opacity:0;pointer-events:none;font-family:inherit;-webkit-transition:opacity .2s;transition:opacity .2s;outline:none;-ms-flex-negative:0;flex-shrink:0}.active .menu-toggle[data-v-d2266d0a],.menu-toggle[data-v-d2266d0a]:focus,.menu-toggle[data-v-d2266d0a]:focus-within,.wallet:hover .menu-toggle[data-v-d2266d0a],:focus .menu-toggle[data-v-d2266d0a]{opacity:1;pointer-events:all}.menu-toggle>.nq-icon[data-v-d2266d0a]{font-size:3.75rem;opacity:.3;-webkit-transition:opacity .2s;transition:opacity .2s}.menu-toggle:focus>.nq-icon[data-v-d2266d0a],.menu-toggle:hover>.nq-icon[data-v-d2266d0a]{opacity:.5}.menu[data-v-d2266d0a]{display:none;position:absolute;right:0;top:0;list-style:none;padding:1rem;border-radius:.5rem;z-index:1;cursor:auto}.menu-toggle:focus-within .menu[data-v-d2266d0a],.menu-toggle:focus .menu[data-v-d2266d0a],.menu[data-v-d2266d0a]:hover{display:block}.menu .item[data-v-d2266d0a]{display:block;background:none;border:none;color:hsla(0,0%,100%,.6);font-family:inherit;text-align:left;cursor:pointer;font-size:2rem;line-height:3.75rem;font-weight:600;width:100%;padding:0 1rem;margin-bottom:.75rem;-webkit-transition:color .2s;transition:color .2s}.menu .item[data-v-d2266d0a]:last-child{margin-bottom:0}.menu .item[data-v-d2266d0a]:focus,.menu .item[data-v-d2266d0a]:hover{color:#fff}.menu .item[data-v-d2266d0a]:last-child:focus,.menu .item[data-v-d2266d0a]:last-child:hover{color:var(--nimiq-red)}.menu .item .nq-icon[data-v-d2266d0a]{vertical-align:middle;margin-bottom:.25rem}.menu .export .nq-icon[data-v-d2266d0a]{margin-left:1rem;color:var(--nimiq-orange)}.menu .logout .nq-icon[data-v-d2266d0a]{margin-right:1rem}.menu .separator[data-v-d2266d0a]{margin-top:1.75rem;margin-bottom:1rem;background:#fff;width:100%;height:1px;opacity:.1}.wallet-entry[data-v-d167a5a6]{border:none;padding:0;cursor:pointer;font-family:inherit;color:inherit;text-align:left;display:block;width:100%;border-radius:.5rem;background:rgba(123,131,199,0);-webkit-transition:background .2s;transition:background .2s}.wallet-entry .wallet[data-v-d167a5a6],.wallet-list:focus-within .wallet-entry.active:not(:focus) .wallet[data-v-d167a5a6],.wallet-list:hover .wallet-entry.active:not(:hover) .wallet[data-v-d167a5a6]{opacity:.7;-webkit-transition:opacity .2s;transition:opacity .2s}.wallet-entry.active .wallet[data-v-d167a5a6],.wallet-entry:focus .wallet[data-v-d167a5a6],.wallet-entry:hover .wallet[data-v-d167a5a6]{opacity:1}.wallet-entry:focus-within .wallet[data-v-d167a5a6]{opacity:1!important}.wallet-entry.active[data-v-d167a5a6]{background:rgba(31,35,72,.06)}.wallet-menu[data-v-b4639cc0]{width:calc(100vw - 4rem);max-width:42.5rem;background:#fff;border-radius:1rem;-webkit-box-shadow:0 4px 28px rgba(0,0,0,.111158);box-shadow:0 4px 28px rgba(0,0,0,.111158);min-height:27.875rem;max-height:calc(100vh - 4rem);padding:1rem}.wallet-list[data-v-b4639cc0]{min-height:17.875rem}.menu-footer[data-v-b4639cc0]{-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.25rem;padding-top:2.5rem;padding-bottom:1.25rem}.settings[data-v-b4639cc0]{height:4rem;background:none;font-size:2.25rem;line-height:3rem;padding-left:.5rem;margin-left:1.25rem}.settings .nq-icon[data-v-b4639cc0]{vertical-align:bottom;margin-right:1.5rem;opacity:.4;font-size:3rem;-webkit-transition:opacity .2s;transition:opacity .2s}.settings span[data-v-b4639cc0]{opacity:.7;-webkit-transition:opacity .2s;transition:opacity .2s}.settings:focus .nq-icon[data-v-b4639cc0],.settings:hover .nq-icon[data-v-b4639cc0]{opacity:.6}.settings:focus span[data-v-b4639cc0],.settings:hover span[data-v-b4639cc0]{opacity:1}.add-account[data-v-b4639cc0]{font-size:2rem;height:4rem;border-radius:2rem;padding:0 2rem;margin-right:1.25rem}
/*# sourceMappingURL=safe.css.map */