.request-decrypt-message { &__container { width: 380px; border-radius: 8px; background-color: $white; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); display: flex; flex-flow: column nowrap; z-index: 25; align-items: center; font-family: Roboto; position: relative; height: 100%; @media screen and (max-width: $break-small) { width: 100%; top: 0; box-shadow: none; } @media screen and (min-width: $break-large) { height: 620px; } } &__typed-container { padding: 17px; h1 { font-weight: 900; margin-bottom: 5px; } * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } > div { margin-bottom: 10px; } } &__header { height: 64px; width: 100%; position: relative; display: flex; flex-flow: column; justify-content: center; align-items: center; flex: 0 0 auto; } &__header-background { position: absolute; background-color: $athens-grey; z-index: 2; width: 100%; height: 100%; } &__header__text { color: #5B5D67; font-family: Roboto; font-size: 22px; line-height: 29px; z-index: 3; text-align: center; } &__header__tip-container { width: 100%; display: flex; justify-content: center; } &__header__tip { height: 25px; width: 25px; background: $athens-grey; transform: rotate(45deg); position: absolute; bottom: -8px; z-index: 1; } &__account-info { display: flex; justify-content: space-between; margin-top: 18px; margin-bottom: 20px; } &__account { color: $dusty-gray; margin-left: 17px; } &__account-text { font-size: 14px; } &__account-item { height: 22px; background-color: $white; font-family: Roboto; line-height: 16px; font-size: 12px; width: 124px; .account-list-item { margin-top: 6px; } .account-list-item__account-name { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 80px; } .account-list-item__top-row { margin: 0; } } &__balance { color: $dusty-gray; margin-right: 17px; width: 124px; } &__balance-text { text-align: right; font-size: 14px; } &__balance-value { text-align: right; margin-top: 2.5px; } &__request-icon { margin-top: 25px; } &__body { width: 100%; height: 100%; display: flex; flex-flow: column; flex: 1 1 auto; height: 0; } &__notice { font-family: "Avenir Next"; font-size: 14px; line-height: 19px; text-align: center; margin-top: 15px; margin-bottom: 11px; width: 100%; } &__message { overflow-wrap: break-word; margin: 20px; overflow: hidden; border: 1px solid #dedede; padding: 5px; border-radius: 5px; position: relative; &-text { font-size: 0.7em; height: 115px; } &-cover { background-color: white; opacity: 0.75; position: absolute; height: 100%; width: 100%; top: 0px; } &-lock { position: absolute; height: 100%; width: 100%; top: 0px; cursor: pointer; img { padding: 5px; background-color: #fff; left: calc(50% - 24px); position: absolute; top: calc(50% - 34px); border-radius: 3px; } &--pressed { display: none; } } &-lock-text { width: 200px; font-size: 0.75em; position: absolute; top: calc(50% + 5px); text-align: center; left: calc(50% - 100px); background-color: white; line-height: 1em; border-radius: 3px; } &-copy { justify-content: space-evenly; font-size: 0.75em; margin-left: 20px; margin-right: 20px; display: flex; cursor: pointer; } &-copy-text { margin-right: 10px; display: inline; } &-copy-tooltip { float: right; } } &__footer { width: 100%; display: flex; align-items: center; justify-content: center; font-size: 22px; position: relative; flex: 0 0 auto; border-top: 1px solid $geyser; padding: 1.6rem; button { width: 165px; } &__cancel-button { margin-right: 1.2rem; } } &__visual { display: flex; flex-direction: row; justify-content: space-evenly; position: relative; margin: 0 20px; section { display: flex; flex-direction: column; align-items: center; flex: 1; } &-identicon { width: 48px; height: 48px; &--default { background-color: #777A87; color: white; width: 48px; height: 48px; border-radius: 24px; display: flex; align-items: center; justify-content: center; font-weight: bold; } } } }