.interactive-wallet{max-width:370px;width:100%}.interactive-wallet,.wallets-container{display:flex;flex-direction:column;gap:var(--size-3)}.wallets-container{max-height:500px;overflow-y:auto;padding-right:var(--size-2)}.example{border:1px solid var(--black);display:flex;flex-direction:column;gap:var(--size-3);min-height:155px;padding:var(--size-3);width:100%}.example>.url-bar{align-items:center;background-color:var(--lighter-grey);border:1px solid var(--black);border-radius:var(--border-radius);color:var(--light-grey);display:flex;font-size:var(--font-xs);justify-content:space-between;padding:.2rem .5rem}.example>.url-bar>.icon{color:var(--light-grey);height:var(--size-3);transform:rotate(135deg);width:var(--size-3)}.connect,.sign{display:flex;flex-direction:column}.connect>button,.sign>button{background:#fff;border:1px solid var(--black);border-radius:4px;cursor:pointer;display:flex;font-size:var(--font-sm);gap:.5rem;justify-content:center;padding:.4rem .8rem;text-transform:uppercase;transition:all .2s}.connect>button:hover,.sign>button:hover{background:var(--black);color:var(--green)}.connect .loader,.sign .loader{animation:spin 1s linear infinite;display:inline-block;height:var(--size-4);width:var(--size-4)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.confirmation{align-items:center;color:var(--green);display:flex;flex-direction:row;font-size:var(--font-sm);gap:var(--size-2);margin-top:var(--size-2)}.confirmation .check{color:var(--green);height:var(--size-5);width:var(--size-5)}.test-txn{align-items:center;display:flex;flex-direction:row;gap:var(--size-3)}.wallet-mockup{border:1px solid var(--black);display:flex;flex-direction:column;gap:var(--size-3);padding:var(--size-3);transition:all .3s;width:100%}.wallet-mockup.wallet-signed{border-color:var(--green)}.wallet-mockup>button{background:#fff;border:1px solid var(--black);border-radius:4px;cursor:pointer;font-size:var(--font-sm);padding:.4rem .8rem;text-transform:uppercase;transition:all .2s}.wallet-mockup>button:hover{background:var(--black);color:var(--green)}.wallet-mockup .confirm{border:1px solid var(--black);display:flex;font-size:var(--size-3);justify-content:center;min-height:150px;padding:var(--size-2);white-space:pre-line;word-break:break-word}.wallet-mockup .confirm>div{display:flex;flex-direction:column;gap:var(--size-2);justify-content:flex-end}.wallet-mockup .confirm>div>button{background:#fff;border:1px solid var(--black);border-radius:4px;cursor:pointer;font-size:var(--font-sm);padding:.4rem .8rem;text-transform:uppercase;transition:all .2s}.wallet-mockup .confirm>div>button:hover{background:var(--black);color:var(--green)}.wallet-mockup .signed-indicator{align-items:center;color:var(--green);display:flex;flex-direction:row;font-size:var(--font-sm);gap:var(--size-2);justify-content:center}.wallet-mockup .signed-indicator .check{color:var(--green);height:var(--size-5);width:var(--size-5)}@media screen and (max-width:768px){.interactive-wallet{max-width:100%}.example>.url-bar{font-size:var(--font-xs);min-width:0;padding:.2rem .4rem}.example>.url-bar>.url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.connect>button,.sign>button,.wallet-mockup .confirm>div>button{font-size:var(--font-xs);padding:.4rem .6rem}}