body{font-family: 'Montserrat', sans-serif; padding: 0; margin: 0; }
* {margin: 0; padding: 0; box-sizing: border-box; }
.placeorder_container {max-width: 1070px;margin: auto;padding: 0 15px;}
.placeorder_page {width: 100%; background: #edf0f1; padding-bottom: 50px; }
.placeorder_top {background: #fff; width: 100%; border-radius: 5px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 99px; }
.placeorder_top_left h2 {font-size: 20px;color: #222222;font-weight: 600;padding: 8px 0 5px;}
.placeorder_top_left p {font-size: 12px; color: #222222; position: relative; padding-left: 26px; }
.placeorder_top_left span {color: #222222; font-size: 13px; position: relative; padding-left: 17px; }
.placeorder_top_right p {color: #222222; font-size: 18px; font-weight: bold; position: relative; padding-left: 43px; }
.placeorder_top_right p:after {content: ""; position: absolute; background-image: url(../images/collection-icon.png); width: 35px; height: 30px; left: 0; top: -5px; }
.placeorder_top_left span:after {content: "";position: absolute;left: 0;background-image: url(../images/map-icon.png);top: 0;width: 10px;height: 15px;}
.placeorder_top_left p:after {content: "";position: absolute;left: 0;width: 20px;height: 20px;background: #ffdc5d;border-radius: 100px;opacity: 0.4;top: -2px;}
.placeorder_top_left p:before {content: ""; width: 13px; height: 13px; background: #ffdc5d; position: absolute; left: 4px; border-radius: 100px; top: 2px; }
.order_info_row {display: flex; justify-content: space-between; align-items: end; border-bottom: 1px #e8e8e8 dashed; padding: 14px 0; }
.order_info_left {display: flex; align-items: center; }
.order_info_left p {color: #000000; font-size: 15px; font-weight: 600; line-height: 23px; padding-left: 15px; }
.order_info_left p span {display: block; font-size: 14px; color: #5c5c5c; font-weight: 500; }
.order_info_left i {width: 50px; height: 50px; background: #f4f4f4; display: flex; justify-content: center; align-items: center; border-radius: 100px; }
.order_detail {width: 100%; display: flex; margin-top: 15px; }
.order_detail_right {width: 305px; }
.order_detail_left {width: calc(100% - 305px); background: #fff; margin-right: 15px; }
.order_info {padding: 0 25px 20px;height: 236px;overflow: auto;}
.order_detail_top {display: flex; justify-content: space-between; padding: 10px 15px; border-bottom: 1px #e8e8e8 solid; }
.order_detail_top i {width: 28px; height: 28px; background: #f4f4f4; border-radius: 100px; }
.order_info_right p {color: #a1281d; font-weight: 800; }
.payment_option_row {border-width: 1px; border-color: rgb(217, 217, 217); border-style: solid; border-radius: 4px; background-color: rgb(251, 251, 251); width: 100%; height: 44px; margin-bottom: 13px; }
.radio-container p {display: flex; align-items: center; padding-top: 8px; }
.radio-container p i {padding-right: 10px; }
.user_info {width: 100%; background: #fff; padding: 20px; float: left; padding-bottom: 5px; }
.payment_option {background: #fff; margin-top: 15px; padding: 20px; clear: both; float: left; width: 100%; }
.user_info ul {list-style: none; display: block; }
.user_info ul li {font-size: 13px; color: #222222; font-weight: 500; width: 48%; display: flex; align-items: end; float: left; padding-bottom: 10px; }
.user_info p {font-size: 18px; color: #bb1e11; font-weight: 500; padding-bottom: 10px; }
.user_info ul li i {padding-right: 8px; }

.payment_option button {width: 100%; background: #bb1e11; height: 40px; border: 0; color: #fff; text-transform: uppercase; font-weight: bold; font-family: 'Montserrat', sans-serif; margin-top: 20px; cursor: pointer; outline: none; border-radius: 4px; }
.payment_option button:hover {background: #000; }

.special_instruction {margin: auto; background: rgb(255 220 93 / 40%); height: 62px; display: flex; flex-wrap: wrap; align-items: center; padding: 0 10px; color: #222222; width: calc(100% - 40px); border-radius: 4px; }
.special_instruction span {display: block; width: 100%; font-size: 13px; font-weight: 400; }


.special_instruction p {font-size: 16px; font-weight: 900; line-height: 22px; }
.sub_total {width: 100%; padding: 20px 20px 10px; }
.sub_total_row {display: flex; justify-content: space-between; padding-bottom: 15px; }
.sub_total_row span {color: #a1281d; font-weight: 800; }
.sub_total_row p {    color: #6f6f6f; font-size: 15px; font-weight: 500; }
.sub_total_row:last-child {border-top: 1px #e8e8e8 solid; padding-top: 13px; }
.sub_total_row:last-child p {font-weight: bold; color: #000; }



.radio-container {display: flex; position: relative; padding-left: 10px; margin-bottom: 12px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #222222; font-weight: 500; }
.radio-container input {position: absolute; opacity: 0; cursor: pointer; }
.checkmark {position: absolute; top: 7px; right: 10px; height: 25px; width: 25px; background-color: transparent; border-radius: 50%; }
.radio-container:hover input ~ .checkmark {background-image: url(../images/right-icon.png); }
.radio-container input:checked ~ .checkmark {background-image: url(../images/right-icon.png); }
.checkmark:after {content: ""; position: absolute; display: none; }
.radio-container input:checked ~ .checkmark:after {display: block; }
.radio-container .checkmark:after {top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white; opacity: 0; }
.user_info.for_mobile {display: none; }
.for_mobile { display: none; }
.user_info.for_mobile span {display: none; }
.user_info.for_mobile span { display: none; }

@media screen and (max-width:1100px) {
.order_info_right {width: 110px; text-align: right; }

} 


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

.for_mobile { display: block; }
.placeorder_container {padding: 0 10px; }
.placeorder_top {display: none; padding-top: 10px; height: auto; margin-bottom: 15px; padding: 14px; }
.placeorder_top_right {padding-top: 22px; }
.user_info.for_mobile {display: block; margin-bottom: 20px; }
.order_detail {display: block; }
.order_detail_left {width: 100%; margin: 0; margin-top: 20px; clear: both; }
.special_instruction {height: auto; padding: 10px; }
.order_detail_right {width: 100%; }
.user_info {display: none; }
.placeorder_page {padding-bottom: 20px;float: left;}
.payment_option button {display: none; }
.payment_option button.for_mobile {display: block; }
button.for_mobile.click_div {width: 100%; background: #bb1e11; height: 40px; border: 0; color: #fff; text-transform: uppercase; font-weight: bold; font-family: 'Montserrat', sans-serif; cursor: pointer; outline: none; border-radius: 4px; margin-top: 20px; clear: both; margin: auto; }
.order_detail_right {display: flex; flex-wrap: wrap; margin-bottom: 45px; }
.payment_option {order: 3;display: none;position: fixed;bottom: 40px;z-index: 9;left: 0;padding-bottom: 0;}
.bottom_btn {width: 100%; position: fixed; bottom: 0; left: 0; background: #fff;     z-index: 2;}
.order_info {padding: 0 10px 20px;height: auto;}
.order_info_right {width: 103px; text-align: right; }
.order_info_left i {width: 40px; height: 40px; }
.order_info_left p {font-size: 12px; line-height: 17px; }
.order_info_left p span {font-size: 12px; }
.order_info_row {padding: 10px 0; }
.order_info_right p {font-size: 14px; }
.sub_total_row span {font-size: 14px; }
.sub_total {padding: 10px 10px 0; }
.user_info.for_mobile {padding: 10px 10px; }
.placeorder_top_left h2 {font-size: 16px; padding-top: 14px; padding-bottom: 14px; }
body.show:after {content: "";position: fixed;width: 100%;height: 100%;background: #000;top: 0;left: 0;opacity: 0.5;z-index: 1;}
.user_info.for_mobile span {display: block; position: absolute; right: 10px; top: 15px; color: #222222; font-size: 14px; font-weight: bold; padding-left: 30px; }
.user_info.for_mobile {position: relative; }
.user_info.for_mobile span:after {content: ""; position: absolute; background-image: url(../images/collection-icon.png); width: 21px; height: 18px; left: 0; top: -5px; background-size: contain; }
.user_info ul li {width: 100%; }
.user_info ul li:last-child {padding: 0; }

}