*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
    overflow: hidden;
    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
    overflow-y: scroll !important;
}


/*Reuse*/
.mid_align{
    display: flex;
    align-items: center;
    text-align: center;
}

.row{
    display: flex;
    flex-direction: row;
}

.col{
    display: flex;
    flex-direction: column;
}


.rec_horizontal{
    width: 100%;
    height: 1px;
    background-color: #cfcfcf;
    margin-top: 20px;
}

.rec_vertical{
    height: 70%;
    width: 1px;
    background-color: #cfcfcf;
    margin:  0 10px;
    min-height: 20px;
}





i{
    color: #616060;
}

a{
    text-decoration: none;
    color: #000000;
}


.f12{
    font-size: 12px;
}


.f16{
    font-size: 16px;
}
.f18{
    font-size: 18px;
}

.f22{
    font-size: 22px;

}

.bold{
    font-weight: 500;
}



/**/

#cart_body  {
    width: 100%;
    padding: 85px 0;
}


#empty_cart{
    width: 100%;
    /*height: 500px;*/
    padding: 50px 0;
}

#empty_cart i{
    font-size: 60px;
    padding-bottom:40px;
    color: #2e2c2c;
}

/*#cart_header{*/
/*    position: fixed;*/
/*    top: 0;*/
/*    z-index: 1000;*/
/*    padding-bottom: 20px;*/
/*}*/
.btn{
    height: 100px;
    padding: 30px 0;
}

.btn .btn_shopping{
    margin: 0 10px;
    width: 180px;
    border:1px solid gray;
    border-radius: 20px;
    background: white;
}

.btn .btn_login{
    margin: 0 10px;
    width: 180px;
    border:1px solid gray;
    border-radius: 20px;
    background: #0170F0;
    color: white;
}
.btn button, .btn .btn_login:hover{
    transition: 0.4s;
    scale: 1.05;
    cursor: pointer;

}





/*List item*/

.content{
    width: 80%;
    height: 100%;
    gap: 50px;
}



.content .list_item{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 65%;
    height: 100%;
}

.list_item span{
    width: 100%;
    display: flex;
    text-align: left;

}

.list_item iframe{

    width: 100%;
    height: 150px;
    padding-right: 40px;
    margin-bottom: 20px;
}





/*Bill*/

.content .bill{
    margin-top: 60px;
    width: 35%;
    height: 520px;
    border: 1px solid gray;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    padding: 20px;
    border-radius: 5px;
}

.bill .discount{
    width: 100%;
    /*padding-bottom: 10px;*/
    border-bottom: 1px solid #bcbcbc;

}


.discount .title{
    font-size: 14px;
    color: #616060;
    width: 100%;
    display: flex;

    text-align: left;
}

.wrap_input{
    height:50px;
    padding: 5px;
    display: flex;
    justify-content: space-between;
}
.wrap_input input{
    width: 60%;
    height: 100%;
    padding-left: 5px;
    outline: none;
    border: none;

    /*border-bottom: 1px solid gray;*/
}

.wrap_input button{
    width: 30%;
    height:80%;
    border: 1px solid gray;
    border-radius: 20px;
    color: white;
    margin-left: 20px;
    background-color: #0a7cff;
}


.summary{
    padding: 20px 0;
    width: 100%;
    border-bottom: 1px solid #bcbcbc;
}

.summary .title{
    font-size: 18px;
    font-weight: 500;
    display: flex;
    text-align: left;
    padding-bottom: 5px;
}

.summary .item_price{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 14px;
}


.summary .item_price .value{
    font-weight: bold;
}


/*Total*/
.wrap_total{
    width: 100%;
    padding: 20px 0;

}
.wrap_total .total_label{
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;

}

.wrap_total .note {
    width: 100%;
    display: flex;
    text-align: left;
    font-size: 10px ;
    padding-top: 5px;
}

#pay   {
    width: 100%;
    height: 40px;
    border-radius: 20px;
    border: 1px solid gray;
    background-color: #0170F0;
    font-weight: 400;
    font-size: 18px;
    color: white;
    cursor: pointer;

}
#pay:hover {
    transition: 0.4s;
    scale: 1.025;
}

.term_condition{
    padding: 20px 0;
    font-size: 10px;
}


.term_condition a{
    color: #0077ff;
    text-decoration: underline;
}


.ads{
    width: 100%;
    padding-top: 0px;
}
.ads .ads_item{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    font-size: 12px;
    line-height: 2;
    text-align: center;
    align-items: center;
    color: #555555;
}

.ads i{
    font-size: 16px;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;

}

.ads span{
    padding-left:5px;
}