﻿.content-container {
    margin: 15px 10%;
}

.lbl-title {
    display: inline-block;
    font-size: 18px;
    padding: 5px 15px;
}

.div-shopping {
    display: inline-block;
    float: right;
}

.div-shopping a:visited {
    color: #666;
}

.btn-shopping {
    font-size: 18px;
    border: 1px solid #326496;
    padding: 5px 15px;
}

.td-gridview {
    width: 100%;
    vertical-align: top;
    padding-right: 50px;
}

.table-terms {
    width: 100%;
    background-color: #F5F5F5;
    border: 1px solid #BBB;
}

.table-terms td {
    padding: 5px;
}

.lbl-terms {
    color: #1E5064;
}

.lbl-spec-terms {
    color: red;
}

.img-whatsapp-icon {
    width: 25px;
    height: 25px;
    vertical-align: bottom;
}

.gridview {
    width: 100%;
    border: none;
}

.gridview-focused {
    background-color: white !important;
    color: #666 !important;
}

.no-border {
    border-style: none !important;
}

.bottom-border {
    border-style: none !important;
    border-bottom: 1px solid #DDD !important;
}

.item-img {
    width: 10%;
}

.item-img img {
    width: 100%;
    min-width: 100px;
    max-width: 150px;
}

.item-name {
    font-size: 18px;
    font-weight: bold;
}

.btn-remove {
    width: 30px !important;
    background: url('../Content/Icon/bin.svg') no-repeat center;
    background-size: 30px 30px;
    float: right;
}

.lbl-colorsize {
    display: block;
}

.btn-plus {
    width: 30px !important;
    background: url('../Content/Icon/plus.svg') no-repeat center;
    background-size: 30px 30px;
    float: left;
}

.btn-minus {
    width: 30px !important;
    background: url('../Content/Icon/minus.svg') no-repeat center;
    background-size: 30px 30px;
    float: left;
}

.lbl-qty {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    width: 40px;
    float: left;
    margin-top: 5px;
}

.grp-amt {
    min-width: 70px;
}

.lbl-amount {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.td-summary {
    width: 300px;
    height: 350px;
    background-color: #C8E6FA;
    vertical-align: top;
    padding: 10px;
}

.lbl-summary {
    font-size: 16px;
    font-weight: bold;
}

.div-summary {
    width: 290px;
    height: 200px;
    background-color: white;
    margin-top: 10px;
}

.td-summary-subject {
    width: 60%;
    padding: 10px 10px;
}

.td-summary-subject span {
    font-size: 16px;
}

.td-amt {
    width: 40%;
}

.td-amt span {
    font-size: 16px;
}

.td-summary-total {
    width: 60%;
    padding: 10px 10px;
    border-top: 1px solid #AAA;
}

.td-summary-total span {
    font-size: 18px;
    font-weight: bold;
}

.td-total-amt {
    width: 40%;
    border-top: 1px solid #AAA;
}

.td-total-amt span {
    font-size: 18px;
    font-weight: bold;
}

.btn-member {
    font-size: 20px;
    font-weight: bold;
    margin: 40px 0px;
}

.tr-space {
    height: 10px;
}

.td-help {
    width: 300px;
    height: 300px;
    background-color: #DDD;
    vertical-align: top;
    padding: 10px;
}

.lbl-payprovide {
    font-size: 16px;
    font-weight: bold;
}

.table-payprovide {
    width: 90%;
    text-align: center;
    margin: 10px 5% 20px 5%;
}

.img-pay {
    width: 50px;
    margin: 10px 0;
}

.lbl-pay {
    font-weight: bold;
}

.lbl-help {
    font-size: 16px;
    font-weight: bold;
}

.mobile-order-summary {
    display: none;
}

.mobile-help {
    display: none;
}

.mobile-space {
    display: none;
}

@media (max-width: 999px) 
{
    .content-container {
        margin: 15px 10%;
    }

    .td-summary {
        display: none;
    }

    .td-help {
        display: none;
    }

    .td-gridview {
        width:80vw;
        padding-right: unset;
    }

    .mobile-order-summary {
        display: block;
        z-index: 1000;
        position: fixed;
        bottom: 46px;
        width: 80%;
        background: rgba(200, 230, 250, 0.8);
    }

    .mobile-summary-table {
        width: 90%;
        text-align: center;
        margin: 10px 5%;
    }

    .mobile-sum-total {
        font-size: 18px;
        font-weight: bold;
    }

    .btn-mobile-member {
        width: 100% !important;
        font-size: 16px;
        font-weight: bold;
        margin: 10px 0;
    }

    .mobile-help {
        display: block;
        background-color: #DDD;
    }

    .td-mobile-help {
        width: 30%;
        border-right: 1px solid #BBB;
        vertical-align: top;
    }

    .lbl-mobile-help {
        font-weight: bold;
    }

    .td-mobile-pay {
        width: 70%;
    }

    .lbl-mobile-payprovide {
        font-weight: bold;
    }

    .img-mobile-pay {
        width: 60px;
        margin: 5px 0;
    }

    .lbl-mobile-pay {
        font-weight: bold;
    }

    .mobile-space {
        display: block;
        height: 150px;
    }
}

@media (max-width: 720px)
{
    .lbl-title {
        font-size: 14px;
    }

    .btn-shopping {
        font-size: 14px;
    }
}

@media (max-width: 499px)
{
    .lbl-title {
        font-size: 12px;
    }

    .btn-shopping {
        font-size: 12px;
    }

    .item-img {
        width: 70px;
    }

    .item-img img {
        min-width: unset;
        max-width: unset;
    }

    .item-name {
        font-size: 14px;
    }

    .lbl-colorsize {
        font-size: 12px;
    }

    .btn-plus {
        width: 20px !important;
        background-size: 20px 20px;
    }

    .btn-minus {
        width: 20px !important;
        background-size: 20px 20px;
    }

    .lbl-qty {
        width: 15px;
        font-size: 14px;
    }

    .grp-amt {
        min-width: unset;
        width: 75px;
    }

    .lbl-amount {
        font-size: 14px;
    }

    .td-mobile-help {
        width: 40%;
    }

    .td-mobile-pay {
        width: 60%;
    }

    .img-mobile-pay {
        width: 50px;
        margin: 5px 0;
    }

    .lbl-mobile-pay {
        font-size: 12px;
    }
}


