/* Review Order Box is same as on cart page its css is on cart page css file */

/* cart summary Box is same as on cart page its css is on cart page css file */

/* all other css of this checkout page is Here */

* {
-web-kit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
html {
scroll-behavior: smooth;
}
body {
float: left;
width: 100%;
margin: 0px;
}
.checkout_page_section {
float: left;
width: 100%;
padding: 48px 10px 48px 10px;
background: var(--checkout_process_bg_color)
}
.custom_container {
max-width: 1200px;
margin: 0px auto;
}
.checkout_page_box {
display: grid;
grid-template-columns: 1fr 350px;
gap: 30px 30px;
width: 100%;
grid-template-rows: auto;
grid-template-areas: ". .";

}
/* checkout details section start  */


.canadaPostDeliveryType.text-left.my-table-class-cart {
    padding: 0px 0px 0px 12px;
}

.checkout_page_box_heading_section{
display: flex;
width: 100%;
flex-direction: column;
}
.checkout_page_box_heading_box{
display: flex;
width: 100%;
padding-bottom: 24px;
}
.checkout_page_box_heading_box h2{
font-style: normal;
font-weight: 700 !important;
font-size: 32px;
line-height: 36px;
text-transform: capitalize;
color: var(--checkout_process_heading_color);
font-family:var(--checkout_process_heading_font_family);
margin:0px;
}
.check_out_verification_steps_navigation{
display: flex;
align-items: center;
width: 100%;
padding:0px 0px 24px 0px;
}
.check_out_verification_steps_navigation_heading{
display: flex;
align-items: center;
padding-right: 12px;
}
.check_out_verification_steps_navigation_box {
display: flex;
align-items: center;

}
.check_out_verification_steps_navigation_box i{
padding-right:12px;
color:var(--checkout_process_heading_color);
}

.check_out_verification_steps_navigation_heading h6{
margin: 0px;
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 16px;
text-transform: capitalize;
color: var(--checkout_process_input_label_color);
font-family:var(--checkout_process_content_font_family);
}

 h6.first_step_check_out_navigation_heading.active{
color: var(--check_out_verification_steps_navigation_heading_active_text_color);
}

h6.second_step_check_out_navigation_text.active{
color: var(--check_out_verification_steps_navigation_heading_active_text_color);
}

h6.third_step_check_out_navigation_text.active{
color: var(--check_out_verification_steps_navigation_heading_active_text_color);
}

.check_out_varfication_navigation_btns {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding-top: 24px;
}

.check_out_varfication_navigation_btns a {
height: 48px;
display: flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
border-radius: 5px;
cursor: pointer;
font-family:var(--checkout_process_content_font_family);
}

.check_out_varfication_navigation_btns button {
    height: 48px;
    width:224px;
display: flex;
align-items: center;
justify-content: center;
padding: 0px 25px;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
border-radius: 5px;
border: none!important;
cursor: pointer;
font-family:var(--checkout_process_content_font_family);
}

.check_out_varfication_navigation_btns a i {
    font-size: 14px;
    color: var(--checkout_process_input_text_color) !important;
}

.check_out_varfication_navigation_btns button i {
    font-size: 14px;
    color: var(--checkout_process_input_text_color) !important;
}

.check_out_return_cart_btn {
color: var(--checkout_process_input_text_color) !important;
}

.check_out_return_cart_btn i {
padding-right: 10px;
color: var(--checkout_process_input_text_color) !important;
}

.pay-order-btn {
background:var(--checkout_process_forms_btn_bg_color);
color: var(--checkout_process_forms_btn_text_color) !important;
}


.check_out_verification_steps {
display: grid;
gap: 16px 0px;
border: 1px solid var(--checkout_process_border_color);
border-radius:4px;
padding: 24px 16px;
}
.check_out_shipping_method_box {
    border-bottom: 1px solid var(--checkout_process_border_color);
    padding-bottom: 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.check_out_verification_steps_heading {
padding-bottom:16px;
margin-bottom:0px;
width: 100%;
display: flex;
}

.check_out_verification_steps_heading h2 {
font-style: normal;
font-weight: 700 !important;
font-size: 16px;
line-height: 20px;
text-transform: capitalize;
color: var(--checkout_process_heading_color);
margin: 0px;
font-family:var(--checkout_process_heading_font_family);
}
.check_out_shipping_method_btns {
display: flex;
align-items: center;
}
.check_out_shipping_method_btns a {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-right: 24px;
}
.check_out_shipping_method_btns a:last-child {
margin-right: 0px;
}
.check_out_shipping_method_single_btns {
    border: 1px solid var(--checkout_shipping_method_border_color);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.check_out_shipping_method_btns a .check_out_shipping_method_single_btns i {
color: var(--check_out_shipping_method_btn_icon_color);
font-size: 12px;
font-weight: normal;
}
.check_out_shipping_method_btns a span {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 17px;
text-transform: capitalize;
color: var(--checkout_process_heading_color);
padding-left: 8px;
font-family:var(--checkout_process_content_font_family);
}


#toggle_truck_icon{
color: var(--check_out_shipping_method_btn_icon_active_color);
width: 12px;
    height: 12px;
    border-radius: 50%;
}
#toggle_location_tick_icon{
    width: 12px;
    height: 12px;
    border-radius: 50%;
}


.check_out_delivery_form_box{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.check_out_shipping_method_box_delivery_fields_heading h3{
    font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 20px;
color: var(--checkout_process_heading_color);
padding-bottom:16px;
font-family:var(--checkout_process_heading_font_family);
}
.check_out_delivery_form_content {
display: grid;
gap: 25px 0px;
}

.check_out_delivery_form_fields_box {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px 12px;
grid-template-rows: auto;
grid-template-areas: ". .";
}
.check_out_delivery_form_fields_single_box{
    display: grid;
position:relative;

}
.check_out_delivery_form_fields {
    display: flex;
    width: 100%;
    flex-direction: column;
    background: var( --checkout_process_input_bg_color);
    border-radius: 5px;
    padding: 12px 12px 12px 12px;
    border: none
}

.check_out_delivery_form_fields span {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    color: var( --checkout_process_input_label_color);
    padding-bottom: 3px;
margin: 0px;
font-family:var(--checkout_process_content_font_family);
}
.check_out_delivery_form_fields input {
    border: unset !important;
    background: unset !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: var( --checkout_process_input_text_color);
    font-family:var(--checkout_process_content_font_family);
}
.check_out_delivery_form_fields input:focus-visible{
    outline: none;
}
.check_out_delivery_form_fields input:focus{
    outline: none;
}
.check_out_delivery_form_fields select:focus-visible{
    outline: none;
}
.check_out_delivery_form_fields select:focus{
    outline: none;
}
.check_out_delivery_form_fields textarea:focus-visible{
    outline: none;
}
.check_out_delivery_form_fields textarea:focus{
    outline: none;
}
.check_out_delivery_form_fields input:-webkit-autofill, 
.check_out_delivery_form_fields input:-webkit-autofill:hover,
 .check_out_delivery_form_fields input:-webkit-autofill:focus,
 .check_out_delivery_form_fields textarea:-webkit-autofill, 
 .check_out_delivery_form_fields textarea:-webkit-autofill:hover, 
 .check_out_delivery_form_fields textarea:-webkit-autofill:focus, 
 .check_out_delivery_form_fields select:-webkit-autofill,
  .check_out_delivery_form_fields select:-webkit-autofill:hover,
 .check_out_delivery_form_fields select:-webkit-autofill:focus {
    border: unset !important;
    -webkit-text-fill-color: var( --checkout_process_input_text_color);
    -webkit-box-shadow: unset !important;
    transition: background-color 5000s ease-in-out 0s;
}


.check_out_delivery_form_fields .time_js{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.check_out_delivery_form_fields select{
    border: unset !important;
    background: unset !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: var( --checkout_process_input_text_color);
    margin:0px;
    font-family:var(--checkout_process_content_font_family);
    width:100%;
}
.check_out_delivery_form_fields_single_box label.error {
color: red;
font-size: 12px;
margin: 0px;
position: absolute;
    bottom: -19px;
line-height:14px;
font-family:var(--checkout_process_content_font_family);
}

.check_out_delivery_form_fields input::placeholder {
    font-style: normal;
    font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 17px;
color: var( --checkout_process_input_text_color);
}
.check_out_delivery_form_fields textarea {
    border: unset !important;
    background: unset !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: var( --checkout_process_input_text_color);
    padding: 5px 16px 0px 0px;
    font-family:var(--checkout_process_content_font_family);
}
.check_out_delivery_form_fields textarea::placeholder {
    font-style: normal;
    font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 17px;
color: var( --checkout_process_input_text_color);
}

.check_out_shipping_method_box_pick_up_location_selector {
display: grid;
padding-bottom: 24px;
border-bottom:1px solid var(--checkout_process_border_color);
margin-bottom: 24px;
}
.check_out_shipping_method_box_pick_up_location_selector h4{
    font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 20px;
color: var(--checkout_process_heading_color);
margin: 0px;
padding-bottom: 16px;
font-family:var(--checkout_process_heading_font_family);
}
.check_out_delivery_form_fields_single_box.pick_up_location_selector_main{
    max-width: 360px;
}
.check_out_delivery_form_fields.pick_up_location_selector select{
    border: unset !important;
    background: unset !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: var( --checkout_process_input_text_color);
    margin: 0px;
    width: 100%;
    font-family:var(--checkout_process_content_font_family);
    padding:0px 25px 0px 0px;
}
.check_out_shipping_method_box_pick_up_location_selector small{
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 17px;
color: var(--checkout_process_heading_color);
margin-top: 20px;
font-family:var(--checkout_process_content_font_family);
}

.check_out_shipping_method_box_pick_up_fields_heading{
display: flex;
width: 100%;
padding-bottom: 16px;
}
.check_out_shipping_method_box_pick_up_fields_heading h3{
    font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 20px;
color: var(--checkout_process_heading_color);
font-family:var(--checkout_process_heading_font_family);
}


/* payment method box */
.check_out_payment_method_box {
border: 1px solid var(--checkout_process_border_color);
box-sizing: border-box;
border-radius: 2px;
padding: 24px 24px;
display: flex;
flex-direction: column;
margin-top: 12px;
}
.check_out_payment_method_heading {
padding-bottom: 16px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.check_out_payment_method_heading h2 {
    font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 20px;
color:var(--checkout_process_heading_color);
margin: 0px;
font-family:var(--checkout_process_heading_font_family);
}
.check_out_payment_card_list {
display: flex;
align-items: center;
}
.check_out_payment_card_list img {
padding-right: 4px;
}
.check_out_payment_card_list img:last-child {
padding-right: 0px;
}
.check_out_payment_card_form {
    display: flex;
    flex-direction: column;
}

.check_out_payment_card_errors_reminder{
    display: flex;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 20px;
}
.check_out_payment_card_errors_reminder small{
    color: red;
    font-size: 12px;
    margin: 0px;
    line-height: 14px;
    font-family:var(--checkout_process_content_font_family);
}
.check_out_payment_card_form_field_main{
    display: grid;
    align-items: center;
    max-width: 100%;
    grid-template-columns: 3fr 2fr;
    gap: 10px 10px
}
.check_out_payment_card_form_field_two_main{
    display: grid;
    align-items: center;
    max-width: 100%;
    gap: 10px 10px;  
    padding-top: 20px;
}
.check_out_payment_card_form_field_box {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
.check_out_payment_card_form_field_box small{
    position: absolute;
    top: -25px;
    color: var( --checkout_process_input_label_color);
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    font-family:var(--checkout_process_content_font_family);
}
.check_out_payment_card_form_field_box_main{
    display: grid;
    align-items: center;
    max-width: 100%;
    grid-template-columns:1fr 1fr;
    gap: 10px 10px;  
    
}
.check_out_payment_card_form_field_box_two_main{
    display: grid;
    align-items: center;
    max-width: 100%;
    grid-template-columns:1fr 1fr 1fr;
    gap: 10px 10px;  
}
.check_out_payment_card_form_field {
    display: flex;
    width: 100%;
    flex-direction: column;
    background: var( --checkout_process_input_bg_color);
    border-radius: 5px;
    padding: 12px 12px 12px 12px;
}
.check_out_payment_card_form_field span {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    color: var( --checkout_process_input_label_color);
    padding-bottom: 3px;
    margin: 0px;
    font-family:var(--checkout_process_content_font_family);
}
.check_out_payment_card_form_field .card_data_field{
    border: unset !important;
    background: unset !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: var( --checkout_process_input_text_color);
        padding: 0px;
    height: unset;
    font-family:var(--checkout_process_content_font_family);
}
.check_out_payment_card_form_field input {
    border: unset !important;
    background: unset !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: var( --checkout_process_input_text_color);
    padding: 0px !important;
    height: unset !important;
    width: 100%; 
    font-family:var(--checkout_process_content_font_family);
}
.check_out_payment_card_form_field_box label{
    color: red;
    font-size: 12px;
    margin: 0px;
    line-height: 14px;
    font-family:var(--checkout_process_content_font_family);
}

/* Chrome, Safari, Edge, Opera */
.check_out_payment_card_form_field input::-webkit-outer-spin-button,
.check_out_payment_card_form_field input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Firefox */
.check_out_payment_card_form_field input[type="number"] {
-moz-appearance: textfield;
}
.check_out_payment_notes_one{
    display: grid;
    gap: 15px 0px;
    width: 100%;
    margin-top:12px;
}
.check_out_payment_notes_one p{
    font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 20px;
color: var( --checkout_process_input_label_color);
font-family:var(--checkout_process_content_font_family);
}
.check_out_payment_notes_one span{
    font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 20px;
color: var( --checkout_process_input_label_color);
font-family:var(--checkout_process_content_font_family);
}
.check_out_payment_notes{
    display: grid;
    gap: 15px 0px;
    padding: 16px 16px;
    width: 100%;
    background:var(--checkout_process_input_bg_color);
    border-radius: 4px;
    margin-top: 48px;
}
.check_out_payment_notes p{
    font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 20px;
color: var( --checkout_process_input_label_color);
font-family:var(--checkout_process_content_font_family);
}
.check_out_payment_notes span{
    font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 20px;
color: red; 
font-family: var(--checkout_process_content_font_family);
}
.payment_cards_img_box{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}
.payment_cards_img_box img{
    margin-left: 5px;
}
.payment_cards_img_box:last-child{
    margin-left: 0px;
}
.check_out_desktop_captcha > .checkout_recaptcha{
    display: block !important;
    margin-top: 16px;

}
.shopping_cart_total_bill_box .shopping_cart_total_bill_proceeding_btn button {
    display: none;
}
.check_out_varfication_navigation_btns_responsive {
display: none !important;
}
/* checkout details section End */

.DeliveryType_input_box {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.DeliveryType_input_box > label {
    color: #dc3545!important;
    font-size: 14px;
    margin-bottom: 7px;
    font-weight: 700;
}
.DeliveryType_input_box > p {
    color: #dc3545!important;
    font-size: 14px;
    font-weight: 700;
}
.DeliveryType_input_data {
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: var( --checkout_process_input_text_color);
    padding-top: 10px;
}
.DeliveryType_input_data input {
    margin-right: 5px;
}

/* media query for checkout details section Start */
@media(max-width: 1024px) {
.checkout_page_box_two {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.checkout_order_detail_box {
    margin-bottom: 0px;
    margin-top: 12px;
}
}
@media only screen and (max-width: 1024px) {
    .check_out_varfication_navigation_btns {
    display: none;
}
    .check_out_varfication_navigation_btns_responsive {
display: flex !important;
align-items: center;
width: 100%;
padding-top: 22px;
}

.check_out_varfication_navigation_btns_responsive a {
display: flex;
align-items: center;
justify-content: center;
padding: 0px 25px;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
border-radius: 5px;
cursor: pointer;
width: 100%;
}
.check_out_varfication_navigation_btns_responsive a i {
    font-size: 14px;
    color: var(--checkout_process_input_text_color) !important;
}
    .check_out_desktop_captcha > .checkout_recaptcha{
    display: none !important;

}
.mobile_checkout_recaptcha {
    display: block !important;
    margin-bottom: 16px;
}
.check_out_verification_steps_navigation {
    display: none
}
.shopping_cart_total_bill_box .shopping_cart_total_bill_proceeding_btn button {
    display: block;
}
.checkout_page_box {
    flex-direction: column;
    display: flex !important;
    gap: 0px;
}
.checkout_page_box_two {
    padding-top: 15px;
}
}
@media (max-width: 768px) {
    .checkout_page_section {
    padding: 24px 10px 50px 10px;
}
.checkout_page_box {
    flex-direction: column;
    display: flex !important;
    gap: 0px;
}
.checkout_page_box_two {
    padding-top: 15px;
}
.check_out_varfication_navigation_btns {
    padding-top: 15px;
}
.check_out_delivery_form_fields_box {
grid-template-columns: 1fr;
grid-template-areas: ".";
}
.check_out_payment_card_form_field_main {
    grid-template-columns:1fr;
}
.check_out_payment_card_form_field {
width: 100%;
}
.check_out_payment_card_form_field .single_card_field {
width: 100%;
}
.check_out_payment_card_form_field input{
width: 100%;
}
.check_out_payment_card_form_field_box_two_main {
    grid-template-columns: 1fr 1fr;
}


}


@media (max-width: 540px) {
    .checkout_page_box_heading_box h2 {
    font-size: 24px;
    line-height: 30px;
    }
.check_out_verification_steps {
    padding: 16px 0px;
    border-left: unset;
    border-right: unset;
    border-bottom: unset;
}
.check_out_payment_method_box {
    padding: 16px 0px;
    border-left: unset;
    border-right: unset;
}

.check_out_verification_steps_navigation_heading h6 {
font-size: 12px !important;
line-height: 13px !important;
}
.check_out_verification_steps_navigation_heading {
padding-right: 10px !important;
}
.check_out_verification_steps_navigation_box i {
    padding-right: 10px;
}

.check_out_payment_card_form_field_box_two_main {
    grid-template-columns: 1fr;
    gap: 5px 10px;
}
.check_out_payment_card_form_field_box_main {
    grid-template-columns: 1fr;
    gap: 5px 10px;
}
.check_out_payment_notes {
    margin-top: 32px;
}

.check_out_varfication_navigation_btns {
flex-direction: column-reverse;
}
.checkout_page_box_heading_box {
    display: none;
}
.check_out_payment_method_main_section {
    display: block !important;
}


.check_out_varfication_navigation_btns {
    display: none !important;
}

}


/* media query for checkout details section End */




@media (max-width: 450px) {


.check_out_varfication_navigation_btns a {
width: 100%;
}

.check_out_varfication_navigation_btns a:nth-child(2) {
margin-bottom: 12px;
}
}

.checkout-payment-optoins-parent {
display: flex;
width: 100%;
flex-wrap: wrap;
}

.checkout-payment-optoins-parent .checkout-payment-optoins {
    padding: 10px 15px 10px 0px;
}

.checkout-payment-optoins {
display: flex;
align-items: center;
}

.checkout-payment-optoins-text {
display: flex;
align-items: center;
padding-left: 8px;
}

.checkout-payment-optoins-text span {
    font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 17px;
color: var(--checkout_process_heading_color);
}

.checkout-payment-optoins > input {
width: 20px;
}