.order-summary-container {
  min-width: 200px;
  @include media-breakpoint-down(md) {
    margin-top: 20px;
    margin-left: 15px;
    width: 340px;
  }
  @include media-breakpoint-down(sm) {
    margin-top: 20px;
    margin-left: 15px;
    width: 340px;
  }

}

.order-summary-content, .order-summary-promo {
  margin-top: 0px;
  margin-left: 0px;
  margin-bottom: 20px;
  padding-top: 0px;
  padding-left: 0px;
  font-size: $order-review-font-size;
  .row {
    padding-bottom: 5px;
  }
}

.order-summary-promo-container {
  background: $white;
  padding-left: 0px;
  margin-left: 0px;
  margin-top: 0px;
}

.order-summary-promo {
  padding-bottom: 15px;
  padding-right: 15px;
  @include media-breakpoint-down(xl) {
    .col-xl-3 {
      padding-left: 0px;
    }
  }
  @include media-breakpoint-down(lg) {
    .col-xl-3 {
      padding-top: 5px;
      padding-left: 15px;
    }
  }
  .input::placeholder {
    font-size: $order-placeholder-font-size;
  }
}

.btn-continue {
  width: 100%;
  color: $white;
  background: $primary;
}

.order-summary-header {
  .rectangle{
    min-width:                $order-summary-rectangle-size;
    min-height:                $order-summary-rectangle-size;
    background-color:             $primary;
    display:                inline-block;
    line-height:                          $order-summary-icon-line-height;
    text-align:                         center;
    .fa-icon {
      width:                $order-summary-icon-size;
      height:                $order-summary-icon-size;
      color:                 $white;
      vertical-align:           middle;
    }
  }

  .order-summary-title {
    @extend  .my-2 ;
    font-size: $font-size-base * 1.1;
    color: $primary;
    align-items: center;
    font-weight: bold;
    @include media-breakpoint-down(xl) {
      padding-left: 0px;
      max-width: 100%;
    }
    @include media-breakpoint-down(lg) {
      padding-left: 10px;
      max-width: 50%;
    }
    @include media-breakpoint-down(md) {
      padding-left: 0px;
      max-width: 100%;
    }
  }
}

.order-summary-gradient {
  border: none;
  background: $order-review-gradient-start-color;
  background: linear-gradient( 'to right',
          $order-review-gradient-start-color 0%,
          $order-review-gradient-end-color 100% );
  background: -webkit-linear-gradient( right,
          $order-review-gradient-start-color 0%,
          $order-review-gradient-end-color 100% );
  background: -moz-linear-gradient( right,
          $order-review-gradient-start-color 0%,
          $order-review-gradient-end-color 100% );
  box-shadow: $order-review-home-box-shadow;
}

