.nw-totalpayable-wrapper {
  margin: 0 -15px 16px;
  padding: 15px;
  background: $checkout-totalpayable-background;
  font-size: $font-size-xs;
  font-family: $primary-font-family;
  font-weight: 600;
  @media screen and (min-width: $screen-min-sm) {
    margin: 0  0 20px;
    padding: 0;
    background: $checkout-totalpayable-background-desktop;
  }
}

.nw-totalpayable-row {
  margin-bottom: 12px;
  font-size: $paymentview-subtitle-fontsize;
  font-family: $secondary-font-family;
  @media screen and (min-width: $screen-min-sm) {
    margin-bottom: 14px;
    font-size: $paymentview-subtitle-fontsize-desktop;
    line-height: 24px;
  }
}

.nw-totalpayable-header {
  margin: 0;
  font-family: $secondary-font-family;
}

.nw-totalpayable-text {
  text-transform: uppercase;
}

.nw-totalpayable-valuespan {
  float: right;
  white-space: nowrap;
  @media screen and (min-width: $screen-min-sm) {
    float: none;
  }
}

.nw-totalpayable-icon {
  margin-right: 10px;
}

.nw-totalpayable-col {
  display: flex;
}