@import "../../styles/varibale.scss";
.paymentPageLeftSection {
  width: 60%;
}
.paymentMethodRadioGroup {
  width: 30%;
}
.messageContainer{
  background: $primaryColor;
  color: #fff;
  padding: 1rem;
}
.rowMargin{
  padding-right: 10px !important;
}
.inputBusiness{
  width: 100% !important;
 margin-right: 20px;
}
.h2Tittle{
color: $primaryColor;
text-align: center;
}
.paymentOption {
  font-weight: 500;
  font-size: 14px;
}

.typeContainer{
    margin-left: -10px;
}
.spaceReduced{
    margin-left: -15px;
}

.paymentForm {
  width: 70%;
  background: #fafafa;
  border-radius: 6px;
}
.paymentButton {
  width: 252px;
  height: 50px;
  font-weight: 500;
  font-size: 14px;
}
.paymentFormRight {
  padding-left: 0.5rem !important;
}
.paymentFormLeft {
  padding-right: 0.5rem !important;
}
.checkoutPageTitle {
  font-weight: 600;
  font-size: 36px;
}
.inputFieldContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
}
.addressContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 60px;
}
.shippingAddressCard {
  padding: 0.5rem ;
  background: #ffffff;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.08);
  border-radius: 10px;
}
.addressCardTitle {
  font-weight: 600;
  font-size: 18px;
}
.defaultFlag {
  font-weight: 400;
  font-size: 14px;
  color: #3e2e84;
}
.deliveryButton {
  border: 1px solid #291c61;
  color: #291c61;
  width: 166px;
  height: 42px;
  font-weight: 500;
  font-size: 14px;
}
.activeDeliveryButton {
  width: 166px;
  height: 42px;
}
.nextButton {
  width: 122.5px;
  height: 45.79px;
}
.addAddressButton {
  width: 143px;
  height: 36px;
}
.progressBar {
  width: 600px;
  margin: 50px auto;
}
.checkoutLeftSection {
  background: #fafafa;
  border-radius: 6px;
  min-width: 70%;
}

.stepTitle {
  margin-top: -24px;
  padding-bottom: 10px;
  font-weight: 500;
  font-size: 14px;
}
// .stickyCheckoutFooter {
//   display: none;
// }
.sectionHeader {
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 13px;
}

.formMain{
    // align-items: center;
    // flex-direction: column;
    // display: flex;
    background: #FAFAFA;
    padding: 2rem 1rem;
     margin-right: 2rem;
     border: 1px solid #E8E8E8;
    border-radius: 0.25rem;
    
 
 }
 .leftContainer{
  max-width: 70%;
  width: 100%;
 }
 .formInput{
    // width: 295px;
    margin-right: 20px;
    -webkit-appearance: none;
 }
 
 .formItem{
     padding-left: 0.5rem;
     padding-right: 0.5rem;
 }
//  .inputBusiness{
//      width: 295px !important;
//     margin-right: 20px;
//  }
 .formMain  > form > div > div > div > label{
    color: $primaryColor;
 }
 
 .formMain  > form > div > div > div > label::after{
 content: "" !important;
 }
 

@media (max-width: 1199.98px) {
  .checkoutPageTitle {
    display: none;
  }
  .nextButtonFormItem {
    display: none !important;
  }
  .checkoutPageContainer {
    width: 100%;
    padding: 1rem;
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
  .stickyCheckoutFooter {
   
    z-index: 1;
    position: fixed;
    bottom: 0;
    background: #ffffff;
    box-shadow: 3px 0px 6px rgba(0, 0, 0, 0.16);
  }

  .mobileNextButton {
    width: 100%;
    height: 40px;
    font-weight: 500;
    font-size: 14px;
  }
  .progressBar {
    width: 100%;
    padding: 15px;
    margin: 50px 0 20px 0;
  }
  .inputFieldContainer {
    grid-template-columns: repeat(1, 1fr);
  }
  .addressContainer {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 30px;
  }
  .checkoutLeftSection {
    padding: 20px;
    background: #ffffff;
  }
  .paymentSummary {
    margin: 0 20px;
  }
  .paymentPageLeftSection {
    width: 100%;
    padding: 20px;
  }
  .paymentMethodRadioGroup {
    width: 100%;
  }
  .paymentForm {
    width: 100%;
    margin-top: 20px;
    padding: 20px;
  }
  .paymentButton {
    display: none;
  }
  .paymentMethodContainer {
    flex-direction: column;
  }
  .mobilePaymentButton {
    width: 100%;
    height: 50px;
  }
}

@media (max-width: 767.98px) {
.leftContainer{
  max-width: 100%;
}
}

@media (max-width: 768.98px) {
  .tabsData{
   margin: 0.75rem 0
  }
  .rowMargin{
   padding-right: 0px !important;
   width: 100% !important;
  }
  .radioButton{
    padding: 0;
  }
}