.hdr-right-block {
  .popover {
    width: 420px;
    max-width: none !important;

    &.bottom {
      left: auto !important;
      right: 5px !important;

      > .arrow {
        position: absolute;
        right: 33px;
        left: auto;
      }

      /* This represents the container for the popover content */
      .hdr-popover {
        padding-top: 10px;
        background-color: #FFFFFF;

        .hdr-popover-content {
          min-height: 220px;
        }

        .hdr-popover-text {
          margin-left: 10px;
          color: #000011;
        }

        .hdr-popover-name,
        .hdr-popover-email {
          margin-left: 10px;
          color: #333333;
          font-size: 14px;
          font-weight: bold;
        }

        .hdr-popover-email {
          margin-left: 10px;
          color: #888888;
          font-size: 14px;
          font-weight: normal;
        }

        a.hdr-settings-link {
          float: right;
          color: #888888;
          opacity: 0.5;

          &:hover {
            opacity: 0.75;
          }
        }

          .hdr-popover-footer {
            border-top: 1px solid $base-color;
            box-sizing: border-box;
            width: 100%;
            margin: 0 0;
            padding: 8px 8px;
            background-color: $neutral-color;
          }

          .history-link {
            color: $link-color;
            padding-right: 15px;
            &:hover {
              text-decoration: underline;
            }
          }
        }

      }

      .popover-content {
        margin: 0 0 !important;
        padding: 0 0 !important;
      }
    }
  }


.hdr-popover-avatar-block
{
  position: relative;
  border-radius: 15px 15px 0px 0px;
  margin-bottom: 15px;

  img {
    height: 96px;
    width: auto;
  }
}

.hdr-avatar-edit-button {
  position: absolute;
  display: table-cell;
  padding-top: 10px;
  bottom: 0;
  width: 96px;
  max-width: 96px;
  text-align: center;
  height: 36px;
  opacity: 0.6;
  background-color: $base-color;
  color: $base-color-light;

  a {
    text-decoration: none;
  }

  &:hover
  {
    opacity: 0.8;
  }
}

.hdr-content {
  padding-top: 5px;
  padding-bottom: 5px;

  a { color: #e0e0e0; }
  .hdr-title a:hover
  {
    a, a:hover {
      position: relative;
      top: 5px;
      text-decoration: none;
    }
  }
}