@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 991px) {
    .page-title{
        font-size: 27px;
        margin-bottom: 1rem;
    }
    .account-right-main,
    .account-left-main{
        flex: 0 0 auto;
        width: 100%;
    }
    .account-left-main{
        position: relative;
    }
    .account-header-warpper{
        margin-bottom: .75rem;
    }
    .account-leftnav-listnav{
        position: absolute; top: calc( 100% + .5rem );
        left: calc(var(--bs-gutter-x) * .5);
        right: calc(var(--bs-gutter-x) * .5);
        z-index: 99;
        margin-top: 0;
        border-radius: .275rem;
        overflow: hidden;
        background-color: #fff;
        box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
        padding: 0rem .5rem 0;
        border: 1px solid #ccc;
    }
    .account-navtab-account{
        margin-bottom: 1rem;
    }
    .account-leftnav-listnav > li:first-child{
        margin-top: .65rem;
    }

    .account-leftnav-listnav > li:last-child{
        border-bottom: none;
    }
    .account-orderlist-box{
        padding: .5rem .75rem;
    }
    .account-order-btn-detail{
        line-height: 16px;
    }
    .account-form-warpper{
        padding: 1rem 1rem 1.5rem;
    }
    .account-form-line-bg{
        padding: 0;
        line-height: 18px;
        border-bottom: 1px solid var( --color-red);
    }
    .account-form-line-bg .form-control{
        border-bottom: none;
    }
    .account-form-line-bg .form-label{
        margin: 0 0 .15rem;
    }
    .account-header-title{
        font-size: 15px;
    }
    .account-header-btn{
        border: 1px solid #999;
        font-size: 12px;
        padding: .25rem .5rem;
    }


}

@media screen and (max-width: 767px) {
    .acocunt-orderlist-box{
        font-size: 13px;
        padding: .75rem .75rem;
        margin-bottom: 1rem;
    }
    .account-orderview-products-img{
        width: 60px;
    }
    .account-orderview-products-info{
        width: calc( 100% - 60px);
        font-size: 13px; line-height: 18px;
    }
    .account-orderview-products-info > *{
        flex: 0 0 auto;
        width: 100%;
        text-align: left;
        padding-left: 0 !important;
    }
    .account-orderview-products-info-price > *{
        display: inline-block;
    }
    .account-orderview-products-info-price .pro__price_active{
        margin-left: .75rem;
    }
    .account-orderview-footer-row-label{
        width: calc( 100% - 150px);
    }
    .account-orderview-footer-row-value{
        width: 150px;
    }
    .account-orderview-products-info-price{
        margin-bottom: .075rem;
    }
    .account-orderview-products-info-qty{
        display: none;
    }
    .account-adddress-box{
        padding: .5rem .35rem .5rem .75rem;
        line-height: 18px;
        font-size: 13px;
        border-radius: .375rem;
    }
    .account-adddress-box + .account-adddress-box{
        margin-top: 1rem;
    }
    .account-adddress-box-action{
        width: 40px;
    }
    .account-adddress-box-info{
        width: calc( 100% - 40px);
    }
    .account-adddress-box-action-btn{
        color: var( --color-red);
    }
    .acocunt-orderlist-box p{
        margin-bottom: .15rem;
    }
    .acocunt-orderlist-box-sku .badge{
        display: none;
    }
    .order-detail-status{
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-end;
        scrollbar-width: none;
    }


}
@media screen and (min-width: 768px) and ( max-width: 991px) {
    .account-leftnav-listnav{
        padding: 1rem;
    }
}
@media screen and (min-width: 992px) and ( max-width: 1200px) {
	
}
@media screen and (min-width: 1200px) and ( max-width: 1400px) {
	

}
@media screen and (min-width: 1200px){
    .account-order-navbarfilter{
        align-items: center;
    }
    .account-order-navbarfilter .navbar-brand{
        padding-top: 0; padding-bottom: 0;
    }
    .account-order-navbarfilter .navbar-nav .nav-link{
        padding: .5rem 1rem;
        line-height: 22px;
    }
    .account-order-navbarfilter .nav-item{
        position: relative;
    }
    .account-order-navbarfilter .navbar-nav .nav-link:hover,
    .account-order-navbarfilter .nav-item.active .nav-link{
        color: var( --color-red);
    }
    .account-order-navbarfilter .nav-item.active::before{
        position: absolute; left: 0; top: 100%; z-index: 1;
        content: ""; display: block;
        width: 100%; height: 2px;
        background-color: var( --color-red);
    }

}

@media screen and (min-width: 991px) {
	
}