/*=======================================================*/
.h-rtl .UserProfile {
    float: left;
}

.h-ltr .UserProfile {
    float: right;
}

.UserImg {
}

.UserProfile > ul {
}



.UserProfile > ul > li {
}

    .UserProfile > ul > li > a.UserLink:hover {
        text-decoration: none;
    }

    .UserProfile > ul > li > a {
        padding: 3px 18px;
        display: inline-block;
    }

        .UserProfile > ul > li > a > span:not(.UserName ) {
            display: inline-block;
            vertical-align: middle;
            text-align: left;
            padding: 0px 4px;
        }

        .UserProfile > ul > li > a > span.UserImg > img {
            width: 38px;
            border-radius: 50%;
        }

        .UserProfile > ul > li > a > span > span.CompanyName, .UserProfile > ul > li > a > span > span.UserName {
            color: #051133;
            font-weight: bold;
            display: block;
            font-size: 11px;
            text-align:center;
        }

.h-ltr .UserProfile > ul > li > ul {
    right: -2225px;
}

.h-rtl .UserProfile > ul > li > ul {
    left: -250px;
}




.UserProfile > ul > li > ul {
    bottom: 51px;
    position: absolute;
    background-color: #fff;
    border: 1px solid #d4d4d5;
    position: absolute;
    transition: all .6s ease-in-out;
}

    .UserProfile > ul > li > ul > li {
    }

.h-ltr .UserProfile > ul > li > ul > li > a {
    text-align: left;
}

.h-rtl .UserProfile > ul > li > ul > li > a {
    text-align: right;
}

.UserProfile > ul > li > ul > li > a {
    display: inline-block;
    padding: 7px 12px;
    border-bottom: 1px solid #d4d4d5;
    width: 215px;
    color: #353854;
    font-family: tahoma;
    text-decoration: none;
}

    .UserProfile > ul > li > ul > li > a:hover {
        background-color: #ededed;
        color: red;
        cursor: pointer;
        text-decoration: none;
    }

    .UserProfile > ul > li > ul > li > a > span {
        display: inline-block;
        vertical-align: middle;
    }

.h-rtl .UserProfile > ul > li > ul > li > a > span.icon {
    margin-left: 4px;
}

.h-ltr .UserProfile > ul > li > ul > li > a > span.icon {
    margin-right: 4px;
}

.UserProfile > ul > li > ul > li > a > span.icon {
    font-size: 16px;
    color: #566990;
}

.UserProfile > ul > li > ul > li > a > span.title {
}

.h-ltr .ToggleUserPart {
    right: 0 !important;
}

.h-rtl .ToggleUserPart {
    left: 0 !important;
}
/*=================================================================*/
.user-profile-img {
    max-width: 215px;
    max-height: 215px;
    background-size: contain;
}
.ChangePhoto > input{
    display:inline-block !important;

}

.ChangePhoto > #SavePhoto{
    display:inline-block !important;
    color:white;
    font-weight:bold;

}

.ChangeProfilePhoto {
    position: relative;  
}

#UserImage2 {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.ChangeProfilePhoto:hover #UserImage2 {
    opacity: 0.3;
}

.ChangeProfilePhoto:hover .middle {
    opacity: 1;
}

.ChangePhoto {
    background-color: #524f4b;
    color: white;
    font-size: 12px;
    padding: 5px 17px;
    cursor:pointer;
}