@CHARSET "UTF-8";

/********** FONT IMPORT **********/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;500;700&display=swap');

/********** SET DEFAULT GLOBAL PROPERTIES **********/

* { font-family: 'Roboto', sans-serif; font-size: 100%; } /* Set default font and font size on all elements */
*:focus { outline: none; } /* Eliminate browsers' default outline on focus */
p { margin: 0px; } /* Eliminate browsers' default margin on p elements */
a { text-decoration: none; color: inherit; } /* Eliminate browsers' link stuff by default */
img { border: none; } /* Eliminate image borders by default */

/********** GENERIC PROPERTIES **********/

.font-slab { font-family: 'Roboto Slab', serif; }

.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.click { cursor: pointer; }
.semi-bold { font-weight: 500; }
.bold { font-weight: 700; }
.hidden { display: none; }
.break-text { word-break: break-all; }

/********** TEXT COLORS **********/

:root {
  --orange: #e85443;
  --gold: #be9066;
  --blue-deep: #0f172d;
  --blue-dark: #090E1C;
  --blue-grey: #39435e;

  --grey: #d8d8d8;
  --grey-dark: #838383;
  --white: #FAFAFA;
  --blue: #3C79F5;
  --green: #019900;
  --red: #CC0000;
  --yellow: #998A00;

  --btc: #f2a900;
  --ltc: #b8b8b8;
  --xmr: #ff6600;
  --zec: #f4b728;
  --eth: #716b94;
  --doge: #e1b303;

  --bg-orange-12: rgba(232,84,67,0.12);
  --red-12: rgba(204,0,0,0.12);
  --red-20: rgba(204,0,0,0.20);
  --green-12: rgba(1,153,0,0.12);
  --green-20: rgba(1,153,0,0.20);
  --gold-12: rgba(190,144,102,0.12);
  --gold-20: rgba(190,144,102,0.2);
  --gold-80: rgba(190,144,102,0.8);
}


/* DEPRECATED */
.sato-blue-dark { color: #090E1C; }
.sato-blue-deep { color: #0f172d; }
.sato-blue-grey { color: #39435e; }
.sato-gold { color: #be9066; }
.sato-orange { color: #e85443; }
.sato-grey { color: #d8d8d8; }
.sato-grey-dark { color: #838383; }
.sato-green { color: #55e843; }
.sato-purple-bittorrent { color: #683399; }
.sato-red { color: #e84343; }
.sato-white { color: #ffffff; }
.sato-yellow { color: #e8d443; }

.sato-blue-link { color: #438de8; text-decoration: underline; }

/* DEPRECATED */

.sato-bg-blue-dark { background: #090E1C; }
.sato-bg-blue-deep { background: #0f172d; }
.sato-bg-blue-grey { background: #39435e; }
.sato-bg-gold { background: #e84343; }
.sato-bg-orange { background: #e85443; }
.sato-bg-green { background: #55e843; }
.sato-bg-red { background: #e84343; }
.sato-bg-yellow { background: #e8d443; }

/* DEPRECATED */

.sato-btc { color: #f2a900; }
.sato-ltc { color: #b8b8b8; }
.sato-xmr { color: #ff6600; }
.sato-zec { color: #f4b728; }
.sato-eth { color: #716b94; }
.sato-doge { color: #e1b303; }

/********** BORDERS COLORS **********/

.sato-border-orange { border: 1px solid #e85443; }
.sato-border-orange-25 { border: 1px solid rgb(232,84,67,0.50); }

/********** SHADOW COLORS **********/

.sato-shadow-orange { box-shadow: rgba(232,84,67,1) 0 0 2px; }


/********** HTML DOCUMENT LAYOUT **********/

#html { background-color: var(--blue-dark); }
#body { display: block; width: 100%; min-width: 360px; min-height: 640px; margin: 0; color: var(--grey); }
input { color: var(--grey); }


/********** CUSTOM SCROLL BAR **********/

::-webkit-scrollbar { width: 6px; height: 6px; } /* Container */
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background-color: var(--blue-dark); border-radius: 6px; } /* Tracking bar (background) */
::-webkit-scrollbar-thumb {  background-color: var(--gold); border-radius: 6px; } /* Handle */
::-webkit-scrollbar-thumb:hover { background-color: var(--gold); cursor: pointer; } /* Handle on hover */

/********** LOADING CIRCLE ANIMATION  **********/

/* GOLD STYLE */

.loading-animation-gold-large, .loading-animation-gold-large:after {
  border-radius: 50%; width: 50px; height: 50px;
}

.loading-animation-gold-small, .loading-animation-gold-small:after {
  border-radius: 50%; width: 25px; height: 25px;
}

.loading-animation-gold-mini, .loading-animation-gold-mini:after {
  border-radius: 50%; width: 16px; height: 16px;
}

/* SHARED STYLE */

.loading-animation-gold-large, .loading-animation-gold-small, .loading-animation-gold-mini {
  display: inline-block; font-size: 10px; text-indent: -9999em;
  border-top: 0.5em solid var(--gold-20); border-right: 0.5em solid var(--gold-20);
  border-bottom: 0.5em solid var(--gold-20); border-left: 0.5em solid var(--gold);
  transform: translateZ(0); -webkit-transform: translateZ(0); -ms-transform: translateZ(0);
  animation: load8 0.7s infinite linear; -webkit-animation: load8 0.7s infinite linear;
}

/* ANIMATION CODE */

@-webkit-keyframes load8 {
  0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
  100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); }
}

@keyframes load8 {
  0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
  100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); }
}