#header-user-menu,
#header-user-menu-login {
  float: right;
  cursor: pointer;
}

#header-user-menu .left,
#header-user-menu-login .left {
  float: left;
  width: 167px;
  margin-top: 8px !important;
}

#header-user-menu .center,
#header-user-menu-login .center {
  float: left;
  width: 44px;
  margin: 0 10px;
}

#header-user-menu .center img,
#header-user-menu-login .center img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}

#header-user-menu .right,
#header-user-menu-login .right {
  font-family: "Libre Franklin";
  float: left;
  width: 200px;
}

#header-user-menu .right .user-fullname,
#header-user-menu-login .right .user-fullname {
  font-family: "Libre Franklin";
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

#header-user-menu .right .user-username,
#header-user-menu-login .right .user-username {
  font-size: 12px;
}

#user-profile .left {
  float: left;
  width: 33%;
  margin-right: 1% !important;
}

#user-profile .left img {
  width: 100%;
  height: auto;
}

#user-profile .right {
  float: left;
  width: 66%;
  padding: 0 2%;
}

#user-profile .right .info {
  line-height: 36px;
}

#user-profile .right .info span {
  font-weight: bold;
  text-transform: capitalize;
  padding-right: 10px;
}

#user-profile .right .info label {
  display: block;
  font-weight: bold;
  text-transform: capitalize;
  padding-right: 10px;
}

#user-profile ul.actions {
  clear: both;
  margin: 0;
  padding: 0;
  margin-top: 50px;
}

#user-profile ul.actions li {
  margin: 0;
  padding: 0;
  display: inline-block;
  margin-right: 1%;
  list-style: none;
}

#user-profile ul.actions li a.logout {
  background-color: red;
  color: white;
}

#user-profile .left figure {
  margin-bottom: 25px;
}

#user-profile .left figure img {
  border-radius: 50%;
}

#user-profile .left .user-avatar {
  display: none;
}

#user-profile .left .upload-image,
#user-profile .left .profile-btn a {
  display: block;
  cursor: pointer;
  margin-bottom: 10px;
}

#user-profile .right .submit {
  margin-top: 50px;
}

#user-profile .right .submit input {
  display: block;
  cursor: pointer;
  width: 100%;
}

#user-profile .right .submit input.disabled {
  cursor: not-allowed;
  background-color: #efefef;
  color: white;
}

#user-profile .display_name select {
  width: 100%;
}

#user-profile .user_pass input {
  width: 50%;
}

#user-profile .user_pass .password-strength-indicator {
  width: 48%;
  margin: 0 1%;
}

#user-profile .user_pass .password-strength-indicator .strength i {
  padding-right: 1%;
}

#user-profile .user_pass .very-weak {
  color: red;
  border-bottom: 2px solid red;
}

#user-profile .user_pass .very-weak {
  color: #de0018;
  border-bottom: 2px solid #de0018;
}

#user-profile .user_pass .weak {
  color: #ed9400;
  border-bottom: 2px solid #ed9400;
}

#user-profile .user_pass .mediocre {
  color: #dfdf00;
  border-bottom: 2px solid #dfdf00;
}

#user-profile .user_pass .strong {
  color: #97c40d;
  border-bottom: 2px solid #97c40d;
}

#user-profile .user_pass .very-strong {
  color: #238f33;
  border-bottom: 2px solid #238f33;
}

#password-compare-msg {
  position: relative;
  font-size: 14px;
  padding-right: 0 !important;
}

#password-compare-msg span {
  padding: 8px 14px;
}

#password-compare-msg span.error::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent red transparent transparent;
}

#password-compare-msg span.success::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent green transparent transparent;
}

#user-profile .user_pass_actions {
  margin-bottom: 50px;
}

#user-profile .user_pass_actions .view-pass,
#user-profile .user_pass_actions .viewing-pass {
  cursor: pointer;
}

#user-profile .user_pass_actions .view-pass i {
  font-size: 20px;
  border-radius: 2px;
  border: 2px solid #9a9a9a;
  color: #9a9a9a;
  padding: 5px;
}

#user-profile .user_pass_actions .viewing-pass i {
  font-size: 20px;
  border-radius: 2px;
  border: 2px solid #9a9a9a;
  background-color: #9a9a9a;
  color: white;
  padding: 5px;
}

#user-profile .user_extra {
  float: left;
  width: 32%;
  margin-right: 1%;
}

/* Messages Display */
#user-profile .right .status {
  border: 2px solid red;
  padding: 4px 0;
}

#user-profile .right .status.error .label {
  background-color: red;
  padding: 8px 15px;
  color: white;
  font-size: 14px;
  font-weight: bold;
}

#user-profile .right .status.error .message {
  padding: 5px 15px;
  color: red;
}

#user-profile .right .status.success .label {
  background-color: green;
  padding: 8px 15px;
  color: white;
  font-size: 14px;
  font-weight: bold;
}

#user-profile .right .status.success .message {
  padding: 5px 15px;
  color: green;
}