.payment-method label{display:block;width:30% !important;margin-right:3%}.payment-method label img{border:1px solid #E8E8E8;width:100%}.payment-method label span{display:block;margin:5px 0;text-align:center}.payment-method label:hover img{border-color:#0969b3}.payment-method input:checked+label img{border-color:#0969b3;box-shadow:3px 3px 0 3px #0969b3,-3px 3px 0 3px #0969b3,3px -3px 0 3px #0969b3,-3px -3px 0 3px #0969b3}.payment-method input{display:none}.payment-method small{display:block;line-height:1.5}.payment-method-area,#bankinInfo{display:none}.alert-primary{background-color:#f8ffff;border-color:#a9d5de}.alert-primary,.alert-primary .alert-link{color:#276f86}.alert-info{background-color:#f1efff;border-color:#cbc4fc}.alert-info,.alert-info .alert-link{color:#6435c9}.alert-success{background-color:#fcfff5;border-color:#a3c293}.alert-success,.alert-success .alert-link{color:#2c662d}.alert-danger{background-color:#fff6f6;border-color:#e0b4b4}.alert-danger,.alert-danger .alert-link{color:#9f3a38}.alert-warning{background-color:#fffaf3;border-color:#c9ba9b}.alert-warning,.alert-warning .alert-link{color:#573a08}/*# sourceMappingURL=payment.css.map */


@font-face {
    font-family: 'Calibri';
    /*a name to be used later*/
    src: url('../fonts/Calibri Regular.ttf');
    /*URL to font*/
}

.btn-back{
    font-size: 20px;
    font-weight: 600;
    border: 0;
    background: #23A5A7;
    color: #fff;
    border-radius: 8px;
    padding: 10px 30px;
    cursor: pointer;
}

.btn-back-fail{
    font-size: 20px;
    font-weight: 600;
    border: 0;
    background: #e73434;
    color: #fff;
    border-radius: 8px;
    padding: 10px 30px;
    cursor: pointer;
}

.btn-back:hover{
    background: #23A5A7;
}

.product_list{
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-gap: 20px;
    padding: 0;
    width: calc(100% - 26px);
    margin: 0;
    margin-bottom: 30px;
}


.product_item{
    display: grid;
    grid-template-columns: repeat(2,50%);
    width: 100%;
    height: 200px;
    box-shadow: 0 0 3px rgba(0,0,0,.2);
    background: #fff;
    padding: 2px;
}

.product_image_area{
    background: url(../images/product_image_bg.png) no-repeat #293c9020;
    width: 100%;
    background-position: center;
    background-size: 60%;
}

.product_image_area img{
    width: 50%;
    object-fit: cover;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.product_title{
    color: #293c90;
    font-weight: 700;
    font-size: 18px;
    font-family: "Calibri";
}

.product_price{
    color: #0969b3;
    font-weight: 700;
    font-size: 20px;
    font-family: "Calibri";
}
.product_content_area{
    width: calc(100% - 40px);
    padding: 10px 20px;
    position: relative;
}
.product_quantity{
    display: grid;
    grid-template-columns: 50% 50%;
    position: absolute;
    bottom: 10px;
    width: calc(100% - 40px);
}

.product_quantity_title{
    width: 100%;
}

.product_controller{
    display: grid;
    grid-template-columns: 30px auto 30px;
    width: 100%;
    border: 1px solid #e0e0e0;
}

.product_controller_disabled{
    background: #e0e0e0;
    display: grid;
    grid-template-columns: 30px auto 30px;
    width: 100%;
    border: 1px solid #e0e0e0;
}

.product_controller_count{
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    width: 100%;
    text-align: center;
}

.product_controller_minor{
    width: 100%;
    text-align: center;
    cursor: pointer;
}

.product_controller_plus{
    width: 100%;
    text-align: center;
    cursor: pointer;
}


.product_controller_minor_disabled{
    width: 100%;
    text-align: center;
    background: #f2f2f2;
}

.product_controller_plus_disabled{
    width: 100%;
    text-align: center;
    background: #f2f2f2;
}

.product_controller_minor:hover , .product_controller_plus:hover{
    background: #f0f0f0;
}


.other_amount_title{
    color: #293c90;
    font-size: 20px;
    font-weight: 700;
}

.other_amount_title span{
    color:#ff0000;
    font-size: 16px;
}

.product_checkboxes label span{
    font-size: 16px;
}

.product_checkboxes{
    width: 100%;
}

.product_checkboxes label{
    color: #0969b3;
    font-size: 18px;
    margin-left: 10px;
    width: calc(100%);
}
.product_checkboxes div{
    display: flex;
}

.product_amount_content{
    display: flex;
    margin-left: 32px;
    position: absolute;
    bottom: 10px;
    width: calc(100% - 100px);
}

.product_amount_content input{
    margin-left: 10px;
    width: calc(100% - 10px);
}

.payment_submit{
    background-color: #031358;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 30px;
    margin-bottom: 30px;
    cursor: pointer;
    float: right;
}

.payment_submit_2{
    background-color: #031358;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 30px;
    margin-bottom: 30px;
    cursor: pointer;
    position: relative;
    left: 50%;
    transform: translate(-50%);
}


.product_checkboxes > div > input[type='checkbox']{
    width: 30px;
    height: 30px;
}

#other_amount3_input{
    margin-left: 10px;
    width: calc(100% - 14px);
}

.installation_area{
    display: flex;
}

.installation_area > label{
    font-size: 20px;
    margin: auto 4px;
}

.payment_back_area{
    border-bottom: 2px dotted #293c90;
    height: 32px;
}

.payment_back{
    background: transparent;
    border: 0px;
    font-weight: 600;
    float: left;
    padding: 0 0 0px 0;
    height: 100%;
    text-decoration: underline;
}

.total_amount{
    font-weight: 600;
    float: right;
}

.form_title{
    font-size: 20px;
    color: #0969b3;
}

.total_amount span{
    font-size: 20px;
    color: #b30909;
}

.pick_method_area, .privacy_area{
    display: flex;
}

.pick_method_area label{
    margin-right: 8px;
}

.consignee_info_area1{
    display: grid;
    grid-template-columns: repeat(2,calc(50% - 20px));
    grid-column-gap: 40px;
}

.consignee_info_area2{
    display: grid;
    grid-template-columns: 100%;
}

.consignee_info_area2 > div, .consignee_info_area1 > div{
    margin: 6px 6px;
    width: calc(100% - 6px);
}

.consignee_info_area2 > label{
    margin-left: 6px;
}

.consignee_info_area2 > div > label > span, .consignee_info_area1 > div > label > span{
    color: #f00;
}

.consignee_info_area1 input[type="text"], .consignee_info_area2 input[type="text"], .consignee_info_area1 input[type="number"], .consignee_info_area2 input[type="number"], .consignee_info_area1 textarea, .consignee_info_area2 textarea{
    box-shadow: inset 0px 4px 8px #e2e2e2;
    border: 0;
    height: 32px;
}

.c_name, .r_name, .c_tel_no, .r_tel_no, .address, .email, .b_name, .b_tel_no, .postscript{
    display: grid;
    grid-template-columns: 100px auto;
}


.c_name input, .r_name input, .c_tel_no input, .r_tel_no input, .address input{
    width: calc(100% - 6px);
}

.consignee_info_area1 > div > div{
}



[id$='-error'] {grid-column: 2 / 3;}


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

    .product_list{
        grid-template-columns: 100%;
    }
.product_item{ height:250px;}
    .product_checkboxes label {
        width: calc(100% - 62px);
    }
.consignee_info_area1 input[type="text"], .consignee_info_area2 input[type="text"], .consignee_info_area1 input[type="number"], .consignee_info_area2 input[type="number"], .consignee_info_area1 textarea, .consignee_info_area2 textarea{
    border: 1px solid #666;
}
.consignee_info_area1 {

    grid-template-columns: repeat(1,calc(100% - 20px));
    grid-column-gap: 10px;
}
    .product_amount_content input{

    }
}