:root {
  --primary-color: #221689;
  --secondary-color: #4B0E85;
  --lighter-color: #3629A6;
  --darker-color: #180D70;
}

/* use colors this way:
  var(--primary-color)
*/

/*
  Styles to overwrite material to our needs
*/

body {
    background: white;
}

a {
  color: #707070;
}


h2 a {
  color: #333333;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

[data-ma-theme="indigo"] main {
  background: white;
}

[data-ma-theme="indigo"] header.header {
  background-color: var(--primary-color);
}

.welcome-header {
  font-weight: 200;
  margin-bottom: 20px;
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color); }
  .btn-primary, .btn-primary:focus {
    color: #FFFFFF; }
  .btn-primary:hover {
    color: #FFFFFF;
    background-color: var(--darker-color);
    border-color: var(--darker-color); }
  .btn-primary.disabled, .btn-primary:disabled {
    background-color: #2196F3;
    border-color: #2196F3; }
  .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
    color: #FFFFFF;
    background-color: var(--darker-color);
    background-image: none;
    border-color: var(--darker-color); }

.btn.btn-secondary {
  background-color: #FFFFFF;
  color: var(--secondary-color);
  border-color: var(--secondary-color); }
  .btn-secondary, .btn-secondary:focus {
    color: var(--darker-color);
    background-color: #f7f7f7;
    border-color: var(--darker-color); }
  .btn-secondary:hover {
    color: var(--darker-color);
    background-color: #f7f7f7;
    border-color: var(--darker-color); }
  .btn-secondary.disabled, .btn-secondary:disabled {
    background-color: #FFFFFF;
    border-color: var(--lighter-color); }
  .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle {
    color: var(--primary-color);
    background-color: #f7f7f7;
    background-image: none;
    border-color: var(--primary-color); }

.card-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color); }

.card-secondary {
  background-color: var(--primary-color);
  border-color: var(--primary-color); }

/* AUCTIONS */
/* This customizes data-columns for our needs, uses salvattore,  for more visit salvattore.com */
/* warning: does NOT work with "1of4" update js if solved https://github.com/rnmp/salvattore/issues/96 */

.tokens [data-columns]::after {
  display: block;
  content: "";
  clear: both; }
@media (min-width: 1500px) {
  .tokens [data-columns]:before {
    content: '3 .column.size-1of3'; } }
@media (min-width: 768px) {
  .tokens [data-columns] {
    margin: 0 -15px; }
    .tokens [data-columns] .column {
      padding: 0 15px; } }
@media (min-width: 768px) and (max-width: 1499px) {
  .tokens [data-columns]:before {
    content: '3 .column.size-1of3'; } }
@media screen and (max-width: 767px) {
  .tokens [data-columns] {
    margin: 0 -10px; }
    .tokens [data-columns] .column {
      padding: 0 10px; }
    .tokens [data-columns]:before {
      content: '2 .column.size-1of2'; } }
@media screen and (max-width: 600px) {
  .tokens [data-columns] {
    margin: 0 -10px; }
    .tokens [data-columns] .column {
      padding: 0 10px; }
    .tokens [data-columns]:before {
      content: '1 .column.size-1of1'; } }
@media (min-width: 768px) { 
  #advanced-search-div { display: none; } }


.tokens .token {
  height: 400px;
  box-shadow: 0 4px 110px 0 rgba(52,54,68,0.1);
  background: white;
}

.tokens .token-image {
  width: 100%;
  height: 180px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.tokens .token .tint {
  position: relative;
}
.tint::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: block;
  content: '';
  opacity: .8;
  border-radius: 4px;
  background: #777;
}

.tokens .token .fake-coverphoto {
  height: 180px;
}

.status-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  max-width: 90px;
  height: 23px;
  padding: 0 8px;
  border: 1px solid;
  border-radius: 2px;
  object-fit: contain;
}

.status-badge::after {
  font-size: 10px;
  font-weight: bold;
  line-height: 2.2;
  display: block;
  margin: 0 auto;
  text-align: center;
  color: green;
}

.status-badge[data-token-status='ACTIVE'] {
  border-color: #1aac75;
  background-color: #d6fef0;
}
.status-badge[data-token-status='UPCOMING'] {
  border-color: white;
  background-color: rgba(246, 246, 255, 0.4);
}
.status-badge[data-token-status='ACTIVE']::after,
.status-badge[data-token-status='UPCOMING']::after {
  content: attr(data-token-status);
}

.status-badge[data-token-status='UPCOMING']::after {
  color: white;
}

.card-bottom {
  padding: 2em;
}

.bottom-part-wrapper {
  position: absolute;
  width: 90%;
  left: 5%;
  bottom: 1em;
}

.button-wrapper a.btn-block {
  bottom: 1em;
}

.title, .description {
  margin-top: 1em;
}
/* AUCTIONS END */

.newsletter {
  margin: 2em 0;
}

.newsletter .confirmation-message {
  display: none;
}

.avatar-wrapper canvas, #user-avatar canvas {
  margin-right: 0.5em;
  margin-left: 0.5em;
  border-radius: 50%;
}
.top-nav li a.top-link-button {
  position: relative;
  display: inline;
  bottom: 9px;
  left: 5px;
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}

@media(max-width: 1023px) { [top-links-hidden-mobile] { display: none; } }

// PROFILE HTML
.profile-card {
  box-shadow:0 4px 110px 0 rgba(52,54,68,0.1);
  background:white;
}

.other-accounts, .my-accounts {
  display: none;
}
.other-accounts.displayed,  .my-accounts.displayed {
  display: table;
}
#user-avatar {
  margin-top: 1em;
}

.profile-details {
  display: table;
  margin-top: 0.5em;
}

.profile-details div {
  display: table-cell;
}

#my-profile-form {
  padding-left: 1em;
  padding-right: 0.5em;
}

#user-avatar span, #my-profile-form {
  bottom: 0.75em;
  position: relative;
}

#user-name-box {
  display: none;
  margin-top: 5em;
}

#user-name-box.show {
  display: block;
}

#user-name-box a {
  color: var(--secondary-color);
}


.top-nav > li {
  padding: 10px;
}

.top-nav > li > a {
  font-weight: bold;
}

.top-nav > li > a:hover {
  background: none;
}

.footer__nav .nav-link + .nav-link:before{
  top: -2.25em;
}

.footer__nav .nav-link .zmdi::before {
  font-size: 2.0em;
}
li.avatar-wrapper {
  display: none;
}

li.avatar-wrapper.show {
  display: inline-block;
}

.avatar-wrapper canvas {
  top: 10px;
  position: relative;
  right: 0px;
}

.card-with-item-list-limited { height: 162px; position: relative; overflow: hidden; }
.card-with-item-list-full { height: auto; position: relative; overflow: hidden;  }

.limited-paragraph {
  max-height: 97px;
  padding-right: 7px;
  overflow: hidden;
}

.trivialembed {
  font-family: "Roboto";
  margin-bottom: none;
}


.card-with-item-list-limited { height: auto; max-height: 162px; }
.card-with-item-list-full { height: auto;  }

[more-button], [less-button] { position: absolute; bottom: 10px; right: 10px; cursor: pointer; display: none; }
.button-add { background-color: var(--primary-color) ! important; right: -12px ! important; }
.addr-list { padding: 5px; padding-right: 25px; }
.addr-box { padding-top: 9px; padding-bottom: 10px; }
@media(min-width: 768px) { .addr-box > p { padding-top: 9px; padding-bottom: 9px; } }

.local-storage-info { width: 100%; text-align: center; text-transform: uppercase; font-size: 0.9em; }
@media (max-width: 767px) { .local-storage-info { text-align: left; } }

[saved-addresses] .card-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.badge { cursor: pointer; }
.badge-default { background-color: #cccccc; }
.badge-primary { background-color: var(--primary-color); }

[more-categories-button] { padding-left: 10px; padding-right: 10px; cursor: pointer; }

.category-badges {
  padding-top: 10px;
  line-height: 2.2;
}
.category-badges .badge {
  font-size: 1.09em;
}
@media (max-width: 767px) {
  .category-badges { line-height: 2.6; }
  .category-badges .badge { padding-top: 8px; padding-bottom: 8px; }
  #link-list .icon-list { line-height: 2.6; }
}
.badge-hidden { display: none; }

[button-token-add] {
  position: absolute; right: 10px; bottom: 10px; width: 25px; height: 25px;
  line-height: 25px; font-size: 15px;
}

.token-box { padding-top: 10px; }
[no-news-info] { display: none; margin-bottom: 0px; }
.tx-description a { text-decoration: dotted underline; }
[feed-of-news] div:nth-child(n+20) { display: none; }
[feed-of-news] div.additional-news { display: block; }
[more-news-button] { width: 100%; text-align: center; cursor: pointer; }

.tabs-menu { display: none; font-size: 1.3em; margin-bottom: 15px; }
@media(max-width: 767px) {
  .tabs-menu { display: block; }
  .hide-on-mobile { display: none; }
}
[news-tokens-menu], [profile-areas-menu] { text-align: center; }

.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tabs-menu .badge { padding: 10px; }
.tabs-menu { line-height: 2.5em; margin-top: -17px; }

[similar-users-results] .addr-list:hover { background-color: #f2f2f2; }
[token-list-elem]:hover, [data-transaction]:hover { background-color: #f2f2f2; }

.button-off { background-color: #cccccc; }
.button-on { background-color: var(--primary-color); }

[add-as-favorite-token] {
  position: absolute ! important; right: 20px ! important; bottom: 50px ! important; width: 35px; height: 35px;
  line-height: 35px; font-size: 20px;
}

.label-selected { background-color: var(--primary-color) ! important; }

[top-holders].limit-results-top-holders [holder-row]:nth-child(n+5):nth-child(-n+21) { display: none; }

[tokens-table] thead th:nth-child(n+3) { padding-left: 0px; }

.zmdi-close { filter: sepia() saturate(10000%) hue-rotate(20deg); }
.zmdi-check { filter: sepia() saturate(10000%) hue-rotate(150deg); }

[news-item] { font-size: 1.2rem; }