#order-container {
  min-width: 100%;
  font-size: $order-review-font-size;

  .form-control {
    font-size: $order-review-font-size;
  }

  .collpoint-details {
    border:                                                   solid 2px #ddd;
  }

  .container-fluid {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .order-review-step {
    @extend  .my-3 ;
    @extend  .mx-0 ;
    padding:                 0px;
    max-width:                $order-review-icon-size;
    max-height:                $order-review-icon-size;

    .circle-title {
      color:                 $order-circle-title-color;
      white-space:             nowrap;
      @include media-breakpoint-down(md) {
        white-space:            normal;
      }
    }

    .fa-icon {
      border-radius:            100%;
      border:               2px solid $gray-400;
      vertical-align:           top;
      width:                $order-review-icon-size;
      height:                $order-review-icon-size;
    }
  }

  .active-step {
    @extend  .my-3 ;
    @extend  .mx-0 ;
    .circle-title {
      color:                   $primary !important;
      white-space:             nowrap;
      @include media-breakpoint-down(md) {
        white-space:            normal;
      }
    }

    .fa-icon {
      background: $primary;
      color:                   $white;
      border-radius:            100%;
      border:               2px solid $primary;
      vertical-align:             top;
      width:                  $order-review-icon-size;
      height:                  $order-review-icon-size;
    }
  }

  .line-step {
    display:                   block;
    background:                 $gray-400;
    border:                   1px solid $gray-400;
    width:                     10%;
    height:                   1px;
    margin-top:                 $order-line-step-m-t;
  }

  .order-link-title {
    font-size: $order-shipping-modal-font-size;
    color: $primary;
    .custom-control {
      .custom-control-label {
        cursor: pointer;
      }
    }
    .fa-icon {
      color:                   $primary;
      border-radius:            100%;
      min-width:                25px;
      min-height:                25px;
      vertical-align: middle;
    }
  }
}

.order-review-container {
  @include media-breakpoint-down(lg) {
  }
  @include media-breakpoint-down(md) {
  }
  @include media-breakpoint-down(sm) {
    min-width: 740px;
  }

  .order-review-step-container {
    @include media-breakpoint-down(md) {
      min-width: 660px;
    }
  }
}

.order-shipping-container, .order-payment-container, .order-completed-container {
  padding: 0px;
  background: $white;
  .custom-select {
    $caret : url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.62 7.81'%3E%3Cpath fill='#{$gray-500}' d='M6.81,7.81a1,1,0,0,1-.71-.29L.29,1.71A1,1,0,1,1,1.71.29L6.81,5.4,11.92.29a1,1,0,0,1,1.41,1.41L7.52,7.52A1,1,0,0,1,6.81,7.81Z'/%3E%3C/svg%3E");
    background-image: $caret !important;
    border-radius: 0px;
    height: calc(2rem) !important;
    cursor: pointer;
  }
  .is-danger {
    color: red;
    border-color: red;
  }
}

input {
  border-radius: 0;
}

.order-completed-container {
  min-width: 700px;
}

.order-confirmation-container {
  background: $white;
}
.order-confirmation-note, .order-confirmation-footer {
  @extend  .col-12 ;
  @extend  .col-xl-12 ;
  @extend  .col-lg-10 ;
  @extend  .col-md-7 ;
  @extend  .col-sm-7 ;
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
  font-size: $order-small-font-size;
  color: $order-item-color;
  .order-confirmation-note-content {
    font-size: $order-table-font-size;
    .div.col {
      padding-left: 0px !important;
      margin-left: 0px;
    }
  }
  .order-lbl {
    @include media-breakpoint-down(sm) {
      max-width: 250px;
    }
  }
  h6 {
    font-size: $order-balance-font-size;
  }
  .order-confirmation-label {
    padding-top: 10px;
  }
}

.order-confirmation-note {
  padding-bottom: 0px;
}

.radio-form-container {
  border: 1px solid $gray-400;
  opacity: 1;
  overflow: hidden;
}

.green-confirmation-header {
  padding-top: 20px;
  padding-left: 20px;
  @extend  .my-4 ;
  color: $green;
  display: flex;
  align-items: center;
  @include media-breakpoint-down(sm) {
    max-width: 250px !important;
  }
  .fa-icon {
    min-width: 50px;
    min-height: 50px;
  }
}

.ewallet-payment {
  color: $green;
  font-weight: bold;
}

.order-confirmation-table {
  .order-table-header {
    color:                 $order-table-header-color;
    font-size: $order-review-font-size;
  }
  .table thead th {
    font-size: $order-table-font-size !important;
  }

  .order-table-item-style {
    font-size: $order-review-font-size;
    font-weight:             normal;
    vertical-align:                     middle;
  }

  .order-table-item-center-style {
    font-size: $order-review-font-size;
    text-align:                         center;
    vertical-align:                     middle;
  }

  .order-table-item-amount {
    font-size: $order-review-font-size;
    text-align:                         right;
    vertical-align:                     middle;
  }
}

.empty-line {
  width: 100%;
  margin-top: 20px;
  display:                   block;
  background:                 $gray-100;
  height:                    10px;
}

.required {
  &:after {
    content: ' *';
    color: $red;
  }
}

.order-red-star {
  content: '*';
  color: $red;
}

.red-message, .small-red-message {
  color: red;
}

.small-red-message {
  @extend  .py-2 ;
  padding-left: 20px;
  font-size: $order-review-font-size;
  &:before {
    content: "* ";
  }
}

.blue-message {
  color: $primary;
}

.note-message {
  font-size: $order-small-font-size;
}

.order-item-table {
  background: $white;
  padding: 0px;
  .order-table-header {
    color:                 $order-table-header-color;
  }
  .table tr {
    border-bottom: 1px solid $gray-400;
  }
  .table thead th {
    font-weight:             normal;
    vertical-align:           middle;
    font-size: $order-table-font-size !important;
  }

  .order-table-item-style {
    font-size: $order-review-font-size;
    vertical-align:                     middle;
  }

  .order-table-item-center-style {
    font-size: $order-review-font-size;
    text-align:                         center;
    vertical-align:                     middle;
  }

  .order-table-item-amount {
    font-size: $order-review-font-size;
    text-align:                         right;
    vertical-align:                     middle;
  }
}

.order-table-row {
  color:                 $order-table-row-color;
  font-size:               $order-table-font-size;
}

.order-table-normal-style {
  border-right:             1px solid grey;
  border-left:             1px solid grey;
  text-align:                         left;
  vertical-align:                     middle;
}

.order-table-style {
  border-right:             1px solid grey;
  border-left:             1px solid grey;
  text-align:                         center;
  vertical-align:                     middle;
}

.order-item-image {
  max-width:                          $order-item-image-size;
  max-height:                         $order-item-image-size;
}

.order-shippingmethod-modal-body {
  color: $dark;
  padding-top: 20px;
  padding-left: 30px;
  padding-bottom: 20px;
}

.order-shipping-method-container {
  .container-fluid {
    padding-left: 0px;
    margin-left: 0px;
  }
  .container {
    padding-left: 0px;
    margin-left: 0px;
    .container-fluid {
      padding-left: 0px;
      margin-left: 0px;
    }
  }
}

.collpoint-details {
  cursor: pointer;
  margin-top: 20px;
  padding-left: 15px;
}
.collpoint-details-selected {
  border: 2px solid $primary !important;
  box-shadow: $order-box-shadow !important;
}

.order-shippingmethod-group {
  width: 60%;
  background-color: $white;
  border: 1px solid $gray-400;
  font-size: $order-shipping-modal-font-size;
  @include media-breakpoint-down(lg) {
    width: 100%;
  }
  @include media-breakpoint-down(sm) {
    width: 50%;
  }
  .custom-control {
    @extend  .py-3 ;
    @extend  .pt-1 ;
    border-left: 1px solid $gray-400;
    width: 40%;
    position: relative;
    color: $gray-500;
    @include media-breakpoint-down(sm) {
      border-top: 1px solid $gray-400;
      width: 100%;
    }
    :checked ~ *{
      color: $primary;
    }
    .custom-control-label {
      cursor: pointer;
      margin-left: 15px;
      margin-right: 15px;
      vertical-align: middle;
      &:before {
        margin-top: 18px;
        margin-left: 15px;
      }
      &:after {
        margin-top: 18px;
        margin-left: 15px;
      }
    }
    .fa-icon {
      width: 25px;
      height: 25px;
      vertical-align: middle;
      margin-right: 5px;
    }
  }
}

.line-separator {
  display: block;
  background: $gray-400;
  border: 1px solid $gray-400;
  width: 100%;
  height: 1px;
  margin-top: $order-line-separator;
  margin-bottom: $order-line-separator;
}

.double-line-separator {
  display: block;
  background: $gray-400;
  border: 1px solid $gray-400;
  width: 100%;
  height: 1px;
  margin-top: $order-line-separator-p-l;
  margin-bottom: $order-line-separator-p-l;
}

.order-shipping-address-style {
  font-size: $order-review-font-size;
  border:             1px solid grey;
  margin: 0px;
}

.rounded-btn {
  @include                                fade-in(1);
  @for $i from 1 through 6 {
    &:nth-of-type(#{$i}) {
      animation-delay: #{0.2+($i)/9}s;
    }
  }
  margin-left: 5px;
  max-width: 100%;
  max-height: 50px;
  display: inline-block;
  vertical-align: middle;
  border-color: transparent;
  background-color: $order-item-active-bg-color;
  padding: map-get($spacers, $order-item-spacing) / 4 map-get($spacers, $order-item-spacing) / 2;
  border-radius: map-get($spacers, $order-item-spacing);
  margin-right: map-get($spacers, $order-item-spacing) / 4;
  transition: background-color 0.5s ease;
  &:hover {
    background-color: darken($order-item-active-bg-color, 20%);
    border-color: transparent;
    cursor: default;
  }

  @include media-breakpoint-down(md) {
    padding: map-get($spacers, $order-item-spacing) / 8 map-get($spacers, $order-item-spacing) / 4;
    margin-bottom: map-get($spacers, $order-item-spacing) / 4;
    margin-right: map-get($spacers, $order-item-spacing) / 8;
    font-size:  $font-size-base * 0.8;
  }
}


.ellipse-btn {
  border-radius: map-get($spacers, $order-item-spacing);
  border-color: transparent;
  background-color: $order-item-active-bg-color;
  @include media-breakpoint-down(lg) {
    width: 100%;
  }
}

.address-group {
  @extend  .my-4 ;
  .row {
    padding: 0px;
    margin: 0px;
  }
  .address-item {
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    .col {
      padding: 0px;
    }
    .address-item-check {
      padding-left: 0px;
      height: 50px;
      display: inherit;
      vertical-align: middle;
      @include media-breakpoint-down(sm) {
        width: 50%;
      }
    }
    .a {
      display: inherit;
      vertical-align: middle;
    }
    .btn {
      width: 100%;
      margin: 0px;
      padding: 0px;
      text-align: left;
      background-color: transparent;
      border:             1px solid $gray-400;
      color: $dark;
      border-radius: 0%;
      white-space:             nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    .fa-icon {
        margin-left: 10px;
      color: transparent;
    }
    }
  }
  .address-item-selected {
    .btn {
      border: 2px solid $primary !important;
      box-shadow: $order-box-shadow !important;
      .a.btn-remove {
        display: none !important;
      }
      .fa-icon {
        color: $primary !important;
    }
    }
  }
  .btn-remove {
    .fa-icon {
      color: $gray-600;
      vertical-align: middle;
      text-align: right;
      width: 25px;
      height:25px;
    }
  }
}

.shipping-address-group {
  @extend  .my-4 ;

}

.order-link-label {
  @extend  .my-2 ;
  margin-left: 5px;
  font-size: $order-review-font-size;
  color: $primary;
  cursor: pointer;
  font-weight: bold;
}

.order-payment-content {
  padding: 30px;
  .order-agreement-box {
    padding: 20px;
    background: $order-note-box-color;
    border:  1px solid $red;
    .custom-checkbox {
      :checked ~ *{
        color: $dark;
      }
    }
  }
}

.order-payment-method-content {
  padding-top: 20px;
  .order-payment-method-group {
    @extend  .py-2 ;
    .order-payment-method-group-item {
      padding-left: 25px;
      min-height: 40px;
      vertical-align: middle;
      border: 1px solid $gray-400;
      .custom-control-label {
        display: flex;
        min-height: 40px;
        align-items: center;
        margin-left: 15px;
        padding-left: 10px;
        &:before {
          margin-top: 8px;
          margin-left: 10px;
        }
        &:after {
          margin-top: 8px;
          margin-left: 10px;
        }
      }
      :checked ~ *{
        .radio-form-container {
          opacity: 1 !important;
          border: 1px solid $blue;
          overflow: visible;
        }
      }
    }
    @include media-breakpoint-down(sm) {
      width: 80%;
    }
  }
  .btn-confirm, .btn-next, .btn-cancel {
    text-transform: none;
    width: auto !important;
    min-height: 40px;
    border: 1px solid $gray-400;
  }
  .btn-confirm, .btn-next {
    background-color: $primary;
  }
  .modal-footer {
    align-content: center;
    align-items: center;
    text-align: center;
  }
  .modal-header .close {
    display:none;
  }
}

.address-lbl {
  @extend  .col-sm-3 ;
  font-size: $order-review-font-size;
}

.btn-save-shipping-address {
  background: $primary;
  border: none;
}

.reset-pin-modal-title {
  font-style: normal;
  font-size: $order-activation-fund-title-font-size;
}
.product-image-frame {
  display: inline-block;
  border: 3px solid $white;
  border-radius: 10px;
}
