#pin { background-color: #FAFAFA; width: 100%; height: 100%; top: 0; left: 0; .content { text-align: center; position: fixed; width: 100%; height: 100%; .app-icon { margin-top: -55px; .big-icon-svg { > .bg { background-image: url("../img/app/icon.png"); height: 60px; width: 60px; margin: auto; } } } .block-text { align-items: center; background-color: #F1F1F1; height: 30%; border-bottom: 1px solid #c5c5c5; .message { margin: auto; } span { width: 60%; margin: 10% auto; } @media(min-width: 480px) { span { font-size: 30px; width: 90%; } } } .block-code { width: 50%; margin: auto; @media(min-width: 480px) { width: 25%; } } .block-buttons { .col { padding: 5%; } color: $v-dark-gray; font-size: 1.7rem; font-family: $v-font-family-light; cursor: pointer; position: absolute; bottom: 3%; left: 5%; width: 90%; @media(min-width: 480px) { left: 15%; width: 70%; max-height: 55%; } } } @mixin circle { border-radius: 50%; box-shadow: 0 0 3px 0px #5b5b5b; transition: background-color .2s ease-in-out; padding: 7%; margin: 5%; } .circle-copay { @include circle; border: 1px solid $v-accent-color; } .circle-bitpay { @include circle; border: 1px solid $v-primary-color; } .filled-copay { background-color: $v-accent-color; } .filled-bitpay { background-color: #1f3598; } .error { color: #f13333; max-width: 70%; } }