﻿@media (min-width: 1024px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 1000px;
    }
}

@media only screen and (max-width: 992px), only screen and (max-width: 992px) and (orientation: portrait) {
    .container  {
        max-width: 900px;
        /* padding-left: 10px; */
        /* padding-right: 10px; */
        /* max-width: 990px; */
    }
}

@media only screen and (max-width: 1200px) {
    .main_menu > li > a {
        line-height: 16px;
    }
}

.hr_list.main_menu.fw_light {
    display: flex;
    align-items: flex-end;
}
.main_menu > li a {
    width: 80px;
}

.main_menu > li:first-child a {
    width: 60px;
}
.main_menu > li:nth-child(2) a {
    width: 90px;
}
.main_menu > li:nth-child(3) a, .main_menu > li:nth-child(4) a,
.main_menu > li:nth-child(5) a, .main_menu > li:nth-child(6) a {
    width: 90px;
}
.main_menu > li:nth-child(7) a {
    width: 80px;
}



.price-box {
    display: flex;
    justify-content: flex-start;
}
    .price-box div {
        width:120px;
        padding: 2px;
        margin-right: 5px;
        text-align: center;
    }
.price-box p {
    font-size: 8px;
    padding: 2px;
    margin-right: 5px;
    text-align: center;
}

    .price-box .VIPPrice p {
        color: #7e529c;
        border-bottom: 1px solid #7e529c;
        padding:0 15px;
        margin:1px 10px;
    }

    .price-box .Price p {
        color: #9d7dd4;
        border-bottom: 1px solid #9d7dd4;
        padding: 0 15px;
        margin: 1px 10px;
    }


    .price-box .SellingPrice p {
        color: #222;
        border-bottom: 1px solid #000;
        padding: 0 15px;
        margin: 1px 10px;
    }

.fp_price {
    padding: 0px 30px 0px 35px;
}

    .fp_price .vip, .fp_price .retail, .fp_price .memberprice {
        display: flex;
        align-content: center;
        justify-content: space-between;
        padding: 2px 8px 0px 0px;
        margin: 2px 0 0 0;
        font-size: 12px !important;
        align-items: flex-end;
    }

    .fp_price ._price, .fp_price .dis-price {
        font-size: 13px;
        color: #000;
        width: 40%;
        font-weight: 600;
        line-height: normal;
        text-align: right;
        /* height:3px; */
    }
    .fp_price .dis-price {
        text-decoration: line-through #333 1px;
        font-weight: 400;
        font-size: 12px;
        color: #000
    }

    .fp_price ._type {
        font-size: 9px;
        width: 40%;
        font-weight: 400;
        line-height: normal;
        /* height:3px; */
    }

    .fp_price ._currency {
        width: 10%;
        font-size: 10px;
        text-align: left;
        font-weight: 400;
        line-height: normal;
    }

    .fp_price .retail {
        border-bottom: #666 1px solid;
    }

    .fp_price .memberprice {
        border-bottom: #b6b2f0 1px solid;
    }

    .fp_price .vip  {
        border-bottom: #7e529c 1px solid;
    }

    .fp_price .retail ._type {
        background: #666;
        color: #f1f1f1;
    }


    .fp_price .memberprice ._type {
        background: #b6b2f0;
    }

    .fp_price .vip ._type {
        background: #7e529c;
        color: #f1f1f1;
    }
.checkout_price{
    font-size:11px;
    font-weight:500
}
.checkout_orgprice {
    text-decoration: line-through #333 1px;
    font-size: 11px;
    font-weight: 400;
    color: #999
}
.cart-form .total {
    padding: 5px 10px
}

.Subtotal .price, .Shipping .price {
    font-size: 13px;
    font-weight: 400
}
.hiddenprice{
    display:none

}
showprice {
    display: block
}.acctype {
    display: none
}
    .acctype._price {
        display: block;
    }
        .acctype._price.VIP {
            display: none;
        }

    .acctype._vip.VIP {
        display: block;
    }

/**CHECKOUT Payment*/
.checkout-payment._productlist{



}

.checkout-payment._productlist ._title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    color: #232323;
    background-color: #d2c8ff;
    text-transform: uppercase;
    text-align: center;
    padding: 9px 15px 7px;
    line-height: 21px;

}
    .checkout-payment._productlist ._summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 3px 10px;
        border-bottom: 1px solid #dee2e6;

    }
    .checkout-payment._productlist ._name{
        font-size:12px;   
        font-weight:500;
    }
        .checkout-payment._productlist ._name p {
            font-size: 12px;
            font-weight: 100

        }
    .checkout-payment._productlist ._amount {
        font-size: 12px;
        font-weight: 500
    }

    .checkout-payment._productlist ._totalsummary {
        display: flex;
        justify-content: space-between;
        padding: 3px 10px 0px 0px;
    }

._totalend {
    height: .5px;
    background: #ccc;
    width: 50%;
    margin: 2px 0;
    margin-left: 50%;
}

.checkout-payment._productlist ._stitle {
    font-size: 12px;
    font-weight: 400;
    padding: 0px 25px;
    text-align: left;
    padding-left: 60%;
}

    .checkout-payment._productlist ._tamount {
        font-size: 12px;
        font-weight: 600;

    }

.checkout-payment._shipping {
    font-size: 10px;
    letter-spacing: .05em;
    color: #232323;
    border: #d2c8ff 1px solid;
    text-transform: uppercase;
    padding: 9px 15px 7px;
    line-height: 21px;
}
    .checkout-payment._shipping ._title {
        display: inline-flex;
        font-size: 12px;
        text-decoration: underline;
        background: #d2c8ff;
        width: 100%;
        padding:2px 5px;
    }
        .checkout-payment._shipping ._title i {
           padding-right:10px;
        }


@media screen and (max-width: 992px) {
    .main_menu > li a {
        width: 70px;
    }

    .main_menu > li:first-child a {
        width: 40px;
    }

    .main_menu > li:nth-child(2) a {
        width: 80px;
    }

    .main_menu > li:nth-child(3) a, .main_menu > li:nth-child(4) a,
    .main_menu > li:nth-child(5) a, .main_menu > li:nth-child(6) a {
        width: 85px;
    }

    .main_menu > li:nth-child(7) a {
        width: 70px;
    }
}



.checkout-payment._productlist .text-danger {
    font-size: 0.85em;
    background: linear-gradient(90deg, #fce3ec, #ffe8cc);
    color: #ff2200;
    padding: 0.1rem 0.3rem 0.2rem;
    border-radius: 0.2rem;
}

#animationSandbox p {
    font-size: 0.7em;
    line-height: 16px
}


.top-text-wrapper {
    margin: 20px 0 0px 0;
}

    .top-text-wrapper h4 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .top-text-wrapper p {
        font-size: 0.85em;
        background: linear-gradient(90deg, #d2c8ff, #9d7dd4);
        color: #000;
        padding: 0.1rem 0.3rem 0.2rem;
        border-radius: 0rem;
        margin-bottom:10px;
    }

.tab-section-wrapper {
    padding: 1px 0;
}

.grid-wrapper {
    display: grid;
    grid-gap: 30px;
    place-items: center;
    place-content: center;
    align-content: center;
    justify-content: center;
    justify-items: stretch;
}

.grid-col-auto {
    grid-template-columns: repeat(auto-fill, minmax(280px, 0.1fr));
    grid-auto-flow: column;
    grid-template-rows: auto;
}

/* ******************* Main Styeles : Radio Card */


label.billingOptions {
    cursor: pointer;
    width: 100%;
}
    label.billingOptions .card-content-wrapper {
        background: #fff;
        border-radius: 5px;
        max-width: 100%;
/*        min-height: 330px;*/
        padding: 15px;
        display: grid;
        box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.04);
        transition: 200ms linear;
    }

label.billingOptions .check-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    border: solid 2px #e3e3e3;
    border-radius: 50%;
    transition: $transition;
    position: relative;
}
    label.billingOptions .check-icon:before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.93552 4.58423C0.890286 4.53718 0.854262 4.48209 0.829309 4.42179C0.779553 4.28741 0.779553 4.13965 0.829309 4.00527C0.853759 3.94471 0.889842 3.88952 0.93552 3.84283L1.68941 3.12018C1.73378 3.06821 1.7893 3.02692 1.85185 2.99939C1.91206 2.97215 1.97736 2.95796 2.04345 2.95774C2.11507 2.95635 2.18613 2.97056 2.2517 2.99939C2.31652 3.02822 2.3752 3.06922 2.42456 3.12018L4.69872 5.39851L9.58026 0.516971C9.62828 0.466328 9.68554 0.42533 9.74895 0.396182C9.81468 0.367844 9.88563 0.353653 9.95721 0.354531C10.0244 0.354903 10.0907 0.369582 10.1517 0.397592C10.2128 0.425602 10.2672 0.466298 10.3112 0.516971L11.0651 1.25003C11.1108 1.29672 11.1469 1.35191 11.1713 1.41247C11.2211 1.54686 11.2211 1.69461 11.1713 1.82899C11.1464 1.88929 11.1104 1.94439 11.0651 1.99143L5.06525 7.96007C5.02054 8.0122 4.96514 8.0541 4.90281 8.08294C4.76944 8.13802 4.61967 8.13802 4.4863 8.08294C4.42397 8.0541 4.36857 8.0122 4.32386 7.96007L0.93552 4.58423Z' fill='white'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-size: 12px;
        background-position: center center;
        transform: scale(1.6);
        transition: 200ms linear;
        opacity: 0;
    }

    label.billingOptions input[type='radio'] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        border: none;
        height: 10px;
    }
    label.billingOptions input[type=radio] + .card-content-wrapper {
        box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.5), 0 0 0 2px #ccc;
    }
    label.billingOptions input [type='radio']:checked {
    }
    label.billingOptions input[type=radio]:checked + .card-content-wrapper {
        box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.5), 0 0 0 2px #9d7dd4;
    }

        label.billingOptions input[type=radio]:checked + .card-content-wrapper .check-icon {
            background: #7e529c;
            border-color: #7e529c;
            transform: scale(1.2);
        }
label.billingOptions input[type=radio]:checked + .card-content-wrapper .check-icon:before {
    transform: scale(1);
    opacity: 1;
}


.label.billingOptions .check-icon:focus {
}
    .label.billingOptions .check-icon:focus .card-content-wrapper {
    }
.label.billingOptions .check-icon {
    box-shadow: 0 0 0 4px rgba(48, 86, 213, 0.2);
    border-color: #3056d5;
}


.label.billingOptions .card-content {
    text-align: center;
}
label.billingOptions .card-content img {
    margin-bottom: 10px;
}
label.billingOptions .card-content .payment-img {
    text-align: center
}
label.billingOptions .card-content .payment-img img {
    width: 45px;
    height: auto;
    padding: 15px 5px 10px 0px;
    margin-bottom: 0px;
    text-align: center
}
label.billingOptions .card-content .payment-imgAtome {
    width: 60%;
    padding: 2px 0;
    margin: -5% 0 0 40%;
}

label.billingOptions input[type=radio]:checked + .card-content-wrapper .check-icon em {
    padding-left: 30px;
}

label.billingOptions ._noticebox {
    justify-content: space-evenly;
    flex-direction: column;

}
label.billingOptions ._noticebox  div{
    width:100%;
    margin:5px 0 0 0
}
label.billingOptions ._notice {
    font-size: 0.85em;
    /*  background: linear-gradient(90deg, #aad961, #95D03A);*/
    background: linear-gradient(90deg, #edf2f9, #e2ebf6);
    color: #000;
    padding: 0.1rem 0.3rem 0.2rem;
    border-radius: 0.2rem;
}
._noticeinst {
    font-size: 0.85em;
    background: linear-gradient(90deg, #d9f8eb, #c8eddd);
    color: #000;
    padding: 0.1rem 0.3rem 0.2rem;
    border-radius: 0.2rem;
}
label.billingOptions ._noticewallet {
    font-size: 0.85em;
    background: linear-gradient(90deg, #f7b84b, #ffe8cc);
    color: #000;
    padding: 0.1rem 0.3rem 0.2rem;
    border-radius: 0.2rem;
    margin:2px 0 8px 38px;
}
._payname {
    margin-top: -20px;
    margin-left: 40px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
}
    ._payname span {
        color: #333;
        font-size: 12px;
        font-weight: 400;

    }

._btnaction {
    margin-top: 12px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    border-top:#d2c8ff solid 1px;
    padding-top:10px;
}
    ._btnaction .dropdown {
        margin-left: 0px; 
    }
._btnaction div {
    width:auto;
    padding:0 0px 0 5px;

}


   .btn-tpwallet {
        margin: -80px 0 0 0;
   /*     background: #9d7dd4*/
    }

._btnaction .btn.btn-secondary:hover{
    background:#333;
    color:#ccc
}


@media screen and (max-width: 770px) {
    .fp_price {
        padding: 0px 0px 0px 0px;
    }
    .cart_checkout .btn-actions .btn-checkout {
        padding: 13px 15px 10px;
        height:45px;
    }
    .cart_checkout input, .cart_checkout select, .cart_checkout textarea {
        border: 1px solid #999;
        border-radius: 0px;
        height: 30px;
        padding: 5px 10px;
        color: #000
    }

    .cart_checkout .box-title-cartpurple {
         padding: 2px 0px 0px;
         font-size:11px;
         margin:2px 0 !important
    }

    .cart-details .product-name span {
        font-size: 10px;
        margin-top: 5px;
    }

    .price-box div {
        width: 100px;
        padding: 0px;
        margin-right: 0px;
        font-size: 10px;
        font-weight: bolder
    }

    .price-box .VIPPrice p,
    .price-box .Price p,
    .price-box .SellingPrice p {
        padding: 0 5px;
        margin: 1px 4px;
        font-size: 8px;
        font-weight: 500
    }

    .quantity input[type="text"] {
        width: 40px;
    }

    .wrapper-cart-template .cart-list .quantity label {
        margin: 1px;
        font-size: 9px;
    }

    ._totalend {
        width: 55%;
        margin-left: 45%;
    }
    .checkout-payment._productlist .name p{

    }
    .checkout-payment._productlist ._name,
    .checkout-payment._productlist ._name p {
        font-size: 9px;
        line-height: 16px;
        display: flex;

    }
        .checkout-payment._productlist ._name p {
            padding-left: 5px;

        }
    .checkout-payment._productlist ._stitle {
        padding-left: 50%;
        font-size: 10px;
    }

    .checkout-payment._productlist .text-danger {
        font-size:8px;
        line-height: 12px;
        letter-spacing: .05em;
        padding:3px 20px;
        margin:5px ;
    }

    .checkout-payment._productlist ._title{
        font-size:10px;
        padding:2px;
        margin:5px 0 0 0;
    }
    .checkout-payment._productlist ._totalsummary {
        padding: 0px 10px 0px 0px;
        font-size: 10px;
        line-height: 16px;
    }
    .checkout-payment._productlist ._tamount,
    .checkout-payment._productlist ._amount {
        font-size: 10px;
             line-height: 16px;
    }

    .checkout-payment._shipping {
        color: #232323;
        border: none;
        text-transform: uppercase;
        padding: 0;
        line-height: 14px;
        text-align: center;
        border: 1px #d2c8ff solid
    }
        .checkout-payment._shipping ._title {
            font-size: 10px;
            text-decoration: none;
            text-align: center;
            margin: 0 0 2px 0;

        }
        .checkout-payment._shipping i {
            font-size: 14px !important;
        }
        .checkout-payment._shipping ._addr {
            padding: 0 0 2px 0;
            margin: 0 0 2px 0;

        }

    .top-text-wrapper {
        margin: 10px 0 0px 0;
    }

    #animationSandbox p {
        font-size: 9px;
        line-height: 12px;
        padding: 1px 0;
    }

    ._btnaction {
        margin: 5px 0 0 0;
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
    }
    ._btnaction .btn {
     width:100%;
     margin:5px 0;
    }
    label.billingOptions .card-content-wrapper{
        padding:5px;
        margin:0px 10px 10px 10px; 
    }
    label.billingOptions .check-icon {
        width: 16px;
        height: 16px;
    }
    label.billingOptions ._payname {
        margin-left: 25px;
        font-size: 10px;
        font-weight: 500;
    }
    ._payname span {
        font-size: 10px;
        line-height:10px;
    }
    label.billingOptions .card-content .payment-img img {
        width: 36px;
        padding: 1px;
    }
    label.billingOptions ._noticebox div {
        margin: 2px 0 0 0;
    }

    label.billingOptions ._notice p, label.billingOptions ._noticeinst {
        line-height: 13px;
        font-size: 9px;
    }
    label.billingOptions ._noticewallet {
        margin: 0;
        font-size: 9px;
        padding: 1px 5px
    }
    .btn-tpwallet {
        margin: -55px 0 0 0;
        padding: 3px 15px;
        font-size:12px
    }
    ._rbAtome {
        margin-top: -20px;
    }
    label.billingOptions .card-content .payment-imgAtome {
        width: 90%;
        padding: 2px 0;
        margin: -18px 0 0 5%;
    }
    label.billingOptions .card-content img {
        margin-bottom: 0px;
        width:100%;
    }

    }

