/*
 * google fonts API loads faster
 * (localhost font assets)
 * @import "./fonts.css";
 * */
cmc-line-graph {
  position: fixed;
  top: 0;
  z-index: 1;
  right: 0;
  left: 0; }

header {
  display: block;
  font-size: 14px;
  text-align: left;
  font-style: normal;
  font-weight: 400;
  background: #0000003f;
  color: #636363; }

header section {
  display: flex;
  flex-direction: row; }

header h1 {
  font-size: 14px;
  display: inline-block;
  vertical-align: middle; }

header h1 a {
  color: inherit;
  text-decoration: none; }

header em {
  font-size: inherit;
  font-style: normal;
  font-weight: 200;
  padding: 0 20px;
  margin: auto; }

header h1 {
  display: contents;
  color: #2c2c2c;
  font-size: 28px;
  font-weight: 900;
  text-transform: uppercase; }

header nav {
  flex: 1 0 auto;
  text-align: right;
  margin: auto; }

header nav a {
  color: inherit;
  padding: 0 5px; }

div[dialog] {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  width: unset;
  height: unset;
  backdrop-filter: blur(10px);
  background: radial-gradient(#00000061 10%, black 80%);
  position: fixed;
  display: none; }
  div[dialog][open] {
    display: flex; }
  div[dialog] .loader {
    color: white;
    margin: auto;
    padding: 20px; }
  div[dialog] .dialog-filter img {
    filter: contrast(0) brightness(2);
    vertical-align: middle; }
  div[dialog] .theme {
    font-size: 20px;
    padding: 30px;
    min-width: 300px;
    background: #ffffff;
    color: black;
    border: 1px solid black;
    box-shadow: 0 40px 16px 0 #00000044; }
    div[dialog] .theme-warning {
      color: white;
      background: #ffaa00;
      box-shadow: 0 40px 16px 0 #ffaa0044; }
    div[dialog] .theme-error {
      color: white;
      background: #ff0000;
      box-shadow: 0 40px 16px 0 #ff000044; }
  div[dialog] svg {
    height: auto;
    display: block;
    margin: auto;
    max-width: 410px; }
  div[dialog] .text {
    margin: 0; }
  div[dialog] .addr {
    max-width: 340px;
    line-break: strict;
    display: block;
    word-break: break-all;
    padding: 20px 0;
    text-align: center;
    margin: auto; }
  div[dialog] h3 {
    display: block;
    font-size: 32px;
    text-align: center;
    padding: 20px 0; }
  div[dialog] strong,
  div[dialog] em {
    display: block;
    text-align: center; }
  div[dialog] strong {
    font-size: 30px;
    margin: 20px 0 10px; }

.total {
  font-family: "Roboto Condensed", arial, sanserif;
  font-weight: 900;
  display: flex; }

.total-symbol {
  font-family: "Roboto", arial, sanserif;
  font-weight: 900;
  font-size: 90px;
  text-shadow: 0 50px 26px black; }

.total-value {
  flex: auto;
  font-size: 180px;
  text-align: right;
  line-height: 0.8;
  letter-spacing: -0.035em;
  text-shadow: 0 50px 26px black; }

.total-markets {
  background: #121212;
  padding: 15px 20px;
  font-weight: 900;
  color: #424242;
  background: #00000035;
  border: 1px solid #0000003f; }
  .total-markets ul {
    padding: 0;
    margin: 0; }
  .total-markets li {
    display: inline;
    list-style-type: none;
    padding: 0;
    margin: 0 10px 0 0;
    cursor: pointer; }
    .total-markets li[selected] {
      color: #ffffff;
      box-shadow: 0px 19px 10px 0px #00000055; }

.total-currency-name {
  margin: auto 0; }

.total-widget {
  position: relative; }

.total-fiat-switch {
  display: flex;
  font-size: 20px;
  position: relative;
  margin: 0 auto;
  padding: 0;
  justify-content: space-between; }

[m-cmc-total="increase"] {
  text-shadow: 0 50px 26px #004d00; }

[m-cmc-total="decrease"] {
  text-shadow: 0 50px 26px #4d0000; }

@keyframes throb {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(5px); }
  100% {
    transform: translateY(0); } }

.row.dragover:before {
  content: "";
  position: absolute;
  height: 20px;
  width: 100%;
  background: white;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  margin: -25px auto 0; }

.row.dragorigin {
  opacity: 0.1; }
  .row.dragorigin.dragover:before {
    background: transparent; }

.transaction-rows {
  display: none; }
  .row[open] .transaction-rows {
    display: block; }

.transaction-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 62px;
  margin-top: 40px; }

.transaction-summary {
  background: #131313;
  border-width: 3px 0 0;
  border: 0 solid black;
  color: #666666;
  display: flex;
  font-size: 18px;
  font-weight: 400;
  justify-content: space-between;
  padding: 6px 10px; }
  .transaction-summary em {
    font-style: normal;
    padding: 0 10px;
    flex: 1 auto; }
    .transaction-summary em:first-child {
      background: #464646;
      border-radius: 3px;
      color: black;
      flex: 0 0 auto;
      flex: 0 0 auto;
      padding: 0;
      text-align: center;
      width: 30px; }
    .transaction-summary em:last-child {
      text-align: right;
      flex: 1 0 auto;
      padding: 0; }

.transaction-row {
  border-bottom: 1px solid #ffffff1e;
  border-top: 1px solid black;
  display: flex;
  margin: 0;
  padding: 8px;
  position: relative; }
  .transaction-row.inactive > * {
    text-decoration: line-through;
    opacity: 0.4; }
  .transaction-row a {
    flex: 0 1 auto;
    width: 50px;
    text-decoration: underline; }
  .transaction-row .metadata {
    display: flex; }
    .transaction-row .metadata input {
      flex: auto;
      background: transparent;
      color: white;
      border: 0;
      padding: 0;
      margin: 0 10px 0; }
  .transaction-row .quantity {
    text-align: right;
    flex: 1 auto;
    margin: 0 10px 0 0; }
  .transaction-row > * {
    flex: auto;
    color: inherit; }

.transaction-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 180px; }

.transaction-qty {
  text-align: center;
  flex: 1 auto; }

.trend {
  display: block;
  height: var(--trend-size);
  margin: 0;
  background: lightblue; }

.trend-up {
  background: green; }

.trend-equal {
  background: orange; }

.trend-down {
  background: red; }

/**/
.market {
  margin-bottom: 60px; }
  .market [disabled] {
    display: none; }

.market-collection {
  display: none;
  background: #00000038;
  padding: 15px;
  margin: 0;
  border: 2px solid black;
  box-shadow: 0 20px 40px -20px #000000;
  position: relative; }
  [open] .market-collection {
    display: block; }
  .market-collection h3 {
    background: #00000000;
    color: #434343;
    font-size: 14px;
    font-weight: 200;
    left: 0;
    margin: 0 10px;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    top: 100%; }
  .market-collection ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none; }
  .market-collection li a {
    border: 1px solid #5c5c5c;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    height: 85px;
    width: 127px;
    color: white;
    margin: 6px;
    text-decoration: none;
    background: #202020;
    box-shadow: 0 10px 10px -5px black; }
  .market-collection li b {
    font-size: 28px;
    flex: 1; }
  .market-collection ul li a > i {
    font-style: normal;
    font-size: 18px; }

.market-add {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  flex-direction: column;
  min-height: 32px; }

.market-toggle {
  position: absolute;
  top: 0;
  right: 20px;
  background: white;
  color: black;
  padding: 15px;
  border-radius: 50px;
  border: 2px solid #111111;
  line-height: 0;
  outline: none;
  box-shadow: 0 10px 10px 1px #000000; }
  .market-toggle svg {
    width: 40px;
    height: auto; }
  .market-toggle path {
    display: none; }
  .market-toggle[icon="cancel"] path.cancel,
  .market-toggle[icon="submit"] path.submit,
  .market-toggle[icon="add"] path.add {
    display: block; }

.market-input {
  display: none;
  margin: -20px 0 0; }
  [open] .market-input {
    display: flex; }
  .market-input label {
    display: block; }
  .market-input span {
    display: block;
    padding: 0px 10px 20px; }
    .market-input span:first-child {
      width: 48%;
      border-right: 1px solid black; }
  .market-input input {
    border: none;
    background: transparent;
    color: white;
    font-size: 70px;
    padding: 5px;
    outline: none;
    width: 90%; }
    .market-input input::placeholder {
      color: #0000003f; }

footer {
  display: block;
  width: 100%;
  background-image: radial-gradient(#ffffff 40%, #cccccc 70%);
  color: #757575;
  padding: 0;
  margin: 120px 0 0;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 4px solid black;
  background-size: 100% 500px;
  background-repeat: no-repeat;
  background-position: 50% 109%;
  background-color: #cccccc; }

footer section {
  padding: 80px 20px 20px 20px; }

footer .icons {
  display: flex;
  padding: 0 20px 70px;
  justify-content: space-evenly;
  box-shadow: 0 0 black; }

footer .icons a {
  color: inherit;
  margin: 0 5px;
  text-decoration: none; }

footer .icons img {
  opacity: 0.45; }

footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex; }

footer ul li {
  font-size: 25px;
  font-weight: 400;
  position: relative; }

footer .legals {
  display: block;
  width: 100%;
  text-align: center; }

footer .legals a {
  color: inherit; }

.heading {
  font-size: 72px;
  font-style: normal;
  font-weight: 400;
  text-align: left;
  margin: 0 60px 90px;
  display: block; }

.things {
  display: flex;
  flex-wrap: wrap; }

.thing {
  width: 50%;
  flex: auto;
  position: relative;
  fill: white;
  margin: 0 0 40px 0;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  text-align: left; }

.thing .inner {
  padding: 5px 40px 0 70px; }

.thing ul {
  list-style-type: none;
  margin: 10px 0 30px;
  padding: 0; }

.thing ul li {
  color: red;
  display: inline-block;
  border-left: 1px solid red;
  padding: 0 6px; }

.thing ul li:first-child {
  border: none;
  padding-left: 0; }

.thing h3 {
  font-weight: 500;
  font-size: 32px; }

.thing p {
  color: #848484; }

.thing svg {
  fill: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  margin: 6px 10px;
  color: red; }

.promo-row {
  display: flex;
  justify-content: space-around;
  margin: 30px 0 0; }

.promo-cell {
  background: #2c2c2c;
  padding: 25px;
  margin: 5px;
  flex: 1;
  font-weight: 400;
  display: flex;
  font-size: 18px;
  flex-direction: column;
  text-align: center;
  box-shadow: 0 15px 20px 0px #0000006f;
  border: 1px solid #0000003f; }
  .promo-cell strong {
    font-family: Roboto Condensed;
    font-size: 36px;
    font-weight: 400;
    margin: 0 0 20px; }
  .promo-cell em {
    color: black;
    margin: 0 0 20px 0; }
  .promo-cell span {
    display: flex;
    flex-direction: column;
    flex: 1; }
  .promo-cell em,
  .promo-cell p {
    font-style: normal;
    font-weight: 400; }
  .promo-cell button {
    margin: 20px 0 0;
    padding: 18px 0;
    font-size: 18px;
    border-radius: 4px;
    background: white;
    border: none;
    padding: 10px; }

.checkbox {
  flex: 0 0 auto;
  width: 40px;
  text-align: center; }
  .checkbox input {
    display: none; }
    .checkbox input:checked ~ strong:before {
      display: inline-block; }
    .checkbox input:checked ~ strong:after {
      display: none; }
  .checkbox strong {
    display: inline-block;
    min-width: 40px; }
    .checkbox strong:before, .checkbox strong:after {
      content: url(/images/icons/icon-switch.svg); }
    .checkbox strong:before {
      display: none;
      transform: scaleX(-1); }

.announcement {
  width: 100%;
  padding: 0; }

.announce-banner {
  display: flex;
  margin: 30px 0;
  background: #000000;
  color: white;
  box-shadow: 0 5px 20px 0 #00000055; }
  .red .announce-banner {
    background: red;
    color: white;
    box-shadow: 0 5px 20px 0 #ff000044; }
  .orange .announce-banner {
    background: orange;
    color: white;
    box-shadow: 0 5px 20px 0 #ffea0044; }
  .green .announce-banner {
    background: green;
    color: white;
    box-shadow: 0 5px 20px 0 #22972255; }
  .blue .announce-banner {
    background: lightskyblue;
    color: white;
    box-shadow: 0 5px 20px 0 #00b9ff55; }

.announce-icon {
  width: 100px;
  margin: auto;
  flex: 0 auto;
  text-align: center;
  padding: 30px; }

.announce-icon img {
  width: 80px;
  height: auto; }

.announce-heading, .announce-content {
  flex: 1;
  margin: auto;
  padding: 30px;
  text-align: center;
  font-size: 22px; }
  .announce-heading a, .announce-content a {
    color: inherit; }

.announce-heading {
  font-size: 36px;
  font-weight: 900; }

/*global CSS viarables*/
:root {
  --trend-size: 2px; }

html,
body {
  height: 100%;
  padding: 0;
  margin: 0; }

body {
  color: #efefef;
  flex-direction: column;
  justify-content: space-between;
  font-family: "Roboto", arial, sanserif;
  font-weight: 400;
  font-size: 14px;
  width: 100%;
  display: flex;
  background: #000000 radial-gradient(#333333, #000000);
  background-size: 100%;
  background-position: 50% -140px;
  background-attachment: fixed; }

body[blur] {
  filter: blur(50px); }

main {
  flex: 1 0 auto;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto; }

#ledger {
  opacity: 1;
  transition: opacity 250ms 100ms; }

[loading] #ledger {
  opacity: 0; }

section {
  max-width: 1000px;
  margin: auto;
  padding: 20px; }

h1,
h2,
h3,
h4,
h5 {
  padding: 0;
  margin: 0; }

h1,
h2 {
  width: 100%;
  display: flex;
  justify-content: space-between; }

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield; }

.row {
  margin: 0 0 30px;
  position: relative; }