/*===========================
    29.PROFILE css 
===========================*/


.profile-area{}

.profile-sidebar-title{
    border-bottom: 1px solid rgba($heading-color, 0.1);
    padding: 12px 20px;

    & .title{
        font-size: 18px;
        font-weight: 700;
        color: $heading-color;

        & i{
            margin-right: 3px;
        }
    }
}


/*===== Profile Sidebar =====*/

.profile-sidebar{}

.profile-card{
    border: 1px solid rgba($heading-color, 0.1);
        
    & .profile-user{
        padding: 30px 20px 25px;
        
        & .profile-author{
            & img{
                width: 100px;
								height: 100px;
                border-radius: 100px;
            }
        }
        & .profile-author-name{
            padding-top: 10px;
            
            & .name{
                & a{
                    font-size: 18px;
                    font-weight: 600;
                    color: $heading-color;
                }
            }
            & .sub-title{
                font-size: 14px;
                color: $body-color;
            }
        }
    }
    
    & .profile-link{
        & ul{
            & li{
                
                & a{
                    display: block;
                    font-size: 16px;
                    color: $heading-color;
                    padding: 10px 20px;
                    @include transition(0.3s);
                    border-top: 1px solid rgba($heading-color, 0.1);
                    
                    & i{
                        margin-right: 5px;
                    }
                    
                    &.active,
                    &:hover{
                        background-color: $theme-color-2;
                        color: $white;
                        border-color: $theme-color-2;
                    }
                }
            }
        }
    }
}


/*===== Profile Dashboard =====*/

.profile-dashboard{
    border: 1px solid rgba($heading-color, 0.1);
}

.profile-dashboard-wrapper{
	padding-left: 20px;
	padding-right: 20px;
    
    & .row{
        & .dashboard-col{
            &:nth-child(3n+1){
                & .dashboard-stat{
                    background-color: $theme-color;
                }
            }
            &:nth-child(3n+2){
                & .dashboard-stat{
                    background-color: $theme-color-5;
                }
            }
            &:nth-child(3n+3){
                & .dashboard-stat{
                    background-color: $theme-color-7;
                }
            }
        }
    }
    
    & .dashboard-stat{
        padding: 30px 20px;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        z-index: 5;
        
        & .title{
            color: $white;
            font-size: 18px;
            font-weight: 600;
        }
        & p{
            color: $white;
            font-size: 14px;
            margin-top: 3px;
        }
        
        & i{
            font-size: 120px;
            color: $white;
            position: absolute;
            bottom: -25px;
            right: 10px;
            opacity: 0.2;
            z-index: -1;
        }
    }
}

/*===== Profile Ads Table =====*/


.profile-ads-table{
    & .table{
        & thead{
            & tr{
                & th{
                    border: 1px solid rgba($heading-color, 0.1);
                    padding: 8px 15px;
                    font-size: 16px;
                    font-weight: 600;
                    color: $heading-color;
                    
                    &.checkbox{
                        min-width: 40px;
                    }
                    &.items{
                        min-width: 220px;
                    }
                    &.category{
                        
                    }
                    &.price{
                        min-width: 100px;
                    }
                    &.status{
                        min-width: 112px;
                    }
                    &.action{
                        min-width: 157px;
                    }
                }
            }
        }
        & tbody{
            & tr{
                & td{
                    border: 1px solid rgba($heading-color, 0.1);
                    padding: 8px 15px;
                    vertical-align: middle;
                }
            }
        }
        
        & .check-box{
            & input[type="checkbox"]{
                display: none;

                & + label {
                    border-color: $heading-color;
                    margin: 0;
                }

                &:checked {
                    & + label {
                        border-color: $theme-color-2;
                    }
                }
            }
        }
        
        & .table-items{
            & .items-thumb{
							flex-basis: 70px;

                & img{
                    width: 70px;
                    height: 70px;
                    object-fit: cover;
                    object-position: center;
                }
            }
            & .items-content{
                padding-left: 15px;
                
                & .title{
                    & a{
                        font-size: 16px;
                        color: $heading-color;
                    }
                }
                & .review{
                    margin-top: 5px;
                    
                    & li{
                        display: inline-block;
                        font-size: 12px;
                        
                        & i{
                            color: #ffa800;
                        }
                        & span{
                            margin-left: 5px;
                        }
                    }
                }
            }
        }
        
        & .table-category,
        & .table-price{
            font-size: 14px;
            color: $heading-color;
        }
        
        & .table-status{
            font-size: 14px;
            color: $white;
            padding: 0 5px;
            line-height: 24px;
            display: inline-block;
            border-radius: 3px;
        }
        & .published{
            background-color: #fa3;
        }
        & .featured{
            background-color: #ec296b;
        }
        & .active{
            background-color: #00e682;
        }
        & .expired{
            background-color: #fb5b50;
        }
        & .sold{
            background-color: #1594ef;
        }
        
        & .table-action{
            & li{
                display: inline-block;
                
                & a{
                    width: 28px;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                    font-size: 13px;
                    color: $white;
                }
                
                &:nth-of-type(4n+1){
                    & a{
                        background-color: #00e682;
                    }
                }
                &:nth-of-type(4n+2){
                    & a{
                        background-color: #ff382b;
                    }
                }
                &:nth-of-type(4n+3){
                    & a{
                        background-color: #0ab2e6;
                    }
                }
                &:nth-of-type(4n+4){
                    & a{
                        background-color: #ec296b;
                    }
                }
            }
        }
    }
}


/*===== Edit Profile Form =====*/

.profile-edit{
    border: 1px solid rgba($heading-color, 0.1);
    
    & .profile-form{
        padding: 20px;
        padding-top: 0;
        
        & .single-form{
            & label{
                margin-bottom: 10px;
                font-size: 14px;
                color: $heading-color;
            }
            & textarea,
            & input{
                border: 1px solid rgba($heading-color, 0.1);
                border-radius: 0;
                font-size: 14px;
                height: 40px;
                @include transition(0.3s);
                
                &:focus{
                    border-color: $theme-color-2;
                }
            }
            
            & textarea{
                height: 200px;
            }
            
            & .nice-select {
                width: 100%;
                border-radius: 0;
                height: 40px;
                padding: 0 20px;
                border: 0;
                float: none;
                border: 1px solid rgba($heading-color, 0.1);

                &::after{
                    width: 8px;
                    height: 8px;
                    right: 20px;
                    border-color: $body-color;
                }

                & .current{
                    line-height: 36px;
                    font-size: 14px;
                    color: $body-color;
                }
                & .list{
                    width: 100%;
                    border-radius: 0;

                    & .option{
                        min-height: 30px;
                        line-height: 30px;

                        &.selected {}
                        &.focus {}
                        &:hover {}
                    }
                }
            }
        }
        
        & .custom-file{
            & [type="file"]{
                display: none;
            }
            
            & label{
                width: 100%;
                height: 40px;
                border: 1px solid rgba($heading-color, 0.1);
                position: relative;
                
                & span{
                    line-height: 40px;
                    padding: 0 20px;
                    font-size: 14px;
                }
                
                &::before{
                    content: "Browse";
                    position: absolute;
                    top: 0;
                    right: 0;
                    height: 40px;
                    line-height: 40px;
                    background-color: $theme-color-2;
                    padding: 0 15px;
                    font-size: 16px;
                    font-weight: 600;
                    color: $white;
                }
            }
        }
    }
}


/*===== My Ads =====*/


.profile-my-ads{
    border: 1px solid rgba($heading-color, 0.1);
}

.profile-my-ads-wrapper{
    padding: 20px;
    padding-top: 0;
    
    & .nav{
        padding-top: 10px;
        
        & .nav-item{
            & a{
                margin-top: 10px;
                height: 40px;
                line-height: 38px;
                padding: 0 20px;
                font-size: 14px;
                color: $heading-color;
                border: 1px solid rgba($heading-color, 0.1);
                @include transition(0.3s);
                
                &.active,
                &:hover{
                    background-color: $theme-color-2;
                    border-color: $theme-color-2;
                    color: $white;
                }
            }
        }
    }
}


/*===== Payments =====*/

.profile-payments,
.payments-invoice{
    border: 1px solid rgba($heading-color, 0.1);
}

.payments-method{
    padding: 20px;
    
    & .nav{       
        @media #{$xs}{
            display: block;
        }  
        @media #{$sm}{
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
        }
        
        & .nav-item{
            & a{
                height: 40px;
                line-height: 38px;
                padding: 0 20px;
                font-size: 14px;
                color: $heading-color;
                border: 1px solid rgba($heading-color, 0.1);
                @include transition(0.3s);
                display: block;
                background-color: $gray-2;
                
                & i{
                    margin-right: 3px;
                }
                
                &.active,
                &:hover{
                    background-color: $theme-color-2;
                    border-color: $theme-color-2;
                    color: $white;
                }
            }
        }
    }
    
    & .credit-card{
        padding: 0;
    }
    
    & .paypal{
        padding-top: 20px;
        
        & .title{
            font-size: 16px;
            font-weight: 600;
        }
        & .main-btn{
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            font-weight: 600;
            margin-top: 20px;
        }
        
        & p{
            margin-top: 25px;
            font-size: 14px;
            
            & strong{
                color: $heading-color;
            }
        }
    }
    
    & .bank{
        padding-top: 20px;
        
        & .bank-title{
            font-size: 16px;
            font-weight: 600;
        }
        & .card-text{
            margin-bottom: 0;
            margin-top: 20px;
            
            & dt{
                color: $heading-color;
                margin-bottom: 5px;
                font-size: 14px;
            }
            & dd{
                margin-bottom: 0;
                font-size: 14px;
            }
        }
        
        & p{
            margin-top: 25px;
            font-size: 14px;
            
            & strong{
                color: $heading-color;
            }
        }
    }
}


.payments-invoice-table{
    padding: 20px;
    
    & .table{
        & thead{
            & tr{
                & th{
                    padding: 8px 10px;
                    font-size: 15px;
                    font-weight: 600;
                    color: $heading-color;     
                    
                    &.invoice{
                        min-width: 100px;
                    }
                    &.category{
                        min-width: 90px;
                    }
                    &.date{
                        min-width: 130px;
                    }
                    &.price{
                        min-width: 80px;
                    }
                    &.due-date{
                        min-width: 100px;
                    }
                    &.action{
                        min-width: 90px;
                    }
                }
            }
        }
        & tbody{
            & tr{
                & td{
                    padding: 8px 10px;
                    font-size: 14px;
                    font-weight: 400;
                    color: $body-color; 
                    vertical-align: middle;
                }
            }
        }
    }
}





/*=====  =====*/
/*=====  =====*/
/*=====  =====*/