﻿/* All Page */
.eye{cursor:pointer;position:absolute;top:10px;right:14px;font-size:20px;color:#c9c9c9}
.eye .eye_show{display:none}
.user{display: flex; justify-content: space-between;}
/* Left Menu */
.user_navbar{min-width:243px;background-color:#f5f5f5;border-radius:16px;padding:20px 0;height:fit-content}
.user_nav > a{width:100%;display:flex;align-items:center;justify-content:space-between;line-height:45px;padding:0 14px;margin:10px 0}
.user_nav > a.active,.user_nav > a:hover{color:#107dff;background-color:#d9eaff}
.user_nav > a .image{}
.user_nav > a .title{width:70%;text-align:left}
.user_nav > a .icon{font-size:24px}

.user_main{margin: 0 24px; flex-grow: 1; width: min-content;}

/* Right Products */
.user_main_right{min-width:280px; display:block;}
.user_main_right .shop{text-align:center;color:white;height:82px}
.user_main_right figure{position:relative;width:100%;}
.user_main_right figure img{width:100%;height:100%}
.user_main_right figure figcaption{position:absolute;bottom:0;width:100%}
.user_main_right .shop a{display:block;color:white}
.user_main_right .shop b{width:100%;display:block;margin-bottom:4px}
.user_main_right .shop .coupon{font-size:12px;display:flex;align-items:center;justify-content:center}
.user_main_right .shop span{color: #f98c15;font-size: 14px;margin-left: 10px;}

/* Login */
.login_signup_bg{background-image:url(/Content/images/test/login_signup_bg.jpg);width:100%;background-size:cover;height:100%;position:fixed;overflow:auto}
.login_signup_bg .login{padding-top:174px;margin-bottom:120px}
.login_modal{max-width:535px;background-color:white;border-radius:20px;padding:0 34px;padding-bottom:52px}
.login_modal .login_text{padding-top:60px;text-align:center}
.login_modal .login_text p:first-child{font-size:32px;margin-bottom:10px;}
.login_modal .login_text p:last-child{font-size:18px}
#forgot .modal-content{border-radius:20px}
#forgot .edit{display:none}

/* SignUp */
.login_signup_bg{background-image:url(/Content/images/test/login_signup_bg.jpg);width:100%;background-size:cover;height:100%;position:fixed;overflow:auto}
.login_signup_bg .signup{padding-top:57px;margin-bottom:120px}
.signup_modal{max-width:535px;background-color:white;border-radius:20px;padding:0 34px;padding-bottom:52px}
.signup_modal.registerinstaller{max-width:928px;display:none}
.form-check{font-size:14px}
.form-check a{font-size:14px;color:#107dff}
.ul_item a{width:180px;height:70px;border-radius:8px;padding-top:10px}
.signup .ul_item a{background-color:#60a7fb}
.signup .ul_item a:hover{background-color:#107dff}
.signup .ul_item a.active{background-color:#107dff}

/* Profile */
.profile .avatar{margin-right:75px}
.profile .avatar > img{width:155px;height:155px;border-radius:50%;border:1px solid #1e85ff}
.profile .avatar > a{display:block;width:155px;text-align:center}
.profile .detail{margin-top:35px;font-size:20px;width:100%;line-height:44px;}
.profile .content{display:flex;}
.profile .content .level{margin-top:60px;text-align:center;display:block;white-space:nowrap;margin-right:30px;}
.profile .content .level:nth-child(2){margin-left:36px;}
.profile .content .level:nth-child(2) img{height:45px;}
.address_title{font-size:20px;font-family:camptonSemibold}
.address_title > a{margin-left:30px}
/*.profile_address{display:flex;justify-content:flex-start;flex-wrap:wrap}*/
.address_list{border-radius:10px;border:1px solid #b7b7b7;padding:20px;margin-bottom:40px;position: relative;}
.profile_address  > div{padding:0 5px;}
.profile_address  > div:nth-child(1){padding-left: 0; padding-right:10px;}
.profile_address  > div:nth-child(2){}
.profile_address  > div:nth-child(3){padding-right:0; padding-left: 10px;}
.profile_address  > div:nth-child(4){padding-left: 0; padding-right:10px;}
.profile_address  > div:nth-child(5){}
.profile_address  > div:nth-child(6){padding-right:0; padding-left: 10px;}
.profile_address  > div:nth-child(7){padding-left: 0; padding-right:10px;}
.address_list .edit{position:relative}
.address_list .edit a:nth-child(1){color:#107dff}
.address_list .edit a:nth-child(2){position:absolute;right:0}
.address_list .edit a img{vertical-align:inherit}
.address_list .name span:nth-child(1){margin-right:30px}
.address_list .address{font-size:14px;}
.address_list .default{font-size:14px;display:flex;justify-content:flex-end;color:#7d7d7d;position: absolute;right: 10px;bottom: -30px;}
.address_list .default input{vertical-align: text-bottom;}
.address_list:nth-child(3n+3){margin-right:0}
.install_edit{}
.install_edit > div{padding:0 5px;}
.install_edit .item{height:160px;padding-top:38px;text-align:center;background-color:#f5f5f5;border-radius:10px;margin-bottom:20px;}
.install_edit > div:first-child{padding-left:0;padding-right:10px;}
.install_edit > div:last-child{padding-right:0; padding-left: 10px;}
.install_edit .item .title{font-size:20px;font-family:camptonSemibold}
.install_edit .item .bootstrap-select .dropdown-toggle .filter-option-inner-inner{text-align:center;color:#107dff}

#address_edit .bs_modal{background-color:white;border-radius:20px;padding:0 34px;padding-bottom:20px}
#address_edit .bs_modal .bs_text{padding-top:30px; font-size:32px; font-family:camptonSemibold;display:flex;align-items: center;}
#address_edit .bs_modal .bs_text p:first-child{font-size:32px;font-family:campton}
#address_edit .bs_modal .bs_text .close{margin-left: auto;}
#address_edit .modal-content{border-radius:20px}

#user_edit .bs_modal{background-color:white;border-radius:20px;padding:0 34px;padding-bottom:20px}
#user_edit .bs_modal .bs_text{padding-top:30px; font-size:32px; font-family:camptonSemibold;display:flex;align-items: center;}
#user_edit .bs_modal .bs_text p:first-child{font-size:32px;font-family:campton}
#user_edit .bs_modal .bs_text .close{margin-left: auto;}
#user_edit .modal-content{border-radius:20px}

/* Orders */
.orders{font-size:14px;background-color:#f7f7f7;border-radius:20px;display:flex;padding:20px 30px;margin-top:30px}
.orders .item{flex-grow:1; margin-bottom:14px;}
.orders .item .title{border-bottom:2px solid #ececec;color:#777777;display:flex;justify-content:space-between;padding-bottom:10px;position:relative;}
.orders .item .title span:nth-child(1){width:300px}
.orders .item .title span:nth-child(2){flex:auto}
.orders .item .title span:nth-child(3){color:#f98c15;}
.orders .item .title span.blue:nth-child(3){color:#107dff;}
.orders .item .content{border-bottom:2px solid #ececec;display:flex;align-items:center;padding:30px 0}
.orders .item .content .image{margin-right:20px;align-self:flex-start}
.orders .item .content .image img{width:100px}
.orders .item .content .product{flex-grow:1;width:min-content;align-self:flex-start}
.orders .item .content .product p:nth-child(1){margin-bottom:20px}
.orders .item .content .qty{margin-left:20px;width:100px;text-align:right;font-size:16px}
.orders .item .content .qty:nth-child(2){width:200px;}
.orders .item .bottom{display:flex;justify-content:space-between;margin-top:20px;font-size:16px}
.orders .right{display:flex;flex-direction:column;width:300px;padding-left:30px;align-items:center;justify-content:center}
.orders .right a{width:215px;line-height:30px;margin-bottom:14px;}
.orders .right a:last-child{margin-bottom:0;}
.orders .right a.link{background-color:transparent;color:black;border:1px solid #000}
@media screen and (max-width:1400px){
    .profile_address  > div:nth-child(1){padding-left: 0; padding-right:10px;}
    .profile_address  > div:nth-child(2){padding-right: 0; padding-left: 10px;}
    .profile_address  > div:nth-child(3){padding-right:10px; padding-left: 0;}
    .profile_address  > div:nth-child(4){padding-left: 10px; padding-right:0;}
    .profile_address  > div:nth-child(5){padding-left: 0; padding-right:10px;}
    .profile_address  > div:nth-child(6){padding-right:0; padding-left: 10px;}
    .profile_address  > div:nth-child(7){padding-left: 0; padding-right:10px;}
}
@media screen and (max-width:1340px) {
    .user_navbar {
        display: none;
    }
}
@media screen and (max-width:1200px) {
    .user{flex-direction: column;}
    .profile{display:flex}
    .profile .content{display:flex;}
    .profile .avatar {
        margin-right: 10px;
        text-align: center;
    }
        .profile .avatar > a {
            width: 120px;
        }
        .profile .content .level:nth-child(2) {
            margin-left: 10px;
        }
    .user_main {
        flex-grow: initial;
        width: auto;
        margin: 15px;
    }
    .orders_header, .collect_header {
        flex-direction: column;
    }
        .collect_header > div:first-child > span {
            margin-right: 0;
        }
    .search_a {
        margin-left: 0;
        width: 100%;
    }
        .search_a .search_box {
            margin: 0 auto;
        }
    .user_orders .nav {
        overflow-x: scroll;
        flex-wrap: nowrap;
    }
        .user_orders .nav li {
            white-space: nowrap;
        }
    .profile_address > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .user_main_right {
        display: flex;
        flex-wrap: wrap;
    }
    .user_main_right > div{
        padding: 0 15px;
    }
}
@media screen and (max-width:991px){
    .install_edit > div{
        padding: 0;
    }
    .install_edit > div:first-child {
        padding-right: 0;
    }

    .install_edit > div:last-child {
        padding-left: 0;
    }
}
@media screen and (max-width:767px){
    .orders_detail_1, .order_detail_2 {
        flex-direction: column;
    }
    .ordersdetail_price{
        width:100%;
    }
    .order_detail_2 .items {
        padding-right:0;
    }
    .order_detail_2 .return_replace {
        padding-left: 0;
        width:100%;
    }
    .order_detail{
        flex-direction: column;
    }
        .order_detail .right {
            padding-left: 0;
            width: 100%;
        }
}

@media only screen and (min-width: 1200px) {
    .user_main_right > div {
        width:100%;
    }
}