
 <div class="wrapper">
    <div class="panel">
      <div class="panel-header">
        <h3 class="title">Statistics</h3>

        <div class="routes">
          <span>Route X</span>
        </div>
      </div>

      <div class="panel-body">
        <div class="categories">
          <div class="category">
            <span>kilometers traveled</span>
            <span>2 Km</span>
          </div>
          <div class="category">
            <span>traveled time</span>
            <span>2 min</span>
          </div>
          
        </div>

        <div class="chart">
          <div class="operating-systems">
           
          </div>
        </div>
      </div>
    </div>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<style>
* {
  box-sizing: border-box;
}
 
html, body {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto', sans-serif;
  background: #d4d1d1;
  overflow: hidden;
}

.panel {
  width: 300px;
  height: 400px;
  background: #e68a43;
  box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.10);
  border-radius: 6px;
  overflow: hidden;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  height: 60px;
  background: rgb(241, 239, 239);
}
 
.title {
  color: #5E6977;
  font-weight: 500;
}
 
.panel-body {
  display: flex;
  height: 340px;
}
.categories {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-basis: 25%;
  padding: 39px 0px 41px 26px;
}
.category {
  display: flex;
  flex-direction: column;
}
.category span:first-child {
  font-weight: 300;
  font-size: 14px;
  opacity: 0.6;
  color: #fff;
  margin-bottom: 6px;
}
.category span:last-child {
  font-size: 32px;
  font-weight: 300;
  color: #fff;
}
.chart {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 2;
  position: relative;
}
 
.operating-systems {
  display: flex;
  justify-content: space-between;
  width: 215px;
  margin-top: 30px;
  margin-bottom: 50px;
}

.android-os span {
  background: #80B354;
}
.ios-os span {
  background: #F5A623;
}
.windows-os span {
  background: #F8E71C;
}
.calendar-views span:hover {
  border: 2px solid #BDC6CF;
  cursor: pointer;
  border-radius: 15px;
}

</style>






