Gallery Back to Gallery

Bitcoin Dashboard

 

Home

 

Account

 

History

 

Logout

BTC Value History

Select BTC Address

Email

History Overview

DATE

BTC ADRESS

Oct 9, 2021 11:45AM

1F1tAaz5x1HUXrCNLbtMDqcw6o5gNn4xqX

Oct 20th, 2021 11:45AM

1BKUbrsmMnxno9GFcLw9paB2Y7eaNiZVXR

Oct 20th, 2021 11:45AM

7d44ee08bdde342021113913db2dbad

Oct 9, 2021 11:45AM

1F1tAaz5x1HUXrCNLbtMDqcw605GNn4xqX

Oct 20th, 2021 11:45AM

1PMAwY6uJj8wWLZz4txQ8FKErMXcdq6dtj

© 2020 BTC Dashboard. All rights reserved.

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    /* Defaults */
    :root {
      --white: #FFFFFF;
      --lightGray: #E8E9ED;
      --gray: #F5F6FA;
      --darkBlue: #3E84F9;
      --fontColor: #131C38;
      --lightFontColor: #BBC3CC;
    }

    .zc-body {
      color: var(--fontColor);
      font-family: 'Roboto', sans-serif;
      font-weight: normal;
      text-shadow: none;
    }

    /* Defaults */
    .btc {
      position: relative;
    }

    .btc .flex {
      display: flex;
    }

    .btc .flex-center {
      display: flex;
      align-items: center;
    }

    .btc .flex-around {
      justify-content: space-around;
    }

    .btc .flex-between {
      justify-content: space-between;
    }

    .btc .flex-column {
      flex-direction: column;
    }

    .btc h1 {
      margin: 1.6rem 0;
      color: var(--fontColor);
      font-size: 2rem;
      font-weight: normal;
    }

    .btc h2 {
      color: var(--fontColor);
      font-weight: normal;
    }

    .btc hr {
      margin: 0;
      width: 100%;
      border: 1px solid var(--lightGray);
    }

    .btc p {
      margin: 0;
    }

    .btc button {
      padding: 20px 40px;
      background-color: var(--darkBlue);
      color: var(--white);
      font-size: 16px;
      border-radius: 4px;
      border: none;
      box-shadow: 1px 1px 15px 2px #C2D3F8;
      cursor: pointer;
    }

    .btc header {
      width: 100%;
    }

    /* Nav */
    .btc-nav {
      background-color: var(--white);
      height: 100px;
      width: 100%;
      border-bottom: 1px solid var(--lightGray);
      z-index: 9999;
    }

    .btc-nav div {
      height: 100%;
      width: 95%;
      margin: 0 auto;
    }

    .btc-nav img {
      height: 35px;
      cursor: pointer;
    }

    /* Mobile Menu */
    .btc-mobile-menu {
      display: none;
      height: 200px;
      width: 100%;
      position: absolute;
      top: 100px;
      left: 0;
      background-color: var(--white);
      z-index: 9999;
      box-shadow: 0 2px 2px 1px var(--lightGray);
      border-top: 1px solid var(--lightGray);
    }

    .btc-mobile-menu.open {
      display: block;
    }

    .btc-mobile-menu div {
      height: 25%;
      border-bottom: 1px solid var(--lightGray);
      opacity: 0.7;
      cursor: pointer;
    }

    .btc-mobile-menu div {
      padding-left: 2rem;
    }

    .btc-mobile-menu .fa {
      margin-right: 6px;
    }

    /* Dropdown */
    .btc-dropdown {
      height: 55px;
      width: 50%;
      background-color: var(--white);
      border: 1px solid var(--lightGray);
      box-shadow: 0px 2px 2px 1px var(--lightGray);
      border-radius: 4px;
      cursor: pointer;
    }

    .btc-dropdown p,
    .btc-dropdown i {
      margin: 0;
      padding: 0 2rem;
      opacity: 0.7;
    }

    /* Main */
    .btc-content {
      background-color: var(--gray);
    }

    /* Current */
    .btc-current {
      width: 95%;
      height: 1075px;
    }

    .btc-current-header {
      width: 100%;
      height: 100px;
    }

    .btc-current-options {
      width: 100%;
      height: 100px;
    }

    .btc-current-options h2 {
      margin: 0;
    }

    .btc-current .btc-chart {
      height: 400px;
      width: 100%;
      border-radius: 4px;
      box-shadow: 0 2px 2px 1px var(--lightGray);
    }

    /* History */
    .btc-history {
      width: 95%;
      height: 700px;
    }

    /* Pill */
    .btc-pill {
      height: 76px;
      width: 100%;
      background-color: var(--white);
      border-radius: 4px;
      box-shadow: 0 2px 2px 1px var(--lightGray);
      opacity: 0.7;
      cursor: pointer;
    }

    .btc-pill:first-of-type {
      height: auto;
      background-color: transparent;
      box-shadow: none;
    }

    .btc-pill:nth-of-type(3) {
      border-left: 5px solid var(--darkBlue);
      box-shadow: 0 4px 4px 2px var(--lightGray);
    }

    .btc-pill p {
      margin: 0;
    }

    .btc-pill p:first-of-type {
      flex: 1;
      padding-left: 2rem;
    }

    .btc-pill p:nth-of-type(2) {
      flex: 1;
      padding-left: 2rem;
    }

    .btc-footer {
      height: 100px;
      opacity: 0.5;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body class="zc-body">

  <div class="btc">

    <nav class="btc-nav">
      <div class="flex-center flex-between">
        <img src="https://upload.wikimedia.org/wikipedia/commons/c/c5/Bitcoin_logo.svg">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/hamburger.svg" jsref="mobile-menu-hamburger">
      </div>
    </nav>

    <div jsref="mobile-menu" class="btc-mobile-menu">
      <div class="flex-center"><i class="fa fa-home" aria-hidden="true"></i> <p>Home</p>
      </div>
      <div class="flex-center"><i class="fa fa-user" aria-hidden="true"></i> <p>Account</p>
      </div>
      <div class="flex-center"><i class="fa fa-file-text" aria-hidden="true"></i> <p>History</p>
      </div>
      <div class="flex-center"><i class="fa fa-sign-out" aria-hidden="true"></i> <p>Logout</p>
      </div>
    </div>

    <div class="btc-content flex-center flex-column">

      <!-- Current -->
      <section class="btc-current flex flex-column flex-around">

        <div class="btc-current-header flex flex-column">
          <h1>BTC Value History</h1>
          <hr>
        </div>

        <div class="btc-current-options flex-center flex-between">
          <h2>Select BTC Address</h2>
          <div class="btc-dropdown flex-center flex-between">
            <p>Email</p>
            <i class="fa fa-chevron-down" aria-hidden="true"></i>
          </div>
          <button>Submit</button>
        </div>

        <div id="chart1" class="btc-chart">
        </div>

        <div id="chart2" class="btc-chart">
        </div>

      </section>

      <!-- History -->
      <section class="btc-history flex flex-column flex-around">

        <header>
          <h1>History Overview</h1>
          <hr>
        </header>

        <div class="flex-center flex-between btc-pill">
          <p>DATE</p>
          <p>BTC ADRESS</p>
        </div>

        <div class="flex-center flex-between btc-pill">
          <p>Oct 9, 2021 11:45AM</p>
          <p>1F1tAaz5x1HUXrCNLbtMDqcw6o5gNn4xqX</p>
        </div>

        <div class="flex-center flex-between btc-pill">
          <p>Oct 20th, 2021 11:45AM</p>
          <p>1BKUbrsmMnxno9GFcLw9paB2Y7eaNiZVXR</p>
        </div>

        <div class="flex-center flex-between btc-pill">
          <p>Oct 20th, 2021 11:45AM</p>
          <p>7d44ee08bdde342021113913db2dbad</p>
        </div>

        <div class="flex-center flex-between btc-pill">
          <p>Oct 9, 2021 11:45AM</p>
          <p>1F1tAaz5x1HUXrCNLbtMDqcw605GNn4xqX</p>
        </div>

        <div class="flex-center flex-between btc-pill">
          <p>Oct 20th, 2021 11:45AM</p>
          <p>1PMAwY6uJj8wWLZz4txQ8FKErMXcdq6dtj</p>
        </div>

      </section>

      <footer class="btc-footer flex-center">
        <p>© 2020 BTC Dashboard. All rights reserved.</p>
      </footer>

    </div>

  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE CHART LOCATIONS (IDS)
    // -----------------------------
    // Main chart render location
    let chart1Id = 'chart1';
    let chart2Id = 'chart2';

    // DOM ELEMENTS
    // -----------------------------
    let zcDemoMenu = document.querySelector('[jsref="mobile-menu-hamburger"]');
    let mobileMenu = document.querySelector('[jsref="mobile-menu"]');

    // CHART CONFIG
    // -----------------------------

    // Chart 1
    let chart1Data = {
      type: 'area',
      globals: {
        fontColor: 'var(--fontColor)',
        fontFamily: 'Roboto',
        fontSize: '16px',
      },
      title: {
        text: 'Today',
        align: 'left',
        fontColor: 'var(--fontColor)',
        fontSize: '2rem',
        fontWeight: 'normal',
        margin: '0px 0px 0px 2rem',
      },
      plot: {
        tooltip: {
          text: '$%v<br>October 13, %kl',
          backgroundColor: 'var(--white)',
          borderColor: 'var(--lightGray)',
          borderRadius: '4px',
          borderWidth: '1px',
          callout: true,
          fontColor: 'var(--fontColor)',
          padding: '24px 56px',
        },
        aspect: 'spline',
      },
      plotarea: {
        margin: '66px 66px 66px 66px',
      },
      scaleX: {
        minValue: 1509120000000,
        item: {
          alpha: '0.4',
          fontSize: '16px',
        },
        lineWidth: '0px',
        step: '3hour',
        tick: {
          visible: false,
        },
        timeZone: 0,
        transform: {
          type: 'date',
          all: '%h:%i',
        },
        utf: true,
      },
      scaleY: {
        values: '5500:5800:100',
        guide: {
          lineColor: 'var(--gray)',
          lineStyle: 'solid',
        },
        item: {
          alpha: '0.4',
          fontSize: '16px',
        },
        lineWidth: '0px',
        tick: {
          visible: false,
        },
      },
      crosshairX: {
        lineColor: 'var(--darkBlue)',
        lineWidth: '3px',
        marker: {
          type: 'circle',
          backgroundColor: 'transparent',
          borderColor: 'var(--darkBlue)',
          borderWidth: '3px',
          borderWidth: '3px',
          size: 15,
        },
        plotLabel: {
          text: ' ',
          backgroundColor: 'transparent',
          borderColor: 'transparent',
          borderWidth: '0px',
          fontColor: 'transparent',
        },
        scaleLabel: {
          visible: false,
        },
      },
      series: [{
        values: [5600, 5650, 5625, 5800, 5650, 5750, 5675, 5750, 5700, 5725],
        alpha: '0.7',
        backgroundColor: '#3E84F9 #fff',
        lineColor: 'var(--darkBlue)',
        lineWidth: '3px',
        marker: {
          visible: false,
        },
      }, ],
    };

    // Chart 2
    let chart2Data = {
      type: 'nestedpie',
      globals: {
        fontFamily: 'Roboto',
      },
      title: {
        text: 'Todays History',
        align: 'left',
        fontColor: 'var(--fontColor)',
        fontSize: '2rem',
        fontWeight: 'normal',
        margin: '0px 0px 0px 2rem',
      },
      legend: {
        align: 'center',
        borderWidth: '0px',
        item: {
          fontSize: '16px',
        },
        marker: {
          type: 'circle',
        },
        verticalAlign: 'bottom',
      },
      plot: {
        tooltip: {
          visible: false,
        },
        bandSpace: 25,
        sliceStart: '35%',
      },
      series: [{
          text: 'Todays Lowest Rate',
          values: [20, 50, 20],
          backgroundColor: '#FF4484',
          borderWidth: '0px',
          shadow: false,
        },
        {
          text: 'Todays Opening',
          values: [30, 40, 30],
          backgroundColor: '#3E85F7',
          borderWidth: '0px',
          shadow: false,
        },
        {
          text: 'Todays Highest Rate',
          values: [30, 40, 30],
          backgroundColor: '#00CB4F',
          borderWidth: '0px',
          shadow: false,
        },
      ],
    };

    // RENDER CHARTS
    // -----------------------------

    // Chart 1
    zingchart.render({
      id: chart1Id,
      data: chart1Data,
      height: '100%',
      width: '100%',
    });

    // Chart 2
    zingchart.render({
      id: chart2Id,
      data: chart2Data,
      height: '100%',
      width: '100%',
    });

    // EVENTS
    // -----------------------------

    zcDemoMenu.addEventListener('click', addMenu);

    // HELPER FNS
    // -----------------------------

    function addMenu() {
      // Toggle mobile menu
      mobileMenu.classList.toggle('open');
      // Set dest. path
      let path =
        mobileMenu.className == 'open' ?
        'https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/x.svg' :
        'https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/hamburger.svg';
      // Add attribute
      zcDemoMenu.setAttribute('src', path);
    }
  </script>
</body>

</html>
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body class="zc-body">
  
  <div class="btc">

    <nav class="btc-nav">
      <div class="flex-center flex-between">
        <img src="https://upload.wikimedia.org/wikipedia/commons/c/c5/Bitcoin_logo.svg">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/hamburger.svg" jsref="mobile-menu-hamburger">
      </div>
    </nav>

    <div jsref="mobile-menu" class="btc-mobile-menu">
      <div class="flex-center"><i class="fa fa-home" aria-hidden="true"></i> <p>Home</p></div>
      <div class="flex-center"><i class="fa fa-user" aria-hidden="true"></i> <p>Account</p></div>
      <div class="flex-center"><i class="fa fa-file-text" aria-hidden="true"></i> <p>History</p></div>
      <div class="flex-center"><i class="fa fa-sign-out" aria-hidden="true"></i> <p>Logout</p></div>
    </div>

    <div class="btc-content flex-center flex-column">
      
      <!-- Current -->
      <section class="btc-current flex flex-column flex-around">
        
        <div class="btc-current-header flex flex-column">
          <h1>BTC Value History</h1>
          <hr>
        </div>
        
        <div class="btc-current-options flex-center flex-between">
          <h2>Select BTC Address</h2>
          <div class="btc-dropdown flex-center flex-between">
            <p>Email</p>
            <i class="fa fa-chevron-down" aria-hidden="true"></i>
          </div>
          <button>Submit</button>
        </div>
        
        <div id="chart1" class="btc-chart">
        </div>

        <div id="chart2" class="btc-chart">
        </div>
        
      </section>
      
      <!-- History -->
      <section class="btc-history flex flex-column flex-around">
        
        <header>
          <h1>History Overview</h1>
          <hr>
        </header>
        
        <div class="flex-center flex-between btc-pill">
          <p>DATE</p>
          <p>BTC ADRESS</p>
        </div>
        
        <div class="flex-center flex-between btc-pill">
          <p>Oct 9, 2021 11:45AM</p>
          <p>1F1tAaz5x1HUXrCNLbtMDqcw6o5gNn4xqX</p>
        </div>
        
        <div class="flex-center flex-between btc-pill">
          <p>Oct 20th, 2021 11:45AM</p>
          <p>1BKUbrsmMnxno9GFcLw9paB2Y7eaNiZVXR</p>
        </div>
        
        <div class="flex-center flex-between btc-pill">
          <p>Oct 20th, 2021 11:45AM</p>
          <p>7d44ee08bdde342021113913db2dbad</p>
        </div>
        
        <div class="flex-center flex-between btc-pill">
          <p>Oct 9, 2021 11:45AM</p>
          <p>1F1tAaz5x1HUXrCNLbtMDqcw605GNn4xqX</p>
        </div>
        
        <div class="flex-center flex-between btc-pill">
          <p>Oct 20th, 2021 11:45AM</p>
          <p>1PMAwY6uJj8wWLZz4txQ8FKErMXcdq6dtj</p>
        </div>
      
      </section>
      
      <footer class="btc-footer flex-center">
        <p>© 2020 BTC Dashboard. All rights reserved.</p>
      </footer>
      
    </div>

  </div>

</body>
</html>
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chart1Id = 'chart1';
let chart2Id = 'chart2';

// DOM ELEMENTS
// -----------------------------
let zcDemoMenu = document.querySelector('[jsref="mobile-menu-hamburger"]');
let mobileMenu = document.querySelector('[jsref="mobile-menu"]');

// CHART CONFIG
// -----------------------------

// Chart 1
let chart1Data = {
  type: 'area',
  globals: {
    fontColor: 'var(--fontColor)',
    fontFamily: 'Roboto',
    fontSize: '16px',
  },
  title: {
    text: 'Today',
    align: 'left',
    fontColor: 'var(--fontColor)',
    fontSize: '2rem',
    fontWeight: 'normal',
    margin: '0px 0px 0px 2rem',
  },
  plot: {
    tooltip: {
      text: '$%v<br>October 13, %kl',
      backgroundColor: 'var(--white)',
      borderColor: 'var(--lightGray)',
      borderRadius: '4px',
      borderWidth: '1px',
      callout: true,
      fontColor: 'var(--fontColor)',
      padding: '24px 56px',
    },
    aspect: 'spline',
  },
  plotarea: {
    margin: '66px 66px 66px 66px',
  },
  scaleX: {
    minValue: 1509120000000,
    item: {
      alpha: '0.4',
      fontSize: '16px',
    },
    lineWidth: '0px',
    step: '3hour',
    tick: {
      visible: false,
    },
    timeZone: 0,
    transform: {
      type: 'date',
      all: '%h:%i',
    },
    utf: true,
  },
  scaleY: {
    values: '5500:5800:100',
    guide: {
      lineColor: 'var(--gray)',
      lineStyle: 'solid',
    },
    item: {
      alpha: '0.4',
      fontSize: '16px',
    },
    lineWidth: '0px',
    tick: {
      visible: false,
    },
  },
  crosshairX: {
    lineColor: 'var(--darkBlue)',
    lineWidth: '3px',
    marker: {
      type: 'circle',
      backgroundColor: 'transparent',
      borderColor: 'var(--darkBlue)',
      borderWidth: '3px',
      borderWidth: '3px',
      size: 15,
    },
    plotLabel: {
      text: ' ',
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      borderWidth: '0px',
      fontColor: 'transparent',
    },
    scaleLabel: {
      visible: false,
    },
  },
  series: [
    {
      values: [5600, 5650, 5625, 5800, 5650, 5750, 5675, 5750, 5700, 5725],
      alpha: '0.7',
      backgroundColor: '#3E84F9 #fff',
      lineColor: 'var(--darkBlue)',
      lineWidth: '3px',
      marker: {
        visible: false,
      },
    },
  ],
};

// Chart 2
let chart2Data = {
  type: 'nestedpie',
  globals: {
    fontFamily: 'Roboto',
  },
  title: {
    text: 'Todays History',
    align: 'left',
    fontColor: 'var(--fontColor)',
    fontSize: '2rem',
    fontWeight: 'normal',
    margin: '0px 0px 0px 2rem',
  },
  legend: {
    align: 'center',
    borderWidth: '0px',
    item: {
      fontSize: '16px',
    },
    marker: {
      type: 'circle',
    },
    verticalAlign: 'bottom',
  },
  plot: {
    tooltip: {
      visible: false,
    },
    bandSpace: 25,
    sliceStart: '35%',
  },
  series: [
    {
      text: 'Todays Lowest Rate',
      values: [20, 50, 20],
      backgroundColor: '#FF4484',
      borderWidth: '0px',
      shadow: false,
    },
    {
      text: 'Todays Opening',
      values: [30, 40, 30],
      backgroundColor: '#3E85F7',
      borderWidth: '0px',
      shadow: false,
    },
    {
      text: 'Todays Highest Rate',
      values: [30, 40, 30],
      backgroundColor: '#00CB4F',
      borderWidth: '0px',
      shadow: false,
    },
  ],
};

// RENDER CHARTS
// -----------------------------

// Chart 1
zingchart.render({
  id: chart1Id,
  data: chart1Data,
  height: '100%',
  width: '100%',
});

// Chart 2
zingchart.render({
  id: chart2Id,
  data: chart2Data,
  height: '100%',
  width: '100%',
});

// EVENTS
// -----------------------------

zcDemoMenu.addEventListener('click', addMenu);

// HELPER FNS
// -----------------------------

function addMenu() {
  // Toggle mobile menu
  mobileMenu.classList.toggle('open');
  // Set dest. path
  let path =
    mobileMenu.className == 'open'
      ? 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/x.svg'
      : 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/hamburger.svg';
  // Add attribute
  zcDemoMenu.setAttribute('src', path);
}
/* Defaults */
:root {
  --white: #FFFFFF;
  --lightGray: #E8E9ED;
  --gray: #F5F6FA;
  --darkBlue: #3E84F9;
  --fontColor: #131C38;
  --lightFontColor: #BBC3CC;
}

.zc-body {
  color: var(--fontColor);
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  text-shadow: none;
}

/* Defaults */
.btc { position:relative; }
.btc .flex { display:flex; }
.btc .flex-center { display:flex; align-items:center; }
.btc .flex-around { justify-content:space-around; }
.btc .flex-between { justify-content:space-between; }
.btc .flex-column { flex-direction:column; }
.btc h1 { margin:1.6rem 0; color: var(--fontColor); font-size:2rem; font-weight:normal; }
.btc h2 { color: var(--fontColor); font-weight:normal; }
.btc hr { margin:0; width:100%; border:1px solid var(--lightGray); }
.btc p { margin:0; }
.btc button {
  padding: 20px 40px;
  background-color: var(--darkBlue);
  color: var(--white);
  font-size: 16px;
  border-radius: 4px;
  border: none;
  box-shadow: 1px 1px 15px 2px #C2D3F8;
  cursor: pointer;
}
.btc header { width:100%; }

/* Nav */
.btc-nav {
  background-color: var(--white);
  height: 100px;
  width: 100%;
  border-bottom: 1px solid var(--lightGray);
  z-index: 9999;
}
.btc-nav div { height:100%; width:95%; margin:0 auto; }
.btc-nav img { height:35px; cursor:pointer; }

/* Mobile Menu */
.btc-mobile-menu {
  display: none;
  height: 200px;
  width: 100%;
  position: absolute;
  top: 100px;
  left: 0;
  background-color: var(--white);
  z-index: 9999;
  box-shadow: 0 2px 2px 1px var(--lightGray);
  border-top: 1px solid var(--lightGray);
}
.btc-mobile-menu.open {
  display: block;
}
.btc-mobile-menu div {
  height: 25%;
  border-bottom: 1px solid var(--lightGray);
  opacity: 0.7;
  cursor: pointer;
}
.btc-mobile-menu div {
  padding-left: 2rem;
}
.btc-mobile-menu .fa { margin-right:6px; }

/* Dropdown */
.btc-dropdown {
  height: 55px;
  width: 50%;
  background-color: var(--white);
  border: 1px solid var(--lightGray);
  box-shadow: 0px 2px 2px 1px var(--lightGray);
  border-radius: 4px;
  cursor: pointer;
}
.btc-dropdown p, .btc-dropdown i { margin:0; padding:0 2rem; opacity:0.7; }

/* Main */
.btc-content { background-color:var(--gray); }

/* Current */
.btc-current { width:95%; height:1075px; }
.btc-current-header { width:100%; height:100px; }
.btc-current-options { width:100%; height:100px; }
.btc-current-options h2 { margin:0; }
.btc-current .btc-chart { height:400px; width:100%; border-radius:4px; box-shadow:0 2px 2px 1px var(--lightGray); }

/* History */
.btc-history { width:95%; height:700px; }

/* Pill */
.btc-pill {
  height: 76px;
  width: 100%;
  background-color: var(--white);
  border-radius: 4px;
  box-shadow: 0 2px 2px 1px var(--lightGray);
  opacity: 0.7;
  cursor: pointer;
}
.btc-pill:first-of-type { height:auto; background-color:transparent; box-shadow:none; }
.btc-pill:nth-of-type(3) { border-left:5px solid var(--darkBlue); box-shadow:0 4px 4px 2px var(--lightGray); }
.btc-pill p { margin:0; }
.btc-pill p:first-of-type { flex:1; padding-left:2rem; }
.btc-pill p:nth-of-type(2) { flex:1; padding-left:2rem; }

.btc-footer { height:100px; opacity:0.5; }

.zc-ref { display:none; }
Delivery Dashboard 34/275 Real Estate Dashboard

Related Documentation: