.items-wrapper {
  display: flex;
  flex-direction: column;
  .items-header {
    display: flex;
    align-items: flex-end;
    .header {
      flex-basis: 15%;
      background-color: #F3F2F3;
      text-align: center;
      font-size: .875rem;
      font-weight: 550;
      padding: .5rem;
      height: 40px;
      border-right: 1px solid gainsboro;
      &.category {
        border-top-left-radius: 3px;
        padding-left: 1rem;
        flex-basis: 20%;
      }
      &.items {
        border-top-left-radius: 3px;
        padding-left: 1rem;
        flex-basis: 25%;
      }
      &.left {
        border-top-left-radius: 3px;
        padding-left: 1rem;
        flex-basis: 45%;
      }
      &.right {
        border-top-right-radius: 3px;
        border-right: none;
      }
    }
    .action {
      flex-basis: 10%;
      height: 40px;
      padding: .5rem;
    }
  }
  .items-list {
    display: flex;
    flex-direction: column;
    .items-row {
      display: flex;
      .row-area {
        height: 50px;
        flex-basis: 15%;
        padding: .75rem;
        text-align: center;
        &.category {
          padding-left: 1rem;
          flex-basis: 20%;
        }
        &.items {
          padding-left: 1rem;
          flex-basis: 25%;
        }
        &.right {
          padding-right: .5rem;
          flex-basis: 10%;
        }
        &.text {
          text-align: left;
        } 
      }
    }
  }
  .totals-line {
    display: flex;
    margin-top: 1rem;
    padding-top: 1rem;
    font-weight: 550;
    font-size: .875rem;
    border-top: 1px solid gainsboro;
    .total {
      &.add-item {
        flex-basis: 45%;
        margin-left: 1rem;
      }
      &.total-units {
        flex-basis: 16%;
        text-align: center;
        margin-right: 1rem;
      }
      &.total-value {
        flex-basis: 39%;
        text-align: center;
      }
    }
  }
}

.padding-2rem {
  padding-bottom: 2rem;
}