* {

box-sizing: border-box;

-moz-osx-font-smoothing: grayscale;

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

margin: 0;

padding: 0;

/* reset fonts */

font-size: 100%;

}

html {

font-size: 61%;

}

html,

body {

padding: 0;

margin: 0;

width: 100%;

height: 100%;

}

body {

/* default font-size = 1.2rem (12px) */

font-size: 1.2rem;

font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

text-rendering: optimizeLegibility;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

font-kerning: auto;

font-weight: 400;

color: #ccc8c8;

background-color: #1e1e21;

background-repeat: no-repeat;

background-attachment: fixed;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

-khtml-user-select: none;

}

html.noframe body.showstartpage #mainwrap,

html.inframe body.showstartpage #mainwrap header,

html.inframe body.showstartpage #mainwrap #viewarchive,

html.inframe body.showstartpage #newrequest_alias,

html.inframe body.showstartpage #fixednav {

display: none !important;

}

body.nobip #bip39_passphrase,

body.nobip .cc_settinglist li[data-id='Xpub'],

body.nobip .cc_settinglist li[data-id='Key derivations'],

.no_derive .cc_settinglist li[data-id='Key derivations'],

.no_xpub .cc_settinglist li[data-id='Xpub'],

body.nobip .cc_settinglist li[data-id='Reuse address'],

.no_derive .cc_settinglist li[data-id='Reuse address'],

.no_xpub .cc_settinglist li[data-id='Reuse address'] {

display: none;

}

/* globals */

a {

text-decoration: none;

color: #d2d2d2;

}

b {

font-weight: 600;

}

strong {

font-weight: 700;

}

.ref {

font-weight: 700;

color: #009788;

cursor: pointer;

}

audio {

display: none;

}

/* blur window */

body.blurmain,

html.blurmain_payment body,

body.blurmain_options,

body.sharemode,

body.seed_dialog {

overflow: hidden;

}

body.blurmain #mainwrap,

body.blurmain #fixednav,

html.blurmain_payment #mainwrap,

html.blurmain_payment #fixednav,

body.blurmain_options #mainwrap,

body.blurmain_options #fixednav,

body.blurmain_options #payment,

body.sharemode #payment {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-ms-filter: blur(4px);

-o-filter: blur(4px);

filter: blur(4px);

}

/* ux */

.hide {

display: none;

}

/* global elements */

.button {

display: inline-block;

position: relative;

width: auto;

border-radius: 2em;

margin: 0;

padding: 1em 2em;

font-weight: 700;

background-color: #009788;

color: #FFF;

margin: 0;

text-align: center;

cursor: pointer;

-webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);

box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);

}

#mainwrap {

float: left;

position: relative;

width: 100%;

height: auto;

min-height: 100%;

}

body.seed_dialog #mainwrap {

display: none;

}

main {

display: block;

float: left;

position: relative;

width: 100%;

}

.inlinediv {

display: inline-block;

width: 100%;

}

/* helpers */

.clearfix:before {

content: "";

zoom: 1;

display: block

}

.clearfix:after {

content: "";

zoom: 1;

display: table;

clear: both

}

.div {

position: relative;

float: left;

clear: both;

width: 100%;

}

.select {

font-family: monospace;

-webkit-user-select: all;

-moz-user-select: all;

-ms-user-select: all;

-khtml-user-select: all;

pointer-events: all;

}

.mspace {

font-family: monospace;

}

.noselect {

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

-khtml-user-select: none;

}

.fixed {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

max-width: 100vw;

max-height: 100vh;

}

/* loadscreen */

#startscreen {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

width: 100%;

height: 100%;

width: 100vw;

height: 100vh;

font-size: 165%;

background-color: #4D5359;

z-index: 2;

}

#startloader {

position: absolute;

left: 50%;

bottom: -70px;

margin-left: -32px;

width: 64px;

height: 64px;

}

.hidesplashscreen {

-webkit-transition: opacity 500ms linear;

-ms-transition: opacity 500ms linear;

transition: opacity 500ms linear;

opacity: 0;

}

/* header and nav */

header {

display: block;

float: left;

width: 100vw;

padding: 0;

cursor: pointer;

}

.hidemain header {

position: fixed !important;

}

html.showmain header {

-webkit-transition: -webkit-transform 200ms linear;

-ms-transition: -ms-transform 200ms linear;

transition: transform 200ms linear;

}

html.hidemain header {

position: fixed;

-webkit-transform: translate(0, 0) !important;

-ms-transform: translate(0, 0) !important;

transform: translate(0, 0) !important;

z-index: 1;

}

#header {

display: block;

position: relative;

float: left;

width: 100%;

padding: 0.3em 0 0.3em 1em;

cursor: default;

}

#header h1 {

float: left;

font-size: 230%;

padding: 0em 0.5em 0.2em 0em;

font-weight: 700;

-webkit-transition: all 300ms linear;

-ms-transition: all 300ms linear;

transition: all 300ms linear;

}

#alert {

position: absolute;

top: 0.3em;

left: 0.3em;

width: 1em;

height: 1em;

padding: 1em;

margin: 0;

background-color: red;

color: white;

text-align: center;

border-radius: 50%;

font-weight: 700;

opacity: 0;

cursor: pointer;

-webkit-transform: translate(-100%, 0);

-ms-transform: translate(-100%, 0);

transform: translate(-100%, 0);

-webkit-transition: all 400ms cubic-bezier(0.5, -0.5, 0.5, 1.5);

-ms-transition: all 400ms cubic-bezier(0.5, -0.5, 0.5, 1.5);

transition: all 400ms cubic-bezier(0.5, -0.5, 0.5, 1.5);

}

html:not(.gdauth) body.haschanges #alert {

opacity: 1;

-webkit-transform: translate(0%, 0);

-ms-transform: translate(0%, 0);

transform: translate(0%, 0);

}

html:not(.gdauth) body.haschanges #header h1 {

-webkit-transform: translate(1em, 0);

-ms-transform: translate(1em, 0);

transform: translate(1em, 0);

}

html.gdauth #alert {

display: none!important;

}

/* Nav */

.self {

cursor: pointer;

}

#homenav {

position: relative;

float: right;

width: 15%;

min-height: 1em;

}

#homenav .icomoon {

position: absolute;

top: 0.1em;

right: 50%;

margin-right: -0.75em;

width: auto;

font-size: 200%;

padding: 0.2em;

border: 0.1em solid rgba(255, 255, 255, 0);

text-align: center;

-webkit-transition: opacity 700ms linear;

-ms-transition: opacity 700ms linear;

transition: opacity 700ms linear;

cursor: pointer;

}

#homenav #userbttn {

opacity: 1;

border: 0.1em solid #CCC;

border-radius: 50%;

background-color: rgba(255, 255, 255, 0.3);

}

#homebttn {

opacity: 0;

}

html.showmain #homenav #userbttn {

opacity: 0;

}

html.showmain #homebttn {

opacity: 1;

}

.navstyle {

width: 100%;

}

#relnav {

position: relative;

float: left;

}

#fixednav {

position: fixed;

display: none;

}

html.fixednav #fixednav {

display: block;

}

html.fixednav #relnav {

visibility: hidden;

}

html.fixednav body.showstartpage #fixednav {

display: none !important;

}

.nav {

position: relative;

float: left;

width: 100%;

list-style-type: none;

opacity: 0;

-webkit-transition: opacity 300ms linear;

-ms-transition: opacity 300ms linear;

transition: opacity 300ms linear;

}

html.showmain .nav {

opacity: 1;

}

.nav li {

float: left;

padding: 0;

}

.currenciesbttn,

.requestsbttn {

width: 42.5%;

min-width: 80px;

}

.nav li.settingsbttn {

width: 15%;

}

.nav li .self {

float: left;

width: 100%;

padding: 1.2em 1em;

font-weight: 600;

white-space: nowrap;

text-transform: uppercase;

background-color: rgba(255, 255, 255, 0);

}

.nav li .self>span {

display: inline-block;

padding: 0;

width: auto;

}

.nav li .self:before {

font-size: 120%;

vertical-align: baseline;

margin-right: 0.25em;

}

.nav li.settingsbttn .self {

text-align: center;

padding: 1.4em 1em;

}

.nav li.settingsbttn .self>span {

-webkit-transform: scale(1.3, 1.3);

-ms-transform: scale(1.3, 1.3);

transform: scale(1.3, 1.3);

}

.activemenu {

animation: highlight 0.5s linear;

animation-fill-mode: forwards;

}

@keyframes highlight {

50% {

background-color: rgba(255, 255, 255, 0.3);

}

100% {

background-color: rgba(255, 255, 255, 0);

color: #FFF;

}

}

.highlightbar {

float: left;

width: 100%;

overflow: hidden;

}

.highlighter {

float: left;

width: 42.5%;

height: 0.2em;

background-color: #FFF;

-webkit-transform: translate(-100%, 0);

-ms-transform: translate(-100%, 0);

transform: translate(-100%, 0);

-webkit-transition: all 400ms cubic-bezier(0.5, -0.5, 0.5, 1.5);

-ms-transition: all 400ms cubic-bezier(0.5, -0.5, 0.5, 1.5);

transition: all 400ms cubic-bezier(0.5, -0.5, 0.5, 1.5);

}

.highlightbar[data-class="currencies"] .highlighter {

-webkit-transform: translate(0%, 0);

-ms-transform: translate(0%, 0);

transform: translate(0%, 0);

}

.highlightbar[data-class="requests"] .highlighter {

-webkit-transform: translate(100%, 0);

-ms-transform: translate(100%, 0);

transform: translate(100%, 0);

}

.highlightbar[data-class="settings"] .highlighter,

.highlightbar[data-class="home"] .highlighter {

-webkit-transform: translate(200%, 0);

-ms-transform: translate(200%, 0);

transform: translate(200%, 0);

}

/* home */

#home {

background-color: #2c333a;

height: auto;

padding-top: 8vh;

min-height: 100vh;

}

#homecontent {

height: auto;

}

.currencylist {

width: 100%;

max-width: 800px;

list-style-type: none;

text-align: center;

margin: auto;

-webkit-transform: translate(0%, 0);

-ms-transform: translate(0%, 0);

transform: translate(0%, 0);

-webkit-transition: all 300ms linear;

-ms-transition: all 300ms linear;

transition: all 300ms linear;

}

.currencylist li {

display: inline-block;

width: 30%;

min-width: 100px;

padding: 0;

margin: 0 0 0.5em 0;

}

.currencylist li>.rq_icon {

position: relative;

text-align: center;

}

.currencylist li>.rq_icon:after {

display: inline-block;

width: 100%;

clear: both;

font-size: 120%;

text-align: center;

line-height: 1.2em;

padding: 0.5em 0;

text-transform: capitalize;

font-weight: 400;

content: attr(data-currency);

}

.currencylist li.hide {

display: none;

}

ul.currencylist li img {

width: 80%;

cursor: pointer;

background-color: rgba(255, 255, 255, 1);

border-radius: 50%;

padding: 1%;

-webkit-box-shadow: 0 30px 30px rgba(0, 0, 0, 0.5);

box-shadow: 0 2em 2em rgba(0, 0, 0, 0.5);

}

html.showmain ul#currencylist {

-webkit-transform: translate(-200%, 0);

-ms-transform: translate(-200%, 0);

transform: translate(-200%, 0);

}

/* pages */

.page {

position: absolute;

width: 100%;

min-height: 60vh;

-webkit-transform: scale(0, 0);

-ms-transform: scale(0, 0);

transform: scale(0, 0);

opacity: 0;

-webkit-transition: all 300ms ease-in-out;

-ms-transition: all 300ms ease-in-out;

transition: all 300ms ease-in-out;

padding-bottom: 100px;

}

.currentpage {

-webkit-transform: scale(1, 1);

-ms-transform: scale(1, 1);

transform: scale(1, 1);

opacity: 1;

}

.content {

position: relative;

float: left;

width: 100%;

height: auto;

padding-top: 2em;

overflow: visible;

}

.heading {

font-size: 250%;

font-weight: 400;

width: 100%;

padding: 0 0 0.5em 0.5em;

text-transform: capitalize;

}

.heading .icon-cog {

float: right;

padding: 0.35em;

}

.heading .cmc_icon {

width: 0.8em;

}

.alias {

font-size: 250%;

width: 1.7em;

height: 1.7em;

background-color: #009788;

color: #009788;

border-radius: 50%;

cursor: pointer;

-webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);

box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);

-webkit-transition: opacity 300ms linear;

-ms-transition: opacity 300ms linear;

transition: opacity 300ms linear;

}

.alias>span {

display: block;

position: absolute;

top: 0.23em;

left: 0.29em;

margin: 0;

padding: 0;

text-align: center;

font-size: 110%;

color: #FFF;

}

#newrequest_alias {

display: block;

position: fixed;

bottom: 0.3em;

left: 50%;

float: right;

margin: 0 0 0 -0.85em;

pointer-events: none;

opacity: 0;

}

#request_history {

display: block;

position: fixed;

max-width: 1em;

max-height: 1em;

bottom: 0.3em;

right: 0.3em;

margin: 0;

pointer-events: none;

opacity: 0;

}

#request_history.load {

animation: lds-ring 500ms normal forwards;

-webkit-animation: lds-ring 500ms normal forwards;

}

html.show_rr #request_history {

pointer-events: all;

opacity: 0.85;

}

#request_history>span {

top: 0.16em;

left: 0.11em;

font-size: 70%;

}

html.showmain #newrequest_alias {

pointer-events: all;

opacity: 0.85;

}

/* list styles */

.applist {

list-style-type: none;

margin: 0 0 0 0;

}

.applist li {

position: relative;

border-bottom: 1px solid rgba(255, 255, 255, 0.15);

}

.applist div.endli {

display: list-item;

padding: 0 0.5em 0 0;

border-bottom: none;

}

.applist .atext {

display: inline-block;

width: 90%;

}

.applist.pobox li .address .srcicon {

height: auto;

opacity: 0.8;

padding: 0.5em 0.2em 0.5em 0.2em;

}

.applist.pobox li .address .srcicon.icon-eye {

color: #008500;

}

.applist.pobox li .address .srcicon.icon-eye-blocked {

color: #eeac57;

}

.applist.pobox li.seedu .address .srcicon {

cursor: pointer;

}

.applist.pobox li.xpubv .address .srcicon {

color: #008500;

}

.applist.pobox li.xpubu .address .srcicon {

color: #eeac57;

}

.applist.pobox li .address .srcseed {

width: 1em;

}

.applist.pobox li.seedv .address .srcseed>path {

fill: #008500;

}

.applist.pobox li.seedv .toggleaddress {

//visibility:hidden;

}

.applist.pobox li .usedicon {

display: none;

padding: 0.5em;

cursor: pointer;

}

.applist.pobox li.used {

opacity: 0.5;

}

.applist.pobox li.used .usedicon {

display: inline-block;

}

.applist h2 {

font-weight: 600;

font-size: 120%;

}

.applist .addressinfo h2 {

margin: 0 0 0.2em 0;

}

.applist h2>img {

display: inline;

width: auto;

height: 1.3em;

line-height: 1;

margin: 0 0.25em 0 0;

vertical-align: top;

background-color: rgba(255, 255, 255, 0.69);

border-radius: 50%;

}

.applist p.address {

position: relative;

width: 100%;

word-wrap: break-word;

display: inline-block;

font-weight: 400;

}

.addaddress,

#add_erc20,

#viewarchive,

#addaddress,

.reset_cc_settings {

float: left;

margin: 2.4em 0 2em 1em;

}

.send {

float: right;

margin: 2.4em 0.6em 0 1em;

opacity: 0.5;

cursor: not-allowed;

}

.listyle2 .liwrap>span:before {

line-height: 1.8em;

}

#usedcurrencies,

#allcurrencies,

.requestlist li .liwrap img.cmc_icon:nth-child(1) {

filter: gray;

-webkit-filter: grayscale(1);

filter: grayscale(1);

}

.requestlist li.rqli .liwrap img.cmc_icon:nth-child(2) {

opacity: 0;

-webkit-transition: opacity 1500ms ease-out;

-ms-transition: opacity 1500ms ease-out;

transition: opacity 1500ms ease-out;

}

.requestlist li.visible_request .liwrap img.cmc_icon:nth-child(2) {

opacity: 1;

}

.requestlist li.rqli .expired_panel {

position: absolute;

top: 0;

left: 0;

bottom: 0;

width: 100%;

background-color: rgba(0, 0, 0, 0.55);

display: none;

pointer-events: none;

}

.requestlist li.rqli .expired_panel h2 {

position: absolute;

top: 0;

right: 0;

color: rgba(238, 173, 88, 0.64);

font-weight: 700;

font-size: 520%;

-webkit-transform: rotate(15deg);

-ms-transform: rotate(15deg);

transform: rotate(15deg);

}

.requestlist li.rqli.expired .expired_panel {

display: block;

}

.requestlist li.rqli[data-status="paid"].expired .expired_panel {

display: none;

}

#usedcurrencies>li[data-currency="monero"] {

//display:none;

}

#usedcurrencies .liwrap h2,

.pobox h2 {

width: auto;

text-transform: capitalize;

cursor: pointer;

}

li[data-checked="true"] .checkbox:before,

#popup .cb_wrap[data-checked="true"] .checkbox:before {

content: "\ea52";

}

li[data-checked="false"] .checkbox:before,

#popup .cb_wrap[data-checked="false"] .checkbox:before {

content: "\ea53";

color: #838383;

}

.liwrap {

position: relative;

display: block;

padding: 1.5em 1em;

color: #b3b3b3;

}

.settinglist>li {

min-height: 6em;

}

#appsettings>li.set_heading {

padding: 2.3em 0 0.5em 1em;

min-height: 0em;

border: 1px solid rgba(255, 255, 255, 0);

}

#appsettings>li.set_heading:first-child {

padding: 0em 0 0.5em 1em;

}

#appsettings>li.set_heading h2 {

color: #FFF;

font-size: 150%;

text-transform: uppercase;

}

.settinglist .liwrap {

padding: 1.5em 1em;

border-bottom: none;

}

.settinglist .liwrap .atext {

cursor: pointer;

}

.settinglist .liwrap>span:before {

vertical-align: top;

}

.settinglist .iconbox {

color: #009788;

}

.settinglist .iconbox .switchpanel {

margin-right: 1em;

}

.iconbox {

position: absolute;

top: 0;

right: 0;

bottom: 0;

min-width: 25px;

cursor: pointer;

}

.iconbox>span {

display: block;

float: left;

text-align: center;

}

.iconbox>span:before {

margin: 0;

}

.iconright .atext {

padding-right: 13.4%;

}

.iconright .iconbox {

font-size: 160%;

min-width: 13.4%;

}

.iconright .iconbox>span {

width: 100%;

}

.iconright2 .atext {

padding-right: 30%;