.ContractDetailsScreen {

  .ContractDetailsBody {
    .Title {
      border: solid var(--app-card-default-border);
      border-width: 1px 0;
      h2 {
        margin: 18px;
      }
    }

    .Waiting {
      margin: 1rem 0;
    }
  }

  .DecodeError {
    padding: 28px 18px;
    background: var(--app-card-default-background);
    text-align: center;

    div {
      margin-top: 10px;
    }
  }

  .react-json-view .pretty-json-container {
    // TODO-DAVID: there are now a couple of `padding: 28px 18px;` in this file and other places too, maybe
    // this should be abstracted out as a global class?
    padding: 28px 18px;
    background: var(--app-card-default-background);
  }

  .TxList > a.Link:last-child > .MiniTxCard{
    // the last transaction in the transactions list shouldn't have a border
    // because the next section starts with a border
    border-bottom:0;
  }

  .ContractInfoBody {
    padding: 28px 18px;
    background: var(--app-card-default-background);

    .data {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 1rem;
    }
      
    .label {
      font-size: 0.75rem;
      font-family: "RobotoCondensed-Regular";
      font-weight: 800;
      color: var(--app-card-label);
    }
    
    .value {
      font-size: .875rem;
      font-family: "Fira Code Regular";
      color: var(--app-card-value);
      word-break: break-all;
    }
  }
}