.checkout {
  .myac-body {
    padding-top: 5rem;
    .row {
      padding: 0.8rem 8rem;
      .left {
        padding-left: 1.5rem;
        flex-basis: 40%;
        .ul-wrapper {
          background-color: $white;
          border-radius: 4px;
          padding: 0.5rem;
          h4 {
            padding: 15px 20px;
            font-size: 16px;
            font-weight: 600;
            border-bottom: 1px solid #efefef;
            color: #2b2f4c;
          }

          .cart-item {
            display: flex;
            padding: 20px;
            background: $white;
            border-bottom: 1px solid #efefef;
            &:last-child {
              border-bottom: 0;
            }
            .cart-product-img {
              width: 130px;
              position: relative;
              img {
                width: 100%;
                border-radius: 5px;
                border: 1px solid #f7f7f7;
              }
              .offer-badge {
                position: absolute;
                top: 10px;
                left: 10px;
                font-size: 10px;
                font-weight: 700;
                color: $white;
                background: $redish;
                padding: 1px 10px 0px;
                border-radius: 3px;
                line-height: 20px;
              }
            }
            .cart-text {
              margin-left: 20px;
              width: 100%;
              position: relative;
              h4 {
                font-size: 1.6rem;
                font-weight: 700;
                line-height: 24px;
                color: #2b2f4c;
                text-align: left;
                margin-bottom: 10px;
                border-bottom: 0;
                padding-left: 0;
              }
              .cart-item-price {
                font-size: 18px;
                font-weight: 700;
                line-height: 24px;
                color: $redish;
                text-align: right;
                display: inline-flex;
                margin-left: auto;
                span {
                  color: #c7c7c7;
                  text-decoration: line-through;
                  margin-left: 10px;
                  font-weight: 600;
                }
              }
            }
          }
          .total-checkout-group {
            padding: 20px 20px 0;
            margin-top: 10px;
            .cart-total-dil {
              display: flex;
              width: 100%;
              align-items: center;
              h4 {
                margin-bottom: 0;
                font-size: 14px;
                font-weight: 400;
                color: #2b2f4c;
                line-height: 24px;
                border-bottom: 0;
                padding: 0;
              }
              span {
                color: #8f91ac;
                font-size: 16px;
                margin-left: auto;
                font-weight: 400;
                line-height: 24px;
              }
            }
          }
          .saving-total {
            padding: 20px 20px 0;
            h4 {
              margin-bottom: 0;
              font-size: 14px;
              font-weight: 400;
              color: #2b2f4c;
              line-height: 24px;
              padding: 0;
              border-bottom: 0;
            }
            span {
              color: #8f91ac;
              font-size: 16px;
              margin-left: auto;
              font-weight: 400;
              line-height: 24px;
            }
          }
          .cart-total-dil {
            display: flex;
            width: 100%;
            align-items: center;
          }
          .main-total-cart {
            display: flex;
            padding: 20px;
            border-bottom: 1px solid #e5e5e5;
            h2 {
              margin-bottom: 0;
              font-size: 18px;
              font-weight: 600;
              color: #2b2f4c;
              line-height: 24px;
            }
            span {
              color: $redish;
              font-size: 18px;
              margin-left: auto;
              font-weight: 700;
              line-height: 24px;
            }
          }
          .cktout {
            text-align: center;
            padding: 1.5rem;
            font-weight: 500;
            font-size: 14px;
            color: #2b2f4c;
          }
        }
        .promocode {
          margin-top: 30px;
          background: $white;
          border-radius: 3px;
          padding: 12px 20px;
          text-align: center;
          font-size: 14px;
          font-weight: 500;
          color: #2b2f4c;
          line-height: 24px;
          display: block;
          box-shadow: 0 1px 2px 0 #e9e9e9;
        }
        .promoform {
          background: $white;
          padding: 19px 20px;
          padding-bottom: 15px;
          border-top: 1px solid #e9e9e9;
          display: none;
          form {
            width: 100%;
            display: flex;
            input {
              width: 80%;
              border: 1px solid $border;
              border-radius: 4px 0 0 4px;
            }
            button {
              border-radius: 0 4px 4px 0;
            }
          }
        }
      }
      .right {
        flex-basis: 70%;
        margin-right: 1.5rem;
        .pdpt-bg {
          background: $white;
          border-radius: 3px;
          box-shadow: 0 1px 2px 0 #e9e9e9;
          .step {
            border-top: 1px solid #f3f3f3;
            color: #2b2f4c;
            font-size: 14px;
            padding: 25px;
            position: relative;
            cursor: pointer;
            .tittle {
              display: flex;
              align-items: center;
              span {
                border-radius: 50%;
                border: 1px solid $redish;
                display: inline-block;
                font-size: 14px;
                font-weight: 600;
                height: 32px;
                margin-right: 20px;
                padding: 6px;
                text-align: center;
                width: 32px;
                color: $white;
                background: $redish;
              }
              h4 {
                font-size: 18px;
                font-weight: 500;
                vertical-align: middle;
                display: inline-block;
                margin: 0px;
              }
            }
            .span {
              overflow:hidden;
              .formbody {
                background-color: $white;
                padding: 15px 0px;
                .form-group {
                  margin-bottom: 18px;
                  display: inline-block;
                  width: 100%;
                  .product-radio {
                    margin-top: 7px;
                    .product-now {
                      list-style-type: none;
                      margin: 0;
                      padding: 0;
                      list-style: none;
                      li {
                        margin-right: 5px;
                        width: 50px;
                        height: 36px;
                        position: relative;
                        text-align: center;
                        display: inline-block;
                        input[type="radio"] {
                          display: none;
                        }
                        input {
                          position: absolute;
                          top: 0;
                          left: 0;
                          right: 0;
                          bottom: 0;
                        }
                      }
                      label {
                        padding: 5px;
                        cursor: pointer;
                        background: #c7c7c7;
                        color: #fff;
                        border-radius: 3px;
                        font-weight: 500;
                        font-size: 12px;
                      }
                      input[type="radio"]:checked + label,
                      .Checked + label {
                        background: #f55d2c;
                      }
                    }
                    .ttl {
                      font-size: 13px;
                      font-weight: 500;
                      color: #2b2f4c;
                      padding-bottom: 1.5rem;
                    }
                  }
                }
                .time-radio {
                  .form {
                    .fields {
                      .field {
                        margin: 1rem 0;
                        label {
                          margin-left: 1rem;
                        }
                      }
                    }
                  }
                }
                .address-fieldset {
                  .row {
                    display: flex;
                    flex-direction: column;
                    padding-left: 0;
                    padding-right: 0;
                    label {
                      font-size: 1.3rem;
                      font-weight: 500;
                      color: #2b2f4c;
                    }
                    input,select {
                      border: 1px solid $border;
                      border-radius: 4px;
                      margin-top: 1.8rem;
                      margin-bottom: 2rem;
                      width: 100%;
                      &:focus {
                        border-color: $redish;
                      }
                    }
                    select{
                      padding: 0.8rem 0;
                    }
                  }
                  .row2 {
                    display: flex;
                    justify-content: space-between;
                    .lt,
                    .ft {
                      flex-basis: 45%;
                    }
                    .save-address {
                      background-color: transparent;
                      color: $redish;
                      border: 1px solid $redish;
                      padding: 0.9rem 2rem;
                      border-radius: 4px;
                      &:hover {
                        background-color: $redish;
                        color: $white;
                      }
                    }
                    .next-step {
                      background-color: $redish;
                      color: $redish;
                      border: 1px solid $redish;
                      color: $white;
                      padding: 0.9rem 2rem;
                      border-radius: 4px;
                      &:hover {
                        background-color: $redish;
                        color: $white;
                      }
                    }
                    .address-item {
                      display: flex;
                      align-items: flex-start;
                      padding: 20px;
                      border-bottom: 1px solid #efefef;
                      .address-icon1 {
                        margin-right: 10px;
                        background: #f55d2c;
                        color: #fff;
                        padding: 5px;
                        border-radius: 5px;
                        i {
                          font-size: 16px;
                        }
                      }
                      .address-dt-all {
                        h4 {
                          color: #2b2f4c;
                          font-size: 16px;
                          font-weight: 500;
                          text-align: left;
                          margin-top: 0;
                          margin-bottom: 8px;
                        }
                        p {
                          font-size: 14px;
                          font-weight: 400;
                          color: #3e3f5e;
                          margin-bottom: 0;
                          line-height: 24px;
                        }
                      }
                      .action-btns {
                        margin-top: 10px;
                        list-style: none;
                        li {
                          display: inline-block;
                          margin-right: 5px;
                          .action-btn {
                            font-size: 16px;
                            color: #3e3f5e;
                        }
                      }
                    }
                    }
                  }
                }
              }
              .row2 {
                .next-step {
                  background-color: $redish;
                  color: $redish;
                  border: 1px solid $redish;
                  color: $white;
                  padding: 0.9rem 2rem;
                  border-radius: 4px;
                  &:hover {
                    background-color: $redish;
                    color: $white;
                  }
                }
              }
            }
            .span-open{
              overflow: visible;
              min-height: 0;
            }
            .rpt100 {
              margin: 2rem 0;
              .radio--group-inline-container_1 {
                width: 100%;
                width: 100%;
                display: block;
                margin-bottom: 22px !important;
                list-style: none;
                li {
                  display: inline-block;
                  width: 33.333%;
                  margin-right: 10px;
                  .radio-item_1 {
                    display: inline-block;
                    margin-right: 10px;
                    width: 100%;
                    .radio-label_1 {
                      font-size: 14px;
                      font-weight: 500;
                      font-family: "Roboto", sans-serif;
                      line-height: 16px;
                      color: #2b2f4c;
                      cursor: pointer;
                      padding: 15px 20px;
                      background: #f9f9f9;
                      width: 100%;
                      border-radius: 5px;
                      border: 1px solid #efefef;
                      margin-bottom: 0.8rem;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
@media only screen and (max-width: 1168px) {
  .checkout {
    .myac-body {
      .row {
        padding: 0.5rem 2rem;
      }
    }
  }
}
@media only screen and (max-width: 1101px) {
  .checkout {
    .myac-body {
      .row {
        flex-direction: column;
        .left {
          padding-left: 0rem;
          width: 100%;
          max-width: 54rem;
          margin: 4rem auto;
        }
        .right {
          padding-right: 0rem;
          margin-right: 0;
          width: 100%;
          max-width: 54rem;
          margin: 1rem auto;
        }
      }
    }
  }
}
@media only screen and (max-width: 400px) {
  .checkout {
    .myac-body {
      .row {
        padding: 0.5rem 1rem;
        .right
          .pdpt-bg
          .track-order
          .bs-wizard
          .bs-wizard-step
          .bs-wizard-stepnum {
          font-size: 1.2rem;
        }
      }
    }
  }
}
@media only screen and (max-width: 538px) {
  .checkout {
    .myac-body {
      .row {
        padding: 0.5rem 1rem;
        .right .pdpt-bg {
          .pdpt-title {
            flex-direction: column;
          }
        }
      }
    }
  }
}
@media only screen and (max-width: 640px) {
  .checkout {
    .myac-body {
      .row {
        .right {
          .pdpt-bg {
            .step {
              .span {
                .formbody {
                  padding: 15px 2px;
                }
              }
            }
          }
        }
      }
    }
  }
}
