/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(../lato.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(../lato2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  height: 100%;
  font-family: lato;
  color: #000;
}
body.tos-show {
  overflow:hidden;
}

a { color: black }

.tos-container { display:none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 10; } /* tos black background */
  .tos-container h4 { margin-bottom: 0; text-align: center; }
  .tos-container h6 { margin-top: 0; font-size: 12px; text-align: center; } 
  .tos-container .tos { width: 50%; height: 80%; margin: 5% auto 0; padding: 20px; padding-right:30px; background: #ffffff; color: #000000; border-radius:2px; } /* internal background color */
    .tos-container .tos ol { width: 100%; height: 90%; padding-left: 9px; text-align: justify; overflow: auto; }
        .tos-container .tos li { margin-left: 5px; margin-right: 5px; } 
    .tos-container .tos-footer { width: 90%; margin-bottom: 15px; padding-bottom: 10px; font-weight: bold; text-align: right; font-size: 15px; }
      .tos-container .tos-footer strong { cursor: pointer; }

#paperwallet-details { width: 100%; max-width: 700px; margin: 9px auto; padding: 15px; box-sizing: border-box; } /*background: rgba(255,255,255,.2); */

.paper-wallet {
  position: relative;
  max-width: 707px;
  width: 100%;
  margin: auto;
  padding: 9px;
}

#login-box {
  text-align: center;
}

#login-box > h1 {
  margin-bottom: 0;
}

 #login-box > p {
   margin-top: 0;
   font-size:13px;
 }

#login-box fieldset {
  width: 80%;
  margin: 5px auto;
  border: 1px solid #000;
  /*background: rgba(255,255,255,.7);*/
  border-radius: 5px;
  max-width: 400px;
}

#login-box fieldset input {
  width: 100%;
  text-align: center;
  /*background: transparent;*/
  border: none;
  outline: none;
}

#login-box #progress {
  width: 50%;
  margin: auto;
}

#lvl-wrap { margin: 15px 0; font-size: 10px; text-align: right; }
  #expert { color: #666; cursor: pointer; display: block }
  #expert:hover { color: #000 }

#levels { display: none; }

.result-btn {
  height: 35px;
  text-align: right;
}

.result-btn button { 
  padding: 10px;
  /*background-color: #cec19c;*/
  right: 10px;
  top: 10px;
  cursor: pointer;
}

.currency {
  position: relative;
  margin: 80px 0;
  color: #000;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding-bottom: 10px;
  width: 705px;
}

.upload {
	position: absolute;
	top: -30px;
	right:0;
}

.upload input[type="file"] {
	color: transparent;
	width:90px;
}

.upload label[for="upload-img"] {
    color: #555;
}

.wallet-bg-btc {
  width: 707px;
  height: 448px;
  border: 1px solid #000
}

.wallet-bg {
  width: 707px;
  height: 300px;
  border: 1px solid #000
}

.identicon {
  position: absolute;
  height: 40px;
  left: 665px;
  top: 4px;
  /*background: #ffffff;*/
}

.qr-pub {
  position: absolute;
  top: 44px;
  left: 515px;
}
  .qr-pub img { width: 132px }

.qr-pri {
  position: absolute; 
  right: 481px; 
  top: 21px; 
}
  .qr-pri img { width: 195px; }

.qr-image {
  display: inline-block;
  padding: 5px;
  user-select: none;
}

.qr-image img {
  border: 4px solid #FFF;
}

.qr-text {
  position: absolute;
  text-align: center;
  word-break: break-word;
}

.pub-text {
  top: 195px;
  right: 8px;
  width: 218px;
}
  .pub-text:before { content: 'Public Address '; display: block; font-weight: bold }

.pri-text { left: 5px; font-size: 9px; width: 230px; top: 225px; text-align: center; }
  .xmr.cloned .pri-text,
  .oxen.cloned .pri-text,
  .nxt.cloned .pri-text { width: 463px; text-align: left }

.key-text {
}
  .key-text:before { content: 'Key '; display: block; font-weight: bold }

.mnemonic-text {
  top: 320px;
  left: 8px;
  text-align: left;
  width: 700px;
}
  .mnemonic-text:before { content: 'Mnemonic '; display: block; font-weight: bold }

.dumb-div {
}

.date {
  position: absolute;
  width: 110px;
  top: 21px;
  right: 51px;
  font-size: 10px;
  user-select: none;
}

.logo-img {
    position: absolute;
    height: 14px;
    transform: rotate(90deg);
    left: 35px;
    top: 144px;
    width: 300px;
}



/*XMR qr codes*/
.xmr .qr-pub { top: 45px; left: 470px }
  .xmr .qr-pub img { width: 99px }
#xmrpub { font-size: 11px; width: 113px; left: 583px; top: 53px; }
#xmrpri-view  { left: 478px; width: 128px; top: 197px; font-size: 11px; }


#qr-xmrpri-view { position: absolute; right: 0; top: 190px; }
  #qr-xmrpri-view img { width: 88px }



/*oxen qr codes*/
.oxen .qr-pub { top: 45px; left: 470px }
  .oxen .qr-pub img { width: 99px }
#oxenpub { font-size: 11px; width: 113px; left: 583px; top: 53px; }
#oxenpri-view  { left: 478px; width: 128px; top: 197px; font-size: 11px; }


#qr-oxenpri-view { position: absolute; right: 0; top: 190px; }
  #qr-oxenpri-view img { width: 88px }



/* Cloned Wallet */
.currency.xmr.cloned
.currency.oxen.cloned
.cloned .pri-text { font-size: 7px; }
.secret-share-btn { border: none; padding: 5px 10px; background: #ed0e31; color: #fff; font-weight: bold; outline: none; cursor: pointer; }
.secret-share-form { display: none; color: #fff; text-align: center; }
  .secret-config { display: inline-block; padding: 5px; }
    .split {border: none; padding: 5px 10px; outline: none; cursor: pointer; }
  
.share-counter { position: absolute; top: 9px; left: 484px } 

/* Animated stars background */
.paper-wallet,
#paperwallet-details {
    background-color:rgba(33, 33, 33, 0.3);
    color:#ffffff;
    display:block;
    position:relative;
    z-index:5;
}

@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

.stars, .twinkling, .clouds {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.stars {
  background:#000 url(../img/stars.webp) repeat top center;
  z-index:0;
  position: fixed;
}

.twinkling{
  background:transparent url(../img/twinkling.webp) repeat top center;
  z-index:1;
  position: fixed;

  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}

.clouds{
    background:transparent url(../img/clouds3.webp) repeat top center;
    z-index:3;
    position: fixed;

  -moz-animation:move-clouds-back 200s linear infinite;
  -ms-animation:move-clouds-back 200s linear infinite;
  -o-animation:move-clouds-back 200s linear infinite;
  -webkit-animation:move-clouds-back 200s linear infinite;
  animation:move-clouds-back 200s linear infinite;
}

/* END -- Animated stars background */







@media print {
  #paperwallet-details,
  .secret-share-btn,
  .result-btn,
  .upload,
  .bg-bubbles {
    display: none;
  }
  .currency { 
    margin: 9px 0; 
  }
}


@media only screen and (max-width: 700px) {
  body {
    background-color: lightblue;
  }
}