.profile-page{

    .profile-header{

        .user_pic{
            position: absolute;
            bottom: -13px;
            z-index: 99;
        }
        .detail{
            margin-left: 250px;

            .u_name{
                @extend .m-l-20;
                @extend .m-b--80;               

                h4{
                    @extend .m-b-0;
                    @extend .m-t-0;
                }
            }           

            #m_area_chart{
                height: 250px;
                margin-bottom: -45px;
            }
        }
        .user_earnings{
            @extend .align-center;

            color: $grey-500;
            h4{
                @extend .m-t-0;                
            }
            span{
                @extend .displayblock;
            }

        }
    }
}

@media only screen and (max-width: 992px) {
    .profile-page{
        .profile-header{
            margin-bottom: 20px;
        }
        .user_earnings{
            display: none;
        }
    }
}

@media only screen and (max-width: 767px) {
    .profile-page{

        .profile-header{
            text-align: center;
            
            .user_pic{
                position: relative;
                top: 0;
                bottom: auto;
                margin: 0 auto;
            }
            .detail{
                margin: 0;
                padding-top: 15px;

                .u_name{
                    margin: 0;
                }

                #m_area_chart{
                    display: none;
                }
            }
        }

        .profile_tab{
            margin-top: 20px;
            .nav-link{
                font-size: 13px;
                padding: 9px 12px;
            }
        }
    }
}