.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; }



/* modal feedback */

.modal-feedback   { box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; line-height: normal; }
.modal-feedback * { box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; }
.modal-feedback .container                      { width: 375px; background: #fff; padding: 50px 40px 40px; }
.modal-feedback .container  h2                  { font-size: 24px; color: #282828; padding-bottom: 40px; }
.modal-feedback .feedback-category              { overflow: hidden; margin-bottom: 18px; }
.modal-feedback .feedback-category:after        { display: block; content: ""; clear: both; }
.modal-feedback .feedback-category .description { display: block; color: #282828; padding-bottom: 8px; font-size: 12px; }
.modal-feedback .rate-scale                     { font-size: 0; border-bottom: 1px solid #ccc; position: relative; margin: 0 -9px; padding: 0 0 9px 0; }
.modal-feedback .rate-scale .selected-highlight { -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; height: 2px; width: 12px; position: absolute; left: -8px; bottom: 0; background: #ffbc2d; }
.modal-feedback .rate-scale .rate               { display: inline-block; vertical-align: top; text-align: center; cursor: pointer; width: 10%; }
.modal-feedback .rate-scale .rate > span        { padding: 0 3px; font-size: 12px; color: #282828; }
.modal-feedback .rate-scale .rate.selected span { color: #228dcf; }
.modal-feedback .feedback-comment               { display: block; width: 100%; height: 70px; font-size: 12px; outline: 0; border: 1px solid #ccc; border-radius: 4px; resize: none; padding: 6px; color: #282828; margin: 30px 0; }
.modal-feedback .button                         { width: 100%; }


/* modal payment required */

.modal-payment-required            { position: fixed; z-index: 200; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.5); overflow-y: auto; }
.modal-payment-required            { display: none; }
.modal-payment-required .container { position: relative; margin: 100px auto 20px; background-color: #fff; }
.modal-payment-required .container { width: 300px; padding: 30px; }
.modal-payment-required .inner     { margin-top: 20px; }
.modal-payment-required .message   { margin-bottom: 20px; font-size: 20px; color: #ef4949; }
.modal-payment-required .button    { width: 100%; margin-top: 30px; }