#wallet-backup-phrase { &, & ion-content, & ion-content .scroll { height: 100%; overflow-y: hidden; } .bar.bar-royal { .title { font-size: 1rem; } } background: #fff; .backup-phrase { background: rgba(246, 246, 246, 0.87); padding: .5rem .5rem 1.7rem; border: 2px dashed rgb(206, 206, 206); width: 95%; margin: 1rem auto; color: rgb(43, 43, 43); text-align: center; span { line-height: 2rem; font-weight: bold; max-width: 400px; color: rgb(43, 43, 43); } } p { color: rgb(58, 58, 58); font-weight: 200; } .cta-buttons { position: absolute; width: 100%; text-align: center; bottom: 45px; button { max-width: 400px; } } .select-word { background: #fff; box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.37); margin: .1rem 0; display: inline-block; padding: 0 5px; } #select-phrase { background: rgba(246, 246, 246, 0.87); width: 100%; text-align: center; position: absolute; bottom: 45px; padding-bottom: 20px; padding: .5rem .5rem .9rem; p { font-weight: bold; font-weight: bold; padding-top: .7rem; margin-bottom: 0.3rem; float: left; width: 100%; } .select-word { &.button[disabled] { background: transparent !important; box-shadow: none !important; color: transparent; border: 1px solid rgb(211, 211, 211); } } #confirm-phrase { margin: 5px auto 0; } } ion-content.has-tabs{ .cta-buttons{ bottom:110px; } .cta-buttons, #select-phrase{ bottom:110px; } } } @media (min-device-width : 320px) and (max-device-width : 340px) and (orientation : portrait){ #wallet-backup-phrase{ .cta-buttons,#select-phrase{ bottom: 64px; } } } @media (max-width: 400px) { #wallet-backup-phrase { ion-content { h2 { font-size: 1.2rem; } p, h2, h3 { max-width: 600px !important; } button { max-width: 400px !important; } } } } @media (max-height: 560px) { #wallet-backup-phrase { &, & ion-content, & ion-content .scroll { overflow-y:visible; } #select-phrase { float: left; position: relative; } .backup-phrase { margin-bottom: 5rem; } } } @media (max-height: 379px) { #wallet-backup-phrase { .cta-buttons { float: left; position: relative; bottom: 0; } } }