ore1

#transportDetailsPage {
  color: $positive;

  .spacer {
    display: block;
    width: 100%;
    height: 0;
  }

  h4 {
    color: $positive;
    margin: 10px -10px 0 -10px;
    padding: 0 20px 10px 20px;
    border-bottom: 1px solid $positive;
  }

  .margin-bottom {
    margin-bottom: 10px;
  }

  .font-bold {
    font-weight: 500;
  }

  .row {
    padding-left: 15px;
    padding-right: 15px;

    &:last-child {
      padding-left: 5px;
      padding-right: 5px;
    }
  }
}

----

<ion-view title="UNLOAD" id="transportDetailsPage" hide-tabs>
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button></ion-nav-back-button>
  </ion-nav-bar>
  <ion-content padding="true" class="has-header">

    <h4>MMHBS1-0043</h4>

    <span class="spacer"></span>

    <div class="row">
      <div class="col">Planned dock:</div>
      <div class="col font-bold text-right">B76</div>
    </div>
    <div class="row">
      <div class="col">Assigned to:</div>
      <div class="col font-bold text-right">John Doe</div>
    </div>
    <div class="row">
      <div class="col">Handling date:</div>
      <div class="col font-bold text-right">2017-05-06</div>
    </div>
    <div class="row">
      <div class="col">Handling time:</div>
      <div class="col font-bold text-right">08:00</div>
    </div>

    <span class="spacer"></span>

    <div class="row">
      <div class="col">Handling status:</div>
      <div class="col font-bold text-right">STARTED</div>
    </div>
    <div class="row">
      <div class="col">Handling time:</div>
      <div class="col font-bold text-right">00:32</div>
    </div>

    <span class="spacer"></span>

    <div class="row">
      <div class="col">Traffic:</div>
      <div class="col font-bold text-right">MMHBS1</div>
    </div>
    <div class="row">
      <div class="col">Equipment:</div>
      <div class="col font-bold text-right">DSVA7301437<br />DSVA7301437</div>
    </div>

    <h4>Total:</h4>

    <div class="row font-bold text-right">
      <div class="col">19 itm</div>
      <div class="col">15.317 kg</div>
      <div class="col">20.3 m&#179;</div>
      <div class="col">11.7 idm</div>
    </div>
    <div class="row font-bold text-right">
      <div class="col">19 itm</div>
      <div class="col">15.317 kg</div>
      <div class="col">20.3 m&#179;</div>
      <div class="col">11.7 idm</div>
    </div>

    <h4>Transport remarks:</h4>

    <div class="row margin-bottom">
      <div class="col">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </div>
    </div>
  </ion-content>
</ion-view>