#tokens {
  padding: 20px;

  .boxes {
    font-family: 'Acme';
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .box {
      height: 140px;
      width: 160px;
      border: 1px solid silver;
      box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);
      border-radius: 3px;
      float: left;
      margin: 15px;
      padding: 20px;
      font-size: 1.5em;
      text-align: center;
      background: url("/assets/bkg3-d3304aa2.png");

      .coins {
        text-align: center;
        padding: 10px;

        .value {
          color: var(--token-text);
        }
      }

      .btn {
        margin-top: 10px;
        cursor: pointer;
      }
    }
  }

  .notes {
    font-size: 0.8em;
    font-style: italic;
    color: #666;
    text-align: right;
    text-align: center;

    a:hover {
      text-decoration: underline;
    }
  }

  .achievement_tokens, .token_purchases, .referral_tokens {
    background: white;
    border-radius: 6px;
    border: 1px solid #DDD;
    font-size: 0.8em;
    color: #555;
    box-shadow: inset 0px 1px 0px rgba(0,0,0,0.3);
    margin: 0 10px 20px;

    .token_item {
      padding: 15px;
      border-bottom: 1px solid #EEE;

      .created_at {
        float: right;
      }

      .tokens, .amount, .referrer {
        font-weight: 700;
        margin-right: 15px;
      }
    }
  }
}