.user-profile { width: 28rem; display: flex; flex-direction: column; position: absolute; right: 100%; top: 0; height: 100vh; border-radius: 0.5rem; background: #272727; }
.user-profile__header { padding: 1rem; position: relative; min-height: 5rem; color: #ffffff; font-weight: bold;
    /* background: #ffffff; */
    /* background: url(/assets/images/background.png); */
    /* background-position: center; */
}

.user-profile__close { position: absolute; right: 1rem; top: 1rem; display: block; height: 3rem; width: 3rem; text-align: center; line-height: 3.4rem; text-decoration: none; font-size: 1.5rem; border-radius: 50%; color: #ffffff;  }
.user-profile__body { padding: 4rem 2rem; height: 100%; padding: 2rem; overflow: auto; }
.user-profile__title { margin-bottom: 1rem; font-size: 1.5rem; font-family: 'Avenir Next Bold'; }
.user-profile__desc { font-size: 1.375rem; }
.user-profile__footer { padding: 0; position: relative; background: #202020; }
.user-profile__footer .btn { padding: 1.5rem; width: 100%; text-align: center; border-radius: 0!important;}

.user-profile__form { padding-top: 3rem; width: 100%; }
.user-profile__pic { margin-bottom: 2rem; text-align: center; text-decoration: none; color: #999; display: block; }
.user-profile__pic > img { margin: 0 auto 1.25rem; height: 4.5rem; width: 4.5rem; border-radius: 50%; }
.user-profile .form-control { padding: 1rem; font-size: 1rem; }
.user-profile .form-label { margin: 0 0 0.25rem 0; color: #fff; font-size: 1rem; }
.user-profile .btn { box-shadow: none; border-radius: 0.5rem; min-width: 8rem; text-transform: none; }
.profile-score{
    color: #ffffff;
    display: flex;
    align-items: center;
    font-family: Calibri;
    font-style: normal;
    font-weight: bold;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
}
.profile-score .value{
    font-size: 2.5rem;
}

.profile-score div{
    margin: 0 0.15rem;
}
/* Desktop */
@media only screen and (max-width: 991px) {
    .user-profile { top: auto; bottom: 100%; right: 0; width: 100%; height: calc(100vh - 10.5rem); }
}


