.header-profile { position: relative; line-height: initial; margin: 0 40px 0 20px; white-space: nowrap; }

.header-profile .user-profile                   { cursor: pointer; margin: 12px 0; font-size: 0; min-height: 36px; }
.header-profile .user-profile > *               { display: inline-block; vertical-align: middle; }
.header-profile .user-profile > .user-photo     { width: 36px; height: 36px; overflow: hidden; border-radius: 18px; margin-right: 10px; }
.header-profile .user-profile > .user-photo img { width: 100%; }
.header-profile .user-profile > .user-title                { min-width: 50px; max-width: 200px; }
.header-profile .user-profile > .user-title > *            { color: #282828; height: 18px; line-height: 18px; font-size: 12px; }
.header-profile .user-profile > .user-title > .user-name   { font-weight: bold; }
.header-profile .user-profile > .open-dropdown             { height: 36px; line-height: 36px; width: 18px; text-align: center; font-size: 18px; color: #228dcf; margin-left: 10px; }
.header-profile      .user-profile > .open-dropdown i.fa-angle-up   { display: none; }
.header-profile      .user-profile > .open-dropdown i.fa-angle-down { display: inline-block; }
.header-profile.open .user-profile > .open-dropdown i.fa-angle-down { display: none; }
.header-profile.open .user-profile > .open-dropdown i.fa-angle-up   { display: inline-block; }

@media screen and (max-width: 800px) {
	.header-profile .user-profile > .user-title     { display: none; }
}

.header-profile      .user-dropdown { display: none; opacity: 0; }
.header-profile.open .user-dropdown { display: block; opacity: 1; }

.user-dropdown            { background-color: #1f3c77; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.user-dropdown            { position: absolute; right: 0; top: 60px; min-width: 200px; font-size: 12px; }

.user-dropdown:before { content: ""; width: 10px; height: 10px; background-color: #1f3c77; }
.user-dropdown:before { position: absolute; right: 26px; top: 0; transform: translate(-50%, -50%) rotate(45deg); }

.user-dropdown .container   { padding: 10px 20px; font-size: 0; }
.user-dropdown .hr          { border-top: 1px solid #ccc; }
.user-dropdown .navlink     { display: block; line-height: 21px; font-size: 14px; color: #fff; text-decoration: none; }
.user-dropdown .navlink     { margin: 5px 0; }
.user-dropdown .navlink > i { margin-right: 10px; }

.user-dropdown form          { margin: 0 0 10px; padding: 0; }
.user-dropdown form > button { display: block; background-color: transparent; border: none; cursor: pointer; padding: 0; }

.user-dropdown .user                { display: flex; align-items: center; }
.user-dropdown .user > .photo       { margin-right: 10px; width: 30px; height: 30px; border-radius: 50%; display: block; }
.user-dropdown .user > .info        { font-size: 14px; color: #fff; text-align: left; }
.user-dropdown .user > .info > .sub { font-size: 12px; color: #ccc; }