body{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 font-size:15px;}

 *{box-sizing:border-box;}
 /*Checkout page CSS code start*/
 .header-box{padding-bottom:15px; float:left; width:100%;}
 .parent {
   display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  flex-direction: row-reverse;
}
.child_left {
    float: left;
    -ms-flex: 25%;
    flex: 25%;
    background: #fff;
    padding: 0 16px;
    border-right: 0;
}
.child_left ul {
    padding-left: 25px;
    list-style-position: inside;
}
.child_left li {
    padding: 5px 0px;
}
form#payment-form label {
  margin-bottom: 5px;
  float: left;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 15px;
  font-weight: 250;
}
.child_right {
	float:left;
	 -ms-flex: 45%; /* IE10 */
    flex: 45%; 
	padding: 0 16px;
}
#error-message{ padding:5px; background:red; color:#fff; border-radius:0px; text-align:center;}
#card-element{    margin-bottom: 20px;
    padding: 12px;
    border: 1px solid #e6e6e6;
    border-radius: 3px;}

#terms-popup{color:#000;}
#popup_overlay{position:fixed; top:0px; left:0px; width:100%; height:100%; background:rgba(0,0,0,.6); z-index:99999998; display:none;
}
body.noOverflow{overflow:hidden;}
#popup{display:block; background:#fff; position:fixed; top:20%; left:20%; display:none;    z-index: 9999999999999999; width:60%; height:60%; padding:15px; box-sizing: border-box;  }
.popup-title{float:left; width:100%; display:flex;     justify-content: space-between; align-items: center;}
.popup-title h2{float:left; font-size:24px; font-weight:normal; padding:0px; margin:0px;}
.popup-title .popupClose{font-size:22px; color:#a1a1a1; cursor:pointer;}
.popup-title .popupClose:hover{color:#000;}
.popup_overflow{overflow:auto; float:left; height:85%;}
.showPoupup {display:block !important;}
.input-error{border-color:#df1b41 !important;border-width:2px !important;}

#agree_term_error{float:left; width:100%; padding-top:15px;}
/*.chekout_cont{border-bottom:1px solid #ccc;} */
.logo-text{font-size:20px; font-weight:normal; padding-left:15px; float:left;}
.logo-image{float:left; width:56px;}


#thank_you_box{ display:flex; width:100%; height:100%;  align-items:center; justify-content:center;}
#thank_you{ width:50%; margin:0px auto; border:1px solid #000; text-align:center;}
#thank_you h3{font-size:35px; padding:0px; margin:0px;}
.thank_you_image{padding:15px 0px;}
.thank_you_image img{max-width:100%; width:200px;}
.insta_button{padding:15px;}
.insta_button .btn{display:inline-block; width:auto; text-decoration:none; padding:10px 20px;}
.phone_number{padding:10px 0px;}
.phone_number a{color:#000; text-decoration:none;}
.insta_link img{max-width:40px;}
.footer_thankyou {padding:10px 0px; display:flex;     justify-content: space-around;}
.footer_thankyou a{color:#000; text-decoration:none;}

#toast-container {
      position: fixed;
      bottom: 30px;
      right: 30px;
      z-index: 9999;
    }

.toast {
      background-color: red;
      color: #fff;
      padding: 12px 20px;
      margin-top: 10px;
      border-radius: 5px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInOut 4s ease forwards;
      font-family: sans-serif;
    }

@keyframes fadeInOut {
      0% { opacity: 0; transform: translateY(20px); }
      10%, 90% { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(20px); }
}
/* Media query for mobile devices */
@media (max-width: 1170px) {
  .container {
    flex-direction: column; /* Display divs in a column layout on mobile */
  }
  
  .child_left {
    order: 2; /* Change the order of div1 to appear after div2 */
  	flex: 50%;
  }
  
  .child_right {
    order: 1; /* Change the order of div2 to appear before div1 */
  }
}

@media screen and (max-width: 767px) {

	.chekout_cont{display:block !important; float:left; width:100%;}
	.child_left, .child_right {  flex: 100%; width:100%;}
	.order-summary{max-width:100% !important;   box-sizing: border-box;}
	#thank_you{width:80% !important;}
}

@media (max-width: 480px) {
.child_left li {
        font-size: 14px;
        padding: 4px 0;
    }
.child_left li h3 {
        font-size: 20px;
        margin-bottom: 7px;
        margin-top: 0;
    }
.fielderror {
		font-size: 10px;
	}
	.child_left ul {
		padding-left: 6px;
	}
div#div_right h3 {
    margin-bottom: 12px;
    margin-top: 10px;
    font-size: 20px;
}
form#payment-form {
    padding-top: 10px;
}
}
@media (max-width: 360px) {
  .container {
    flex-direction: column; /* Display divs in a column layout on mobile */
  }
  
  .child_left {
    order: 2; /* Change the order of div1 to appear after div2 */
  	flex: 50%;
	font-size: 17px;
  }
  
  .child_right {
    order: 1; /* Change the order of div2 to appear before div1 */
  }
  body{ font-size:larger;}
}

.order-summary {
            max-width: 450px;
            border: 1px solid #e8dfdf;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
			background:#f0f0f0;
        }
        .item {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 15px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }
        .item img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 8px;
            margin-right: 15px;
        }
        .details {
            flex: 1;
        }
		.details p{padding:0px; margin:0px; font-size:16px; font-weight:normal;}
		.details p.product_name{padding-bottom:10px;}
        .price {
            font-weight: normal;
            text-align: right;
            min-width: 80px;
			font-size:16px;
        }
        .total, .discount {
            border-top: 2px solid #ddd;
            padding-top: 10px;
            text-align: right;
            font-size: 18px;
            font-weight: normal; 
			display:flex;
			justify-content: space-between;
        }
		
		.promo_title svg{float:left;}
		.promoCodeForm {display:flex; justify-content: space-between; }
		.promoCodeForm .input-promoCode{float:left; width:70%; float:left; border-radius:10px; }
		.button-promoCode{width:25%; float:right; background:#969696; color#fff;  border-radius:10px;}
		
        .quantity-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .quantity-btn {
            width: 30px;
            height: 30px;
            border: none;
            background-color: #fff;
            color: #000;
            font-size: 20px;
            cursor: pointer;
            border-radius: 5px;
        }
        .quantity-btn:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        .quantity-input {
            width: 50px;
            text-align: center;
            font-size: 18px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
	
.btn {
  background-color: #1265df;
  color: white;
  padding: 12px;
  margin: 36px 0;
  border: none;
  width: 100%;
  border-radius: 3px;
  cursor: pointer;
  font-size: 17px;
}

input[type=text] {
    width: 98%;
    margin-bottom: 20px;
    padding: 12px;
    border: 1.5px solid #e6e6e6;
    border-radius: 3px;
    height: 50px; 
    font-family: "Inter", system-ui, sans-serif;
    font-size: 16px;
    color: #1a1a1a;
    font-weight: 350
} 
input::placeholder {
  font-size: 16px;       /* Change font size */
  font-family: 'Ideal Sans, system-ui, sans-serif'; /* Change font family */ 
  /*color: #75767F; */
  color: #9EA2AE;
  font-family: "Inter", system-ui, sans-serif;
}
#type_busiess{
 width: 98%;
 margin-bottom: 20px;
 padding: 12px;
 border: 1px solid #e6e6e6;
 border-radius: 3px;
 height: 50px; 
 font-size: 15px;
 color: #9EA2AE;
 font-family: "Inter", system-ui, sans-serif;
}
.errormessage
	{
	text-align:center;
	display:block;
	padding: 10px 10px;
  	background-color: #de1a40;
  	color: white;
  	margin-bottom: 15px;
	margin-top:10px
	}
	.child_left li h3 {
    margin-bottom: 0px;
}
.fielderror {
    color: #df1b41;
    font-size: 14px;
    /* font-family: open-sans; */
    margin-bottom: 10px;
    margin-top: -10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
#error-promo.fielderror{margin-top:0px;}
.fieldsuccess {
    color: #00b200;
    font-size: 14px;
    /* font-family: open-sans; */
    margin-bottom: 10px;
    margin-top: -10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.spinner_int {
   --d: 10.6px;
   width: 1.9px;
   height: 1.9px;
   border-radius: 50%;
   margin: -5% 6%;
   color: #fbcd2b;
   box-shadow: calc(1*var(--d))      calc(0*var(--d))     0 0,
          calc(0.707*var(--d))  calc(0.707*var(--d)) 0 0.5px,
          calc(0*var(--d))      calc(1*var(--d))     0 1px,
          calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 1.4px,
          calc(-1*var(--d))     calc(0*var(--d))     0 1.9px,
          calc(-0.707*var(--d)) calc(-0.707*var(--d))0 2.4px,
          calc(0*var(--d))      calc(-1*var(--d))    0 2.9px;
   animation: spinner-a90wxe 1.2s infinite steps(8);
} 
.spinner_int_dis {
   --d: 10.6px;
   width: 1.9px;
   height: 1.9px;
   border-radius: 50%;
   margin: -5% 5%;
   color: #fbcd2b;
   box-shadow: calc(1*var(--d))      calc(0*var(--d))     0 0,
          calc(0.707*var(--d))  calc(0.707*var(--d)) 0 0.5px,
          calc(0*var(--d))      calc(1*var(--d))     0 1px,
          calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 1.4px,
          calc(-1*var(--d))     calc(0*var(--d))     0 1.9px,
          calc(-0.707*var(--d)) calc(-0.707*var(--d))0 2.4px,
          calc(0*var(--d))      calc(-1*var(--d))    0 2.9px;
   animation: spinner-a90wxe 1.2s infinite steps(8);
}
.input-wrapper {
    position: relative;
    width: 100%;
  }
#suggestions {
    position: absolute;
    overflow-y: scroll;
    background: #fff;
    z-index: 9;
    width: 98%; /* Matches input width */
   /* max-height: 200px;
    max-width: 100%; */
}

#comp-name.suggestions_open{ margin-bottom:0px;}
#comp-name.suggestions_close{ margin-bottom:16px;}
#suggestions.suggestions_Nocompanyfound{position: relative; width: 98%;}

.spinner_coupon {
  --d: 9.6px;
  width: 2.9px;
  height: 1.9px;
  border-radius: 50%;
  margin: -5% 110%;
  color: #2b90fb;
  box-shadow: calc(1*var(--d)) calc(0*var(--d)) 0 0, calc(0.707*var(--d)) calc(0.707*var(--d)) 0 0.5px, calc(0*var(--d)) calc(1*var(--d)) 0 1px, calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 1.4px, calc(-1*var(--d)) calc(0*var(--d)) 0 1.9px, calc(-0.707*var(--d)) calc(-0.707*var(--d))0 2.4px, calc(0*var(--d)) calc(-1*var(--d)) 0 2.9px;
  animation: spinner-a90wxe 1.2s infinite steps(8);
}

.order-summary h2{font-weight:normal; font-size:18px; border-bottom:1px solid #a8a8a8 !important; padding-bottom:15px; margin-bottom:25px; float:left; width:100%; }
.clear{clear:both;}

.quantity-container-box{float:left; background:#fff; border:1px solid #000; padding:5px; margin-top:15px;
    display: flex; justify-content: center;  align-items: center;}
.quantity-container-box input{margin:0px; width:30px !important; border:none !important; padding:5px;}

.item_detail {float:left; width:100%; display:flex; justify-content: space-between; padding-bottom:15px;}
.item_detail .tem-detail-value{text-align:right;}
.chekout_cont {max-width:1000px; margin:0px auto; display:flex; }
.checkout-rev{flex-direction: row-reverse;}  
.checkout-rev h3 {font-size:20px; margin-bottom:20px; font-weight:normal;}

.apply_promo_box{Display:flex;}
.apply_promo_box #promo_input{margin-bottom:0px; padding:8px;}
.apply_promo_box button{margin-left:10px;}
.apply_promo_box button.apply-button{padding-left:15px; padding-right:15px;}

#discount_div {padding-bottom:10px;}
#discount_div span:first-child{float:left;}
#div_right{max-height:80vh; /*overflow:auto; */}

@media screen and (max-width: 767px) {

	#div_right{max-height:none;}
}


@keyframes spinner-a90wxe {
   100% {
      transform: rotate(1turn);
   }
   
   /* testing */
   

 /*Checkout page CSS code END*/